Susy Off Canvas, A Responsive Web Design Layout Pattern

I’ve mentioned the Susy framework before, but thought it was useful to bring up the concept of Responsive Web Design Layout Patterns. In this case we’re talking about “off canvas”, where elements are shoved out of the viewport (canvas), when a small screen is being used, and shoved back into the viewport, when the screen is large enough to accommodate the element. All of this can be decided by setting variables in the SASS in the Susy Framework. Makes rolling your own off canvas layouts much easier.

Off canvas layouts are getting more attention. The frontend framework from Zurb, has even implemented an off-canvas layout in their framework.

Also Brad Frost has a fantastic demo of some layout patterns for RWD. Resize your browser and check these out. Nice to know there are a lot of options to choose from. Good to see people experimenting with this whole RWD thing.

And I would be remiss if I didn’t mention Luke Wroblewski, whom I’ve seen at AEA conference, and attended his mobile workshop, and does fantastic work in the mobile space when it comes to Frontend Engineering. Check out his article on Multi-Device Layout Patterns.

Web developers are software engineers, too

Nicholas C. Zakas writes:

Shortly after that, led by these first few web developers, Yahoo decided that all of those talented individuals were actually software engineers. Every single “web developer” became a “front-end engineer” overnight. They were now officially part of engineering, where they should have been all along. What followed was, in my opinion, the development of the greatest front-end community in the world. This was before Google became the place to work and long before Facebook and Twitter entered into the minds of engineers. A lot of the best practices we have today, especially in the realms of performance, progressive enhancement, open APIs, and accessibility, come directly from the work that was done at Yahoo during this period. By the time I arrived at Yahoo in 2006, the front-end community was vibrant and thriving, transforming Yahoo into a company that took incredible pride in crafting Web experiences. I was honored and privileged to be able to contribute to that community and work with all those people.

I probably owe it to Yahoo for formalizing the term “Frontend Engineer”, it seems. So many great things came out of Yahoo for Frontend Engineering, and so many great engineers I admire. I’ve always been a fan of Yahoo’s from a engineering standpoint. I tried, and used YUI, in the early days. Particularly the CSS reset, and the font normalizing CSS bits.

I started this blog in the hops of collecting all the amazing work being done in the engineering niche, known as Frontend Engineering. Places I’ve worked at did not have this position, or realize it’s a real needed position for someone to focus on.

Nicholas explains:

If your company isn’t setup this way, it’s time to make the case. Web developers are software engineers and should be treated as such. The overwhelming success of the front-end community at Yahoo serves as a lesson to all companies: when done right, you can attract a phenomenal amount of talent and do amazing things. Yahoo’s recent struggles aren’t a reflection of the front-end community, and as mentioned earlier, there are a lot of former Yahoos who are now trying to build proper front-end organizations in other companies.

Almost all of the “top companies” you can think of right now are thriving because of the contribution of front-end engineers. There’s still an arms race going on among Google, Facebook, and Twitter, trying to find and hire more and more front-end engineers. Make no mistake, this is our time. So the next time someone asks you what you do, simply answer, “I’m a software engineer.” Then you can explain that your focus is on making web applications.

I wholeheartedly agree. Some fantastic projects are coming out of Twitter, like Twitter Bootstrap, and Flight, recently. I hope more of these top companies continue the solidification of Frontend Engineering as a specialization.

I also agree with Nicholas on this point:

(Note: I’m intentionally skipping over the typically arbitrary distinction some make between “developer” and “engineer”. As far as I’m concerned, they mean the same thing.)

Exactly. I’ve worked at places where your title is simply “developer”, and I think it carries a stigma with non-technical folk. “Developer” (often referred to as “web developer”) is an odd word, whereas I think the older, “Engineer” term carries more meaning – to build, or to design. “Develop” sounds less cool, honestly.

An event-driven web framework, from Twitter.

From the homepage:

An event-driven web framework, from Twitter.

Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications.

