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…
We have been hard at work on a client project using React. We haven’t made our way to implementing CSS Modules yet, but we’ve established a set of rules to help us keep the CSS in order.
Read more on Practices for Harnessing SCSS with React…
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…
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…
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…
During a recent project I came upon an interesting CSS problem. I needed to create a square element that would maintain its square shape as it responsively resized to a changing window size.
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…
I’ve found that trying to write semantic markup has helped me write cleaner HTML. It’s been a useful guideline, but it hasn’t been perfect, and I’ve sometimes struggled with how to model things well. Recently at the March SoftwareGR event, I heard Jonathan Snook relay an example that I found very insightful. Read more on What “Semantic” Markup Really Means…
At the last SoftwareGR event, Jonathan Snook gave a great talk titled “CSS is a Mess.” I was particularly interested because, while I’ve always tried to organize my CSS thoughtfully, I’ve often found that the end result isn’t as clean as I’d hoped.
Read more on CSS is a Mess – Applying the SRP and the Law of Demeter…
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…