menu

Blog

Firebug as a Development Tool

Firebug Logo

Want to see what a website looks like under the hood? Or maybe debug some script you've just written? It's hard to find a better tool than Mozilla's Firebug plugin for the Firefox browser. Chrome, Safari, and Opera browsers all have development tools that allow you explore the code and resources that makes a particular webiste go. Still, most developers I know prefer to use Firebug.

Browsing with Firefox, you can just click the firebug option and get a wealth of information about the page you're viewing.  Firebug always you to not only inspect the HTML and CSS code of a page, but also to edit it. Your edits are immediately reflected in your browser without actually changing the code on the server where the page lives. Refresh the page, and you see the original page (without your changes). 

You can also select a page element (a navbar or a paragraph, for example), and Firebug will display and highlight the code for that element. I often use Firebug to figure out what CSS IDs or classes are governing the style of a page element. Still within Firebug, I can then edit the CSS code for that section and try out all sorts of possibilities on the fly. When working on a site of my own, this is much more efficient that writing CSS code on the server, then refreshing the page, writing some more, refreshing again, and so on.

More recently, I've been using Firebug to debug my JavaScript. I can watch my code as it runs in Firebug's console view and even embed messages in my script using the console.log function. If you're using JavaScript to work with cookies, the Firecookie addon allows you to view, delete, manage, and even create cookies within your browser.

Firebug is a great tool for beginners who want to learn how webpages are structured and for experienced developers who want to debug their code.

DrupalCon Denver 2012

DrupalCon Denver LogoBack in March, I spent a few days in Denver at DrupalCon, catching up on the latest news from the community of developers and designers who use the Drupal content management system. It would be pointless to try to summarize the conference, but here are my top three take-aways. (Note that videos and slides from the sessions discussed below are available from the DrupalCon site; just follow the links in the posts to view them).

Responsive Design. The concept of responsive web design is only a few years old, but it's clearly taken hold. As Ethan Marcott suggests in his often-cited article, the explosive growth of mobile devices means that old assumptions about web design need to be revised. In many situations, it no longer makes sense to design a site for view on a desktop monitor or a laptop, only to re-tool it (or build an entirely separate modile-dedicated site) for users of mobile devices.

As Kayla Knight explains in "Responsive Web Design: What It Is and How to Use It," a responsive design approach suggests that a site should be built from the beginning with a multiplicity of devices in mind: 

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

London-based designer Lewis Nyman outlined a compelling approach to responsive web design: rather than starting with the high resolution, high-powered personal computer in mind, design your site for the most basic device first. Nyman's minimalist motto is "load only what is going to be used." This means that responsive sites shouldn't load all the available content and then hide some of it for smaller screens. Instead, sites should provide some content and then load more if media queries detect that the user's device has a higher screen resolution or a faster connection than what is required to run the site's most basic elements. On the practice side, Jake Strawn, developer of the responsive Omega Theme, explained his methods for implementing responsive, mobile-first themes in Drupal.

Installation Profiles and Features. Installation profiles (or distributions) bundle together modules that expand on the basic Drupal installation package, providing expanded functionality out of the box. They allow you to perform a fresh install of Drupal with many modules (and often themes) pre-loaded. This is especially helpful if your use-case for Drupal is more specific than just a vanilla, public-facing website. Project managers can install Open Atrium to set up a collaborative intranet, colleges and universities can install Open Scholar to build sites customized for academic departments and faculty pages, and journalists can install Open Publish to establish an online publishing platform.  

At the conference, I was introduced to Panopoly, an installation profile that I now use as my base installation whenever I'm setting up a non-specialized site. Panopoly provides a variety of responsive layouts to choose from, drag and drop customization of page layouts, a Wordpress-style WYSIWG (a big plus if you're working with clients who are intimidated by Drupal and already familiar with Wordpress), and a great administrative interface (a well-ordered and easily searchable modules administration page, for example).

