Web Tools Weekly Issue #392 (Profile API, CSS/HTML, Text Editors, Build Tools)

Issue #392 (Profile API, CSS/HTML, Text Editors, Build Tools)01/21/21

In case you missed it back in November, Addy Osmani wrote about a new unofficial specification called the JavaScript Self-Profiling API. This looks to be a very important standard and I hope it's not one of those that gets forgotten and buried by the troves of browser bugs and features that are being worked on every month.

The good thing about a feature like this is that it doesn't have to be implemented in more than one browser. You don't need it to work in Firefox, Chrome, and Edge – though that would be nice.

The Chrome Platform Status page explains the motivation behind it:

"Currently, it is difficult for web developers to understand how their applications perform in the wide variety of conditions encountered on real user devices."

And further according to Addy:

"This API allows web developers to efficiently identify costly hotspots during page load and user-interactions in their JavaScript. The API also enables you [to] do things like allocate CPU budgets to individual features implemented on a page, find low-priority code that's executing in the background and wasting power or just client-side work that's unnecessary."

Here's Addy's code example:

// Begin a new profiling session

      // Provide a sampleInterval

      // (period which the session obtains samples)

      const profiler = await performance.profile({

        sampleInterval: 10

      });

      // Do some expensive work

      performSomeTask();

      // Stop the profiler and return the trace captured

      const trace = await profiler.stop();

      // Send the trace to an endpoint for reporting

      sendTraceToAnalytics(trace);

Chrome 86 is the current stable version and this issue on Can I Use's GitHub repo says it's supported in Chrome 87 (it's not yet added to Can I Use). And I believe it may be behind a flag even when it goes into the stable version.

If you like this new proposed standard, you can do one of the following:

Log in and star the issue on Chrome's bug page
Log in and vote for the bug on Bugzilla (for Firefox support). This is actually a bug report I opened myself.
In MS Edge, click "Help & Feedback" in the options menu and submit a request that it be supported.
Do the same in any other browsers you want it supported in.

As the Chrome Platform Status page points out, developer reaction to this so far is positive, but browser support is weak. Any extra push should help in the long run.

Now on to the this week's tools!

CSS and HTML Tools

Form2Channel
Get HTML form submissions in Google Sheets, Email, Slack or Telegram for free.

AnimXYZ
The first composable CSS animation toolkit. Create and customize powered by CSS variables. Built for Vue, React, SCSS, and CSS.

Compiled
A build-time atomic CSS-in-JS solution that incorporates a familiar API.

FarbVélo
A random color "cycler". Generate a random palette, then customize it using the sliders.

Coding Fonts
From CSS-Tricks, a one-stop micro site to showcase coding fonts and includes paid and free fonts along with the ability to switch between dark/light mode.

burgton-button
A small customisable lit-element burger button that allows you to choose from different animations, customise colors, animation speed, and more.

UI Devtools for Tailwind CSS
An extension to your browser's developer tools that specifically addresses debugging and developing in Tailwind-based projects.

Oceanwind
JS module that compiles Tailwind shorthand into CSS at run time.

Tint and Shade Generator
Enter hex colors separated by spaces and this tool will accurately produce tints (pure white added) and shades (pure black added) of each given hex color in 10% increments.

htmlparser2
A fast and forgiving HTML/XML parser that provides a familiar callback interface.

Progressier
A no-code way to turn your website into a PWA. Well, technically you need to add a single line to reference the script. Basics are free, some add-ons not.

VS Code, IDEs, etc.

Nodes
A JavaScript-based 2D canvas for computational thinking that lets you write programs by connecting “blocks” of code.

GitLive
Real-time collaboration and communication for dev teams. Turn your IDE into a collaborative space where you can work together in real-time.

Cloak
VS Code extension to hide parts of your screen in environment files, to avoid accidentally sharing them during a screen share.

Stripe for VS Code
VS Code extension that makes it easy to generate sample code, view API request logs, forward events to your application, and use Stripe within your editor.

Streamline DSP
Quickly insert 1,200+ icons in VS Code, using this free package. Access the icons instantly with instant search, auto-completion, and preview in code.

JSitor
Another option in the online front-end playground space. This one also includes iOS and Android versions for creating HTML, CSS, JS demos on mobile.

GlueCodes
A low-code rapid app and web development platform to generate beautiful frontends for your backend.

radicle
A peer-to-peer code collaboration stack for building software together. Currently Beta versions for Mac or Linux.

SharePad
A collaborative editor and an online compiler/interpreter for Python, C/C++ and Java. Click 'Collaborate', copy the URL from the address bar and send it to others to collaborate.

VueDX
VS Code extension that provides advanced TypeScript support for Vue. Includes features like type checking, completion, renaming, and refactoring for .vue files.

nvim-scrollview
A Neovim plugin that displays (non-interactive) scrollbars.

Monacode
An es-module wrapper around Prettier and Microfoft's Monaco editor (a browser based code editor that powers VS Code).

Build Tools, Bundlers, etc.

vno
A build tool for compiling and bundling Vue components in a Deno runtime environment.

webpack-run-chrome-extension
Run your extension on Chrome with auto-reload support for JavaScript changes.

Moiva
Measure and compare JavaScript libraries. Enter the name of one or more npm packages and this tool will display data related to the packages.

Ditox.js
Detoxed dependency injection container for JavaScript, Typescript, and Flow.

svelte-preprocess-esbuild
A Svelte preprocessor to compile TypeScript via esbuild.

Optimize Plugin for Webpack
Optimize your code for modern browsers while still supporting the other 10%, increasing your build performance, reducing bundle size and improving output quality.

RxJS Ninja Template Library
A Github Template built using the Nx monorepo approach for generating Typescript libraries for the web with UMD and ESM compilation.

Rollup Plugins
A one-stop repository for official Rollup plugins.

forge-node-app
Generate Node.js boilerplate with optional libraries and tools.

ni
Utility that lets you use 'ni' instead of 'npm' or 'yarn', so you don't have to remember which package manager each project is using.

EMP
An implementation of micro frontends, based on webpack 5 Module Federation, but production-ready.

And some quick releases in this category...

Standard JS, version 6+
eslint-config-prettier, version 7+
esprint, version 2+
Create React App, version 4+
Snowpack, version 3+

A Tweet for Thought

A nice reminder of how great it is to know how to code.

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

Here's a unique idea: unloved. It's marketplace for pre-owned tech subscriptions that people aren't using, so you can buy one for a discount or sell your own unused subscriptions.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris