Firefox 69 released, and how to ‘rotate’ the mouse cursor with CSS

#407 — September 4, 2019

Read on the Web

Frontend Focus

My Favorite CSS Hack — * { border: 1px solid red } is a classic ‘trick’ for debugging CSS and HTML issues by putting borders around every element. This tip takes a few extra steps, however, and helps you get a better overview, particularly with nested elements.

Gajus Kuizinas

How Web Content Can Affect Power Usage — Users spend a large proportion of their online time on mobile devices, or on untethered laptop computers. This post digs into factors that affect battery life, and how to make your pages more power efficient so that users can spend more time engaged with your content.

Benjamin Poulain and Simon Fraser (WebKit)

The Secret to Agile Transformation — Discover how to empower web teams to collaborate more effectively, increase the rate of iteration on your site, and drive business results. The secret? WebOps and web teams. Watch now to find out why.

Pantheon sponsor

Firefox 69 Released: What’s New for Developers

Mozilla

In A Swipe At Chrome, Firefox Now Blocks Ad Trackers by Default — Firefox 69, as released this week (above), enables Enhanced Tracking Protection by default, which blocks cryptominers and certain types of third party cookies designed to track users for advertising purposes.

Laurie Clarke (WIRED)

Bottom Navigation Pattern on Mobile Web Pages: A Better Alternative? — With bigger phones comes the need to adjust how we both build and design mobile sites. This article digs into how to create mobile navigation with lower user interaction costs.

Arthur Leonov

The Baseline Interpreter: A Faster JS Interpreter in Firefox 70 — JIT (Just-In-Time) compilation was once all the rage for speeding up JavaScript but a faster interpreter can result in significant performance improvements on modern workloads and here’s how it works.

Jan de Mooij

💻 Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world’s leading brands.

X-Team

Find a Frontend job through Vettery — Make a free profile, name your salary, and connect with hiring managers from top employers.

Vettery

📙 Articles, Tutorials & Opinion

Working with Attributes on DOM Elements — The DOM is just a little weird about some things, and the way you deal with attributes is no exception..

Chris Coyier

How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG — Learn a simple technique for adding a color swap functionality to images on a page by creating an SVG and applying mix-blend-mode to the composition.

Kyle Wetton

Accessibility for Web Developers. Get the Whitepaper — Learn everything you need to know about accessibility standards, how to conform to the laws and what this means to you.

Progress Kendo UI sponsor

Overflow and ‘Data Loss’ In CSS — By default, elements expand to fit the content within them, but if you want to specify sizes for elements, content could ‘overflow’ within then. This is controllable and Rachel looks at the options.

Rachel Andrew

X3D: Declarative 3D for the Modern Web — A look at X3D and how it offers a simple declarative approach for including 3D visualizations into web pages.

Adrian Sureshkumar

How the caption-side Property Controls the Position of a Table Caption — An interesting tip because not only might you be unaware of caption-side,

What to Consider When Planning a Website Redesign

TJ Welsh

Did You Know, As of HTML5, Anchor Tags Can Contain Block-Level Elements?

Ben Nadel

Need to Scroll to the Top of the Page? — If you want users to be able to jump to the top of the page quickly, there are a few approaches..

Chris Coyier

🔧 Code, Tools & Resources

TOAST UI Grid 4.5: A Data Grid Control for the Web — This no-dependency TypeScript-based data grid component works down to IE9, works with many data types, has advanced sorting capabilities (which you can customize), and is easily re-themed.

NHN Entertainment

instant.page 2.0: Preload Link Target Pages ASAP — You include some JavaScript in your page and the browser will begin to preload the destination page the second someone clicks on a link. This can result in a slight, but noticeable, performance increase.

Alexandre Dieulot

Make Your Images & Videos Load Fast & Look Beautiful with Cloudinary

Cloudinary sponsor

CSS Duotone Generator — Bring in an image, apply effects, and then generate the HTML and CSS you need to reproduce it on a page.

Rick Metzger

dark-mode-screenshot: Take Both Light and Dark Mode Screenshots with Puppeteer — If you’re using Puppeteer as part of a testing or screenshotting process, did you know you can specify whether or not dark mode CSS rules should be respected or not?

Bram van Damme

Can You Rotate the Mouse Cursor in CSS? — Not exactly, but there’s a very neat looking workaround to pulling off the same effect. The demo here is cool to look at, if a little disorienting.

Chris Coyier