Web Tools Weekly
What a Tool!

Issue #253  (caniuse.com, Uncats, Testing, Build/Deploy)05/24/18


Advertisement
Segment Personas is Now Out of Beta
Personas allows you to combine user data and events into one universal customer profile. Then, you can build computed traits and custom audiences on top of your data and auto-sync to Facebook, Google, Redshift, and hundreds more.
Sign up today
Segment Personas

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.

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.

Now on to this week's tools!

The Uncategorizables

Personas by Segment is now out of beta
Use Personas to treat your customers like people, not data points. Get started with Personas. sponsored 

Builder Book
Open source web app to publish documentation or sell books. Built with a modern JavaScript stack: React/Material-UI/Next, Express/Node, Mongoose/MongoDB.

JustComments
A public ad-free comment system that works for any website. User authentication is done via Twitter, and integrates with Recaptcha and Gravatar.

Unique
Easily get fonts that you'll never see anywhere else.
 

Duotones
Upload an image to convert it to a downloadable duotone image with lots of color options and other settings.

popup-reporter
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.

MDX
A JSX in Markdown loader, parser, and renderer for ambitious projects. It combines the readability of Markdown with the expressivity of JSX.

FontDrop!
Simple and easy way to view the content of font files. Dropped files are not uploaded to the server.

Spectrum
The community platform for the future. Makes it easy to grow safe, successful online communities that are built to last.

FreedomBox
A private cloud server designed to be your own inexpensive server at home. Provides file sharing, a VPN, replacement for WhatsApp, proxy, and more.

1.1.1.1
The Internet’s fastest, privacy-first DNS resolver.  And the best domain name ever.

Mark Text
A Markdown editor for Mac, Windows, and Linux. A concise text editor dedicated to improving your editing efficiency.

Recommended Reading for Developers
Learning React Book   Ruby for Beginners Book   CSS in Depth Book

Testing and Debugging Tools

Swiftype Site Search
The fastest and easiest way to add advanced, customizable, hosted search engine to your website. Custom result ranking, autocomplete, synonyms, faceted search, real-time indexing, and more. Create a free trial account today. sponsored 

Remote Browser
A low-level browser automation framework built on top of the Web Extensions API standard.

dom-testing-library
Simple and complete DOM testing utilities that encourage good testing practices.

FlameScope
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.

Calibre CLI
Create tests for a single page, using a device profile and a location. Share the results publicly or privately.

Wappalyzer
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.

Guess.js
Still in Alpha. Libraries and tools for enabling data-driven user-experiences on the web.

unstated-debug
Debug your Unstated (a state management library) containers with ease.

tested-components
Browser integration testing utilities for styled-components (the CSS/ES6 module styling tool).

LagRadar
Add this to any JavaScript application and you can see when the app drops below 60fps as the radar sweep changes color and gets janky.

Website Speed Test
Instantly test your website speed in real browsers from 25 locations worldwide.

dump
Take a dump on your React app.  If you ever want to see a value on the page instead of using console.log().

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Deployment, Module Bundlers, etc.

pug-plain-loader
A webpack loader that transforms Pug templates to plain HTML.

WebpackBar
Elegant progress bar and profiler for webpack 3 and 4.

Zeropack
Practical, zero-config Babel + webpack, until you need it.

FOSSA
Dependency tracking, license compliance and attribution notices on autopilot.

Error Overlay
Plugin for webpack to display an error overlay in your application. The same error overlay used in create-react-app.

offline-plugin
Provides an offline experience for webpack projects using ServiceWorker, with AppCache as a fallback under the hood.

ni
A better npm install. Install dependencies that are missing from package.json, show deprecated dependencies, a better interface, and more.

Hygen
The simple, fast, and scalable code generator that lives in your project.

moment-locales-webpack-plugin
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!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris