|
|
|
|
Issue #103 (Computed colors, Text Editors, Testing, Data)07/09/15
 |
Inboxtrail takes the guesswork out of emailing! Run a delivery test before sending important emails and you'll never have to wonder if your message will get received. If Inboxtrail detects spam-filtering, then it's time to modify your email & test again. Only send when you know you'll land in the inbox. Try it for free. |
In previous issues, I've mentioned using getComputedStyle() and getPropertyValue() to get computed style information on any element on the page, regardless of where those styles have been defined (a stylesheet, by the browser, inline styles, etc).
If you're doing this though, one thing you'll have to deal with is the fact that color values obtained in this manner are always returned in rgb() format, rather than the more commonly used hex format.
The following would get the background color of a #box element:
|
var box = document.getElementById('box'),
clr = getComputedStyle(box).getPropertyValue('background-color');
console.log(clr); // "rgb(68, 68, 68)"
|
(JS Bin example)
Looks to me like all browsers return the same rgb() format. But interestingly, according to an older Smashing Magazine article, at that time Firefox seemed to be the only browser to return colors in rgb() instead of hex.
Personally, I don't think it matters either way. The most important thing is that all browsers handle it the same way. Then you can deal with the returned value in a standard manner, without the need to convert it for other browsers.
Couple things to note:
- If you define the value as rgba(), the returned result will, of course, be rgba().
- If the rgba() value has a transparency value of "1" (i.e. "fully opaque"), you'll get rgb() as the value with getComputedStyle().
- If you define the color in hsl() or hsla(), you get the same kind of results: rgba() if there is a transparency setting, but rgb() if there is no transparency, or if it's set to fully opaque.
Now on to this week's tools!
Text Editors, IDEs, etc.
Atom
GitHub's text editor is now at version 1.0, available for OSX, Windows, Linux, and Ubuntu.
CodeLobster
"Free portable IDE for PHP/HTML/CSS/JavaScript development."
Material Theme
"The most epic theme for Sublime Text 3."
FROONT
"Flexible tool for creating and collaborating on web design without code."
AtomPair
"An Atom package that allows for epic pair programming."
Seti
Atom theme ported to Sublime Text 3.
Light Table
"A next generation code editor that connects you to your creation with instant feedback. Light Table is very customizable and can display anything a Chromium browser can."
Vintageous
"Vim emulation for Sublime Text 3."
Testing and Debugging Tools
lowvision.support
A low vision accessibility tester that lets you see your website through the eyes of a person with a condition you choose from a dropdown.
rtop
"A simple, agent-less, remote server monitoring tool that works over plain SSH."
React Hot Loader
"Tweak React components in real time." Like LiveReload, for React.
TurboBytes
"Instantly run DNS, HTTP and Traceroute tests across the globe."
Userbrain
"Write a realistic task scenario (we help you with that). Keep getting short videos of users testing your site. Discover problems, fix them, and test again."
tota11y
"Helps visualize how your site performs with assistive technologies."
Data, Content, Documents, etc.
Dokker.js
Creates professional JavaScript code documentation.
TaffyDB
"An open source library that brings database features into your JavaScript applications."
TinyCache
"The quickest way to get your key/value datastore up and running in the cloud."
RedditStorage
"Cloud storage that uses Reddit as a backend."
zindex
"Creates and queries an index on a compressed, line-based text file in a time- and space-efficient way."
Transformy
This is pretty cool. Lets you convert your data to a new format. Just paste the whole thing in, then provide a single example of the new format and it will convert the whole thing.
Writage
"Markdown plugin for Microsoft Word."
PouchDB
"An open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser."
A Tweet for Thought
Henri Helvetica has some not-so-encouraging caching stats. We can certainly do better than that.
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...
If your project is having some trouble garnering organic interest, you might want to check out Submit.co, a resource that provides a list of websites where you can get press coverage for your startup.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
