Issue #446 (instanceof, Frameworks, Build Tools, Uncats)02/03/22
Here's a JavaScript operator that's recently new to me: instanceof. Similar to the typeof operator, which returns a string indicating the type of the expression you pass as a parameter, the instanceof operator, according to MDN, "tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object."
I like David Flanagan's explanation in the latest edition of JavaScript: The Definitive Guide. He says:
"The instanceof operator expects a left-side operand that is an object and a right-side operand that identifies a class of objects. The operator evaluates to true if the left-side object is an instance of the right-side class and evaluates to false otherwise."
A simple example is testing an object that was created with JavaScript's Date() constructor:
|
let myDate = new Date();
console.log(myDate instanceof Date); // true
|
As you can see, unlike typeof, and as explained by Flanagan, this operator requires a left-side and right-side to the operator, in addition to the operator itself.
A more customized example, as in the MDN article, would be when you build an object yourself and run a similar check:
|
function Dog(color, breed, age) {
this.color = color;
this.breed = breed;
this.age = age;
}
let myDog = new Dog('brown', 'Dachshund', 4);
let myCat = 'Morris';
console.log(myDog instanceof Dog); // true
console.log(myCat instanceof Dog); // false
|
You can try out both the above examples using this CodePen demo. When using instanceof, if the left side operand is not an object, the expression will return false but if the right operand is not a class of objects, it will throw a TypeError.
I'll leave this again to Flanagan to explain the mechanism here, as he nicely expounds why MDN's definition mentions the prototype chain:
"To evaluate the expression o instanceof f, JavaScript evaluates f.prototype, and then looks for that value in the prototype chain of o. If it finds it, then o is an instance of f (or of a subclass of f) and the operator returns true. If f. prototype is not one of the values in the prototype chain of o, then o is not an instance of f and instanceof returns false."
Now on to this week's tools!
|
Front-end Frameworks
Choosing the Best WYSIWYG Editor for Styling Tables
Tables are perfect for representing data and information in an organized way, and it’s important to choose a WYSIWYG editor that makes the creation and editing experience with these tables simple for the user. Read for FREE! sponsored
AgnosticUI
A set of framework-agnostic UI components that work in React, Vue, Angular, Svelte, or vanilla JavaScript.
PostSrc Tailwind Components
A collection of 50+ Tailwind components divided into about 19 categories of UI elements (cards, alerts, buttons, badges, etc).
Vision UI Free Chakra
A dashboard UI template with 70+ components, built with Chakra UI, the popular accessibility-first React component library.
Wanda
An open-source design system from AI company Wonderflow, with a focus on principles of accessibility and 'form follows function'.
package-skeleton
A template to get a project up and running with Typescript, ESLint, Prettier, Jest, esbuild, and includes automated dependency updates.
React Soft Dashboard
An innovative admin template for Material UI and React with a simple JWT auth flow and 70+ elements (buttons, inputs, navigation, tabs, cards, etc).
Next-JS-Landing-Page-Starter-Template
An opinionated starter for building Next.js projects with Tailwind, TypeScript, ESLint, Prettier, Husky, and more.
UI Components Handbook
Not a single library, but a guide to standardize the design and code of UI components, based on the 39 most popular reference systems.
react-native-ecommerce
A minimal React Native e-commerce app template built with Expo, the cross-platform development kit, with state management via the React Context API and a mock API service for product data.
Next Markdown Blog
A simple static blog template using markdown and Next.js.
|
Build Tools, Bundlers, Deployment, etc.
Build Internal Apps Remarkably Fast with Retool
Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs. sponsored
deno_lint
A blazing fast linter for JavaScript and TypeScript, written in Rust. Currently includes 90 rules you can use.
quick-lint-js
A JavaScript linter available as a code editor plugin that claims to be 110x faster than ESLint by giving you instant feedback as you code.
leanup
A generic CLI to develop, test, and build a SPA/PWA independent of any framework.
DevToys
A native Windows app that's a "Swiss army knife" for developers. Works offline and includes 20+ tools – encoders, decoders, converters, hash generation, text diffing, and more.
Plop
A micro-generator framework that makes it easy for an entire team to create files with a level of uniformity.
parcel-css
From the team behind Parcel, a fast, multi-featured CSS parser, transformer, and minifier written in Rust.
unconfig
A universal solution for loading configurations, to make your tools more generalized across projects and easier to integrate and more flexible.
Turborepo
A high-performance build system for JavaScript and TypeScript codebases that re-imagines build system techniques used by Facebook and Google to remove maintenance burden and overhead.
bramble
A purely functional build system and package manager inspired by NixOS, the Linux package manager.
haya
A dev server and bundler based on esbuild, still in early development and similar in usage to Vite.
On the Release Radar:
|
The Uncategorizables
Build Internal Apps Remarkably Fast with Retool
Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs. sponsored
Marginalia Search
An independent DIY search engine that focuses on non-commercial content, and attempts to show you lesser-known content that mainstream search engines might display.
Unicode Calendar Generator
Includes five different text-only calendars that you can copy and paste.
Reactive Doc
Create interactive documentation with plain text via widgets and code blocks using a simple WYSIWYG editor.
CryptPad
An open-source, self-hostable, and privacy-friendly alternative to Google Drive or MS Office, eight different tools.
Contra
An open-source starter wireframe kit for designers (Figma, XD, Sketch, etc.) with more than 150+ components and 50+ ready to use mobile screens.
lohost
Distributed, decentralized, and anonymized local website hosting. A website client that turns your computer into a server so you can publish your website without using a hosting company.
losevka
An open-source, sans-serif + slab-serif, monospace typeface family, designed for writing code, using in terminals, and preparing technical documents.
Natural Docs
A native Windows, Mac, or Linux app that provides readable source code documentation for 20+ programming languages.
Name Lantern
Online tool to generate available domains name suggestions based on a keyword.
setup-new-computer-script
A script to set up a new system for web development on a Mac. It's specific to a particular company's new developer hires, but you might find it useful for your own setup.
|
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).
PostHog - Self-hostable product analytics platform.
Nhost - Serverless back end service for web and mobile apps.
vscode.email - Newsletter featuring tips/tools for VS code, coming soon. ad
WitHub - Instant app search tool for Mac.
Advanced React - React course with 70+ HD videos across 11+ modules. ad
Shipr - Build and deploy responsive apps to GitHub, Vercel, etc.
CodeToo - Project management SaaS platform for front-end dev teams.
|
A Tweet for Thought
Two definite signs that you're weekend project has gone viral: (1) The NY Times buys you out; and (2) people are crocheting it.
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...
I don't know how I missed this while it was in progress, but you have to check out the results of The Angle Bracket – a Twitter voting competition to determine which HTML tag is best.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
