Web Tools Weekly
Web Tools Weekly
WEB VERSION
What a Tool!

Issue #380 • October 29, 2020

Advertisement
Cut Your IT Bills in Half
No surprise invoices, no lock-in, and same price across 11 global data centers. Industry-leading price-performance. Shared, Dedicated, High Memory, and GPU instances plus Object Storage and Managed Kubernetes. $100 in cloud infrastructure credit.
Try Linode Free.
Linode

The focus() method is a well known feature for programmatically forcing focus on a form element or other element on the page that has the ability to be focused.

This past week I came across a relatively new optional argument now available when using focus(). Here's how the syntax looks:

myElement.focus({
  preventScroll: true
});

The focus() method now accepts an options object that takes one property/value pair – the preventScroll property with a value of either true or false.

This option tells the browser whether you want the page to scroll to bring the newly focused element into view. This means the element will still receive focus but it won't scroll jarringly into the viewport, which often happens when focus() is abused.

Try it on CodePen

In the demo, there are two buttons. The first one focuses the element normally. As a result, the page gets scrolled because the input being focused is at the bottom.

The second button uses the preventScroll option. The input is still focused, but the page doesn't scroll. Notice if you use the second button then immediately start typing some text, the page will only scroll down once you begin typing.

This is a nice improvement to the focus() method and I'm almost inclined to want browsers to implement this as the default since scrolling due to focus has always been an annoyance on the web. In fact, you'll notice in the demo that I've included preventScroll: false on the first button. This way, if browsers decide to implement preventScroll: true as a default, this demo will still work correctly.

Now on to this week's tools!

Testing and Debugging Tools

Cut Your IT Bills in Half
No surprise invoices, no lock-in, and same price across 11 global data centers. Industry-leading price-performance. Shared, Dedicated, High Memory, and GPU instances plus Object Storage and Managed Kubernetes. $100 in cloud infrastructure credit. sponsored 

NsLookup.io
Find DNS records for a domain name using this online tool. You can choose from a variety of DNS sources as well as local DNS.

Root Cause
Open source tool to help troubleshoot Puppeteer and Playwright tests. Add this in five minutes to capture screenshots at every step – without changing tests.

vasai
Chrome extension that's billed as a screen recorder for web developers. Videos are housed at Amazon Cloud. I'm not sure how long they're kept or if there's a limit, but the videos are downloadable.

cypress-audit
Run Lighthouse and Pa11y audits directly in your end-to-end test suites.

WP Umbrella
Wordpress plugin that does uptime monitoring, performance analysis, and a WordPress health check.

PageSpeed Compare
Compare performance metrics of your pages against each other or your competitors using Google PageSpeed Insights.

PageSpeed Compare

faker.js
Generate massive amounts of fake data in the browser and Node.

Headless Recorder
Previously Puppeteer Recorder, a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script.

Blacklight
A real-time website privacy inspector. Enter the address of any website, and this tool will scan and reveal the specific user-tracking technologies on the site – and who’s getting your data.

Visual Mind AI
Uses AI to tell you how attractive your website is.
 

JavaScript Libraries and Frameworks

Master Gatsby
A brand new course from Wes Bos currently still at launch price. 52 HD videos to learn to build and style websites with Gatsby, React, and friends.   promote

Lucia
A tiny library (~4kb min+brotli) for tiny web apps, with a declarative API similar to Vue and Alpine.

QuickJS
A small and embeddable JavaScript engine that supports the ES2020 specification including modules, asynchronous generators, proxies, and BigInt.

Eta
Lightweight, powerful, pluggable, embedded JavaScript template engine, written in TypeScript, for use in Node, Deno, or the browser.

Toast
An ES Modules based Jamstack framework for pre-building large sites.

Next.js Commerce
The all-in-one starter kit for high-performance e-commerce sites. Clone, deploy, and fully customize with a few clicks.

Next.js Commerce

smolpxl
A JavaScript library for writing little retro pixelated games.

DataFormsJS
A minimal JavaScript Framework and standalone components for rapid development of high quality websites and single page applications.

Fluid Framework
A TypeScript library for building distributed, real-time collaborative web applications.

Razzle
Now at version 3+. A tool that abstracts all complex configurations needed for both SPAs and SSR applications into a single dependency. Works with React, Elm, Vue, Angular, and more.

Carbonium
One kilobyte library for easy manipulation of the DOM. call $(selector) and the result can be accessed as both a DOM element and an array of matched elements.

The Uncategorizables

Tech Productivity
Looking for productivity tools and resources? I do another brief newsletter with about 12 links related to being more productive in tech. promoted

