The Pixelize jQuery Plugin

Published March 22, 2014 by saurav.roy.

I am unabashedly and unreasonably fond of pixel art. It evokes a nostalgia for a simpler time (tinted generously with the fog of many years) when I would rush home from school, fire up my Nintendo, and try to rescue Zelda from the evil clutches of Ganon.

To that end, I’ve created a simple jQuery plugin that can turn a JavaScript array into CSS pixel art. It looks like this:

See the Pen Pixelize jQuery Plugin by Rob Glazebrook (@rglazebrook) on CodePen.

Read On…

Bouncing Balls in the HTML5 Canvas

Published February 3, 2014 by saurav.roy.

Here’s a fun demo I put together using the HTML5 canvas, aided by the excellent sketch.js framework. I’m creating hundreds of semi-transparent balls and bouncing them around on the screen. The demo definitely requires a modern browser (Chrome/Firefox/IE9+).

See the Pen Bouncing Balls in sketch.js by Rob Glazebrook (@rglazebrook) on CodePen.

Sketch.js simplifies getting started building demos like this by providing a bunch of things that would normally have to be built by hand: an animation loop, drawing context, and so on. It also provides a few nice math-y functions, like random(), which you’ll see I’m using all over the place.

I’ll walk through the code briefly to give you an idea of how it works, and how you can edit this one or make your own. You can follow along in the JS tab above. Read On…

Simple Table Column Highlighting

Published January 6, 2014 by saurav.roy.

A table with the third column and second row highlighted.

Though they’re often treated like the redheaded stepchild of modern web design, tables are still one of the best ways of displaying concise tabular data. But the more data that gets packed into a table, the tougher they get to read. Zebra striping the rows helps some, and column striping can help even more.

One design technique I’ve always enjoyed is highlighting the row and column of any cell that the user hovers over. Highlighting a cell’s row is simple, because table cells are organized into rows: all you have to do is apply a style to tr:hover, and you’re done. Columns are harder because there’s no inherent structure for a column in a table, which means loads of complex JavaScript is inevitable. Or so I thought.

I’ve been building HTML tables for nearly two decades now. Today I realized two things:

  1. There’s such a thing as a col tag for tables (who knew?).
  2. It’s going to make my life easier.

Read On…

A JavaScript Currency Conversion Script

Published November 28, 2011 by saurav.roy.

It turns out that converting random numbers into formatted currency (with dollar signs, commas, and periods) is more difficult in JavaScript than I would have expected. There’s no built-in function for it, and it’s something I run into a lot. The function I wrote has worked well for me on a couple of projects now, so I thought I’d share it with you-all.

The little JavaScript function below does exactly one thing: it converts numbers (integers, floats, strings, whatever) into formatted currency. My example is in US dollars, but it’d be a quick change to make it work for other currencies as well.

The Problem This Solves

I wrote this script because I had to display dollar amounts in a “friendly” format in several places on a website, but I wasn’t being handed friendly numbers by the server. The numbers never included commas, of course. But there’s also the problem of whole-dollar and multiple-of-ten-cent amounts: I would have “500” when the user would expect “500.00”, or “250.2” when the user would expect “250.20”. Read On…

Intelligent Select Box Filtering

Published July 16, 2010 by saurav.roy.

One of the great things about building websites for a living is the challenges tend to change from day to day. There’s always a new puzzle to solve.

Take today, for example. I was building a page that contained a series of select (dropdown) boxes. Now, I’ve been around the block once or twice before, and this wasn’t my first time using selects. However, this implementation came with a unique twist: all the boxes contained the exact same options, but we only wanted each to be selectable once. Specifically, each box contained a list of security questions — your mom’s best friend’s grandmother’s maiden name, that sort of thing.

The code looks something like this:

<select class="security" name="security1">
	<option value="0">Select a question.</option>
	<option value="1">Who's your daddy?</option>
	<option value="2">What's your favorite color?</option>
	<option value="3">What time is it?</option>
<select class="security" name="security2">
	<option value="0">Select a question.</option>
	<option value="1">Who's your daddy?</option>
	<option value="2">What's your favorite color?</option>
	<option value="3">What time is it?</option>

