Category: frontend

OCT 29 2011

Using Javascript Timeouts for Performance

Wait, what? Doesn't setting timeouts in Javascript delay a piece of code from being run for an X amount of time, so how could it possibly help with performance? Imagine writing a Javascript app that is doing some large, computationally-expensive task like adding a five thousand elements to the DOM:...
AUG 18 2011

Subtle Inset Styles

It's the mark of a great designer when someone comes to your site and knows it looks good, but doesn't know why. I love using subtle styling in my designs and one of my favorites is applying inverse drop shadows to give the appearance that something is inset. Take my...
JUL 30 2011

Ajax Partial Loading

In today's applications, it's common to use AJAX to load dynamic parts of a website without having to do a full page refresh. With Rails, it's easy to template these changes instead of using Javascript to update the DOM structure manually. Imagine you have some portion of the page (say,...
JAN 27 2011

JQuery Autocomplete with hidden data

This is a problem that I've encountered many times before when building Rails apps, but didn't know how to solve elegantly until one of my friends pointed out the solution was directly in the JQuery Autocomplete documentation (in my defense, it was at the _very_ bottom). Imagine you have an...
JAN 08 2011

Sticky Footers

Sometimes, in websites that you design, you'll find that you want to implement some kind of footer (with copyright information, contact links, etc). The naive way to go about adding a footer to your design to just add a div with some fixed (or `auto`) height at the bottom, like...
AUG 10 2010

CSS Shorthand

For all of you CSS coders who are pretty lazy (myself included), you can use CSS shorthand to type out certain properties in one line instead of many many lines. Here's an example: Say you want to add a background image to your fancy new website using CSS. And it...
AUG 03 2010

JQuery Draggable and Droppable

On a whim, I recently whipped together and launched [REOrganize](http://reorganize.amberfeng.com), a small JavaScript application that lets users simulate arranging furniture around in a room via dragging and dropping. To build this quickly, I utilized [JQuery's fantastic UI library](http://jqueryui.com/) full of ready-made effects and widgets. To take advantage of these effects...
JUL 23 2010

Setting Cookies with JQuery

I've never really used or dealt with browser cookies before because I felt like it was some complicated, advanced technique that required intricate knowledge of how browsers and sessions work. Today at work, I was given a task that involved setting, checking, and removing cookies for our web application, but...
JUL 22 2010

Detecting Mobile Devices for Web Applications

As mobile devices become a bigger and bigger platform for viewing web pages, web application developers need to start paying attention to making their websites mobile-friendly. Have you ever visited a website from a smartphone that was obviously not mobile optimized? It's not a great experience, having to zoom in...
JUL 21 2010

IDs vs. Classes?

IDs should generally be used when the element is unique, whereas classes should be used when there are a lot of similar elements that need the same styling. It would be perfectly legal to use IDs for every single element on a page (if they are unique, of course), but...
JUL 13 2010

Basic (CSS) JQuery Selectors

I love JQuery. Oh so easy to use, excellent documentation, and an abundance of third-party plugins and widgets ready made for almost anything you could ever need. Of course, one of the most important parts of the library are JQuery's selectors, easy CSS-like syntax to select specific DOM elements to...
JUN 29 2010

JQTouch Animation Flicker Bug Fix

I've been working with the [jQTouch](http://www.jqtouch.com/) (a jQuery plugin for mobile development that imitates much of iPhone's UI and animation features) for quite some time now at work. It's pretty great, but I've been running into small little glitches like animation flickering for 'slide' animations that do not have fantastic...