Movin’ Modals Along a Path
June 4th, 2019
Modals always be just appearin’. You might see one once in a while that slides in from one of the edges, or uses some kind of scale/opacity thing to appear from “above” or “below.” But we can get weirder than that. Why not have them come in on an offset-path? Just a swoopy arc is…
Creating Animations Using React Spring
June 4th, 2019
Have you ever needed animation in your React application? Traditionally, implementing animation has not an easy feat to accomplish. But now, thanks to Paul Henschel, we there’s a new React tool just for that. react-spring inherits from animated and react-motion for interpolations, optimized performance, and a clean API. In this tutorial, we will be looking…
First Public Working Draft: Web Authentication: An API for accessing Public Key Credentials Level 2
June 4th, 2019
The Web Authentication Working Group has published a First Public Working Draft of Web Authentication: An API for accessing Public Key Credentials Level 2. This specification defines an API enabling the creation and use of strong, attested, scoped, public key-based credentials by web applications, for the purpose of strongly authenticating users. Conceptually, one or more…
Do you need an ICON ONLY button without screwing up the accessibility?
June 3rd, 2019
The first consideration is: do you really? If you can, having text next to your icons is proven over and over again to be the most accessible and clearest UX (see Apple’s latest blunder). But if you need to (and I get it, sometimes you need to), Sara Soueidan and Scott O’Hara have a pair…
Prevent Page Scrolling When a Modal is Open
June 3rd, 2019
Please stop me if you’ve heard this one before. You open a modal, scroll through it, close it, and wind up somewhere else on the page than you were when you opened the modal. That’s because modals are elements on a page just like any other. It may stay in place (assuming that’s what it’s…
Implementing Private Variables In JavaScript
May 31st, 2019
JavaScript (or ECMAScript) is the programming language that powers the web. Created in May 1995 by Brendan Eich, it’s found its place as a widely-used and versatile technology. Despite its success, it’s been met with its fair share of criticism, especially for idiosyncrasies. Things like objects being casted to string form when used as indices,…
Weekly Platform News: Favicon Guidelines, Accessibility Testing, Web Almanac
May 31st, 2019
Google posts guidelines for defining favicons Jamie Leach: Google Search now displays favicons in search results on mobile. Your favicon should be a multiple of 48×48 (Google will re-scale it to 16×16 for use in search results). If a website doesn’t have a favicon or Google deems the favicon inappropriate, a generic globe icon will…
Reducing motion with the picture element
May 31st, 2019
Here’s a bonafide CSS/HTML trick from Brad Frost and Dave Rupert where they use the <picture> element to switch out a GIF file with an image if the user has reduced motion enabled. This is how Brad goes about implementing that: <picture> <!– This image will be loaded if the media query is true –>…
A Practical Use Case for Vue Render Functions: Building a Design System Typography Grid
May 30th, 2019
This post covers how I built a typography grid for a design system using Vue render functions. Here’s the demo and the code. I used render functions because they allow you to create HTML with a greater level of control than regular Vue templates, yet surprisingly I couldn’t find very much when I web searched…
Customer Satisfaction Surveys with Wufoo
May 30th, 2019
I was once tasked to create a makeshift customer service survey that would allow an employee to receive a customer call and send a survey to the custom once the call ended. The goal was to track customer satisfaction, which is a totally legit thing to want. There are some solutions out there that do…