Web Tools #367 - Front-end Frameworks, Testing Tools, Uncats

In case you missed it, a couple of new String methods have been added in ES2017 and ES2019 and they all have pretty decent browser support.

The best way to describe them, of course, is by some code examples:

The most straightforward of these are the trimStart() and trimEnd() methods. Those do exactly what they imply: they remove any spaces from the start or end of a given string.

The other two methods, padStart() and padEnd() are not quite as clear. At first glance, you might think the passed in integer value (first argument) will add that number of the character used for the second argument. But that's not the case. The integer represents the desired total number of characters in the string after it is 'padded'. This means if your string is already higher than the number specified, then it won't add anything. Also, if you omit the second value, the pad methods will use a space character as the default:

As you can see, the first example wants to make the string 6 characters long. But it's already longer than that, so there are no characters added so it stays the same. The second example uses the space character to 'pad' the string up to a length of 15 (thus adding 7 spaces to the 8 existing characters).

You can try out all the examples in this CodePen.

The only major flaw in browser support is the fact that Edge uses nonstandard trimLeft() and trimRight() (instead of start/end), but that should be simple enough to patch up if you care about Edge support.

Now on to this week's tools!

Front-end Frameworks

Full Stack Starter Kit
A GraphQL-first full-stack starter kit built with Node, React, and powered by TypeScript.

PatternFly
An open source design system with dozens of components and layouts to choose from, built teams to build consistent UIs.

Wiki.js
Wiki software with an intuitive interface, for building documentation pages.

Industrial UI
A React toolkit that features 45+ components and is mostly meant for building "Shop Floor" apps that run in modern browsers on "Industrial Tablets".

FAST
From Microsoft, a suite of tools to build enterprise-grade websites, applications, components, design systems, and more.

Halfmoon
Front-end framework with a built-in dark mode, designed for rapidly building beautiful dashboards and product pages.
 
Material Kit React
React UI kit based on the popular Material UI project.

Windows 95 UI Kit
30+ responsive components for building interfaces with a old Windows OS look.

Deque Cauldron
A fully accessible HTML, CSS, and JavaScript front-end framework for creating web and mobile applications.

electron-typescript-react
An Electron boilerplate built with TypeScript, React, Jest, and ESLint.

react-boilerplate-cra-template
The official Create React App template of React Boilerplate.

Plume CSS
A lightweight and highly themeable CSS micro framework, specifically designed for small or medium-sized projects.

50% Off Courses by Wes Bos (Master Packages!):
 

 

Testing and Debugging Tools

Olifant
Create service monitors in seconds. This tool will automatically notify you if a service is unreachable.

JSON Master
Chrome extension that detects JSON responses in Chrome and converts them to a beautiful, lightweight interface.

Mocklets
An HTTP-based mock API simulator that helps simulate APIs for faster parallel development and more comprehensive testing.

Screpy
A web analysis tool powered by Google Lighthouse that allows your team to monitor and analyze all pages of a website in one dashboard.

TestCraft
A test automation platform based on AI technology for regression and continuous testing, as well as monitoring of web applications.

SimpleOps
Performance monitoring simplified.  Receive alerts and insights in real time on website health and performance.

Hosting Checker
Enter a URL and this tool will tell you where the page is hosted.

Perf Track
A project that aims to track and measure the performance of sites that use popular JavaScript frameworks and libraries.

Matchstick
Visually compare your code and designs. Compare your mockups with your live website to pinpoint any missing details.

logs-js
JavaScript client for Apex Logs with support for Node, Deno, and the browser.

uvu
An extremely fast and lightweight test runner for Node and the browser.

Quik
Internet Explorer as a service that runs a modern browser headlessly and draws a "canvas" of your site back to end users, for testing in old version of IE.

The Uncategorizables

Free Faces
A curated collection of collection of free fonts from various platforms around the web.

NextAuth.js
A complete open source authentication solution for Next.js applications.

Astrofox
A powerful motion graphics tool that lets you turn amazing music visualizations into videos.

HTTPie
A command-line HTTP client that comes with JSON support, syntax highlighting, persistent sessions, wget-like downloads, plugins, and more.

Feedback Fish
Collect issues, ideas, etc. with a simple widget that you can add to your site. Email alerts notify you of feedback and you can view them in a dashboard.

Slate
Beautiful static documentation for your API.

Datanews
A News API with flawless access to news information gathered from thousands of sources scattered all over the web.

Magic
Enable customizable, future-proof, passwordless login with a few lines of code.

Poker API
A simple JSON poker API for calculating the winning hand in a game of Texas hold 'em.

Geocodify
Provides a geocoding and spatial database API to power your web and mobile applications.

Keyword Generator
A keyword generator that lets you produce every possible combination and permutation of your keywords to create thousands of longtail keywords that you can upload to your Google Ads campaign.
 

A Tweet for Thought

I'm clearly not the only one who forgot that my computer mouse used to be built like this.
 

Got a Tool Suggestion?

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

Teach Yourself Computer Science, recently updated for 2020, is a useful resource for those looking to learn CS as a hobby without having to make a formal time or monetary investment.

Thanks to everyone for subscribing and reading!

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