Issue #212 (@font-face, Vue.js Tools, Media, Uncats)08/10/17
What's the status of @font-face support in browsers nowadays? Well, if you've been embedding custom fonts for some time now, then you're probably familiar with the history surrounding bulletproof web fonts:
So most of us have been using that updated syntax, which you can produce automatically for any appropriately licensed font using Font Squirrel's Webfont Generator. The syntax basically looked like this:
|
@font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont.eot#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont#myfont') format('svg');
font-weight: normal;
font-style: normal;
}
|
This ensured support in all browsers, even going back to old versions of IE, with certain parts of the syntax fixing some bugs in those older browsers.
But today, the default settings for Font Squirrel's generator produce the following:
|
@font-face {
font-family: 'myfont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
|
WOFF and WOFF2 combined have strong browser support everywhere including IE9+, so unless you're concerned with something like old IE or old Android, this is now all you need.
CSS-Tricks has a pretty solid yet succinct explanation of the different levels of @font-face support and which syntax you'll want to consider, so check that out for more details.
Now on to this week's tools!
|
Vue.js Tools
vue-table-component
A straightforward Vue component to filter and sort tables.
vue-recyclerview
Vue component for dealing with long scrolling content lists.
vue-easy-gantt
A simple Vue.js gantt chart plugin for presenting weekly tasks.
Vue-infinite-loading
Mobile-friendly infinite scroll plugin for Vue.
VeeValidate
A plugin for Vue.js that allows you to validate input fields and display errors in an easy and powerful way.
Veudeux
A lightweight open-source utility layer for binding Vuex to Redux that allows developers to reuse their pre-existing Redux state management libraries.
vue-picture-input
Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more.
vue-play
A minimalistic framework for demonstrating your Vue components, inspired by react-storybook.
|
Multimedia Tools
Online WebP Converter
Convert your image files into the more efficient WebP format (Chrome and Opera only on Desktop). 8mb max with option to choose quality level for output.
Scribbletune
Node.js module that helps you construct musical ideas with JavaScript String & Array functions and export them as MIDI files.
Animated Icons
A small, free, SVG-based animated icon set.
Soapbox
Chrome extension that enables anyone to record, edit, and share high-quality videos in minutes.
Feather
Extensive, free, SVG-based static icon set.
Nile.js
Scalable peer-to-peer live video streaming.
Vecteezy Editor
Online, full-featured SVG editor.
SVG to PNG
Free online tool to convert SVG files to PNG quickly and easily.
Vidlery
Free animated backgrounds for your homepage.
|
The Uncategorizables
Domainoji
Register an emoji-based domain name.
PaveAI
Turn your Google Analytics data into insights using AI technology.
Slate
Helps you create beautiful, intelligent, responsive API documentation.
Mitch I/O
Service to allow you to monetize excess work so you never need to turn down freelance work.
Buttondown
Email newsletter builder and campaign service. Free up to 1000 subs, $5 per thousand after that, which is pretty reasonable.
Type Hero
Test different Google fonts on beautiful backgrounds and colors.
Boolean
Send single question yes/no surveys. Get loads of feedback.
10 Minute Mail
Disposable email service.
|
A Tweet for Thought
CSS in a nutshell for many of us.
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...
If you're a remote worker, you might enjoy Remote stash, a hand-picked directory of the best free resources for remote workers. Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
