Friday Frontend: WebAssembly is the Future Edition
The thing that I got super excited and inspired by this week is WebAssembly. Yes, we’re still in early days, but this is going to do so many amazing things for the web!
KBall from ZenDev
CSS & SCSS
How and Why We Unit Test Our Sass
One of the biggest steps forward into making CSS a joy to work with is beginning to decompose into mixins and functions, letting you think of it in terms of reusable chunks of functionality rather than a flat mess. However, once you start reusing code, you always have to be careful that changes in one area don’t accidentally break another. Hence, unit tests!
BEM For Beginners: Why You Need BEM
It took me a long time to come around to BEM originally - being an old-school developer, and having come from a backend background way back in the day, it seemed overly verbose and complicated. Once I bridged over that initial impression, I’ve been very happy with using BEM for a wide variety of projects. What I appreciate about this article is it not only explains what BEM is, but the reasoning behind many of the choices. If I’d had those back when I was first learning about BEM, it might not have taken me so long to decide to use it.
Hot tips CSS
A bunch of super quick snippets to achieve different outcomes. You can use this both as a reference and as a starting point to go explore some new properties. I went on a long detour investigating the
image-rendering css property.
Harry Roberts: FaCSSt—CSS and Performance
This is a fascinating talk about CSS performance. Did you know it can take a mobile phone 200ms just to PARSE a 1M stylesheet? And during that time the browser can’t render a thing? And that’s not even counting download time in critical path. Maybe inlining images into CSS isn’t such a good idea... Lots of other really interesting and sometimes unintuitive performance wins in here.
Drawing Images with CSS Gradients
First off, I gotta say I love the trend towards treating CSS as a medium for artistic expression, and not just a tool to get the job done. Doing things creatively with code (of all sorts) is what gets me excited about software; sure, building tools pays the bills, but this is where the fun is! With that out of the way, this article is phenomenal - it’s not only an expression of what you can do with CSS, but a super-detailed step by step tutorial that will have you drawing fancy umbrellas, an iPhone, and even an animated radar all with CSS.
Introducing the Single Element Pattern
A design pattern for simple, composable React components. I’m not sure I agree 100% with all the choices here, but generally I think these are good guidelines. There’s a lot of overlap with an article I wrote about transparent wrapper components in Vue, but in this case React focused and arguing that this pattern should be applied to all components.
Vue.js: the good, the meh, and the ugly
I think this is a good and well-balanced assessment of what is good and not good in Vue. The complexity of all the edgecases in reactivity definitely stands out to me as a challenge I’ve had, and he’s spot on about the challenges in where questions get answered and needing a well-documented set of architectural patterns.
some natively on arrays, rather than needing a library like lodash. If you’re using lodash or some other set of array utilities, or you’re not already super familiar with array transformations, take a read through. You won’t regret it.
A minimal guide to ECMAScript Decorators
How WebAssembly is Accelerating the Future of Web Development
React Native at Airbnb
Animate Calligraphy with SVG
Another example of both how some amazing artwork using web tools as a medium, and also how freaking AMAZING SVG is. (For those who don’t know yet, I’m kind of in love with SVG - I even recorded a short course on it) Animating in calligraphy as if someone was literally drawing it with a pen on your screen. Sweet!
This seems mostly incremental, so I wouldn’t normally include it, but there’s something really interesting in here that caught my eye. Edge 17 improved the speed of array