The thing that I got super excited and inspired by this week is the new Firefox Accessibility Inspector. Better tooling is a key step towards better outcomes, so I’m excited for the improvements this will make for the accessibility of the web!
Enjoy!
KBall from ZenDev
CSS & SCSS
CSS Grid in IE: Debunking Common IE Grid Misconceptions
Believe it or not, you can use CSS Grid in IE11 - in fact, IE was one of the first browsers to support a version of CSS Grid, as the push for the spec came out of Microsoft. However, because it was so early to the party, and is not being updated any more, there are definite quirks to the IE11 version of Grid. This post goes through them and shows you how you can write grid layouts that work in modern browsers and IE11, so if supporting IE11 is holding you back from trying Grid, this is for you.
CSS Grid Level 2: Here Comes Subgrid
An excellent explainer on subgrids within CSS Grid, the biggest/most important feature that will be included in the second round of the CSS Grid spec. There was a lot of hope that subgrids would make it into the first round, but they were eventually dropped to allow more time to figure out exactly how they should work without holding up the rest. Work is underway, and hopefully we’ll see the first implementations coming soon - read this to see what the hype is about.
How to quickly prototype apps with CSS Grid and CSS Variables
Nothing worldshaking, but a very nice walk-through building a simple layout with Grid and theming it using CSS variables. If you’re the type who likes to learn by doing alongside, this is a good one.
The Layouts of Tomorrow
An exploration of some of the potential unlocked by CSS Grid and other advanced CSS features. After a period of consolidation of best practices and relatively stagnant layout technology that led to most of the web looking alike, we are now entering a period of incredible diversification.
Where is CSS4? When is it coming out?
Short video talking about the history of the CSS specification and what’s going on now. Great overview of the way the specification process has evolved over time. The fragmentation across multiple specs definitely makes for more things to keep track of, but I think this is a huge part of why we’re seeing much more rapid progress in the web platform today.
JavaScript
Learn these JavaScript fundamentals and become a better developer
I’m a huge believer in fundamentals, and this article does a good job of walking through a lot of core fundamental pieces in the JavaScript language. There are parts where I think they could have explained better or gone into more detail, but overall a solid article that introduces a lot of unique features of the language.
face-api.js — JavaScript API for Face Recognition in the Browser with tensorflow.js
We’re continuing to see more and more machine learning applications and tooling developed in JavaScript on top of tensorflow.js. Here comes another one - an open source library that lets you run the entire machine learning pipeline for doing facial recognition, with GPU acceleration, directly in your browser. We leave in the freaking FUTURE.
Fullstack React's Guide to using Refs in React Components
Refs are one of the really interesting features in React and Vue for “peeling back the covers” and getting access to the underlying browser DOM. Super useful for doing things like plugging in third-party libraries and dealing with those rare cases where the virtual DOM abstraction is a bit leaky. This full length guide on using refs within React is top notch.
Vue Storefront 1.0
A standalone PWA storefront for e-commerce applications that you can plug in in front of any e-commerce solution to get a super-fast, scalable, and mobile-first frontend. The system includes a cache in between the backend and frontend, offline capabilities, and more. Currently magento appears to have the most support, but the adapter system is set up to allow easy adding of additional e-commerce backends. I haven’t been in e-commerce recently, but next time I have a reason to I’ll definitely be looking at this.
Building AR/VR with Javascript and HTML
I’ve been interested in the potential of AR/VR on the web for a while now, ever since Kieran Farr pointed out to me that the combination of progressive enhancement and deep linking makes web-based VR even more powerful than native VR. It can feel a little intimidating to get into that world though, which is what this article is aiming to fix by giving you a definition of terms and resource list of places to go from outsider to insider in the WebVR world.
Other Awesomeness
Firefox 61 – Quantum of Solstice
Two super cool things in the latest Firefox release. First, they now have enabled parallel CSS parsing, continuing down their road of parallelizing ALL THE THINGS in the browser to take advantage of multicore processes. But the really interesting thing that prompted me to include it in the newsletter is they added a brand new Accessibility Inspector, making it easy to debug how screen-readers are interacting with your website. This is HUGE for helping developers make websites more accessible.
Introducing the Accessibility Inspector in the Firefox Developer Tools
A little bit older of a post, but inspired by the recent release making the Accessibility Inspector available to everyone, I want to highlight this. Interact with your site as would a screen reader, and dive deep into the underlying accessibility tree to understand how it’s working and why things are broken. This is a phenomenal step forward for accessibility.
JavaScript Usage by Industry
Breaking down data from a massive survey of npm users, this looks at how usage of JavaScript varies by industry. Interesting to see there are still industries that are over 50% using jQuery! I was also intrigued to note how many people are using Electron - more than 20% in every industry! Even considering this may be an audience of more backend/node focused folks, that is higher than I would have expected.
Ouch, your JavaScript hurts!
A look into what metrics make sense to measure when looking at JavaScript performance, and some tooling to help dig into it. CPU usage is an often overlooked cost of the increased amounts of client-side JavaScript we’re using, but especially as we look to expand our audience outside of the US and Europe, a tremendous number of devices folks are using are low-end smartphones that are pretty limited on the CPU front.
Making calls to WebAssembly fast and implementing anyref
One of the things that came up last week as I was talking about WebAssembly was that one of the current limitations is that calls between WebAssembly and JavaScript are pretty slow, which tends to reduce the range of things for which WebAssembly is useful. Welp, no sooner discussed than this comes up, highlighting work that made function calls in and out of WASM around 10X faster in Firefox.
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Latest comments (0)