Friday Frontend: Coming from Barcelona Edition
Hope you had a great week! I’m traveling in Barcelona this week, and have been blown away by this amazing city. Definitely a great place to visit if you ever get the chance.
KBall from ZenDev
P.S. I’ll be traveling for 1 more week. The newsletter will go out as normal next week, but if you write me it may take a while for me to get back to you.
CSS & SCSS
Interesting question, relatively simple answer, with a bizarre little corner case in
@keyframes that appears to be buggy and should be avoided.
The multi-column layout property is not usually what you want, even for a multi-column design. However, sometimes it is exactly what you need. This is the deepest dive I’ve seen into how it works.
Another quick hit that highlights an easy gotcha using the new
:focus-within pseudo selector. This point actually applies to any sort of new selector as well.. If you combine selectors using commas, and one of them isn’t understood by a browser, all the rest will be ignored too!
Explanation of and workaround for an extremely common gotcha when working with Flexbox. Putting padding on a flex parent does not work quite like you’d expect it to if there is overflow! Read this to learn why and how to fix it.
Replacing HOCs is definitely one of the reasons I think React hooks are cool… at least in some cases, where we ended up with super deeply nested component trees layering in functionality. However, there may still be cases where HOCs are valuable, and this article digs into the pros and cons to help you decide when to use which.
A new UI framework specifically aimed at Vue.js. The touted aspects are the built-in treeshaking and build targets that include desktop and mobile, as well as a massive 123 built-in components and easy extensibility. The styling looks moderately controllable using stylus (ugh). Definitely looks more interesting to JS developers looking for easy UI kits than UI-focused developers looking for a toolkit to build on top of. Will be interesting to see how it pans out.
I like this article both because the anti-patterns identified are mistakes that are sooo easy to make (I think I made ⅔ of them when I was starting up, and have corrected all of them before in code reviews), and because it explains the reasons why the antipatterns will get you in trouble.
I’m fascinated by the trend towards pre-compilation and pre-computation that we’re seeing in the frontend world. One part of that is static site generators (SSGs) and the JAMstack, with things like Gatsby. But another huge part is frameworks like Svelte (and Stencil, which I recently learned about) that do as much as possible of their work at compile time, leaning on native browser APIs rather than shipping a large runtime like React, Angular, or Vue might. This article is a great introduction to Svelte to help you get started playing with it.
The original React course from TylerMcGinnis.com launched in 2016 and has since been taken by over 80K students with an avg rating of 4.8/5. Today, they’re excited to launch its successor. Built from the ground up, their new React and React Hooks courses will teach you everything you need to know about writing React in 2019. Learn React Hooks
While clearly incomplete since it lacks this newsletter 😜, this is a solid list if you’re looking for more newsletters to subscribe to. I actually subscribe to a good percentage of these.