|
|
|
|
Issue #29 (classList, CSS/HTML, Visual Tools, Productivity)02/06/14
Traditionally, reading and manipulating the class attribute on an element has been fairly unintuitive. Older versions of IE support the className property, but it's ugly to work with if you're dealing with multiple classes on the same element.
Enter classList, a much better method for handling classes that's supported everywhere except IE6-9. Let's look at a simple example. Suppose your <body> tag looks like this:
<body class="main main-about extend extend-new">
|
We'll use this to demonstrate the different things you can do with classList:
var bodyClasses = document.querySelector('body').classList;
// log classList object
console.log(bodyClasses);
bodyClasses.add('new-class');
bodyClasses.remove('main-about');
// check if 'extend' class exists
console.log(bodyClasses.contains('extend')); // true
bodyClasses.toggle('extend-new');
console.log(bodyClasses);
|
And here's a demo with a few extra console.logs so you can see the progression.
Instead of having to do complex string manipulations, you can easily add, remove, toggle, and check for the existence of any class. Very useful for web apps that rely on CSS to change the look of something depending on asynchronous actions.
Things to note about classList:
- Technically, classList is read-only, but it can be altered with the add() and remove() methods.
- The toggle() method has an optional argument that either adds or removes the specified class depending on the truthiness or falsiness of the argument.
More info and polyfills:
Now on to this week's tools!
CSS/HTML Tools
Generate CSS
Lots of tools on this site to help generate CSS2 and CSS3 features, image filters, text effects, and much more.
Keyframer
A visual tool with coding panels to help you build CSS keyframe animations.
veinjs
Helps you inject CSS for elements that have been added to the DOM via Ajax, and avoids the need for jQuery's inline style injection.
CSS Animate
Another visual tool for creating CSS3 keyframe animations. Has panels for timeline, keyframes, properties, frame properties, and code.
Type-o-matic
A Firebug/Firefox browser extension that counts all the fonts on a page and orders them by color and size before outputting some JSON.
grunt-styleguide
"Universal CSS styleguide generator for grunt. Easily integrate Styledocco or KSS styleguide generation into your development workflow."
On/Off FlipSwitch
"Generate pure CSS3 On/Off flipswitches with animated transitions." Live display with lots of options including the ability to mimic OS switches (iOS, Androids, Win8, etc.)
grunt-uncss
"A grunt task for removing unused CSS from your projects."
CSS Colours
All CSS color names with RGB and hex values for each.
Fount
A bookmarklet that "will tell you which web font in your font-stack you are actually seeing – not just what is supposed to be seen. It’ll also tell you the font size, weight, and style."
HTML5 UP
"Responsive HTML5 and CSS3 Site Templates."
SpinKit
Beautiful and simple CSS animated loading indicators with a number of options to choose from.
Text Editors and Visual Tools
Sublime CSS Completions
"A more complete library of CSS completions for Sublime Text."
Pinegrow
"Windows and Mac app that lets you mockup & design webpages faster. Save your time with multi-page editing, CSS & Less styling and Bootstrap support."
Dillinger
An online Markdown editor with tons of themes and lets you connect to Dropbox, GitHub, and Google Drive.
Dakuto
"A new service for beautifully annotating and sharing code."
Codebox
"An open source Cloud IDE, that can run not only on the cloud, but on your desktop or your server as well."
Code Huddle
"A collaborative platform for technology educators to easily create, remix, and deliver high quality technology curriculum... Use Code Huddle tools to convert your material into great looking and interactive HTML5 slide decks or online tutorials."
Try Handlebars.js
An online tool to let you fiddle around with the Handlebars.js templating library.
Productivity Tools
Unroll.me
"After you sign up, see a list of all your subscription emails. Unsubscribe instantly from whatever you don’t want." Well, except for Web Tools Weekly, right? :)
TimeTracker
"TimeTracker has no timers and no buttons. It works in the background to track your activity, eliminating the guesswork of where your time was spent. TimeTracker allows you to focus on your craft, not your timesheet."
Launchy
A free cross-platform utility designed to launch your documents, project files, folders, and bookmarks with just a few keystrokes.
tyto
"A completely configurable, extensible and customizable management and organisation tool."
Backtick
"A console for bookmarklets and scripts, packaged as a Chrome extension."
A Tweet for Thought
Alex Sexton seems to think spending a lot of time learning tools in-depth causes you to be left behind.
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 interesting... Twitter has introduced Twitter Analytics to help you "Measure and boost your impact on Twitter."
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
