Issue #380  (focus() arg, Testing, JS Libs, Uncats)10/29/20

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:

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.

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.

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.

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!).

 

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 all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris