|
|
|
|
Issue #130 (SassScript, CSS/HTML, JS Utils, Frameworks)01/14/16
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:
|
sass -i
>> $width: 400px
400px
>> $width / 2
200px
>>
|
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!
Buy My JavaScript/DOM E-Book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
CSS and HTML Tools
Colofilter.css
CSS filter effects inspired by Spotify's 2015 duotone ads.
Flexibility
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."
Domator
"Simple DOM elements creation on JavaScript, using Jade like syntax. Also works on server-side."
PostCSS Inline SVG
"PostCSS plugin to inline SVG and customize its styles."
AngularCSS
"CSS on-demand for AngularJS. Optimize the presentation layer of your single-page apps by dynamically injecting stylesheets as needed."
AgileUI
Premium Bootstrap admin templates with user-friendly interfaces.
Write SVG
PostCSS plugin to let you write SVGs directly in CSS.
Grid Element
"Responsive grid element using Polymer and Flexbox."
JavaScript Utilities and Mini Libraries
ns-events.js
Under-1kb library to enable namespaced events.
BlockAdBlock
Allows you to detect if AdBlock is enabled in the user's browser.
Labella.js
A script to let you place labels on a timeline without any overlap.
notie.js
"A clean and simple notification plugin (alert/growl style) for JavaScript, with no dependencies."
gmaps.js
"Allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code."
AutoAnimations
"Automatically animate all inserted and removed DOM elements with good defaults."
MorphSVGPlugin
A GSAP plugin that "provides advanced control over tweens that morph SVG paths."
zxcvbn
"A password strength estimator inspired by password crackers."
Deep Type
"Use a GraphQL-esque syntax to validate JavaScript objects and arrays. Also tells you where you messed up."
Substance
"A JavaScript library for web-based content editing."
immu
"A tiny, fail-fast, lazy, 'naked', simple immutable JavaScript objects library."
react-input-color
"React input color component with HSV color picker." Inspired by the Sketch color picker.
Front-end Frameworks
React.js Boilerplate
"Quick setup for new performance orientated, offline–first React.js applications featuring Redux, hot–reloading, PostCSS, react-router, ServiceWorker, AppCache, FontFaceObserver and Mocha."
Gridlex
Based on Flexbox, a very simple CSS grid system to quickly create modern layouts and submodules.
Gridly
"The minimal (~100-170 bytes) grid system for modern browsers. You don't need monolithic CSS frameworks for simple grid systems."
Wee
"A lightweight front-end framework for logically building complex, responsive web projects."
spooky react
"A friendly skeleton that helps you start with building React applications."
Crow
"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!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
