Web Tools Weekly
What a Tool!

Issue #279  (Default Exports, Frameworks, Jamstack, Productivity)11/22/18

Black Friday Deals for Designers and Developers
Great deals on WordPress hosting, managed WordPress hosting, WordPress themes, Theme builders, Page Builders, Bootstrap Templates and UI kits. Includes deals from Envato, Iconfinder, DesignModo, and more.
Check out the deals now
Black Friday

One more thing it's good to know about ES6 modules is the fact that you are permitted to define a default export for each module. This pattern is taken from pre-ES6 module systems like CommonJS.

Here's one way a module can define its default value:

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

Here I'm exporting a function as the default. I could also do this by naming my function and then referencing it elsewhere in the file as the default:

function addFunc (n1, n2) {
  return n1 + n2;

export default addFunc;

So in my main.js file, I can import this function using any name I want:

import myAddFunc from '../js/secondary.js';

console.log(myAddFunc(5, 7)); // 12

Notice I've named the function myAddFunc even though it's exported as addFunc. This is permitted because it's the default.

A module can have only one default value and it can also export non-default bindings. For example, if my secondary.js file exported the addFunc() function as the default along with two other variables, I could import them all like this (notice the use of the comma and the curly braces):

import myAddFunc, { num1, num2 } from '../js/secondary.js';

console.log(myAddFunc(num1, num2));

When it comes to best practices for use of defaults, I feel there's some disagreement in the community about what's best. Nicolás Bevacqua recommends their use exclusively, using a single default at the bottom of your module to basically export your entire API. But Ben McCormick says named exports are better simply because naming stuff is better.

If you've never used pre-ES6 modules, you might also find this 2015 article by Kent C. Dodds useful because he clears up much of the confusion around the purpose of modules, which includes a discussion of default values.

Now on to this week's tools!

Many of my previous JavaScript/DOM tips have been released in e-books (EPUB, PDF, MOBI):

JS & DOM Tips Volume 1 >
JS & DOM Tips Volume 2 >
JavaScript E-Books

Front-end Frameworks

Black Friday Deals for Designers and Developers
Great deals on WordPress hosting, managed WordPress hosting, WordPress themes, Theme Builders, Page Builders, Bootstrap Templates and UI Kits. Includes deals from Envato, Iconfinder, DesignModo, and more.   sponsored 

A free, responsive, ready-to-use website UI kit, built with Bootstrap 4.

Free landing page templates for startups.

An open source, platform-agnostic, PWA front-end library for building any type of website on any e-commerce platform.

React primitive UI components built with styled-system (responsive, theme-based style props for building design systems with React).

React components that implement Microsoft's Universal Windows Platform (UWP) design.

Now at version 2+ (details). Build responsive and accessible mobile-first projects for the web with an easy to use component library.

An opinionated React Native boilerplate.

Wired Elements
A set of common UI elements with a hand-drawn, sketchy look. Can be used for wireframes, mockups, or just a fun hand-drawn look.

React + Foundation
Foundation (the popular front-end framework) as React components.

An HTML theme built to showcase a developer's personal website.

A JavaScript library built on top of Facebook's React library that aims to bring a native desktop experience to the web, featuring many macOS Sierra and Windows 10 components.

This Week Only - All Courses by Wes Bos 50% Off!
Fullstack Advanced React & GraphQL   ES6 for Everyone

Site Builders, CMS's, etc.

An intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML.

You Don't Need WordPress
Create a blog with only Google Docs.

A new Static CMS with GUI to build an extremely safe, fast and stylish HTML website.

Build, design, and deploy fully functional front-end solutions—no coding required.

Now at version 2+ (details).  A fully open source, adaptable platform for building and running a modern online publication.

A one-of-a-kind, high performance CMS with robust web design project management capabilities that lets web designers create and maintain responsive sites fast.

Wix Code
Makes it easy to build web applications and robust websites with serverless, hassle-free coding. Set up database collections, create content rich websites, add custom forms and change site behavior via APIs.

Now at version 2+ (details). A blazing fast modern site generator for React.
Go beyond static sites: build blogs, e-commerce sites, full-blown apps, and more.

A stupidly simple, blazing fast, flat file CMS.

Turn your spreadsheet into a website. Generate beautiful list sites from your data.

Recommended Reading for Developers
Vue.js in Action   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.

Productivity Tools

Chrome extension. Stop forgetting about the bookmarks you saved. Once a week receive a newsletter built from your saved bookmarks.

An organizational tool that makes life easier. A powerful way to take notes, make lists, collaborate, brainstorm, plan and generally organize your brain.

Become accountable, productive, and organise your work better with others.

Organize and prioritize the notifications coming from  your professional applications.

One Time File
One-time file sharing, limited to 400mb.

Send a password or some other form of simple but sensitive information safely and securely to a recipient.

Create awesome time-lapse videos of your Mac screen.

Away From Keyboard (AFK)
Tracks movements on the mouse and keystrokes on the keyboard. After a certain interval, notifies you to take a break to reduce eye strain.

Sans Forgetica
A downloadable font that is scientifically designed to help you remember your study notes.

Chrome or Firefox extension. A thoughtful to-do list. Blocks websites you waste time on and unblocks them once you've finished your to-do list.

A Tweet for Thought

An interesting little-known tip from Ricky Onsman on accessibility and alt text.

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

The Mine is the best CSS-only CodePen demo you'll see this year. Kudos to Jamie Coulter for this impressive piece of work.

Thanks to all for subscribing and reading!

Keep tooling,