|
|
|
|
Issue #31 (location, Sass, JS Utils, Media)02/20/14
The location object has a whole slew of properties as well as some interesting methods, including assign(), replace(), and reload(). These are similar, so let's briefly look at each.
The assign() method causes the browser to navigate to the specified URL, and it looks like this:
if (condition) {
location.assign('example.html');
}
|
The replace() method has the same syntax, appearing to do the same thing:
if (condition) {
location.replace('example.html');
}
|
(Note that this assumes you're in the browser, which means window is the global object.)
The only difference between these two methods is that assign() keeps the browser history intact, while replace() will replace the current page, removing it from the browser's history.
Using assign() is the same as defining location.href or changing the location directly:
if (condition) {
location = 'example.html';
}
|
Those latter two are kind of like a short cut for location.assign(), so you'll usually not see assign() much in code.
As for replace(), in David Flanagan's JavaScript: The Definitive Guide, he says you might use replace() "to load a static HTML version of your web page if you detected that the user's browser did not have the features required to display the full-featured version." Using replace() here would be preferable to the other methods because in this instance you wouldn't want the previous page to exist in the browser's history.
Finally, the location.reload() method seems to have few use cases. It just reloads the current page:
if (condition) {
location.reload(true);
}
|
If you use it, you have to make sure it executes only once, otherwise it will just reload the page over and over indefinitely. It also takes an optional Boolean parameter that is false by default, meaning the page will attempt to be loaded from the cache. A value of true forces a reload from the server.
As for browser support, MDN says all three methods are supported in all browsers, but doesn't specify versions. Another source however says support goes back to IE6.
Now on to this week's tools!
Preprocessor Tools
grunt-group-css-media-queries
"Grunt task for grouping CSS media queries. Useful for postprocessing preprocessed CSS files."
SassyJSON
"A Sass-powered API for JSON. It provides you the classic json-encode and json-decode directly from your Sass files."
Sassifaction
A Sass mixin library by Stu Robson, representing his current starting point for Sass projects.
Create CSS3
A nice CSS3 generator that optionally outputs in Sass.
Scut
"A collection of Sass utilities to ease and improve our implementations of common style-code patterns."
Bootstrap for Sass
The official Sass port of bootstrap.
Typecsset
"A small Sass library for setting type on the web."
Myth
This made the rounds a little while ago. It's "a preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It's like a CSS polyfill."
LESS Colors
"Generate color themes as LESS color functions."
Gumby
A CSS framework powered by Sass. Features include a UI kit, toggles and switches, and responsive images.
JavaScript Utilities and Mini Libraries
Dug.js
"Designed to be a lightweight, simple, library-independent script to pull in feeds of content available on the web as JSONP ... to display on your site."
scrollReveal.js
"A simple way to create and maintain how elements fade in, triggered when they enter the viewport."
countUp.js
"A dependency-free, lightweight JavaScript 'class' that can be used to quickly create animations that display numerical data in a more interesting way."
ElementQuery
A polyfill for element queries.
Planetary.js
"Awesome interactive globes for the web." Customizable with colors and rotations, mouse and drag + zoom support. Nice on-page demo.
stretchtext.js
"Makes it possible to show and hide nested information on web pages." You'll have to check out the demo page to see exactly what this is all about It's a pretty interesting idea.
Bootstrap Tour
Another one of those on-page tour scripts, this time based on Bootstrap but also works standalone.
xmlToJSON
"A simple javascript module for converting XML into JSON." No dependencies, ~3kb, and works on IE7+.
[be]Lazy.js
"Lets you lazy load and multi-serve your images so you can save bandwidth and server requests."
aload.js
"Loads images, scripts, styles, iframes, videos and audio asynchronously."
qrcodejs
I woudn't have thought this was possible. "Cross-browser QRCode generator for JavaScript."
Multimedia Tools
videoconverter.js
"A program that lets you process videos in your browser."
iconizr
"Takes your SVG drawings and processes them to a CSS icon kit, coming in several different flavors."
unitedshapes
Explains how to make shapes using SVG and JavaScript. "A built-in user interface allows you to tweak a few properties here and there, and each shape is linked directly to CodePen."
sizzlepig
"A cloud-based tool that allows you to resize multiple images (yes, entire folders) right before your eyes. No scripts, no guesswork. Scale, crop, edit and preview, before your final images are ever created."
The Ginger Project
"Create an awesome explainer video. Tell your story and share it with anyone online."
A Tweet for Thought
Interesting discussion started by Brad Frost on creating a separate IE-only stylesheet with Sass.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions, corrections, or improvements, feel free to reply to this email.
Before I Go...
Squishy Bird. I'm pretty sure this one's not making $50,000 per day.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
