Issue #411 (Polymorphism, Frameworks, Testing, JS Utils)
Ukpaiugochi, writing for the SessionStack blog, has put together exactly that:
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."
- Ad-hoc polymorphism
- Sub-type polymorphism
- Parametric polymorphism
Then she finishes by explaining the benefits of using the technique.
Now on to this week's tools!
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
Vite Edge Side Rendering (ESR) framework for Vue and React. ESR is like SSR except in CDN nodes instead of actual servers.
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.
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.
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.
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.
A starter for projects using React, Nest.js, and MySQL, with continuous integration and AWS deployment.
Testing and Debugging Tools
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.
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.
Chrome extension that provides debugging and profiling capabilities for Angular. Includes support for Angular 9 and above, with Ivy enabled.
Open source tools to track Web Vitals metrics, to help you identify parts of your website that degrade your Web Vitals scores.
A really detailed and well-done interactive exploration of how DOM events work.
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.
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").
Statistically rigorous benchmark runner for the web. Uses repeated sampling and statistics to reliably identify even the smallest differences in timing.
A high performance visual regression tool to catch UI regressions.
Open source Airtable alternative. A no-code platform that turns any database into a smart spreadsheet.
A concise API for exploratory data visualization, to help you quickly visualize tabular data.
A toolkit for building presentation slides that's developer-friendly (Markdown-based, built-in syntax highlighting, themeable, diagrams, and lots more).
A headless, collaborative, framework-agnostic WYSIWYG editor framework.
A triple-linked lists based DOM implementation.
Offload tasks to a pool of workers on node.js and in the browser.
A theme-less web component to filter visible child elements based on form field values.
A better fetch API that works in Node, the browser, and Web Workers.
A lightweight, composable pub/sub state manager inspired by Immer and Redux, with full TypeScript support.
A no-dependency, form validation library. This is an older library but has been recently rewritten in TypeScript and ES6.
On the Release Radar:
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 all for subscribing and reading!