|
|
|
|
Issue #147 (CSS.supports, Git/CLI/CLI, Productivity, JS Utils)05/12/16
| Support this week's primary sponsor: |
 |
Senior UI/JavaScript Frontend
Join our team and work from anywhere in the world! We're looking for an experienced full-time Frontend Developer who has a strong understanding of web technologies and wants to help design, implement, and launch major user-facing features. Find out more here! |
You've probably heard of using @supports in your CSS to perform feature queries, similar to what we do with Modernizr or other feature detection scripts. Well, maybe you didn't know you can also do the same tests in your JavaScript using the CSS.supports() method. All browsers with the exception of IE11 and earlier have implemented @supports as well as CSS.supports().
It's simple to use:
|
// I ran these tests in Chrome
console.log(CSS.supports('display', 'flex')); // true
console.log(CSS.supports('object-fit', 'none')); // true
console.log(CSS.supports('color', 'currentColor')); // true
console.log(CSS.supports('hyphens', 'auto')); // false
|
As noted, I ran that code in Chrome, so three of the four tests returned true. Chrome doesn't support CSS hyphenation, so it returned false for the last one.
Instead of passing in two strings as a property/value pair (as I did in the examples above) you also have the option to use a supportCondition argument, which would look like this inside the log method:
|
CSS.supports('( animation: none ) or ( -webkit-animation: none )');
|
(JS Bin demo)
So it's basically the same idea as using @supports in CSS, so if you already know the syntax for @supports, then you know this too.
Now on to this week's tools!
Git, GitHub, and CLI Tools
trymodule
"A simple cli tool for trying out different nodejs modules."
jo
"JSON output from a shell."
Statuspage
"A statuspage generator that lets you host your statuspage for free on GitHub. Uses issues to display incidents and labels for severity."
binder
"Turn a GitHub repo into a collection of interactive notebooks powered by Jupyter and Kubernetes."
weblog.sh
"Blog from the command line. This is a blogging platform boiled down to its core. The only features are saving drafts, and publishing them."
desk
"A lightweight workspace manager for the shell."
Gerrit Code Review
"Code Review for Git. Gerrit provides web based code review and repository management for the Git version control system."
git-time-machine
"Atom package that allows you to travel back in commit history."
Web-ext
A command line tool to help build, run, and test web extensions (an API for browser plugins).
CodeHub
"The most complete, unofficial, client for GitHub on the iOS platform."
Productivity Tools
Teasy
"A tiny tool to make teaching easier. Teasy allows to select an application window to be mirrored into an external monitor window."
Hubl.in
"A free and open source video conference solution built with love and designed with ethics in mind."
Turtl
"A private place to keep your notes, research, passwords, bookmarks, dream logs, photos, documents and anything else you want kept safe."
CodeHalf
"A simple tracker to help you establish and keep up a habit of writing code and learning every day."
BrainDump
"A simple, powerful, and open note taking platform that makes it easy to organize your life."
Vuvuzela
"A messaging system that protects the privacy of message contents and message metadata."
IRCAnywhere
"An open source web based IRC bouncer application written in JavaScript. It's designed to be a free alternative to IRCCloud."
Tab Organizer
Chrome extension. "Organizes tabs in current window by grouping them by URL."
To Round
A mobile task manager (iOS and Android) showing your tasks as bubbles in a funnel.
Wmail
"The missing desktop client for Gmail & Google Inbox."
JavaScript Utilities and Mini Libraries
Bricklayer
"A lightweight and independent Pinterest-like cascading grid layout library."
LinkValue
"A tiny library designed for making complex forms in React easier to build."
Tribute.js
"Native ES6 JavaScript @mention plugin."
Scrollbear
"Maintains the container scroll position when images loaded. Scrollbear is suitable in blog platforms where exist many photos and images."
randomColor
"A color generator for JavaScript."
can-zone
"A library that tracks asynchronous activity and lets you know when it has completed."
cwait
"Provides a queue handler (TaskQueue) and a wrapper (Task) for promises, to limit how many are being resolved simultaneously."
es-search
"Search a directory/file containing ECMAScript code and find complex structures using a CSS Selector-like syntax."
buble
"The blazing fast, batteries-included ES2015 compiler." Has some differences compared to Babel.
Blob.js
"Implements the W3C Blob interface in browsers that do not natively support it."
A Tweet for Thought
Jochen Wolters expresses the reality of the open office concept.
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 like writing music and code, then you might want to check out Klangmeister.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
