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

Web Tools Weekly
WEB VERSION
What a Tool!

Issue #365 • July 16, 2020

Advertisement
The Most Powerful CI/CD Tool
Automate your development process quickly, safely, and at scale.
Sign Up
CircleCI

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:

<input type="file" multiple>

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:

myInput.addEventListener('change', function () {
  myFiles = myInput.files;
  console.log(myFiles[0].name);
  console.log(myFiles[0].size);
  console.log(myFiles[0].lastModified);
}, false);

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:

myFiles[0].text().then((text) => {
  // do something with text here
});

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.

Big Heads

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

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.

Streamhut


 

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

Older messages

Web Tools #364 - Testing Tools, Text Editors/IDEs, Uncategorizables

Thursday, July 9, 2020

Web Tools Weekly WEB VERSION Issue #364 • July 9, 2020 Advertisement The Most Powerful CI/CD Tool Automate your development process quickly, safely, and at scale. Sign Up CircleCI In addition to this

Web Tools #363 - CSS Tools, Media, JS Utilities

Thursday, July 2, 2020

Web Tools Weekly WEB VERSION Issue #363 • July 2, 2020 Advertisement Managing Complexity in Adopting Microservices July 8 @ 10 AM PT | 5 PM UTC Join Rollbar, Optimizely, Postman, and DeployHub for an

Web Tools #362 - Front-end Frameworks, React Tools, Build Tools

Thursday, June 25, 2020

Web Tools Weekly WEB VERSION Issue #362 • June 25, 2020 Advertisement Codacy: Automated Code Reviews Codacy is an automated code standardization platform that helps improve code quality, create

Web Tools #361 - JS Libraries, Testing Tools, Uncategorizables

Thursday, June 18, 2020

Web Tools Weekly WEB VERSION Issue #361 • June 18, 2020 Advertisement The New Tab Page You'll Actually Use Replace your web browser's gratuitous new tab page with a minimal list of links,

Web Tools #360 - React Tools, Git/CLI, JS Utilities

Thursday, June 11, 2020

Web Tools Weekly WEB VERSION Issue #360 • June 11, 2020 The following intro is a paid product review for NetNut, a fast residential proxy network for web scraping, SERP monitoring, and more. If your

You Might Also Like

Import AI 399: 1,000 samples to make a reasoning model; DeepSeek proliferation; Apple's self-driving car simulator

Friday, February 14, 2025

What came before the golem? ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Defining Your Paranoia Level: Navigating Change Without the Overkill

Friday, February 14, 2025

We've all been there: trying to learn something new, only to find our old habits holding us back. We discussed today how our gut feelings about solving problems can sometimes be our own worst enemy

5 ways AI can help with taxes 🪄

Friday, February 14, 2025

Remotely control an iPhone; 💸 50+ early Presidents' Day deals -- ZDNET ZDNET Tech Today - US February 10, 2025 5 ways AI can help you with your taxes (and what not to use it for) 5 ways AI can help

Recurring Automations + Secret Updates

Friday, February 14, 2025

Smarter automations, better templates, and hidden updates to explore 👀 ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The First Provable AI-Proof Game: Introducing Butterfly Wings 4

Friday, February 14, 2025

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? undefined The Market Today #01 Instagram (Meta) 714.52 -0.32%

GCP Newsletter #437

Friday, February 14, 2025

Welcome to issue #437 February 10th, 2025 News BigQuery Cloud Marketplace Official Blog Partners BigQuery datasets now available on Google Cloud Marketplace - Google Cloud Marketplace now offers

Charted | The 1%'s Share of U.S. Wealth Over Time (1989-2024) 💰

Friday, February 14, 2025

Discover how the share of US wealth held by the top 1% has evolved from 1989 to 2024 in this infographic. View Online | Subscribe | Download Our App Download our app to see thousands of new charts from

The Great Social Media Diaspora & Tapestry is here

Friday, February 14, 2025

Apple introduces new app called 'Apple Invites', The Iconfactory launches Tapestry, beyond the traditional portfolio, and more in this week's issue of Creativerly. Creativerly The Great

Daily Coding Problem: Problem #1689 [Medium]

Friday, February 14, 2025

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Google. Given a linked list, sort it in O(n log n) time and constant space. For example,

📧 Stop Conflating CQRS and MediatR

Friday, February 14, 2025

​ Stop Conflating CQRS and MediatR Read on: m​y website / Read time: 4 minutes The .NET Weekly is brought to you by: Step right up to the Generative AI Use Cases Repository! See how MongoDB powers your