|
|
|
|
Issue #121 (stylesheet.disabled, Frameworks, Testing, Uncats)11/12/15
Here's another obscure one: stylesheets and script elements have a Boolean disabled attribute that can be queried or defined. This can work as a really simple way to disable a specific stylesheet or script.
For example, if we referenced a stylesheet and script using two variables called mySheet and myScript, we could disable them both like this:
|
mySheet.disabled = true;
myScript.disabled = true;
|
And we could create a stylesheet toggle button using something like the following:
|
var sheet = document.getElementById('boot'),
btn = document.querySelector('.btn');
btn.addEventListener('click', function () {
sheet.disabled = (sheet.disabled === false) ? true : false;
}, false);
|
Try the above script here
Visit the demo page and you'll notice the "toggle" button at the top. Below the toggle button are a bunch of Bootstrap-styled HTML elements. The Bootstrap CSS file is toggled on and off using the disabled attribute on the stylesheet element.
Seems like this could be a really simple way to add some kind of style-switcher or to conditionally add/remove stylesheets or script elements. The disabled attribute is discussed as part of the StyleSheet interface of the CSSOM on the W3C's site.
I couldn't find any definitive browser support listings for this, but it works in the latest Chrome, Firefox, IE11, and even in Safari 5.x on my Windows machine, so there does seem to be legacy support (which makes sense since it was part of the DOM 2 spec)
Now on to this week's tools!
Front-end Frameworks
Kickoff
A lightweight frameworks with Grunt and Yeoman integrations. Includes components for typography, basic UI (e.g. buttons), forms, and grids.
Layout Grid
"Static responsive grid with pure CSS. JavaScript using native drag-n-drop to reorder for each screen size on desktop and mobile."
Corpus
CSS toolkit that uses flexbox for grids, viewport-based units, and includes lots of single-purpose utility classes.
Leaf
"A CSS framework based on Google's material design." Includes lots of components – cards, modals, tabs, and lots more.
Metro UI CSS
"The front-end framework for developing projects on the web in Windows Metro Style."
Layers CSS
"A lightweight, unobtrusive and style-agnostic, CSS framework aimed for practical use cases."
Base
"A Rock Solid, Responsive HTML/CSS Framework. Lightweight and minimal code. Spend less time overriding styles and focus more time on creating beautiful website applications."
Elastic CSS
This is an old framework, originally posted on GitHub 7 years ago. I like that it was designed to build "elastic, fixed and liquid" layouts. Sounds like it was far ahead of its time.
Testing and Debugging Tools
Drool
"An automation layer that is used to measure if a set of 'clean' actions results in a DOM and or Listener leak."
Live WebVTT Viewer
"A tool to quickly test WebVTT syntax in browsers and see the rendered result on the fly."
Diffy
"Finds potential bugs in your service using running instances of your new code and your old code side by side."
Visual Event
A JavaScript bookmarklet that provides debugging information about events that have been attached to DOM elements."
FontReach
"Scans the top million sites to show font usage across the web." Also shows the top used fonts across the web.
htty
"A console application for interacting with web servers. It’s a fun way to explore web APIs and to learn the ins and outs of HTTP."
jsCodeStructure
Analyse the structure of your JavaScript project, that is, the relationships between .js files.
WebRTC Troubleshooter
A page you can send to clients or others to troubleshoot or diagnose issues when using WebRTC-enabled sites or apps.
The Uncategorizables
ChartURL
"Easily add rich, data-driven charts to your web apps, mobile apps, and emails. Send us data, and we return an image that renders perfectly on all platforms."
Google Analytics Opt-out Browser Add-on
"To provide website visitors the ability to prevent their data from being used by Google Analytics."
Hoist
"If this, then: code. Trigger code on events in your favorite web services."
Dexter
"A platform that makes connecting third-party APIs easy."
Hotel
"With hotel, you don't have to leave your browser to start your dev server. You also don't have to manage terminal tabs, remember commands, worry about ports, ..."
Botwiki.org
"An open-source collection of .. resources for creating useful, interesting, artistic and friendly online bots ... for Twitter, Slack, IRC and other online networks."
Growth Race
"Do you have many projects and no time to track all of them? Growth Race has you covered! It shows all your web traffic, domain and social profiles metrics in a single dashboard."
Filesprout
"The easiest way to sell any file from your Dropbox, Amazon S3, shared hosting or own server."
A Tweet for Thought
Harry is right, this is absolute gold.
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...
Not sure how old or well-known this is, but I just recently stumbled upon CommitStrip, an online comic strip blog for programmers.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
