Web Tools Weekly Issue #277 (JS Errors, Build/Bundle, JSON/Data, Media)

Issue #277 (JS Errors, Build/Bundle, JSON/Data, Media)11/08/18

Advertisement via Paved

I recently came across this page on MDN that is a JavaScript error reference. Amazingly, that page lists more than 70 different errors that you could see in your JavaScript apps. I'd guess that I've come across maybe 20 of those over the years.

The errors themselves might not be that interesting or useful at first glance, but you'll notice that each error in that list links to a specific page that discusses the error in detail. From there, you can get some valuable info on specific JavaScript features that you may not be familiar with.

Another thing that page mentions and links to is the global Error object. An Error object can be created via the Error constructor. An instance of the Error object is thrown every time you see a JavaScript error in your browser or developer tools console.

Whatever the error is, you can suppress the error from appearing to the user by means of a try...catch statement. Inside the catch block, you have the option to read the exact error message:

try {

        const myVar = 5;

        myVar = 10;

      } catch(err) {

        console.log(err.name + ': ' + err.message);

      }

      // Chrome: "TypeError: Assignment to constant variable."

      // Firefox: "TypeError: invalid assignment to const `myVar'"

      // Edge "TypeError: Assignment to const"

Try it on JS Bin

As you can see, the Error object exposes a name property and message property that allows you to read the exact error message that the browser throws. In this case, it's the fact that I'm trying to change a constant. Each browser expresses the error a little differently. So any one of the 70+ errors can be caught this way and the message logged.

I suppose something like this might be useful because although you're keeping errors from showing up to users, you're able to log those errors somewhere for debugging purposes which might help you understand where your code is throwing exceptions without you realizing it.

Now on to this week's tools!

Are you learning JavaScript? You'll love my e-books:
► JavaScript & DOM Tips Volume 1
► JavaScript & DOM Tips Volume 2
(EPUB, MOBI, and PDF)

Bundlers, Deployment, Tasks, etc.

Improve the Stability of your Applications
Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Over 4,500 of the world's best engineering teams use Bugsnag to improve application stability. sponsored via Paved

Webpack Bundle Analyzer
Webpack plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap.

sysget
One package manager to rule them all. A bridge that lets you use one syntax to every package manager on every Unix-based operating system.

webpack-web-app-manifest-plugin
Webpack plugin that generates a PWA manifest and integrates with the assets JSON generated by assets-webpack-plugin.

terser
A JavaScript parser, mangler/compressor and beautifier toolkit for ES6+.

deps-report
Generate reports about dependencies and dependents of your JavaScript/TypeScript files through an AST. It supports `import` and `require` statements.

babel-upgrade
A tool that tries to automatically update most dependencies, config files, and JavaScript files that require Babel packages directly to Babel 7.

BundlePhobia
Online tool to find the cost of adding an npm package to your bundle.

StealJS
Now at version 2+ (details). Futuristic JavaScript dependency loader and builder. Speeds up application load times. Works with ES6, CommonJS, AMD, CSS, LESS and more. Simplifies modular workflows.

Babel Transform
A Babel 7 plugin transform to convert CommonJS into ES Modules.

Which licenses I have?
Online tool to learn which licenses are associated with a specified package.

next-serverless
Handles everything for you and deploys your next.js application to AWS Lambda with minimal or even no configuration using the serverless framework.

Recommended Courses for Developers

Databases, JSON, etc.

Retool – the Fast Way to Build Internal Tools
No one likes writing boilerplate CRUD. Instead, drag-and-drop our building blocks and connect them to your databases and APIs to build your own tools, fast. Connects with REST, GraphQL, SQL, mongoDB, Firebase, and more. Sign up for free. sponsored via Paved

Graphpack
A minimalistic zero-config GraphQL server.

Functional Data Grid
Data grids in functional style with ReactJS. A library made with React and React-Virtualized for creating rich data grids with filtering, sorting, grouping and aggregates computation.

ReSub
A library for writing better React components and data stores. Uses automatic subscriptions to reduce code and avoid common data flow pitfalls. Scales for projects of all sizes and works great with TypeScript.

sequel fumpt
An online SQL formatter to beautifully format SQL statements.

turtleDB
A JavaScript framework and in-browser database adapter for building offline-first, collaborative web apps.

Apify SDK
The scalable web crawling and scraping library for JavaScript. Enables development of data extraction and web automation jobs with headless Chrome and Puppeteer.

GraphQLEditor
GraphQL Visual Node Editor. Makes it easier to understand GraphQL schemas. Create a schema by joining visual blocks with are then transformed into code.

PostGUI
A React web application to query and share any PostgreSQL database.

IDB-Keyval
A super-simple-small promise-based keyval store implemented with IndexedDB.

Easy JSON Viewer
Online tool to convert JSON to a searchable and collapsible tree view and table view.

fast-json
Implements fast extraction of JSON from a file, with better performance than other similar options.

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

Retool – the Fast Way to Build Internal Tools
No one likes writing boilerplate CRUD. Instead, drag-and-drop our building blocks and connect them to your databases and APIs to build your own tools, fast. Connects with REST, GraphQL, SQL, mongoDB, Firebase, and more. Sign up for free. sponsored via Paved

Video Rotate
Online tool to rotate video files from vertical to horizontal or vice versa.

React Diagrams
A super simple, no-nonsense diagramming library written in React that just works.

SVGR
Transform SVGs into React components using a CLI or online tool.

Smoothie Charts
A JavaScript charting library for streaming data.

react-calendar-heatmap
A calendar heatmap React component built on SVG, inspired by GitHub's commit graph.

Lengthy
A JavaScript microlibrary to get the length of SVG shapes. The length will automatically be added to the element as a CSS variable to make it easy to do CSS animations.

Vyoo
Beautiful, free vertical stock videos that you can edit and download for use in mobile projects.

SoundJS
A JavaScript library that provides a simple API, and powerful features to make working with audio a breeze.

react-img-zoom
A React component to zoom images on hover.

Chessboard.jsx
A customizable React chessboard component that works as a standalone drag and drop chessboard on standard and touch devices.

A Tweet for Thought

Sam Saccone starts a discussion on why it's important to use a button where an app or web page calls for a button.

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

Developer CV Template is a starting point for creating your CV or resume, specifically if you're in some form of software development.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris