|
|
|
|
Issue #106 (currentTarget, CSS/HTML, Performance, App Data)07/30/15
| Support this week's primary sponsor: |
 |
Did you properly cross browser test your latest layout changes? No? Maybe because cross browser testing just sucks? Lucky for you we have created BrowseEmAll, a cross browser testing solution that is still fun to use! Start your 14-day free trial today, we are sure you will love it!  |
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');
parent.addEventListener('click',function(e) {
console.log(e.target.className);
console.log(e.currentTarget.className);
}, false);
|
(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:
- 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.
More on this on MDN's currentTarget article.
Now on to this week's tools!
CSS and HTML Tools
CSS.escape
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.
Gradify
"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."
ReactCSS
"Bringing classes to inline styles."
Stiler
"Encapsulated styling for your JavaScript components with all the power of JavaScript and CSS combined."
chewing-grid.css
A CSS grid for card-based (tile) designs. Responsive without media queries, with Sass support.
Performance Tools
jsRequest
"A JavaScript framework for fast and easy asynchronous JavaScript files loading."
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).
Grunt YSlow
"A Grunt task to measure and grade web page performance."
HTTP Test
"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."
Calibre
"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.
JSON Generator
A JavaScript/JSON object generator to produce complex mock data for testing your apps.
DevData
Lets you select common data sets (countries, U.S. states, airport codes, etc.) in the correct format for different programming languages.
Fake IndexedDB
A pure JavaScript in-memory implementation of the IndexedDB API.
JSpreadsheets
A collection of JavaScript-based open source spreadsheets and data grids, sortable by GitHub stars, forks, etc.
pdfmake
"Client/server side PDF printing in pure JavaScript."
hyhyhy
"A Ruby library for creating and outputting professional, business-looking (HTML5) presentations that can be viewed inside the browser."
lorempixel
Placeholder images with an online generator that includes categories, color/gray option, and the ability to add text to an image.
FolderBuilder
"Folder builder tool to help developers in the planning stage of their projects."
A Tweet for Thought
Fiona Condon nicely summarizes the two types of JavaScript comments.
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!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
