|
|
|
|
Issue #49 (config data, JS Utils, Sass, Code Playgrounds)06/26/14
In his excellent book Maintainable JavaScript, Nicholas Zakas recommends externalizing configuration data. For many experienced developers, this is probably old hat. But let's look at the example he uses, so we can see exactly what this means and why it's beneficial for your applications.
function validate(value) {
if (!value) {
alert("Invalid value");
location.href = "/errors/invalid.php";
}
}
function toggleSelected(element) {
if (hasClass(element, "selected")) {
removeClass(element, "selected");
} else {
addClass(element, "selected");
}
}
|
There are three pieces of data in this code that are "configuration data": (1) The string "Invalid value", (2) The URL "/errors/invalid.php", and (3) the CSS class name "selected", which is used three times. All of these are configuration values that could change at any time.
Yes, you could change them in each of their hard-coded instances, but naturally that would not be practical, especially if there are lots of places where they appear and if they are in separate files or modules or even separate (but related) projects that have common modules.
Here is a better way to write the same piece of code:
var config = {
MSG_INVALID_VALUE: "Invalid value",
URL_INVALID: "/errors/invalid.php",
CSS_SELECTED: "selected"
};
function validate(value) {
if (!value) {
alert(config.MSG_INVALID_VALUE);
location.href = config.URL_INVALID;
}
}
function toggleSelected(element) {
if (hasClass(element, config.CSS_SELECTED)) {
removeClass(element, config.CSS_SELECTED);
} else {
addClass(element, config.CSS_SELECTED);
}
}
|
Although this does technically create more code, the benefits are great. The config object is where all such data now exists, and each of the property names has its own prefix to categorize the data.
As Zakas points out, the actual method you use and the naming conventions are a matter of preference, but the important thing is, we've removed the hard-coded values from the functions and replaced them with placeholders that only need to be changed in a single place in your code, should the need arise.
Now on to this week's tools!
JavaScript Utilities
steady.js
"A jank-free module to do logic on the onscroll event without performance regressions in @media-query like conditions."
ngActivityIndicator
Animated preloaders for Angular.js applications.
politespace
"Politely add spaces to numeric form values to increase readability (credit card numbers, phone numbers, etc)."
Powerange
"A range slider control, inspired heavily by iOS 7 and the "Power Rangers" TV series. It is easily customizable, both by CSS and JavaScript."
Carota
"A rich text editor implemented entirely in JavaScript that uses HTML5 Canvas for rendering."
<qr-code>
"Web Component for generating QR codes."
Quink
"An extensible, end-user friendly in-page WYSIWYG HTML editor — designed for mobile first. It allows developers to add rich input and self editing areas into web pages and web apps."
Trianglify
"A JavaScript library for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds."
Quill
"A free, open source WYSIWYG editor built for the modern web. With its extensible architecture and a expressive API you can completely customize it to fulfill your needs." IE9+.
Sass and Preprocessor Tools
3D CSS Ribbons
"An extension (for Compass) to create 3D ribbons using only CSS."
Sassy Ink
"Unofficial Sass port of Ink, Zurb's responsive email framework."
Sassline
"Set text on the web to a baseline grid with Sass & rems."
Spriteowl
Export your Photoshop Sprites to PNG and CSS, Less, Sass/SCSS or Stylus code.
CSS3 Slideshow
A Sass mixin for a pure CSS3 Slideshow.
CSS-Shapes
"CSS Shapes defined using SCSS mixins."
Js2coffee
"The JavaScript to CoffeeScript compiler ... helps you migrate projects to CoffeeScript."
Animation Studio
"A Compass extension for recreating traditional animation techniques with CSS3 animations."
CodeKit
The popular Mac app is now at version 2.x. Let's you "compile everything" including Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim and Markdown.
Text Editors, Visual Tools, Code Playgrounds
Runnable
Run your code online with your stack of choice, including Dart, C++, Java, Rails, Node.js, PHP, jQuery, Ruby, Django express, Python, CodeIgniter, .NET Flask, CakePHP, and Bash.
RequireBin
"Shareable JavaScript programs powered by NPM and Browserify."
Zed
"A fully offline-capable, open source, keyboard-focused, text and code editor for power users." You can use it to edit local files as well as remote files on any server and it comes as a Chrome app or native app.
codeMagic
A fast and powerful multi-featured online text editor and code playground.
Neovim
"Vim for the 21st century. Neovim is a project that seeks to aggressively refactor Vim."
Massren
"A command line tool that can be used to rename multiple files using your own text editor."
Ajax API Playground
A 3-paned code playground for playing with any of a number of APIs for Google services including YouTube, Maps, Calendar, Earth, and lots more.
A Tweet for Thought
As William Gunn points out, apparently at some point, Twitter started choosing which @-replies it should show you using a "tailored for you" setting. Fortunately, you can change that in your Twitter account settings.
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...
This is pretty cool: it's a search engine called Piranhas, that displays book price comparisons. Just type in the name of the book and it displays the cost, including shipping and currency conversion, pulling up results from Amazon, Book Depository, and Wordery.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
