Issue #470 (JS Classes, CSS/HTML, Build Tools, Media)07/21/22
For this week's intro, let's take a look at JavaScript classes, a feature that was added way back in ES6 and with some incremental improvements since then. The concept of classes has been mimicked in JavaScript long before ES6 but the native class feature makes it easier to write class-based syntax that's common in many programming languages.
Class syntax in JavaScript looks like this:
|
class Animal {
constructor(name) {
this.name = name;
}
printName() {
console.log("This animal is a " + this.name);
}
}
const myAnimal = new Animal("Quokka");
// Output: "This animal is a Quokka"
myAnimal.printName();
|
The different parts of the syntax are as follows:
- The class keyword indicates that the function I'm defining is a native JavaScript class. The example above is a class declaration (like a function declaration) as opposed to a class expression.
- The constructor() method inside the class body is a special method of every class that creates and initializes an object instance of that class. The constructor() method can only appear once in the class body.
- Instance properties are defined inside the constructor() method via the this keyword. In the code above, this.name is an instance property of the class.
- A class cannot be called like a function (e.g. Animal()). It can only be invoked using the new keyword.
- All methods defined inside the constructor (e.g. the printName() method above) are added to the class's prototype. When the printName() method is called on the Animal instance (which I've called myAnimal()), it accesses that method on the class's prototype. All future instances of this class would access the same method.
The code above is a really simple example using a JavaScript class with just the basics. If you're new to classes, you can use this CodePen demo to fiddle around with the code. Try adding new methods, creating new instances of the class, or changing and accessing the instance properties.
And if you're wondering about comparing native JavaScript classes with the old method of mimicking classes in ES5, you might want to read this Stack Overflow thread that explains why classes aren't just syntactic sugar. I've also implemented the same code from above using ES5-style pseudo-classes, which you can fiddle around with in this CodePen.
Now on to this week's tools!
|
CSS and HTML Tools
Meet Filestack: The All-In-One File Handling Service
Filestack is the premier service designed to meet all your file handling needs, from improving upload speeds by a factor of 3.6 to providing swift and secure delivery. Give your app an instant upgrade today and download for free. SPONSORED
css-browser-support
JavaScript API to query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentages.
CSS3 Maker
A one-stop set of online tools to generate CSS for gradients, shadows, transforms, filters, @font-face, transitions, animations, and more.
Tailwind Cheat Sheet Extension
Chrome extension that adds a Tailwind CSS cheat sheet for easy access to view, search for, and copy/paste all of Tailwind's classes, with optional dark mode.
Paper Prototype CSS
A CSS framework designed to make components on a page appear like a paper prototype.
Min-Max-Value Interpolation
Online tool for when you don’t need a whole fluid-scale token system but a single interpolation between two values in a viewport range.
Tailwind DX
A Chrome DevTools extension that adds smart tools for working with projects using Tailwind CSS, so you can edit Tailwind classes on the fly just like regular CSS in DevTools.
 |
little-planet
A custom HTML Element (i.e. Web Component) that renders an interactive view of a panoramic photo.
Typed.css
A fully functional and flexible SCSS mixin that renders an animated CSS text typing effect with no JavaScript.
LCH Colour Picker
An online demo showing how LCH color in CSS works. Slide the sliders to see the syntax comparison between LCH and sRGB.
CSS Bed
An older project that showcases 'classless' CSS frameworks, each of which you can test right on the page. Would be nice to see this updated with some recent additions to this space.
|
Build Tools, Bundlers, etc.
Alternative Assets
What is an NFT? Alternative Assets demystifies and explains the hottest unique investment ideas out there. Collectibles, NFTs, Wine, Websites, even LEGOs. They don't just track the markets, they smash the markets. SPONSORED
Histoire
A new way to write stories. Fast and beautiful interactive component playgrounds, powered by Vite, with a customizable interface.
CodeGuard
A code obfuscator service with support for JavaScript and Python. Enter a raw Gist or GitHub repo link to obfuscate.
lockfile linting
Lint an npm or Yarn lockfile to analyze and detect security issues via predefined security policies.
bundlejs
Online tool to quickly check the size of an npm package bundle. Type the name of one or more packages to add to the 'bundle', then 'build' to view the size.
 |
