Issue #191 (Animations API, Frameworks, Testing, Uncats)03/16/17
Anyone remember the Web Animations API? OK, maybe it hasn't been completely forgotten, but it seems like forever ago that this API was first introduced, and I don't feel like there's a lot of talk about it.
You might be wondering what the status of it is, browser support, and where you can keep an eye on its development. Here are a few notes, links, and resources:
- A basic definition of the API is described nicely on MDN: "The Web Animations API allows for synchronizing and timing changes to the presentation of a Web page, i.e. animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model." (source)
- Browser support for the Web Animations API is still kind of mediocre. Only partial support so far in Chrome and Firefox and a few others. (source)
- The best news for browser support seems to be in Firefox, which, according to this site, has full green support in the latest nightlies.
- If you want to test support in Chrome or another browser, you can use this CodePen. Looks like latest Canary is looking decent, with more support than latest Chrome stable.
- Here's a polyfill if you want better support and don't mind some bloat (~45kb minified).
- The first version of the spec was published in 2013, so technically it's 4+ years in the works now. Here is the latest editor's draft.
- There's an update on spec progress in this recent post by one of the spec authors.
- As far as articles and general info, there are lots of decent intros. Some are older, but I believe they are still relevant. A web search should bring up lots of options for you, so I won't link any here.
- Subscribe to Web Animation Weekly if you want regular articles and news on animation-related stuff, including info on this API.
As with any technology, browser support is the key to getting developers to start using it. So I think in the next year or so this one will probably gain a a lot more interest.
Now on to this week's tools!
|
Front-end Frameworks
Ionic
Now at version 2.x. The beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.
Quasar Framework
SPA front-end on steroids. Build responsive websites, hybrid mobile Apps (that look native!) and Electron apps using same code, with VueJs 2.
vue-webpack-boilerplate
A VueJS webpack template to setup a Framework7 project with Cordova.
Material Components
Modular and customizable Material Design UI components for web, iOS, and Android.
preact-starter
Webpack2 boilerplate for building SPA / PWA / offline front-end apps with Preact.
Vuetify.js
A component framework for Vue.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze.
Parasail
A minimalistic CSS framework using Sass and Flexbox. It's main feature is a Flexbox-based grid system that lets you create responsive layouts easily.
Quark
A microscopic atomic CSS polyfill in 140 bytes. Use Quark.js as a tiny 'atomic' CSS polyfill in JS to skip writing CSS and style your HTML using classes instead.
Electrode
A Platform for building universal React/Node.js applications.
react-mvi
Minimal framework for React + RxJS MVI architecture.
Keen UI
A lightweight collection of essential UI components written with Vue.js and inspired by Material Design.
|
Testing and Debugging Tools
WebPageTest Bulk Tester
Google App Script for spreadsheet that uses the WebPageTest API to bulk test URLs.
report-uri.io
Real-time security reporting for your site. Sends a violation report to the service to monitor exactly what security policies are being triggered, and why.
pkg-ok
Prevents publishing an NPM module with bad paths.
fmt-obj
Prettifies any JavaScript object in your console.
Sazerac
Library for data-driven testing in JavaScript. Works with Mocha, Jasmine, and Jest. Using Sazerac, and the data-driven testing pattern in general, will reduce the complexity and increase readability of your test code.
DejaVue
Application visualization and time travel for Vue.js. Better understand your application structure as you test it. Identify which components have changed and what those changes were.
avoriaz
A Vue.js testing utility library.
Shrimpit
A small CLI analysis tool for checking unused JavaScript, JSX & Vue templates and ES6 exports in your project.
HTTP/2 Test
Online HTTP/2 test. Verify if your server or CDN supports HTTP/2.
|
The Uncategorizables
Thinkific
Gives you everything you need to easily create, market, and sell your own online courses.
JSDOW
Chart daily, weekly or monthly downloads numbers of any npm package. Is the package trending up or down? Is it outperforming its alternatives and the JSDOW? Invest time, efforts in strong, trending packages.
Heap
Automates away the annoying parts of user analytics. No manual event tracking. No messy tracking plans. No custom ETL pipelines. Just insights. For everyone on your team.
Flynn
An open source platform-as-a-service (PaaS) for running applications in production.
resinOS
Run Docker containers on embedded devices. A host OS tailored for containers, designed for reliability, proven in production.
Mosho
A URL shortener that uses emojis for the url characters.
TellForm
A free, opensource form builder similar to Google Forms or TypeForm that can create stunning forms for recruiting, market research and more.
|
|
