TIPS, TRICKS & BOOKMARKS on WEB DEVELOPMENTReflective
It is once again that time of year where I reflect on the year that has passed and contemplate the year the come. Professionally On a professional level, this has been a fantastic year but still not without its ups and downs. This year capped my second and final year with Yahoo!. Yahoo! has been a great experience for me and exposed me to an environment that I hadn't worked in before. I was...
SMACSS Statistics and Gender
I hesitate putting this information out there as I'm not sure what its relevance is. I merely note it as interesting, especially in light of gender inequality in our field. In number crunching the people who have purchased a SMACSS e-book or site membership, I've noticed that the numbers are heavily skewed in one direction: 94.5% of the purchases are by men. That means only 5.5% of purchases w...
Meet Jack
Meet Jack the Lumberjack. He's the new mascot for Scalable and Modular Architecture for CSS. When working on the e-book, I wanted to have something that could provide an identity for the book and for the project. The idea of it being a lumberjack quickly came to mind. I liked the idea of a lumberjack for a number of reasons. For those that aren't aware, I live in Ottawa, Ontario, Canada....
Of bits and butterfly effects
I've never been so vain as to think I'll have much impact on the world. I never wanted to be president. I never wanted to be a doctor. I'll almost assuredly never go to war to fight for my freedom and the freedom of others. Way too much responsibility. Instead, I grew up making virtual things. Apparently, even making physical things was too much. I push bits around as if I'm doing something...
Presentation: Fake it 'til you make it
From my presentation at StarTech, here are my slides. Fake it 'til you make it shows some code and examples on how to make a web app look more like a native mobile application. This can provide a way to build quick prototypes or to build using familiar technologies. ...
Unsure
Getting older is a humbling experience. Watching other people get older is sometimes equally so. I have an older brother who is almost nine years older than I am. When my parents divorced, I was only 3 years old. My brother moved with my dad and I stayed with my mom. I don't remember the divorce. I don't remember much of anything before the age of 5. As a result, I've considered myself an only c...
Presentation: CSS Takes Over the World
I was at Adobe MAX this week, where we got to see all of the new and exciting things coming from Adobe. I got to present my talk on CSS twice and, as promised, here are my slides from that: ...
Thinking about CSS Architecture
With all my work at Yahoo!, I'd been thinking more and more about CSS architecture. I really sat down and took the time to analyze my process. What's the most flexible but straightforward way to do it? How does this fit in with the team process and how does this work in comparison to how other people are doing it? I started making notes and eventually started writing up my thoughts. Was this go...
Yellow Fade Technique with CSS Animations
I don't think I'm the first person to come up with this idea but figured I'd document it. If you're unfamiliar with the Yellow Fade Technique, make your way over to the 37signals article that ushered in the design effect that was all the rage for awhile. This is the same thing but using CSS animations. /** * Quick fade on target to attract user attention */ :target { -webkit-a...
Sizing with CSS3's vw and vh units
CSS3 introduces a few new units. (Oh wait, I've said that before.) So, you've heard about px, pt, em, and the fancy new rem. Let's look at a couple more: vw and vh. Often times, there are certain elements within our design that we'd like to ensure can fit into the viewport in their entirety. Normally, we'd have to use JavaScript to do this. Check the size of the viewport and then resize any ele...
IE8 bug with max-width and overflow
Just a quick documentation of this interesting bug. This only happens in Internet Explorer 8 (but not 7 or 9), which was interesting. If you have an element with long text but it has white-space:nowrap to prevent text wrapping with a max-width and overflow:hidden to clip the overflowed text, then a floated container (which should collapse to the width of the content) will collapse to the wid...
A Modest Proposal for CSS3 Animations
I've been thinking quite a bit about CSS architecture these days. One thing in particular that has crossed my mind is how to handle certain situations. For example, we want to hide content on the page and then reveal it (or vice versa). In JavaScript, this is relatively straightforward: get an element, and apply a class or remove a class to change the state of the element. The CSS for that mig...
Font sizing with rem
Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. It's just a matter of which less-desirable is most desirable. There are two main techniques that are extolled: Size with px Size with em Let's review these two approaches be...
Absolutely Positioned Textareas
One method that I've been using quite a bit for positioning elements is setting them absolute and using left, right, top and bottom values to lock inner elements relative to an outer container. I like using this technique because padding will not cause any positioning issues like using width can—especially when widths need to be percentage-based. textarea { position: absolute; left:...
Keyboard Accessibility for Web Applications
One of the things I really enjoyed working on (and continue to enjoy working on) is keyboard access in the new Yahoo! Mail. As a fan of using the keyboard, I wanted to make sure that using Mail felt natural and was easy to move around the application. This is much harder than it looks because we have to establish a balance between a web page model and an application model. Todd Kloots, from the...
Web Design Master Class
It's been a long time coming but I and the rest of the folks in Sidebar Creative are back this year with a brand new edition: the Web Design Master Class. We've partnered with UIE to put on not one, not two, but three workshops this year. Crazy, I know. Even crazier is that we've actually been rather quiet about the whole affair (well, except for the occasional tweet or two). Allow this venerab...
Book Review: The Elements of Content Strategy
The third book from A Book Apart, The Elements of Content Strategy, is a "brief guide [that] explores content strategy's roots, and quickly and expertly demonstrates not only how it's done, but how you can do it well." That's an accurate description, although this book, unlike the previous two, does not feel brief. This book focuses on content and is all content. There are few diagrams and no co...
Hiding Content for Accessibility
For years now, we've used a number of techniques for hiding content offscreen for accessibility purposes. We do this because the content is still accessible to screenreaders while being removed from the interface for sighted users. An article over at Adaptive Themes reviews a number of techniques for hiding content that were considered for inclusion on a Drupal 7 project (but certainly applic...
Journey into the World of Vim
I used to make it a part of my day to learn a new tool or find a shortcut for something I already did. It's a habit I got out of for awhile. I called it my laziness: I don't want to spend time operating a tool; I want to spend time building what needs to get built. In my heyday, I'd have my machine customized to the nines. Lots of shortcuts and gestures and bells and whistles to help me be pro...
Assumptive Development
As web developers, we want a way to ask "can you do this?" And there are varying degrees to which we can determine this. One of those ways is to use user agent (UA) detection. We ask the browser some information about itself and it tells us. Based on what we know about a browser, we can make certain assumptions. If a browser tells you it is Internet Explorer, chances are you support the HTML, CSS...
Amazon launches Simple Email Service
Amazon has launched a new API for sending email "in the cloud" called Simple Email Service. Like other Amazon services, one of the biggest draws—besides using the solid infrastructure—is the pricing. You can send up to 2,000 emails a day absolutely free. After that, you're looking at 10 cents per thousand emails and 15 cents per GB of data transfer. Some basic list managem...
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?
