Many patterns are easily implemented thanks to standard code libraries, such as the JavaScript library jQuery, which we use frequently. The lazy initialization pattern, for example, is standard via jQuery’s $(document).ready() function—it delays the process of running the enclosed code until necessary. The observer pattern is made trivial thanks to .bind(), allowing objects to be notified automatically of changes in state. And the .each() method implements the iterator pattern, accessing every element of an aggregate object in turn.

The implementation of some other patterns requires a bit more effort on the part of the developer. For example, we used the LiveValidation library to perform client-side form validation quickly and easily. However, the code for doing this sort of thing often becomes repetitive. To ameliorate this, we created a helper library using the facade pattern, giving us access to the LiveValidation functions via a simpler, more streamlined interface. It permits us to instantiate a validation object and specify multiple options in a single line, and abstracts out common features, such as callbacks, allowing us to create or remove error messages with less overhead. With a good facade, longer validation code like this…

var options = { wait: 250 };
var name_validation = new LiveValidation( "name", options );
name_validation.add( Validate.Presence, { failureMessage: "Please enter your name."} );

var phone_validation = new LiveValidation( "phone", options );
phone_validation.add( Validate.Presence, { failureMessage: "Please enter the # of pharmacy."} );
phone_validation.add( Validate.Format,   { pattern: /^\(\d{3}\)\s\d{3}-\d{4}$/,
failureMessage: "Please enter in (###) ###-#### format."} );

…was shortened to…

LiveValidationHelper.createValidation("name", {
	presence: { failureMessage: "Please enter your name."}
});
LiveValidationHelper.createValidation("phone", {
	presence: { failureMessage: "Please enter the # of pharmacy."},
	format: { pattern: /^\(\d{3}\)\s\d{3}-\d{4}$/, failureMessage: "Please enter in (###) ###-#### format."}
});

The factory pattern is another pattern we frequently find useful. It provides for the encapsulation of the processes involved in the creation of objects. That is, we can code the creation of an object independent of its class. Specifically, we leverage this for encryption. It’s prudent to store passwords and other sensitive information in an encrypted format, rendering it indecipherable to attackers. We use a generic “encryption” class, which we can then extend to implement the details of a specific encryption algorithm, such as the Advanced Encryption Standard or MD5.

There are many other design patterns, but these are some of the ones we’ve found to be most useful. They provide a straightforward, standard way of approaching common problems, allowing us to solve them more quickly and easily than we would otherwise be able to. This allows us to dedicate more resources to more novel challenges, and ultimately, to provide the best value possible to our clients.

After you enjoy these awesome links, Tweet, write on our wall or leave a comment below to let us know what you think.

Marketing

How to track Google Instant in Google Analytics.

Instant Elements: Tom Lehrer’s “Elements Song,” with Google Instant.

And how about YouTube Instant?

Eight tools to help you manage social media content overload.

Programming

Programming tips I wish I knew earlier.

How to debug your jQuery code.

Custom styling of the SELECT Elements.

Check out our delicious tags to see what else we’re looking at.

We want to know what you think of our links.  Tweet, write on our wall or leave a comment below.

Design

Give users some credit.  They are not (all) idiots.

250 beautiful typography t-shirts.

Applying LEED principals to graphic design.

Marketing

Why tumblr trumps micro blogging.

Infographic: The Geosocial Universe

SEO

23 awesome SEO blogs everyone should read.

New marketing data: Top SEO objectives.

How long until Facebook passes Google in traffic.

It’s official: Yahoo’s results now come from Bing.

Qualitative web analytics: Heuristic evaluations rock!

Programming

Spritely: Flash-like animation with jQuery.

Seth Priebatsch: The game layer on top of the world.

12 standard screen patterns.

And don’t forget to check out our delicious tags to see what else we’re looking at.

We want to know what you think.  Tweet, write on our wall or leave a comment below.

Search

An in-depth look at search auto-suggestions.

Readers who liked this article also read…

Yahoo News testing related search results on news stories.

A Joint Policy Proposal for an open Internet.

Bringing sexy back to search.

Feeling lucky?

Using Google Earth to graffiti the planet.

Programming

Contrary to new survey, you should investigate location-based apps.

Ideas for iPhone apps.

Flip! A jQuery plugin v0.9.9.

Dynamic FAQ Section w/jQuery, YQL & Google Docs.

App icons on iPad and iPhone.

Marketing

Do we really need to be social on social media?

Take a walk on the client side.

3 ways Facebook’s pending page changes affect marketers.

Design

A man, a plan and a Sharpie: “The Great Typo Hunt.”

100 pages of images, fonts, & amusement!

Showcase of delicious coffee websites.

Beyond “I hate green:” Managing Productive Visual Design Reviews.

And don’t forget to check out our delicious tags to see what else we’re looking at.

The plan was to add Quicksand to the team page of our website, which is a great place for this type of application.

Smooth Shuffle

The idea behind Quicksand is to create an easy transition between sets of data that overlap at some point.  This seemed perfect for our team page because some of our employees work in more than one department, and it is very hard to visually represent that type of overlap in an easily understandable way.

I set up Quicksand on the team page so you can choose from six different categories, and the pictures for everyone in that category will shift over into a smaller group.  The shifting effect is really where the beauty of the plugin is, with each picture sliding smoothly into place.  Most of the work I put in to this project involved making sure all of the data groups were correct and making sure the site worked properly in all of the major Internet browsers.

Results

Everyone has been really pleased with how the team page turned out, and I think it makes sorting through our staff here much easier for visitors and clients.  This plugin has helped reshape our website and avoid navigation problems as we hire new people and the Mudbug Media team continues to grow.

Click here to see Quicksand in action on our team page.

