Lots of great JavaScript articles this week for folks at any stage in their JavaScript learning. A set of beginner resources, a bite-sized web API tutorial, a super cool modern JS Pattern, and more. Plus of course your standard helping of great CSS posts and other news around the web.

Enjoy!

Best,
KBall from ZenDev

P.S. If you’re going to read just one article, read ‘Elegant patterns in modern JavaScript: RORO’. Its rare I read a front-end development article that makes me immediately think differently about code I’m writing today, but this one did.

CSS & SCSS

It’s Resilient CSS Week

A great video series by Jen Simmons of Mozilla on how to write CSS that takes advantage of the latest and greatest CSS features without leaving folks stuck on IE completely out in the cold.


Third party CSS is not safe

A deeper look at the underlying security issues that have been getting buzz with the ‘CSS keylogger’ post that went around recently. This is not a trivial thing for browsers to fix - rather it highlights the need to, just like with JavaScript, but very judicious about how we utilize 3rd party tools.


Lesser known CSS quirks & advanced tips

A couple of the points in here don’t seem to quite hit the mark of ‘lesser known’ or advanced (ids overrule classes? That’s specificity 101!), but there’s enough good stuff that I’ll give it a pass and say this is definitely worth reading through. Lots of good tips and tricks in here, and a sense of humor to boot!


Styling Empty Cells With Generated Content And CSS Grid Layout

Did you know that :before and :after pseudoelements can be laid out as part of a grid in CSS Grid? Me neither! This article goes through that and many other super-cool applications of using these pseudoelements.


Avoiding chaos when using Flexbox 'order'

Last week’s edition included a super cool article about creating a sortable table purely using CSS, taking advantage of the Flexbox order property. However, we also mentioned how as cool as this is, it plays havoc with accessibility. This article references that article and talks about when it does and does not make sense to use the order property.


JavaScript

How to Create an Accessible Autocomplete Component with Vue.js

Nice combination of an ARIA overview and cheatsheet along with a detailed Vue.js example, along with a link back to a non-accessible version of the same example so you can see what the differences look like.


🎼webpack 4: released today!!✨

Now with bonus emoji! But I can forgive the excitement, because this release is huge. Benefits touted include the ability for zero-config webpack builds, a simplified config system in general (much needed!), massive performance improvements (examples cited upwards of 70%), and support for webassembly and other bundle times. Big deal! Go check it out.


Page Vis­i­bil­i­ty API

A super cool bitesized nugget of a browser API that I didn’t know about. Did you know you can detect when a user has focused in on your page or tab, and when they leave it? I didn’t! But it’s been around for a while - all major browsers support it, including IE! :D This post uses the example of adding a sleeping a emoji when someone changes away from the tab, but I bet you can think of a number of other use cases too.


The JavaScript Learning Landscape in 2018

A great collection of learning resources around JavaScript. Focused on beginners, but covers good breadth, including books, blogs, newsletters, and both free and paid video courses.


Elegant patterns in modern JavaScript: RORO

This is beautiful. I love the way the author takes a single feature of modern JavaScript - object destructuring - and shows how it enables an elegant, reusable pattern that creates better, cleaner, more composable and maintainable code. I’m going to start using this pattern, it’s great.


Other Awesomeness

Progressive Web Apps coming to all Chrome platforms

The ability to use progressive web applications with Chrome on desktops was not something I’d thought much about - we have Electron already for packaging up web for desktop, right? But this article not only discusses what that will look like but points out a HUGE advantage over packaged apps with Electron - security. Browser security bugs are constantly being discovered, and the Chrome release cycle is much faster than Electron. This highlights another big developer advantage - it would bring “desktop” applications into a web-like release cycle, allowing continuous updates. This is big!


Things you need to know about working with SVG in VS Code

Longtime readers will know I’m a HUGE fan of SVG, and one of the biggest reasons is that it SVGs are not just images, they are code very similar to HTML. That’s why it is great to see more and more advanced SVG-focused features in code editors, like these highlighted in VS code.


Understanding Web Fonts and Getting the Most Out of Them

Typography has long been a place where the web has lagged behind more traditional mediums, but with the increasing power available in web fonts that is no longer true. Using custom fonts is getting continually easier, but the best practices keep shifting. This is a nice overview of the current state of the art, along with resources for learning more and some links to what’s coming up next.


Efficiently snapshotting your single-page-apps with Puppeteer

There are so many cool tools for generating graphs with SVG and JavaScript, but if someone shares a page with a graph and you want to show the graph in the corresponding social post, you need a static image version of it. This walkthrough looks at implementing an efficient system for generating these images via an automatic screen capture of the generated image. Pretty neat!


Launching the Front-End Tooling Survey 2018

I remember reading through the results of the 2016 Front-End Tooling Survey and being fascinated by what it showed. It helped me to make decisions for the future of ZURB Foundation (at the time I was leading the project), and gave me insight into what was happening around the world. Now the same team is launching another version of the survey. It takes 3 minutes - or at least, that’s how long it just took me. Go take it, and help the community learn about what’s going on in our world!