Web Tools #377 - VS Code, SVG, Media Tools, Uncats

Web Tools Weekly
WEB VERSION
What a Tool!

Issue #377 • October 8, 2020

As with many things in coding, there's probably lots of ways to do this, but here's a way to remove all 'falsy' values from a JavaScript array:

let myArray = [2, false, true, 67, undefined, 0, 88, null, 123];
let myNewArray = myArray.filter(Boolean);

console.log(myNewArray); // -> [2, true, 67, 88, 123]

Notice that the array has some questionable values (false, undefined, null, etc). The new array has all those filtered out, including the zero value which is also considered "falsy".

The new array is created by applying the filter() array method on the original array. The filter() method takes a function as its value. All the values in the array that pass the test provided by the function remain in the array, and the rest are filtered out.

But in this case I'm simply using the Boolean() constructor as the function, which will automatically filter out the falsy values without the need for any if/else logic or similar branching that might occur in a regular filter function.

You can try it on CodePen. And keep in mind that you may want values like null and 0 to remain in certain arrays, so this might not be a good technique to use if your goal is to just remove undefined entries.


Now on to this week's tools!

Text Editors, IDEs, Playgrounds, etc.

npm Intellisense
VS Code plugin that autocompletes npm modules in import statements.

codepen-cli
CLI tool that allows you to generate a CodePen from the CLI via a web page. It will create the HTML/CSS/JS from what it finds in the page.

Nova
From the makers of Coda, this is a new Mac code editor with a robust extensions API and flexible settings to customize your workflow.
 
Nova

Codemap
Mac, Windows, or Linux app that lets you navigate code with a graph, visualizing function calls in an intuitive way.

CodeTour
VS Code extension that allows you to record and playback guided tours of code bases, directly within the editor.

PairPro
A tool built with recruiters and candidates in mind, to deliver a reliable remote interviewing experience with a shared code editor and compiler for 30+ popular programming languages.

Debugger for Chrome
VS Code extension to debug your JavaScript in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

Mellow
A warm, minimalist color scheme for Vim and Neovim.

SVGR Playground
A playground for SVGR, the SVG to React transformer that's available as a Node library, CLI tool, and webpack plugin.

you-are-here.vim
See the filenames of your Vim splits in easy-to-read popups and switch windows seamlessly.
 
Recommended Courses for Developers:

Media Tools (SVG, Video, etc.)

Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity.   promoted

Charttt
Embed image charts in emails, blog, or anywhere else using a simple API. Includes 9 different customizable chart types.

Diagram Maker
A library to display an interactive editor for any graph-like data.

IconPark
Gives access to more than 1,200 high-quality icons, and introduces an interface for customizing your icons. Transform an SVG icon into multiple themes or generate React, Vue, or SVG icons.

Wireflow
Free online and open source tool for creating beautiful user flow prototypes.
 
Wireflow

Keyboard Simulator
Design and test virtual 3D keyboards. Includes lots of options to adjust the look and color of the virtual keyboard, which you can then permalink to or just screenshot.

Material Icons Library
Free collection of 1000+ icons for popular graphics tools.

SoundStash
Creative royalty-free music delivered straight to your inbox. Useful for adding music to podcasts, videos, etc.

BGJar
Free SVG background generator with lots of pre-made backgrounds that you can customize then download as an SVG file or three code formats.

visx
A collection of reusable low-level visualization components that combines the power of D3 to generate your visualization with the benefits of React for updating the DOM.

Subly
Service to automatically add subtitles to videos.

Videvo
Thousands of free stock videos, motion graphics, music tracks and sound effects, all in one place.

The Uncategorizables

Formcubes
Form backend service for your static forms. Capture data from your static forms and send it to your email without writing server-side code.

Web2PdfConvert
Enter a URL to convert a web page to a PDF or image.

Programmable Search Engine
Google's official space for adding in-site search, powered by Google, to your website.

downrunner
Make Markdown documents in tutorials and docs interactive with live code execution, embedded charts, a JS console, and more.

Domains for the Rest of Us
Always available AI-generated domain names.

Privado
A privacy-first search engine with no tracking.

DocRaptor
HTML-to-PDF API powered by the PrinceXML HTML-to-PDF engine. Provides support for headers, page breaks, page numbers, flexbox, watermarks, accessible PDFs, and more.
 
DocRaptor

Marks
An extension of the Markdown language that adds styles and components.

Boardreader
A search engine that shows results only from forums like Stack Overflow, Reddit, etc.

Integreat
A searchable database of every app you can integrate without code (i.e. "no code" apps).

Nessie
An extremely simple web browser (no tabs) for Windows, best used as a secondary browser. Interestingly, it's one of the few remaining browsers based on the Trident layout engine.

HyperSuggest
A keyword tool that delivers thousands of keywords and ideas from 9 different networks like Google, Amazon, eBay, Instagram, etc. in seconds.
 

A Tweet for Thought

If you've ever had to add a feature to a legacy code base.

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

While on the subject of code editors, if you like listening to music while coding, you'll want to check out Music Time. It integrates with Spotify and uses metrics from your code editor to discover what music makes you most productive.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly

Older messages

Web Tools #376 - Learn Gatsby, JS Utilities, Mobile, Build Tools

Thursday, October 1, 2020

Web Tools Weekly WEB VERSION Issue #376 • October 1, 2020 As many of you know, and as is obvious simply by the existence of this newsletter, building websites today is not easy due to the abundance of

Web Tools #375 - Frameworks, Testing Tools, React Tools

Thursday, September 24, 2020

Web Tools Weekly WEB VERSION Issue #375 • September 24, 2020 The following intro tutorial was submitted by Erik Kückelheim, a self-taught developer living in Konstanz, Germany. In this write-up, Erik

Web Tools #374 - CSS Tools, JSON, DBs, Uncats

Thursday, September 17, 2020

Web Tools Weekly WEB VERSION Issue #374 • September 17, 2020 Previously I've discussed a number of different tips around object and array destructuring in ES6, which make code much easier to read

Web Tools #373 - Media Tools, JS Libs, Vue Tools

Thursday, September 10, 2020

Web Tools Weekly WEB VERSION Issue #373 • September 10, 2020 The Google Developers team recently posted a new article in their web.dev resource that's worth checking out: Use advanced typography

Web Tools #371 - Frontend Frameworks, JS Utilities, Build Tools

Thursday, August 27, 2020

Web Tools Weekly WEB VERSION Issue #371 • August 27, 2020 JavaScript's Date object is quite a monster when you take a look at all the methods available on it for manipulating and dealing with dates

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your