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.
- 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.
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.
 Found by spelunking through fave-star.js
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.