Web Tools #474 - JS Libraries, SVG, Git/CLI

Web Tools Weekly
WEB VERSION
Tools for Web Developers

Issue #474 • August 18, 2022

Advertisement
Build Internal Tools 10x Faster with Retool
Retool is the fast way for developers to build and share internal tools. Teams at thousands of companies like Amazon, DoorDash, NBC, and Pinterest collaborate around custom-built Retool apps to solve internal workflows. Get started for free today.

Learn More
Retool

I recently came across a related series of web console methods that I hadn't seen before. Or maybe I had seen them a long time ago but had forgotten about them: console.group(), console.groupEnd(), and console.groupCollapsed().

These methods can be used in conjunction with your console logs when debugging, to organize your logs. When you call console.group(), any subsequent console logs are indented until you call console.groupEnd().

You can do the same thing with console.groupCollapsed(). The difference is (as the name implies), the group of logs will appear collapsed inside the console, so you have to click to expand it.

Here's an example that creates two console groups:

console.log('This is the root level of logs');

console.group();
console.log('This is a new level of logs');
console.log('Another log inside the group');
console.log('A third grouped log');
console.groupEnd();

console.log('Back to the root level of logs');

If you run this in your DevTools console, you'll see something like the following:

Using console.group()

As mentioned, you can replace console.group() with the related method console.groupCollapsed(), to do the exact same thing except for the fact that the logs in that group will have to be expanded to see them, as shown in this screenshot:

Using console.groupCollapsed()

You can try it out in this CodePen demo. Be sure to use the browser's console, as CodePen's built-in console doesn't seem to support grouping.

As you probably suspected, you can create nested log groups by calling console.group() or console.groupCollapsed() before ending an existing group. For example:

console.log('This is the root level of logs');

  console.group();
    console.log('This is a new level of logs');
    console.log('Another log inside the group');
     
      console
.group();
        console.log('A third level of logs');
        console.log('Another log at level 3');
      console.groupEnd();
 
    console
.log('Back to level 2 logs');

  console.groupEnd();

console.log('Back to the root level of logs');

Notice how I've indented the code so you can more easily see the groups. You can try it on CodePen here. And the image below shows the visual result in the console:

Using nested console.group() logs

For debugging, I'm sure many of you have moved on from console.log() to other more advanced tools and techniques. But if you still use it and need to log multiple sets of messages in a debugging workflow, these methods might help.
 

Now on to this week's tools!
 

JavaScript Libraries and Frameworks

Build Internal Tools 10x Faster with Retool
Retool is the fast way for developers to build and share internal tools. Teams at thousands of companies like Amazon, DoorDash, NBC, and Pinterest collaborate around custom-built Retool apps to solve internal workflows. Get started for free today.     SPONSORED 

JS-SDSL
A JavaScript standard data structure library that's lightweight (~10kB compressed), no dependencies, and implements a C++ STL-style bidirectional iterator.

Arquero
A JavaScript library for query processing and transformation of array-backed data tables that provides a fluent API for manipulating column-oriented data frames.

Deepkit
A high-performance, full-featured TypeScript framework that features a runtime type system, a DevTools debugger, validation, serialization, a template engine, and lots more.

vis.js
A dynamic, browser-based visualization library designed to be easy to use, can handle large amounts of dynamic data, and enables manipulation of and interaction with the data.

Atomico
A micro library of modern syntax created that simplifies component creation by replacing the use of classes with functions to manage everything.

Atomico

Microvium
An ultra-compact, embeddable scripting engine built in C for microcontrollers for executing a useful subset of the JavaScript language, with a focus on small size and ease of use.

OneJS
A scripting engine and UI solution with first-class TypeScript support, specifically designed for Unity (the AR/VR platform).

Scriptable
An iOS app that lets you automate iOS using JavaScript. It enables you to write scripts that integrate with native features of iOS such as files, calendars, reminders, documents and more.

Yjs
A CRDT framework with a powerful abstraction of shared data.

Brain.js
A GPU-accelerated library for neural networks written in JavaScript (browser and Node.js), an indirect fork of an older unmaintained project.

On the Release Radar:

Media Tools (SVG, Audio, Video, etc.)

1440: News Without All the Nonsense
Check out 1440 — the fastest way to an impartial point-of-view. The team at 1440 scours over 100+ sources so you don't have to. Culture, science, sports, politics, business and everything in between — in a five-minute read each morning, 100% free.   SPONSORED 

nnneon
Another SVG generator from Sébastien Noël, this one that lets you create a custom futuristic-looking glowing shape (triangle, square, circle, etc).

Instagram Downloader
An online tool to fetch the raw media for a specific Instagram post, reel, bio photo, story, highlight, etc.

svg-injector
A fast, caching, dynamic inline SVG DOM injection library, to avoid having to deal with the full SVG inline markup in your HTML.

HLS.js
A JavaScript library that implements an HTTP Live Streaming client and relies on HTML5 video and MediaSource Extensions for playback.

mdi-react
Material Design Icons for React/Preact packaged as single components.

Icônes
An online icon explorer with instant searching, powered by Iconify. Includes 110+ popular icon sets, searchable by keyword.

Icônes

Tropy
A native cross-platform, open-source app that allows you to organize and describe photographs of research material.

JPEG Compressor
Online tool to resize and optimize images with support for GIF, JPEG, PNG, JPG, SVG, and WEBP.

React Sketch Canvas
Freehand vector drawing component for React using SVG as the canvas. Works on desktop and mobile and the demo is pretty neat.

Edit Photo
A free privacy-friendly online photo editor in the browser, with no ads, no cookies, and no signup needed.

react-native-graph
Beautiful, high-performance graphs/charts for React Native, based on the high performance C++ 2D graphics rendering engine Skia.

On the Release Radar:
💡 This week in VSCode.Email:
  • Customizing VS Code's DIff Editor
  • Event: VS Code Extension Extravaganza
  • A Modern IDE for AWS
Check the archives for the latest issue, and subscribe for more!

Git, GitHub, and CLI Tools

Morning Brew
There's a reason over 2.6 million people start their day with Morning Brew — the daily email that delivers the latest news from Wall Street to Silicon Valley. Business news doesn't have to be dry and dense...make your mornings more enjoyable, for free.    SPONSORED 

Wakatime Stats Github Commit
A serverless function that auto commits your daily total time tracked on Wakatime to GitHub.

git-publish
Publish your npm package to a GitHub repository branch. Useful for testing published packages without publishing to npm.

onedev
A popular self-hosted Git server, written in Java, with CI/CD and Kanban.

React Terminal UI
A React component that lets you embed a terminal UI with support for dark and light modes.

GameShell
A game to learn (or teach) how to use standard commands in a Unix shell, available in English, French, and Italian.

Rich Enhanced Shell History
Context-based replacement/enhancement for zsh and bash shell history.

Tabby
An infinitely customizable cross-platform terminal app for local shells, serial, SSH and Telnet connections.

Tabby

git-stats
Command-line tool that provides local Git statistics including GitHub-like contributions calendars.

Gum
Highly configurable, ready-to-use Go-based utilities to help you write useful shell scripts and dotfiles aliases with just a few lines of code.

Gitsign
Keyless Git signing with Sigstore that uses keyless Sigstore to sign Git commits with your own GitHub / OIDC identity.

ugit
Shell script that works as a damage control Git buddy to help you undo Git commands, covering 20+ Git undo scenarios.

Package Hunter
From the GitLab team, a tool for identifying malicious dependencies via runtime monitoring.

Commercial Apps and Classifieds

These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.

Tailscale – A zero-config VPN that installs on any device in minutes.

Moralis – APIs, SDKs and Data for building high performance dApps.

2FA & No Phone? - Daito is your team's new web-based 2FA authenticator AD

CodeTruck – Generates Node.js backend boilerplate code tailored for you.

Malthus – Generate high-quality prospects and leads for your business. AD

VisitorAPI – Fast and reliable API to detect visitor location and device info.

Serve – Service that handles your API infrastructure with no hassle.
 

A Tweet for Thought

Did you conform to this too? For some reason my order was 2, 3, 1, 4 the first time I looked at it.

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

Dinosaur Pictures and Facts claims to be the internet's largest dinosaur database. So if you or maybe one of your kids loves dinosaurs, this is a great resource to bookmark.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Older messages

Web Tools #473 - Frameworks, Testing Tools, Uncats

Friday, August 12, 2022

