Friday Frontend: The Case for Types Edition
Happy Friday the 13th! Hope you have only good luck and no bad, and your weekend plans are entirely excellent. :P
Have a great weekend! Enjoy!
KBall from ZenDev
CSS & SCSS
Logical Operations with CSS Variables
This completely blew my mind. Boolean logic entirely within CSS variables using calc, letting you build up some very very cool structures to generate images & do other neat things all with CSS.
CSS Security Vulnerabilities
A look at some common concerns related to CSS vulnerabilities… mostly showing how they’re not really issues at all, because browsers have already thought about them. Interesting read.
“My favorite CSS hack”
Nice quick-hitting snippet that will let you see at a glance how all of your different elements are arranged in the DOM.
Various Methods for Expanding a Box While Preserving the Border Radius
Very cool exploration of different ways of expanding a box, and their implications for what properties of that box and the things inside that box do during the expansion. Will text move? Will border radiuses change? It turns out, it depends how you do it...
The 5 Big Features of TypeScript 3.7 and How to Use Them
You Already Use Types
Why is React doing this?
This is a brain-twister, but I learned some things from it. One of the core developers of React does a brain dump on some of the design choices React is making, particularly in contrast to Vue.js and Svelte.
How to build an Unsplash Search App with Svelte 3
I’m currently playing with Svelte and loving it, and this tutorial is in-depth enough to get you a solid taste of Svelte while not being too overwhelming. Plus, Unsplash is such a cool resource - free, available photos with an incredibly permissive license. I’m going to be trying it first the next time I need stock photography.
How to learn D3.js
Machine Learning For Front-End Developers With Tensorflow.js
Super cool look at how to get tensorflow running in a web browser, and hints a little bit at some of the possibilities. Also talks a bit about the limitations of doing this in the browser instead of on a server.
Atomic Design and UI Components: Theory to Practice
Great soup-to-nuts explanation of Atomic Design and how it works. I think having a definable approach & language to talk about your design & design systems is super valuable, and while I’m not a huge fan of the particular language choices used for Atomic Design, the approach is top notch.
Ooohhhh long overdue, this site is an equivalent to ‘caniuse’ specifically for HTML emails. OMG I wish I’d had this a couple years back when I was working on stuff for Foundation for Emails.
Why I'm preloading a font even when I shouldn't have to
I love that in the modern web we can use a wide variety of fonts; back when we had to stick to ‘web safe’ our design choices felt so stale. And yet. Fonts are a huge bugaboo for first-page-load performance, and if you’re not careful they can really slow you down. This article does a fascinating walk through of one person’s quest to get a truly fast experience for a custom font.