Issue #8 (Table API, CSS/HTML, jQuery, Mobile)09/12/13
Most of you probably know that using core DOM methods in JavaScript you can create any HTML element and add it to the document wherever you like. While you can do the same thing when creating an HTML table, you also have the option to use the HTMLTableElement API.
This API has quite a few methods and properties. Below is a chunk of code that will create a table with 10 rows, 3 cells per row, along with a table caption and contents for each cell:
var table = document.createElement('table'),
tbody = document.createElement('tbody'),
i, rowcount;
table.appendChild(tbody);
for (i = 0; i <= 9; i++) {
rowcount = i + 1;
tbody.insertRow(i);
tbody.rows[i].insertCell(0);
tbody.rows[i].insertCell(1);
tbody.rows[i].insertCell(2);
tbody.rows[i].cells[0].appendChild(
document.createTextNode('Row ' + rowcount + ', Cell 1')
);
tbody.rows[i].cells[1].appendChild(
document.createTextNode('Row 1, Cell 2')
);
tbody.rows[i].cells[2].appendChild(
document.createTextNode('Row 1, Cell 3')
);
}
table.createCaption();
table.caption.appendChild(
document.createTextNode('A DOM-generated Table')
);
document.body.appendChild(table);
Notice the use of the methods insertRow(), insertCell(), and createCaption(), as well as the rows and cells properties. That's just the tip of the iceberg. Here are a few resources to check out for more on this API:
Are there any performance issues or other drawbacks to using this API instead of some of the core methods? I'm not sure, but I do know that the code above would be much more complex if we used core DOM methods to create a table. As for browser support, from my quick research, this API seems to work everywhere, including oldIE.
As always, if you want to mess around with the code above, I've put up a JS Bin demo that you can check out.
Now on to this week's tools!
CSS and HTML Tools
Tridiv
My guess is you've seen this one already. If not, then check it out. It's a web-based editor for creating 3D shapes in CSS, created by developer Julian Garnier.
Cascade Framework
A CSS framework that 'puts the C back in CSS'. Rather than a look-and-feel framework like Bootstrap, this is more about architecture and design patterns.
DiagnostiCSS
A bookmarklet to highlight potentially invalid or inaccessible markup. Will indicate inline styles and event handlers, invalid links, empty elements, missing required attributes, and deprecated elements.
Kube
A "professional CSS framework". Covers typography, grids, forms, tables, buttons, and more. Also has a LESS version.
Outline or remove CSS background images
A bookmarklet created by Zoe Mickley Gillenwater to remove or outline background images, for testing the accessibility of image content.
Number converter
A tool to convert ASCII numbers into other representations (Arabic script, Greek script, etc.) that can be used for ordered list counters, headings, etc.
vminpoly
A polyfill for the vw, vh, and vmin units in CSS, which currently lack support in IE and Safari.
he
"A robust HTML entity encoder/decoder written in JavaScript. It supports all standardized named character references as per HTML, handles ambiguous ampersands and other edge cases."
Listify
I think this could be useful. This tool automates the process of manually converting a group of text lines to an HTML list.
jQuery Plugins
Nivo Lightbox
"Responsive, retina-ready and simple to setup for mobile." Features automatic content detection, and CSS-powered effects.
parallax.js
Certainly not the first parallax script. This one "reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene", otherwise it will default to using the cursor position instead. Works as a jQuery plugin or with vanilla JS. (more such scripts here)
Tipue Search
A jQuery site search engine. Looks nice and doesn't require any back-end language. Doesn't work with JS disabled though, so if someone can fork a solution for that, I think this would be a nice option.
jQuery Flat Shadow
Yes, the phrase "flat shadow" is somewhat paradoxical, but this style seems to be kind of trendy right now. While it lasts, here's a plugin to help get that look.
Owl Carousel
A touch enabled, responsive carousel. Looks pretty simple to implement and you can view a number of different demos on the site.
jQuery.mmenus
The three-line menu thing for mobile. This one is responsive, allows custom positioning, custom colors, and more.
SimpleSlideView
Mimic a native mobile app interface with this plugin (jQuery or Zepto). In desktop view, the view will expand to a more customary interface.
Mobile Tools
ChocolateChip-UI
A framework for making mobile web apps. Supports iOS7, Android and Windows Phone 8. The syntax is similar to jQuery.
PageSpeed Insights
One of Google's performance tools. Enter a URL and it analyzes the page in a number of categories, similar to YSlow. Results include both a mobile and desktop score with accompanying info and suggestions for improvement.
MINIHACK
Not exactly a development tool, but useful for those who read Hacker News regularly. This is the iOS app to access the feed, which includes vote, flag, and reply capabilities as well as the ability to share and save stuff for later reading.
Pixelsign
A framework for displaying mockups of your apps, websites, or portfolio on various devices. You can even attach events to the "home button" to mimic what happens on an iOS or other device.
Suggest Your Tool via Twitter
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please.
No Ads
To help Web Tools Weekly stay ad free, you can go to the donate page and give something small ($2 per subscriber would be more than enough). Thanks to those who have contributed already!
Criticism? Corrections?
If you have an opinion on how this newsletter can be improved, or any corrections to report, feel free to reply to this email directly.
Before I Go...
One thing I like about CNN.com's articles is the "Story Highlights" in the sidebar that give you a summary of the article. Well, there's a service that does something similar for any online content. It's called tldr.io and it allows anyone to write "summaries of interesting content". If you're not exactly into long-form content, you might appreciate this.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
