Web Tools Weekly
What a Tool!

Issue #275  (ES6 Modules, CSS/HTML, Frameworks, Uncats)10/25/18

Advertisement via Syndicate
The Fast and Visual Way to Understand Your Users
Hotjar is everything your team needs to:
✓ Get ‘in-the-moment’ visual feedback
✓ See how people are really using your site
✓ Uncover insights to make the right changes
Try it for free today

As previous tips have shown, ES6 modules are a great way to isolate specific bindings (i.e. variables, functions, or classes) and import them as needed into the current module.

But what if you want to import an entire module, with all its variables and functions? There's a way to achieve this all in one shot. Let's say my secondary.js file, which holds my exports, looks like this:

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

export let amt1 = 10,
           amt2 = 25,
           amt3 = 30;

Here I'm exporting an add() function along with three 'amount' variables. I'm going to import this entire module so I can use these bindings inside main.js:

import * as mod from '../js/secondary.js';

console.log( mod.add(3, 4) ); // 7
console.log( mod.add(mod.amt1, mod.amt2) ); // 35
console.log( mod.amt3 ); // 30

On the first line is where the import takes place. I'm using the asterisk character to indicate that I want all bindings imported. I do this by loading them into an object that I've named mod.

Once this is done, I can access the add() function and the three variables as properties of the mod object. I can't access any of those bindings without referencing them as properties of mod. And just to reiterate: "mod" is just a name I chose. This could be any name, but obviously you'd want to be avoid using a reserved word (e.g. "continue" or "function" would both throw an error if you tried to use one of those as the object name).

As you can see, ES6 modules are extremely flexible. You can import an entire module or any individual bindings that are exported.

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


CSS and HTML Tools

The Fast and Visual Way to Understand Your Users
Hotjar is everything your team needs to get ‘in-the-moment’ visual feedback, see how people are really using your site, and uncover insights to make the right changes.    sponsored via Syndicate 

A search engine for colors. Allows you to enter any keyword and the algorithm will spit out various shades related to that keyword, with hex values.

Fancy Border Radius Generator
A border-radius tool that takes advantage of the little-known 8-value syntax using a slash character, which allows you to create unique shapes.

Styled Map
A better way to map props to styles. Simple CSS-like syntax, for styled-components and Emotion (the popular CSS-in-JS solutions).

CSS Stats
Online tool to view stats for a CSS file. Tells you number of rules, selectors, declarations, unique colors, font sizes, and lots more.

Create a web page with just markdown. Just include a script and write Markdown inside your .html file.

A JavaScript utility to get element references directly from an HTML string, to avoid the tediousness of creating nested DOM elements.

Polyfill for the `:focus-visible` pseudo-class, which is currently supported only in Chrome.

Taste Your Scroll Bars
Online tool to generate the code for custom scrollbars in WebKit-based browsers.

Now at version 4+ (details). Library that allows you to use the best bits of ES6 and CSS to style your apps without stress.

A small (1.6kb) library to work with web components.

CSS Code Generators
A bunch of code generators for various CSS features (gradients, shadows, fonts, etc).

Recommended Courses for Developers
Fullstack Advanced React & GraphQL   ES6 for Everyone

Front-end Frameworks

Elastic Site Search – Powerful Search for your Website
Now it's easy for web professionals to add powerful, customizable search to their website. Simply enter your web address and we'll index your site and create your search engine in real time. Try it today.   sponsored 

Build blazing fast websites for any CMS or data with Vue.js.

Reusable React components for creating Single Page Apps.

A flexible React UI Framework for enterprise-grade web apps, for building ambitious products on the web.

React SPA
A boilerplate for creating SPAs in React, with a full server.

Now at version 3+ (details). React components that implement Google's Material Design.

A complete toolset to streamline building and updating a set of consistent transactional emails (i.e. emails sent programmatically via your app).

A boilerplate for creating Chrome extensions with React.

Now at version 3+ (details). A framework for creating native applications with JavaScript, HTML, and CSS.

A collection of essential UI components written with React.

Atlassian's official UI library, built according to the Atlassian Design Guidelines.

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

The Uncategorizables

Elastic Site Search – Powerful Search for your Website
Now it's easy for web professionals to add powerful, customizable search to their website. Simply enter your web address and we'll index your site and create your search engine in real time. Try it today.   sponsored 

Helps you engage and qualify your viewers by adding interactive notes, questions, and personalization to any video in seconds.

Simple Analytics
Cookie-free and GDPR-friendly analytics solution for websites, as an alternative to Google Analytics.

An extensible web browser with a totally different user experience, built on top of Electron, React, and styled-components.

A new ecosystem created by Tim Berners-Lee to realize the web the way it was originally envisioned.

Take back ownership of your audience by building a thriving social community to drive conversation, page views, clicks, and revenue.

Make any web page a desktop application.

The no-compromise browser. Gives you relevant search results and does not leak your private data.

A tiny and elegant HTTP client based on the browser Fetch API.

Integrate Stripe (the popular payment platform) with your SAAS without coding.

Create a REST API backend quickly by snapping it together visually.

A Tweet for Thought

Great advice when learning code from a book. This is definitely something that helped me immensely when I first started writing code.

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...

I'm not personally into fancy keyboards, but you might want to check out the Ultimate Hacking Keyboard, if that's your kind of thing.

Thanks to all for subscribing and reading!

Keep tooling,