Microsoft Edge Preview Builds for macOS Now Available — First unveiled several weeks ago, the new Microsoft Edge preview is based on top of the Chromium rendering engine but was Windows only. Now, a macOS build of the ‘Canary’ version is available.

Microsoft Edge Team

Firefox 67 Released — The latest release channel of Firefox is out bringing support for prefers-color-scheme (so you create those ‘dark mode’ styles) as well as a new rendering architecture. Of particular note to developers is that different installs of Firefox can now run side by side using different profiles which may be helpful for testing.

Mozilla Hacks

Free Guide: The Evolution of JavaScript Tooling — In this guide, an analysis of Angular, React, and Vue is provided along with a comparison of attributes, strengths, and weaknesses to assist developers with their decision making process for tooling. Download the guide to learn more.

SENCHA sponsor

A Deep Dive into Native Lazy-Loading for Images and Frames — With the weight of assets like videos and images on pages heavier than ever, lazy loading is a nice way to improve the user experience by only loading assets as needed.

Erk Struwe

The 'Inside' Problem: How to Break Out and Make An Element Full Width — Let’s say you need a full-width container to get an edge-to-edge background but you want the contents to remain in their usual position. Here are several approaches, each with pros and cons. (We just had to feature this as it’s such a common front-end design problem.)

Chris Coyier

Folding the DOM: Using 3D CSS Transforms to 'Fold Up' Images — The ‘trick’ to creating an image folding effect with CSS transforms is to have multiple identical images and then transform them separately. This is a great, interactive tutorial that’s based around React, although the underlying CSS principles are usable anywhere.

Josh W. Comeau

Flexible Data Tables with CSS Grid — <table>, originally used for both layouts and tables, became used for tables only (and HTML email!) as CSS became more capable. Well, now, how about skipping <table> even for tabular data? Here’s how to use CSS Grid to make nice tables for tabular data.

Adam Lynch

Front-End Engineer - Apple Inc. (CA, US) — Love the challenge of solving complex problems? Be part of a team with strengths crafting JavaScript apps for iCloud Analytics.

Apple

Product-Focused & Driven Frontend Engineers in Stockholm — Join our 30-person team of A-players, solve problems at global scale & help us become the most trustworthy online health company.

Diet Doctor Sweden AB

Find a Frontend Job on Vettery — Vettery specializes in tech roles and is completely free for job seekers.

Vettery

Vue.js and SEO: How to Optimize Reactive Sites for Search Engines — Are sites created with front-end rendered frameworks indexed by Google? Or do you need to set up pre-rendering? Paolo performed an experiment to see the reality.

Paolo Mioni

Three.js Fundamentals: A Tutorial — This is a very extensive and impressive set of tutorials on using Three.js to create browser-based 3D experiences.

Greggman

Everything You Ever Wanted to Know About inputmode — The inputmode attribute can influence mobile browsers as to which keyboard (or extra characters) they display to enter things like email addresses or phone numbers.

Christian Oliff

Get the Fastest Website Deployments. Ever — Learn the most effective way to build better apps faster.

Buddy sponsor

In Chrome 76 You Can Hide the 'Add to Home' Info Bar — If a PWA passes the ‘installability checklist’ on Android, a special ‘add to home screen’ bar appears at the bottom of the screen. As a developer you can now override this behavior.

Peter Mclachlan (Google)

How to Create an Accessible Language Picker — Note that this is based around the CodyHouse CSS and JS component framework.

Claudia Romano

Why and How to Use WebP Images Today — WebP is an image format developed by Google in 2010 as a more efficient alternative to formats like PNG and JPG. As of Firefox 65, Safari is the only major browser to not support it.

Ire Aderinokun

How I Navigate Hundreds of Chrome Tabs with JXA and Alfred — This is really niche but is an interesting technical solution to managing large numbers of tabs.

Renan Cakirerk

Tornis: Watch and Respond to Changes in the Browser's Viewport — A JavaScript library that tracks pointer position, viewport size, scroll position, etc. and lets you perform actions based upon them.

Robb Owen

Micron.js: A Micro Interaction Library — Add CSS-powered visual interactions to DOM elements.

Webkul

Grow Your Cloud Service Business with Manifold

Manifold sponsor

Rough.js: Draw Web Graphics with a Hand-Drawn, 'Sketchy' Appearance — Supports both drawing on Canvas or using SVG.

Preet Shihn

Reveal.js 3.8.0: An HTML Presentation Framework — A now mature framework that continues to get frequent updates and releases.

Hakim El Hattab

Embetty: Display 3rd Party Content Like Tweets or YouTube Videos Without Compromising Privacy — Involves using a proxy server you host yourself.

heise online

A WebGL Fluid Simulation — Simply beautiful and fun to play with.

Pavel Dobryakov demo