Issue #253 (caniuse.com, Uncats, Testing/Debugging, Build/Deploy)
Most, if not all of you, will be familiar with the website caniuse.com. It's easily the best place to find browser support information for various web technologies.
One nice thing about the site is it's customization features. You can access these using the "Settings" button (next to the cog icon) beside the search field. Some of the things you can do using the settings include:
- Specify browsers you want listed in the results by selecting or deselecting individual browsers, or by sliding the "Min. browser usage" percentage indicator.
- Add a "Usage source" by specifying a geographic location (country, continent, etc) or by importing your Google Analytics data (which I haven't tried, but sounds pretty cool)
- Add multiple custom "browser sets", which you can save for later so you can switch between them as needed. For example, you could do a mobile-only browser set.
- Specify technology categories to list (CSS, JS, JS APIs, etc.)
Even within each of those features there are more settings and customizations you can make that I haven't mentioned here. There's quite a bit you can do, and some of these settings will even modify the URL so that what you select can be shared with others via deep linking.
Now on to this week's tools!
I don't recall seeing an extensive article or tutorial covering caniuse.com hacks and tips like this, but that might make for a good post.
A public ad-free comment system that works for any website. User authentication is done via Twitter, and integrates with Recaptcha and Gravatar.
Easily get fonts that you'll never see anywhere else.
Upload an image to convert it to a downloadable duotone image with lots of color options and other settings.
Mozilla is experimenting with a popup blocker to dismiss in-page popups automatically, and are curating a dataset for it. This Chrome or Firefox extension provides an easy way to report pages that show these pop-ups.
A JSX in Markdown loader, parser, and renderer for ambitious projects. It combines the readability of Markdown with the expressivity of JSX.
Simple and easy way to view the content of font files. Dropped files are not uploaded to the server.
The community platform for the future. Makes it easy to grow safe, successful online communities that are built to last.
A private cloud server designed to be your own inexpensive server at home. Provides file sharing, a VPN, replacement for WhatsApp, proxy, and more.
The Internet’s fastest, privacy-first DNS resolver. And the best domain name ever.
A Markdown editor for Mac, Windows, and Linux. A concise text editor dedicated to improving your editing efficiency.
Recommended Reading for Developers
Testing and Debugging Tools
A low-level browser automation framework built on top of the Web Extensions API standard.
Simple and complete DOM testing utilities that encourage good testing practices.
A visualization tool for exploring different time ranges as Flame Graphs, allowing quick analysis of performance issues such as perturbations, variance, single-threaded execution, and more.
Create tests for a single page, using a device profile and a location. Share the results publicly or privately.
Cross-platform utility that uncovers technologies used on websites. It detects content management systems, e-commerce platforms, web frameworks, server software, analytics tools, and more.
Still in Alpha. Libraries and tools for enabling data-driven user-experiences on the web.
Debug your Unstated (a state management library) containers with ease.
Browser integration testing utilities for styled-components (the CSS/ES6 module styling tool).
Website Speed Test
Instantly test your website speed in real browsers from 25 locations worldwide.
Take a dump on your React app. If you ever want to see a value on the page instead of using console.log().
Deployment, Module Bundlers, etc.
A webpack loader that transforms Pug templates to plain HTML.
Elegant progress bar and profiler for webpack 3 and 4.
Practical, zero-config Babel + webpack, until you need it.
Dependency tracking, license compliance and attribution notices on autopilot.
Plugin for webpack to display an error overlay in your application. The same error overlay used in create-react-app.
Provides an offline experience for webpack projects using ServiceWorker, with AppCache as a fallback under the hood.
A better npm install. Install dependencies that are missing from package.json, show deprecated dependencies, a better interface, and more.
The simple, fast, and scalable code generator that lives in your project.
Easily remove unused Moment.js locales with webpack.
A Tweet for Thought
Tab Atkins, who has written many of the CSS specs, starts a thread on global scope in CSS.
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...
Fieldtrips is a list of design, UX, tech, and innovation conferences, and possibly a replacement for the now-defunct Lanyrd.
Thanks to all for subscribing and reading!