Some really big things going on in the “Other Awesome” section this week. The new iOS/Safari release supporting the Payment Request API is HUGE for e-commerce and anyone else accepting payments online in the mobile web. The simplification of user flow allowed by enabling mobile wallets to be used to pay on a website is going to dramatically up conversion rates.

I’m also super excited about the wasm-bindgen article - it’s an awesome hint into the future of the web, with webassembly running seamlessly interwoven with JavaScript. Plus of course there’s your usual helping of CSS tutorials, inspirations, and a lot of great JS articles.

Happy Friday!
KBall from ZenDev

PS: In other news, if you’re a fan of podcasts, ‘ JS Party’ produced by Changelog.com just started back up and is doing a new podcast weekly all about the wild world of javaScript. I might be a little biased, as I’m a panelist in the episode going live today, but I think you’ll really like it.

CSS & SCSS

:focus-visible and backwards compatibility

Dealing with focus rings for keyboard navigation and avoiding them for mouse-using users that don’t need it has always felt awkward to me. As great as what-input is as a library, it just feels super hacky. This article introduces us to the newly proposed :focus-visible pseudo-class as a way to handle it, and shows us how to start taking advantage of it even as we wait for broad-based browser support.


Why would you do that in CSS?

It’s mind blowing what you can accomplish with just HTML and CSS. Is it always the right choice? No… is it always practical? Heck no… but mind blowing nonetheless. In this whimsical piece, Chris Coyier of CSS tricks takes us through some of the most far-out creations and animations done purely with CSS. He discusses some possible reasons for doing these things, to push ourselves and grow our skills, but I think his closing point is the true key:  We do these things because “it’s just kind of fun”. To being a developer is to be a creative, and creatives create. The why can be important, but it can also be secondary to the joy of creation.


Swipe Views with CSS Snap Points: Building a More Efficient Mobile Web Navigation

I’ve never tried out CSS Snap points before, but the problem that their solving is one I’ve seen (and worked on) a dozen different JavaScript implementations for, all buggy in their own ways. Carousels, single page marketing sites, they all want to be able to guide what you see as you scroll to be a “whole”, but scrolljacking is such an awkward and easy to break experience. Adding the ability to specify simply in CSS where a scroll should “snap” to seems like an incredibly elegant solution.


Scooped Corners in 2018

An excellent walkthrough on CSS-tricks of how to use CSS to create scooped corners out of boxes. Some fancy negative margins and box-shadow tricks, though of course the best and most cross-browser compatible version uses SVGs.


Grid Layout Cheatsheet

Simple printable cheatsheet for the basics of grid layout. Doesn’t cover as much as say this Complete Guide to Grid, but it hits the most common pieces and is extremely readable. Perfect if you just want a onepager to have on your desk.


JavaScript

ES6 Arrow Functions: Fat and Concise Syntax in JavaScript

An in-depth walkthrough of arrow functions, the most popular feature of modern JavaScript. If you’re not already using them, you definitely should read this. This syntax can make your code more compact, easier to read, and often easier to debug. Arrow functions are now available natively across all modern browsers (though not IE11), and of course if you’re using babel you can use them regardless.


How to avoid (or escape) async/await hell

The new async/await approach to asynchronousity (I know that’s not really a word, but I like it!) in JavaScript promises to free us from the nightmare of managing callbacks, but it’s easy to write bad code that ends up waiting far more than it needs. This guide talks us through how to structure our asynchronous code to avoid that and other problems.


Javascript : Prototype vs Class

Grokking JavaScript’s particular approach to object oriented programming - prototypal inheritance - has always been one of the most challenging things for developers coming from other object oriented languages. Now with modern JavaScript, we have a ‘class’ syntax which seems to make it more clear, but under the covers it is still using the traditional prototypal approach, and to really understand what’s going on you still need to understand prototypes. This post does a nice job of both explaining the original model, and showing how the new class syntax is in fact sugar on top of that model.


Methods, Computed, and Watchers in Vue.js

A deep dive into three of the reactive fundamentals of Vue. Definitely when I was first getting started, I had trouble understanding when to use computed vs methods, and watchers add a whole other layer of fun. Sarah Drasner does a great job breaking it down for you in this article.


Interactive React Lifecycle Methods Diagram

Understanding the lifecycle of a component is key to being able to hook into it and create complex behavior. React’s lifecycle has been undergoing some changes, but a recent Dan Abramov tweet led to this super cool interactive lifecycle diagram, with each section linking to the appropriate place in the docs. (PS: Be sure to expand to show less common lifecycle methods)


Other Awesomeness

A tale of Webpack 4 and how to finally configure it in the right way

Configuring webpack has gotten easier with version 4, but there’s still an awful lot of knowledge involved once you start wandering outside the beaten path. This tutorial is a great introduction to all of the core concepts and how to get started customizing your webpack configuration.


JavaScript to Rust and Back Again: A wasm-bindgen Tale

Ok, this is just super cool. The ecosystem pieces needed to make web assembly a seamless part of developing for the web are starting to really fall into place. This article shows how you can use wasm-bindgen to seamlessly call back and forth between JavaScript code and web-assembly, making it far easier to create mixed-code environments, leaning on different languages for their strengths as needed.


Introducing the Payment Request API for Apple Pay

This is big. Really big. This means that websites can now allow iOS users to pay via Apple Pay. When combined with Android (which has supported for a while), now 98% of US mobile web users can pay for things on the web using their mobile wallets. Given how painful the traditional payment process on mobile has been, this could drastically improve the viability of mobile e-commerce strictly through the web. Amazing! (PS if you’re looking for more info on how to use this, I wrote a news article over at InfoQ that has a ton of links to resources.


How to make videos accessible

Accessibility is all about thinking of all the different ways someone might perceive and use the web differently than you do. Different limitations, different tools, and different concerns. When it comes to accessibility, something I hadn’t thought about much was Video - as a web developer video has always been essentially an opaque blob to me. But there’s a ton that goes into making a video accessible, and as accessibility becomes more and more a part of our job this is an important niche to study up on.