Issue #215 (form property, CSS/HTML, JS Utils, Uncats)08/31/17
There are lots of things you can do with form elements with DOM scripting, a few of which I've discussed in previous tips. One that you may not be aware of is the form property that you can access on any form element.
This property allows you to easily and unambiguously get a reference to the containing form for the targeted element. As an example, let's assume I have two separate forms on a page, each with a submit button:
|
let sOne = document.querySelector(
'input[type=submit]'
),
sTwo = document.querySelectorAll(
'input[type=submit]'
)[1];
if (sOne.form.classList.contains('formOne')) {
console.log('This is form #1');
}
if (sTwo.form.classList.contains('formTwo')) {
console.log('This is form #2');
}
|
Try it on JS Bin
In the code above, I'm getting a reference to the two different submit buttons, then I'm checking to see if the class attribute on the parent form element has the specified class.
You can do this with any form element. Just get a reference to the element and then check the form property of that element.
The form property is a read-only property that's part of the HTMLInputElement interface, which has lots of other methods and properties, some more commonly known than others.
Now on to this week's tools!
|
CSS and HTML Tools
Slinky
Sketch extension to export your Sketch designs as HTML email templates.
styled-media-query
Better media queries for the styled-components library, with the ability to specify custom breakpoints.
CSScomb
Configurable CSS code formatter available as a plugin for Grunt, Sublime, Brunch, and Brackets. Option to build your config online.
Grabient
Gallery of beautiful and customizable CSS linear gradients.
HTML Washer
Online tool that cleans up your HTML to strip it down to its bare bones (e.g. no classes, inline JavaScript, etc.) and corrects the formatting, indenting, etc.
omg-img
Service to insert icons into your page using HTML (sort of like placeholder image services).
glamorous
Maintainable CSS with React.
RxCSS
A very small library for manipulating CSS Custom Properties (aka CSS Variables) with RxJS Observables.
Auroral
A collection of animated background gradients that can be used almost anywhere.
Critical Path CSS Generator
Online tool to generate critical "above the fold" CSS from a URL.
|
JavaScript Utilities
Fitty
Snugly resizes text to fit its parent container.
pell
The simplest and smallest WYSIWYG text editor for web, with no dependencies.
icaro
Smart and efficient JavaScript object observer, ideal for batching DOM updates (~1kb).
Msg
A library to create and manage highly customizable modal windows and popup messages.
raf-schd
A scheduler based on requestAnimationFrame. It throttles calls to a function and only invokes it with the latest argument in the frame period.
Wade
Blazing fast, 1kb string/substring search for JavaScript.
rematrix
An easy way to create and combine matrix transformations that work seamlessly with CSS.
t-scroll
A modern reveal-on-scroll library with useful options and animations.
Tinytime
A straightforward date and time formatter in under 800 bytes.
|
The Uncategorizables
crontab.guru
An easy to use editor for crontab schedules.
PWA Logo Printer
Customize and download an SVG of the new unofficial PWA (Progressive Web Apps) logo.
Mailit
A tiny drop-in REST API to send emails.
Abstract
A secure, version-controlled hub for your design files.
Wasabi
Storage made simple. Faster than S3, less expensive than Glacier.
Fontface Ninja
Chrome, Safari, and Firefox extension that lets you inspect, try, buy and bookmark any fonts on any website.
Gifmock
Simple macOS application that helps you create high quality GIFs from your mockups.
|
A Tweet for Thought
This is exactly how gzip works.
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...
If you're having trouble loading Chrome when it has 600+ tabs to open from your last session – relax, it'll be fixed soon.
Thanks to everyone for subscribing and reading! Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
