|
|
|
|
Issue #102 (DOM Collections, CSS/HTML, Frameworks, Productivity)07/02/15
(Skip to the tools section below)
| Support this week's primary sponsor: |
 |
With more than 45 courses covering JavaScript, HTML/CSS, Ruby, Git, and iOS, Code School pairs experienced instructors with engaging content. Start learning at www.codeschool.com. |
When working with web content, sometimes you'll want to collect specific elements into an object and then manipulate them in some way. You can use loops with conditionals or similar techniques, but sometimes the simplest method is to simply use a DOM property:
|
var d = document;
console.log(
d.links,
d.anchors,
d.styleSheets,
d.embeds,
d.forms,
d.images,
d.plugins,
d.scripts
);
|
(JS Bin) You might be familiar with some of these already (e.g. document.forms is pretty well known) but notice you can also easily collect images, embeds, plugins, scripts, and more. The demo logs the length of each collection, but you can access any property on those elements using these features.
Some things to note:
- The links property collects both a elements and area elements; basically anything that has an href attribute, but not an element on which href is not valid (e.g. a div).
- The embeds and plugins properties were added in the HTML5 DOM spec but were originally only in Microsoft's documentation.
- The anchors property collects all a elements that have a name attribute, which is now a deprecated method for doing in-page anchors, so this one is not included in the HTML5 DOM spec, but it will still work for compatibility reasons.
For more info, see the Document Interface in the HTML5 spec as well as the Document object on MDN.
Now on to this week's tools!
HTML and CSS Tools
SwiftIpsum
Another Lorem Ipsum site, but focused on HTML with different HTML snippets (lists, a form, paragraphs, headings, etc.)
PurifyCSS
"Detects which CSS selectors your app is using and creates a file without the unused CSS."
Move.js
"A small JavaScript library making CSS3 backed animation extremely simple and elegant."
Better Error Pages
"Create beautiful, responsive error pages for your website with just three easy steps."
Animate Plus
"A performant JavaScript library that helps you animate CSS properties and SVG attributes... well-suited for quick UI interactions as well as longer animation sequences "
Atomic CSS
Official site by Yahoo! on the atomic CSS architecture methodology.
aViewer
"An inspection tool for Windows that displays the accessibility API information ... exposed by web browsers to the operating system, and thus to any assistive technology."
Front-end Frameworks
ExpandJS
"A modular library with 80+ custom elements and 350+ utility functions to kickstart your Web Applications."
Flexbox-Framework
"A simple and effective flexbox based framework."
Melange
"A powerful yet small CSS framework. It specialised for general usage thus most GUI related styles are missing."
C#/XAML for HTML5
"Create HTML5 apps using only C# and XAML with the new free 'C#/XAML for HTML5' extension for Visual Studio."
boy
"A lightweight, up-to-date version of HTML5 Boilerplate with conditionally loaded polyfills and a nice general reset for amazing CSS3 support back to IE6."
GridleCSS
A flexible, responsive CSS framework powered by the Flexbox Layout module and Sass.
SkyBlue
"This is not Bootstrap killer, I just think Bootstrap is way too bloated. SkyBlue is a minimal framework that is meant to be starting point for my projects."
Productivity Tools
Augment
A Chrome plugin that lets you take action right from your Gmail inbox. Lets you access apps right from Gmail.
HazeOver
Mac app. "Get rid of distractions and focus on your current task. HazeOver automatically highlights the front app window by fading out all the background windows."
Ricochet
"An experiment with a different kind of instant messaging that doesn't trust anyone with your identity, your contact list, or your communications."
AnyFetch
Chrome extension. "Get instant relationship history on your Gmail for all your contacts: your latest events, documents and mail interaction with this person."
WebOverride
Lets you inject code snippets into any website allowing you to customize it to fit your needs.
Rocket.Chat
"Have your own Slack like online chat, built with Meteor."
Google Keep
Google's note-taking and to-do list web app.
A Tweet for Thought
According to Jake Champion, the CSS file size of the top 10,000 websites is rising steadily.
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...
Public service reminder: Remember Paul Irish's protocol-relative URL? It's now an anti-pattern. Read his update on the original blog post.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
