Posts tagged javascript

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)

Posted on January 26, 2011 · 10 notes
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.

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.

Posted on January 21, 2011 · 17 notes
Canvas Snow - very classy snowfall effect using canvas and some particle emitter Javascript code.

Canvas Snow - very classy snowfall effect using canvas and some particle emitter Javascript code.

Posted on December 8, 2010 · 13 notes

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.

Posted on November 22, 2010 · 29 notes

An 8 screen WebGL aquarium built with HTML5, Javascript, WebSockets, node.js, and socket.io. Flash who?

Posted on November 3, 2010 · 7 notes
A nice Javascript (MooTools) powered countdown on the Foursquare Elections site.

A nice Javascript (MooTools) powered countdown on the Foursquare Elections site.

Posted on October 27, 2010 · 8 notes
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).

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).

Posted on September 17, 2010 · 11 notes

Snoopy: View-source on iPhone/iPad

simplebits:

Handy little JavaScript bookmarklet for viewing source on the go. (via)

(Source: simplebits)

Posted on September 13, 2010 · 56 notes
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.

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.

Posted on June 29, 2010 · 11 notes

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

Posted on June 24, 2010 · 5 notes

Interview with the Vimeo's Kevin Sheurs, Lead Application Developer

Posted on June 16, 2010 · 14 notes
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.

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.

Posted on May 3, 2010 · 4 notes

Mail.app implemented with UKI Javascript toolkit. Check out the writeup and demo.

Posted on April 8, 2010 · 2 notes