Let's Talk About Tech #2

VSCode + Prettier

When you are working in multiple client projects and do not want to auto format every code with prettier, you should set the configuration in your VS-Code plugin like this:

• Twitter

React SEO

One of the most questions we have been asked? Can I use React for SEO? And the answer is: Yes - when you think about some facts. Google introduced in their last Google I/O 2019 that the Google Bot crawls websites with executing JavaScript. But in our latest test this was not always the case.

For pages, which are relevant for SEO, we modified our build process and created for each of our routes in the React application a static html file with react-snap. To test how your page will be seen from Google you can enter it in the Google mobile friendly test.

• react-snap
• Google mobile friendly test

Perils of functional CSS

Interesting read about the pros and cons of functional/atomic CSS approaches. I have to admit that I’m not really a big fan of the concept, preferring a more semantics- and components-based approach. And at the end I’m happy to see the author seems to agree.

One interesting observation in the conclusion is that most (or all?) functional CSS libraries are built by backend developers, who seem to struggle with some fundamental concepts of CSS, like its cascading nature and specificity of selectors.

I agree that a functional approach might be helpful, if you or your team of backend and/or full-stack developers lack the knowledge or expertise using CSS. Since I am now a full-stack myself, but come from the frontend, I would strongly recommend against those hardcore functional CSS libraries. Instead try to develop the necessary CSS skills in your team, but not necessarily everyone, though.

The other interesting thing is the mention of the utilities-first approach, trying to combine the best of both seemingly contradictory approaches. I will definitely do some research on that one.

• Perils of functional CSS

Lobotomized Owl Selector and CSS variables

While reading the article about the perils of functional css – see above – I stumbled over a reference to an old article (2014) on A List Apart about the odd Lobotomized Owl Selector.

I really liked the basic concept and idea and came up with a small experiment showcasing it with the usage of context specific css variables:

• CodePen

Styled components

Styled-components is the most widely known CSS-in-JS library. And it is pretty handsome to use.

• styled-components
• State of CSS

If you’re having any thoughts on our blog post, feel free to comment, vote, discuss with us or just share it.