|
|
|
|
Issue #114 (Sass Comments, JS Utils, Git/CLI, Audio Tools)09/24/15
Let's do a Sass tip for a change! If you are already experienced with Sass, this will likely be ridiculously basic stuff for you. Let's discuss comments in SCSS (which, from here on I'll just call "Sass").
As you know, plain CSS is limited in that it only allows comments using /* */, with no single-line option. But Sass lets you do both types, but only the traditional CSS comments will render in the output.
So this:
|
/* Test comment */
body {
background-color: #ccc;
}
// Test comment
// Another comment
|
Will compile to this:
|
/* Test comment */
body {
background-color: #ccc;
}
|
That's pretty basic, but there are a few more things to know about comments in Sass. First, if your output is set to compressed mode, this will normally strip out all comments. Unless you do this:
|
/*! Test comment */
body {
background-color: #ccc;
}
|
Notice the ! at the start of the multiline comment. Normally the comment would be stripped out, but in this case it will render, in compressed mode, as:
|
/*! Test comment */body{background-color:#ccc}
|
Finally, since multiline comments appear in the compiled code, it's only natural that these allow interpolation. So you can do the following:
|
$theme: "#ccc";
body {
background-color: $theme;
}
/* Test comment #{$theme} */
|
And it will compile as:
|
body {
background-color: "#ccc";
}
/* Test comment #ccc */
|
Note the variable inside #{} which wouldn't normally compile this way in the output. Here's a Sassmeister Gist for that last example.
Now on to this week's tools!
Buy my JavaScript/DOM e-book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
JavaScript Utilities and Mini Libraries
horsey
"Progressive and customizable autocomplete component."
UpUp
The offline first library. A tiny script that makes sure your site is always there for your users.
Smart Table Scroll
"Build 1MM row tables with native scroll bars by reusing and yielding nodes."
react-dropzone
"Simple HTML5 drag-drop zone with React.js."
ClickSpark.js
"Adds beautiful particle effects to your JavaScript events. Add image-files as single particles and configure where and when a particle fountain should be fired."
lightgl.js
"A lightweight WebGL library."
Pointer
"Provides W3C Pointer Events for handling user input."
CompareTo
"Custom HTML5 element attribute that compares two passwords."
react-jade
"Compile Jade to React JavaScript."
Modernizr
The popular feature-detection library is now at version 3.0.
ScrollWatch
"Easily add lazy loading, infinite scrolling, or any other dynamic interaction based on scroll position."
FModal.JS
"A lightweight JS library to create simple full-screen modals. To sum up, FModal.JS comes into play when things don't fit in a tooltip."
Git, GitHub, and Command Line Tools
git commander
"A git tool with an easy terminal interface."
PathPicker
Accepts a wide range of input — output from git commands, grep results, searches — then presents you with a nice UI to select files to open them in your favorite editor or execute arbitrary commands.
Deploy
"Deploy code from Codebase, GitHub and BitBucket in minutes."
Better Console
"A drop-in replacement for node's default console which gives you colors and more methods in console."
Classroom for GitHub
"Automates repository creation and access control, making it easy to distribute starter code and collect assignments on GitHub."
Git Radar
"A tool you can add to your prompt to provide at-a-glance information on your git repo."
nq: queue utilities
"These small utilities allow creating very lightweight job queue systems which require no setup, maintenance, supervision, or any long-running processes."
termtile
"Terminal window manager for OS X."
git-remote-dropbox
"A transparent bidirectional bridge between Git and Dropbox. It lets you use a Dropbox folder or a shared folder as a Git remote."
Multimedia Tools
favico.js
"Animate your favicon with animated badges. You can customize type of animation, position, background color and text color."
CanvasVideoRecorder
"A little tool to record frames from the HTML5 canvas element into a video file."
ogv.js
"Media decoder and player for Ogg Vorbis/Opus/Theora and (experimentally) WebM video."
ngVisualizeAudio
"Angular directive to play and visualize audio. Based on HTML5's Audio APIs and angular's data binding."
Textures.js
"SVG patterns for data visualization."
rx-player
A generic streaming video player using HTML5 Media Source and Encrypted Media extensions written in reactive-programming with ECMAScript 6.
Sigma
"A JavaScript library dedicated to graph drawing."
Responsively Lazy
A lazy-load solution that handles responsive images, is SEO friendly, and supports WebP.
A Tweet for Thought
Sounds legit, Chris.
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...
Great news — the ECMAScript specification is now on GitHub. (h/t to Mathias Bynens).
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
