Useful JavaScript Libraries and jQuery Plugins For Web Developers. Advertisement If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem.
Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren’t a big fan of cross-browser debugging. A JavaScript library isn’t always the best solution: it should never be a single point of failure for any website, and neither should a website rely on JavaScript making the content potentially inaccessible. Progressive enhancement is our friend; sometimes JavaScript won’t load properly, or won’t be supported — e.g. users of mobile devices might run into latency issues or performance issues with some JavaScript-libraries.
Often large all-around JavaScript libraries such as jQuery might be an overkill, while tiny JavaScript micro-libraries could serve as good, “light” alternatives for a particular problem. Quick Overview: Web Forms and Input Validation Little Time-Savers. JavaScript Events And Responding To The User. Advertisement Whenever people ask me about the most powerful things in JavaScript and the DOM, I quickly arrive at events.
The reason is that events in browsers are incredibly useful. Furthermore, decoupling functionality from events is a powerful idea, which is why Node.js1 became such a hot topic. Today, let’s get back to the basics of events and get you in the mood to start playing with them, beyond applying click handlers to everything or breaking the Web with <a href="javascript:void(0)"> links or messing up our HTML with onclick="foo()" inline handlers (I explained in detail in 2005 why these are bad ideas2). Note: This article uses plain JavaScript and not any libraries. Disclaimer: The event syntax we’ll be using here is addEventListener()3, as defined in the “DOM Level 3 Events4” specification, which works in all browsers in use now except for Internet Explorer below version 9. All of this is based on event handling and reading out what the browser gives us.
For example: (al) Designing Better JavaScript APIs. Advertisement At some point or another, you will find yourself writing JavaScript code that exceeds the couple of lines from a jQuery plugin.
Your code will do a whole lot of things; it will (ideally) be used by many people who will approach your code differently. They have different needs, knowledge and expectations. This article covers the most important things that you will need to consider before and while writing your own utilities and libraries. We’ll focus on how to make your code accessible to other developers. Peter Drucker once said: “The computer is a moron.” Table of Contents Fluent Interface The Fluent Interface1 is often referred to as Method Chaining (although that’s only half the truth). Aside from major simplifications, jQuery offered to even out severe browser differences. Method Chaining The general idea of Method Chaining6 is to achieve code that is as fluently readable as possible and thus quicker to understand. Command Query Separation Going Fluent Consistency Callbacks. Using jQuery to Extend CSS. Your jQuery: Now With 67% Less Suck. Fun fact: more websites are now using jQuery than Flash. jQuery is an amazing tool that’s made JavaScript accessible to developers and designers of all levels of experience.
However, as Spiderman taught us, “with great power comes great responsibility.” The unfortunate downside to jQuery is that while it makes it easy to write JavaScript, it makes it easy to write really really f*&#ing bad JavaScript. Scripts that slow down page load, unresponsive user interfaces, and spaghetti code knotted so deep that it should come with a bottle of whiskey for the next sucker developer that has to work on it. This becomes more important for those of us who have yet to move into the magical fairy wonderland where none of our clients or users view our pages in Internet Explorer.
Thankfully, there are a few very simple things anyone can add into their jQuery workflow that can clear up a lot of basic problems. Selector optimization Selector speed: fast or slow? $("#id p"); $("#id").find("p"); Chaining Caching.