- July 2nd, 2012
- 0 Comments
- My Favorite Programming Mistakes1
- Image Manipulation With jQuery And PHP GD8
- jQuery Plugin Checklist: Should You Use That jQuery Plug-In?9
- Commonly Confused Bits Of jQuery10
- Make Your Own Bookmarklets With jQuery11
- Behind The Scenes Of Nike Better World12
- Five Useful Interactive CSS/jQuery Techniques Deconstructed13
- Five Useful CSS/jQuery Coding Techniques For More Dynamic Websites14
- 10 Useful CSS/JS-Coding Solutions For Web-Developers15
- 40 Useful jQuery Techniques And Plugins18
- Develop A One-Of-A-Kind CSS/JS-Based Game Portfolio22
- Create An Animated Bar Graph With HTML, CSS And jQuery24
- Essential jQuery Plugin Patterns25
- Searchable Dynamic Content With AJAX Crawling30
Over my programming career, I have made a lot of mistakes in several different languages. In fact, if I write 10 or more lines of code and it works the first time, I’ll get a bit suspicious and test it more rigorously than usual. I would expect to find a syntax error or a bad array reference or a misspelled variable or something.
I like to classify these mistakes into three broad groups: cock-ups (or screw-ups in American English), errors and oversights. A cock-up is when you stare blankly at the screen and whisper â€œOopsâ€: things like deleting a database or website, or overwriting three-days worth of work, or accidentally emailing 20,000 people. Errors cover everything, from simple syntax errors like forgetting a
} to fatal errors and computational errors.
If you look at some of the code that has been released, though, we do seem to have taken a step backwards. In gaining easier access, we also became a bit sloppy with our code. Finding clearly structured, easy-to-maintain jQuery code is quite tough, which is why many plug-ins do the same thing. Writing one yourself is faster than trying to fathom what other developers have done.
Having this much choice makes it easy for us to pick and choose, which is where things go wrong. In most cases, we measure the quality of a solution by its convenience to us. Our main reasons for picking one solution over another are: Does it do what I need it to do? Does it look cool? Does it sound easy to use? Would I want to use it? Does it use the framework I’m committed to?
jQuery plug-ins provide an excellent way to save time and streamline development, allowing programmers to avoid having to build every component from scratch. But plug-ins are also a wild card that introduce an element of uncertainty into any code base. A good plug-in saves countless development hours; a bad plug-in leads to bug fixes that take longer than actually building the component from scratch.
Fortunately, one usually has a number of different plug-ins to choose from. But even if you have only one, figure out whether it’s worth using at all. The last thing you want to do is introduce bad code into your code base. The first step is to figure out whether you even need a plug-in. If you don’t, you’ll save yourself both file size and time.
All of which means that, unless you have some odd grudge against jQuery, those days are gone — you can actually get stuff done now. A script to find all links of a certain CSS class in a document and bind an event to them now requires one line of code, not 10. To power this, jQuery brings to the party its own API, featuring a host of functions, methods and syntactical peculiarities. Some are confused or appear similar to each other but actually differ in some way. This article clears up some of these confusions.
Perhaps one of the most talked about websites in the last 12 months has been Nike Better World. It’s been featured in countless Web design galleries, and it still stands as an example of what a great idea and some clever design and development techniques can produce.
In this article, we’ll talk to the team behind Nike Better World to find out how the website was made. We’ll look at exactly how it was put together, and then use similar techniques to create our own parallax scrolling website. Finally, we’ll look at other websites that employ this technique to hopefully inspire you to build on these ideas and create your own variation.
Besides learning how to accomplish these specific tasks, you’ll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. The solutions presented here are certainly not perfect, so any thoughts, ideas and suggestions on how you would solve these design problems would be very appreciated.
Interactivity can transform a dull static website into a dynamic tool that not only delights users but conveys information more effectively. In this post, we’ll walk through five different coding techniques that can be easily implemented on any website to provide a richer user experience. These techniques will allow you to better display difficult content, help users find information more effectively and provide meaningful UI cues without overwhelming the user: on-page text search, drag controls for oversized content, subtle hover effects, comment count bars and a full-page slider.
Websites often have search boxes to allow users to find content from their archives. But what if you want to find content on the given page? Information Architects
has had on-page text search that provides a great user experience. Let’s recreate this using jQuery.
Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from them; we can find interesting ideas and improve the quality of our work.
Over the last months we’ve been paying closer attention to interesting design techniques and coding solutions and tried to understand how each of these solutions work and how they can benefit other designers and developers. Such designs are often hard to find, so it would be great if you could suggest some solutions that are worth exploring in detail â€“ we’ll certainly cover them in our next posts!
Front-end development is a tricky beast. It’s not difficult to learn, but it’s quite difficult to master. There are just too many things that need to be considered; too many tweaks that might be necessary here and there; too many details to make everything just right. Luckily, developers and designers out there keep releasing useful tools and resources for all of us to learn, improve our skills and just get better at what we do.
Over the last year, Smashing Magazine has evolved. We’ve been publishing fewer lists and more in-depth articles about design and Web development. We have invited professionals and high-profile developers to write for us. We’ve been investing more resources in the quality and relevance of our articles. We’ve also explored new formats; and on weekends we’ve been publishing more inspirational pieces, leaving the in-depth articles to weekdays.
We’ve tried our best to fuel the growing appetite of our readers for more advanced articles, but recently we’ve been receiving more requests for carefully selected, useful round-ups. We are not big fans of lists either, but the format is useful and — if the resources are relevant — can be extremely helpful. Therefore, we’ve decided to add a couple of round-ups per month as a bonus to our regular articles. Instead of replacing the main articles, we will add round-ups on top of our regular schedule. If you don’t like round-ups or find them inappropriate, please feel free to skip them. How does this work for you?
In this post, we present 40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites. We look forward to your ideas and suggestions in the comments to this post.
CSS3 is coming. Although the browser support of CSS 3 is still very limited92, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. That’s a reasonable solution — after all it doesn’t make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features.
Before getting down to business, let’s talk about portfolios.
A portfolio is a great tool for Web designers and developers to show off their skills. As with any project, spend some time learning to develop a portfolio and doing a little research on what’s going on in the Web design industry, so that the portfolio presents you as an up to date, innovative and inspiring person. All the while, keep in mind that going with the flow isn’t necessarily the best way to stand out from the crowd.
One last thing before we dive into the mystery of my Web-based game portfolio. I use jQuery which has made my life much easier by speeding up development and keeping my code clean and simple.
In school, I hated math. It was a dire, dry and boring thing with stuffy old books and very theoretical problems. Even worse, a lot of the tasks were repetitive, with a simple logical change in every iteration (dividing numbers by hand, differentials, etc.). It was exactly the reason why we invented computers. Suffice it to say, a lot of my math homework was actually done by my trusty Commodore 64 and some lines of Basic, with me just copying the results later on.
These tools and the few geometry lessons I had gave me the time and inspiration to make math interesting for myself. I did this first and foremost by creating visual effects that followed mathematical rules in demos, intros and other seemingly pointless things.
There is a lot of math in the visual things we do, even if we don’t realize it. If you want to make something look natural and move naturally, you need to add a bit of physics and rounding to it. Nature doesn’t work in right angles or linear acceleration. This is why zombies in movies are so creepy. This was covered here before in relation to CSS animation105, but today let’s go a bit deeper and look at the simple math behind the smooth looks.
People in boardrooms across the world love a good graph. They go nuts for PowerPoint, bullet points and phrases like “run it up the flagpole,” “blue-sky thinking” and “low-hanging fruit,” and everything is always “moving forward.” Backwards is not an option for people who facilitate paradigm shifts in the zeitgeist108. Graphs of financial projections, quarterly sales figures and market saturation are a middle-manager’s dream.
How can we as Web designers get in on all of this hot graph action? There are actually quite a few ways to display graphs on the Web. We could simply create an image and nail it to a Web page. But that’s not very accessible or interesting. We could use Flash, which is quite good for displaying graphs?—?but again, not very accessible. Besides, designers, developers and deities110 2 are falling out of love with Flash. Technologies such as HTML5 can do many of the same things without the need for a plug-in. The new HTML5
<canvas> element could even be adapted to the task. Plenty of charting tools are online that we might use. But what if we wanted something a little more tailored?
There are pros and cons to the wide range of resources available to us, but this tutorial will not explore them all. Instead, we’ll create our graph using a progressively enhanced111 sprinkling of CSS3 and jQuery. Because we can.
Plugin development has evolved over the past few years. We no longer have just one way to write plugins, but many. In reality, certain patterns might work better for a particular problem or component than others.
Some developers may wish to use the jQuery UI widget factory116; it’s great for complex, flexible UI components. Some may not. Some might like to structure their plugins more like modules (similar to the module pattern) or use a more formal module format such as AMD (asynchronous module definition)117. Some might want their plugins to harness the power of prototypal inheritance. Some might want to use custom events or pub/sub to communicate from plugins to the rest of their app. And so on.
I began to think about plugin patterns after noticing a number of efforts to create a one-size-fits-all jQuery plugin boilerplate. While such a boilerplate is a great idea in theory, the reality is that we rarely write plugins in one fixed way, using a single pattern all the time.
Let’s assume that you’ve tried your hand at writing your own jQuery plugins at some point and you’re comfortable putting together something that works. It’s functional. It does what it needs to do, but perhaps you feel it could be structured better. Maybe it could be more flexible or could solve more issues. If this sounds familiar and you aren’t sure of the differences between many of the different jQuery plugin patterns, then you might find what I have to say helpful.
My advice won’t provide solutions to every possible pattern, but it will cover popular patterns that developers use in the wild.
What is a unit anyway? In the best case, it is a pure function that you can deal with in some way — a function that always gives you the same result for a given input. This makes unit testing pretty easy, but most of the time you need to deal with side effects, which here means DOM manipulations. It’s still useful to figure out which units we can structure our code into and to build unit tests accordingly.
Before we start, I’d like to pose a question: when was the last time you asked someone to review your code? Reviewing code is possibly the single best technique to improve the overall quality of your solutions, and if you’re not actively taking advantage of it, then you’re missing out on identifying bugs and hearing suggestions that could make your code better.
None of us write 100% bug-free code all of the time, so don’t feel there’s a stigma attached to seeking help. Some of the most experienced developers in our industry, from framework authors to browser developers, regularly request reviews of their code from others; asking whether something could be tweaked should in no way be considered embarrassing. Reviews are a technique like any other and should be used where possible.
Very frequently in Web development (and programming in general), you need to store a long list of boolean values (yes/no, true/false, checked/unchecked… you get the idea) into something that accepts only strings. Maybe it’s because you want to store them in
localStorage or in a cookie, or send them through the body of an HTTP request. I’ve needed to do this countless times.
The last time I stumbled on such a case wasn’t with my own code. It was when Christian Heilmann130 showed me his then new slide deck131 2, with a cool feature where you could toggle the visibility of individual slides in and out of the presentation. On seeing it, I was impressed. Looking more closely, though, I realized that the checkbox states did not persist after the page reloaded. So, someone could spend a long time carefully tweaking their slides, only to accidentally hit F5 or crash their browser, and then?—?boom!?—?all their work would be lost. Christian told me that he was already working on storing the checkbox states in
localStorage. Then, naturally, we endlessly debated the storage format. That debate inspired me to write this article, to explore the various approaches in depth.
Google’s robots parse HTML with ease; they can pull apart Word documents, PDFs and even images from the far corners of your website. But as far as they’re concerned, AJAX content is invisible.
- 1 #n1
- 2 #n2
- 3 #n3
- 4 #n4
- 5 #n5
- 6 #n6
- 7 #n7
- 8 #n8
- 9 #n9
- 10 #n10
- 11 #n11
- 12 #n12
- 13 #n13
- 14 #n14
- 15 #n15
- 16 #n16
- 17 #n17
- 18 #n18
- 19 #n19
- 20 #n20
- 21 #n21
- 22 #n22
- 23 #n23
- 24 #n24
- 25 #n25
- 26 #n26
- 27 #n27
- 28 #n28
- 29 #n29
- 30 #n30
- 31 http://coding.smashingmagazine.com/2011/07/07/my-favorite-programming-mistakes/
- 32 http://coding.smashingmagazine.com/2011/07/07/my-favorite-programming-mistakes/
- 33 http://coding.smashingmagazine.com/2011/07/07/my-favorite-programming-mistakes//#more-103967
- 49 http://coding.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
- 50 http://jquery.com/
- 51 http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
- 52 http://coding.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices//#more-719
- 53 http://coding.smashingmagazine.com/2011/04/05/image-manipulation-with-jquery-and-php-gd/
- 54 http://www.smashingmagazine.com/2011/04/05/image-manipulation-with-jquery-and-php-gd/
- 55 http://coding.smashingmagazine.com/wp-content/uploads/2011/04/sm_image_manipulation.zip
- 56 http://coding.smashingmagazine.com/2011/04/05/image-manipulation-with-jquery-and-php-gd//#more-91486
- 57 http://coding.smashingmagazine.com/2010/08/26/jquery-plugin-checklist-should-you-use-that-jquery-plug-in/
- 58 http://www.smashingmagazine.com/2010/08/26/jquery-plugin-checklist-should-you-use-that-jquery-plug-in
- 59 http://coding.smashingmagazine.com/2010/08/26/jquery-plugin-checklist-should-you-use-that-jquery-plug-in//#more-56924
- 60 http://coding.smashingmagazine.com/2010/08/04/commonly-confused-bits-of-jquery/
- 61 http://www.smashingmagazine.com/2010/08/04/commonly-confused-bits-of-jquery/
- 62 http://coding.smashingmagazine.com/2010/08/04/commonly-confused-bits-of-jquery//#more-56112
- 63 http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/
- 64 http://www.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/
- 65 http://jquery.com/
- 66 http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery//#more-37606
- 67 http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/
- 68 http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/
- 69 http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world//#more-104972
- 70 http://coding.smashingmagazine.com/2011/06/16/five-useful-interactive-css-jquery-techniques-deconstruted/
- 71 http://coding.smashingmagazine.com/2011/06/16/five-useful-interactive-css-jquery-techniques-deconstruted/
- 72 http://coding.smashingmagazine.com/2011/06/16/five-useful-interactive-css-jquery-techniques-deconstruted//#more-103795
- 73 http://coding.smashingmagazine.com/2010/09/21/5-coding-techniques-for-more-dynamic-websites/
- 74 http://www.smashingmagazine.com/2010/09/21/5-coding-techniques-for-more-dynamic-websites/
- 75 http://coding.smashingmagazine.com/2011/06/16/five-useful-interactive-css-jquery-techniques-deconstruted//#more-103795
- 76 http://coding.smashingmagazine.com/2009/07/06/10-useful-cssjs-coding-solutions-for-web-developers/
- 77 http://www.smashingmagazine.com/2009/07/06/10-useful-cssjs-coding-solutions-for-web-developers/
- 78 http://coding.smashingmagazine.com/2009/07/06/10-useful-cssjs-coding-solutions-for-web-developers//#more-8256
- 85 http://coding.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/
- 86 http://www.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/
- 87 http://coding.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins//#more-41738
- 92 http://www.findmebyip.com/litmus/
- 97 http://rss1.smashingmagazine.com/feed/
- 98 http://twitter.com/smashingmag
- 100 http://coding.smashingmagazine.com/2012/05/28/develop-a-one-of-a-kind-cssjs-based-game-portfolio/
- 101 http://coding.smashingmagazine.com/2012/05/28/develop-a-one-of-a-kind-cssjs-based-game-portfolio/
- 102 http://coding.smashingmagazine.com/2012/05/28/develop-a-one-of-a-kind-cssjs-based-game-portfolio/
- 105 http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/
- 107 http://coding.smashingmagazine.com/2011/09/23/create-an-animated-bar-graph-with-html-css-and-jquery/
- 108 http://startupista.com/corporate-bullshit-generator/
- 109 http://coding.smashingmagazine.com/2011/09/23/create-an-animated-bar-graph-with-html-css-and-jquery/
- 110 http://www.apple.com/hotnews/thoughts-on-flash/
- 111 http://coding.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/
- 112 http://coding.smashingmagazine.com/2011/09/23/create-an-animated-bar-graph-with-html-css-and-jquery/
- 113 http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
- 114 http://addyosmani.com/resources/essentialjsdesignpatterns/book/
- 115 http://docs.jquery.com/Plugins/Authoring
- 116 http://ajpiano.com/widgetfactory/
- 117 https://github.com/amdjs/amdjs-api/wiki/AMD
- 118 http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
- 124 http://github.com/bluesmoon/boomerang
- 130 http://twitter.com/#!/codepo8
- 131 http://icant.co.uk/talks/koc2011/
- 133 http://coding.smashingmagazine.com/2011/09/27/searchable-dynamic-content-with-ajax-crawling/
- 134 http://coding.smashingmagazine.com/2011/09/27/searchable-dynamic-content-with-ajax-crawling/
- 135 http://coding.smashingmagazine.com/2011/09/27/searchable-dynamic-content-with-ajax-crawling/