Issue #69  (attributes, CSS Tools, Text Editors, Files)


(Skip to the tools section below)


The attributes property is available on all HTML elements, and we can use it in conjunction with the hasAttributes() method, which returns a Boolean value. hasAttributes() (note the "s" at the end) seems to have gone unnoticed by a lot of developers, possibly confusing it with hasAttribute() (no "s").

While the well-known hasAttribute() method takes an argument, which is the attribute you want to test, the hasAttributes() method does not does not take any arguments, so it's just a true or false test to see if any attributes exist.

After testing to see if an element has any attributes, we can collect them using the aforementioned attributes property. This property returns an array-like live DOM collection.

Here's a quick-and-dirty script to collect and display all attribute/value pairs from all the div elements on a page:
 
var divs = document.getElementsByTagName('div'),
    op = document.getElementsByTagName('output')[0],
    i, j;

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

  if (divs[i].hasAttributes()) {
    op.innerHTML += '<p><b>Element #' + 
                    (i + 1) + 
                    ' has the following' +
                    ' attribute/value pairs:</b>';
    for (j = 0; j < divs[i].attributes.length; j++) {
      op.innerHTML += divs[i].attributes[j].name + 
                      ': ' +  divs[i].attributes[j].value + 
                      '<br />';
    }
    op.innerHTML += '</p>';

  } else {
    op.innerHTML += '<p><b>Element #' + 
                    (i + 1) + 
                    ' has no attributes.</b>';
  }
}

(JS Bin example)

The attributes property is supported everywhere, including back to IE6. The hasAttributes() method is supported everywhere including IE9+, so you might need a shim if that's not good enough. 

Now on to this week's tools!
 
Support Web Tools Weekly:   384 pages of CSS for $7
 

HTML and CSS Tools


Min
"The 995 byte CSS framework that supports IE5.5+."

Bootswatch
Free, easy to install, open source themes for the latest version of Bootstrap.

CSS Specificity Graph Generator
Based on a recent idea by Harry Roberts, it plots your stylesheet's specificity, so you can assess its quality.

range.css
CSS generator for custom range inputs.

cssplot
Pure CSS, responsive charts.

Simple Hint
CSS-only tooltip library to provide perfectly positioned tooltips and has a variety of features including fade-in transitions and animations, custom sizing, different colors and more.

HTML-Only Share Buttons
Social sharing buttons without JavaScript, built with icon fonts from Font Awesome.

Bouton
A Bootstrap-based button pack.

fancyfocus
Animated focus rings for form elements and elements with tabindex values.

Furtive
A mobile-first, forward-thinking, CSS micro-framework (2.5kB). 

cssnext
"A CSS transpiler that allows you to use tomorrow's CSS syntax today. It transforms CSS specs that are not yet implemented in popular browsers into more compatible CSS."

Clippy
"For generating values for shape functions for the new and cool CSS clip-path property."

sus
Simple data-URI stylesheet generator that "parses your css source and generates two new CSS sources from it – a base source and a sprites source."


Support one of this week's sponsors:
Monitoring without alerts
ruxit configures itself automatically as your application and infrastructure evolve. It uses AI to get to the root of issues much faster than a human can.
(Sponsor this newsletter)

 

Text Editors, Code Playgrounds, etc.


Tamper
A Chrome devtools extension that "locally edits files served from the web directly from devtools, using your favorite editor."

Litmus Builder
"The world’s first code editor built for email designers by email designers."

Coda
The popular Mac-based code editor is now at version 2.5 with a number of nice improvements.

Shoelace
A visual, Bootstrap 3 grid builder.

ColorHighlighter
Plugin for the Sublime Text that unobtrusively previews hexadecimal color values by underlaying the selected hex codes in different styles and icons.

The Grid
This is a bold project. It's "the first artificial intelligence (AI) platform that creates websites." Not public yet but you can invest.

MeteorPad
"Edit and run Meteor code inside your browser, see the results instantaneously, then easily save, fork, and share pads with others."

Kobra.io
"The easiest way to collaborate on code quickly with your coworkers, friends or students. With built in video and voice chat, the themes and keyboard shortcuts you're used to, and syntax highlighting."

FROONT
A flexible tool for designers to collaborate on responsive web designs in the browser.

VimR
"Refined Vim experience for OS X."

 

Documents, Files, Content, etc.


PDFy
"A place where anybody can instantly upload and share a PDF, much like Imgur does for images."

ScreenSlicer™
"Automatic, zero-config web scraping."

Lipsum.pro
A customizable Lorem Ipsum generator that's really easy to use and gives you four categories to work within: characters, words, sentences, and paragraphs.

Toolsley
A number of different tools for dealing with files including a file identifier, split/join tool, data URI generator, password generator, and more.

Texts
A native Markdown word processor for Mac OSX and Windows.

Typewriter
Mac-only simple text editor "for first drafts". What's interesting is that it works like a real typewriter in that in that it doesn't let you delete your mistakes, but lets you "strike" them.

 
Support Web Tools Weekly:   384 pages of CSS for $7
 

A Tweet for Thought


Tom Dale has a thought on Google Inbox that, in some sense, might apply to a lot of different services and apps.

 

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

Want an easy way to grab the audio off any YouTube video? Just add the word "sound" to the front of the URL (after the "www."), which is based on the service by soundyoutube.com. The only catch is that you have to use http not https, otherwise you'll get an error/warning. Here's an example.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
Copyright © 2013 Web Tools Weekly, All rights reserved.

Email Marketing Powered by MailChimp