Friday, December 21, 2012

Building a relationship between CSS & JavaScript

Building a relationship between CSS & JavaScript
jQuery, Prototype, Node.js, Backbone.js, Mustache and thousands of JavaScript microlibraries all combine into a single undeniable fact: JavaScript is popular. It's so popular, in fact, that we often find ourselves using it in places where another solution might be better in the long run.

Even though we keep JavaScript, CSS and HTML in different files, the concepts behind progressive enhancement are getting all knotted up with every jQuery plugin we use and with every weird technique that crops up. Because JavaScript is so powerful, there are a lot of overlaps in capability between JavaScript and HTML (building document structure) and JavaScript and CSS (injecting style information). I'm not here to pick on any JavaScript library, bootstrap or boilerplate; I'm just here to offer a little perspective as to where we are and how we can realign our goals.

Friday, December 21, 2012

Flashless Animation

Flashless Animation

Animation in a Flashless world

When I splashed down in web design four years ago, the first thing I wanted to do was animate a cartoon in the browser. I'd been drawing comics for years and I've wanted to see them come to life for nearly as long. Flash animation was still riding high, but I didn't want to learn Flash. I wanted to learn JavaScript!

Friday, December 21, 2012

Giving content priority with CSS3 grid layout

Giving content priority with CSS3 grid layout

Browser support for many of the modules that are part of CSS3, have enabled us to use CSS for many of the things we used to have to use images for. The rise of mobile browsers and the concept of responsive web design has given us a whole new way of looking at design for the web. However, when it comes to layout, we haven't moved very far at all. We have talked for years about separating our content and source order from the presentation of that content, yet most of us have had to make decisions on source order in order to get a certain visual layout.

Friday, December 21, 2012

How to detect DOM changes in CSS

How to detect DOM changes in CSS
This post is for the developers out there and is quite heavy on technical details. While integrating with Gmail's new compose window we ran into the issue of detecting when a compose window was open or closed. If you have Streak installed and are using the new Gmail compose you'll notice that the controls get inserted pretty much instantly - this post is about how we accomplish that.

Traditionally the two classical methods for detecting DOM changes are 1) using a timer, or 2) binding on the DOM mutation events.

Both methods suck.

Friday, December 21, 2012

IE10 CSS Hacks

IE10 CSS Hacks

Last year, Microsoft announced that IE10 will not be supporting conditional comments. With their history, this is obviously a risky move. Up to now, to target quirky behaviour in IE6-9, developers have been using conditional comments, conditional classes and other IE-specific hacks.

Thursday, December 20, 2012

CSS architecture

CSS architecture

To many Web developers, being good at CSS means you can take a visual mock-up and replicate it perfectly in code. You don't use tables and you pride yourself on using as few images as possible. If you're really good, you use the latest and greatest techniques like media queries, transitions and transforms. While all this is certainly true of good CSS developers, there's an entirely separate side to CSS that rarely gets mentioned when assessing one's skill.

Thursday, December 20, 2012

FooTable: a jQuery plugin for responsive data tables

FooTable

These days, everyone is jumping on the responsive bandwagon. Apart from responsive layouts, everything is going responsive: sliders, lightboxes, galleries, you name it! But then one day, when I was working on an HTML table with a lot of columns, I thought "How is this going to look on my iPhone?". And then I searched for "responsive tables" and found Chris' roundup post on a few solutions out there.

Tuesday, December 18, 2012

Responsive column layouts

Responsive column layouts

Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I'm going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn't require any first or last class and the number of columns can be adjusted base on the viewport. In other words, it can be toggled from 4-column to 3-column or 2-column, etc.

Tuesday, December 18, 2012

Fly in newly added content to a page

Fly in newly added content to a page

Say that for any reason, a new module of content needs to appear on a page. By simply appending that new module into the DOM it will instantly appear. That might be enough of an "entrance" - or it might be too subtle. I'd think when you add new content to a page, you want people to see it. Animation might be the ticket. It technically slows down the entrance of the new content, but the visual effect will certainly make it more noticeable. Let's write some code to make all new modules added to a page "fly in".

Tuesday, December 18, 2012

How to: CSS large background

CSS large background
Common Mistake: Background Gets Cropped (see demo)
Take a look at the demo file, it looks fine under 1280px. But if you have a high resolution display, you will see the background gets cut off on the sides.