|
|
|
|
Issue #137 (readyState, JS Utils, CSS/HTML, Uncats)03/03/16
If you've done Ajax with vanilla JavaScript, then you're probably familiar with the readyState property of the XMLHttpRequest (XHR) object. The document object also has a readyState property. Unlike the XHR object's property, which returns the state as an integer, document.readyState returns one of three values:
loading
Exactly what the name implies, this value means the document is still in the process of loading.
complete
Again, pretty clear. But there's no in-between here; this value means the document, including all resources (stylesheets, frames, etc.) has finished loading.
interactive
This is one that could prove useful. This means the DOM is ready to be interacted with but resources have not completed downloading. So this state would be in between the previous two.
When the readyState property changes, the readystatechange event fires on the document object. So you could theoretically do something like this:
|
document.onreadystatechange = function () {
switch (document.readyState) {
case 'loading':
console.log('loading...');
break;
case 'interactive':
console.log('DOM is ready...');
break;
case 'complete':
console.log('Document complete...');
break;
}
};
|
View this example on JS Bin here but you probably won't see the "loading" indicator simply because it seems to happen too quickly on a virtually empty page.
As MDN points out, you can use document.readyState as an alternative to the DOMContentLoaded event (using the value "interactive") or as an alternative to the load event (using "complete"). You might also want to check out this JS Tips article, which discusses the same basic concept, but more specifically how to do something similar to jQuery's $(document).ready() in plain JavaScript.
Now on to this week's tools!
JavaScript Utilities and Mini Libraries
Ajaxify
"A vanilla Javascript AJAX library. The syntax is similar to jQuery."
Draft.js
"A framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences."
MediumEditor
A pure JavaScript, cross-browser inline editor toolbar in the style of Medium.
Drift
"Easily add "zoom on hover" functionality to your site's images. Lightweight, no-dependency JavaScript."
tply
"Allows you to simulate text being typed out character by character."
hunt
"Library to detect when DOM elements become visible and disappear on scroll."
All Origins
An open source alternative to AnyOrigin.com with support for gzipped pages.
Kneden
Still in early development. "Transpile ES7 async/await to vanilla ES6 Promise chains: a Babel plugin."
ContentTools
"A JS library for building WYSIWYG editors for HTML content."
Sharer.js
A lightweight library to create custom social share components on DOM elements for your website. No dependencies.
(Unofficial) CanIUse Embed
"Embed up-to-date data from caniuse.com. Displays feature support data for multiple versions of the 10 major browsers. Configurable, reliable, and fully responsive."
CSS and HTML Tools
nbem
A JavaScript utility to help you write BEM classes dynamically in an intuitive manner.
EQCSS
A CSS extension for Element Queries and more.
react-flexbox-grid
"A set of React components implementing flexbox grid with the power of CSS Modules."
Descartes
"An experimental library for writing CSS in JavaScript."
Restaurant Menu Generator
An online tool to help build a restaurant menu. Can be handy for clients who don't have the budget for a full custom solution but want something better than a PDF.
critical-path-css-rails
A ruby gem for loading critical-path, above the fold CSS.
TestMyCSS
"Optimize CSS delivery and performance by checking for redundancy, validation errors, and following best practices."
voxel.css
"The goal of this project is to provide a lightweight 3D CSS library with very simple implementation."
Expressive CSS
"An approach to writing lightweight, scalable CSS using utility classes that are easy to write and understand."
The Uncategorizables
ReactiveX
"An API for asynchronous programming with observable streams."
CaptainForm
"Grants you the power to set up fully-featured WordPress forms and surveys."
Invoice Home
"Create an Invoice - Email it - Get paid. Tons of invoice templates available."
Classeur
"Start writing notes, docs, blogs quickly using Markdown."
Brotli Test
"Verify if your server or CDN supports Google's Brotli compression algorithm."
DLite
"The simplest way to use Docker on OSX."
Jazzband
"A cooperative experiment to reduce the stress of maintaining Open Source software alone."
acme-tiny
"A tiny script to issue and renew TLS certs from Let's Encrypt."
A Tweet for Thought
Heydon Pickering's thoughts on accessible design.
Suggestions / Corrections
Made something? Send links via 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...
Want some ideas for passive income? This Hacker News thread might help.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
