Web Tools #411 - Frameworks, Testing Tools, JS Utilities, Polymorphism

Advertisement

The concept of polymorphism in JavaScript is one that I've heard thrown around for a number of years now. It's definitely a topic that can't be considered fully in a brief newsletter intro like this, so it's nice to have a full article to help you along if this is a topic you've wanted to take a deep dive into.

Ukpaiugochi, writing for the SessionStack blog, has put together exactly that:

• How JavaScript works: 3 types of polymorphism

Here are a few snippets from the article if you only want a basic overview of polymorphism, but be sure to check out the full article if you want more.

"In real life, a woman can have different roles. She can be a mother, an employee, and a wife at the same time. The same woman will perform different functions depending on her particular role at the moment. This is the concept of polymorphism, being able to take on different forms."

Good introduction and something we can easily relate to. She also points out that polymorphism is important in programming as a core feature for object-oriented programming, continuing with the same illustration:

"For instance, while the woman is at work as an employee, she’s very unlikely going to take on the characteristics of a mother and vice versa when she’s at home as a mother."

Moving on to a concrete example, she explains that we might write a program to calculate the area and perimeter of shapes. But this can't be done in a standard way for different shapes (e.g. circle vs. square).

"So, we’ll need to define the different shapes as sub-classes or derived classes of the base class shapes. Therefore, we’ll have a subclass circle, square, trapezium, polygon which will all have their methods and different parameters. What we have done above is polymorphism."

She goes on to discuss how JavaScript handles polymorphism, which is especially useful if you come from another programming language that handles it in a different way.

She also dives into the three major types of polymorphism in JavaScript:

• Ad-hoc polymorphism
• Sub-type polymorphism
• Parametric polymorphism

Then she finishes by explaining the benefits of using the technique.

As you'll notice in the intro and at the bottom of the article, this is just one of more than two dozen articles "dedicated to exploring JavaScript and its building components." So there's lots to read if you want some practical and in depth JavaScript-based material. The only flaw in all of this is that it's on Medium, one of my least favourite platforms!

Now on to this week's tools!

Front-end Frameworks

Learn How Remote Pair Programming Can Increase Your Team's Efficiency
Suddenly, the future of work materialized, and when your entire team is working from home, pair programming is not only possible but extremely valuable. Preparing yourself and your team for remote pairing will help prepare you for the future of work.  sponsored 

Vitedge
Vite Edge Side Rendering (ESR) framework for Vue and React. ESR is like SSR except in CDN nodes instead of actual servers.

Choc UI
A set of accessible and reusable components built with Chakra UI, a popular component library for React.

Argon Design System
A beautiful open-source design system for Bootstrap 4 built with over 100 individual components, customizable via Sass files.

Material Tailwind
An easy to use components library for Tailwind and Material Design that features multiple React components, all written with Tailwind CSS classes and Material Design guidelines.

BootStarters
A set of free templates for building projects with Bootstrap 5 and Material Design.

Next.js Notion Starter Kit
Deploy your own Notion-powered website in minutes with Next.js and Vercel.

UI Lib
A gallery of free and premium admin dashboard templates, UI kits, design systems, and landing pages.

React Bulma Components
React components for Bulma, compatible with most used React frameworks (Gatsby, CRA, Next.js).

Tailwind Admin Template
An admin dashboard template built with Tailwind and Alpine.js, inspired by designs in a set of Dribbble shots.

Box UI Elements
A UI component library based on Box, the popular cloud collaboration platform, to allow developers to add features of the main Box web application into their own applications.

starter-reactjs-nestjs-mysql
A starter for projects using React, Nest.js, and MySQL, with continuous integration and AWS deployment.
 

Testing and Debugging Tools

Hoverify
Not free but this is a browser extension that includes a suite of tools for development and debugging (inspector, color eyedropper, screenshot tool, and more).

axe Accessibility Linter
VS Code extension to do accessibility linting for HTML, React, Markdown, and Vue files.

Odown
Not free. A real-time uptime monitoring service that provides instant alerts via email, Slack, Webhooks, or SMS.

App Support Tools
A collection of HTML, XML, and other data tools commonly used when doing app support or development.

Angular DevTools
Chrome extension that provides debugging and profiling capabilities for Angular. Includes support for Angular 9 and above, with Ivy enabled.

Instant Vitals
Open source tools to track Web Vitals metrics, to help you identify parts of your website that degrade your Web Vitals scores.

DOM Events
A really detailed and well-done interactive exploration of how DOM events work.
 
Mailosaur
Not free. Automate email and SMS tests, like account verification and password resets, using any language or testing framework via an API. Stop email being delivered to customers with fake SMTP servers.

puppeteer-extra
A modular plugin framework for Puppeteer, the headless Chrome Node API.

Next.js Scraper Playground
Build and test your own web scraper APIs with Next.js API Routes and cheerio ("core jQuery for the server").

tachometer
Statistically rigorous benchmark runner for the web. Uses repeated sampling and statistics to reliably identify even the smallest differences in timing.

Aye Spy
A high performance visual regression tool to catch UI regressions.
 

JavaScript Utilities

NocoDB
Open source Airtable alternative. A no-code platform that turns any database into a smart spreadsheet.

lightGallery
A lightweight, modular, JavaScript image and video lightbox gallery plugin, available for React, Vue, Angular, and TypeScript.

party.js
A JavaScript library to brighten up your user's site experience with visual effects (e.g animated confetti, sparkles, hearts, etc.)
 
Observable Plot
A concise API for exploratory data visualization, to help you quickly visualize tabular data.

Slidev
A toolkit for building presentation slides that's developer-friendly (Markdown-based, built-in syntax highlighting, themeable, diagrams, and lots more).

tiptap
A headless, collaborative, framework-agnostic WYSIWYG editor framework.

linkedom
A triple-linked lists based DOM implementation.

workerpool
Offload tasks to a pool of workers on node.js and in the browser.

Filter Container
A theme-less web component to filter visible child elements based on form field values.

ohmyfetch
A better fetch API that works in Node, the browser, and Web Workers.

Vegemite
A lightweight, composable pub/sub state manager inspired by Immer and Redux, with full TypeScript support.

FormValidation
A no-dependency, form validation library. This is an older library but has been recently rewritten in TypeScript and ES6.

On the Release Radar:

• DOMPurify - XSS sanitizer now at v2+
• CodeMirror - WYSIWYG editor now at v6+
• billboard.js - Charting lib now at v3+

A Tweet for Thought

This Tweet from last year shows how Kristy Viers, who is visually impaired, uses an iPhone.

 

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

ICYMI, Mozilla is set to launch MDN Plus, "a new premium service with monthly technical deep dives written by industry experts and powerful new features to personalize your MDN experience."

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Subscribe via Reachme to get notified via Twitter, Telegram, or Messenger.

Support this newsletter:
PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books / Buy Me a Coffee