|
|
|
|
Issue #115 (JSON, Code Playgrounds, Sass Tools, Productivity)10/01/15
JSON.parse() and JSON.stringify(), both introduced in ES5, are supported in all modern browsers and even back to IE8. In brief, JSON.parse() parses a string as JSON and JSON.stringify() converts an object to a string. Here's an example:
|
var team = {
"BlueJays": {
"wins": 92,
"losses": 67,
"league": "American",
"division": "East"
}
};
strTeam = JSON.stringify(team);
console.log(strTeam); // logs the whole object as a string, no indenting
console.log(JSON.parse(strTeam));
/*
[object Object] {
BlueJays: [object Object] {
division: "East",
league: "American",
losses: 67,
wins: 92
}
}
*/
|
(JS Bin demo)
The first log will spit out the whole object as a string, all on one line, while the second one, if you view the console, will display the object like it was originally, but converted from the string.
JSON.stringify() also allows two optional parameters: a "replacer" function and a "space" to insert into the output for readability. For example, assuming the same object as above, let's use the following function along with a tab character as the "space":
|
function replacer(key, value) {
if (typeof value === "string") {
return undefined;
}
return value;
}
strTeam = JSON.stringify(team, replacer, '\t');
console.log(strTeam);
/*
{
"BlueJays": {
"wins": 92,
"losses": 67
}
}
*/
|
(JS Bin demo)
The replacer function, in this case, filters out values that are strings and the tab character helps the format of the output so it's more readable. You can use any string or number for the final parameter. If it's a number, this represents the number of spaces to use for each level of indent. If it's a string (as I used above), the string is inserted for each indent.
For more info on these useful methods, see:
Now on to this week's tools!
Buy my JavaScript/DOM e-book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
Text Editors and Code Playgrounds
HTMLBeautify
"A plugin for Sublime Text that formats (indents) HTML source code. It makes code easier for humans to read."
Thimble
From Mozilla. "An online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS, and JavaScript."
React UI Builder
"Easily prototype UI of any complexity with available ReactJS components.
Generate source code for new ReactJS component from any combination of other components."
Prototyp
"Prototype awesome interactions quickly and easily."
Easee
A no-code web animation tool for designers, which lets you export CSS and offers a live preview. Available for early access registration.
Paths
"Build and edit SVGs in the browser."
TweakStyle
In open Beta. "A new generation code editor ... for web design and front-end development. Other 'code editors' focus on typing and ignore the most important thing, the meaning of the code."
Ruby Plus
A JSFiddle-style code playground for Ruby, C, C#, Go, Java, Node.js, PHP, Python, Rust, and more.
Sass and Preprocessor Tools
Scss Query
"Simple and memorizable @media queries helper function; build query strings defining a mode and a breakpoint name."
Koala
"A GUI application for Less, Sass, Compass, and CoffeeScript compilation, to help web developers to use them more efficiently."
SassMeister
This one's well known but worth a mention. It's the CodePen of Sass, with lots of configuration options and the ability to add various popular Sass libraries and extensions.
Sass Sleuth
"Adapts Webkit Web Inspector to handle Sass line number debugging information."
SimpLESS
A drag-and-drop, Mac or PC app that compiles Less code into CSS.
Caffeine
A set of ready-to-use Sass mixins and functions.
Productivity Tools
opp.io
"Meeting notes – always in sync. Track progress of action items in your meeting notes."
Spectacle
For Mac. "Move and resize windows with ease. Window control with simple and customizable keyboard shortcuts."
Voice Memos
"A sample web app that lets you record voice memos. It uses ES6 classes (via Babel) and RecorderJS."
Loose Leaves
"Loose Leaves for Mac lets you instantly create lightweight, beautiful, hosted pages from the Markdown you write."
HoverCards
A Chrome extension that lets you preview social links from YouTube, Twitter, reddit, Soundcloud, imgur, and Instagram.
Butler.js
"Your portable JavaScript I/O customizable voice driven butler."
Boomerang
Schedule an email to be sent later. Easy email reminders. Lets you take control of when you send and receive email messages.
Faqt
"A lightweight, shareable knowledge base... Organize your faqts into color-coded categories and display them however you’d like with easy drag and drop sorting."
A Tweet for Thought
I don't know about you but I feel like this pretty much all the time, not just after time away.
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...
Amazingly, only this week did I first discover Tampermonkey, which is the WebKit equivalent of the popular Greasemonkey add-on for Firefox.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
