Web Tools Weekly Issue #391 (DOM Ready, JS Libs, JSON/DB, Uncats)

Issue #391 (DOM Ready, JS Libs, JSON/DB, Uncats)01/14/21

One of the things that developers loved about jQuery was its use of the $(document).ready() method.

This useful method allows you to run any JavaScript code and safely interact with any DOM element without worrying that the element doesn't exist. If you want to do this with vanilla JavaScript, you have a couple of options:

Listen for the DOMContentLoaded event on the window or document
Listen for the load event on the window

The DOMContentLoaded event fires as soon as the DOM is ready to be interacted with. So this is almost the equivalent of jQuery's $(document).ready().

The load event, on the other hand, fires when the page and all of its resources are finished loading. So this one could be useful in some circumstances, but more than likely the one you want is DOMContentLoaded.

For example, if you want to get the exact dimensions of an element on the page and the content hasn't finished loading, you won't get an accurate measurement. So the load event would be useful in that case.

I mentioned that DOMContentLoaded isn't exactly the same as jQuery's method. The jQuery docs explain the difference:

"jQuery's .ready() method differs in an important and useful way: If the DOM becomes ready and the browser fires DOMContentLoaded before the code calls .ready( handler ), the function handler will still be executed. In contrast, a DOMContentLoaded event listener added after the event fires is never executed."

Regarding this problem, MDN suggests the following:

"DOMContentLoaded may fire before your script has a chance to run, so it is wise to check before adding a listener."

Then they provide the following suggestion for your code:

if (d.readyState === 'loading') {

        d.addEventListener('DOMContentLoaded', doSomething);

      } else {

        doSomething();

      }

In this instance "d" is a variable that represents the document.

Notice that first the script uses the readyState property to check if the DOM is still loading. The 'loading' state is the one that occurs right before the 'interactive' state in the loading process. So the DOM is not yet loaded. Thus I can safely attach the event.

If the 'loading' state has already passed, the else branch goes directly to the stuff to load after the DOM is ready.

As you can see, as long as you understand exactly what the vanilla JavaScript events accomplish, then you shouldn't need to use jQuery at all, assuming you're not worried about browser bugs and inconsistencies, of course.

Now on to this week's tools!

JavaScript Libraries and Frameworks

Preflect Surveys
Websites of all types use Preflect to create fast on-site surveys. Learn more about your visitors, optimize for conversion, and create better user experiences with Preflect. Install now for free! sponsored

Inertia.js
Lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.

Dojo3D
A JavaScript library for simple 3D interactive storytelling, aimed at all ages of coders and no software installation required.

Moddable
JavaScript for IoT. Tools to create open IoT products using standard JavaScript on low cost microcontrollers.

Replay
A cross-platform JavaScript game engine inspired by React. Declarative API, open source, with built-in tooling and testing.

Merkur
A tiny extensible JavaScript library for front-end microservices that's flexible, extensible, and SSR-ready.

Aleph.js
A React Framework in Deno, inspired by Next.js. TypeScript in Deno, ES module imports, file-system routing, SSR & SSG, and more. No config needed.

24a2
An ultra-minimalist game engine that lets you to build a game in a few hours. Has a very limited set of features, which makes it easy to learn and encourages you to solve problems creatively.

Danfo.js
An open-source JavaScript library providing high-performance, intuitive, and easy-to-use data structures for manipulating and processing structured data.

Presenta Lib
A JavaScript library to build expressive web presentations in seconds.

BotUI
An older project that I've never included here. A JavaScript framework to build conversational UIs. Try it out on the page to see what it does.

Flux
Facebook's application architecture for building UIs is now at version 4+, the last major release, and will be in maintenance mode going forward.

Workbox
Now at version 6+. A collection of JavaScript libraries for Progressive Web Apps.

JSON, Databases, etc.

Beacon
Run SQL commands directly in Slack, then share them with your team.

BToolKit
A minimalist Mac app that lets you quickly do base64 encoding/decoding and URL encoding/decoding.

Hotwire
An alternative approach to building modern web applications without using much JavaScript, by sending HTML instead of JSON over the wire.

JSON Editor Online
A web-based tool to view, edit, and format JSON. It shows your data side by side in a clear, editable tree view or a code editor. You can store documents locally or in the cloud.

jose
Universal "JSON Web Almost Everything" - JWA, JWS, JWE, JWT, JWK with no dependencies using native crypto runtimes.

WDR
Web Data Render, a method to render web pages using JSON as the data rather than HTML. View the source of the page to see how it's constructed.

LavaStore
A flexible and scalable local database for the web with a simple and readable API and TypeScript support.

JSON Formatter Live
An installable PWA that's a quick way to format/minify JSON without needing to open another tab.

Momoa JSON
A general purpose JSON utility toolkit that includes a JSON parser, tokenizer, traverser, and printer.

Graffiti
A minimalistic GraphQL framework. The file-system is the main API and every .js file becomes a schema definition that gets processed and converted to GraphQL.

The Uncategorizables

Canonic
A low code platform to craft APIs in minutes. Allows you to publish complex REST and GraphQL APIs complete with webhook workflows, documentation, and a CMS.

ProWebScraper
A fast and powerful web scraping tool that lets you build a web scraper in thre easy steps.

Polls API
A simple and powerful API to add polls to your website or application.

Overlay
Transform your Figma or Sketch design components into clean React, Vue, and HTML components.

geoapi
Lightweight API service to get geolocation data from IP addresses.

Devbook
Mac or Linux app. A new kind of search engine made just for developers. A single input that allows you to search Stack Overflow, documentation, code, third-party tools, etc.

arokite
Preview your business cards in a 3D scene you can save and export as a JPG or transparent PNG. Upload the front and/or back images, and includes 4 templates.

qr.new
An online QR code builder with options for link, text, images, and more.

pdfmatrix
HTML to PDF conversion to create high quality PDFs from URLs and HTML.

Cloudcraft
Create a professional architecture diagram in minutes a visual designer, optimized for AWS with smart components.

Replicache
Build blazingly fast offline-first apps with any back end.

A Tweet for Thought

Is Japanese customer service really this good? Can someone show this to Google, where talking to a real human is against the law?

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

Here's a neat little Railroad switches game (harder than it looks!) built in JavaScript and based on a 1984 Commodore 64 game called "Donald Duck's Playground". The page also explains how it was built.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris