Issue #380 • October 29, 2020
|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.
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
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.
Open source tool to help troubleshoot Puppeteer and Playwright tests. Add this in five minutes to capture screenshots at every step – without changing tests.
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.
Run Lighthouse and Pa11y audits directly in your end-to-end test suites.
Wordpress plugin that does uptime monitoring, performance analysis, and a WordPress health check.
Compare performance metrics of your pages against each other or your competitors using Google PageSpeed Insights.
Generate massive amounts of fake data in the browser and Node.
Previously Puppeteer Recorder, a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script.
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.
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
A tiny library (~4kb min+brotli) for tiny web apps, with a declarative API similar to Vue and Alpine.
An ES Modules based Jamstack framework for pre-building large sites.
The all-in-one starter kit for high-performance e-commerce sites. Clone, deploy, and fully customize with a few clicks.
A TypeScript library for building distributed, real-time collaborative web applications.
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.
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.
Looking for productivity tools and resources? I do another brief newsletter with about 12 links related to being more productive in tech. promoted
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.
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.
A terminal font for the nostalgic.
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.
An experiment that aims to achieve an all-inclusive online comic reading experience.
Changelog service to share announcements, company news, and product updates in a sidebar, overlay, or popout.
Minimal-yet-powerful color picker, editor, and organizer for Mac.
Passwordless multi-factor authentication for any website or mobile app.
A free and open source PDF editor for Mac as an alternative to Adobe Acrobat.
An open source, easy to use, and extensible RSS feed aggregator capable of generating RSS feeds from pretty much everything.