Easiest “check all” ever with jQuery

Posted by & filed under Javascript, Programming, Web Development.

How does it work?

This code checks/unchecks all checkboxes within the same fieldset. Simple and semantic.

HTML Setup

Add checkboxes however you like, just make sure they are within the same fieldset.

    <!-- these will be affected by check all -->
    <div><input type="checkbox" class="checkall"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <!-- these won't be affected by check all; different field set -->
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>

And the jQuery to go along with it:

$(function () {
    $('.checkall').click(function () {
        $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);

Source: briancray.com/posts/check-all-jquery-jav…

JavaScript source maps

Posted by & filed under Uncategorized.

Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you’ve combined and minified it, without impacting performance? Well now you can through the magic of source maps.

Basically it’s a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location. Developer tools (currently WebKit nightly builds, or Google Chrome Canary) can parse the source map automatically and make it appear as though you’re running unminified and uncombined files. As of writing Firefox has a blocked status for Source Map support. See MozillaWiki Source Map entry for more details.


Source Map Proposal: docs.google.com/document/d/1U1RGAehQwRyp…

Hawt JS List Action

Posted by & filed under Javascript, Programming.

Do you want a 9 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable? Yeah!
Do you also want the possibility to add, edit and remove items by dead simple templating?


jQuery – Performance tips

Posted by & filed under Programming.

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.


JS — socket.io and node.js

Posted by & filed under Networking, Programming.

socket.io — socket.io/
Socket.IO aims to make realtime apps possible in every browser and mobile device, blurring the differences between the different transport mechanisms. It’s care-free realtime 100% in JavaScript.

node.js — nodejs.org/
Node.js is a platform built on Chrome’s JavaScript runtime (v8) for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. RAD!!!!!!!!!

v8 — code.google.com/p/v8/
V8 is Google’s open source JavaScript engine. V8 is written in C++ and is used in Google Chrome, the open source browser from Google. V8 implements ECMAScript as specified in ECMA-262, 5th edition, and runs on Windows (XP or newer), Mac OS X (10.5 or newer), and Linux systems that use IA-32, x64, or ARM processors. V8 can run standalone, or can be embedded into any C++ application.

flot – jQuery chart plotting

Posted by & filed under Uncategorized.

This is a nice alternative to some commercial charting library options.

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.

The plugin works with Internet Explorer 6+, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvas Javascript emulation helper is used for IE < 9). code.google.com/p/flot/

HeadJS — The only script in your

Posted by & filed under Programming.

Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD. A concise solution to universal issues.

With Head JS your scripts load like images – completely separated from the page rendering process. The page is ready sooner. Always. This is guaranteed even with a single combined JavaScript file.

Non-blocking loading is the key to fast pages. Moreover Head JS loads scripts in parallel no matter how many of them and what the browser is. The speed difference can be dramatic especially on the initial page load when the scripts are not yet in cache. It’s your crucial first impression.

Pages no longer “hang” and there is less or zero “flashing” between pages. User only cares when the page is ready. Unfortunately current networking tools don’t highlight this crucial point. They focus on the overall loading of assets instead.

Head JS can make your pages load 100% or even 400% faster. It can make the largest impact on client side optimization.


Raphaël javascript library

Posted by & filed under Uncategorized.

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël [‘ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

Google AJAX APIs & Yii

Posted by & filed under Uncategorized.

I was snooping around the Yii documentation and came across system.web.helpers CGoogleApi. It’s here: www.yiiframework.com/doc/api/1.1/CGoogle…
Anyway, my interest was piqued, so I took a look at whatGoogle has to offer. I was expecting calendar, maps, search yadda. There LOTS more!

Google has a playground that you can use to demo the APIs: code.google.com/apis/ajax/playground

Translation, RSS Feeds, Maps/Directions, and all the other Google services are all right there!