TIPS, TRICKS & BOOKMARKSSimplest jQuery Slideshow
A friend was looking at doing a simple slideshow. The requirements were very straightforward: No animation controls. eg: play, stop. Images should cross-fade. Her instinct was to find an existing jQuery plug-in and revise it to work to her needs. That would seem simple enough but if you do a search for jQuery slideshows, you'll find that there are plenty of them and they are fille...
BookArc
After having seen Matt Brett twitter about it, I knew I wanted one. The BookArc is a laptop stand, pure and simple. It fits the Mac aesthetic very nicely with its brushed aluminum look—the site says it's made of "heavy gauge" steel. Suffice it to say, this product is solid. It has soft silicone feet and silicone inserts so as not to scratch your desk or you MacBook. There's 3 diff...
Review: Fancy Form Design
Sitepoint has recently released a book called Fancy Form Design. Sitepoint was kind enough to provide me with a copy of it and being only 176 pages, I was able to finish it in short order. Fancy Form Design is a quick read and has a clear focus: design quality forms. The book is broken down into 5 sections, each building on the one previous using a single project over the scope of the book. For a...
Creative Use of Bitwise Operators
While at the Fronteers conference watching Thomas Fuchs go through his slides, a keen member of the audience noticed his use of bitwise negation and asked what it was for. Understandable, as there is so rarely a time where bitwise operators seem necessary. It did, however, remind me of a project that I worked on where I ended up using bitwise operators quite heavily in one particular chunk of c...
Review: Mobify
A few months ago, the folks at Mobify were kind enough to create a mobile version of my site using their service. Mobify is a web-based service that allows you to create a custom mobile version of your site. Since my redesign, I got an opportunity to play with the service first-hand and felt that it might be good to share my experience. What does Mobify offer? Why would anybody use a service...
'Hooligan
I just signed and returned the paperwork. As of November 16, I'll be an employee of Yahoo!. This might seem like a bit of a surprise for those aware that I started at Squarespace just seven months ago. Unfortunately, six months into it, the requirements of employment changed and I was no longer able to stay on. Suffice it to say, I think the folks at Squarespace are fantastic and I believe they...
Review: HTML and CSS Web Standards Solutions
This book, HTML and CSS Web Standards Solutions, by Christopher Murphy and Nicklas Persson is subtitled, "A Web Standardistas' Approach." As you might imagine, the book takes a purist approach to teaching the basics of HTML and CSS to the reader. Jumping into this book, I wasn't sure what to expect. By the end, though, I felt that this is more than just another book: it's a textbook. ...
In Firefox, In Google Reader
A really quick screencast today. I twittered about how frustrating it was to have to take 5 clicks to subscribe to a feed into Google Reader within Firefox. I finally decided to take a few moments to fix the issue and get it down to one click (well, technically two, but who's counting). Of course, this is by no means the only way to do it. Plenty of people on Twitter recommended plugins and bo...
Becoming a Font Embedding Master
I've spent a couple days worth now trying to figure out the best and most complete approach to font embedding using @font-face. It really is a dark art that must be mastered. It is by no means a straightforward process. Font Formats Generally speaking, these days, a font on our system is going to be one of two formats: TrueType (with a .ttf file extension) or OpenType (with a .otf file extension...
Screencast: Converting OTF or TTF to EOT
In case you hadn't noticed the lovely titles on this page, they're League Gothic. Well, they should be if you happen to be using the latest version of Firefox, Safari, or Internet Explorer. However, it took much trial and error to figure out exactly how to get there. There are a number of pieces to the puzzle but in the end, I got something to work. The assumption here is that you are on a Mac (as...
Minimal
I need to document all the stuff that went into this design but for now, I'm happy just to have it launched. Why did I redesign so quickly after the last one? Because I wanted to! Inspiration struck and I ran with it. In the end, I'm much happier with this iteration over the last one and I'll be happy to keep this around for awhile. Like the last version, I used HTML5 sparingly. Simple doctype,...
Less of Me
I fear actually saying this out loud. I certainly don't want to jinx the progress I've made but, at the same time, I'm excited by the change. I'm trying to lose weight. I used to be slim. In my early twenties, I worked on my feet all day. I also didn't have a car. Therefore, I walked to and from work. And to the store. And to anywhere I needed to go. If I wasn't walking, I was on my inline skat...
Text Rotation with CSS
Once again, after reading somebody else's article, I felt inspired to put together an alternative example. In this case: Text Rotation. Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It's like the top fell off the pepper shaker and you've suddenly got a large pile of pepper on your food. It...
HTML in a Flash World
Last night, I had the pleasure of presenting a short little session on HTML development within Adobe AIR and what the perks and pitfalls were. The feedback I got afterwards was very positive and I hope everybody there got something out of it. As promised, I'm providing the slides in both PDF or Keynote. Here are the resources that I talked about and have linked to in the slides: Adobe AIR ...
Adobe and HTML5's Canvas
I had an epiphany and I hope somebody at Adobe has been paying attention to the HTML5 developments. Adobe is well positioned to take advantage of emerging browser features, most specifically canvas. As great as canvas is, having a visual tool to assist in taking advantage of that would be ideal. Such a tool would smooth out the rough spots of cross-browser issues and could provide a set of pre-d...
Behind the Process: Snitter Icon
I built this desktop application a while back called Snitter. It's a desktop Twitter client that runs on Adobe AIR. Alas, it fell by the wayside during my freelance tenure. Recently, I've had the inclination to start working on it again and bringing forth to reality ideas that I've had for over a year now. One of the things that always bothered me was the rather rushed icon. A rather boring S. I ...
The Elephant in the Room
Almost a month ago, I wrote about supporting older browsers — how and whether we should even support them. We draw a line in the sand that says, "You popular browsers, stand over here. Everybody else, just be happy you got content." More specifically, a base style sheet would declare some default font styles but no float or other layout tricks. Just linear content. Thi...
Fixed Position and Opacity Filter Bug in Internet Explorer
I think I have a knack for discovering weird edge cases but here was a wacky one that had me scratching my head for awhile. In working on some interface development, I wanted to have an element with fixed positioning, locking it to the viewport. In this particular case, it quickly animates in by adjusting the opacity of the element from 0 to 100. Straightforward enough, right? But in Internet E...
Shifting my Opinion on CSS Animations
When CSS animations were first introduced in Webkit back in 2007, I expressed my concerns that CSS may not be the best place for it. Sound cool? I don't think so. Not only does it make CSS more complicated, it makes JavaScript more complicated, too. Having actually taken some time to implement CSS animations in an example, a light bulb clicked. The way I looked at how animations were ...
Multi-line JavaScript
In a case of, "I didn't know you could do that," I discovered via some random blog post I've now lost track of, that you can do multi-line JavaScript by escaping the line breaks. var a = 'You can start here \ and continue here \ and then finish it up here.'; The backslash on each line allows you to keep going. It's a little bit cleaner than opening and closing quotes and a concatena...
Why I don't love JavaScript's Module Pattern
The Module Pattern is the use of closures to create, in essence, private functions that are only accessible by other functions created within that closure. Functions can be attached to an object and returned outside of that function call. This establishes a public API and only the functions defined within that public API will have access to those hidden functions. The YUI blog documents this we...
Death of an Ad Network
SidebarAds is shutting its doors. After almost a year, this little pet project from Sidebar Creative is calling it quits. Originally conceived as The Deck "Light" but focusing more heavily on the designer/developer crowd, it would grow to more than a million ad views a month. Too bad the advertisers didn't come join the fun. It was great fun to put together and a learning experienc...
Building a URL Shortener
With all the talk of URL shortening services, I decided to add a quick service into Snook.ca, which is run on CakePHP, to redirect a short URL to a post. Because my static content already has short URLs and all I have are posts, creating a short URL handler for it was very easy. To give you some context, I route my posts through a specific structure: /archives/:category /archives/:catego...
Old Browsers: Do they still exist?
I've been thinking about this for a long time and while I thought I had a solid opinion on the matter, I find myself waffling on the issue. Who cares about older browsers? If you haven't done so, I highly recommend cracking out a copy of Firefox 1. Start bouncing around to a few sites and check out what's broken. Sure, most stuff is fine but you'd probably be surprised at what's broken. What abo...
Screencast: Webkit in Titanium
It's the honeymoon phase of learning a new platform. That part where you really enjoy the features that it offers. It's fun and exciting. You've yet to discover all the weird quirks and limitations. This little screencast is of my little frolic through the fields that is Webkit in Titanium. If, like me, you've been hearing about all the nice features that have been going into Webkit then come alo...
Streamliner
Now that I have a little more free time, I've begun the process of bringing Snitter back to life. The crowd of desktop applications has not deterred my resolve to (re)build a Twitter application of my own. I have a vision — a vision that I've had since before SXSW of last year — that I still have an opportunity to bring to fruition. However, along the way, ...
Creating Desktop Applications with Titanium
After my adventures in developing with Adobe AIR, I've been keeping an eye on the state of cross-platform desktop application frameworks. In the past year or so, I know of JavaFX and Titanium that have also hit the market. Not being a fan of Java, I stayed clear of JavaFX. Titanium, on the other hand, with its similarities to Adobe AIR, has been a more compelling option. Titanium is an open sourc...
Twitter to Lose Auto-follow
Twitter will soon get rid of the auto-follow feature. It wasn't necessarily a public feature. You had to email support to have your account enabled. When a person followed you, you'd follow them back, automatically. Why autofollow? There are two main reasons that I can think of why people use this feature right now: The first are people like Scoble and Guy Kawasaki who are social media sponge...
Colour Contrast Check Tool Updated
Over five years ago, I put together a really simple tool that let you specify a foreground colour and a background colour. The tool would spit out whether it met the W3C guidelines for acceptable levels of contrast as part of AERT. A year later, I added convenient sliders for adjusting the red, green and blue (RGB) values. I decided to take a moment to update the tool with a couple new features. ...
Being Square
The snow is melting. Spring is upon us. It's that time of year for new beginnings. And there are definitely plenty of new beginnings around the Snook household. On top of all the other things that have been happening, I've decided to make some changes, too. After three long years, I'm leaving the life of freelance. What's old is new again, it seems. I'm going to be working for someone else. As o...
Matrix Layouts
This post isn't about what you think. This isn't about some handy little CSS technique you can implement right now. Not yet, anyway. This is about an idea that I've been working on. An idea that — I hope — will one day help you and me build better web sites. I've come up with my own layout specification. Um, why? Who in their right mind would ever want to do something like that? ...
Using Yahoo Pipes to turn XML feeds into JSON APIs
While I've known of Yahoo Pipes for awhile, I never really thought to use it until now. Pipes is a neat tool that Yahoo has put together to allow you to mashup feeds, filter feeds and create a completely new feed. Commonly, I've seen people take feeds from a number of different sources on a particular subject and combine them into a master feed. For example, they want a master CakePHP feed but ...
Screencast: Firebug Breakpoints
That's right folks. It's time for another screencast! This time, I thought it'd be nice to cover a little bit of Firebug. I've actually been meaning to put together a few screencasts on Firebug. If you like this one, definitely let me know and I'll be sure to put some more together. In this screencast, I take a quick look at how to use breakpoints in Firebug to help in your debugging endeavours. ...
Embedding Twitter Status
In building this iteration of the blog, I decided to follow that trendiest of trends and embed my latest Twitter status on my sidebar. Despite having been on Twitter for awhile and having my site linked from my Twitter account, I didn't really have anything pushing people from my site back to Twitter. Problem solved: add status to sidebar. But what's the best way to keep it up to date? I could p...
Blog Blazers
Just over a year ago, Stephane Grenier emailed me asking if I'd be willing to answer a few questions on my success as a blogger for a book he was putting together. That book turned into Blog Blazers, a collection of interviews with bloggers from across various industries. Although the questions asked are the same for each blogger, it's interesting to see the similarities of how each person has ac...
Review: Things.app
Productivity, or the lack thereof, is something that I've been struggling with for some time. Keeping track of what I need to work, when I need to work on it, and what is on the priority list are all things that distract me from getting a productive day of work done. I've tried to-do lists, white boards, post-it notes, and a variety of applications to keep me on track. That is, until Things.app ...
Screencast: Playing with Light in Design
I took a few minutes today to talk about something I've been doing with my design work as of late: playing with light to add depth and texture to a design. In this 7 minute and 19 second screencast, I look at layering elements using gradients and the use of white or black as a way to add light or shadow to a design within Adobe Fireworks. I start with a base colour and then start adding el...
Blick Blocky Retro
After a wild couple days, it's live. Well, live-ish. Blick Blocky Retro, the ninth iteration of this veritable site, has made its debut. Why? I've been working on this redesign for close to a year now. It has simmered, occasionally come to a boil, only for me to turn off the heat and step away from it. However, recent troubles with Dreamhost have finally made me flip my lid. The site performance...
Pardon Me
Here's the thing... I was having some issues with a previous host and I needed to get off, quick. In doing so, I'm pushing this design — Blick Blocky Retro — live. I don't have comments enabled, yet. I'm probably missing a bunch of content that fell outside the land of blog. In any case, I'm on a new server now. And I'll get the comments live along with a more formal introduction pos...
Reflections
It's that time of year when people see the big number roll over and decide to reminisce over good times and bad, and talk of where they plan to go until the big number rolls again. This blog post will be no exception. On the Personal Front It's interesting to look at last years pontificating. In some ways, things haven't changed. I am getting better at managing my time but in a weird sort of way....
I'm Jonathan Snook and I write about web design and development. I speak at conferences and I yammer on about what I'm having for lunch on Twitter. You can keep up to date with everything I blog here via the RSS feed.
Want to learn more?
