Comment styling with CSS3 and -webkit-transform
Here’s a quick little tip that might come in handy for someone. I’m working on the mobile version of a magazine’s site which will be targeting WebKit browsers. The design I’m implementing calls for a list of comments that alternates the display of the commenter’s name (and timestamp info) left and right. This can be done with a single image, use of the nth-child(even) CSS selector, and -webkit-transform: scaleX(-1). The fiddle here uses jQuery, but I’m using Zepto.js (mostly jQuery-compatible syntax in just a couple of kb) for the actual implementation.
Miscellaneous thoughts:
- For bonus points, the comment arrow could be implemented with a small canvas to remove the need for an image at all.
- AFAIK, there doesn’t seem to be an agreed upon microformat for comments.
(Tumblr users need to click through to view the fiddle)
I’m excited to announce that I have launched a redesign of my business/portfolio site Black Ant Media. I started in on a redesign about a year ago and never finished it. They say if you’re too busy to update your own site, that’s a good thing. But when you’re in the business of selling your supposed expert services, not having any work to view is an embarrassment.
I had been wanting to play with MooTools for a while now, so I took the opportunity to use it on this redesign. I came away from the experience feeling like PHP is to jQuery (everyone structures their code differently) as Rails is to MooTools (established OO patterns that pretty much everyone follows). The MooTools Fx classes offer some of the smoothest animations I’ve come across. There is still much I want to learn about this framework, but I’m really impressed so far.
I’m using the lightweight (no database) Stacey CMS for the portfolio. Since this is a single-page site, I decided to load all of the project information dynamically from Stacey using AJAX calls and fetching JSON data.
I had a fun time working on the contact form as well. For WebKit browsers, the form flips around when you submit it turning your message into an envelope that gets dropped into a slot. On the server side, I use Akismet to check for spam submissions. Please send me a message if you’d like to try it out.
I few other buzzwords I incorporated: HTML5, Sass, TypeKit, Modernizr, hCard microformat, and parallax background scrolling.
I still have a bunch of cleanup/refactoring to do and I need to make a mobile version, but I’m really pleased with how it has turned out so far.
Oh, and all of the code lives in public Github repo if you want to check it out. Hit me up on Twitter with any questions or feedback.
Canvas Snow - very classy snowfall effect using canvas and some particle emitter Javascript code.
Animated contact form for my WIP site redesign. Using Mootools for form validation and animation (plus Webkit transforms for the flip). Typekit for fonts. View at normal resolution on LoveDSGN.
An 8 screen WebGL aquarium built with HTML5, Javascript, WebSockets, node.js, and socket.io. Flash who?
A nice Javascript (MooTools) powered countdown on the Foursquare Elections site.
Ricardo Cabello (aka. Mr. Doob) has a great writeup discussing the making of The Wilderness Downtown, the Arcade Fire HTML 5 experiment. It’s an absolute web polymath’s treasure chest with jewels including Javascript sequencers, 3D rendering, geocoding, issues with WebGL and CoreGraphics, boid simulations (for the bird flocks), tweening, and color correction (for which the code above was a part of).
Snoopy: View-source on iPhone/iPad
Handy little JavaScript bookmarklet for viewing source on the go. (via)
CampaignMonitor says goodbye to their Flash charts and reimplements them using Highcharts. I love how they tweaked their setup to allow mouseover events to work nicely on touch screens.
I love this subtle effect on the redesigned Flickr pages. When you click the star to favorite a photo, they are running a Javascript animation that doubles the size of the star image (actually of the entire Flickr sprite sheet), drops the opacity to zero, and applies a slight easing effect [1]. A similar effect could be done with Webkit and Mozilla CSS effects, but I guess they don’t want to give IE the cold shoulder just yet.
[1] Found by spelunking through fave-star.js
Interview with the Vimeo's Kevin Sheurs, Lead Application Developer
At sketch.processing.org, you can now find an in-browser IDE for playing with your Processing sketches. It’s using John Resig’s Processing.js under the hood and works quite well. I pasted in an a couple of simple, native Processing sketches and they ran without any problems.






