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.

This week’s newsletter has a lot of great educational stuff, but what struck me this week was the snarky posts. First an entertaining (and educational) JavaScript meme, and later a humorous take on JavaScript’s dependency problems. Enjoy!

Best,
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.


Multi-column manipulation

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.


JavaScript

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.


What’s new in JavaScript: Google I/O 2019 Summary

Nice rundown of a bunch of new JavaScript features. Has both text and at the end a video of a talk explaining the same set. I greatly appreciate that the author not only includes what the features do but where they are in the standardization process & what the browser + node support graph looks like.


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.


The Best JavaScript Meme I've Ever Seen, Explained in Detail

A delightful diversion into type coersion and how you can get yourself in trouble with JavaScript if you don’t use ‘===’.

Promoted Link

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


Other Awesomeness

Datalist is for suggesting values without enforcing values

The datalist element is something I’ve never actually used, but it has come across my radar a couple of times in the last month and looks incredibly useful, especially when trying to put your site on a low-JavaScript diet.


‘No way to prevent this’, Says Only Development Community Where This Regularly Happens

Snarky, but this discussion is an important one to have - why is there such prevalence of package management problems in the JavaScript ecosystem? And what can we do about it? I don’t think the “serious” bullet points offered after the snark get quite to the root of the problem.


I Used The Web For A Day On A 50 MB Budget

This is a fascinating look at how “size negligence”, AKA not paying close attention to the size of your images, javascript, etc impacts people in parts of the world where data is slow and expensive. Contains a ton of great performance tips, but also just a fascinating look at data inequity around the world.


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.