Welcome to the Lab
In over ten years of blogging, I still find myself more interested in the technologies of blogging and web design as much, if not more so than, the actual writing itself. How very meta. Here is where I screw around with those things.
Projects
- New Site Design
I suck at Photoshop, hence I design in the browser. It's all the rage the now, what with responsive design and all, but my lack of skill makes me look like a trendsetter. These are some work-in-progress mockups of a new design for the site. Responsive and chock full of Susy grid goodness, with a nice coat of Solarized.
Eventually this whole Octopress site will look like this. Eventually.
- Type Specimens
Multiple font specimans, both titles and body text. Webfonts courtesy of Typekit.
- Typography Test Page
Old page investigating different typefaces and setting type: size, leading, and maintaining a vertical rhythm. This was before the magic of Sass. Check out the gnarly css with handcranked math.
- Layout Page
Grids are the new rounded corners. My first hack at a responsive layout. Again, prior to Sass and Susy.
- Compass Vertical Rythym
TODO: explore built-in typographic functions of Compass.
- Color Palettes
I suck at this.
Tools
Useful tools and software used on these projects and my site overall. I’m always on the lookout for new widgets. I haven’t used a Windows machine at home in over eight years, so these are all Mac programs.
- Sublime Text 2
My current favorite text editor. Just get it.
- BBEdit
The grand-daddy of text editors. One of the first pieces of software I purchased when I got interested in web design. I still use it for its excellent multi-file search and replace. I also use it to have two totally separate projects open at one time. A tad easier to keep track of if they are in different editors as opposed to just different windows.
- Other Text Editors I Own, But Don't Use
- CodeKit
Absolute Must Have. You should use Sass just to use this app.
- Snippets
Great little program to store snippets of code, markup, what-have-you.
- xScope
Invaluable group of tools for measuring elements on screen.
- Little Snapper
When I find inspiration or examples of great design on the web, I file them away with this.
- Color Snapper
Tiny menubar utility for detecting and storing any colors on the screen.
- WhatFont
Javascript bookmarklet for identifying fonts on web pages.
- Syncotype
Another Javascript bookmarklet, this one for displaying a horizontal grid for maintaining a consistent vertical rhythm (see the Typography page.) I used the original by Rob Goodlatte forever, but in the course of writing this page, I found Samuel Bowles improved version.