Here are a few of the many, many websites the design team at Mudbug Media go to every day. Pretty much every designer contributed to these links, which are great resources for anyone involved with graphic design.

Usability Resources

jQuery Tools — This site features a collection of the most important user-interface components for today’s modern websites. The Demos section is extremely useful for designers to visually experience behaviors and functionality that help make a user-interface successful.

Pattern Tap — Pattern Tap was born out of love for the best user interface designs on the web.

UserPlus — UserPlus shares usability knowledge with web designers, web developers, usability specialists and all others interested in creating user-friendly websites. I particularly like their article on Information Architecture because it stresses the importance of defining a website’s structure before starting the visual and technical side of the design.

Color Resources

Kuler — Kuler is nice for both color inspiration and for building a color theme for a project. Color conversions are viewable simultaneously upon entering color values for HSB, RGB, CMYK and Hex colors. If you have values for one color model but need to translate it for another, Kuler makes things pretty easy. And you can save created themes, which is nice for future reference.

0to255 — This website is a color variations web app. It is a simple tool that helps web designers find lighter and darker colors based on any color.

Colour Lovers — Colour Lovers is a creative community where people from around the world create and share colors, palettes and patterns. This is a great site for color inspiration. I like to go to this site especially when I have one color in mind for a design, but need ideas for coordinating colors. They provide some great color combinations that I would never think of.

CSS Resources

Campaign Monitor — Guide to CSS Support in Email Clients — Designing a custom HTML email newsletter that renders consistently across the major email clients can be a very time consuming and tedious process. Campaign Monitor put together a time-saving guide of popular email clients across desktop, web and mobile email. When designers have issues trouble shooting e-newsletters, this is the first website I send them to.

CSS Tricks — CSS-Tricks is a web design community for CSS inspiration and other web-related technical resources.

Design Blogs / Technical Resources

Smashing Magazine — Smashing Magazine delivers useful and innovative information to web designers and developers. I read this website daily to learn new design techniques and see best practices, read about the latest trends in web development and get inspiration. I also follow them on Twitter and subscribe to their e-newsletter for all things web!

A List Apart — This website explores the design, development and meaning of web content with a special focus on web standards and best practices. The A List Apart Team consists of some of the best and brightest individuals in the web world including founder Jeffery Zeldman, creative director of Happy Cog and Eric Meyer, a semantician and technical editor.

Design Float — Design Float is a social media site dedicated to the design industry. Like Smashing Magazine, Design Float is a great resource for designers to gain insight and inspiration. It also takes advantage of the social media platform and allows designers to easily share these resources with one another.

Noupe — Another great resource I have bookmarked.

Design Galleries, Tutorials and Inspiration

Communication Arts — Communication Arts is a nice site to see work that people are creating across various design media, whether seasoned professionals or emerging young professionals. CA has a lot of inspiring things to see as well as interviews of professionals in the industry.

Design*Sponge — This website is dedicated to home and product design run by Brooklyn-based writer Grace Bonney. Design*Sponge is dedicated to covering student design; national, and international design shows. The website features do-it-yourself tutorials and interviews from a myriad of artists.

Jason Santa Maria — Jason Santa Maria is an extremely influential graphic designer that I just love. He has worked on projects that would be any graphic designer’s dream including Typekit, Objectified, WordPress, AIGA, A List Apart and Dictionary.com, just to name a few. He has a beautiful website and informative blog. I would encourage any designer not familiar with him to get familiar.

This list is by no means complete, but every link helps inspire and instruct us everyday.  What are your favorite design links?  Leave a comment below.  We’d love to hear from you.

Over the weekend, Adobe CTO Kevin Lynch finally responded, committing to improve performance, while Flash engineer Tinic Uro blogged about the improved performance of an upcoming version of Flash that addresses some of the myriad problems and drawbacks that inspired the “lazy” comment.

I think Jobs’s persistent trashing of Flash and refusal to allow it anywhere near Apple mobile products has finally hit home, but I don’t think there’s much Adobe can do about it.

Mobile Problems

I liked Flash in its earlier years as an accessory to the web. But as the web moves forward and becomes ever more mobile, Flash’s performance, cost, and proprietary nature creates a recipe for disaster as it nears ubiquity.

Open a Flash-heavy site on your laptop and you can literally watch the temperature shoot up to 180 degrees, the fans ramp up to maximum speed and your battery life plummet.

These responses rule out opening that site on your iPhone or iPad as it would quickly crash your device.  The future of the internet fits inside your pocket or in the bag across your shoulder, so as long as Flash remains as cumbersome as it is today it will necessarily get left behind.

Not Dead Yet

Flash still has some advantages.  Ninety percent of web development time is spent making sure the site is compatible with all versions of Internet Explorer, the most widely used web browser out there right now.

Since Flash looks the same on every site, except for mobile devices, it’s seen as a shortcut to instant compatibility.  But the overall drawbacks are beginning to drag down any site that relies too heavily on Flash to get by.

Other Options

We’re still years away from Flash’s demise, but in the meantime, I think there are a few different options out there right now that are faster, easier to work with and ultimately much better than Flash will ever be.

Flash is used for a lot of web interactivity, but things like jQuery are replacing that now.  Creating a site from scratch in good ol’ HTML and jQuery may require more work, but the site will load faster, run faster, use less power on laptops, look the same on mobile devices, and remain easier to maintain over the years. It also won’t cost you hundreds of dollars to get started.

YouTube has been the number one Flash user for years, but Youtube and Vimeo each recently launched HTML5 versions, giving that comparatively new video platform a serious foothold in the market.

As more developers see the advantages of ditching Flash, I think Adobe will have its hands full playing catch up to try to keep Flash viable, but I think we’ll see a Flash-free internet within 10 years… apart from Adobe’s home page.