|
|
|
|
Issue #72 (elementFromPoint(), CSS/HTML, Sass, Productivity)12/04/14
There's a little-known DOM method called elementFromPoint() that returns the element that is the topmost element from the coordinates passed to the method. That element can then be manipulated in whatever way we want, using other DOM methods.
Here are a few examples of how we might use it:
// logs text of targeted element
console.log(document.elementFromPoint(50, 50).textContent);
// changes color of text of element
document.elementFromPoint(50, 50).style.color = 'lightblue';
|
The first example displays the text content of the element that's top most from the coordinates "50, 50" (meaning 50px from top and left of window). The second example targets the same element but this time the color property of that element is changed.
Every time you change the coordinates, you have the potential to get a different element as a result. As the name implies, only a single element is returned.
Here's a JS Bin demo that uses elementFromPoint() to display the text content of the selected element, using different buttons to target different elements with coordinates.
The coordinates could be outside the document, in which case the result would be null. Notice also, if you fiddle with the coordinate values in that demo, at certain pixels, the nearest element will be the body element. This can happen if the coordinate point is in one of the margin areas.
This method is supported all the way back to IE5.5 and you read more about it on MDN.
Now on to this week's tools!
| Support Web Tools Weekly: 384 pages of CSS for $7 |
CSS and HTML Tools
Gulp-cssurl
A Grunt plugin to systematically replace URLs in CSS code with a tool called cssurl, featured in a previous issue.
TagCounter
Chrome extension to get stats on what kinds of tags, and how many, are used to build a page. Can also filter by HTML5, unknown, obsolete, SVG, etc.
CSS Hat 2
The newest version of the Photoshop plugin that lets you select any Photoshop Layer and get CSS instantly.
ProtoTool
A Chrome extension that auto-loads your CSS after edits and that also offers a Media query view, diff mode, and more.
Lining.js
A library that offers complete control over styling specific lines of text in paragraphs, using features that mimic ::nth-line(), ::nth-last-line(), and ::last-line.
Dashboards
"Responsive dashboard templates for Bootstrap."
CSS Dig
Chrome extension. "Analyze your CSS in a new way. Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with."
CSS-Grid-Polyfill
"A working implementation of css grids for current browsers."
SmartUnderline
A JavaScript utility to correct the way underlines appear in HTML, causing the underline to appear behind line descenders.
a11y.css
"This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet."
strip-css-comments
JavaScript API and CLI tool that removes comments from CSS. Available as a Grunt, Gulp, or Broccoli plugin.
BeeFree
A free HTML email builder with predefined templates.
FormKeep
"Form endpoints for designers and developers. No iframes, JavaScript embeds, or CSS overrides."
csstyle
"A modern approach for crafting beautifully maintainable stylesheets" that makes your CSS readable and semantic, generating your selectors for you, and automatically handling things like specificity and nesting.
Sass and Preprocessor Tools
elf
"A small but powerful Stylus grid built with calc()."
woocss
"Sass libsass framework for responsive development."
su
"DIY Grid Engine – the simplest form of Susy."
sass-mq
"A Sass mixin that helps manipulating media queries in an elegant way."
Hitch
"A small (5.5k gzipped) JavaScript prollyfill engine which provides an extension model for CSS and HTML."
PostCSS
"A framework for CSS postprocessors, to modify CSS with JavaScript with full source map support."
base.sass
"Awesome extensions for Sass."
css-burrito
"An organizational Sass template."
Productivity Tools
Bookmark Manager
"Chrome Bookmarks and the Bookmarks Manager are now more powerful by incorporating the smarts of Google Search with a new modern UI."
Flowdock
"Chat and inbox for teams. One place to talk and stay up-to-date. Flowdock is a team collaboration app for desktop, mobile and web."
CodeShare
"Share code real-time in your browser with other developers."
Ditto
"An extension to the standard Windows clipboard. It saves each item placed on the clipboard allowing you access to any of those items at a later time."
Pushbullet
Never miss a call or text again while working at your computer. Send files from your computer to your phone with a click. The easiest way to get links from your computer onto your phone.
Markdown Here
A tool that makes writing email as painless and satisfying as writing a GitHub README file.
Wikiwand
Chrome and Firefox extension. "Good old Wikipedia, great new look. A beautiful new interface to Wikipedia."
Inbox Checkup
"Want to know if you’re mastering email or if it’s mastering you? Give your inbox a checkup. The Inbox Checkup scans your inbox, extracts key metrics and compares them to everyone else’s."
| Support Web Tools Weekly: 384 pages of CSS for $7 |
A Tweet for Thought
Croatian developer Mislav Marohnić shares a touching story about a GitHub newbie.
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...
Check out Dave Rupert's comic strip (didn't know he did that sort of thing!) called How Browsers Market Themselves.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
