Web Tools Weekly
What a Tool!

Issue #218  (Computed Font, CSS Tools, JS Libraries, Productivity)

You're likely familiar with window.getComputedStyle(), which is an easy way to get the computed value of a specific CSS property. That method, however, has its flaws.

For example, if you try to get the computed value of the font-family property for a specific element, you'll just get whatever font stack is defined.

console.log(
  window.getComputedStyle( document.body )
        .getPropertyValue( 'font-family' )
);

// "Arial, Helvetica, sans-serif"

That's not bad, but this doesn't actually tell you which font is being rendered on the page.

If you want to know the font for debugging purposes, you can see what font is rendered inside your browser's developer tools.

In Chrome:
  • Right click the text, then choose "Inspect"
  • In the right pane select the "Computed" tab
  • Scroll down to the bottom of the "Computed" tab (you might have to drill down into the element to select the text node itself)
  • You should see the "Rendered Fonts" section of the "Computed" tab. See this screenshot for an example.
In Firefox, it's almost the same:
  • Right click text, choose "Inspect Element"
  • Choose the "Fonts" tab (instead of "Computed")
  • See this screenshot
Again, this is useful for debugging purposes and for examining fonts on other websites, but as far as reading the rendered font with JavaScript, I couldn't find an easy solution.

There's this utility, which I haven't tried yet but might do the job. There's also the possibility to use the Canvas API to check for the size of the rendered text and then determine it that way. But from the code I've seen, it looks like that's a pretty complex solution. This Chrome extension actually uses Canvas to do this, so it seems like Canvas is the only way.

If you know of another way, feel free to respond to this email and let me know.

Now on to this week's tools!
Did you buy my previous JavaScript/DOM tips book? Here's the latest one...
70 JavaScript & DOM Tips for $5 (Volume 2)
(EPUB, MOBI, and PDF)

CSS and HTML Tools

CSS in JS Playground
A neat little online playground to test out different libraries that help with managing your CSS in JavaScript.

Gradient World
Collections of beautiful gradients programmatically converted from photos.

PostCSS Normalize
Lets you use the parts of normalize.css you need, based on your project’s browserlist.

Autoprefixer
Now at version 7+. PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

Picostyle
A 0.3 KB CSS-in-JS library for use with Hyperapp (a front-end framework) and  Picodom (a virtual DOM builder).

Code My UI
A collection of HTML and CSS snippets for various UI components and patterns.

CSS Grid Highlighter
Chrome extension to add grid lines to indicate CSS Grid features in use on a page.

Font style matcher
Helps you match your secondary fonts to the primary font to avoid jarring shifts in layout during flash of unstyled content.

postcss-high-contrast
PostCSS plugin that helps automatically convert all colors to high contrast, to help with accessibility.

cssFilters.co
Playground for messing around with and learning CSS filters. Select images from unsplash or upload your own.

JavaScript Libraries and Frameworks

AssemblyScript
A subset of TypeScript that compiles to WebAssembly.

ProseMirror
A toolkit for building rich-text editors on the web.

AR.js
Efficient augmented reality for the web – 60fps on mobile.

WebVR Rocks
A JavaScript API for creating immersive 3D, virtual reality experiences in your browser.

PixiJS
The HTML5 Creation Engine. Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

cannon.js
A lightweight and simple 3D physics engine for the web.

p5.js
A client-side library for creating graphic and interactive experiences, based on the core principles of Processing (a software literacy foundation).

DisplayJS
A simple JavaScript framework for building ambitious UIs.

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

Productivity Tools

TeamHut
All your links and documents in one place. Makes it easy to share your bookmarks and content.

Reminders Company
A powerful reminder scheduling API. Schedule and manage reminders. Notify your customers about their appointments through SMS, emails or webhooks.

Duck as a Service
Book a session with a highly trained "code duck", to assist you with a coding problem.

Freezetab
Chrome extension. A powerful alternative to bookmarks. Groups tabs based on when you saved them, to keep them organized without extra effort.

Firefox Send
Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.

RSSUnify
Create unified RSS feeds from multiple sources.

Skypad
Simple, real-time collaborative notepad in the cloud.

TagUI
General purpose tool for automating web interactions.

A Tweet for Thought

Alex Russell on what Google looks for when hiring JavaScript developers.
 

Suggestions / Corrections

Made something? Send links via 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...

Looking for a tech conference near you? Or maybe you want to get the word out about your own conference. Two apps that might help: Conference Radar and ConferenceList.


Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly