|
|
|
|
Issue #65 (getSelection(), CSS/HTML, Productivity, JS Utils)10/16/14
Here's a method you may not have seen before. It's the window.getSelection() method and it lets you get the contents of the selected text on the page.
Here's an example that displays the selected text on the page in response to a mouseup event on the document:
var d = document,
w = window,
o = d.querySelector('output');
d.addEventListener('mouseup', function () {
o.innerHTML = w.getSelection();
}, false);
|
(JS Bin example) I've created shortcuts to the document and window objects, for brevity, but you can see that the getSelection() method is called on window (abbreviated as "w"), and then the resulting text is displayed inside the output element (abbreviated as "o").
The selection that's returned, however, is not a string; it's an object with a whole slew of its own properties. So if you try to manipulate the selected content as a string object, you'll get an error. To do any string manipulation, you have to first convert the object to a string, then perform any string manipulation. To see the properties this method exposes on the selection object, try displaying the object in the console and then you can examine the property tree.
window.getSelection() is available in all browsers including IE9+. For Old IE support, you can check out this StackOverflow thread, which discusses some IE-only workarounds.
Now on to this week's tools!
CSS and HTML Tools
draGGradients
"A simple tool to generate and customize multiple css3 radial gradients."
Traviz
A Chrome extension that "allows you to find all elements on a page with a specific style of your choosing. You decide which CSS property, and the value for that property, to search for."
Hartija
A "universal" print style sheet.
Material Design for Bootstrap
A theme for Bootstrap 3 that lets you use the new Google Material Design.
CSS URL Rewriter
"There are many reasons why you would want to systematically replace URLs in CSS code: to convert them into data URIs, to point them to a CDN, to replace a filename with an auto-generated one, and so on."
dropcap.js
A script to mimic an upcoming specification that allows you to define a drop cap with just CSS.
AMCSS
A methodology that encourages attribute selectors instead of classes for targeting elements in CSS.
Random CSS Gradient Generator
Let's you "roll the dice" to grab a random gradient and then get the code in HSL, RGB, or Hex format.
select-css
A stylesheet for attractive custom select elements, IE10+.
Viewport Units Buggyfill™
A "buggyfill" that fixes viewport units in IE9+ and Mobile Safari.
Open Source Email Templates
"A collection of free email templates created and managed by the sendwithus team and community."
Bear CSS
"Generates a CSS template containing all the HTML elements, classes and IDs defined in your markup."
| Support Web Tools Weekly: 384 pages of CSS for $7 |
Productivity Tools
Chat.cc
"Turns your email conversations into a real-time chat. No app to download, just email your friends copying go@chat.cc."
Scribbleton
"The little personal wiki."
ChatGrape
"The intelligent chat that makes your team communication twice as fast."
Teamreporter
"Kills your status meetings by replacing them with scheduled report mails."
5iler
A web app or native Mac app, its goal is to simplify note taking into 5 repurposable categories.
Planleaf
"Lightweight team collaboration. Collaborate completely over email with anyone, anywhere."
Spectacle
A Mac app that "allows you to organize your windows without using a mouse."
dot-clipboard
"Monitors your clipboard and runs user-defined scripts based on the clipboard content."
JavaScript Utilities and Mini Libraries
Fitter Happier Text
"Performant, fully fluid headings."
Franc
"Detect the language of text."
Sweet Alert
"A beautiful replacement for JavaScript's 'Alert'."
fake-identity.js
"Generate random identity objects including name, address, etc. This may be useful if you are trying to fill your application with random personal data."
Gifshot
"JavaScript library that can create animated GIFs from media streams, videos, or images."
ineed
"Web scraping and HTML-reprocessing. The easy way."
lockr
"A minimal API wrapper for localStorage."
storage
"Asynchronous browser storage with multiple back-ends (IndexedDB, WebSQL, localStorage)."
formatter.js
"Format html inputs to match a specified pattern." (Credit card, phone number, etc.)
| Support Web Tools Weekly: 384 pages of CSS for $7 |
A Tweet for Thought
Apparently, as Wes Bos points out, you can put script tags in your DNS info.I don't have a clue if that would actually do anything, but the domain in that example looks pretty shady.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.
Before I Go...
This looks useful: tl;drLegal. It's a database of software licences interpreted into "plain English".
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
