|
|
|
|
Issue #96 (DOM CSS, Git/CLI Tools, Testing)05/21/15
(Skip to the tools section below)
| Support this week's primary sponsor: |
 |
Free mail for your domain
Doky is an email as a service platform that includes an ajax powered webmail on top of Amazon cloud. |
The CSS Object Model (CSSOM) is a DOM API specifically designed for accessing CSS info, and it's currently in the Working Draft stage. Browser support for many parts of the API is pretty good, and the different features open up quite a few possibilities for use in complex apps. In future issues, I'll go through some of the different parts of the API, just to give you a preview of what's possible.
But dealing with stylesheet info via a DOM interface is not new. The DOM Level 2 CSS API has existed for quite some time. Here a review of some of the things you can do with that older standard:
- Get info on every selector and at-rule in a stylesheet via the cssRules object
- For each CSS rule, read the full content via the cssText property.
- Add and remove rules using the deleteRule() and insertRule() methods.
- Use the type property to find out what kind of rule it is (media rule, font face rule, regular style rule, etc)
- Use the readonly parentRule attribute to see if the current rule has a parent (e.g. a selector inside a media query)
Those are just some of the basics found in the aforementioned old DOM Level 2 CSS API and most of these, I would assume, have very good support even going back to old IE. The new CSSOM opens up even more possibilities, so check that out if you haven't already. And, as mentioned, I'm planning to feature some of the things possible with that API in future tips in this newsletter.
Now on to this week's tools!
CSS and HTML Tools
wm-html-include.js
A method for doing HTML includes while the HTML Imports standard gains better support.
CSS Generators
A slew of code generators including filter effects, RGBa colors, border images, shadows, and more.
Tecate.js
Drop tecate.js into the head of your HTML document and it will display an error message right on the page if there's malformed markup in your file.
gulp-check-unused-css
A gulp task to "check if all your defined CSS classes are used in your HTML files and vice versa."
trim-html
This looks useful. It's a tiny utility that can trim a string containing HTML, without breaking the HTML (e.g. by stripping off a closing tag, which you don't want.)
c^ret
A code generator that lets you use produce a caret (^) as a graphic using pseudo-elements, using the same principle for creating CSS triangles.
Email Lab
"Starter project for designing and testing HTML email templates."
Pie Menu Generator
Creates custom pie menus with SVG and CSS, with options for animation, tool tips, rotate functionality, and more. Looks really nice.
Email Framework
An HTML email framework to build bulletproof responsive HTML email templates. Supports 40+ email clients and has been thoroughly tested using Litmus. This will be my first choice when looking at a redesign of this newsletter.
AniCollection
"The easiest way to find, use and share CSS3 animations."
atomizer
"A tool for creating Atomic CSS, a collection of single purpose styling units for maximum reuse."
mdoml
"An experiment in creating custom HTML elements based on today’s most common interface design components."
Git, GitHub, and Command Line Tools
GitUp
Mac app in pre-release. "Work quickly, safely, and without headaches. The Git interface you've been missing all your life has finally arrived." I'm kind of disappointed that their logo is not a picture of James Brown.
Shrink
"A little mac app for your GitHub Issues."
Terrible Devs
"Allows you to set reminders to contribute to your Github projects."
JitPack
"Easy to use package repository for GitHub. JitPack builds GitHub projects on demand and publishes ready-to-use packages."
karn
"Manage multiple Git identities."
ConsoleBot
"Allows savvy developers to chat to a website owner via the browser console."
FeatHub
"Feature voting for GitHub. Give advice on projects you use. Find what users expect from your project."
Github.js
"Easy way to feature open source contributions on your website or portfolio."
caniuse-cmd
A command line tool to tap into the browser support info from caniuse.com.
Testing and Debugging Tools
Peek
"Test and monitor your websites for SEO, social, accessibility, speed, mobile, performance and more."
Eversite Monitor
iPhone app (Android coming soon) that provides a monitoring service with hundreds of checks daily, sending you text notifications as status alerts.
Performance-Analyser
Chrome extension. "Get insight into the performance of the website in the current tab – sort of a mini live version of WebPageTest."
Hyperlink
"A node library and command line tool to test the integrity of your internal an external hyperlinks."
VorlonJS
"An open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io."
SEO SiteCheckup
Online test to analyze and test a website for all sorts of SEO-related features and how they can be improved.
SSL Server Test
"This free online service performs a deep analysis of the configuration of any SSL web server on the public Internet."
A Tweet for Thought
I'm guessing PPK doesn't like this newsletter much!
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...
Here is a really nicely designed and addictive game called Twenty. Much better on a tablet. I was able to get to 18 but it certainly takes its toll on your wrist, so beware!
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