Web Tools Weekly WEB VERSION Issue #473 • August 11, 2022 Advertisement Meet Filestack: The All-In-One File Handling Service Filestack is the premier service designed to meet all your file handling

Web Tools #472 - Media, SVG, React, JSON, Databases

Thursday, August 4, 2022

Web Tools Weekly WEB VERSION Issue #472 • August 4, 2022 Advertisement Powerful Monitoring, Low Overhead! Easily analyze increased response time with intuitive dashboards that help you drill down into

Web Tools #471 - CSS Articles, JS Utils, Git/CLI, Svelte

Thursday, July 28, 2022

Web Tools Weekly WEB VERSION Issue #471 • July 28, 2022 Advertisement Internal Tools Are Built On Retool Build interfaces fast with 100+ pre-built components. Then customize with JavaScript, SQL, HTML,

Web Tools #470 - JS Classes, Tailwind, CSS, SVG, Bundlers

Thursday, July 21, 2022

Web Tools Weekly WEB VERSION Issue #470 • July 21, 2022 Advertisement Meet Filestack: The All-In-One File Handling Service Filestack is the premier service designed to meet all your file handling needs

Web Tools #469 - React, Testing, Figma to Code, Uncats

Thursday, July 14, 2022

Web Tools Weekly WEB VERSION Issue #469 • July 14, 2022 Advertisement Meet Filestack: The All-In-One File Handling Service Filestack is the premier service designed to meet all your file handling needs

The image in this post displays its own MD5 hash — and A mysterious voice is haunting American Airlines’ in-flight announcements

Saturday, September 24, 2022

Issue #900 — Top 20 stories of September 25, 2022 Issue #900 — September 25, 2022 You receive this email because you are subscribed to Hacker News Digest. You can open it in the browser if you prefer.

Weekend Reading — 👋 0.1 + 0.2

Saturday, September 24, 2022

This week we play Dungeon & Types, visualize our designs IRL, FOMO into the Metaverse, and wrestle a bear for a Belgium waffle. Weekend Reading — 👋 0.1 + 0.2 By Assaf Arkin – 24 Sep 2022 – View

Daily Coding Problem: Problem #889 [Easy]

Saturday, September 24, 2022

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Amazon. Run-length encoding is a fast and simple method of encoding strings. The basic

Animated | Visualizing 140 Years of Global Surface Temperatures 🌐

Saturday, September 24, 2022

Here's a look at 140 years of global surface temperatures, highlighting the ten coldest and warmest years since 1880. View Online | Subscribe Presented by: Explore what 8 billion people means for

The Best Laptops of 2022

Saturday, September 24, 2022

Did You Know?: The stethoscope was invented in 1816 by French physician René-Théophile-Hyacinthe Laennec and motivated by a desire to accurately (and modestly) diagnose heart problems in women. The

Noonification: Monsters of Mars

Saturday, September 24, 2022

Top Tech Content sent at Noon! Private Applications Begin Here How are you, @hacker? 🪐 What's happening in tech this week: The Noonification by HackerNoon has got you covered with fresh content

Week in Review - GTA 6 footage leaks, Revolut gets hacked, and Wipro fires 300 for "moonlighting"

Saturday, September 24, 2022

TechCrunch Newsletter TechCrunch logo Week in Review logo By Greg Kumparak Saturday, September 24, 2022 Hi, friends! Welcome back to Week in Review, the newsletter where we very quickly sum up the most

London Police Arrested 17-Year-Old Hacker Suspected of Uber and GTA 6 Breaches

Saturday, September 24, 2022

The Hacker News Daily Updates Newsletter cover 2022 First Half Threat Report A Semiannual Report by FortiGuard Labs Download Now Sponsored LATEST NEWS Sep 24, 2022 London Police Arrested 17-Year-Old

Startups Weekly - Tiger Global, fickle checks and the difficulty of acceleration

Saturday, September 24, 2022

TechCrunch Newsletter TechCrunch logo Startups Weekly logo By Natasha Mascarenhas Saturday, September 24, 2022 Welcome to Startups Weekly, a fresh human-first take on this week's startup news and

New Python tutorials on Real Python

Saturday, September 24, 2022

Hey there, There's always something going on over at realpython.com as far as Python tutorials go. Here's what you may have missed this past week: When Do You Use an "..." Ellipsis in