Web Tools Weekly Issue #98 (cssRules object, CSS/HTML, Mobile, Code Editors)

Issue #98 (cssRules object, CSS/HTML, Mobile, Code Editors)06/04/15

Support this week's primary sponsor:

JavaScript Error Monitoring
Recreating an error is vitally important to fixing it. Try our powerful event recording system and capture context about your application, network, and visitor actions that led to an error. We call this Error Telemetry, and it's like having an airplane's BlackBox for your web app.

As mentioned a couple of weeks ago, the CSS Object Model is a work in progress, but we can use the older DOM CSS API in the meantime. For example, I can grab a single stylesheet then loop through all the rules in that CSS document and find out what type they are, then proceed from there.

Here's an example, commented to explain what's happening:

var myRules = document.styleSheets[0].cssRules;

            // loop through all rules in sheet

            for (var i = 0; i < myRules.length; i++) {

              console.log(myRules[i].type);

            }

            // get type of nested rule in @media query

            console.log(myRules[2].cssRules[0].type);

            // get type of rule inside keyframes

            console.log(myRules[3].cssRules[1].type);

So, for example, if I had a stylesheet with exactly 6 rules (or rule sets), the console would print out 6 "types". The types are represented by numbers, so, a keyframes rule set is identified with a "7" and a regular selector is identified with "1".

This JS Bin demo uses the code above with 6 rules. The console prints out: 3, 1, 4, 7, 1, 1, and 1. You can see what the numbers all represent in this MDN article.

Notice in the example above, I'm doing two additional type checks. I'm checking the rule type of the rule nested inside the @media rule, and I'm checking the rule type of the second rule inside the @keyframes rule. In the demo I've also included a CSS comment to show that comments don't get recognized as "rules".

Now on to this week's tools!

CSS and HTML Tools

Polymer Starter Kit
"Build tools and boilerplate for creating production-quality web apps using Polymer."

CSSCV
"A simple, opinionated stylesheet for formatting semantic HTML to look like a CSS file."

Font Library
"An open source project to tag and organize Google Fonts."

Simple Sharing Buttons Generator
"Create mobile-friendly, static sharing buttons for Facebook, Twitter, Google+ and other social media sites."

Silon
"Adders and logic gates in pure CSS."

symdiff
"Ever wondered if a bunch of style definitions in your project can be safely deleted? symdiff helps you with this decision."

abbr-touch
"Library to make abbr element title attributes touch accessible."

Marx
"The stylish CSS reset. No JavaScript. No Classes. Just raw CSS."

React Inline
"Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the className prop of React elements."

Bootstrap Form Builder
"Generates valid HTML for Bootstrap 3 forms that will work on any website."

Nested Border Radii Generator
If you're nesting a border radius value inside another one, you can use this visual tool to get the correct values so they look good together.

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

RWD and Mobile Tools

TinyNav.js
Responsive navigation jQuery plugin that weighs just 452 bytes.

Ionic
Now at version 1.0.0. "The beautiful, open source front-end SDK for developing hybrid mobile apps with HTML5."

Manifold JS
"Helps you reach more users than ever by packaging your web experience as native apps across Android, iOS, and Windows."

.resizr
Another on-page responsive design testing tool with lots of device presets.

Responsible.js
"Give visitors the choice of what mobile experience they want. Adds Toggle for mobile to desktop switching without page reloads."

rwdgrid
2kb, mobile-first grid system, HTML5 Boilerplate head, 960grid-like naming convention, IE8+.

Junior
"A front-end framework for building HTML5 mobile apps with a native look and feel."

Responsive Mockups
Based on PhantomJS. "Takes screenshots of a webpage in different resolutions and automatically applies it to mockup templates."

70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF)

Text Editors and Code Playgrounds

TouchDevelop
"Touch-friendly app creation environment for iPad, iPhone, Android, Windows, Mac, Linux. Our mobile-friendly editor makes coding fun, even on your phone or tablet."

repl.it
"An online environment for interactively exploring programming languages. It provides a fully-featured terminal emulator and code editor, powered by interpreter engines for more than 15 languages."

Feditor
"Instant code editor for front-end developers and designers." Has a built-in console. Kind of a cross between JS Bin and CodePen.

Tumult Hype Professional
"Create beautiful HTML5 web content. interactive web content and animations made with Tumult Hype 3 work on desktops, smartphones and iPads. No coding required."

Visual Studio Code
"Build and debug modern web and cloud applications. Code is free and available on your favorite platform – Linux, Mac OSX, and Windows."

A Tweet for Thought

Harry Roberts really hates long CSS selectors.

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

Addy Osmani's "Public contributions" graph on GibHub has a special message. I would assume that took a lot of planning! Unless there's some way to hack that...?

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly