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
How much specificity do @rules have, like @keyframes and @media?
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.
Don’t comma-separate :focus-within if you need deep browser support
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!
Flexbox and padding
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.
Do React Hooks Replace Higher Order Components (HOCs)?
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.
Why every Vue developer should be excited by Quasar 1.0
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.
3 Anti-Patterns to avoid in Vue.js
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.
Introduction to Svelte
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.
Announcing two new courses from TylerMcGinnis.com - React and React Hooks
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
Datalist is for suggesting values without enforcing values
‘No way to prevent this’, Says Only Development Community Where This Regularly Happens
I Used The Web For A Day On A 50 MB Budget
The Best Newsletters to Subscribe to for a Frontend Developer
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.