Issue #203 (PointerEvents API, jQuery, React, Testing/Debugging)
If you write a lot of CSS, then you're probably pretty familiar with the pointer-events property, which now has full browser support across the board, including IE11 and Edge.
But maybe you aren't as familiar with the W3C's Pointer Events spec, which describes a full-blown API based on a PointerEvent object. Support for this API is not quite where we'd like it to be, but it's getting there.
The article Pointing the Way Forward by Google's Sérgio Gomes is a good gentle intro. I like how he describes what the API all about:
"Over time, it became increasingly important that not everything was (or pretended to be) a mouse: you could have pressure-sensitive and tilt-aware pens, for amazing creative freedom; you could use your fingers, so all you needed was the device and your hand; and hey, why not use more than one finger while you’re at it? [...] Pointer events unify the pointer input model for the browser, bringing touch, pens, and mice together into a single set of events."
Definitely a feature to keep an eye on for those that expect to build apps that deal with different types of pointing devices. For more info see also Pointer Events on MDN
Now on to this week's tools!
jQuery Plugins and Tools
This is different. Creates a carousel/slider in the form of a timeline, with lots of options and customizations.
Let's you easily add one of those sticky sidebar content blocks that scrolls until the block reaches the top of the page, then it sticks.
An event based jQuery plugin for client-side validation of HTML forms.
A lightweight jQuery plugin you can use to detect if the fields of a form had been modified. If a field has been modified then the form is "dirty".
An ultra-simple, customizable, light-weight date picker plug-in for jQuery at just over 7KB compressed.
A tiny requestAnimationFrame-powered 60+fps lightweight parallax hover tilt effect for jQuery.
jQuery autocomplete plugin with support for the `datalist` element.
Next-generation, highly customizable content editor for the browser, based on React and Redux. WYSIWYG on steroids.
Still in early development. React renderer for creating PDF files in the browser, mobile, and server.
A fast, versatile virtual-render list component for React.
Clean and robust state management for React and React-like libraries.
Create Next App
The easiest way to create a React app with server-side rendering thanks to Next.js.
Beautifully and deterministically animate anything in React.
Creates one of those website tours using React.
React component styling solved with an elegant API, small footprint, and great performance.
React Router v4 helper components.
Testing and Debugging Tools
Chrome DevTools extension for debugging Vue.js applications.
A page to display compatible browsers from a `browserslist` string.
PostCSS Browser Reporter
PostCSS plugin to report warning messages right in your browser about other faulty plugins.
Who runs this
Chrome extension that looks up the registrant organization of a domain and uses the CorpWatch API and Wikipedia to find the parent company and a short description.
Navigation scripting and testing utility for PhantomJS and SlimerJS.
CA App Synthetic Monitor
Monitors your websites and servers, providing up to date information about the reachability of your website. Alerts are sent by e-mail, SMS (text message), or RSS.
A Tweet for Thought
Maciej Cegłowski starts a discussion on whether or not front-end development is pathologically overcomplicated.
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...
Thanks to all for subscribing and reading!