Issue #267 (querySelector Bug, Uncats, Deploy, CSS/HTML)08/30/18
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:
|
<div class="example"></div>
|
I can access that element using a line of JavaScript that uses the attribute selector:
|
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'."
So if you're interested in saving a single character in a line of JavaScript that uses an attribute selector, you've struck gold. Well, maybe code golf would be the only place this might come in handy – though I have a feeling using an attribute selector in a querySelector() call is not something you'd see often in a code golf competition.
Now on to this week's tools!
|
The Uncategorizables
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
Font Playground
The most fun place to experiment with layouts using variable fonts, and export front-end code right from this little web app.
ASCIIFlow Infinity
Online tool to draw ASCII flow charts and other diagrams. Save to Google Drive, resize, freeform draw, and export straight to text/html.
Consently
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.
UIengine
Workbench for UI-driven development: A tool for developers and designers to build and document web sites and apps.
OneGraph
Connect Stripe, Salesforce, Zendesk, Twitter, GitHub, and more through the power of GraphQL.
mocktastic
Develop faster with easy, offline, mock API servers, for your entire team.
browsh
A fully-modern text-based browser run on a remote server and accessed via SSH/Mosh or the in-browser HTML service.
shotsnapp
A simple tool to let you quickly create beautiful mockup presentations for your app and website's design.
MonkeyLINK
URL shortener and landing pages for mobile apps. Create responsive app landing page auto-magically. Publish one link to track your app installs.
Principle
Mac app that makes it easy to design animated and interactive user interfaces.
|
|
Recommended Reading for Developers
|
Deployment, Code Bundlers, etc.
Bizarro Devs
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
Webpack configurator
Online tool to generate a personalized and optimized webpack.config.js file.
ngx-build-plus
Extend the Angular CLI's default build behavior without ejecting, e.g. for Angular Elements.
Guppy
A friendly application manager and task runner for React.js.
Fastpack
Pack JavaScript code into a single bundle quickly and easily.
Bullet Train
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.
Razzle
Create server-rendered universal JavaScript applications with no configuration.
babel-preset-minimal
A Babel preset that produces the smallest possible code.
Minipack
A simplified example of a modern module bundler written in JavaScript.
fastjs.link
A short linking service for npm packages.
JSUI
A tool for visually organizing, creating and managing JavaScript projects.
|
CSS and HTML Tools
CSS Scan
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).
SCSScale
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.
CSS Playground
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.
Slickmap
A simple stylesheet for displaying finished site maps directly from HTML unordered list navigation.
css-doodle
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.
SimpleBar
Custom scrollbars made simple, lightweight, easy to use and cross-browser.
StyleURL
Chrome extension that lets you export and share CSS changes directly from Chrome DevTools.
Angular Flex-Layout
Provides an HTML UI layout for Angular applications using Flexbox and a Responsive API.
css-suspense
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!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
