|
|
|
|
Issue #154 (eventPhase, CSS/HTML Tools, Testing, Deployment)06/30/16
The event object has a property called eventPhase, which lets you see "which phase of the event flow is currently being evaluated." Here's an example, used in a function triggered on a click event:
|
el.addEventListener('click', function (e) {
console.log(e.eventPhase); // logs "2"
}, false);
|
The return value of the eventPhase property is an integer (as shown in the comment in the code) indicating the phase of the event flow. If you've researched event capturing, bubbling, and similar concepts, then the meanings of the events should be fairly straightforward. Here's a quick summary:
- 0 - No event is being processed
- 1 - Capturing phase (event is being propagated through the target's ancestor objects)
- 2 - The event has arrived at the event's target
- 3 - Bubbling phase (event is propagating back up through the target's ancestors in reverse order)
I've created a JS Bin that demonstrates using a couple of div elements. When using the addEventListener() method, the last argument, normally omitted or set to false can be set to true, which means you are registering the event for capture mode, like this:
|
el.addEventListener('click', function (e) {
console.log(e.eventPhase); // logs "1"
}, true); // set to "true" for capture mode
|
Fiddle with the demo and visit the links below for more info:
Now on to this week's tools!
CSS and HTML Tools
Server Components
"A simple, lightweight tool for composable HTML rendering in Node.js, based on web components."
FlexboxLayout
"A library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android."
jile
"Manage your styles in JavaScript with the full power of CSS."
Picnic CSS
Recently updated. "A beautiful CSS library to kickstart your projects."
Pills
"A simple, responsive, and tiny CSS grid for humans."
Michelangelo Styleguide
"Some styleguides are built in static HTML, but this is difficult to maintain. A better solution would be a living styleguide, which is auto-generated from the comments in your codebase."
Starability.css
"Accessible rating forms with cute animations on top."
Tocbot
"Generate a table of contents based on the heading structure of an HTML document."
CSS to React
"This simple little tool is intended to help translate plain CSS into the React in-line style specific JSON representation."
Foundation for Emails
Now at version 2.x. "Quickly create responsive HTML emails that work. Even on Outlook."
Testing and Debugging Tools
React A11y
"Warns about potential accessibility issues with your React elements."
Mock Node
A configurable mock server with an intuitive configuration management interface and an HTTP API.
Why did you update, bruh?
"A function that monkey patches React and notifies you in the console when potentially unnecessary re-renders occur. Super helpful for easy perf gains."
Gor
"An open-source tool for capturing and replaying live HTTP traffic into a test environment in order to continuously test your system with real data."
WebGazer.js
"An eye tracking library that uses common webcams to infer the eye-gaze locations of web visitors on a page in real time."
Firefox Test Pilot
"Test new Features. Give us feedback. Help build Firefox."
RASON
"A modeling language embedded in JSON and a REST API that makes it easy to create, test and deploy analytic models using optimization, simulation, and data mining, in web and mobile applications."
Website Grader
An online tool to test your website for perf, mobile, SEO, and security flaws.
lighthouse
"Auditing and performance metrics for Progressive Web Apps."
Local or Live
Chrome extension. "Fed up of accidentally looking at a live site when making local changes? Add a banner to sites to indicate whether it's local or live in one easy step."
Mobile Website Speed Testing Tool
"Test how mobile-friendly your site is. Find out how well your site works across mobile and desktop devices."
Deployment, Task Runners, etc.
Otto
"Otto abstracts away this complexity into one tool to handle all the aspects of development and deployment to any cloud platform."
BuildMaster
"Create complex release pipelines all managed from one central dashboard. Accessible for the whole organization, BuildMaster promotes effortless communication between teams and individuals."
scripty
"We wrote scripty to help us extract our npm scripts—particularly the gnarly ones—into their own files without changing the command we use to run them."
Habitus
"A standalone build flow tool for Docker. It is a command line tool that builds Docker images based on their Dockerfile and a build.yml."
Lerna
"A tool for managing JavaScript projects with multiple packages."
Jenkins
Now at version 2.x. "The leading open source automation server, Jenkins provides hundreds of plugins to support building, deploying and automating any project."
A Tweet for Thought
Gaël Métais shares a 125-line CSS selector, apparently from the source of a real site.
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...
This looks great: A Kickstarter for a dime-sized iPhone storage expansion unit that's almost reached its funding goal.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
