Issue #204 (CSS Survey, CSS Tools, Build Tools, Media)
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.
- 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.
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!
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.
Helps you turn your static HTML into reactive web applications without a single line of programming code and no server backend.
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.
A simplified build system for static sites and single-page web apps, based on webpack 2.
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.
HTML5 audio player for the modern era. Lots of features, no dependencies.
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.
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.