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

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:

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.

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

• Master Gatsby (52 HD videos)
• JavaScript for Beginners (88 HD videos)
• React for Beginners (29 HD videos)

---

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

 

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