The importance of establishing code guidelines and standards for a project

Why The GOV.UK Design System Team Changed The Input Type for Numbers — Highlights how the <input type="number"> element can be somewhat problematic in some scenarios, and offers up a solution.

Hanna Laakso

Safari to Snub New Security Certs Valid for More Than 13 Months — From September 1, any new certificate valid for more than 398 days will be rejected by Apple’s Safari browser. While this is a Safari only move for now , if this catches on it might affect how you manage your TLS certificates.

The Register

AWS Webinar: How to Scale Kubernetes in AWS — Operating a Kubernetes environment at scale requires monitoring for performance and health. Join this webinar to discover how to proactively approach monitoring of your Kubernetes environments — at any scale and any level of complexity.

Amazon Web Services (AWS) sponsor

Rolling Code Standards — Covers the significance of establishing code guidelines and standards at the beginning of a project, and the importance of evolving those standards as a project progresses.

Brad Frost

The CSS Working Group Publishes Four 'First Public Working Drafts' — This update briefly discusses the first drafts for four specs: CSS Color Module Level 5, Media Queries 5, CSS Transforms Level 2, and CSS Conditional Rules Level 4.

W3C

Brave Browser Now Automatically Points to Wayback Machine On 404 — The web browser can now detect when a webpage is unavailable and will offer to search the Wayback Machine for a backup. The feature isn’t just for 404 errors though, as it will also trigger when hitting a 408, 410, 451, 500, 502, 503, 504, 509, 520, 521, 523, 524, 525, or 526 error.

Jon Porter

Stop Using ‘Drop-Down’ — This is a little opinionated because there does seem to be a place for the term, but getting the terminology right in the 11 instances discussed is important.

Adrian Roselli

:computer: Jobs

Frontend Developer at X-Team (Remote) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers.

X-Team

Find a Dev Job Through Vettery — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

:orange_book: News, Tutorials & Opinion

Ten Ways to Hide Elements in CSS — Each of the 10 methods has an accompanying chart that looks at various pros/cons including accessibility, browser support, layout/reflow, performance, and more.

Craig Buckler

Currying in CSS? — The concept here is based on the fact that the values of CSS custom properties aren’t evaluated until they’re used. This kinda sorta resembles ‘currying’ in JS.

Trys Mudford

HTML: The Inaccessible Parts — Dave has created a “living document” (that he intends to keep updated) that references different problems various sources have found with the accessibility of certain HTML elements.

Dave Rupert

How to Build Forms With React the Easy Way — Building forms with React can be frustrating. TJ VanToll suggests one way to tackle this challenge with ease.Read more.

Progress KendoReact sponsor

What Frontend Engineers Should Know About Backend — Subjects discussed include request rates, down time, HTTP status codes, delegating business logic, CORS, and cache busting.

Alexander Wang

Negative Margins in CSS — As the author points out, this might be the only article that covers negative margins in-depth (though it doesn’t go into flexbox and grid).

PETER-PAUL KOCH

How to Use requestAnimationFrame() with Vanilla JS — If you’ve never really had a use for this feature, but want to know how it works, this is easy to follow with some simple demos.

Chris Ferdinandi

The Mindset of Component Composition in Vue — A step-by-step tutorial building a search bar component. Good for those already familiar with Vue but maybe want to see another developer’s perspective on component composition.

Marina Mosti

Build a Single Page Application (SPA) Site With Vanilla.js

Jeremy Likness

:wrench: Code, Tools and Resources

Shadows: A Box Shadow Generator — This nifty browser-based tool can create smooth looking layered box-shadows . There is also an accompanying Figma plugin .

Philipp Brumm

Heroicons: Free MIT-Licensed High Quality SVG Icons for UI Development — 140 icons in total, available in solid or outline style.

refactoring ui

css.gg: Over 500 Customizable CSS Icons — Another icon set, this time a collection of retina-ready icons built in CSS.

Astrit Malsija

Customizable Checkout Experiences Made Easy. Build with Square

Square sponsor

Google Lighthouse Firefox Add-On — The mega-popular performance and website quality tool is now available as a Firefox extension.

Mozilla

Pep: Turn Your Website Into a Fast, Installable PWA Instantly — Ostensibly can be done using a single line of code. Free for sites up to 10k page views per month and there are paid plans after that.

pep.dev

Panolens.js: A JavaScript Panorama Viewer Based on Three.js —View examples here. This is a lightweight, flexible, WebGL-based panorama viewer built on top of Three.js.

Ray Chen