Bun
A fast all-in-one JavaScript runtime to bundle, transpile, install and run JavaScript and TypeScript projects. Includes a native bundler, transpiler, task runner, and npm client built-in.
moon
A repository management, organization, orchestration, and notification tool for JavaScript-based projects, written in Rust.
vite-vercel
Add middleware powered by Vercel Edge Functions to your existing Vite project.
ProtoScript
A runtime and code generation tool for JavaScript and TypeScript based on Google's protocol buffers (a method for serializing structured data).
pkg.land
An online search engine to find alternatives to npm packages. Just enter the name of a package and the tool will display recommendations.
qnm
A simple CLI utility for querying the node_modules directory to be able to track down bugs and conflicts faster.
react-native-esbuild
A fast and configurable bundler and development server for React Native, using esbuild.
Webpack App Starter
An opinionated but simple starter for building front-end projects with webpack.
💡 This week in VSCode.Email:
- More customization for the cursor in VS Code
- A VS Code theme for night workers
- Boost your dev productivity with VS Code Snippets
Check the archives for the latest issue, and subscribe for more!
|
Media Tools (SVG, Audio, Video, etc.)
Alternative Assets
What is an NFT? Alternative Assets demystifies and explains the hottest unique investment ideas out there. Collectibles, NFTs, Wine, Websites, even LEGOs. They don't just track the markets, they smash the markets. SPONSORED
SVG Spinners
A collection of 40+ animated loading spinners in SVG format that includes many customary loading animations along with some other unique ones.
Super Designer
A collection of free design tools to create unique backgrounds, patterns, shapes, images, and more with just a few clicks.
Open Graph Image as a Service
Serverless service that generates dynamic Open Graph social images that you can embed in your HTML meta tags.
Pixelarticons
470+ open-source pixel-art style icons, in one color and made with a 24x24px grid.
 |
Heazy
A platform to build vector (SVG) assets. Includes customizable templates, React/JS snippets for the assets, and the ability to save assets to your account for later use.
math.gl
A collection of math modules for Geospatial and 3D/WebGL visualization use cases.
Shaka Player
An open-source JavaScript library for adaptive media. It plays adaptive media formats (such as DASH and HLS) in a browser, without using plugins or Flash.
SND
A free set of UI sound assets designed to fit components used in many modern user interfaces. Click around the page to try out the sounds.
reagraph
A high-performance network graph visualization library built in WebGL for React.
Untitled UI Icons
A set of 1,100+ line-based Figma icons that have a clean, consistent, and neutral look. Premium version adds an additional 3,000+ icons.
PeerLite
A lightweight WebRTC browser library that supports video, audio, and data channels.
|
Commercial Apps and Classifieds
These are commercial apps (i.e. not free or limited free plan), paid classifieds, and affiliate links.
Ingradients – A collection of hand-picked mesh gradients (fig, svg, png, jpg).
upload – File and image CDN for developers with scalable cloud storage.
Emerging Tech Brew – A 5-minute read, your guide to the future of tech. AD 
Serverless SaaS – A Next.js/Tailwind starter kit for building SaaS projects.
Koyeb – A developer-friendly serverless platform to deploy apps globally.
FontVisual – A web-based font preview tool made for designers.
|
A Tweet for Thought
After Microsoft announced that June 15, 2022 would mark end-of-life status for Internet Explorer, someone in Korea built a real tombstone for the browser with an all-too-familiar epitaph.
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 particularly think this idea is actually practical, but I like the ingenuity of Forebruary, a wall calendar that has a moveable frame so you never have to replace it like you would a paper calendar.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
