Web Tools #490 - Math.random(), CSS Tools, Git/CLI, Uncats

Advertisement

If you're doing math calculations in JavaScript, I'm sure you know that there are some quirks to be aware of. Probably one of the most commonly-used math-related JavaScript methods is Math.random(). This comes in handy in a number of circumstances. Many functions have been written that utilizes this basic method, so I'll just go over a few things about it.

First of all, as you might know, Math.random() doesn't return a genuine random number but a pseudo-random number. Also, it returns a random number between 0 and 1. So by itself it's somewhat useless. It almost always has to be used as part of a larger function. But that's ok, because it serves as a building block. JavaScript doesn't need anything more than this.

The other significant thing to note is that the 0 (lower bound) is inclusive, whereas the 1 (upper bound) is exclusive. This means the random number could be exactly zero but it will never be exactly 1. Of course, both are extremely unlikely to be selected.

Probably the most common snippet that uses Math.random() is one that gets a random integer between two numbers, inclusive. You can do this using something like the following:

Try it on CodePen

As you can see, the above function assumes you want all decimal results to round down to the nearest integer. MDN's article has a slightly different version of this snippet, which initially forces the min value to round up and the max value to round down. This is a bit strange to me, so I prefer the above snippet, which always rounds down and does so after the number is obtained.

One final thing about Math.random() is a quote from the MDN article warning against certain uses:

"Math.random() does not provide cryptographically secure random numbers. Do not use them for anything related to security. Use the Web Crypto API instead."

Good warning, especially now as we see more and more apps requiring higher levels of security.

Now on to this week's tools!

 

CSS and HTML Tools

Use Full Power of MySQL with All-in-one IDE
dbForge Studio for MySQL is a full-fledged IDE for database development, management and administration. An intuitive interface and robust functionality let you streamline all database routines on MySQL and MariaDB and get rid of errors.     SPONSORED  

fontaine
A utility that provides an automatic font fallback, calculated based on font metrics, to help minimize cumulative layout shift (CLS).

Invisible Characters
50+ ready-to-copy-and-paste "invisible" characters (like the zero-width space), along with their Unicode code point values.

Metatags API
A dead-simple API to retrieve the title, description, and social image meta tags for a URL, completely free and open-source.

Pokémon Cards Holographic Effect in CSS
A collection of advanced CSS styles to create realistic-looking effects for the faces of Pokémon cards.

Wordmark
Enter a word or phrase and this tool will display the text using all the fonts currently installed on your computer (with permission for downloaded fonts).

Randoma11y
Online tool that generates a random, but fully accessible color combination for background color and foreground text color.

Media Chrome
A set of custom elements (web components) for making audio and video player controls that look great in your website or app.

CSS Clothoid Corners
Online tool that generates CSS using the clip-path property, to give elements a more fun rounded corners look (similar to iOS app rounded corners).

uiGradients
A gallery of beautiful color gradients for inspiration. You can filter by color selection then copy individual colors or the full CSS.

Chroma
Browser extension that provides a set of color tools including an eyedropper, color picker, and palette generator.
 

Git, GitHub, and CLI Tools

The Faster Results Digital Journal
Backed by insight from the world's top institutions of learning, the Faster Results Digital Journal is packed with practical tips, inspiration and the proven structure you need to soar to new heights in your personal and professional life.   SPONSORED  

GPT3 Powered CLI
Get answers for CLI commands from GPT3 right from your terminal.

llama
A terminal-based file manager with fuzzy search, written in Go, that serves as a simpler and faster replacement for standard terminal file navigation.

aerc
An email client that runs in your terminal that's highly efficient and extensible.

gitlapp
A native iOS client for GitLab that helps you with project management, tackling issues, and staying on top of your TODOs with notifications — across different instances of GitLab.

Configure AWS Credentials
A GtiHub action to configure AWS credential environment variables for use in other GitHub Actions.

DVC
An open-source version control system for machine learning projects, built to make ML models shareable and reproducible and designed to handle large files, data sets, machine learning models, and metrics,. as well as code.

Directory Serve
A CLI library for sending and receiving files from your Android and iOS devices.

UNGH
A simplified, cached, and anonymous layer that allows you to have unlimited access to GitHub API.

Terrateam
A CI/CD platform that enables your entire team to make Terraform changes with GitHub pull requests. The free plan is pretty decent.

Schnell Console
A terminal for Windows, Mac, and Linux that also offers a browser extension for running commands from web searches and a VS Code extension to run files in the app.
 

The Uncategorizables

The Faster Results Digital Journal
Backed by insight from the world's top institutions of learning, the Faster Results Digital Journal is packed with practical tips, inspiration and the proven structure you need to soar to new heights in your personal and professional life.   SPONSORED  

ChatGPT-bot
Run your own GPTChat Telegram bot, with a single command. So you can take part in the latest crazy like all the cool kids.

Pixelfed
An ad-free and privacy-friendly open-source and decentralized photo sharing social media platform.

DuckDuckGo for Mac
A fast, privacy-friendly browser for Mac, from the makers of the privacy-friendly search engine.

Macpine
Create and manage lightweight Alpine VMs on macOS with seamless port forwarding, automatic file sharing, and more.

Flow
A browser-based, open-source EPUB reader with features like search, custom typography, highlights and annotations, share via link, cloud storage, and more.

Podman Desktop
An open source graphical tool enabling you to seamlessly work with containers and Kubernetes from your local environment.

devenv
Build, share, and run your local development environments with a single command, without containers.

Chartbrick
Create charts using your databases from Notion or Airtable. Visualize your data as insightful charts and embed them in Notion pages or anywhere else.

ILLA Cloud
A robust, open-source, low-code platform that integrates with any data source, for developers to build internal tools in minutes.

FrankenPHP
One of the few PHP tools I've shared, A modern PHP app server, written in Go, built on top of the popular Caddy web server.

Python Sandbox
And how about a Python tool? Things are getting wild. This is a JSFiddle-like environment for Python scripts.
 

Commercial Apps and Classifieds

A Tweet for Thought

To be fair, writing code isn't the same as writing content, but this meme on plagiarism is kind of funny.
   

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 into, or want to better at photography, you might want to check out GuruShots, where you can do daily photo challenges on the way to becoming a photo expert.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly