Web Development

Automating Your Web Workflow with Grunt.js

Grunt LogoI have to admit, it wasn't love at first sight (I mean, just look at those tusks), but I'm now head over heels for Grunt. Grunt is a task runner that chugs along in the background and, with the right set of plugins, can be set to automatically combine and minify CSS and JavaScript files; check HTML, Javascript, and JQuery for errors; compile Sass to CSS; write browser-compatible code; and more.

Strictly for My Ninjas

Font Face Ninja in actionToday I'm sharing a great tool for exploring typography on the web. Fontface Ninja is a plugin for the Chrome and Safari browsers that allows you to identify the font face and styling of any text on a page.

Case Study: Building a Responsive Site in Drupal 7

Printer’s Devil Review is an independent, open access journal of literary and visual art. Recently, I redesigned the site to allow users of mobile devices to more easily access the magazine's content. In this case study, I highlight the features and tools I added to the site.

Type Patterns in Web Design (2013)

Body Copy Font SizeWhen you take away the images and other media, most of what determines the look and feel of a website is typography. In 2009, Smashing Magazine conducted a survey of text-heavy sites (like newspapers and magazines) and provided a guide to the common typographic practices in web design at that time.

Responsive Design Bookmarklet

I've been developing a responsive theme for a new site, and I've found Responsive Design Bookmarklet extremely useful. Just drag the button from the site to the bookmark bar in your browser and when you activate it, you'll have the ability to shrink the viewport to a number of pre-set widths.

PHP vs. Ruby vs. Python

I just stumbled across this great infographic from columnfivemedia. It offers a comparison of what are currently the most popular server-side languages: PHP, Ruby, and Python. The graphic also includes charts showing what combination of languages are most likely to get you a job.

Creating a Responsive Multiple Column List

Guest contributor Samantha Milowsky shows how to take a web page with fixed-column lists and transform it into a flexible, responsive page that will look great on a wide range of devices.

Using JQuery UI to Add Effects to a Drupal Site (Part II)

In a part one, I showed how to use JQuery UI's .dialog method to script a modal message on a Drupal site. In part two, I show how to customize what the message looks like and how often it appears in the browser (using cookies).

Getting Sketchy with Wireframes

WireframeIt wasn't that long ago that my process for developing a website for a client was to create some visual mock-ups in Photoshop, get feedback, make changes, and then get coding. More recently, I've adopted the practice of starting with wireframes for any project that requires input from a client.

Brakets: A New Open Source Code Editor

Brackets LogoThere's a new code editor in town, and it's free and open source. Brackets is an editor specifically designed for web development, focusing on CSS, HTML, and JavaScript. What makes it unique is that it is also built in those same languages.