Web Tools #392 - CSS Tools, VS Code & IDEs, Build Tools

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #392 • January 21, 2021

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.

JS Self-Profiling API Spec

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

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

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

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

A Tweet for Thought

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

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

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

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  Patreon  GitHub Sponsors  E-Books  Advertise

Older messages

Web Tools #391 - JS Libraries, JSON/DB, Uncategorizables

Friday, January 15, 2021

Web Tools Weekly WEB VERSION Issue #391 • January 14, 2021 Advertisement Preflect Surveys Websites of all types use Preflect to create fast on-site surveys. Learn more about your visitors, optimize for

Web Tools #390 - Frontend Frameworks, Testing Tools, Media

Thursday, January 7, 2021

Web Tools Weekly WEB VERSION Issue #390 • January 7, 2021 Promotion Frontendor UI Library A UI library to build beautiful and professional landing pages. Includes 100+ UI Blocks & 6+ Templates. Add

Web Tools #389 - Top 30 Tools of 2020

Thursday, December 31, 2020

Web Tools Weekly WEB VERSION Issue #389 • December 31, 2020 As mentioned last week, this issue is the second part in the countdown of most clicked tools. This week features the 30 most-clicked tools in

Web Tools #388 - Top Tools of 2020 (Pt. 1)

Thursday, December 24, 2020

Web Tools Weekly WEB VERSION Issue #388 • December 24, 2020 This week and next week are down weeks work-wise for many of you, so these two issues will feature this newsletter's 60 most clicked

Web Tools #387 - ES6 Generators, React Tools, Git/CLI, Uncats

Thursday, December 17, 2020

Web Tools Weekly WEB VERSION Issue #387 • December 17, 2020 Advertisement Cubbit Personal Cloud Sync store and share your files with Cubbit Cloud. Enjoy the highest security standards and stop paying

You Might Also Like

WP Weekly 226 - Launches - New Elementor Theme, WP 6.8 in April 2025, Automattic Scale Back

Monday, January 13, 2025

Read on Website WP Weekly 226 / Launches 2025 has just started, and there is a slew of new launches like Hello Biz Theme, Meta Box Lite, FooConvert, Affililink, and more. Also, the next WordPress 6.8

SRE Weekly Issue #459

Monday, January 13, 2025

View on sreweekly.com A message from our sponsor, incident.io: Effective incident management demands coordination and collaboration to minimize disruptions. This guide by incident.io covers the full

Saving One Screen At A Time 🖥️

Monday, January 13, 2025

Why the screen saver stopped being so in-your-face. Here's a version for your browser. Hunting for the end of the long tail • January 12, 2025 Today in Tedium: Having seen a lot of pipes, wavy

Software Testing Weekly - Issue 253

Monday, January 13, 2025

Software Testing Weekly turns 5! 🥳 View on the Web Archives ISSUE 253 January 13th 2025 COMMENT Welcome to the 253rd issue! Oh my, time flies! It's hard to believe this week marks 5 years since I

CES 2025 - Sync #501

Sunday, January 12, 2025

Plus: Sam Altman reflects on the last two years; Anthropic reportedly in talks to raise $2B at $60B valuation; e-tattoo decodes brainwaves; anthrobots; top 25 biotech companies for 2025; and more! ͏ ͏

PD#608 Mistakes engineers make in large established codebases

Sunday, January 12, 2025

You can't practice it beforehand ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

C#539 A detailed look at EF Core’s JSON Columns feature

Sunday, January 12, 2025

Comparing it with the traditional tables with indexes ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

RD#488 How to avoid issues with custom Hooks

Sunday, January 12, 2025

Using them carelessly can lead to many problems ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Daily Coding Problem: Problem #1666 [Easy]

Sunday, January 12, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Amazon. Given n numbers, find the greatest common denominator between them. For example,

🛜 Here's What Happens to Old Websites — Features the Pixel Should Copy From Samsung's One UI 7

Sunday, January 12, 2025

Also: What Instagram Needs to Compete With TikTok, and More! How-To Geek Logo January 12, 2025 Did You Know Mount Wingen, located near Wingen, New South Wales in Australia, is better known as Burning