Anyone who has worked with Drupal for very long has a set of favorite modules and configuration settings that they use nearly every time they deploy a new site. There are also combinations of modules, settings, views, webforms, and the like that might be useful to transfer from one existing Drupal site to another: a membership directory, for example, or a list of podcast episodes, or a submission webform. The Features module allows you to bundle up these settings, modules, and all their dependencies and export them as a new, stand-alone module. You can then upload and install that Features module on another site just like any other module. By creating Features modules, you can save yourself hours repeating work you've already done. You can also, of course, more easily share your work with others. In his presentation, "Rapid Drupal Devlopment with Drush and Drush Make," Matthew Connerton explains how to get the most out of Features. (Although the title of the session refers to Drush, the popular command-line shell for Drupal, you don't need Drush to take advantage of features. However, if you're running more than one Drupal site and aren't already using Drush, it's probably time to install it---it will save you hours performing routine updates.)

Managing Content with Workbench. Sites with multiple contributors, different sections, and levels of editorial approval can get hard to manage; just ask Dick Olsson, Lead Drupal Developer for Al Jazeera. In his talk, "How to Build a Scalable Platform for Today's Publishers," Olsson explains how to set up an editorial workflow that meets the requirements of today’s online publishers. One of the key tools for managing a complex workflow is the workbench module. Workbench provides simplified user interface for users who only have to work with content, the ability to control who has access to edit any content based on an organization's structure, and a customizable editorial workflow.

If you're new to Drupal and all this seems a little intimidating or you're inspired to learn more, I recommend getting started with one of the many Drupal trainings available on lynda.com.

Sassy CSS

Sass Logo

Earlier this week, I attended a presentation at Harvard about an extension of the CSS3 language called Sassy CSS (SPCSS), or just "Sass." Here's the run-down:

What Sass allows you to do with CSS: For starters, Sass allows you to create and use variables like a scripting language. That means, for example, that instead of remembering to type "#3bbfce" every time you need to use the color you've branded your site with, you can just declare a variable: "$blue: #3bbfce" and only have to remember that variable. Of course, this also means that if you decide to re-brand, you only need to change the color code in one place.

More involved features include the ability to make Sass execute some math for you (useful for calculated height, width, margins, and padding), adjust a base color (making it lighter or darker), nesting and selector inheritance so that you don't have to write long strings of CSS properties, and even the ability to write and re-use functions (termed "mixins" in SPCSS).

How you use it: You install Sass on the local machine where you are doing your coding and save the CSS file you're working on with the extension .spcss. You can now write SASS code along with your regular CSS code. When you're ready to deploy the code (or just test it), you run an execute command in the command line (using Terminal on the Mac, for example). The command tells Sass to compile the SPCSS document you've written, transforming the SPCSS file into a standard CSS file.

So, think of Sass not so much as a new language you have to learn, but as a kind of working short-hand that can help you code more efficiently, a shorthand that gets translated back into regular CSS before any browser actually tries to interpret it. For more about Sass and to give it a try yourself, just check out the Sassy CSS site. Slides from the presentation are available here.

Lorem ipsum duldroms

Anti Lorem Ipsum

If you've spent any time designing text for print or the web, you're probably familiar with "Lorem Ipsum." For the uninitiated, Lorem Ipsum refers to a passage of latin text from the Roman philosopher Cicero. For hundreds of years, type designers have used this passage as place-holder text in their designs.

Let's say you're working on the design for an anthology, but you don't yet know what texts are going to be included---you can use the text of Lorem Ipsum to get a visual sense of what a column of English-language text will look like on the page.

Lorem Ipsum is so ubiquitous, it's even included in Adobe InDesign; when you select "Fill with placeholder text" from the Type menu, what you get is an appropriate amount of Cicero's venerable essay on ethics.

A lot of designers have grown tired of Lorem Ipsum,  and others find the latin text distracting. This article, though, offers a roundup of online alternatives. I recently used one of these, Fillerati, for a literary project. Fillerati provides the designer with English text from literary works by writers such as Herman Melville and Jack London.

Other text generators are more whimsical. Samuel L. Ipsum, for example, uses quotes from movies featuring the actor Samuel L. Jackson (probaly not client-safe). And then there is one of my favorites, Hipster Ipsum, which will provide you with all the text you could ever want about PBR, fixies, and bands you've never heard of.

ColorSchemer Studio

Color Palette from Photo

There are plenty of utilities, sites, and applications that can help you pick a set of colors for your print or web project. But the one that's really knocked me out is ColorSchemer Studio for the Mac. It has the features you would expect: You can choose a starting color and let the application identify harmonious colors, browse variations of a single color, and create a library of your favorite palettes. You can even connect to an online database of user-created colors from within the application.

