It seems every JavaScript blogger out there has his or her own post with a solution for formatting numbers to insert commas. So here are my obligatory two cents.
I’ll try to set my post apart slightly by providing a detailed explanation.
Gist Embeds Redux
When this blog was still on Tumblr, I blogged about embedding GitHub Gists in Tumblr posts. Doing so has a few advantages:
- You don’t have to sprinkle
scripttags throughout yourbody. You just include links (a-style) to your Gists and then a single script—referenced at the bottom of the document—does all the magic. - You don’t have to include the default Gist stylesheet at all if you don’t want to. This is useful if your Gist styles are different and you don’t want to worry about using
!importantor making sure your selectors are more specific than theirs. - If the user has JavaScript disabled, they still see a link to the Gist.
Back in those days, if I wanted a Gist in a post, I would make a new Gist for every piece of code I wanted to include. That got ugly, though, so I decided I would start making a single multi-file Gist per post, where each “file” was a separate piece of code to be used in the post. This required a few changes to the script.
Respond.js
In a previous post, due to a lack of browser support for CSS media queries (in both mobile and desktop browsers), I came to the unfortunate conclusion that…
Whether you baseline for desktop and use media queries to dynamically assign styles for mobile, or you baseline for mobile and use media queries to dynamically assign styles for desktop, you’re going to leave a non-trivial number of browsers out in the cold.
Respond
And then came Respond.js.
Mapping Parent-Child Relationships With Dapper
Dapper is a great, new (kind of), tiny database object mapper for the .NET framework. Its footprint is a single file. Drop it in your project and it adds a handful of extension methods to the IDbConnection interface.
Dapper’s focus is on speed. According to the project’s home page, it’s barely slower than hand-coding your own mapping with a SqlDataReader. What those few milliseconds buy you, though, is automatic mapping to your POCOs. Speed isn’t free, though. But I’ll get to that part later.
Using Arrays in Templates
According to the official documentation, .tmpl()’s data parameter…
…can be any JavaScript type, including Array or Object.
jQuery Templates Plugin
Requirements
jQuery Templates is a plugin to jQuery (requiring at least version 1.4.2), so your page will need to reference both jQuery and the templates plugin (in that order).
CSS Media Queries
Open up www.colly.com or lanyrd.com and (assuming you’re using a modern browser) watch what happens as you resize your browser window. As the window size changes, the page’s layout morphs to accomodate the window size. CSS includes a nice feature to target styles to particular media metrics, width being one of them. In real-time, the browser will apply different styles based on the various queries defined in the stylesheet. It’s an incredibly useful feature for targeting your style not only to smaller desktop browsers but to mobile devices as well.
jQuery Plugin Pattern
This post is a followup to a previous post, JavaScript Module Pattern. jQuery’s documentation encourages developers to use JavaScript’s module pattern to create jQuery plugins. See the previous post if you’re unfamiliar with the module pattern. jQuery itself is passed to the function as its module parameter, typically as $. Plugins are defined within the module function by declaring functions on the $ or $.fn objects. Functions declared on $ are selector-independent and can return whatever the developer chooses. Functions declared on $.fn are selector-dependent and should return a jQuery object to maintain jQuery’s chainability.