|
Issue #474 • August 18, 2022
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
|
|
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:
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:
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:
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.
 |
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.
 |
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.
 |
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.
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
|
|
