|
|
|
|
Issue #156 (NamedNodeMap, Frameworks, Testing, Uncats)07/14/16
| This week's primary sponsor: |
When using the attributes property to get the attributes of an HTML element, you're exposing the NamedNodeMap interface, which has a few funky little methods and properties of its own.
Let's assume the HTML element is the body element, with two attributes:
|
<body class="one" id="two">
</body>
|
We can use the getNamedItem() method to read the value of a specific attribute in the collection:
|
let b = document.body;
console.log(b.attributes.getNamedItem('class').value); //=> "one"
console.log(b.attributes.getNamedItem('id').value); //=> "two"
|
There's also the setNamedItem() method, which can be used along with createAttribute() to add a new attribute to the element:
|
let myAttr = document.createAttribute('foo');
myAttr.value = 'bar';
b.attributes.setNamedItem(myAttr);
console.log(b.attributes.getNamedItem('foo').value); //=> "bar"
|
In this case I've created an attribute "foo" with a value of "bar" and this would be reflected in the generated DOM.
Finally, I can use the item() method to grab an attribute by index, and I can also remove an attribute with removeNamedItem():
|
console.log(b.attributes.item(1).value); //=> "two"
b.attributes.removeNamedItem('foo');
console.log(b.attributes.length); //=> 2
|
You can find a full JS Bin demo here.
In most cases, some of the more traditional methods for attribute manipulation will suffice, but this API has its own set of unique features that you might find useful on deeper examination.
Now on to this week's tools!
Front-end Frameworks
Wing
"Wing is made for those smaller side projects, as it isn't as full featured as Bootstrap, Foundation, etc. Wing styles basic elements, comes with a grid, and some fading animations."
Mega Boilerplate
"Handcrafted starter projects, optimized for simplicity and ease of use." Featuring Sass, React, Node.js, Jade, and lots more.
choo
"Fun functional programming. A 5kb framework for creating sturdy frontend applications."
Slides Framework
"A simple and powerful HTML and CSS framework that lets you easily build beautiful static websites ... thanks to a flexible modular setup that makes customization a breeze."
Vital
"A minimally invasive CSS framework for modern web applications. Vital is a reverse approach to 'everything and the kitchen sink' CSS frameworks."
Weex
"A framework for building Mobile cross-platform UI."
vue-framework7
"Framework7 components built with Vue.js."
Microsoft Web Framework
"We have worked hard to deliver an enterprise level web framework that demonstrates the latest industry best practices, standards and recommendations."
Strand
"A growing library of common UI widgets built as web components. Strand components are cohesive in look and feel and designed to be interoperable. We've built Strand atop Google's Polymer project."
Testing and Debugging Tools
logerr
"Experimenting with window.onerror, trying to make JavaScript debugging easy. Provides JavaScript error details in a readable format."
SEO Quotient
"Do you ever wonder why your website does not rank as high as your competitor?" Let's you compare rank using keywords.
ipTools
"A service which will easily allow you to check different network functions of your server or domain name such as port forwarding, traceroutes, WHOIS and DNS settings."
NetData
"Real-time performance monitoring, done right. Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance."
which-cloud
"Given an ip address, return which cloud provider it belongs to (AWS, GCE, etc)."
JWT Inspector
Chrome extension "that lets you decode and inspect JSON Web Tokens in requests, cookies, and local storage. Also debug any JWT directly from the console or in the built-in UI."
AMP Validator
Chrome extension. "Will check the current page to see if it is an AMP page and then run it through the AMP validator and report if the page passes (green) or fails (red) via the extension icon."
CloudPerf
"Web performance monitoring on the World's largest testing network. Speedchecker CloudPerf proactively simulates real user behaviour 24/7 using our fleet of 100 000 probes in 170+ countries."
The Uncategorizables
WWW SQL Designer
"Allows users to create database designs, which can be saved/loaded and exported to SQL scripts. Various databases and languages are supported. Ability to import existing database design."
Fontea
Plugin that adds 800 Google Fonts to Photoshop.
1999.io
A new blogging platform that's "easy for writers to get started with, is completely customizable by designers, and can be extended by programmers through easy APIs and full access to the server code."
SyntaxDB
"Allows users to quickly look up syntax for programming languages. SyntaxDB is designed for programmers who often need to do a Google search for their syntax needs."
StackPile
"A better way to install 3rd party apps. StackPile allows you to install and use 3rd party apps, tags and integrations on your website in seconds."
Drizzle
"A streamlined tool for developing, documenting and presenting UI pattern libraries."
ProofMe
"Free, beautiful feedback & collaboration platform for video, PDFs, Word documents, images, websites and more."
A Tweet for Thought
I'm sure many of you feel this way.
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...
If you're into game dev, you might want to look at Nintendo Developer Portal.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
