|
|
|
|
Issue #142 (DOMTokenList, Text Editors, Data Tools, JS Utils)04/07/16
The classList object, which I've discussed before, returns what's referred to as a DOMTokenList, which is a DOM interface that opens up the possibility of using various methods, like add(), remove(), and toggle(), which are commonly used with classList.
But classList is not the only DOM feature that returns a DOMTokenList. The following objects also return a DOMTokenList:
- relList for HTML <link> elements
- relList for anchors (hyperlink elements)
- relList for HTML <area> elements
A relList is a collection of the rel attribute values on these various elements. Right now only Firefox and Chrome 50+ support these. In each case, you'll have access to the same methods that are customarily used with classList. The full list of methods and properties includes:
- length
- item()
- contains()
- add()
- remove()
- toggle()
- replace()
- supports()
- value
As long as the browser supports the feature that returns the DOMTokenList, it should also support all of the above methods. More info:
Now on to this week's tools!
Text Editors and Code Playgrounds
Vis
"Aims to be a modern, legacy free, simple yet efficient vim-like editor."
SVG2CSS
A GUI to help you build CSS keyframe animations.
Thunkable
"Drag and drop to create native, fast, reliable apps."
Fiddle Salad
"An online playground with an instantly ready coding environment. Combine language preprocessors, CSS, HTML and JavaScript to create and share coding examples."
Atomic Chrome
Chrome extensions that "allows you to edit textareas and content editable elements directly in Atom. When invoked, it will open a new tab in atom, which will be synchronized with the element focused."
PlatformIO IDE
"The next generation integrated development environment for IoT. It's built on top of GitHub's Atom 'hackable' text editor."
Manifest Generator
A tool to generate a customizable web manifest file.
Creo
"A modern design tool for Mac which combines design and development. Build native mobile apps with unprecedented power and ease of use."
React.run
"The in-browser React testing environment."
Content, Files, App Data, etc.
json2jsdoc
"JSON to JSDoc Converter – Custom type definitions directly from JSON objects."
CSVJSON
"Online tools to convert popular data formats. Persist your session for later, share with co-workers." Includes CSV to JSON, SQL to JSON, and a JSON Beautifier.
WebPlotDigitizer
"Web based tool to extract data from plots, images, and maps."
GSX2JSON
"This API connects to your [Google] spreadsheet and sanitizes the data, providing simple, readable JSON, that accepts queries, for you to use in your app."
MarsDB
"A Promise based lightweight database with MongoDB query syntax, written on ES6."
jsonTree
"A lightweight dependency-free JavaScript micro-library for creating collapsable tree-lists from a JSON file."
bitfly
"Secure peer-to-peer file transfer directly from your browser."
GDOM
"DOM Traversing and Scraping using GraphQL."
DeckTape
"A high-quality PDF exporter for HTML5 presentation frameworks."
JavaScript Utilities and Mini Libraries
Popper.js
Library to create "poppers" (popovers, tooltips, etc.) with just a line of code.
Intro.js
Add step-by-step guide and feature intros to your product pages and web apps.
Sketchpad
Library to produce an editable "sketch pad" drawing environment on a web page.
Expounder
"A very small JS/CSS library that lets article writers hide text behind a link, and allows readers to click that link to expand the text."
SlimScroller.js
"Smoothly scroll to positions on your website, under 350 bytes, no dependencies."
key-mapping-schema
Library for converting one key to another.
Service Worker Toolbox
From Google, a collection of tools that "provides some simple helpers for use in creating your own service workers."
babel-plugin-lodash
"Modular Lodash builds without the hassle."
Rebound
"A simple library that models Spring dynamics for the purpose of driving physical animations."
A Tweet for Thought
Lea Verou with an interesting thought on the technology we use.
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...
Shopping for a good VPN? This VPN Comparison Chart might help.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
