An interactive visual breakdown of the jQuery internal code
Monday, July 19th, 2010
UPDATE: jQuery Deconstructed is now JS Libs Deconstructed, also supporting Prototype, and soon, MooTools.
I’ve been interested in the internal structure of jQuery for as long as I can remember, but it can be overwhelming at the best of times, so I’ve recently made-good on my plan to build an interactive breakdown of the physical code.
Essentially, it provides a rather handy birds-eye view of the jQuery library, making it easy to dig into and understand the coding behind the seemingly-simple syntax.
Points of note:
It breaks the physical JavaScript into visual blocks that you can easiliy navigate.
Each block opens to reveal its internal code
Clickable hyperlinks allow you to follow program flow
Add jQuery functionality to any browsable web page
Saturday, February 23rd, 2008
Any developer worth his salt knows about Firebug and its JavaScript console. I use it all the time to tinker with web pages, test stuff out and debug my own pages.
But sometimes, if I’m *cough* hacking *cough cough* someone else’s page, I need the added power of jQuery! But what if the page doesn’t have it?
Simple – load jQuery from a remote source manually through a javascript: call.
Save Favelet
Just drag the link below to your Links toolbar, then click it on any page to jQuery-enable it.
Highlight a form field’s parent tag (or any other selector) as you tab into it.
Tuesday, February 12th, 2008
Highlight increases usability by highlighting elements as you interact with the page.
Its primary use is for forms, but it can also be used for tables, lists, or any element you specify. It can also be used to toggle elements on and off, for example, table rows.
Examples uses:
Form-filling can be made clearer by highlighting the element around a control as you tab into it
Table rows can be made more visible as you pass the mouse over them, or click them
Elements can be toggled as you click them
Code example
Because of the defaults, basic usage can be as simple as:
Populate a form or an element's child elements using a JSON object.
Tuesday, February 12th, 2008
I don’t like mixing HTML and PHP when I build my forms. Instead I like to keep my HTML completely clean, then if a form needs to be pre-filled (for example retrieving a bunch of database results), get JavaScript to fill it in for me after the page has loaded.
This plugin supports full PHP naming and deep data structures, as well as checkbox arrays, other non-standard UI controls, and even standard HTML elements such as labels or divs.
The plugin can be used as part of your AJAX toolkit, or for separating server-side code from HTML by populating a form after the page has loaded eg:
$('form').populate({text:'text', radio:1})
and not inline as the page is processed, such as:
You can also populate non-form controls such as
s, by specifiying the id and an identifying attribute (defaults to id):
Convert a list of text into fully validated, accessible HTML form controls
Monday, February 11th, 2008
I’ve got really, really tired of re-inventing the wheel (alright, HTML, CSS, JavaScript) every time when it comes to site forms.
I do so much database stuff these days that seems to be virtually every site I’m starting from scratch, or hacking an old site’s template to work on a new site. Then once the CSS has been hammered out, comes the laborious task of form validation – tidying up all the names and ids, dusting off my RegExp-foo to validate emails, usernames, etc, etc.
It’s very time-consuming and just feels like I’m missing a trick!
Wouldn’t it be great if there was a magic bullet to convert a list of text into fully validated, accessible HTML form controls!?
Form Builder
Enter “Form Builder” – an online JavaScript application that will build accessible, cross-platform and validated form HTML in literally 10 seconds flat. Just type or paste in your form labels, edit some options (if you want to) and view the Live Preview and HTML.
Form builder does pretty much everything you might want…
So I’ve done some hard research and have employed best-practices for:
HTML Code
Styling
Accessibility
Validation
For example, what about:
Ease of use: copy all your labels to one text field and a whole set of controls built on linebreaks, tabs, commas
Live preview: not happy with the code? Edit the HTML and watch the Live Preview update
Intelligent attribute naming: for example, a form label is “Blood pressure (mmHg)”, your names and ids are truncated at the first illegal character and re-named “blood_pressure” / “blood-pressure”
Automatic values: values are automatically built from the label names, or you can just paste in another list of values
PHP (or other) naming styles: specify a data sub-group, or use your own square bracket naming [] to group data into discrete chunks
Accessible HTML: all controls are married with labels, and where appropriate wrapped within
Validation: Optionally include basic validation attributes on elements using jQuery’s Validation plugin.
Jump in and play here, then go do something more useful with all that spare time!
I’ve just started using and it f*cking rocks. It’s simply amazing the amount of information it provides, but more amazing still is the way it shows you how people are using your site.
Installation is as easy as copy and pasting two scripts into each web page you want tracked. What could be easier than that!? Well, how about one script?
Here’s the code needed to run the tracking functions automatically:
Here’s the code to load the tracking functions without running them (works in ALL browsers, not just IE!) so you can call the code yourself later (for example, tracking an AJAX call):
Of course, there’s a few of these out there already, but here’s the specifics on my take:
easy: a single external script that loads the Google code dynamically
intelligent: calls tracking function only when remote script has fully downloaded
versatile: use of defer attribute to run automatically (or not)
customizable: provides a wrapper function to execute your own custom code
tidy: intermediate setup variables are created privately via a function closure
Just be sure to add your tracking id to the initialization function!
