Cool and Easy HTML with Emmet

Amaze your friends and write HTML faster with this one cool trick!

But seriously, native HTML is repetitive and annoying to write. Emmet provides an intuitive and sleek alternative. It’s widely supported, and its simplest features can be adopted no problem on day one of using it. Plus — it feels great to use, and it just looks cool.

Emmet, formerly known as Zen Coding (developed by Sergey Chikuyonok), is a super cool shorthand tool for writing native HTML code. There are plugins in most editors (including Sublime Text, Visual Studio, Eclipse, IntelliJ, and Brackets), so there’s no reason not to use it. Read more on Cool and Easy HTML with Emmet…

Using SASS, Sprockets, and Compass with Rails 3.1

Using Sprockets in Rails 3.1 can be a little tricky. It wasn’t hard to get Sprockets compiling CSS files from SASS into CSS. However, it became difficult when we wanted to use a compass mixin and put erb assets into our sass files. Here’s what we did to get it to work

Read more on Using SASS, Sprockets, and Compass with Rails 3.1…

Automated Tests for HTML5 Offline Web Applications with Capybara and Selenium

Testing web applications that make use of the new HTML5 features can be frustrating. With a bit of work, we can use Capybara to test them through the browser relatively easily.

Offline functionality has been discussed on this blog before here and here.

I recently started an offline web application built on Zend and Sammy.js. When I tried to add system tests using Capybara, the default drivers choked hard on the javascript-heavy site. Switching to Selenium helped tremendously and instantly made most of my tests pass.

Most of them.

Read more on Automated Tests for HTML5 Offline Web Applications with Capybara and Selenium…

Grand Rapids Web Development – HTML5

I gave a talk tonight on the offline capabilities of HTML5 at the Grand Rapids Web Development Group meetup. The topic of the meeting was HTML5. I discussed Web Storage and the Application Cache and talked about my experiences with each after spending several months converting a web application to work while offline. The slides are available here: HTML5 Offline Presentation.

Read more on Grand Rapids Web Development – HTML5…

Table Layout Sucks… but I Do Miss valign

With margin: 0 auto; it’s pretty easy to center content horizontally, but it’s a pain without tables to center content vertically inside either a container or the window. Here’s a pretty simple CSS method I found. In this example, we’ll be centering in the browser window, but this can be applied inside a container as well.

Read more on Table Layout Sucks… but I Do Miss valign…