web development - Space Ninja

web development

A collection of 10 posts

React-ing to Change

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 [http://bigwnews.com/sport/sports-illustrateds-media-operations-pawne].” I was caught in the first round

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

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

Do Siegel’s Seven Deadly Sins Hold Up?

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

What’s the Mobile Use Case?

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

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

What IS Flexbox?

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

The Many Exciting CSS Limits of Internet Explorer

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 [http://codepen.io/spaceninja/full/gbyMLv/] * A document may load

Trust Your Designer, But Review Their Code

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

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

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

How to avoid paragraph gaps when using superscript and subscript

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