Issue #130 (SassScript, CSS Tools, JS Utils, Front-end Frameworks)
(Skip to the tools section below)
If you're starting to learn Sass and want to play around with SassScript, you can do so directly from something called the interactive shell. If you already have Sass installed, just type the following in your terminal:
This will bring up a command prompt that looks like this:
This prompt is sort of like a terminal within your terminal, dealing only with SassScript. So you can fiddle around with anything within SassScript. For example, you might try some simple commands like the following, where you're messing around with variables and operations:
>> $width: 400px
>> $width / 2
You can see after each line of SassScript, you're given the return value of what you've typed. You'll also get syntax error warnings when you make mistakes. To escape the interactive shell just hit CTRL-D.
It seems like only simple, single-line commands are useful for practice in this context, so it is likely of limited use. But I suppose this could be handy if you want to test out some code briefly while the terminal is open.
Now on to this week's tools!
CSS and HTML Tools
CSS filter effects inspired by Spotify's 2015 duotone ads.
A polyfill for Flexbox, if you absolutely require deep browser support.
WAVE Evaluation Tool
A Chrome extension to give you quick one-click access to the WAVE accessibility checker.
CSS Fix Me
An online tool "to fix non-standard CSS by adding standardised equivalents to all declarations that use -webkit-prefixed properties and values that have standardised equivalents."
PostCSS Inline SVG
"PostCSS plugin to inline SVG and customize its styles."
"CSS on-demand for AngularJS. Optimize the presentation layer of your single-page apps by dynamically injecting stylesheets as needed."
Premium Bootstrap admin templates with user-friendly interfaces.
PostCSS plugin to let you write SVGs directly in CSS.
"Responsive grid element using Polymer and Flexbox."
Under-1kb library to enable namespaced events.
Allows you to detect if AdBlock is enabled in the user's browser.
A script to let you place labels on a timeline without any overlap.
"Allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code."
"Automatically animate all inserted and removed DOM elements with good defaults."
A GSAP plugin that "provides advanced control over tweens that morph SVG paths."
"A password strength estimator inspired by password crackers."
"React input color component with HSV color picker." Inspired by the Sketch color picker.
"Quick setup for new performance orientated, offline–first React.js applications featuring Redux, hot–reloading, PostCSS, react-router, ServiceWorker, AppCache, FontFaceObserver and Mocha."
Based on Flexbox, a very simple CSS grid system to quickly create modern layouts and submodules.
"The minimal (~100-170 bytes) grid system for modern browsers. You don't need monolithic CSS frameworks for simple grid systems."
"A lightweight front-end framework for logically building complex, responsive web projects."
"A friendly skeleton that helps you start with building React applications."
"A smart grid framework, not just for grids."
A Tweet for Thought
Jon Gold explains the rationale behind why React is so popular.
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...
Anyone remember the old Impossible Mission game for Commodore 64? Relive the glory!
Thanks to all for subscribing and reading!