Too much text? Truncate it.

Too much text? Truncate it.
Again looking for something simple to fulfill a client request, and unable to find it, I wrote a little plugin to do the job. Truncate is a jQuery plugin for shortening text in one or more content elements. Invoking the method will limit elements’ number of initially visible words, and will add a link to show (or hide) the full text.

Better jQuery Tabs Plugin

Better jQuery Tabs Plugin

Delicious, light and sugar-free!

This is a tight little jQuery tabs plugin that will activate and prevent scroll on load when there’s a URL hash, or do nothing if the hash isn’t one the tabs. It’ll also check if there are links to other tabs in the content. It’s got object literal organization and a little fun progressive enhancement.

Once again, I found a standard-use script lacking magic, and this time it was my group’s go-to tabs plugin. It used a standard flavor of JS without leveraging any library, and it was bad. Switching between tabs took about a second, and even more was added to page load.

By using jQuery, we can cut that to a tiny fraction, while still keeping all the same functionality. Read More »

Add Labels for Easier Clicking

Add Labels for Easier Clicking
Do you hate when form inputs don't have a <label> tag around the descriptive text? It's POOR FORM to only give users a ten-pixel interaction area, especially considering touch devices and high-resolution screens. Here's an explanation of why labels are better for UX, and a quick jQuery solution that will help speed up your workflow.

Native CVS on Mac OS X 10.8

One might ask, why are we using CVS? Faster, more efficient and wieldy version control systems exist, like SVN and GIT, each with quicker setup and user-friendly graphic interfaces. In a similar vein, we could also ask “Why do we work, when we could just do whatever we wanted all day?” or, “Why is this night different from other nights?”

Unfortunately, the equipement we’re asked to use sometimes makes choices for us. But regardless of your feelings concerning CVS, this should make it easier to install the tool on a late model Mac running Snow Leopard to Mountain Lion. Wouldn’t you prefer to only run this each time you commit?

$ cvsbeta components/* wrappers/index.jsp

This guide is aimed at those of y’all who have local admin rights and are relatively comfortable working in the command line (Terminal, Bash, you know what I’m talking about). Read More »

No Photoshop Necessary: A Quick Guide to 3D Text Stylin’

No Photoshop Necessary: A Quick Guide to 3D Text Stylin’

As I’m sure you’re already aware, CSS3 is really pretty wonderful. Along with transitions, which can create animations in a tiny fraction of the old code and time, one of the best features is text-shadow.

Some great reasons to use the text-shadow property:

  • Allows us to make pretty headings, hover states and calls-to-action in moments
  • Drastically reduces monotonous work doing Photoshop layer blending, saving for web, uploading, HTML tag editing and cache clearing
  • Best of all, it lets us keep the text dynamic! This is great for those of us who pass on a project to a less technically inclined colleague or client. I know you’d rather it didn’t get passed back to you for each of the twenty pixel-pushing revision requests, and maybe it can even go into the CMS!
Read More »

CSS Transition Tricks: Fading Images on the Road to Success

CSS3 Transitions are fun stuff! With only a couple dozen characters, it’s possible to create beautiful interactions with dynamic pseudo-classes, which once was relegated entirely to Flash or dozens of lines of JS.

Of course there are some problems, though. One must take into account all the idiosyncrasies of the myriad browser engines, and include their  vendor prefixes. The older, crappier browsers don’t support them at all, and if you’re expected to mimic the functionality in IE6, your are in for a very long, annoying day.

Benefits and speed bumps aside, it can be difficult sometimes to get exactly the transition you want. For example, when you’d like to transition one background image to another with a fade. Read More »

Get going!

Get going!
For years I've been telling myself to sit down and actually write something worth saying, and share it with everyone. While this seems a bit like a self-improvement session at the moment, I hope it will actually be of some use to someone else as soon as possible. Until then, here's the most significant and profound photograph ever taken, the Hubble Ultra Deep Field, created by photons which travelled for over 13 billion (!) years. That's pretty crazy on its own, but the story behind the image twists my mind around. Hubble was aimed at what appeared to be empty sky, proving there's *way more* out there than anyone ever imagined. Carl Sagan was probably right about everything.