Fluid layout and images in Sass

“No doubt you’ve at least heard the term “Responsive Web Design”. Since Ethan Marcotte’s article and book came out over the last year or so it’s been the hot topic among web folk, and rightly so. The solutions Ethan puts forth gracefully solve a number of problems we’ve been limping along with.” This guide on The Sass Way teaches you about fluid layouts and images, and the beginnings of building a responsive site in Sass.

WordPress Themes with Sass & CoffeeScript

Forge is a open source command-line toolkit for developing WordPress themes using pre-processing languages like Sass and Compass for your CSS and CoffeeScript for your JavaScript. Forge is brought to you by the fine folks at The Theme Foundry, the same people behind the awesome responsive WordPress theme React. If you’re a WordPress fan and have been looking for a way to work with Sass and CoffeeScript in your themes, Forge is your answer!

LiveReload - Mac users you need this

If you’re a front-end developer and use a Mac, you need to check out LiveReload. LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

Help people experience the web in a new way

First things first, this is not a technical post more of a “what do you think?” kind of deal. So feel free to read ahead and add your thoughts, I’d love to hear them.

This morning I saw a post from Web Browsers News and Reviews titled What is IE? that got me thinking. Essentially the post is a screenshot from a Facebook conversation where one user asks another if they’re using IE. In reply, the user says “I don’t know what IE is so probably not”. The reply to that was, “in that case, you are”.

With the integral role that the Internet plays in many lives these days, there should be a greater understanding of the tools someone uses to access that information. I know, I know… we’re not all web geeks. But here’s the thing. Are you a construction worker? Although you might be, if you’re reading this chances are you’re not. However, I bet if you have a nail you know to get a hammer and not a screwdriver.

That example may dumb it down a bit, but there are literally hundreds of thousands of users that do not receive the experience they could simply because they don’t know any better. All they know is “look for the ‘e’ icon… that means Internet”. Those of us “in the know” need to take more steps to teach people “why” they should use a different browser.

I understand that we already do things like promote Chrome Frame to our site visitors, but what I’m talking about is a more hands-on role. I’m sure many of us have conversations with new acquaintances about what we do, it’s a common conversation starter when you’re meeting new folks. During those conversations, we need to make an effort to ask about web browser use and explain why and how they can enjoy what we all enjoy now. We all could probably use some extra stuff to talk about during those times anyway. Heck, when the in-laws come to town… bam… you have something to actually talk about.

I’m a proud dad for many reasons, but it always puts a smile on my face to see my 7 year old daughter sit down at my wife’s PC laptop and fly past IE and fire up Chrome. Same thing happens with my other two children as well.

What do you think? Are we doing a good enough job at spreading the word in the “real” world outside of the web? If anything, at least I have something to talk about when the in-laws come to town for Thanksgiving.

zepto-js Mobile WebKit JS Framework

Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax. The goal: a ~5k micro-library that handles most basic drudge work with a nice API so you can concentrate on getting stuff done.  Created by Thomas Fuchs, zepto.js looks like a great tool for mobile developers.

IE9 Bug: Ordered Lists with Zeroes

So in my daily job, I came across a weird IE9 bug with ordered lists that were brought in via Ajax. They weren’t numbered, but had all zeroes instead. I searched around and found a couple solutions that mention adding a second div. I’d rather not pollute my markup so I wanted a different solution.

Since this is happening on an Ajax request, I can rely on JavaScript being available. What I discovered, is that if you hide the list and then show it again, the numbering appears without issue. Unfortunately, you can’t use a .css(“display”,”none”).css(“display”,”block”) because there needs to be some delay in execution.

So my solution using jQuery for the time-being is the following (you can determine whether you want to use $.browser.msie or $.support to try and track down IE):

var ieTimeout;
var selectorWrapperSet = $(selector);

selectorWrapperSet.css("display","none");
ieTimeout = setTimeout(function() {
selectorWrapperSet.css("display","block");
}, 1);

Yep, just a 1ms timer is enough of a delay in my testing so far to have the list numbers appear as normal.

Now, to consider this a tried and true solution would require testing this behavior against numerous scenarios which I haven’t done. However, I did want to post this in case it could help someone stop banging their head against a wall.

- Vern

Update: As Peter pointed out, there isn’t a need for the clearTimeout within the setTimeout.  My mind must have been thinking in terms of intervals when I wrote this post.  Thanks for the heads up Peter!

Tiered, Adaptive Front-end Experiences

The argument of “it has to look the same in every browser” is one that has been an especially hot topic this year with CSS3, responsive layouts and more. This is a great read from Paul Irish to help champion the cause of giving browsers an experience tailored to the capabilities of the browser itself. Even if you’re using oldIE.

BoltJS from Facebook

After a steady stream of information in June, all has been quiet on the Facebook Project Spartan front in recent weeks. Originally, at least some thought the plan was to unveil Spartan in July — but that obviously came and went. It’s certainly possible we won’t hear anything until f8 in late September now. But one new bit of information has come to our attention that could be related. Say hello to BoltJS.

Cross Browser CSS Box Shadows

Box shadows have been used on the web for quite a while, but they weren’t created with CSS — we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Here’s David Walsh’s solution to cross browser CSS box shadows.