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. Using jQuery As A Named Module In RequireJS. With the release of jQuery 1.7, there's been some amorphous buzz about the support between AMD (Asynchronous Module Definition) script loaders and the jQuery library. I say, "amorphous," because I simply don't understand what that support entails.
While reading Wilson Page's post on loading AMD modules from a remote CDN (Content Delivery Network), however, I started to see that "named modules" seemed to be important. And, furthermore, I discovered, after some testing, that RequireJS supports using a named "jquery" module even prior the release of jQuery 1.7.
In RequireJS, you can load JavaScript dependencies before a given block of code needs to be executed. These dependencies can be defined in the form of file paths to the dependent modules; or, they can be defined by aliases (ie. named modules) that represent short-cuts to module file paths. With jQuery 1.7, this named module works because jQuery actually calls define() internally to define itself as the "jquery" module: Moment.js Documentation. Moment(String, String); moment(String, String, String); moment(String, String, Boolean); moment(String, String, String, Boolean); If you know the format of an input string, you can use that to parse a moment. moment("12-25-1995", "MM-DD-YYYY"); The parser ignores non-alphanumeric characters, so both of the following will return the same thing. moment("12-25-1995", "MM-DD-YYYY"); moment("12\25\1995", "MM-DD-YYYY"); The parsing tokens are similar to the formatting tokens used in moment#format.
Year, month, and day tokens Week year, week, and weekday tokens For these, the lowercase tokens use the locale aware week start days, and the uppercase tokens use the ISO week date start days. Hour, minute, second, millisecond, and offset tokens Locale aware date and time formats are also available using LT LTS L LL LLL LLLL. Z ZZ were added in version 1.2.0. S SS SSS were added in version 1.6.0. X was added in version 2.0.0. moment('2012 juillet', 'YYYY MMM', 'fr'); moment('2012 July', 'YYYY MMM', 'en'); Mozilla Popcorn | Making video work like the web. Notifier.js – Elegant Javascript notifications | Srirangan. HTML5 context menu - How to use it? Mozilla introduces HTML5 context menu in Firefox 8 (and is the only browser to implement this till date as per caniuse).
So as a newbie to HTML5 I took a dive of HTML5 context menu and dissected this sample using Firefox 8, Firebug and Eclipse. HTML5 context menu makes you to add the custom menus natively to the already existing custom menus. Before HTML5 this is possible only with the help of JavaScript frameworks like Jquery. To know more about HTML5 context menu you need to know the following Contextmenu attribute: ‘Contextmenu’ is the new global attribute used in HTML5 supported by almost all HTML5 elements, which makes you to add your own context menus to any element.
Example: Menu Element: Menu element allows you to define the type of menu. Menuitem Element: Menuitem Element is used to add menus. Feature Detection: Firefox is the only browser, that supports HTML5 context menu. Take a look at the sample code for the complete demo. Sample code: Further Reading: Digg 0DZone 0Reddit. Enhancing Web Apps with AmplifyJS. There seems to be a new crop of special-purpose JavaScript libraries every week. Gone, it seems, are the days of using only one library per project. Today I’ll introduce you to a very cool component library, AmplifyJS, that offers just a few very specialized components. Devs, Meet AmplifyJS According to the website: AmplifyJS is a set of components designed to solve common web application problems. Sounds prestigious, but what’s actually in this library? AmplifyJS has three main pieces: An AJAX APIA PubSub Event SystemA Client-side Storage API Join me now for a tour of the incredible AmplifyJS library!
We don’t really need to concern ourselves with styling and layout issues today so I’m going to use the Twitter Bootstrap library. Step 1: Setting it Up So, make yourself a project directory. jQuery: Amplify’s AJAX component uses jQuery’s AJAX feature underneath it’s API, at least by default. Then, start off our index.html file like this: All right, we’re ready to go! Amplify.publish And TABLE? Jquery Notification Plugin. Introducing a new jQuery notification plugin, it helps better and enrich message notification system for your web application. This plugin contains four types of notification systems such as Success, Error, Warning and Information with rich user interface. Very easy to implement just follow the steps.
Download Script Live Demo Developer The Basic Setup 1. 2. 3. ShowNotification(params); Example Usage Usage To know more Jquery Notification Plugin .. AliceJS. AliceJS - (A Lightweight Independent CSS Engine) is a micro JavaScript library focused on using hardware-accelerated capabilities (in particular CSS3 features) in modern browsers for generating high-quality, high-end visual effects. Created by Laurent Hasson (@ldhasson, lhasson at rim dot com), and co-developed with Jim Ing (@jim_ing, jing at rim dot com), and Matt Lantz (@mattylantz, malantz at rim dot com) Introduction While working on a simple game written in HTML5, I wanted to use a "flip3D" effect. That effect had become popular since CSS3 was introduced and performed well due to hardware-acceleration in most mobile browsers. So I decided to explore the ability to package such animations in a very lightweight library that would set up all the CSS and manage my base HTML for me, and keep my page clean of "effects logic".
We are experimenting with many UI components, with tying in sensors, adding physics, and even organics. Alice 0.1, 0.2 Compatibility and Special Notes Demos View Demos. Coordinating multiple ajax requests with jquery.when | Joshua Flanagan. While building a rich JavaScript application, you may get in a situation where you need to make multiple ajax requests, and it doesn’t make sense to work with the results until after all of them have returned. For example, suppose you wanted to collect the tweets from three different users, and display the entire set sorted alphabetically (yes, its contrived).
To get the tweets for a user via jQuery, you write code like: $.get(" function(tweets){ // work with tweets }, "jsonp"); (For the purposes of this example, I’m going to assume there is no way to get the tweets for multiple users in a single call) To get the tweets for three users, you would need to make three separate $.get calls to the user_timeline endpoint. Since each call is executed asynchronously, with no guarantee which would return first, the code to coordinate the response for all three users would likely be a mess of shared state and/or nested callbacks.
Creating an iOS-like Home Screen with CoffeeScript. Martin Angelov Today we are going to create an iOS-like home screen using CoffeeScript – a new JavaScript based language, and the jQuery library. CoffeScript has a clean syntax that lies somewhere in between Ruby and Python. If you haven’t used any of them, don’t worry – it is not required. However you will need to be familiar with JavaScript so you can better understand the concepts behind the language. We are also going to use the Touchable plugin, so we can listen for touch-based events.
First, what is CoffeeScript? CoffeeScript is a neat programming language meant to enhance the good parts of JavaScript, while working around the not so good. CoffeeScript works in every browser out there, and is compatible with all your existing JavaScript code (including libraries like jQuery and plugins). iOS -like Home Screen with CoffeeScript The HTML Lets start with the HTML markup of our iOS-like home screen. Index.html <! The #mask div shows only one screen at a time with overflow:hidden. The iOS Dock. RequireJS. Using AMD loaders to write and manage modular javascript.