Web Tools #365 - File API, Media Tools, JSON, Git/CLI

Advertisement

I'm sure you've heard of the File API, which has full browser support. It's simple to use and can be used in conjunction with Drag and Drop or via a form input that accepts file uploads. For example,  let's say I have the following input element:

This allows the user to select one or more files to add to the page. Once the files are added, the File API allows me to access the files to obtain various bits of information. For example:

This assumes my file input is referenced using the myInput variable. I'm listening for the change event, which allows the browser recognizes that files have been added to the input. Then I can access each file in the files object, which is a property of the input.

I've put together a slightly more complex live example that reads the name, size, and contents, and converts the modified date to a readable format (it's returned in Unix time).

When I read the contents I'm using the text() method, which is a method of the Blob interface and it returns a Promise. So I deal with that using something like the following:

You can view a full working version on CodePen here

For now, the easiest way to test out the demo is to add one or more text files. If you add another kind of file, it may crash the browser, as the code is attempting to read simple text. Notice that the info for each file added gets appended to the page.

Feel free to mess around with the demo, but that's the File API in a nutshell and should give you enough to get you started on using it if you haven't already done so.

Now on to this week's tools!
 

Media Tools (SVG, Audio, Video, etc.)

The Most Powerful CI/CD Tool
Automate your development process quickly, safely, and at scale. sponsored 

Screenshot.Rocks
Create beautiful browser and mobile mockups in seconds. Lets you customize the device, background canvas, then download as PNG, SVG, or JPEG.

Bumblebee
A JavaScript voice application framework. Write your own voice apps and assistants with an easy-to-learn JavaScript API.

Big Heads
Randomly generated characters for your apps and games. You can customize expressions, skin color, clothing, hair, etc., then grab the React or HTML code or download as SVG.

Free Illustrations
This is a directory of various free illustration sites, allowing you to filter by file type (AI, SVG, GIF, SKETCH, PNG, EPS, etc).

Shape Divider
Easily create and customize a page 'divider' (e.g. a curvy or wavy line/bg) then download the divider as SVG.

Patternico
Online tool to create and download seamless patterns in PNG format for use as backgrounds.

JZZ.js
A MIDI library for Node and web-browsers that hides asynchronous calls behind the developer-friendly chaining syntax.

React Flow
React library for building interactive node-based graph applications.

React H5 Audio Player
Accessible and keyboard-friendly React audio player component with consistent cross-browser UI/UX along with a time indicator that works on mobile.

Trails
A simple geometrical trail to attach to your Three.js objects.

SVG Path Visualizer
Enter SVG path data (the string inside the d attribute) to see a visual of it and along with an explanation of its parts.
 

JSON, Databases, etc.

PgTyped Type safe SQL in TypeScript. Makes it possible to use raw SQL in TypeScript with guaranteed type safety. Synchly Automate database backups with customizable recurring schedules. XgeneCloud Instantly generate REST & GraphQL APIs on any Database for MySQL, PostgreSQL, MsSQL, SQLite, MariaDB, or Aurora.   static-json-db The Native Jamstack Database. A NoSQL key-value database stored as a directory tree of small JSON files that can be deployed as part of a static website. DatoJi A tiny JSON storage service. Create, read, update, delete, .and search JSON data. GraphQL Nexus Declarative, code-first GraphQL schemas for JavaScript/TypeScript. Draxlr Admin, Explore and Analyze your data in one place. Perform CRUD operations, execute complex queries, save results, build graphs, dashboards, and more, all on a fully managed platform. Visualize Your Database Schema Automatically generate an interactive entity relationship diagram (ERD) from your existing SQL cloud database. tzdb Simplified, grouped and always up to date list of time zones, with major cities, in JSON format. LinkPreview API Preview web links with this Free API service that returns a JSON response for any URL.

Git, GitHub, and CLI Tools

Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity.   promoted
payments.

Bach Testing Framework
A Bash testing framework that can be used to test scripts that contain dangerous commands like `rm -rf /`.

Streamhut
Share your terminal in real-time with anyone – without installing anything.

awesome-react-generator
A command line tool that lets you generate component files/folders without leaving your terminal.

GitHub Readme Stats
Dynamically generated stats for your GitHub Readme file. Just paste a markdown snippet into your source with the appropriate user name.

icdiff
By highlighting changes, this tool can show you the differences between similar files, helpful for identifying and understanding small changes.

scripthunter
CLI tool that finds JavaScript files for a given website. E.g. just run something like `./scripthunter.sh https://example.com` to find all scripts on the specified page.

GitPigeon
GitHub notifications delivered to your Mac for mentions, pull requests, CI/CD passed, etc.

GitHub-Defreshed
If you don't like the new GitHub repo layout, this Greasemonkey / Tampermonkey script brings back the old layout.

cli-alerts
Cross platform CLI Alerts with colors and colored symbols for success, info, warning, error. Work on macOS, Linux, and Windows.

SourceLevel
Connect your GitHub or GitLab account to automate your code review and see real-time team metrics to track your team's progress.

Super-Linter
A combination of 25+ linters that you can install as a GitHub action.

GitHub Dark Theme
Chrome or Firefox extension to add a dark theme to GitHub.

A Tweet for Thought

This tweet made me question all my domain-name-related decisions for the past 20 years.
 

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...

Phuoc Nguyen has come up with yet another cool little front-end coding guide: this vs that, which provides links to various coding-related comparisons with explanations (e.g. argument vs. parameter, apply vs. call, :active vs. focus, etc).

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
PayPal.me/WebToolsWeekly