Issue #106 (currentTarget, CSS Tools, Performance, App Data)
(Skip to the tools section below)
When an event is triggered on an element, two properties help to identify the element: the target property and the currentTarget property. Assuming we have a .parent element with a .child element inside it, look at the following code:
var parent = document.querySelector('.parent');
(JS Bin demo)
In the demo, instead of logging the results, I'm adding them to the page. Notice that there is a different result when you click on the parent element compared to clicking on the child. This is a simple way to demonstrate the difference between target and currentTarget. To explain:
More on this on MDN's currentTarget article.
- event.target is the element that triggered the event. In this case, it would be whichever element you clicked on. So the result would log either "parent" or "child", depending on where you click.
- event.currentTarget is the element on which the event listener is being processed. So in this case, it will always be the "parent" element, even if you click on the "child" element.
Now on to this week's tools!
CSS and HTML Tools
A polyfill for the new CSS.escape() method, defined as part of the new CSS Object Model.
CSS conic-gradient() polyfill
A polyfill for the new conic-gradient() syntax.
Bulletproof email buttons
An online visual tool to help you produce code for beautiful buttons for all email clients.
"Finds the most prominent colors in any image, and produces a scalable, responsive CSS gradient. This can provide a less jarring experience as image placeholders."
"Bringing classes to inline styles."
A CSS grid for card-based (tile) designs. Responsive without media queries, with Sass support.
Mobile Perf Bookmarklet
A bookmarklet by Steve Souders that displays a small popup window with links to load other popular perf-related bookmarklets (YSlow, Firebug Lite, etc).
"A Grunt task to measure and grade web page performance."
"Compare the first and last byte speed of two websites in 5 seconds. Compare the speed of two websites from different locations around the world."
"Tracks how long your pages take to load, how big or small your pages are becoming. Janky page? You'll know about it straight away."
Mobile Insights Monitor
"Monitor the Mobile PageSpeed score from this unique app. Add all the URLs that you need to track and the tool will work in the background to inspect your sites' Mobile Page Speed score."
Content, Files, Databases, etc.
Lets you select common data sets (countries, U.S. states, airport codes, etc.) in the correct format for different programming languages.
"A Ruby library for creating and outputting professional, business-looking (HTML5) presentations that can be viewed inside the browser."
Placeholder images with an online generator that includes categories, color/gray option, and the ability to add text to an image.
"Folder builder tool to help developers in the planning stage of their projects."
A Tweet for Thought
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...
Slidenjoy, a light and portable way to easily add two extra screens to a computer, is a Kickstarter that has reached its funding goal and is well worth checking out.
Thanks to all for subscribing and reading!