|
|
|
|
Issue #169 (Template Literals, Git/CLI, Mobile, JS Utils)10/13/16
This week's quick tip comes from James Hibbard, one of SitePoint's JavaScript content editors. SitePoint produces tons of quality JavaScript articles and they also have a SitePointJS Twitter account that you can follow for all things JavaScript.
In my opinion, one of the best (and probably most underrated) features of ES6 is the template literal. Template literals are multi-line strings that can include interpolated expressions and which have the potential to make your code much easier to read. To give you a better idea of what that means, let's look at an example.
Given a company object:
|
var company = {
'name' : 'SitePoint',
'url' : 'https://www.sitepoint.com/'
}
|
In ES5 we might have done something like this, to output the data contained in that object into a list:
|
var html = '<ul>\n';
html += ' <li>Name: ' + company.name + '<li>\n';
html += ' <li>URL: <a href="' + company.url + '">' + company.url
+ '</a><li>\n';
html += '</ul>';
|
However, with the new ES6 syntax, it becomes much more readable:
|
const {name, url} = company;
const html = `
<ul>
<li>Name: ${name}<li>
<li>URL: <a href="${url}">${url}</a><li>
</ul>
`;
|
As shown, template literals are declared using backticks. Additionally, anything inside ${} is evaluated as an expression – this means we're not limited to just variables, but anything that resolves to a value. So one of our list items could look like this:
|
<li>${ Object.keys(company).map(
(value) => company[value]
).join(', ') }</li>
|
Here's a JS Bin with the above example.
That's template literals in a nutshell. Check out MDN's article on the topic for more info and be sure to check out SitePoint JavaScript for lots more tutorials and content on modern front-end development.
Now on to this week's tools!
Git, GitHub, and Command Line Tools
EncryptedGist
"Client-side encrypted plain text editor that can persist/sync with GitHub Gists. All text is synchronized in an encrypted state."
Borg
"A terminal based search engine for bash snippets."
GitHub Night Mode
Chrome extension to experience GitHub with a dark theme (i.e. "night mode").
ripgrep
"A command line search tool that combines the usability of The Silver Searcher ... with the raw speed of GNU grep."
ntfy
"A utility for sending notifications, on demand and when commands finish."
Y-Cloninator
"Some of the best content on Hacker News are the links to up-and coming projects on GitHub. Get a list of these awesome projects without the distraction of the rest of Hacker News."
git-fiddle
"Edit commit messages, authors and timestamps during git-rebase."
Sourcegraph for GitHub
Chrome extension. "Gives GitHub IDE powers: jump to definition, doc tooltips, and semantic code search in the GitHub file browser and code review."
RWD and Mobile Tools
Snowflake
"A React-Native starter mobile app, or maybe just an example, or maybe a boilerplate (you decide) for iOS and Android with a single code base."
Musketeer
"A simple tool to see how your site looks on desktop, laptop, tablet & mobile."
GoNative.io
"Convert your web application into native Android and iOS. We offer a 100% guarantee your app will be approved by Apple App Store & Google Play."
Exponent
"Lets web developers build truly native apps that work across both iOS and Android by writing them once in just JavaScript."
Reframe.js
"A JavaScript plugin that makes unresponsive elements responsive."
lory
"Touch enabled minimalistic slider written in vanilla JavaScript."
LaunchKit
Recently acquired by Google. "A suite of easy to use tools for mobile app makers to create, launch and monitor their apps."
Appetize.io
"Stream iOS & Android Native Apps in the Browser. For embedding apps in websites, development, client demos, testing and more."
JavaScript Utilities and Modules
Faltu
"Search sort, filter, limit and iterate over an array of objects in Mongo-style."
currencyFormatter.js
"A super simple currency formatting library. 155 currencies, 715 locales & less than 7KB gzipped."
async-waituntil-polyfill
A polyfill for a specific feature of the Service Worker spec that was in earlier versions of the spec, and is now back in the spec but without solid browser support.
Animate.js
A small vanilla JavaScript plugin to trigger animations on elements when they are within the viewport.
optimize-js
"Optimize a JavaScript file for faster initial execution and parsing, by wrapping all immediately-invoked functions or likely-to-be-invoked functions in parentheses."
Fuse.js
"Lightweight fuzzy-search library."
Quill
Now at version 1.x. "Free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need."
flatpickr
A lightweight and powerful date/time picker utility.
A Tweet for Thought
This series of Twitter polls by Greg Whitworth on dev skills provided some interesting results and follow-up discussion.
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...
If you're a WordPress developer, you might want to bookmark WP Dev Tuts, a search engine for WordPress tutorials.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
