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!
|
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.
Stickybits
A lightweight alternative to `position: sticky` polyfills.
css-doodle
A web component for drawing patterns with CSS.
Polymer
Now at 2.0. A JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable apps.
Mavo
Helps you turn your static HTML into reactive web applications without a single line of programming code and no server backend.
Anchorme
Tiny, fast, efficient, feature rich JavaScript library that detects links, URLs, and Email addresses in text and converts them to clickable HTML links.
Rockey
Component Based CSS in JavaScript. Write component-based CSS with functional mixins.
explodal
A modal window that explodes. Really.
CSS Aspect Ratio
A tiny module to help preserve aspect ratio in pure CSS.
Graaf
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.
npm
Now at version 5.x. The package manager and software registry for JavaScript developers.
Martinet
A simplified build system for static sites and single-page web apps, based on webpack 2.
Butternut
Still in Alpha. The fast, future-friendly JavaScript minifier.
babel-plugin-transform-modern-regexp
Babel plugin for modern RegExp features in JavaScript.
Prepack
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.
Buildkite
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.
|
Multimedia Tools
AmplitudeJS
HTML5 audio player for the modern era. Lots of features, no dependencies.
billboard.js
Re-usable easy interface JavaScript chart library, based on D3 v4+.
svgi
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.
GetImageColors
Extract colors from your image, generate CSS, Less, SCSS or Sass variables,
see gradient examples, and more.
CADET
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.
UPNG.js
Fast and advanced PNG encoder (lossy / lossless) and decoder.
SpectorJS
A complete engine agnostic JavaScript framework for exploring and troubleshooting your WebGL scenes with ease.
d3-annotation
Use d3-annotation with built-in annotation types, or extend it to make custom annotations.
Image-Charts
Charts, simple as a URL. No more server-side rendering pain, 1 URL = 1 chart.
|
|
