Web Tools #380 - Testing Tools, JS Libraries, Misc. Tools

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

Older messages

Web Tools #379 - CodeLobster IDE, CSS Tools, Build Tools, Git/CLI

Thursday, October 22, 2020

Web Tools Weekly WEB VERSION Issue #379 • October 22, 2020 The following intro is a paid product review for CodeLobster, a free cross-platform IDE for PHP, HTML, CSS, and JS development. There's no

Web Tools #378 - JS Utilities, Media/SVG, Databases

Monday, October 19, 2020

Web Tools Weekly WEB VERSION Issue #378 • October 15, 2020 The only thing I'll mention in this week's intro is a thought-provoking article published three years ago: How I rediscovered my love

Web Tools #377 - VS Code, SVG, Media Tools, Uncats

Thursday, October 8, 2020

Web Tools Weekly WEB VERSION Issue #377 • October 8, 2020 As with many things in coding, there's probably lots of ways to do this, but here's a way to remove all 'falsy' values from a

Web Tools #376 - Learn Gatsby, JS Utilities, Mobile, Build Tools

Thursday, October 1, 2020

Web Tools Weekly WEB VERSION Issue #376 • October 1, 2020 As many of you know, and as is obvious simply by the existence of this newsletter, building websites today is not easy due to the abundance of

Web Tools #375 - Frameworks, Testing Tools, React Tools

Thursday, September 24, 2020

Web Tools Weekly WEB VERSION Issue #375 • September 24, 2020 The following intro tutorial was submitted by Erik Kückelheim, a self-taught developer living in Konstanz, Germany. In this write-up, Erik

You Might Also Like

New Linux Bug Could Lead to User Password Leaks and Clipboard Hijacking

Friday, March 29, 2024

THN Daily Updates Newsletter cover Refactoring in Java ($36.99 Value) FREE for a Limited Time Refactoring in Java serves as an indispensable guide to enhancing your codebase's quality and

Post from Syncfusion Blogs on 03/29/2024

Friday, March 29, 2024

New blogs from Syncfusion Introducing the New .NET MAUI Chat Control By Piruthiviraj Malaimelraj This blog explains the features of the new Syncfusion .NET MAUI Chat control added in the 2024 Volume 1

Re: Last Chance

Friday, March 29, 2024

Dear there, By this time tomorrow, your exclusive new subscriber discount will be gone and you'll have to pay twice as much to join Insider and master everything your iPhone has to offer. If, like

Hacker Newsletter #694

Friday, March 29, 2024

Always forgive your enemies - nothing annoys them so much. //Oscar Wilde hackernewsletter Issue #694 // 2024-03-29 // View in your browser Happy Easter if you celebrate it! Heads up - we're taking

Apple RCS 📱, SBF's 25 year sentence 👮, Linux Foundation's Redis fork 👨‍💻

Friday, March 29, 2024

RCS is coming to the iPhone in the fall of 2024 Sign Up|Advertise|View Online TLDR Together With Veracode TLDR 2024-03-29 Build fast, build secure (Sponsor) Software is drowning in security debt.

Data Science Weekly - Issue 540

Friday, March 29, 2024

Curated news, articles and jobs related to Data Science, AI, & Machine Learning ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

This Week in Rust #540

Friday, March 29, 2024

Email isn't displaying correctly? Read this e-mail on the Web This Week in Rust issue 540 — 27 MAR 2024 Hello and welcome to another issue of This Week in Rust! Rust is a programming language

The Value Of A Promise 🤞

Friday, March 29, 2024

How much is a promise from a tech company really worth, anyway? Here's a version for your browser. Hunting for the end of the long tail • March 28, 2024 The Value Of A Promise When you hear a

New Elastic Security for SIEM Training Course

Friday, March 29, 2024

Detect and respond to evolving threats ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ elastic | Search. Observe. Protect Detect anomalies and malicious behavior March

SBF gets 25 years 

Thursday, March 28, 2024

Sam Bankman-Fried is sentenced View this email online in your browser By Christine Hall Thursday, March 28, 2024 Welcome back to TechCrunch PM! The editorial team spent a chunk of the day discussing