Link tags: case

Pivoting From React to Native DOM APIs: A Real World Example - The New Stack

One dev team made the shift from React’s “overwhelming VDOM” to modern DOM APIs. They immediately saw speed and interaction improvements.

Yay! But:

…finding developers who know vanilla JavaScript and not just the frameworks was an “unexpected difficulty.”

Boo!

Also, if you have a similar story to tell about going cold turkey on React, you should share it with Richard:

If you or your company has also transitioned away from React and into a more web-native, HTML-first approach, please tag me on Mastodon or Threads. We’d love to share further case studies of these modern, dare I say post-React, approaches.

New Low in the Accessibility “Industry:” Overlay Company Sues Globally-Recognized Accessibility Expert

Lainey Feingold on the ongoing court proceedings against Adrian Roselli:

This lawsuit against Adrian Roselli impacts every person who cares about including disabled people in the digital world. It impacts all of us who speak, write, and advocate for digital accessibility that is fair, equitable, and ethical.

Design notes on the 2023 Wikipedia redesign

So then the question becomes: how do you most effectively communicate designs, to facilitate the best discussions about those designs? My answer is: lots of little prototypes built with HTML, CSS, and JavaScript.

Pixelhop new website walk through

A case study with equal emphasis on animation and performance.

Uppestcase and Lowestcase Letters: Advances in Derp Learning

A genuinely interesting (and droll) deep dive into derp learning …for typography!

The amazing power of service workers | Go Make Things

So, why would you want to use a service worker? Here are some cool things you can do with it.

Chris lists some of the ways a service worker can enhance user experience.

Recreating Wildlife Photographer of the Year online – part 1 – Introduction and technical approach – Blogs from the Natural History Museum

You’ve seen the Wildlife Photographer Of The Year project from Clearleft’s viewpoint …and you’ve listened to the podcast episode, right?

Now here’s the story from the team that made the website. It’s a great walkthrough of thoughtfully evaluating technologies to figure out the best approach.

Prioritizing users in a crisis: Building the California COVID-19 response site

This is a great case study of the excellent California COVID-19 response site. Accessibility and performance are the watchwords here.

Want to know their secret weapon?

A $20 device running Android 9, with no contract commitment has been one of the most useful and effective tools in our effort to be accessible.

Leaner, faster sites benefit everybody, but making sure your applications run smoothly on low-end hardware makes a massive difference for those users.

Basil: Secret Santa as a Service | Trys Mudford

Trys writes up the process—and the tech (JAM)stack—he used to build basil.christmas.

Case Study: lynnandtonic.com 2019 refresh - lynnandtonic.com

Lynn gives a step-by-step walkthrough of the latest amazing redesign of her website. There’s so much joy and craft in here, with real attention to detail—I love it!

Why Progressive Web Apps Are The Future of Mobile Web [2019 Research]

PWAs just work better than your typical mobile site. Period.

But bear in mind:

Maybe simply because the “A” in PWA stands for “app,” too much discussion around PWAs focuses on comparing and contrasting to native mobile applications. We believe this comparison (and the accompanying discussion) is misguided.

Variable Fonts for Developers

A showcase of fun experiments with variable fonts, courtesy of Mandy.

How to build complicated grids using CSS grid

A nice walkthrough of a CSS grid in production. I was surprised to see percentages used as units—I wonder if it would feel “cleaner” if they were converted to fr units?

The Design Genome Project | InVision

A beautiful looking site from InVision collecting case studies of design-led companies (although this site is weirdly over-engineered and entirely dependent on JavaScript for rendering some text on a screen—prepare yourself for janky scrolling).

How To Become A Centaur

We hoped for a bicycle for the mind; we got a Lazy Boy recliner for the mind.

Nicky Case on how Douglas Engelbart’s vision for human-computer augmentation has taken a turn from creation to consumption.

When you create a Human+AI team, the hard part isn’t the “AI”. It isn’t even the “Human”.

It’s the “+”.

Back to Bradshaw’s / Paul Robert Lloyd

I really like getting Paul’s insights into building his Bradshaw’s Guide project. Here he shares his process for typography, images and geolocation.

Explorable Explanations

A collection of interactive lessons—games that teach—featuring the work of Bret Victor, Nicky Case, and more (the site is put together by Nicky Case).

Web Performance Optimization Stats

If you ever need to pull up some case studies to demonstrate the business benefits of performance, Tammy and Tim have you covered.

The road to Firefly 6, part 2, Roobottom.com

A look at the technical details behind Firefly’s pattern library. The tech stack includes Less, BEM, and some React, but it’s Anna and Danielle that really made it work.

kdzwinel/progress-bar-animation: Making a Doughnut Progress Bar - research notes

This is a thorough write-up of an interesting case where SVG looks like the right tool for the job, but further research leads to some sad-making conclusions.

I love SVG. It’s elegant, scalable and works everywhere. It’s perfect for mobile… as long as it doesn’t move. There is no way to animate it smoothly on Android.