Ever since Twitter Bootstrap was released, I wondered if Twitter was going to also open-source more of the JavaScript things they actually use on the public site. This web framework looks interesting.

Twitter Bootstrap, of course.

From the homepage:

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Twitter Bootstrap is my first choice, if I want an easy-to-implement frontend framework starting point in a new project. I’ve used the framework for simple things like documentation, to small business websites. It is very popular, and as of this post has over 44,000 github followers on it’s github project page!

Even if you don’t plan on using it, at least go code-spelunking, it’s the best way to learn something new. I like the direction of the upcoming Bootstrap version 3, as well.

Opera Moves to WebKit

We announced that Opera will switch its rendering engine to WebKit and JavaScript engine to V8 by building on top of Chromium (the open-source browser that powers Google Chrome).

-Bruce Lawson, Web Evangelist for Opera

Also check out the full announcement on Opera’s developer blog, about moving to Webkit. Here’s the salient bit:

What does this mean for web developers?

The short answer is that it shouldn’t affect your day-to-day work. Keep coding to the standards, not to individual rendering engines; test across browsers - Opera, Firefox, Chrome, Safari and > Internet Explorer; use all vendor prefixes and an unprefixed form in your CSS and JavaScript. However, it remains important to keep the following in mind:

  • Chromium, and therefore future versions of Opera, has built-in support for the WebM, Ogg Theora and Ogg Vorbis media codecs but does not natively support H.264 or MP3 media codecs (although if these are installed in a device’s operating system it will allow that to render media). The correct way to check support is with HTML5 canPlayType. The simplest method to ensure all modern browsers receive the correct codecs is to encode in both WebM and H.264 and provide two elements or use canPlayType to check support (see Introduction to HTML5 video for more information).
  • The window.opera object will not exist in future versions of Opera. We continue to recommend that developers SHOULD NOT use browser-sniffing; feature-detection - either using a 3rd party solution such as Modernizr or hand-rolling your own - is better.

I use Modernizr extensively in my last few projects. Highly recommended.

Modernizr JavaScript Library

From Modernizr’s website:

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Why use Modernizr?

Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

I can’t recommend this JavaScript library enough. It makes progressive enhancement a whole lot easier.

Susy: Responsive grids for Compass.

Your markup. Your design. Our math.

The web is a responsive place, from your lithe & lively development process to your end-user’s super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.

Seems like a really neat Compass based responsive grid. I’m probably going to try this out soon. Mousing over the logo at the top of the page shows some nice CSS3 animations too.

Why Frontend Engineering?

Thinking about “The Rise of Frontend Engineering”

I’ve been doing web development in one form or another since roughly the beginning of 2000. My own recent specialization into what is commonly referred to Frontend Engineering, had me thinking about creating a resource for this specialization of web engineer. I’ve kept a laundry list of features, and content ideas, and I hope to begin making this a real resource for other engineers like me in this niche of engineering. I’m starting the site simple, with little or no customizations, and as the site progresses, I’ll try to make it an example of best practices. A tall order, but one I hope to fulfill, so for now, please keep your stones in your pockets, while I kick the tires on this thing, and see what becomes of it.

I’ll be doing a lot of linking, with short commentary alongside it. And of course, I want to write long form articles as well. More to come soon.

Why Frontend Engineering

To me, this field has always been around, possibly mostly forged by Yahoo originally(?). I’ll probably explore the origins, the definitions, and the reasons as to why this thing we’ve always done in some capacity, now has a name, and now people can specialize in it, and get jobs doing it specifically. This specialization in our industry, has fascinated me for the last two years or so, so let’s have a discussion about it, and become better at it, together.


Kevin Ridgway

Getting Started with SASS

Unlike regular CSS, Sass’ SCSS is a real scripting language, with expressions, functions, variables, conditional logic, and loops. You don’t have to use all of these features to get some benefit out of Sass, but they’re there if you need them, and on large projects they can make complex or repetitive CSS much easier to write.

A great introduction to SASS, which is my CSS preprocessor of choice.