Web Tools Weekly
What a Tool!

Issue #364  (Recent Writing, Testing, Text Editors, Uncats)07/09/20


Advertisement
The Most Powerful CI/CD Tool
Automate your development process quickly, safely, and at scale.
Sign Up
CircleCI

In addition to this newsletter, I've done some writing for a few different publications in recent months, so I thought I would share some of those in this week's intro:

  • An Introduction to Parcel.js, the No-Config Web Application Bundler
    This was my foray into Parcel, which many have found to be the best go-to web app bundler due to how good it is out-of-the-box (hence why it's billed as "no-config").
  • How to Balance Growth vs Profit When You’re a Small Newsletter
    This is an article I wrote for Paved (an advertising platform that I use for some of the ads in this newsletter). The article is pretty transparent about my history with this newsletter and its growth. If you run a small newsletter yourself, I'm sure you'll find it interesting.
  • Accessible and Keyboard-Friendly Hamburger Menu + Slide Out Navigation
    This one was posted on my own website and it's mainly a demo with a little bit of explanation. My goal with this was to create a hamburger menu toggle that was as accessible as possible. I even got some advice in the comments from a screen reader user that helped make it a little better. That's always pretty cool to hear from the users that are the main focus of the article.
  • Front-end RSS Feeds, 2020 Update
    This was an update to an older GitHub repo that needed a refresh. It's a categorized list of RSS feeds for front-end developers.
So that's more or less what I've been up to outside of this newsletter in recent months, so I've been keeping as busy as possible during this mostly-home time.


Now on to this week's tools!
 

Testing and Debugging Tools

The Most Powerful CI/CD Tool
Automate your development process quickly, safely, and at scale. sponsored 

browserless
Enterprise-level headless browser platform that scales your automation.     Puppeteer, Selenium, powerful REST APIs, dashboards + monitoring, and more.

Asayer
Helps front-end developers reproduce bugs, aggregate errors, and monitor the performance of their web applications.

tape
Tap-producing test harness for node and browsers.

Speedlify
Benchmark sites over time. After you make a fast web site, keep it fast by measuring it over time.

Speedlify

bundle-wizard
Command line utility makes it simple to create visualizations of the JS bundles that were fetched for any specific page (or "entry point") of a web app.

web-vitals-reporter
A tiny (800 B) utility to simplify reporting of Web Vitals (Google's new healthy website metrics).

eslint-plugin-import
ESLint plugin that intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.

Cypress localStorage Commands
Extends Cypress' cy commands with localStorage methods. Allows preserving localStorage between tests.

Browservice
Browser as a Service. A web "proxy" server that enables browsing the modern web on historical browsers. It works by rendering the browser viewport into images, which are then shown by a JavaScript application running on the client browser.

PageWatch
Automatic visual testing for every page. Find layout errors, spelling mistakes, slow pages, broken links, and more.

testdouble.js
Now at version 3+. A minimal test double library for test-driven development with JavaScript.

Playwright
Microsoft's a Node library to automate Chromium, Firefox, and WebKit with a single API is now at version 1+.

Text Editors, IDEs, etc.

Phonk
A self-contained creative scripting toolbox for new and old Android devices.

Foam
A personal knowledge management and sharing system inspired by Roam Research, built on Visual Studio Code and GitHub.

Beacon.nvim
A plugin for Vim or Neovim that causes the cursor to flash to make it more visible when it jumps to a new location.

Snack
Lets you to run complete React Native projects in the browser. No download required.

Glamorous Toolkit
Open source, all-in-one development environment that includes a live notebook, flexible search interface, fancy code editor, software analysis platform, and data visualization engine.

Vimwiki
A personal wiki for Vim made up of a number of linked text files that have their own syntax highlighting.

SnipperApp
A native macOS snippets manager with a modern, lightweight GUI, syntax highlighting, and Markdown support.
 
SnipperApp

ngrok for VSCode
A VSCode extension to control ngrok (the localhost tunnel tool) from the command palette.

VSCodium
Open source binaries for VScode, in order to get around the fact that Microsoft's binaries are not MIT-licensed and contain telemetry/tracking.

4coder
Now at version 4+. A modern text editor based loosely on Emacs, to maximize the power and ease of customization with high priority on performance and portability.

Kite
AI coding assistant for Python and JavaScript, integrated with most popular code editors (VS Code, Sublime, Atom, IntelliJ, and more).

The Uncategorizables

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

Search by Muzli
A search engine for design inspiration. Search by color, keyword, style, etc.

Design Lint
A free plugin for Figma built to help you find and fix errors in your designs.

Capistrana
Allow your users to record their issues in-browser. Great for product managers, developers, customer success specialists, and help desk teams.

345Tool.com
A whole slew of formatting tools, minifiers, generators, decoders/encoders, and conversion tools for developers.

Zettlr
A modern markdown editor with multiple language support, multiple themes, dark mode, code highlighting, export features, and lots more.

Super Productivity
A free to do list and time tracker for programmers and designers.

Super Productivity

Maildown
Send beautiful transactional emails programmatically via a simple REST API.

Flow
Now at version 1.7. Professional UI animation software for iOS, Web, and Lottie. Import from Sketch, animate with a powerful timeline editor, and generate production-ready code.

VisualSitemaps
Automatically generate beautiful visual sitemaps + high-resolution screenshots of any public or private website, to perform in-depth site audits for UI, UX, SEO, and marketing research.

Openship
E-commerce automation as a service. An operations management tool for e-commerce shops. It allows you to tap into Shopify's APIs and determine how orders are routed and fulfilled.

userTrack
A single self-hosted platform to replace your third-party analytics.

DecentDrops
Directory that automatically filters through thousands of dropped domains to show you brandable, pronounceable, and potentially valuable domains.

PayID
The Universal Payment Identifier. A better way for your users to send and receive payments.

A Tweet for Thought

When a new-hire developer asks "How do you deploy?"
 

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

If you'd like to document everything you do via time-lapse screenshots on your system, you might want to check out Makerlapse. The repo includes links to YouTube videos as examples of what you can do.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris