Issue #267 (querySelector Bug, Uncats, Deploy, CSS Tools)
Here's an interesting little tidbit that I found on Twitter from someone named Gabriel Lima: If you use querySelector() or querySelectorAll() to access an element via an attribute selector, you can leave off the closing square bracket and it will still work.
Take the following HTML for example:
document.querySelector( '[class' ).className; // "example"
Here I'm just logging out the class name (log removed for brevity) but as you can see, the attribute selector inside the querySelector() call is missing the closing square bracket. Here is a JS Bin demo so you can try it out. This works in all browsers I tested in, but according to Gabriel, isn't working in Safari (though I didn't test that).
This would seem to be a bug, but according to a recent answer in this Stack Overflow thread and this Chrome bug report, this is expected behavior. One answer in the bug report thread (marked as WontFix) says in part:
"The fact that the square-bracket block was unclosed is lost. You can think of this as the parser 'auto-closing all unclosed blocks'."
Now on to this week's tools!
Geolocation API with Threat Data
Use our threat data to prevent free trial abuse by detecting and blocking Proxy and Tor users, known spammers and bad bots and as a replacement for CAPTCHAs. sponsored
The most fun place to experiment with layouts using variable fonts, and export front-end code right from this little web app.
Online tool to draw ASCII flow charts and other diagrams. Save to Google Drive, resize, freeform draw, and export straight to text/html.
The privacy-friendly and GDPR compliant way to add tracking to your website. Get consent before loading third party tracking scripts.
Timeline for Sketch
Design interactions and export code in Sketch.
Workbench for UI-driven development: A tool for developers and designers to build and document web sites and apps.
Connect Stripe, Salesforce, Zendesk, Twitter, GitHub, and more through the power of GraphQL.
Develop faster with easy, offline, mock API servers, for your entire team.
A fully-modern text-based browser run on a remote server and accessed via SSH/Mosh or the in-browser HTML service.
A simple tool to let you quickly create beautiful mockup presentations for your app and website's design.
URL shortener and landing pages for mobile apps. Create responsive app landing page auto-magically. Publish one link to track your app installs.
Mac app that makes it easy to design animated and interactive user interfaces.
Recommended Reading for Developers
Deployment, Code Bundlers, etc.
If you're looking for a quick tour of the weird and wonderful web, then Bizarro Devs is the newsletter for you. Get your dose of tech's wacky underbelly in your inbox every Tuesday. sponsored
Online tool to generate a personalized and optimized webpack.config.js file.
Extend the Angular CLI's default build behavior without ejecting, e.g. for Angular Elements.
A friendly application manager and task runner for React.js.
Lets you manage feature flags and remote config across web, mobile and server side applications. Deliver true Continuous Integration. Get builds out faster. Control who has access to new features.
A Babel preset that produces the smallest possible code.
A short linking service for npm packages.
CSS and HTML Tools
Instantly check or copy computed CSS. Inspect Element on steroids: study how things are made on the web in real-time and copy computed styles with no hassle (neither longhand styles).
Typographic modular scale starter, built on SCSS, based on the body's font-size.
CSS Grid 12 Column layout
12-column grid using display:grid. Includes the necessary prefixes to work in Internet Explorer.
Learn and play with various CSS features using interactive sliders.
CSS Duotone Generator
Upload an image and use this tool to produce a duotone image and generate the required CSS and HTML for the effect.
A simple stylesheet for displaying finished site maps directly from HTML unordered list navigation.
A web component for drawing patterns with CSS. Generates a grid of divs, then you can manipulate the cells using CSS to come up with a graphic pattern or an animated graph.
Custom scrollbars made simple, lightweight, easy to use and cross-browser.
Chrome extension that lets you export and share CSS changes directly from Chrome DevTools.
Provides an HTML UI layout for Angular applications using Flexbox and a Responsive API.
CSS loading for React.
A Tweet for Thought
Classic IE-hating humor. Ah, the good ol' days.
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...
Remote Jobs Club sounds like a useful resource to subscribe to if you're looking for remote work.
Thanks to all for subscribing and reading!