#434 — April 1, 2020

Read on the Web

Frontend Focus

Updates to Form Controls and Focus in Chrome — Here’s a closer look at the recent changes introduced to HTML form controls within Chrome, designed to “beautiful, webby, and neutral”. They bring with them a host of accessibility wins, touch support, and more consistent keyboard access.

Rob Dodson (Google)

Google to Resume Chrome Updates It Paused Due to COVID-19 — Chrome 81 will now be released on April 7. Here's the official blog post from Google announcing that releases are now resuming.

Catalin Cimpanu (ZDNet)

Check Now to See If Your .TECH Domain Is Available — .TECH is the most definitive domain extension for the tech industry with the likes of Intel, CES and Viacom using it. Secure your online tech namespace before it’s gone. Use code frontendfocus for 80% off on 1 & 5 Year .TECH domains.

.TECH Domains sponsor

TOAST UI Editor 2.0: A Powerful WYSIWYG Markdown Editor — Two years in comes version 2.0, along with 10K GitHub stars to boot. v2.0 has a new Markdown parser, better syntax highlighting, improved scroll syncing and live previews, and more. GitHub repo.


Mozilla Re-Enables TLS 1.0 and 1.1 Because of Coronavirus (and Google) — TLS 1.0 and 1.1 has been re-enabled in the Firefox Stable and Beta browser because of Google and government sites that still rely on these protocols. Google has taken a similar, temporary, step due to the COVID-19 crisis, too.

Martin Brinkmann (gHacks)

What Should You Do When a Web Design Trend Becomes Too Popular? — This guide aims to help you figure out which approach makes the most sense when considering popular design trends for your site.

Suzanne Scacca

How to Improve Page Speed from Start to Finish — In this advanced guide Patrick Stox explains how page speed works, and what actions to take for your site.


📮 Introducing JAMstacked..

It's not often we launch a new newsletter, but JAMstacked is a new email digest from us covering the JavaScript, API, and Markup (i.e. JAMstack) movement. Issue 2 is landing in inboxes tomorrow (Thursday) but you can check out issue 1 here. Brian Rinaldi will bring you a concise round-up on the evolving JAMstack ecosystem — and you can sign up here.

💻 Jobs

Frontend Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.


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


▶ Get ready for your next role with PluralSight: Start a free ten-day trial on the technology skills platform. — SPONSORED

📙 News, Tutorials & Opinion

The Top 10 Reasons to Switch to The New Microsoft Edge — Yep, this is a feature list trying to convince folks to give Edge a try. I didn’t know about a few of the things Edge now offers, including an interesting ‘vertical tabs’ mode.

Liat Ben-Zur

What Does playsinline Mean in Web Video? — Have you noticed how sometimes in mobile browsers a video will play right where it is instead of the fullscreen default? Here’s how that works.

Chris Coyier

Inclusive Inputs — An exploration into how to make inputs more accessible, touching upon semantic HTML and a bit of ARIA.

Oscar Braunert

Making a Responsive Twitch Embed — This works mainly as a refresher on how to do intrinsic aspect ratio sizing in CSS for any embedded media, but it’s specific to Twitch embeds.

Phil Nash

The Fastest Way to Get Great Bug Reports from the Non-Technical Folk — Simply click an element to provide actionable feedback with screenshots & metadata pinned to the task. Try free for 14 days.

BugHerd sponsor

HTML DOM: A Resource for Solving DOM Problems with Native APIs — A guide with a list of different things we might normally do with a JavaScript library, but can now be done using native APIs.

Nguyen Huu Phuoc

Bootstrap 5 Dropping IE 10 & 11 Browser Support: Where Does That Leave Us? — The upcoming version five of popular framework Bootstrap is officially dropping support for both Internet Explorer 10 and 11. Here’s a quick look at what that means for those relying on Bootstrap, and what workarounds (polyfills) to expect.

Zoltán Szőgyényi

Building a Code Editor with CodeMirrorCodeMirror is an open source project that makes it easy to build advanced text editors into your frontend apps. Here’s how to build a code editor with it and how to connect together all the pieces.

Valeri Karpov

5 Reasons Why GraphCMS Could Be Your Next Backend for MVPs — An overview about why using a backend-as-a-service like GraphCMS is a viable way to go for MVPs.

Stephen Jensen

The Perfect Partner to MongoDB Atlas. Try It for Free

Studio 3T sponsor

Designing Web Applications for the Apple Watch using Toucaan CSS Framework

Marvin Danig

How to Display Different Favicons for Your Production and Development Sites

Chris Coyier

Web Font of the Week

Source Sans Pro

Drawing inspiration from American gothic typeface designs, this is Adobe's first open-source typeface family (and is made up of 12 weights). Designed by Paul D. Hunt it was conceived primarily as a typeface for user interfaces — boasting wide-ranging language support and a focus on clarity and legibility.

🔧 Code, Tools and Resources

MoreToggles.css — A pure CSS library with plenty of stylish toggles. Here's the related GitHub page.

Enkai Ji

Bootstrap Icons Alpha 3 — Although still in alpha, this is a massive update that puts the icon library at over 500 icons and adds a permalink page for each.

Mark Otto, Jacob Thornton, and Bootstrap contributors

Animockup: Create Animated Mockups in the Browser — An open-source design tool to make animated GIFs and videos to showcase your products. Try it here.

Alyssa X

Snapfont: Chrome Extension to Test Any Font on Any Website — Based on a pay-what-you-want model, this allows you to test any of the ~900 fonts on Google Fonts or using any locally installed font.


   🗓 Events

Most, if not all, of the in-person events that we typically list here are now understandably cancelled or postponed until further notice due to the global COVID-19 outbreak.

Because of this, more events are now looking at ways to run online. In the coming weeks, we're looking to devote this section to digital events, virtual conferences, livestreams, and similar online gatherings. Please do drop us a note (just hit reply) if you have such an event that we can promote here. Even if you're doing a single scheduled talk on Twitch or YouTube Live, say, we might be able to list it.