Issue #234 (Nested Literals, JS Lib Plugins, Productivity, JS Utils)01/11/18
Here's a quick tip on using ES6 template literals. As you probably know, template literals allow you to insert a JavaScript expression using ${} to include a variable within a string. These placeholders (also referred to as substitutions) need not be merely variable references, but can be any JavaScript expression (a calculation, function call, etc).
On top of that, since a template literal placeholder itself is a JavaScript expression, you can nest a placeholder within a placeholder. Here's an example, similar to one used in MDN's article on the topic:
|
// mock functions
function isLargeScreen() {
return false;
}
function isCollapsed() {
return true;
}
// nested template literals
const classes = `header ${ isLargeScreen() ? '' :
icon-${(isCollapsed() ? 'expander' : 'collapser')}` }`;
console.log(classes);
|
JS Bin demo
The key portion of the code is the line that defines the classes constant. Notice the ternary expression that begins inside the first placeholder. If isLargeScreen() evaluates to false, another ternary expression is evaluated using isCollapsed(), which itself nests another placeholder inside the original.
This is just another way that template literals make dealing with strings much easier in JavaScript. A technique like this was certainly possible in ES5, but it's a little more elegant and easier to maintain using template literals.
Now on to this week's learning tools!
|
JavaScript Library Plugins & Tools
angular-imask
Angular plugin for imaskjs, the form input mask utility.
Angular Controls
The first complete collection of Angular components.
Jalendar
A premium calendar jQuery plugin pack that supports 13 languages,
4 calendar types, and more.
Telemachy
Easy guided tours for Angular apps.
Punchcard
A jQuery plugin for creating GitHub Punchcard like graphs.
Sticky-Kit
A jQuery plugin for making smart sticky elements.
Nx
An open source toolkit for enterprise Angular applications.
jQuery contextMenu
Plugin to add advanced context menu functionality to your apps.
Gridtab
A lightweight jQuery plugin to create grid based responsive tabs.
|
Productivity Tools
Tapwater
App for creating a timeline of a project as it progresses. By easily logging the past, present, and future, it keeps everyone on the same page and gives you clarity to do your best work.
Array Explorer
Find the JavaScript array method you need without digging through the docs.
Purple
Collaborative boards that simplify UX planning. Share documents, lists, prototypes, and designs in one place.
Clockify
Free time tracking tool for agencies and freelancers.
FullContact
Chrome extension. Know everything about your Gmail contacts, right from your inbox.
Topicbox
Supercharge your email discussions. Boost your team’s knowledge with a powerful shared archive.
eisedo
Manage your time like a pro. Automatically prioritises your tasks, helping you to work smarter.
Marker
Visual feedback and bug reporting tools for web professionals. Makes it easy for non technical people to report visual bugs to dev teams.
|
JavaScript Utilities
Emergence.js
Lightweight, high-performance JavaScript plugin for detecting and manipulating elements in the browser.
LINER
API to add select-to-highlight and share functionality (like Medium) to web content.
Merchant.js
System for creating programs that manage changing numbers over time. It's especially useful for creating idle games (sometimes called incremental games).
Direction Reveal
Direction aware content reveals. Detects which direction a user enters/exits a block, allowing you to reveal/hide content accordingly.
Workbox
A collection of JavaScript libraries for Progressive Web Apps.
post-robot
Cross domain post-messaging on the client side, using a simple listener/client pattern.
emittery
Simple and modern async event emitter. Emitting events asynchronously is important for production code where you want the least amount of synchronous operations.
Luxon
A powerful, modern, and friendly wrapper for JavaScript dates and times.
Pretty Scroll
A sticky element plugin to make an element follow you as you scroll. Has a simple API with options for a breakpoint and location of the sticky item.
|
A Tweet for Thought
Discussion begun by Sara Soueidan on whether it's overly negative to focus too much on lack of browser support for new features. I'm on the fence on this one, but I do feel pragmatism isn't necessarily negativism.
Send Me Your Tools!
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...
You might like 30 seconds of code, a curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
