Issue #528  (canPlayType(), CSS/HTML, Git/CLI, Uncats)08/31/23

If you're dealing with varying levels of support for audio and video files in your apps, you'll want to be familiar with the canPlayType() method of the HTMLMediaElement API.

This method allows you to determine whether a browser can play a specific media type or codec before attempting to load it. This can help ensure cross-browser compatibility when using different video and audio files.

Of course, in most cases you should be pretty safe to use modern media formats, but if you need to check for support, here are a few examples.

The example above assumes a video element on the page, then the media type is passed in to the canPlayType() method. The method takes a single argument, a string specifying the MIME type of the media you want test.

The method will return one of 3 string values, depending on support:

• An empty string, indicating it's not playable on the current device
• A string containing the text "probably", indicating it's likely to play on the current device
• A string containing "maybe", indicating there's not enough info to determine if it's playable on the current device

Note that the above code assumes that an answer of "maybe" means it's playable, so you'd have to adjust the code to account for "maybe", if needed, though it's probably rare to get that result.

You can also optionally pass in a codecs parameter containing a comma-separated list of codecs. Here's an example that checks for codecs:

You can fiddle around with both of the above code examples in this CodePen demo.

You can see in the codecs example that I'm using the 'probably' and 'maybe' values in a more applicable manner.

As usual, the safest way to deal with varying levels of media support is to provide proper fallbacks in your HTML using <source> elements. But this is a decent method to keep in mind should the need arise for some specific checks for media types and codecs.

Now on to this week's tools!

 

CSS and HTML Tools

Better Select
A web component that provides a minimal custom select element, with the option to fall back to the native select on mobile devices, with keyboard support.

CSS Selectors: A Visual Guide
A guide to understanding CSS selectors that presents each selector in nicely designed, visual format, with each example showing the CSS side by side with the live result.

GradientGenerator
An interactive gradient builder that allows you to build advanced layered gradients, with the option to save gradients to your library or import community-built gradients.

The Marketer's Guide to Composable Content
Creating and publishing content shouldn’t be that hard. Grab this marketer-accessible guide on how to refine your content strategy to better support leading omnichannel, personalization, and design methodologies.     SPONSORED 

boxshadows.xyz
Similar to the gradient generator above, this is an interactive box shadow generator that lets you create layered box shadows. Also includes some docs and help for understanding the box shadow syntax.

Maily
An open-source editor that makes it hassle-free to create beautiful HTML emails using a set of pre-built components.

Your Lucky CSS Pattern
A simple page that displays a random CSS gradient-based pattern from CSS Pattern (a tool I shared a little while back), with every page refresh. You can customize the size and colors for the currently displayed pattern.

Mytailwind
An online editor that lets you customize 10+ Tailwind-based UI components live on the page, before pasting the HTML into your Tailwind project.

cssdb
A comprehensive list of CSS features and their positions in the process of becoming implemented web standards. Also includes MDN-based browser support for each feature.

MathLive
A ready-to-use web component that works just like an HTML textarea, but for math, and includes a faithful JavaScript implementation of LaTeX.

0to255
A color tool that makes it easy to find various of a selected color (i.e. tints and shades), making it useful for button hover states, gradients, borders, and more.
 

Git, GitHub, and CLI Tools

Pop
A Go-based command-line tool that lets you send emails from your terminal.

Bash Smart Directories Navigation
A Bash script that improves directory navigation, by listing previously visited directories that are saved for you.

node-copy-paste
A command line utility that allows read/write (i.e. copy/paste) access to the system clipboard.

Meco: Free Your Newsletters From the Inbox
The inbox is full of distractions and too many subscriptions lead to inbox chaos. Time to liberate your inbox and move to Meco, a newsletter aggregator built for reading.     SPONSORED 

Digger
An open source infrastructure-as-code (IaC) orchestration tool that allows you to run IaC in your existing continuous-integration pipeline.

Sweep
An AI-powered Junior Developer for small features and bug fixes that transforms bug reports and feature requests into code changes.

rmx-cli
A CLI tool for Remix applications that includes a small set of commands to run various utility tasks in Remix apps.

git-hours
An npm package that lets you estimate the time spent on a Git repository.

fake-git-history
A command-line tool that generates a GitHub or GitLab activity graph to make it look like you've been coding regularly. Not to be used for nefarious purposes! :)

openai-chatgpt
A TypeScript-based utility that lets you use ChatGPT from the terminal
 

The Uncategorizables

Flintable
An interactive playground that lets you play with ESLint fixable rules in your chosen code language.

Toools.design
A growing archive of 1000+ design resources organized into 15+ categories, updated weekly.

hashing.dev
An interactive hands-on tool and learning reference for developers, to work with hashing algorithms.

Threads API
An unofficial, reverse-engineered Node.js/TypeScript client for Meta's new Threads social network, with support for read and write and a web UI included.

macintosh.js
A full-featured demo of Mac OS 8, running in an Electron app pretending to be a 1991 Macintosh Quadra.

Meco: Free Your Newsletters From the Inbox
The inbox is full of distractions and too many subscriptions lead to inbox chaos. Time to liberate your inbox and move to Meco, a newsletter aggregator built for reading.     SPONSORED 

Simple Stupid Tools
A small set of 14 online tools that includes image tools, text tools, color tools, and two code validators (JSON and XML).

London TFL Dot Matrix Typeface
A set of dot matrix fonts in the style of Transport for London's (TFL) underground network. Each font weight represents a unique typeface featured on TFL arrivals boards and rolling stock led announcement boards.

Text to Diagram
A resource to allow you to compare syntax, layouts, and outputs between languages for generating diagrams with text, with support for D2, Mermaid, GraphViz, and PlantUML.

Component Inspector
A Figma plugin that provides a look at Figma component properties similar to how they are described in code, with support for React, Vue, Angular, and Web Components.

Pentest Contracts
A small collection of 3 potentially useful contract templates for code auditors, IT security specialists, and penetration testers.
 

Commercial Apps and Classifieds

An X Post for Thought

Interesting thread from December by Netflix cofounder Mark Randolph on why fear of people stealing your idea shouldn't be a roadblock to getting started or finishing something.
   

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (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...

This Virtual Piano by Recursive Arts is probably the best web-based virtual piano you'll see (and play). Very nicely done!

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris