Issue #503 (Factory Pattern, CSS/HTML, Git/CLI, Uncats)03/09/23
Sharpen your Math, Data, and Computer Science Skills
Whether you’re a professional looking for an edge in your career or a lifelong learner sharpening your skills, Brilliant is the best way to learn the concepts driving our modern technological world.
What is Brilliant? Brilliant is the best way to learn key concepts in math and computer science through fun, interactive problem solving for learners of any level.
What else?
- Explore thousands of lessons on topics ranging from AI and neural networks to data analysis.
- Brilliant’s interactive, bite-sized approach is a more effective way to learn. You can try all of Brilliant’s lessons free for 30 days – plus, they add new content monthly.
Join over 10 million people learning on Brilliant.
Start your 30-day free trial today!
|
One JavaScript design pattern that you hear about from time to time is the Factory pattern, also referred to as a Factory function. The basic idea of a Factory function is implied in the name itself: Just like a real-world factory, the Factory function receives input and produces objects based on a predefined set of instructions.
In an article from 2017, Eric Elliot nicely and succinctly explains a key ingredient (or better worded, lack of an ingredient) of Factory functions:
"A factory function is any function which is not a class or constructor that returns a (presumably new) object. In JavaScript, any function can return an object. When it does so without the new keyword, it’s a factory function."
These types of functions are what you might call a bare-bones way to build objects without the new keyword and without JavaScript's class feature.
For a rudimentary example of a factory function, take the following code that demonstrates a 'factory' that builds shapes:
|
function createShape(type) {
switch (type) {
case 'square':
return { type: 'square', sides: 4 };
case 'circle':
return { type: 'circle', sides: 0 };
case 'triangle':
return { type: 'triangle', sides: 3 };
default:
return { type: 'unknown', sides: null };
}
}
const square = createShape('square');
const circle = createShape('circle');
const triangle = createShape('triangle');
const flugelbinder = createShape('flugelbinder');
|
In this 'factory', I can pass in any shape name and the factory will determine what the shape's properties are based on the name. And I also account for the possibility of an unknown shape. You can try out the code in this demo, which additionally logs each of the "shapes" in the console.
The benefits of this kind of pattern should be evident. By encapsulating the creation logic inside a factory function, you can easily create new objects of the same type by calling the factory function with different parameters. And of course, changing how the objects are created is as simple as changing a single function.
If you had never heard of Factory functions before this, you may realize that you've used Factory functions without even knowing it. It's a nice way to produce objects without using any of the syntax normally associated with objects, object instances, and so on.
If you want to go more in-depth on this subject, Addy Osmani's coverage of the subject is great as is the full article linked above by Eric Elliot. The final part of that article quotes programmer John Carmack:
"Sometimes, the elegant implementation is just a function. Not a method. Not a class. Not a framework. Just a function."
Factory functions certainly work well in this capacity.
Now on to this week's tools!
|
CSS and HTML Tools
Favpie
A JavaScript-based CLI that enables you to automatically generate favicons and a web app manifest file for any project with a single npx command.
ultrahtml
A small JavaScript library, compatible with any JavaScript runtime, that includes a parser for HTML-like syntax, a built-in AST walk utility, sanitization, HTML templating, querySelector, querySelectorAll support, and more.
tints.dev
A color palette generator and API for Tailwind projects that goes beyond Tailwind's native abilities, to generate custom and diverse 10-color palettes from a single color value.
Sharpen Your Math, CS, and Data Skills in 15 Minutes a Day
For professionals and lifelong learners alike, Brilliant is one of the best ways to learn. The deets: Bite-sized interactive lessons make it easy to level up in everything from math and data science to AI and beyond. Join 10+ million people building skills every day. SPONSORED
Named Colors Wheel
An interactive color wheel that only uses named web colors (i.e. colors that have a valid name/phrase that can be used as the value in CSS, e.g. "firebrick" or "lemonchiffon").
project2pug
CLI tool to convert an HTML template to templating using Pug as the view engine.
TypeTrials
A free platform to interactively test and experiment with fonts. You can upload your own font or use one of the two dozen or so provided. Allows you to fiddle with variable font values, OpenType features, and more.
Scrollbar.app
A unique CSS generator for producing the code needed for all the parts of a custom scrollbar solution with CSS. The page itself is a live interactive demo that changes the scrollbar values on the fly.
 |
Fonty.io
Enter a website URL and this tool will analyze the fonts used on the site and display them for you to view.
Unicopy
A categorized quick reference for copying/pasting the most common special characters, divided into copyright, lines, arrows, triangles, and circles.
Text Spacing Editor
A Chrome extension to adjust the text spacing on a page (e.g. line height, letter spacing, word spacing, and paragraph spacing) in line with WCAG conformance standards.
|
Git, GitHub, and CLI Tools
Clack
A JavaScript library that provides unstyled, feature-rich components designed for building command-line tools, with options for pre-styled components as well.
Gist Editor
A GitHub Gist manager and notepad for notes and code snippets, stored locally in the browser.
GitBreeze
A native Git GUI for Mac, Windows, and Linux. It has a simple UI, with features for enhanced commits and previews. The free version is limited to one repository at a time.
Don’t Just Read The News—Make The News
Looking for an edge in business? Look no further than The Information. Their team of award-winning journalists provide exclusive insights into tech and finance, with original reporting, big interviews, and more that you won’t find anywhere else. Subscribe now and save 25%. SPONSORED
Drift
A self-hostable clone of GitHub Gist that includes GitHub-flavored Markdown, user auth, syntax highlighting, private, public, and password protected posts, and lots more.
AI Commits
A CLI that writes your Git commit messages for you with AI by running `git diff` to grab all your latest code changes, then determining the message via OpenAI's GPT-3 technology.
aws-cost-cli
A CLI tool, with Slack integration, to perform cost analysis on your AWS account.
AnalyzeMyRepo
An online tool to analyze any GitHub repository and get in-depth insights into adoption, contributions, diversity, community governance, and more.
 |
Gitinerary
A GitHub app that monitors and reports activity inside your codebase to provide real-time progress reports without additional hassle.
OpenInTerminal
A Finder toolbar app for macOS to open the current directory in Terminal, iTerm, Hyper, or Alacritty.
AskGPT
A CLI tool that adds ChatGPT functionality to your terminal, with the option to also self-host it as a Telegram bot.
|
The Uncategorizables
Flargd
A fast, edge-based feature flag solution for modern applications that you can self-host on Cloudflare Workers, and use with edge or serverless apps, and more.
FusionAuth
An authentication and authorization solution with a self-hosted free plan that covers the core authentication needs for most apps.
Cronicle
A multi-server task scheduler and runner, with a web based UI, that handles scheduled, repeating, and on-demand jobs, targeting any number of worker servers, with real-time stats and live log viewer.
Lago
A self-hosted, scalable and modular architecture for metering and usage-based billing for your products and services.
Don’t Just Read The News—Make The News
Looking for an edge in business? Look no further than The Information. Their team of award-winning journalists provide exclusive insights into tech and finance, with original reporting, big interviews, and more that you won’t find anywhere else. Subscribe now and save 25%. SPONSORED
KnightOwl
A middleware library to protect your APIs built on express-graphql servers, combined with a web app monitor to give observability to its activity.
TabFS
A browser extension that mounts your browser tabs as a file system on your computer, with primary support for Chrome on Mac, and some support for Firefox and Safari.
Getlog
An attractive and free changelog for your product that takes just minutes to set up.
Figma to Webflow
A Figma plugin to convert static Figma designs into clean, production-ready HTML and CSS for Webflow (the popular no-code website builder).
Plural
Build and maintain cloud-native and production-ready open source infrastructure on Kubernetes.
 |
aitools.fyi
An online directory to search for AI tools, filterable by category, keyword, free vs. paid, and more.
Waldo
A research tool that attempts to make search results faster and more optimized, with better information in result previews compared to top search engines.
|
|
Commercial Apps and Classifieds
These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!
|
Supertweak – Chrome extension to inspect, tweak and copy Tailwind styles inside your browser.
|
|
JS E-Books Bundle – 4 e-books featuring more than 300 front-end coding tips and demos. AD
|
Metalmorphism – A library of high-quality metallic UI components, based on MetalliCSS framework.
|
|
Emgrid – Add a privacy-friendly comment section to your blog, with Markdown support, social auth, and dark mode.
|
Tech Brew – A 3-times-a-week newsletter with the latest tech news impacting you and your future. AD
|
|
Photoshot – An AI-based avatar generator that produces avatars with unique styles.
|
Torchlight – An API for syntax highlighting, powered by the VS Code engine.
|
|
|
A Tweet for Thought
Here's a creative way to offer free drinks, despite the minor syntax errors that some pointed out.
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...
If you're interested in the history of CSS, or maybe you have a presentation where you'd like to include some unique facts about how CSS came to be, you'll enjoy CSS Timeline, an extensive, detailed, and filterable chronological account of the CSS's history.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
