The Front Line

A list of resources for front end development

[frontlinedev-blog]

Icons for mobile apps. Created for iOS toolbars and tab bars, they're also perfect for Android, websites, t-shirts, tattoos, UI design and more.

[frontlinedev-blog]

DirtyMarkup combines the power of HTML Tidy, CSS Tidy, JS Beautify, and the Ace editor to effortlessly clean up your messy code. Just paste your code into the editor and press “clean”. Now supports HTML5!

[frontlinedev-blog]

Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

[frontlinedev-blog]

Beautify, unpack or deobfuscate JavaScript and HTML, make JSON/JSONP readable, etc.

[frontlinedev-blog]

automatically formats your style to be consistent and easy to read

Only one blank line between two rulesets

Closed curly brace is at its own line

There is no empty line between declarations inside a ruleset

No space between the property name and colon

One space between colon and the property value

Comments are preserved

[frontlinedev-blog]

An example of scroll context sticky nav and back to top links using Waypoints

[frontlinedev-blog]

Few people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 20px. To demonstrate here is a div with all sides colored...

[frontlinedev-blog]

Those familiar with similar apps will find Spectacle to be a simple and unobtrusive way to become more productive while using your Mac. Using Spectacle you can view multiple documents side-by-side, move windows to other displays, or even focus your full attention to a single task.

Spectacle has been, and will continue to be, an open source project. The source code can be found on GitHub.

Those who enjoyed interacting with Spectacle as a preference pane can still download version 0.6.1 directly. Or, if you are comfortable with building your own version of Spectacle in Xcode, feel free to clone the source and build the preference pane target.

[frontlinedev-blog]

A full-featured package manager that helps discovering, installing, updating and removing packages for Sublime Text 2. It features an automatic upgrader and supports GitHub, BitBucket and a full channel/repository system.

[frontlinedev-blog]

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.

THIS IS A GAME CHANGER

[frontlinedev-blog]

[frontlinedev-blog]

Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There's a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.

[frontlinedev-blog]

Interview Remorse

Went in for a client interview for this upcoming project and was pleasantly surprised at the tail end by an impromptu 20-question quiz about basic front line dev questions by their lead developer. For the most part the quiz was relatively easy, but there were some questions that instinctually garnered the JFGI (if you aren't familiar with the acronym, JFGI) response. Either that, or I couldn't eloquently explain them in lament's terms without losing someone not in the field. 

For your enjoyment and my embarrassment, here are a few selections that I could have done better on.

2 ways to clear a float:

Quirksmode tip to clearing floats

CSS Tricks guide to clearing floats

What is the difference between Quirks Mode vs. Strict/Standards Mode:

Quirks mode vs. Standards mode

How many doctypes can you name:

List of Doctypes by W3C

Style the last element of a list:

CSS3 last child

Event Bubbling vs. Event Capture:

Event order by QuirksMode

[frontlinedev-blog]

Here you’ll find a list of tools I’ve developed over the years, to make working with various CSS3 features a bit easier. Since they’re for developers, most of them only work in recent browsers. Also, obviously if you use a tool to help you with a CSS3 feature, it probably won’t work in browsers that don’t support that feature.

- Lea Verou

[frontlinedev-blog]

iPad simulator to test how your website will look in portrait and landscape views

[frontlinedev-blog]

Create cross browser css in seconds!

[frontlinedev-blog]

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.