Browser Cache

I've seen code like this everywhere, and maybe you have too. A function (hopefully wrapped in parenthesis) followed by some variables in parenthesis. (function(a, $){ ... code ... })(window, jQuery); I eventually started trying to research what they were, how they worked, and why they should be used. Most of the explanations got thick quick, so I thought I'd simplify things. In essence, this is declaring and calling a function all at the same time. The easiest way to think of it (for me, anyway) is that this: (function(a, $){ ... code ... })(window, jQuery); ...is roughly equivalent to this: var myFunction = function(window, $){ ... code ... } myFunction(window, jQuery); There are some (pretty big) differences (such as when and how it runs), but this is enough to get you started. The parenthesis wrapping the function aren't required, but are considered best practice and common courtesy because they help to identify t

I was thinking of fanning out some cards to demonstrate options for one of our sites, and I wanted to do it in CSS, so I came up with this (Plan for fall-back in non-supporting browsers is just a button that shows the options). The plan is to show all options in full when the stack is clicked on, but right now it just fans out on hover. This isn't anything terribly ground-breaking or difficult, but it is a nice, fun effect so I thought I'd share. Edit: I updated the link and code here to point to an updated version of the code that uses the css3 :target selector to spread out the cards when a link is clicked, and collapse them when it's closed. (See the full page example for better effect) See the Pen Fanning Cards by Thomas Pietrosanti ( @Rykus0 ) on CodePen . I used SASS to do handle some of the incremental and procedural parts, but did not leverage Compass, since I am not using it. Really, all I'm doing is absolutely positioning div s on top of ea

I ran into the situation today where I wanted to use :nth-child(x), but this won't work in IE8. Since the majority of our user base is still using IE8, I had to address this issue. If you don't want to use a separate class for each one, there is a solution. first-child nth-child(2) nth-child(3) ​ li a{color:#fff;} li:first-child a{ background:#333; } /* :first-child is supported */ li:first-child + li a{background:#666; } /* :nth-child(2) */ li:first-child + li + li a{background:#999; } /* :nth-child(3) */​ See for yourself: This obviously is not a solution for cases like :nth-child(odd) but it's a nice way to handle cases where you want to control an element based on a specific sibling distance from the first child, such as centering the text of the second column in a table.

I just ran into a case where I wanted to animate a:after using CSS transitions, and found out that it is only supported in Firefox 4+. So I turned to modernizr for a test case, but didn't see one. Just as I'm debating whether or not I'm good enough to give it a go, I find that a bug has already been logged for it, and a pretty good solution is already in the works . Even though it's not official, it's better than what I had, so I figured I'd throw it in. Kudos to the Modernizr team and all who have contributed!

I'm not that great of a graphic designer, and I'm even less skilled when it comes to typography. But I know the basics, and this is a great (and hilarious) example of what kerning is (in short: the distance between letters) and why it's important (in this case, "click" looks like "dick"). I can't take credit for this image. It was a retweet of a retweet originally posted by @jbrownridge .

Something else I just learned today. I've been happily using parseInt all this time, and I've been doing it wrong . I never really thought much about it. "Ok, let's change this string to an integer. parseInt(string) Bang. Done." But then I got a warning when compiling my code with Google's Closure Compiler saying that I needed two parameters. Wait, what? Turns out, there is a second parameter for the Radix that you should always fill in . This makes sense, of course, but apparently I assumed everyone used base ten. Always. That was pretty dumb, and here's why: If the input string begins with "0x" or "0X", radix is 16 (hexadecimal). If the input string begins with "0", radix is eight (octal). This feature is non-standard, and some implementations deliberately do not support it (instead using the radix 10). For this reason always specify a radix when using parseInt. If the input string begins with any ot

The Setup var default = { param1: "one", param2: "two", param3: [] }, working = default; // Fill form fields from working data // User modifies form fields // Save form fields in working data // Perform calculation based on working data // User clicks a button to reset the form to default state function reset(){ working = default; // Fill form fields from working data // Perform calculation based on working data } The Problem The form was not being reset to the default data, but instead did not change at all. When I debugged, I noticed that the data in default was identical to the data in working , even though I never assign any values to default after initialization. The Cause Little did I know, that assigning an object in JavaScript actually only assigns the reference, and does not create a new copy of the object. The Solution The object needs to be copied, rather than simply assigned. Based on a quick Google search, there is no bui