Thank Me Later: Use Styled Components's css helper everywhere

Sai Chimata — Sat, 27 Jun 2020 21:59:53 +0000

Intro

Anyone who has used Styled Components, that popular, powerful CSS-in-JS library, for any length of time has come across odd bugs that involve the renderer completely ignoring a style or several, sometimes for an entire component, initiating a frantic search for the root of the problem. I'll spare you the trouble: the culprit is often nested interpolation.

const nestedInterp = `
   color: ${props => (props.black ? 'black' : 'white')};
   ${/*
      Without the `css` helper, the above function is cast as a string. 
     */''}
`;

const Div = styled.div`
   ${props => (props.active ? 'color: red;' : nestedInterp)};
`;

This is a caveat that beginners often stumble upon instead of read about, as syntactic sugar is meant to be inconspicuous. Template literals cast all interpolated values to strings, thus interpolated functions normally yield empty strings. Interpolated functions work as they do with Styled Components because the styled object's members are tagged templates that provide that functionality. However, as with template literals, the returned values of interpolated functions are cast as strings. This means that nested interpolated functions are cast as well. For more information, read about how string interpolation and tagged templates work "under-the-hood."

The Solution

To solve this, Styled Components added a helper function named simply css that also accepts a tagged template as its parameter. It forwards props to any interpolations and handles any interpolated functions, just like styled. In addition, many devs working with Styled Components will configure their linters to detect and resolve neglected nested interpolations. Unfortunately, linters are not fool-proof and edge cases often pop up in complex, destructured, deeply-nested UI component libraries.

Thus, the developer community has recommended using the css helper function for every nested template literal, whether or not the literal includes an interpolated function. In addition to the issues of unhandled nested interpolations and difficult-to-lint edge cases, this best practice resolves a number of other concerns:

Memory leaks in server-side rendered apps.
Providing a target to syntax highlighters and linters.
Minification and transpilation.
Future-proofing for interoperability and precompilation.

Quit looking down on non-STEM fields

Sai Chimata — Fri, 22 Nov 2019 19:11:58 +0000

Those who are actually dedicated to the sciences often have a lot of respect for the arts and humanities, in my experience.

– @ConnorSouthard

Here's something most people don't know: "liberal arts" actually encompasses non-applied sciences like math and physics. Even computer science is at its core a liberal arts field which is why the Department of Computer Science at my alma mater, Pitt, had been administered under the same school as the departments of linguistics and history.

The term "liberal arts" comes from the Middle Ages when serfdom and slavery still existed, and the Latin-derived word "arts" was roughly equivalent to the Germanic "skill." These "arts" – originally arithmetic, geometry, astronomy, music theory, grammar, logic, and rhetoric – were seen in the Roman era as essential to participating in civic life as a free (i.e. liberated) person. In the Medieval era, they were understood as "liberating" man from peasantry. That connotation of "socioeconomic uplift" has of course continued into the present-day.

The funny thing is that there are parallels between the anti-intellectualism of today and the beginnings of the "Dark Ages." Something that a lot of people misunderstand is that the Dark Ages weren't really imposed by barbarian invasions. In fact, these trends had started within the Roman, and later Western Roman and Byzantine, Empire as a result of the Church denouncing liberal education (in the classical sense) as heresy. The Dark Ages were a choice, not an imposition.

The point of my history lesson is that liberal arts and non-STEM work and education form the foundation of all we do in the modern world. These disciplines underpin STEM fields and guide them. They aren't somehow discrete and separate. If we reject and devalue them, we risk falling into the same spiral of ignorance; this time an ignorance of democracy, liberty, justice, our history, things we take for granted.

One of the mainstays of the modern tech industry is open source software. Open source has its philosophical underpinnings in the free software movement which applied enlightenment political philosophies and futures studies to the world of computers. Early proponents of open-source (including Tim O'Reilly, the author of the article I linked to on anti-intellectualism) saw its power in enabling innovation and applied it to software outside of the realm of GNU and similar projects.

Proprietary software has its place to be sure, but some use-cases just don't make practical sense. Take electronic medical records, for example. One of the worst aspects of modern EMR systems is the lack of interoperability which causes untold amounts of headache for doctors and hospitals and can result in serious physician errors. It also results in software lock-in which removes competition, the main pricing mechanism of a market system, and drives up the costs of the healthcare.

Another use case where proprietary software doesn't make sense is, of course, the Internet. Without open source software, none of this would be possible! Imagine if the current TCP/IP ecosystem had developed around Gopher, instead of HTTP. Imagine every protocol, programming language, framework, browser, etc, being proprietary. Development would happen at a snail's pace. Zero-day hacks would be rampant. Operating costs would increase. This very site is written in Ruby, JavaScript, CSS, and HTML, run on Rails, Preact, and Node, and in all likelihood using Linux-based servers. It's distributed on a network defined by open standards like TCP/IP, DNS, HTTP(S), etc. If open source had never caught on, the Internet as we know it would've been a completely different place with nowhere near the current level of sophistication.

All of this came about because an applied science was examined through a lens of sociology, economics, and political science. Not to mention, linguistics and logic underpin computer science and led to the development of the programming languages we know and love today.

The arts and humanities are valuable tools to direct the implementation of technology. Even if you eschew and ridicule them, they still underpin your worldview and your craft.

DEV Community: Sai Chimata

Thank Me Later: Use Styled Components's css helper everywhere

Intro

The Solution

Quit looking down on non-STEM fields

Those who are actually dedicated to the sciences often have a lot of respect for the arts and humanities, in my experience.