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!
Enjoy!
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.
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.
JavaScript
Using JavaScript modules on the web
For those who bemoan the growth of build tools and long for the simple days of including JavaScript files via script tags, but also want to take advantage of modularity in your JavaScript, you’re in luck! Native JavaScript modules are now supported across all major browsers! They aren’t as performant as bundled code, so if you’re using a bundler already stick to it, but if you really want to go back to flat files you might check this out. :)
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.
10 JavaScript array methods you should know
Even having been keeping on top of JavaScript, I’d completely missed that we could now use things like reduce and 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
Decorators are an interesting language feature that I’ve mostly used in python, though I know there’s TypeScript support for them as well and they are heavily used in Angular. They haven’t historically been a part of JavaScript, but they’re advancing through the specification process, and through the magic of babel you can use them in JS today if you want to! This is a great introduction to what they are and how they work.
Other Awesomeness
How WebAssembly is Accelerating the Future of Web Development
(Disclaimer — I wrote this). I’ve been getting more and more excited about WebAssembly as I’ve been thinking about it more and more. Not even necessarily because I want to use languages that compile to WASM — I’m pretty happy with JavaScript — but because I think we’re going to be able to use it within frameworks and libraries to get some dramatic performance improvements, both in terms of parallelism and time to first interactive.
This is pretty big news — a big company that bet hard on React Native deciding to move away from it. It sounds like maturity of the platform and ecosystem were the biggest deciding factors, with some additional notes including inconsistency in JavaScript environments across different mobile platforms. They still have a lot of good things to say — my sense is if you’re a web developer moving to native, React Native is still a good bet. But if you can afford to staff up a team specifically for native, going full native is probably worth it.
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!
Improved JavaScript and WebAssembly performance in EdgeHTML 17
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 for...of iteration by 2.5X by get this - rewriting it from C++ to JavaScript! JavaScript compilers are getting that good. Some other interesting notes include optimizations that improved some AngularJS workloads by 25%! That’s huge! It seems despite all the forward progress there are still massive gains to be made in JS performance.
GraphQL, understanding when to use JavaScript, and JavaScript robotics
(Disclaimer — I was involved in this too) 2 weeks ago at Fluent Conf, Tim Smith and I interviewed on the order of a dozen different speakers, talking with them about their talks and areas of this expertise. This is a recording (and transcript for those who prefer reading) of 3 of those conversations, covering topics such as GraphQL, CSS and when to use it vs JavaScript, Typescript, robotics in JavaScript, and more. Lots of good stuff!
Happy Friday!
Enjoy this newsletter? Get it straight to your inbox! Every Friday I send out 15 links to the best articles, tutorials, and announcements in CSS/SCSS, JavaScript, and assorted other awesome Front-end News — sign up here: https://zendev.com/friday-frontend.html
Originally published at zendev.com on June 29, 2018.
