#412 — October 9, 2019

Read on the Web

Frontend Focus

Supreme Court Hands Victory to Blind Man Who Sued Domino's Over Site AccessibilityBack in August we shared news that pizza company Domino’s was requesting for a lawsuit, requiring its website to be accessible to blind people, to be shut down. The Supreme Court has now denied that petition — a significant win for disability advocates.

Tucker Higgins

ASPIRE: Ideals to Aspire to When Building Websites — In relation to the item above, here Scott makes the case that sites should aspire to be Accessible, Secure, Performant, Inclusive, Responsive and Ethical.

Scott Jehl

A Technical Deep Dive into FeathersJS — FeathersJS is easy to integrate, data agnostic, and highly customizable. Is it the holy grail of frameworks for realtime apps and APIs? This article puts Feathers through its paces and answers the question: when is FeathersJS too lightweight?

Ably sponsor

The Evolution of Web Content Management — A look at the evolution of web content management from the early days of the web to the headless, cloud-based CMS systems of today.

Brian Rinaldi

How to Read A Web Page Test Waterfall Chart — If like me, you often look at a waterfall chart and get a bit lost as to what it all means, you’ll find this to be a handy reference, explaining it all in very accessible way.

Matt Hobbs

💻 Jobs

React JS Developer (Remote) — We’re looking for an ambitious React developer to help us make komoot the place to go to plan outdoor adventures.

KOMOOT

Mobile App Developer Wanted for High-Growth Fundraising Platform — This company has a big vision, and everyone embraces it, not because it’s a weird cult or something, but only because it’s ethical and cool.

CareersJS

Find A Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📙 Articles, Tutorials & Opinion

Avoid 100vh On Mobile Web — If you’re using viewport units in CSS to style an element to take up the full screen height (using height: 100vh), you may want to reconsider. David recommends an alternative approach using JavaScript.

David Chanin

An Interview with an 'Adult Site' Developer — Now this won’t be for everyone, but regardless of your stance, this is an interesting look into the decisions behind the tech choices and how they all work at one of the web’s largest adult sites.

David Walsh

Clipping, Clipping, and More Clipping! — An exploration of how the CSS clip-path property can be used to create interesting effects.

Mikael Ainalem

The React Hooks Guide: In-Depth Tutorial with Examples. Start Learning — Learn all about React Hooks as we comprehensively cover: State and Effects, Context, Reducers, and Custom React Hooks.

Progress KendoReact sponsor

Retro Nostalgia & Why My New Website Looks Like Windows 98 — This developer was feeling “particularly nostalgic for the days of Geocities and floppy disks” so created a new (and well-realised) Windows 98-style personal site paying homage to such an ‘idealized past’. Here’s the UI library behind it.

Ash Kyd

Verify Phone Numbers On The Web with The SMS Receiver API — It’s still early days for this API, but here’s an initial look at how the planned SMS Receiver API will work.

Eiji Kitamura

How to Build a Progressive Web App (PWA) with only Vanilla JS — Bring a native-like experience to your webapps with this grab bag of techniques including styling, fonts, Service Workers, and creating a manifest file.

Sayan Mondal

▶  Accessibility in Web Standards and Its Future in Software. Listen Now

Heroku sponsorpodcast

Spacing, Grids and Layouts: Creating a Spatial System — How to define baseline grids, column grids, spacing and layouts.

Elliot Dahl

Trying to Make Sense of Gmail CSS Support — As an email publisher this sort of knowledge can prove invaluable…

Rémi Parmentier

💡 Tip of the Week

supported by Flatiron School

Defining quotation styles with the <q> tag

When styling your site you may be happy with the "default, straight quotation style", but if you're keen on getting your typography just right then there is a way to ensure your quotation marks are “smart” via CSS.

As explained here, the HTML <q> element signals that the contained text is a short inline quotation. Most browsers implement this by surrounding the text in "quotation marks". You can, however, add a style to modify what automatically appears around the text:

q {
 quotes: "“" "”";
}

It may be hard to make out in email, but this rule will wrap your inline quote with alternative 'smart' quotation marks. This blog post expands on how this simple tip can be used for multilingual sites, such as using differing quotation rules for different languages (like German).

Another idea is outlined in this recent blog post from Michael Lazarski, who shows how this technique can even be used with emoji for an 🙌 altogether different 🙌 approach.

This Tip of the Week is sponsored by Flatiron School, where you can learn software engineering, data science, or UX/UI design in just 15 weeks online or on campus.

🔧 Code, Tools & Resources

moveable: A Library for Dragging, Resizing, Scaling and More — If you want to manipulate an element in any way (warping, pinching, rotating, etc) this library can probably help. Demo here.

Daybrush (Younkue Choi)

Facebook Design: Images and Sketch Files of Popular Devices — These sort of collections always prove handy to have stored away in your bookmarks.

Facebook

AniX: A 'Super Easy and Lightweight' CSS Animation Library

AniX

   🗓 Upcoming Events

Accessibility Scotland, October 25 — Edinburgh, UK — One day of talks. Friendly, open discussion about accessibility.

Performance Now, November 21-22 — Amsterdam, Netherlands — A single track conference with fourteen world-class speakers, covering the most important web performance insights.

VueConfTO 2019, November 11-12 — Toronto, Canada — First ever Vue Conference in Canada. Biggest in North America, with great workshops and talks.

Frontend Con, November 26-27 — Warsaw, Poland — Brings together 30+ top experts with over 500 experienced frontend pros from all over the world.