This is the first in, what will hopefully be, a weekly update on news, trends, tools, frameworks and.. well everything related to front-end development. This is a first test-structure and my idea is simple:
No more than five articles
I want this to be a quick read, not a chore. It also requires me to cherry-pick articles. From time to time i might focus on a specific topic like web performance, design-to-code, accessibility… you get my point.
Content:
- Microsoft Edge Beta
- Useful Pens for Everyday Front End Development
- CSS-in-JS
- The Best VS Code Extension List for Full Stack Developers
- Sketch2React
1. Microsoft Edge Beta
The browser feels fast and welcoming. Look-and-feel reminds me a lot of Chrome (at least when I’m running it in dark mode on MacOS), but at the same time it still keeps some “air” of Microsoft.
When Edge switches to Blink (the Google-driven fork of Webkit) it will make many developers sleep a bit better at night. I’m exited about this and at the same time a bit scared. As of now, we have Firefox (running Geko engine) and more or less the rest is running on Blink. iOS users have the possibility to use Safari, but guess what? It’s based on Webkit. Nicolas Stouff has written more about this topic here.
2. Useful Pens for Everyday Front End Development
Even though I haven’t gone through all pens (I stopped after 240), many of the pens I found in this collection addresses commonly used development components and solutions I’ve faced in the past (and most likely will create/reuse in the future).
3. CSS-in-JS
In general I’m pro css-in-js. I used css-in-js for the first time in React (inlineStyle) in the very first version of Sketch2Reacts’ React export (I’ll cover more Sketch2React history in future, separate, articles :)). Here I ran into the limitation of not being able to use pseudo-classes (e.g. :hover for buttons). Luckily there are libraries which extended inlineStyle to also include pseudo-classes, like Radium.
I used Material UI Theme:ing in Patientresan.se (alongside Styled Components) I found theme:ing to be a bit annoying and struggled to make sense of it.
I’d recommend trying out the “all-inclusive” Styled Components if you’re using React (or similar for other frameworks); it has served me very well. Otherwise I’d go with CSS modules + Sass, the “light-weight” css-in-js option.
There are many more ways to use css-in-js (like Emotion, styled-jsx) than I’ve covered here.
4. The Best VS Code Extension List for Full Stack Developers
I’ve tried many IDE’s spanning from IntelliJ IDEA and Eclipse to Atom and Sublime Text. They were all good (each with their own pros and cons). But one that instantly became my all-time-favorite is Visual Studio Code. Here’s a list of the “the best” extensions.
5. Sketch2React
Of course I wanted to add this to my first edition 🙂 Juan Maguid and I started this project 1,5 years ago and we’re soon to release version 1.6 pre-release. Version 1.6 contains features such as support for Sketch Shared libraries and Sketch Cloud. You can read more on version 1.6 here. In parallell we’re building Sketch2React version 2.0 with a brand new render-engine, new UI and a lot of new features and improvements such as Styled Components and possibility to export your design assets to npm.
Thanks for reading and happy coding! ❤️
/Fredrik, Senior Front-end developer @ Bouvet and co-creator of Sketch2React
Psst, I also highly recommend Juan’s Design Digest (He’s the other 50% of Sketch2React)