Issue #203 (PointerEvents API, jQuery, React, Testing)06/08/17
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
Timeline.js
This is different. Creates a carousel/slider in the form of a timeline, with lots of options and customizations.
Sticky Sidebar
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.
jQuery Prove
An event based jQuery plugin for client-side validation of HTML forms.
dirrty
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".
glDatePicker
An ultra-simple, customizable, light-weight date picker plug-in for jQuery at just over 7KB compressed.
Tilt.js
A tiny requestAnimationFrame-powered 60+fps lightweight parallax hover tilt effect for jQuery.
Flexdatalist
jQuery autocomplete plugin with support for the `datalist` element.
Accessible Offcanvas
jQuery plugin and CSS-based off-canvas navigation that uses JavaScript to dynamically adds WAI-ARIA roles to make your site navigation more accessible.
|
React Tools
ORY editor
Next-generation, highly customizable content editor for the browser, based on React and Redux. WYSIWYG on steroids.
react-pdf
Still in early development. React renderer for creating PDF files in the browser, mobile, and server.
react-windowed-list
A fast, versatile virtual-render list component for React.
fr(e)actal
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.
React Move
Beautifully and deterministically animate anything in React.
reactour
Creates one of those website tours using React.
glamorous
React component styling solved with an elegant API, small footprint, and great performance.
rrc
React Router v4 helper components.
|
Testing and Debugging Tools
Vue.js devtools
Chrome DevTools extension for debugging Vue.js applications.
Jest
Facebook's JavaScript and React testing solution is now at version 20.
browserl.ist
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.
CasperJS
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...
You might want to try out edabit, a new site that lets you learn to code with interactive challenges. Current languages are JavaScript, Python, and Java.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
