Category Archives: CSS

The Flick Scroller

Sometime last year I came across an image carousel on an Italian website done in Flash that allowed you to scroll a set of images horizontally with the flick of your mouse. What I loved about it was how natural and intuitive it felt. The gallery of images was infinite, meaning that the same X number of images would repeat no matter how often you scrolled it. The obvious downsides were that it was done in Flash and not mobile friendly.

I’ve been working on and off since then to replicate the effect, as well as improve upon it. I finally have a non-Flash solution that uses jQuery to achieve the effect both on desktops and mobile devices that doesn’t require any other libraries and is super slim. I love the infinite scrolling effect in use here which relies on an optical illusion of sorts.

I’m posting the first examples here and would like your feedback to see if I should turn this into a jQuery plugin. I’m also open to some suggestions in terms of a name. I like the “flick” part, but struggle with calling this a carousel, gallery,scroller, or something else.

Demos

A caveat: The only downside I’ve discovered so far lies in mobile Safari. I have seen the scroller start off and work fine in this browser, yet cease to respond after a few flicks. Unfortunately I seem to have no way to debug mobile Safari, so if anyone can shed light onto the issue I’d be happy to update the code.

Free Tools to Make a Web Developer’s (and Designer’s) Life Easier

Who doesn’t love free stuff? Most of the time the saying “you get what you pay for” applies, but every once in awhile sometimes you do get a free lunch. Whether it’s testing jQuery code, checking to see how a site looks in different browsers, or coming up with a color scheme, the following free tools have been extremely valuable in helping me get my work done.

VirtualBox

Originally developed by Sun, Oracle’s VirtualBox is a great piece of free software.Let me repeat that. Great piece of free software. It’s so good they should charge for it. Really.  In case you’re unfamiliar with VirtualBox or virtualization in general, what VirtualBox does is allows you to turn one computer into as many different computers as you like by giving you the ability to run almost any operating system as if it were an application. No dual booting, no partitioning, no reformatting. You can create and destroy virtual machines at will.

So why is this great? Continue reading

A Guide to CSS2 and CSS3 Pseudo-classes and Pseudo-elements

While the term “pseudo-class” might not instantly evoke what it refers to, virtually every web developer and web designer has used them. The classic example of pseudo-classes involves styling links based on the state that they’re in (hover, active, etc.). CSS3 introduces over a dozen new CSS pseudo classes to give you more control over targeting and styling elements. CSS2 pseudo-classes still work in CSS3, and CSS2′s pseudo elements are virtually unchanged in CSS3 (see the last paragraph). Below is a chart that outlines pseudo-classes in CSS2 and CSS3 with new CSS3 pseudo-classes in bold. Continue reading

Narrow Minded

Recently I was checking out some code written many years ago by another developer, and as I was hacking it up to be re-used, I started wondering why he had decided to split up his lines of code so that they were very narrow. Comments, for example, that were a few sentences long ended up spanning nearly a dozen lines when they could easily exist on just a couple of lines. It was then that I noticed that he had been wrapping his text at 80 columns – in other words, each line contained no more than 80 characters. It’s been a long time since I forced myself to wrap code at 80 columns, either because what I had written was concise to begin with, or because no one else would be looking at the code and it just didn’t matter, and I had almost forgotten why people did this in the first place.

I’ve seen code wrapped at 80 columns plenty of times before, but something about picking apart this code at that moment made me suddenly ask why. What was so special about this 80 column “standard” and why was it seen throughout the programming world? When I first started out coding this was just assumed to be the way to do things but I had never fully heard an explanation as for why this was done.

As it turns out the answer lies in old technology and tradition. In the early days of coding,  text based terminal displays were only 80 characters wide, so any lines longer than 80 characters needed to be wrapped. There just wasn’t any choice in the matter. Remember that GUIs and mice didn’t exist back then and scrolling was typically done only vertically. Some people believe that the even older computing method of using punch cards, which also typically had 80 columns, is the reason for this style of coding, however while it may have influenced the design of those old terminals, I don’t believe that punch cards directly gave way to practice of coding text at 80 columns.

Now since virtually no one uses an old terminal to write code, and today’s monitors are larger and have larger display resolution than older machines, why do we still see this? The answer? Tradition. Well that and readability. While most modern code editors will let you type a single line for as long as you want, reading that line becomes a huge pain in the ass. You’re forced to scroll horizontally to the right to read the code or comment, and then scroll back to the left to get back to the rest of the code. While an 80 column limit might seem constrictive or limiting, it actually makes code easier to read, and can help you write better code by making you find ways to shrink your code down to fit in one line. Another advantage to limiting the characters per line is code comparison. By staying with the 80 column rule you can usually fit two files side by side and examine them line by line quite easily.

Oh and while 80 columns is sort of a standard, 72 and 76 column layout are also quite common, but slightly more restrictive. Personally I am lazier than I like to admit and I often don’t pay a load of attention to how many columns each line of my code takes up. But that’s being both a bit lazy and selfish. By making your code readable, it helps you and anyone else looking at it…and you just know you’re going to need another set of eyes looking at your code at some point to help ferret out a bug down the line. And while I’m no advocate for 80 columns, if you stick with a layout that makes your code easy to read why not pick something like 100, 120, or 132 columns now that most people have larger monitors? Being lazy I also don’t think that any of this should be a rule but more of a suggestion or guideline. Bottom line, once you get your code to work the way you want it to, why not make it look good and improve the readability at the same time?

The Week In Review: iPads, Chrome, Firefox, and PayPal

Wow, what a week. For a web developer/designer/tech lover there has been a lot of new information in this first month of 2010 (at last we get to use the word “twenty” to describe the new decade — twenty-oh-four never rolled off the tongue). Not only did two of the best browsers get some nice updates, but Apple finally released their long-rumored tablet and Microsoft told users to stop using IE6. Oh, and then there’s PayPal.

Firefox and Chrome

First off, Mozilla and Google both released updates to their web browsers. Firefox 3.6 is out now, and in addition to some bug fixes it introduces eye candy known as “personas”, stale plugin protection, downloadable web font (WOFF)  support, support for new CSS attributes such as gradients, background sizing, and pointer events, and support for new DOM and HTML5 specifications including the drag & drop and file API, which allow for more interactive web pages.

Google released the fourth version of their Chrome browser which added the ability to add extensions and sync bookmarks across multiple computers.  They also have added more HTML 5 support including  LocalStorage, Database API, WebSockets, and more. I like Chrome, but I still haven’t switched to using it as my primary browser (still Firefox). I think it’s making good strides but for the time being I still use it  mostly for testing. I like it, don’t get me wrong, it’s just that Firefox and I are old friends and well, I don’t see a need to dump Firefox just yet.

The iTablet iSlate iPad

Just yesterday Apple released their long awaited tabled, the iPad. Almost instantly the jokes about the name iPad began to circulate around the Internet with no end in sight. I admit I also cringed at the name, and was hoping for something more inventive than iPad. While Apple’s iWhatever line is certainly good branding, it’s wearing thin on me and it’s inevitable that at some point they’ll need to come up with a better solution. Continue reading