Web Tools Weekly
What a Tool!

Issue #273  (ES6 Modules, Library Tools, Text Editors, Deployment)10/11/18

Advertisement via ThoughtLeaders
Pramp – Free Frontend Interview Practice
Now you can practice for your frontend interview with a peer, for free. Practice HTML, CSS, and JavaScript over a collaborative environment with other awesome developers like yourself. Sign up to get unlimited interview credits!
Get ready for your next coding interview

For those of you who still haven't looked into using JavaScript modules, introduced in ES6 and now with strong browser support, I'll introduce this feature here. Among other things, ES6 modules help with errors and problems that can occur due to naming collisions in the global scope, and they can also keep your code clean, organized, and easier to maintain, especially on a large project in a team environment.

Let's look at a basic example to see how you can use ES6 modules in a JavaScript codebase running in the browser.

I'm going to have an HTML page that includes the following script at the bottom of the page:


  <script src="js/main.js" type="module"></script>

Notice the type attribute set to "module". This is required if I want this script to be able to use ES6's module-based features. This tells the browser that I want this file to load as a module, rather than a script.

In addition to main.js, I'm also going to create a secondary.js file in the same directory as my main.js file. But I'm not going to include that as a script in the HTML – the secondary.js file will hold code that I'm going to import into main.js.

Here is  my secondary.js file:

export let color = 'blue';

export function add(n1, n2) {
  return n1 + n2;

In this file I'm exporting two specific parts of the code: the color variable and the add() function. With these export commands in place, I can now import them to my main.js file:

import { color, add } from '../js/secondary.js';

console.log(color); // "blue"
console.log(add(10, 20)); // 30

The import keyword and the curly braces specify the bindings, separated by commas, that I want to import. As you saw in the previous code block, I identified via the export keyword which ones were available inside that module. If there's something inside secondary.js that's not exported, it won't be available via import in another module.

There's lots more to discuss on this topic, but this should give you a quick start to use this elegant feature introduced in ES6.

Now on to this week's tools!

Are you learning JavaScript? You'll love my e-books:
► JavaScript & DOM Tips Volume 1
► JavaScript & DOM Tips Volume 2


JavaScript Library Plugins and Tools

Pramp - Free Frontend Interview Practice
Now you can practice for your frontend interview with a peer, for free. Practice HTML, CSS, and JavaScript over a collaborative environment with other awesome developers like yourself. Sign up to get unlimited interview credits!    sponsored via ThoughtLeaders 

A responsive jQuery calendar scheduler built with Bootstrap and Moment.js.

Toolkit for building complex drag and drop interfaces in Angular. Based on, and very similar to react-dnd, and is also powered by dnd-core and compatible with all back ends.

jQuery Rate
A jQuery plugin that allows you to draw simple ratings (e.g. a dynamic percentage rating circle graphic).

Angular Console
A tool to make it easier to build Angular apps powered by the Angular CLI.

Simple and effective state management for Angular applications.

Serve sitemap.xml from a list of URLs in Express (the popular Node.js framework).

Search for unused components in your Ember project.

The missing documentation tool for your Angular application. Generate your Angular project documentation in seconds.

A port of the ESQuery API for TypeScript that allows you to query a TypeScript AST for patterns of syntax using a CSS-style selector system.

A fast, configurable, and lightweight drag-and-drop, sortable library for Angular that uses CSS transitions for animations so it's hardware accelerated whenever possible.

Recommended Reading for Developers
Learning React Book   CSS Master   CSS Secrets Book
Have you written a book for developers that's available on Amazon? Reply to this email and let me know. I'll consider including it here. No charge.

Text Editors, IDEs, etc.

Snippet Store
A code snippet management app for developers for Windows and Linux (or build from source for Mac).

Automate routine programming.  Open source project that brings smart code generation to your favorite IDEs.

Vim plugin to allow you to easily resize your window.

IntelliSense for CSS class names in HTML
VSCode plugin that offers CSS class name completion for the HTML `class` attribute, based on the definitions found in your workspace.

TypeScript Plugin for Sublime Text
Uses an IO wrapper around the TypeScript language services to provide an enhanced Sublime Text experience when working with TypeScript code.

Barebones Vim plugin manager.

VSCode GraphQL
GraphQL extension for VSCode that adds syntax highlighting, validation, and language features (e.g. go to definition, hover information, autocomplete) for GraphQL projects.

Angular2+ HTML syntax for Sublime Text.

VSCode plugin that enables syntax highlighting and IntelliSense for HTML inside JavaScript and TypeScript tagged template strings.

VSCode plugin that visually highlights the current indent depth in your code.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Module Bundlers, Deployment, etc.

When using rollup.js (the module bundler), run your bundles in Node once they're built.

Adds native Web Worker bundling support to webpack.

The easiest way to transform Node.js modules into browser-compatible libraries.

A minimal abstraction, dependency-free, plug-and-play, JavaScript task runner.

Prints the gzipped sizes of your webpack assets and the changes since the last build.

The popular JavaScript transpiler/compiler is now at version 7+ (details).

A JavaScript library that lets you manage and co-ordinate the loading of assets and data.

Replace the `npm install` progress bar with an animated GIF.

The best way for developers to build, deploy, and scale their container-based Docker applications with ease.

PWA Universal Builder
A framework-agnostic, multi-featured toolkit for building Progressive Web Apps.

A Tweet for Thought

Has this been your experience when landing a job with a company that insisted you're familiar with best practices?

Send Me Your Tools!

Made something? Send links via Direct Message on 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...

BitMidi is a collection of popular songs and melodies in midi format (i.e. the worst audio file format in the history of everything).

Thanks to all for subscribing and reading!

Keep tooling,