Friday Frontend: Mobile Wallets for the Web Edition
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.
KBall from ZenDev
CSS & SCSS
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.
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.
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.
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.
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.
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)
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.
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
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.
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.
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!