Exposing CSS Hidden Complexities with React

When we create web applications we use style sheets to describe presentation, and we use JavaScript to manage all the bits of state and logic. Unfortunately, we often end up with style sheets full of complexity, such as stateful pseudo-classes, style rule overrides through media queries, and deceivingly complicated animations. But what if we could leverage the expressiveness of React to take control of all of this?

Complexity is a concern better handled with JavaScript, not style sheets. If we push complexity from style sheets into JavaScript, then it becomes more obvious and predictable, thus easier to deal with.

This post is an exploration of this hypothesis applied to 3 common CSS features:

  1. Pseudo-classes
  2. Media queries
  3. Animations

I’ve also created an accompanying Github repo with full, working examples of all the snippets shown in this post.

The State of CSS

It’s no secret that we are currently experiencing a Cambrian explosion of innovation by the JavaScript community. But what you may not be aware of are the equally evolutionary innovations under development by the CSS community.

CSS has quietly been improving by leaps and bounds lately. So much so, that you may not even recognize it much anymore. While you weren’t looking, the CSS community has developed real solutions to many of the oddities, hacks, and deficiencies that made CSS the black sheep of the front end family in the past.

In this post I’ll reveal 5 old-fashioned CSS things that you don’t need to do anymore, and what you should do instead.

  1. You don’t need a naming convention.
  2. You don’t need float.
  3. You don’t need a grid framework.
  4. You don’t need a preprocessor.
  5. You don’t need CSS.

Conceptualizing How a Modern Single Page App is Served

I’ve noticed some confusion in how Single Page Applications are served among developers who are new to these apps. This post is a short explanation of how a Single Page Application gets from the web server to a user’s web browser.

An Exploration of JavaScript Builders

Builders seems to be a popular topic for me, as I’ve blogged about the builder pattern before. This time, however, I look at builders through a JavaScript lens. In this post I’ll explore three techniques for modeling builders in JavaScript, specifically ES6, utilizing some of the interesting features of the modern language.

All the examples I show in this post show builders that are only for testing purposes. While the builder pattern can be used in production code, the builders shown below are not appropriate for production code because they contain pre-canned default values. Leave these in your test suite.