Issue #373 (Font API, Media, JS Libs, Vue)09/10/20
The Google Developers team recently posted a new article in their web.dev resource that's worth checking out: Use advanced typography with local fonts.
The article is a bit of a history lesson on how developers have handled web fonts in the past, leading up to the primary focus of the piece: the Local Font Access API, which is currently an unofficial spec in the feedback stage.
One interesting point in the article is about the little-known local() function:
"An interesting fact, though, is that the src property in the @font-face declaration, apart from the url() function, also accepts a local() function. This allows custom fonts to be loaded (surprise!) locally ... The problem with the local() function is that it can be abused for browser fingerprinting."
The article then presents a solution: the Local Font Access API that does two things:
- Allows users to grant access to the full set of available system fonts, so developers can reference those fonts if they're available instead of making the browser download them.
- Allows developers to have access to full font data.
Currently the feature can be enabled using a Chrome flag and you can feature detect it:
|
if ('fonts' in navigator) {
// The Local Font Access API is supported
}
|
Once you've confirmed support, you can ask the user to allow access to their fonts via the navigator.permissions.request() method which returns a Promise.
The article has more details on how to use it if you want to read up on that. But as mentioned, this is still in the early stages. This is certainly an interesting and potentially game-changing feature that could make web fonts even more powerful and flexible.
Now on to this week's tools!
|
Media Tools (SVG, Video, etc.)
threejs-mesh-modifiers
A library of modifiers for three.js objects, including modifiers such as Bend, Bloat, Noise, Skew, Taper, etc.
Iconpie
Online app to build out all your favicon and app icons in 50 different sizes.
PeerJS
Simplifies WebRTC peer-to-peer data, video, and audio calls. Wraps the browser's WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer connection API.
Mugshot Bot
Create free social images for Twitter cards, Facebook sharing, Open Graph, and more. Just enter a URL.
Bootstrap Icons
The official icon set from the Bootstrap team is now at version 1+.
Retrobatch
Flexible, super charged, batch image processing for Mac.
SVGuitar
JavaScript (TypeScript) library to create beautiful SVG guitar chord charts directly in the browser.
GraphAV
A graph algorithms visualizer built using React, Typescript, and Styled Components.
React Fast Charts
Blazing fast charting library with loading time less than 50ms; built from scratch.
Muze
Free data visualization library for creating exploratory data visualizations (like Tableau) in browser, using WebAssembly.
Lightweight Charts
Now at version 3+. Financial lightweight charts built with HTML5 canvas.
Icons8 Animated Icons
Now at version 2+. 900+ animated icons available in JSON for Lottie, GIF, and After Effects format.
Recommended Reading for Developers:
|
JavaScript Libraries and Frameworks
Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity. promoted
Ct.js
An open source 2D game editor that makes learning programming fun and game development easy by its visual tools, good docs, and flexible, modular library.
TypeORM
Object-relational mapping library that can run in Node, the Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, and Electron and can be used with TypeScript and ES5+.
G6
Now at version 3+. A graph visualization engine in TypeScript that provides a set of basic mechanisms including rendering, layout, analysis, interaction, animation, and other auxiliary tools.
Snabbdom
A lightweight virtual DOM library with a focus on simplicity, modularity, powerful features, and performance.
Staq
A JavaScript library for creating Software-as-a-Service (SaaS) businesses. Works with React, Firebase, and Stripe to abstract away the boring parts of building software.
Angular
Now at version 10+, details here.
math.js
Now at version 7+. An extensive math library for JavaScript and Node.
Electron
The popular library and toolset for building desktop apps with front-end technologies is now at version 10+.
Financial
A zero-dependency TypeScript/JavaScript financial library for Node.js, Deno, and the browser.
Barleytea.js
A transparent, modular framework that aims to make building apps more familiar by staying close to vanilla JavaScript and offering similar features to other frameworks.
CindyJS
A framework to create interactive mathematical content for the web. The demos are pretty neat.
|
Vue Tools
VueDemi
A utility that allows you to write universal Vue libraries for Vue 2 and 3.
Noodel.js
Short for node model. A 4-way scroll-snap user interface for content trees that you can navigate by simply moving up, down, left and right. Try it here.
Vuesence Book
Minimalistic Vue-based documentation system component.
vue-list-scroller
Simple and easy to use Vue.js component for efficiently rendering large lists using infinite scroll.
vue-devtools
Now at version 6+. Browser developer tools extension for debugging Vue applications.
vue-flux
An image carousel/slider that comes with 20 cool transitions. Demos here.
Vue Watch
A directory of Vue plugins searchable and filterable by pre-defined categories.
Villus
A small and fast GraphQL client for Vue.
vc2c
Convert Vue class APIs to Vue composition APIs in Vue components written in Typescript.
vue-slick-carousel
Another Vue carousel component option with support for true SSR and strong performance.
Vue Gridmultiselect
A simple multi-select component with items displayed in a table interface.
|
A Tweet for Thought
Is this an accurate summary of what is coding?
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...
If you want to create your own little relaxing background music for working, check out Lo-Fi Player. It has an interactive game-like environment to build "scenes". And you can also try live customizing it via chat on the YouTube stream. That's pretty cool!
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
