Friday Frontend: Thanksgiving edition
This weekend in the U.S. is Thanksgiving, which means we’re spending lots of time overeating and spending time with family, and also reflecting on a few things that we’re grateful for.
I’m grateful that I get along well with both my family and my wife’s family, so that this holiday isn’t a horrible ordeal. I’m grateful to work in an industry where things are moving and changing, with the opportunity to learn every day. And I’m grateful for my health, and my family’s health, brought into sharp, painful clarity by contrast on Thursday as a friend lost his battle with cancer, far too young.
Whether you celebrate Thanksgiving or not, take a few moments this weekend to reflect on what you are grateful for. It’s easy to get caught up in the grind and running to keep up, and it’s important to reflect now and again on what we have. If you’re willing, open your email client and send me back a note to let me know what you’re feeling thankful for. I’d love to hear from you.
Happy Friday!
KBall from ZenDev
CSS & SCSS
A useful list of must-watch talks about CSS
A curated list of recordings of excellent talks about CSS, going back to 2010. Lots of great stuff in here, and I’ve just gotten started digging into them. I’m looking forward to going through in more detail.
Using CSS Grid: Supporting Browsers Without Grid
“Can I use CSS Grid yet?” The answer is starting to be “yes” for more and more of us, but if you need to support browsers that don’t yet support Grid, so long as you don’t have to have them look identical there are fallbacks available. In this article on (newly redesigned and beautiful) Smashing Magazine, Rachel Andrew walks us through the thinking and leaves us with a ton of resources for building layouts with CSS Grid that smoothly fall back for unsupported browsers.
Getting Started With CSS Math Functions Level 4
Calc has completely revolutionized the way we can handle layout and the distribution of space among components using CSS. If you’re not already using it and comfortable using it, read through this, it will blow your mind.
CSS tricks to revolutionise your web layouts
As you might expect from CreativeBloq, this article explores some edgy and non-traditional effects that you can implement using lesser known CSS properties. Definitely cool.
CSS Environment variables; how to deal with the software bezel of iPhone X
If my twitter feed is any indication, the uptake of the iPhone X is happening at an incredibly rapid pace, which means that we as developers need to understand the tools available to us for dealing with its’… unique (I mean obnoxious, but it is Apple so you know 😉)... design features.
JavaScript
Types in JavaScript: Why You Should Care
My friend Steve recently tweeted at me about how moving to TypeScript has completely revolutionized his experience with the front-end. I’m not quite as strongly opinionated about typing in JavaScript, but have enjoyed learning and using Flow. If you’re new to the concept of types in JavaScript, this is a good introduction to the options available for you.
JavaScript. The Core: 2nd Edition
As someone who has thought a bit about what a good fundamentals curriculum would look like for JavaScript, I was thrilled to encounter this article. Written with the assistance of some of the ECMAScript spec community, it is a walkthrough of most of the core concepts in JavaScript. Definitely read it!
A useful list of must-watch talks about JavaScript
From the same curator as the list above of CSS talks, here’s a curated list of recordings of excellent talks about JavaScript. If you’ve got some time this holiday weekend, definitely take a look through.
An Introduction to Regular Expressions (Regex) In JavaScript
Regular expressions are their own learning curve, separate from just about any other part of programming, but if you’re doing text validation or manipulation, there is really no substitute. This article gives you a great walkthrough of the core concepts and the power available to you with regexes in JavaScript.
Bankai, the friendly web compiler
Front-end tooling is both one of the areas that we have had the biggest advances in the last few years, and one of the biggest areas we still have to improve. Webpack is super powerful, but still complex and challenging to use, so the scene is ripe for competitors. Bankai looks like an interesting option, coming out of the Choo.js community but intending to open up to broader use.
Other Awesomeness
WebAssembly support now shipping in all major browsers
This is huge! After recent releases of Safari and Edge that add WebAssembly support, we’ve now reached a point where WebAssembly is available in all of our major modern evergreen browsers. I’ll be including more WASM resources in the coming weeks, as this is poised to truly revolutionize what we can do on the web.
How JavaScript works: A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript
On that note, here’s a walkthrough of what WebAssembly does, how it works, and when you might want to use it instead of JavaScript
How to use SVG as a Placeholder, and Other Image Loading Techniques
Fascinating article on how to automatically generate lightweight SVG placeholder images that can hold a spot in the layout and give a hint of what is to come while your heavier high resolution images load.
Monitoring unused CSS by unleashing the raw power of the DevTools Protocol
Understanding which parts of your CSS are “legacy” and no longer used is a common and challenging problem as your application evolves. The more dynamic your application, the less easy it is to do static analysis to find unused classes, and that is where active monitoring and testing techniques like this are key.
A super-stable WebVR user experience thanks to Firefox Quantum
The new release of Firefox is not only massively faster for standard webpages, but has a dramatically improved experience for WebVR. This article takes a look at the improvement and digs into how it happened, even though WebVR was not a primary target of the release.