|
|
|
|
Issue #144 (CSSX, JS Utils, JS Libs, Task/Build Tools)04/21/16
This week on Smashing Magazine, in the article called Finally, CSS In JavaScript! Meet CSSX, Krasimir Tsonev introduced CSSX, which, as the official website explains, "is a set of tools that will help you write vanilla CSS in JavaScript."
Are we going too far with tools these days? A big chunk of Smashing Mag's audience seems to think so. The first comment posted on that article praises the post. That comment has 54 more downvotes than upvotes. On the flipside, the first response to that comment has a +77 rating. The author of that comment says "JSX, CSSX, React and npm are all terrible ideas. What a bloated, slow, insecure mess. Front end web development is going to s**t."
Pretty strong words. Normally that type of trollish language doesn't get those kinds of upvotes. But in this case, the readers seem to agree with the sentiment.
I'm definitely leaning towards the anti-CSSX expressions myself. As some of the commenters in the discussion alluded to, it seems like we're trying to solve problems that don't exist, or at best are not as bad as these tools make them out to be.
It's an interesting tool, and it will be interesting to see if it ends up being used. For what it's worth, the project's GitHub repo currently has over 500 stars.
Now on to this week's tools!
JavaScript Utilities and Mini Libraries
Inspect
8kb vanilla JavaScript form validation script.
lavalamp.js
"A replacement for infinite scrolling." You'll have to check out the demo and detailed description to understand it fully.
glio.js
"Detects if the mouse of a user leaves the viewport/document borders of your website and when this happens, trigger your callback."
Force.js
"The easy way to scroll and animate your page."
freezeframe.js
"Pauses animated .gifs and enables them to animate automatically on mouse hover / mouse click / touch event, or manually with trigger / release functions."
react-key-handler
"React component to handle keyboard events (such as keyup, keydown & keypress)."
Angular-xeditable
"A bundle of AngularJS directives that allows you to create editable elements."
search-index
"A persistent full text search engine for the browser and Node.js."
matcher
"Simple wildcard matching. Useful when you want to accept loose string input and regexes/globs are too convoluted."
beautify-text
"Automated typographic quotation and punctuation marks."
JavaScript Libraries and Frameworks
React Storybook
"Isolate your React UI Component development from the main app. You just load your UI components into the React Storybook and start developing them."
tonal
"A modular, functional music theory library. Built from a collection of modules, it's able to create and manipulate tonal elements of music (pitches, chords, scales, keys)."
React Compose
Allows you to encapsulate component logic into smaller, reusable functions, which in turn can be combined back into components.
Babylon
"A JavaScript parser used in Babel. ES6 enabled by default. Comment attachment. Support for JSX and Flow. Support for experimental language proposals."
MobX
"A battle tested library that makes state management simple and scalable by transparently applying functional reactive programming."
caco
"Generator based control flow that supports both callbacks and promises."
react_on_rails
"An opinionated and optimal framework for integrating Ruby on Rails with modern JavaScript tooling and libraries, including Webpack, Babel, React, Redux, React-Router."
jsPsych
"A JavaScript library for creating and running behavioral experiments in a web browser."
Cycle.js
"A functional and reactive JavaScript framework for cleaner code."
SamsaraJS
"A library for animating layout. It provides a language for positioning, orienting and sizing DOM elements and coordinating the animation of these properties over time."
Deploy, Task, Build Tools
yos
"Lists your installed yeoman generators and subgenerators."
Grunt Unused
"A Grunt task to check for unused files (jpg, png, css, js etc) in a project files and output them to the console."
generator-techtonic
"A Yeoman generator for the modern front-end artisan designed to help you craft maintainable code for the web."
webpack-node-externals
"Easily exclude node modules in Webpack."
generator-travis
"Yeoman generator to get and keep .travis.yml up-to-date effortlessly. Works great with other generators too."
Loewy Assets
"A front-end asset pipeline driven by gulp.js."
grunt-responsive-images-extender
"A Grunt plugin that extends HTML image tags with srcset and sizes attributes."
A Tweet for Thought
Riva-Melissa Tez shares what she thinks is the last programming book you'll ever need.
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...
It's kind of creepy what every browser knows about you.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