Now, naturally, we want the user to select several different security questions. But what’s to stop them from selecting the same question several times? Well, in our case, back-end validation… but I wanted to solve the problem before we got to that point. I wanted to eliminate “selected” questions from all the other dropdown boxes, so it wouldn’t even be an option. This has the added benefit of shortening the list of options as the user goes along, which would make scanning the options easier. Read On…

Cross-Browser Rounded Buttons with CSS3 and jQuery

Published April 22, 2010 by saurav.roy.

So here’s the scenario: I was tasked with replacing several dozen Photoshop-generated rounded buttons for a larger site with an HTML/CSS/JS equivalent. Prior, any time anyone wanted to change text on a button (and it seemed to happen often), a graphic designer had to fire up Photoshop, modify a file, adjust for size, output an image, and pass that file off to the person building the page. It was an involved process for something that should have been simple.

So let’s make it simple!

Right away I knew that I wanted to present as simple a solution for the developer as I could. I didn’t want to force them to use tons of extra markup in their HTML to pull this trick off. This was a piece of cake in modern browsers, as you’ll see in a moment. Unfortunately, this site also has a large IE user base, so I needed to account for less-modern browsers as well.

Border-Radius for Those Who Can

I decided I wanted to use border-radius for the rounded buttons for any browsers that could support it. I also decided that I wanted to create a single class, “button,” for any buttons, and it should work more-or-less the same on anchor tags, button tags, and “submit-type input tags. Read On…

How To Emulate a Foreach Loop in JavaScript

Published January 21, 2010 by saurav.roy.

JavaScript does many things well, but one area I’ve always had trouble with is the array and array-manipulation department. For example, this weekend I was working on a project that required me to iterate through a JavaScript array and peform a set of functions on the values within. In PHP, that would have looked something like this:

$myArray = array("item 1", "item 2", item 3");
foreach($myArray as $item) {
	$item = "Do Something Here";

Nice and simple, right? All we’re doing is iterating through the array with the foreach() construct and replacing each item with the phrase “Do Something Here,” but you can see how this could/would expand. A similar construct exists in Perl, another language I grew up on.

But JavaScript lacks a specific “foreach” statement, which trips me up every time. So how do we fake it? Read On…

Improve Usability and CTR: Make an Entire List Item Clickable

Published January 12, 2010 by saurav.roy.

I was recently working on the navigation for a new WordPress site (to be announced later) and I encountered a bit of a conundrum when it came to my category navigation.

I had developed some snazzy PHP/WordPress scripting to output my category information into a list containing both the category name as well as the category description. It was a nice way to show people what categories the site had, as well as offering some insight into what the category might contain. The code looked something like this: Read On…

The Best CSS Newbie Articles of 2009

Published January 5, 2010 by saurav.roy.

Happy 2010, readers of CSS Newbie! It’s a bitterly cold day here in Des Moines, Iowa — the sort that causes me to question the wisdom of throwing off the blankets in the morning. However, today I get to reflect on the last year of CSS Newbie, and that’s enough to warm my heart, if not my toes.

I’ve said it before and I’ll say it again: CSS Newbie is nothing without you awesome readers out there. This year, more than a quarter million people stopped by, visiting more than half a million pages. For that, I am very, very grateful. It also makes me excited to see what we can do for those numbers in 2010!

To celebrate the year gone by, I’d like to recap the Top 10 CSS Newbie Articles of 2009. The first five I’ve left up to you — they’re the five most visited articles in the last year. The second five were my choice. They include articles I enjoyed writing or include content that I thought particularly useful or interesting. Read On…

How To Create Simple, Stylish and Swappable Image Captions

Published December 3, 2009 by saurav.roy.

Image Captions

While they say a picture is worth a thousand words, not every image is self-explanatory. Sometimes a few words of description or context can make the difference between a confusing image and a clarifying one. That’s why image captions are often a good idea.

I’ve always liked the idea of giving images captions, but I rarely do. And why not? It seems to me that most image caption solutions out there:

  • Require a lot of excess HTML,
  • Make it difficult to redesign (because of the rigidity, usually),
  • Don’t make the relationship between image and caption clear, or
  • All of the above.

Today, I propose a solution that addresses many — if not all — of these concerns. Read On…