|
Issue #481 • October 6, 2022
In case you weren't aware, there's a whole slew of Web APIs available, with varying levels of browser support, for conducting various performance-based analyses.
Each of these could be written up in a full blog post, but I'll just summarize them here with some links to the MDN pages, just so you can get the gist of what they're all about.
First, the Performance interface allows "access to performance-related information for the current page". This one is technically part of the High Resolution Time API. The Performance interface exposes one standard property, Performance.timeOrigin, some deprecated properties, and a number of different methods like:
- Performance.now()
- Performance.measure()
- Performance.toJSON()
 |
The Performance interface is enhanced by other APIs. One is the Performance Timeline API, which "defines extensions to the Performance interface to support client-side latency measurements within applications." This API exposes three methods along with a PerformanceEntry interface of its own.
Another one is the Navigation Timing API, which you've likely heard of. This API "provides data that can be used to measure the performance of a web site", but doing so in a way that's much more accurate than has been possible with plain JavaScript in the past. The Performance API is listed on MDN as an interface of Navigation Timing.
There's also the User Timing API, which allows you to "create application specific timestamps that are part of the browser's performance timeline." This involves creating "mark" and "measure" events.
Finally there's the Resource Timing API, which enables "retrieving and analyzing detailed network timing data regarding the loading of an application's resource(s)." This allows you to do things like measure the time it takes to load a specific resource in your app.
That should be plenty to keep you busy if you're looking into doing performance-related stuff in your apps, or maybe building a tool to measure performance in some way. If you want a nice starting point, the MDN article Using the User Timing API might be a good place to get going on some of these APIs. There's lots of code examples in that one, whereas the API pages themselves tend to be just dry summaries of the features available.
Now on to this week's tools!
|
JavaScript Utilities
Height: One Project Management Tool That Works For Your Whole Company
Centralize where decisions get made with Height — a project management tool so flexible that everyone, from engineering to design to operations, can all track their work in the same place. SPONSORED
Scenery
A JavaScript-based photo gallery app with extended search capabilities that uses a reverse-image search engine.
uncreate
A minimal, type-safe REST client using JavaScript proxies that uses ohmyfetch, an improvement on the Fetch API.
isbot
A JavaScript utility to detect bots, crawlers, spiders, etc. using the browser's user agent string.
Crawlee
A web scraping and browser automation library for Node.js that helps you build reliable crawlers fast.
WebDataRocks
A free enterprise-ready JavaScript-based pivot table and web reporting tool for data analysis and visualization, with no external frameworks.
typed-worker
A type-safe and Promisified API for Web Workers and iframes.
Bun TypeScript Type Definitions
Type definitions for Bun's JavaScript runtime APIs, from the team that maintains Bun.
Nutshell
A neat little way to embed collapsible/expandable 'nutshells' in paragraphs of text, similar to a footnote or aside, but you get the expanded text inline in the paragraph.
Cubism.js
A D3.js plugin for visualizing time series, to construct better real-time dashboards, pulling data from Graphite, Cube and other sources.
Typed querySelector
querySelector() and querySelectorAll() functions with better typing by leveraging TypeScript 4.1 template literal type.
until
A utility to deal with the fact that `await` has no error handling API, so you can handle Promises using async/await in a graceful manner.
|
Testing and Debugging Tools
Babbel: Language Lessons For Every Learner
Learn to speak a new language in just three weeks via 10-minute lessons designed by real language experts, focused on conversational skills in 14 languages. Sign up today to get up to 55 percent off your subscription. SPONSORED
jsconsole
Bit of an older project from Remy Sharp, basically just a simple JavaScript console that you can use for live presentations, workshops, screencasts, etc.
Core Web Vitals Check
An online tool to run checks on Core Web Vitals using three methods: URL, a URL list, or keyword which checks tests the pages for the top 50 search results for the keywords entered.
Perfsee
A set of tools for measuring and debugging performance of frontend applications. Tests bundles, Lighthouse scores, and source code performance.
Beacon
Calculate the environmental impact of a web page, see the breakdown and learn what measures can be taken to improve it.
A11y Automation Tracker
A more thorough way to track the potential accessibility violations and the automated linters and tests currently available.
 |
Browser Resource Hint Validator
Online tool to check if resource hints are working correctly on a given page (e.g. stuff like preconnect, preload, etc).
grype
A Go-based vulnerability scanner for container images and file systems.
Codeball
An AI-powered code review tool, trained on millions of code contributions to recognize risky code changes. Free for open source projects.
InAppBrowser.com
Visit this tool in a mobile app's in-app browser to check if the browser is injecting JavaScript code. For example, you can test it by putting it in your Instagram bio, then clicking the link inside Instagram.
LocalXpose
A reverse proxy that enables you to expose your localhost to the internet via CLI or GUI, and has a decent free plan.
httpstat.us
A super simple service for generating different HTTP codes, useful for testing how your own scripts deal with varying responses.
|
The Uncategorizables
Babbel: Language Lessons For Every Learner
Learn to speak a new language in just three weeks via 10-minute lessons designed by real language experts, focused on conversational skills in 14 languages. Sign up today to get up to 55 percent off your subscription. SPONSORED
dato.rss
A search engine where results are sourced from 1000+ RSS feeds.
Dopt
A visual flow builder with SDKs and APIs that enable you to easily ship
onboarding and engagement flows in hours, not months.
wordpress-wasm
From the WordPress team, an experimental WordPress build that runs directly in the browser with WebAssembly and no need for a PHP server.
Grape
A story-telling platform for programming to transform your code into an interactive video with one click.
Incredible
A platform that drastically simplifies creation of developer video content. It offers a unified workflow to storyboard, record, collaborate and produce videos.
Briefkasten
A self-hosted bookmarking application that works with any Prisma compatible database (MySQL, Postgres, SQLite, etc).
Authorizer
An open-source Auth0 alternative that's a database independent solution, easy to deploy, and easy to integrate.
DhiWise
Build React and Flutter Apps at blazing fast speed without comprising on code-quality and developer-experience.
 |
Pagefind
A fully static, Rust-based search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure.
Monocraft
A programming font based on the typeface used in Minecraft, for developers who like Minecraft a bit too much.
Fast Architect
A powerful tool for creating diagrams from code using simple intuitive syntax. Create sequence diagrams, component diagrams, and entity relationships with the free plan.
|
Commercial Apps and Classifieds
These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.
Qualitycs – Monitor your website's performance and SEO scores.
TasteWP – Platform for quick WordPress testing and staging sites.
Daito – Web-based 2FA that simplifies protecting shared accounts. AD
Ruttle – Visual feedback tool to comment on live web apps, PDFs, images.
Noom – A digital health platform to help you live a healthier, happier life. AD
Telescope – Publishing platform with a focus on simplicity, speed, privacy.
subZero – A GraphQL and REST API for your database.
|
A Tweet for Thought
As one response to this Tweet points out, the JS dev still has his hair. That's the important thing, right?
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...
If you enjoy history and maps, you might like Old Maps Online, a gateway to view historical maps in libraries around the world in a Google Maps-like setting.
Thanks to everyone for subscribing and reading!
Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly
|
|
