Web Tools Weekly Issue #33 (pseudo-elements in JS, CSS/HTML, JS Libs, Uncats)

Issue #33 (pseudo-elements in JS, CSS/HTML, JS Libs, Uncats)03/06/14

Likely you've heard of or used the getComputedStyle() method to get style information of a specific element. For example, this gets you the color for the specified element:

var elColor = window.getComputedStyle(myEl).color;

The CSS property you want to read is written in camel-case, so background-color becomes backgroundColor, z-index becomes zIndex, and so on.

One lesser-known aspect of getComputedStyle() is the fact that you can pass a second parameter that lets you target the style information of a pseudo-element:

var elColor = window.getComputedStyle(myEl, ':before').color;

This will get the color value of a pseudo-element that's applied to the myEl element (whatever that happens to be). The second parameter is a string value that represents the pseudo-element. So you could also use ':after'.

Here are some notes to keep in mind when using this:

From my testing, only :before and :after pseudo-elements seemed to work. Others like :first-letter and :first-line had no effect.
You can use single or double colon syntax, with the same results
If you leave off the CSS property, it returns an object representing the full style information. Browsers seem to have different ways of handling what info is returned.
If the pseudo-element doesn't exist, the style returned for the specified property will be the initial value for that property.
Some properties return different results in different browsers. e.g. Firefox returns an empty string for background and border shorthand, but Chrome will return all the shorthand values.
IE11 seems to be the first IE browser to support this feature and getComputedStyle() in general is only supported since IE9 (polyfill here).
Firefox 4 and earlier required that you provide the 2nd argument as null when not providing a pseudo-element, so you should include this if you need FF4 support (which is doubtful).

You can check out this JS Bin demo to see this how this feature works.

This is fairly useful because, generally speaking, pseudo-elements can be a pain to deal with in JavaScript because they're not really part of the DOM. So with this you can do some interesting things to detect if styles exist, which could come in handy in some instances.

Now on to this week's tools!

CSS & HTML Tools

WOW.js
Reveal animations on scroll. "Easily customize animation settings: style, delay, length, offset, iterations..." This is worth it for the doge-based demo alone.

css perf
"A completely unscientific way of testing CSS performance." I'm sold.

css-flip
Flips styles depending on the text direction, with the ability to prevent individual declarations and rule sets from being flipped.

Parker
"a stylesheet analysis tool. It runs metrics on your stylesheets and will report on their complexity."

Bootstrap for Shopify
"A framework that makes it easy to build great [Shopify] themes, based on the hugely popular Bootstrap."

Subpixel Text Explorer
If you're into the subpixel rendering thing, check out this test page with keyboard shortcuts to make adjustments.

Formspree
A really simple option for setting up a functioning form without any PHP, JavaScript or even a log-in. Just use their URL in the action attribute. Great for static pages that need a quick form that just works.

(cs)spinner
Pure CSS loading animations with minimal effort. No extra elements needed.

Stackicons
"Icon fonts for the web, designed to do more — with multiple button shapes and a unique 'multi-color' option."

Gradientoo
A pretty simple and easy to use CSS gradient code generator with a nice big, intuitive, interface.

typebase.css
"Provides all the necessary scaffolding for good typography without adding any aesthetics. It is built to be modified as projects evolve and grow, and plays nice with normalize.css"

Effeckt.css
Not a new project, but it was still a work in progress when I first heard of it. It's a transitions and animations library with a focus on performance.

JavaScript Libraries and Frameworks

Molecule
An HTML5 game framework for desktop and mobile that's lightweight, dependency-free, easy to learn, and "built from scratch with pure performance in mind".

better-dom
"Delegated events fall short when the DOM needs to be mutated in order to initialize a widget. To handle such cases I'd like to introduce live extensions and better-dom - a new library for working with the DOM."

Oimo.js
"A lightweight 3d physics engine for JavaScript. It's a full JavaScript conversion of OimoPhysics created by Saharan on ActionScript 3.0."

fn.js
"A JavaScript library built to encourage a functional programming style & strategy."

jide.js
"JavaScript toolkit for developing rich, modern web applications. It features various powerful UI controls and is built around the concept of properties and data binding and enables highly efficient programming."

Telescope
This is what sidebar.io is built on. "An open-source app that lets you easily set up your own online community", built on Meteor.

Voodoo
Uses WebGL technology to let you "easily mix 2D and 3D content together on the same page."

L20n
"A new localization framework developed by Mozilla for the Web. It allows localizers to put small bits of logic into localization resources to codify the grammar of the language."

The Uncategorizables

JsonStub
"Fake the backend while you develop the frontend."

Deflect.io
Develop the frontend before the backend is written, simulate latency and server errors, reproduce production bugs on development environment, and more.

Haxe
A multi-platform, open-source, programming language.

Unirest
"Lightweight HTTP Request Client Libraries."

Namebox
"A simple service to help you list your unwanted and/or unused web domains for sale. It's free to use and is built to make listing your domains super fast and easy."

A Tweet for Thought

Addy Osmani quoting Yehuda Katz on how to improve as a developer (which is probably good advice for anyone in any field).

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...

Anyone considering avoiding jQuery in favour of native DOM methods, should read this friendly warning from Paul Irish and John-David Dalton.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly