Issue #377 (Falsy Values, Text Editors, Media, Uncats)10/08/20
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.
VS Code plugin that autocompletes npm modules in import statements.
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.
From the makers of Coda, this is a new Mac code editor with a robust extensions API and flexible settings to customize your workflow.
Mac, Windows, or Linux app that lets you navigate code with a graph, visualizing function calls in an intuitive way.
VS Code extension that allows you to record and playback guided tours of code bases, directly within the editor.
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
A warm, minimalist color scheme for Vim and Neovim.
A playground for SVGR, the SVG to React transformer that's available as a Node library, CLI tool, and webpack plugin.
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.)
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity. promoted
Embed image charts in emails, blog, or anywhere else using a simple API. Includes 9 different customizable chart types.
A library to display an interactive editor for any graph-like data.
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.
Free online and open source tool for creating beautiful user flow prototypes.
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.
Creative royalty-free music delivered straight to your inbox. Useful for adding music to podcasts, videos, etc.
Free SVG background generator with lots of pre-made backgrounds that you can customize then download as an SVG file or three code formats.
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.
Service to automatically add subtitles to videos.
Thousands of free stock videos, motion graphics, music tracks and sound effects, all in one place.
Form backend service for your static forms. Capture data from your static forms and send it to your email without writing server-side code.
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.
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.
A privacy-first search engine with no tracking.
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.
An extension of the Markdown language that adds styles and components.
A search engine that shows results only from forums like Stack Overflow, Reddit, etc.
A searchable database of every app you can integrate without code (i.e. "no code" apps).
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.
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 all for subscribing and reading!