But what I found most impressive were the extra features. You can drop any image file into ColorSchemer and it will build a palette for you based on the colors in the image. It also features a layout previewer that allows you to drag and drop colors into a variety of templates for websites and print layout. There are also terrific accessibility features that allow you to check the readability of different text and color combination and even see what your color scheme would look like to people with different types of color blindness. By the way, although Colorschemer is usually priced at $50, for "a limited time," the Apple App Store is offering it for $20.

If you want to really dig in to working with color, you can also check out Nigel French's Photoshop for Designers: Color at lynda.com.

Learn Programming Concepts with Scratch

Subject: 

Writing code for the web involves making use of concepts like "if . . . then" statements, functions, Boolean logic, and loops. This is often in the context of user-initiated actions: If the user clicks here, do this, then do that. If you've never programmed before, diving into a language like PHP or JavaScript can be pretty intimidating.

If you're a complete beginner and interested in learning to program, you might try out Scratch, a programming language developed by the MIT Media Lab and designed to introduce young people to programming. Scratch makes it easy to create interactive stories, animations, games, music, and art that responds to user input.

The language is not just textual, but visual, too---you provide instructions to your program by fitting together Leggo-like graphical blocks. What you end up with is a kind of interactive cartoon. For example, connect the orange "when cat clicked" block to the purple "say 'hello, world!'" block, and then run your program. Now, whenever you click on the cartoon cat graphic, a speech bubble will appear and he'll say "hello, world!" Soon you'll be chaining statements together, adding conditions, and writing more complicated programs. If, after playing around with Scratch, you begin to experiment with web programming languages, you'll discover that you already have some of the key concepts well in hand.

Command Line

Subject: 

TerminalI used to think that command line was just for nerds---I mean, when you have a mouse, icons to click on, search boxes and scroll bars, why would you go back to the bad old days of hand-typing text commands to search for a file or launch an application?

Then I started developing websites and realized that the webservers I was renting space on to serve up my sites didn't have nice icons to click on. Like most webservers, they were bare bones and didn't have a graphic user interface. To configure my servers or tell them to do much of anything, I needed to learn a few textual commands.

The majority of servers that you'll encounter will respond to a set of commands used in the Linux operating system. In his article, "Introduction to Linux Commands," programmer and server guru Paul Tero explains why it's valuable to know some Linux commands and shows how to login to your web server, search for files, change permissions, backup your site, and more just by typing text commands.

 

What the font?

Fount LogoToday I'm sharing two great tools for identifying fonts in images or websites. The first is the What the Font? site. Just upload an image of some text written in the font you want to identify---from a scanned image, a snapshot, a screenshot, whatever---and WTF will try to find a match in its database of fonts. It's not always a perfect match, but if you're new to typography and can't tell an ascender from a terminal, this tool can get you in the ballpark.

Website logos are often embedded into the page as images--for obvious reasons; the designer can't be sure that you have the font she wants to use loaded onto to your machine and the logo might include graphics or unique letterforms. But for text on a website that is actual text (usually styled using CSS), there is a great new tool to figure out what font you're looking at. Fount is a bookmarklet that you can drop into the bookmarks bar of your favorite browser. Once it's installed, just click it and then click on any font you want to identify on a site.  Fount will show you what font you're actually seeing, its size, weight (e.g., bold), and style (e.g., italic).

The Desktop Wallpaper Project

Mark Weaver : This Means WarGraphic designer Bobby Solomon curates an amazing collection of desktop backgrounds on his site thefoxisblack.com (formerly Kitsune Noire). Solomon goes out looking for artists---illustrators, painters, photographers, album cover auteurs---and asks them to contribute wallpaper images for desktops and mobile devices.

He posts these in a variety of sizes for free download as The Desktop Wallpaper Project. I especially like this heat-packing mastodon man by Mark Weaver.

Subtle Patterns for Web Design

Random Grey VariationLooking for an alternative to a plain solid color or gradient background for your next project? Or maybe just a cool background for your iPhone or desktop? 

Check out subtlepatterns.com, a project by interaction designer Atle Mo. The site has all sorts of patterns available for free download: everything from fabric to wood, cardboard to brushed aluminum.

Pages