Avoid Careless Production Mistakes with Custom Scripts

In the wise words of @stahnma,

“Everybody has a testing environment. Some people are lucky enough to have a totally separate environment to run production in.”

Thankfully, the project I’m working on has multiple environments: production (the most recently-released version), staging (for pre-release testing), dev (for dev team use and testing), and multiple review apps (for feature validation). Read more on Avoid Careless Production Mistakes with Custom Scripts…

How I Test CSS

At Atomic, we practice Test-Driven Development for all the code we can, from single functions to entire stacks. But there’s one kind of code we’ve long neglected testing: CSS. We rarely have coverage of it, and we often discover bugs and style regressions long after they were introduced. We’re not alone. Most software developers don’t do CSS testing. It’s tough to assert that a website looks the way you want.

I’ve wrestled with the problem of CSS testing for a long time, and I have two suggestions for catching style problems early. Read more on How I Test CSS…

Creating Vertical Alignment with Susy and CSS Flexbox

In the middle of a responsive page using Susy, I encountered a layout which required vertical alignment across different kinds of elements, ideally without hard-coding a dimension anywhere. I wondered, could Susy and Flexbox play nicely together to create this complex layout? Indeed, they could and they did! Read more on Creating Vertical Alignment with Susy and CSS Flexbox…

Implementing an Offscreen Menu in Ember.js

Offscreen menus have become a standard in mobile apps and web interfaces over the past several years. I was recently given the task of implementing an offscreen menu for the Ember.js app that I have been working on over the past several months, so I figured I would share my solution.
Read more on Implementing an Offscreen Menu in Ember.js…

Getting Around Internet Explorer’s 4,096 CSS Rule Limit… Again

In 2012, I wrote about handling IE8’s limit of 4096 selectors in any single CSS file. It’s been several years since then… and this is still a problem.

Using SCSS and frameworks makes it distressingly easy to hit these limits. In a perfect world, we’d be able to avoid them altogether, as the bloat is not really a positive thing. However, until I’m able to refactor things to fit under such limits (or until such limits are lifted and IE9 is firmly behind us), here’s another solution.

Read more on Getting Around Internet Explorer’s 4,096 CSS Rule Limit… Again…

Adventures with SASS Preprocessors

For design implementation, one critical power tool that I wouldn’t want to be left without is the CSS preprocessor SASS. Generally when I’m working on a project here at Atomic, I’m operating within the context of a larger application, maintained by the developers on my team, that runs Ruby on Rails or a similar tech stack. We install the SASS gem in the application, and we’re good to go.

In the case of our recent website redesign, I found myself in a very different type of application, writing templates for our new Craft CMS install. Read more on Adventures with SASS Preprocessors…