Tools

Font style matcher

Image

This is pretty cool: you can use this to visually display the differences between two fonts - usually a fallback font and a web font - and adjust the various CSS font properties to match them as closely as possible to reduce the amount of page shifting that may occur when the web font loads. Also includes a longer paragraph at the bottom that can compare the two fonts either by overlaying them statically or by switching between them at a regular interval.

Using SVG as image placeholders

Image

I’m passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn’t loaded yet.

During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post.

Browsersync - Time-saving synchronised browser testing

Your indispensable test assistant.

With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of sync settings from the UI or command line to create a personalised test environment. Need more control? Browsersync is easily integrated with your web platform, build tools, and other Node.js projects.

Tags

Duoload: Simplest website load comparison tool, ever

Image

This is pretty excellent tool. (Note that it cannot be used on sites that disable iframe embedding, however.)

Today I needed a quick tool to compare the loading progression (not just loading time, but also incremental rendering) of two websites, one remote and one in my localhost. Just have them side by side and see how they load relative to each other. Maybe even record the result on video and study it afterwards. That’s all. No special features, no analysis, no stats.

read.isthe.link: A basic functionality Readability almost-clone

A basic functionality [Readability] almost-clone. This service will try to search for the body of the content to a URL, and represent it stripped back and with minimal styling.

Usage

Send your URL to https://read.isthe.link via a query string, and so long as the URL is publically available (i.e. not behind login), then the page can be re-rendered:

https://read.isthe.link?url=https://remysharp.com/node

The page will be cached for a period of time, so subsequent requests will be faster.

Usage with private URLs

You can POST a body to the service and it will give you a hashed URL to redirect to. For example:

Code language: JavaScript

const xhr = new XMLHttpRequest();
 
xhr.open('POST', 'https://read.isthe.link');
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('referrer', window.location);
 
xhr.onload = () => {
  const res = JSON.parse(xhr.response);
  window.location = `https://read.isthe.link?url=${res.url}`;
}
 
xhr.send(`body=${encodeURIComponent(document.documentElement.innerHTML)}`);

Issues & feedback

All feedback, suggestions, pull requests to github (please): https://github.com/remy/read-body

MIT Licensed