Web Tools #452 - JS One-liners, VS Code, Testing, Uncats

Advertisement

Over the past 6 months or so I've come across three different articles with a similar theme: Killer JavaScript one-liners.

These articles are straight lists with not much explanation, which is fine. They always seem to be popular so instead of lifting one of their one-liners and dissecting it here, how about I simply share the whole lot?

20 Killer JavaScript One Liners by Savio Martin

Includes: browser cookie, RGB to Hex, copy to clipboard, title case a string, clear all cookies, get URL params, and more.

20 JavaScript One-Liners That Will Help You Code Like a Pro by M. Ovi

Includes: Get a random Boolean, unique array values, generate a random string, swap two variables, merge arrays, and lots more.

17 Life-Saving JavaScript One-Liners by Maria Zayed

Includes some DOM manipulation, and some one-lines for manipulating arrays and objects.

Another 17 Life-Saving JavaScript One-Liners by Maria Zayed

Includes one-liners related to strings, dates, and lots more.

Warning: Many of these "one-liners" can be a headache to maintain so if you're going to use them, be sure to comment your code if that snippet is even a little confusing or ambiguous to future code maintainers.
 

Now on to this week's tools!
 

VS Code, Text Editors, IDEs, etc.

The All-in-One Modern Data Platform You Need
Get everything you need to combine, organize, and transform your data for analysis, including a Snowflake data warehouse and ETL tools. sponsored  

Node.js Notebooks
Run JavaScript and TypeScript in Node.js within VS Code notebooks, with excellent support for debugging, TensorFlow visualizations, Plotly, etc.

Preview.js
Extension for VS Code JetBrains IDEs to instantly preview UI components for better flow while developing interfaces.

regex:help!
An online tool to help you easily generate, test, and refine your regular expressions. Powered by the popular grex library.

Style Dictionary Playground
An unofficial playground for Style Dictionary, Amazon's build system that allows you to define styles once, in a way for any platform or language to consume.

Yode-Nvim
A plugin for Neovim that adds features from Yode, an older library that allow you to do highly-focused code editing (e.g. by opening new windows for each function you want to edit).

Animatize
A really cool little animation builder that lets you create simple animations by just dragging your an object around a canvas. Select the background and object to animate, then drag the object and generate the CSS.

Rehype Pretty Code
A plugin for Rehype, an HTML processor that lets you easily add syntax highlighted code to Markdown and MDX docs.

Emfy
A dark and sleek Emacs setup for general purpose editing and programming for those new to using Emacs.

Slidev
A VS Code extension that adds support for Slidev, a framework for creating interactive presentation slides using a single Markdown file.

On the Release Radar:

• Swift Playgrounds - iPad/Mac playground for Swift now at version 4
• micro - Intuitive terminal-based text editor now at version 2+
• RunJS - Mac/Win/Linux JavaScript playground app at version 2+

Testing and Debugging Tools

API Spreadsheets — Build a Custom Spreadsheet Importer
Set up a custom spreadsheet import workflow and use our pre-written code to build an importer within minutes.  sponsored 

react-native-owl
Visual regression testing for React Native, though still a work in progress project.

CLI Testing Library
A set of simple and complete CLI testing utilities that encourage good testing practices.

taba11y
Chrome extension that calculates the tab order of all elements on a page and displays tab order visually, either by drawing a path or by highlighting the elements.

JSBEN.CH
Online JavaScript benchmarking tool to test code snippets against each other and optionally generate a shareable URL.
 
Node-Secure CLI
A Node.js CLI to deeply analyze the dependency tree of a given package or directory.

Falso
Create massive amounts of fake data in the browser and Node, tree shakeable and fully typed.

Automa
Chrome extension to let you use "blocks" to automate events in the browser like auto-filling forms, doing a repetitive task, taking a screenshot, scraping data, and lots more.

vue-test-declarative
Declarative unit testing for Vue components.

Violating GDPR?
Enter a URL and this tool will tell you if the website is violating GDPR laws.

On the Release Radar:

• TestCafe - Cross-browser end-to-end testing at version 1+
• Lighthouse - Google's performance metrics tool now at version 9+
• Jasmine - JavaScript test suite framework now at version 4+

The Uncategorizables

API Spreadsheets — Use Google Sheets as an API and Database
Save form data to spreadsheets, use spreadsheet data to power apps, and much more. All without a backend.  sponsored 

Melody
A language that compiles to ECMAScript regular expressions, while aiming to be more readable and maintainable.

Nitric
A serverless framework to build cloud-native apps fast.

Bloggu
Write, schedule, and publish articles directly to platforms like Medium, dev.to and more. Free while in Beta.

monorepo.tools
Everything you need to know about monorepos, and the tools to build them.

DevEnv
A note-taking app for developers with a simple UI and ability to share notes with others.
 
Quickwit
A fast and cost-efficient distributed search engine for large-scale, immutable data.

Browsers.page
Show users their browser name and version, matched with a list of the browsers you support as a company or project.

WAPM
A WebAssembly package directory. Kind of like npm but for WebAssembly apps and libraries.

RegEx Library
A curated list of useful regular expressions for different programming languages.

National Park Typeface
A typeface designed to mimic the service signs that are carved using a router bit and posted in national parks in the US.

Discuzz
An open-source commenting system that uses Firestore for data storage and Firebase Auth support for multiple sign-in methods.
 

Commercial Tools and Classifieds

These are affiliate links, paid classifieds, and curated commercial apps (i.e. not free, not open source, limited free plan, etc).

Waxbite - Convert a newsletter feed to audio and listen on the go.

Hawk - App error and overall health monitoring.

Bytes - A JavaScript newsletter that's informative and entertaining. ad 

Explain Code - A code explanation platform for code that's hard to grasp.

Material Dashboard - A premium Material-UI & React admin template. ad 

Sheet Monkey - Send HTML form submissions to Google Sheets.

ChangeLog - A change log service to build your product in public.
 

A Tweet for Thought

It turns out, all those Wordle emojis are terrible for screen readers.

 

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

Here's a huge list of Computer Science courses with video lectures.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:
PayPal.me  /  Patreon  /  GitHub Sponsors  /  E-Books  /  $5 Tip  /  $1 Tip