tiiny.host
The simplest way to share your web project. Just drag and drop a ZIP file with index.html, other pages and assets, and the site will be live at a selected subdomain for 24 hours for sharing/testing.

Swell
A powerful feature-rich, headless ecommerce platform.

The League of Extraordinary Packages
A group of developers who have banded together to build solid, well-tested PHP packages using modern coding standards.

3270font
A terminal font for the nostalgic.

DevUtils.app
Developer utilities for macOS. Includes Unix time converter, URL encoder/decoder, JSON formatter, Base64 encoder/decoder, CSS beautifier, and lots more. Works offline and it's open source.

DevUtils.app

ComicA11y
An experiment that aims to achieve an all-inclusive online comic reading experience.

Reproducer
Changelog service to share announcements, company news, and product updates in a sidebar, overlay, or popout.

Colormate
Minimal-yet-powerful color picker, editor, and organizer for Mac.

Gazepass
Passwordless multi-factor authentication for any website or mobile app.

PEP
A free and open source PDF editor for Mac as an alternative to Adobe Acrobat.

RSSHub
An open source, easy to use, and extensible RSS feed aggregator capable of generating RSS feeds from pretty much everything.

A Tweet for Thought

If you wanted to know a little bit about my pre-tech history with a certain famous person (see also the replies in case you wanted proof!).

A Tweet for Thought
 

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

Since a lot of things in the world are kind of depressing right now, here's Bongo Cat to cheer you up.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Mapped | Which Countries Have the Worst Air Pollution? ☁

Saturday, December 5, 2020

This population-weighted cartogram shows the countries with the worst air pollution, based on fine particulate matter (PM2.5) concentration. Five trends are shaping the higher education experience

Daily Coding Problem: Problem #243 [Medium]

Saturday, December 5, 2020

Daily Coding Problem Good morning! Here's a solution to yesterday's problem. This is your coding interview problem for today. This problem was asked by Etsy. Given an array of numbers N and an

Week in Review - A controversial Slackquisition

Saturday, December 5, 2020

TechCrunch Newsletter TechCrunch logo Week in Review logo Saturday, December 05, 2020 • By Lucas Matney Hello, hello, and welcome back to Week in Review. I hope you all had a lovely Thanksgiving and

Startups Weekly - It's holiday season for tech unicorns

Saturday, December 5, 2020

TechCrunch Newsletter TechCrunch logo Startups Weekly logo Saturday, December 05, 2020 • By Eric Eldon Did you follow all of the unicorn news from the last couple of weeks? No? Here's a list of

Oscar Isaac is going to play Solid Snake in a 'Metal Gear Solid' movie

Saturday, December 5, 2020

Engadget The Morning After logo Now available on your smart speaker and wherever you get your podcasts Apple Podcasts | Spotify | Google Play | iHeart Radio It's Saturday, December 05, 2020.

New Live Webinar! Top 5 improvements teams are making in 2021

Saturday, December 5, 2020

Maximize engineering efficiency View this email in your browser engineering.com Maximizing Engineering Efficiency: Top 5 Improvements Teams are Making in 2021 - Jan 12, 2PM ET Live Webinar - Maximizing

PS5: Trying to beat a bot, scammer, or scalper and score a PlayStation 5

Saturday, December 5, 2020

Windows-themed ugly Christmas jumpers; Xbox Series X stock trackers Subscription | Read Online | Twitter Facebook LinkedIn Top Story of the Day December 4, 2020 Top Story of the Day PS5 problems:

“The Impact of Power Query” - Ilgar Zarbaliyev's Nuzzel Newsletter for Sat, Dec 5

Saturday, December 5, 2020

Sat, Dec 5 Share Tweet Share Subscribe View this issue in your browser Hello and welcome to my Nuzzel newsletter! “Excel Days in Azerbaijan Event” will review the latest developments and current trends

Netscape and Sun Announce JavaScript (1995) — Self-host your fonts for better performance — and EU pushes for 'right to disconnect' from work at home

Saturday, December 5, 2020

Issue #242 — Top 20 stories of December 05, 2020 Issue #242 — December 05, 2020 You receive this email because you are subscribed to Hacker News Digest. You can open it in the browser if you prefer. 1

Daily Crunch - Slack and Salesforce execs explain their big acquisition

Friday, December 4, 2020

TechCrunch Newsletter TechCrunch logo The Daily Crunch logo Friday, December 04, 2020 • By Anthony Ha We learn more about Slack's future, Revolut adds new payment features and DoorDash pushes its