web development - Space Ninja

React-ing to Change

Exactly one year ago today, I was laid off. At the time I was working for Say Media, a small media company that was acquired by Maven, “a relatively unknown start-up run by two notorious media fuck boys.” I was caught in the first round of layoffs related to the

npm

How to Distribute a Pattern Library as an npm Package from a Private Git Repo

So you’ve got a pattern library: Congratulations! The next step is making it possible for other people to use those patterns. You could simply provide download links for the CSS and other assets, but then your users can’t easily get any updates to the pattern library. Instead, you

design

Do Siegel’s Seven Deadly Sins Hold Up?

In 1996, David Siegel’s book Creating Killer Web Sites was at the top of the charts on Amazon, and it quickly became the gold standard of web design books. Siegel may not have been the first to write about spacer gifs, slicing images, and table-based layouts, but he certainly

mobile

What’s the Mobile Use Case?

I recently worked on a project to dramatically improve mobile access for an app. At least twice during the proposal process, I was asked “What’s the mobile use case?” I was caught a bit flat-footed by this question, because the answer has been clear in our analytics for some

css

Code Verbosity

Recently I was refactoring some CSS, and I found something like this code snippet: body { font-family: sans-serif; font-size: 14px; line-height: 1.4; } h1 { font-family: serif; font-size: 36px; font-weight: bold; } Ugh, I thought, why so many lines? Let's use the shorthand syntax! So I refactored many instances of this code through

css

What IS Flexbox?

An elegant layout method for a more civilized age. Flexbox is a new layout mode in CSS3. The previous version of CSS defined four layout modes: block layout for laying out documents inline layout for laying out text table layout for laying 2D tabular data positioned layout for explicit positioning

css

The Many Exciting CSS Limits of Internet Explorer

Internet Explorer has a number of limits in the way it loads CSS, which can cause some of your styles not to be applied if you unknowingly exceed them. IE9 and lower: A stylesheet may contain up to 4095 selectors A document may load up to 31 stylesheets A stylesheet

design

Trust Your Designer, But Review Their Code

It can be awkward when your designer says they want to work directly in code. You want to protect the high quality of your front-end layer, but you don’t want to seem territorial or untrusting. You fear saying yes, at the risk of watching your carefully organized files fill

css

How to use @font-face to avoid faux-italic and bold browser styles

Did you know that if you declare a custom font using @font-face, the browser will try to fake the bold and italic styles if it can't find them? This is a clever little feature that avoids a scenario where a designer specifies a font and is then confused that bold

css

How to avoid paragraph gaps when using superscript and subscript

Frequently, when I see a webpage with superscript or subscript text, I see associated gaps in the paragraph. This is caused because the default way browsers render super and subscript text is to add enough vertical space in the paragraph to show them. The result is ugly, but as you