Web Tools Weekly
What a Tool!

Issue #204  (CSS Survey, CSS/HTML, Build Tools, Media)06/15/17

Over at SitePoint in April, we put together our annual CSS Survey, getting responses from SitePoint readers on questions pertaining to CSS coding habits, practices, tools, and lots more. The survey asked 50 questions and we had over 1,600 respondents. You can view the results and a summary of the data here.

Since this is a newsletter mostly about tools, here are some of the key points surrounding CSS-related tools and technologies:

  • Compared to last year's survey, there was a big jump in developers using CSS methodologies like BEM, and BEM usage itself increased significantly.
  • The number of developers producing documentation for their CSS went down since last year.
  • Testing CSS on mobile is on the increase (and I'm sure that's true of mobile testing in general, and probably more so with JavaScript testing).
  • More people than I expected are still supporting old versions of IE.
  • Use of popular frameworks like Bootstrap is down.
  • Sass and Less usage is down.
  • PostCSS use is way up and even tools like CSS Modules and Pleeeease are being used more.
  • A lot more people are ok with managing CSS using JavaScript.
That's just a small sampling of what I discuss in the article, and you can view all the data that's embedded in the article via Typeform. And if you're interested, you can compare those to last year's survey results, which had more questions that weren't included this year.

Now on to this week's tools!
Did you buy my previous JavaScript/DOM tips book? I've released a new one...
NEWEST E-BOOK! Volume 2 of JavaScript & DOM Tips

CSS and HTML Tools

Trendy CSS Text Shadows
Free collection of beautiful long text shadows includes the fonts, colors, and CSS code to render it for your own site.

A lightweight alternative to `position: sticky` polyfills.

A web component for drawing patterns with CSS.

Now at 2.0. A JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable apps.

Helps you turn your static HTML into reactive web applications without a single line of programming code and no server backend. 

Tiny, fast, efficient, feature rich JavaScript library that detects links, URLs, and Email addresses in text and converts them to clickable HTML links.

Component Based CSS in JavaScript. Write component-based CSS with functional mixins.

A modal window that explodes. Really.

CSS Aspect Ratio
A tiny module to help preserve aspect ratio in pure CSS.

Pure CSS grid overlays for designing. Just link the CSS that fits your grid or create your custom overlay.

Build Tools, Task Runners, etc.

LQIP-loader for webpack
Low quality image placeholders (LQIP) for webpack.

What does my npm module cost?
Find out the cost of adding a new front-end dependency to your project.

Now at version 5.x. The package manager and software registry for JavaScript developers.

A simplified build system for static sites and single-page web apps, based on webpack 2.

Still in Alpha. The fast, future-friendly JavaScript minifier.

Babel plugin for modern RegExp features in JavaScript.

Still in early development. A tool that optimizes JavaScript source code: Computations that can be done at compile-time instead of run-time get eliminated.

Automate your team’s software development processes, from testing through to delivery, no matter the language, environment or toolchain.

Service Worker Toolchain
A collection of service worker generation tools. Configurable and forkable.

Support Web Tools Weekly on Patreon
Contribute $10 or more and get two JS/DOM e-books + my CSS e-book package.

Multimedia Tools

HTML5 audio player for the modern era. Lots of features, no dependencies.

Re-usable easy interface JavaScript chart library, based on D3 v4+.

CLI tool to inspect the content of SVG files. Provides you information about the file, the elements in the SVG, number of elements, and the hierarchy.

Extract colors from your image, generate CSS, Less, SCSS or Sass variables, 
see gradient examples, and more.

Free, downloadable caption-authoring software that enables anyone to produce high-quality caption files that are compatible with any media player that supports the display of captions.

Fast and advanced PNG encoder (lossy / lossless) and decoder.

A complete engine agnostic JavaScript framework for exploring and troubleshooting your WebGL scenes with ease.

Use d3-annotation with built-in annotation types, or extend it to make custom annotations.

Charts, simple as a URL. No more server-side rendering pain, 1 URL = 1 chart.

A Tweet for Thought

Are native apps asking for too much? AKA the case for web apps.

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...

You might want to check out this site that lists patents that are expiring soon.

Thanks to all for subscribing and reading!

Keep tooling,