Markup Tutorials
If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves a network request for each image, and if you're the paranoid type, can prevent exposure of directory paths. Since creating data URIs is incredibly easy, let me show you how to do it with PHP.
Facebook Tooltip HTML and CSS
Facebook recently implemented a new, lighter tooltip. I say the tooltip is lighter because it seems a lot quicker and more elegant than their previous effort. I took a few moments to grab the HTML structure and CSS rules to see how they did it.
Control Element Outline Position with outline-offset
I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug where the element outline forced a horizontal scrollbar within its parent, causing the table to look....gross. After a bit of research, I discovered the outline-offset CSS property. Let me show you what it is and how it fixed the outline bug!
DOM Manipulation with put-selector
DOM node manipulation is a big part of the web today; just look at how popular the jQuery JavaScript framework has gotten. The ability to easily work with the DOM allows us to do a lot of work in a little bit of code. Thanks to a new JavaScript module by Dojo Toolkit developer Kris Zyp, working with the DOM just got a lot more compact. With a name as short as the syntax itself, put could make you change the way you work with the DOM.
Create a Photo Stack Effect with Pure CSS Animations or MooTools
My favorite technological piece of Google Plus is its image upload and display handling. You can drag the images from your OS right into a browser's DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation when you hover over them. Outstanding! I've researched the effect a bit and was able to pull it off with both pure CSS and some MooTools JavaScript.
Add a Google+1 Badge to Your Website
Google's new Google+ service is taking the development world by storm, and why shouldn't it? It's minimalistic UI, use of cutting edge web techniques, and overall usability make it Google+ one of the more impressive web applications I've seen in quite a while (I was going to say "since Google Wave", but that one didn't end up well, did it?) Google+ allows you to share photos, links, statuses, and much more; consider it a mesh between Twitter and Facebook.
Parse Web Pages with PHP Simple HTML DOM Parser
For those of you who have had the pleasure of following me on Twitter (...), you probably know that I'm a complete soccer (football) fanatic. I even started a separate Twitter account to voice my footy musings. If you follow football yourself, you'll know that we've just started the international transfer window and there are a billion rumors about a billion players going to a billion clubs. It's enough to drive you mad but I simply HAVE TO KNOW who will be in the Arsenal and Liverpool first teams next season.
Duplicate DeSandro’s CSS Effect
I recently stumbled upon David DeSandro's website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate: use some simple JavaScript goodness to inject unicorns into their page. A brilliant idea, if I may say so myself (and I may). David's design is simplistic but features a few classy CSS effects, one of the most impressive being the footer "made this" animation. Let me show you how David accomplished this effect.
Using RTA Labels for Adult Content
Sometimes the web seems like a grab bag of anything because anyone can put just about anything up. There are, however, an increasingly large number of organizations that choose to be responsible about the adult or sensitive content they push. A standard called RTA, Restricted to Adults, has been created for robots, search engines, and general crawlers to notify them that the content on a given page or entire website should be viewed only by adults. There are multiple methods to communicating this standard — let me show you each of them!
Background Animations Using MooTools
Updated 4/25/2011: The background animation has been updated to work well with Internet Explorer 7 and 8, and more efficiently with every other browser. This was accomplished by adding the wait property to the animation, and using an initial setStyle assignment to work around an IE8 background-position bug.