Issue #294 (Clearing Timers, CSS/HTML, Testing, Static/CMS)03/07/19
If you've used setInterval() or setTimeout() to create timing-related functionality, then you likely know that in order to clear a timer, you can do so using the clearInterval() or clearTimeout() methods, identifying the one you want to clear by passing in the ID.
For example:
|
let ID = window.setInterval(callback, 1000);
function () callback {
// do something here...
if (something) {
window.clearInterval(ID);
}
}
|
Notice after I use setInterval() to start the timer, I use clearInterval() to stop it. I can do the same with setTimeout() and clearTimeout(). But the spec says the following:
"Because clearTimeout() and clearInterval() clear entries from the same list, either method can be used to clear timers created by setTimeout() or setInterval()."
So you can start a timer with setTimeout() and then end it with clearInterval() and it will still recognize the ID, because, as the spec says, both clear methods clear entries from the same pool of IDs.
Here's a CodePen that demonstrates this. The setInterval() timer starts on page load (causing the blinking text) and the button (which triggers a clearTimeout() call) stops the setInterval() timer.
MDN, after explaining that these can be used interchangeably like this, wisely advises:
"...for clarity, you should avoid doing so."
Agreed! But I suppose it's good to know in case you run into code that does this and are confused.
Now on to this week's tools!
|
CSS and HTML Tools
DeepScan: How to Ensure JavaScript Code Quality
Make your JavaScript better with advanced static analysis. DeepScan targets the detection of possible runtime errors and quality issues for your JavaScript, TypeScript, React and Vue.js code. sponsored via Paved
Boilerform
A little HTML and CSS boilerplate to take the pain away from working with forms.
details-dialog-element
A modal dialog that's opened with a button based on the `details` HTML element.
mailtolink.me
A simple markup generator for mailto links that takes care of the formatting for you. Just fill out the email and copy your code.
Animated Burgers
A library of animated hamburger menus for responsive designs, available as HTML/CSS or as React components.
Textblock
A JavaScript tool for adjusting size, leading, and grades to cast continuously responsive typography. It works over your current CSS as a progressive enhancement.
Lunar
A library of free, beautifully designed modal dialogs based on Bootstrap.
goober
A less than 1KB CSS-in-JS alternative with a familiar API.
SSCSS
Light Sass library for managing your font-size, margin, padding, and position values across breakpoints.
Color
Color scheme generator exportable as JSON or CSS/Sass variables.
style-module
CSS modules in JavaScript.
|
Testing and Debugging Tools
Package Diff
Displays a diff between two versions of the same npm package.
sourcebuster.js
Lets you track the referral source of your site visitors and show custom content depending on the source.
htrace.sh
Shell script for HTTP/HTTPS troubleshooting and profiling. It's also a simple wrapper script around several open source security tools.
SortSite
Online tool to check sites against W3 WCAG accessibility standards, and compliance with Section 508 of the Rehabilitation Act.
PingStack
Alerts you when your website goes down, before your customers do.
Super Monitoring
Powerful, yet easy-to-use website monitoring and web application monitoring.
Glob Tester
Online tool to test and visualize glob pattern matching. Type your glob pattern in the input field and all matched files will be highlighted in the tree structure.
Contrast Checker
Test text and objects against backgrounds for accessibility.
JSONPlaceholder
Fake online REST API for testing and prototyping.
DOM Testing Library
Simple and complete DOM testing utilities that encourage good testing practices.
|
|
Recommended Reading for Developers
|
Site Builders, CMS's, Static Sites, etc.
Just the Docs
Gives your documentation a jump-start with a responsive Jekyll theme that is easily customizable and hosted on GitHub Pages.
Draftium
Website prototyping tool. Ideate and collaborate on website prototypes with team and clients.
Personal Website Generator
Build a personal website that shows off your contributions, interests, and development experience. Fully-customizable profile powered by the GitHub API, GitHub Pages, and Jekyll.
Glide
Create a mobile app from a Google Sheet in 5 minutes, for free. Beautiful apps, powered by data, easy to customize and share.
Airtext
Create your own decentralized blog via Blockstack (a platform for building decentralized blockchain apps).
Reverie
A ridiculously elegant Jekyll theme.
Look mom no code
Build a website on Bubble (a software hosting platform) without writing code.
Builder
Add drag-and-drop page building to any site.
Icarus
A simple, delicate, and modern theme for the static site generator Hexo.
Gatsby Style Guide Guide
A Gatsby-based boilerplate for creating a custom style guide for your organization's design system.
|
A Tweet for Thought
I coded my first web page 19 years ago, but Eric Meyer's got me beat by a good 6 years.
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...
Since I'm on the topic of CSS: If you're a CSS developer, be sure to fill out the State of CSS Survey and you might also like CSS-in-JS or CSS-and-JS.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
