Issue #279 (Default Exports, Frameworks, Jamstack, Productivity)11/22/18
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!
|
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
UnderExpress
A free, responsive, ready-to-use website UI kit, built with Bootstrap 4.
Cruip
Free landing page templates for startups.
Falcon
An open source, platform-agnostic, PWA front-end library for building any type of website on any e-commerce platform.
Rebass
React primitive UI components built with styled-system (responsive, theme-based style props for building design systems with React).
React-UWP
React components that implement Microsoft's Universal Windows Platform (UWP) design.
Grommet
Now at version 2+ (details). Build responsive and accessible mobile-first projects for the web with an easy to use component library.
BURN
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.
Intro
An HTML theme built to showcase a developer's personal website.
react-desktop
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!
|
Site Builders, CMS's, etc.
Vapid
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.
Publii
A new Static CMS with GUI to build an extremely safe, fast and stylish HTML website.
Mason
Build, design, and deploy fully functional front-end solutions—no coding required.
Ghost
Now at version 2+ (details). A fully open source, adaptable platform for building and running a modern online publication.
Sitejet
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.
Gatsby
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.
Pico
A stupidly simple, blazing fast, flat file CMS.
Spreadsheet2Site
Turn your spreadsheet into a website. Generate beautiful list sites from your data.
|
|
Recommended Reading for Developers
|
Productivity Tools
Mailist
Chrome extension. Stop forgetting about the bookmarks you saved. Once a week receive a newsletter built from your saved bookmarks.
WorkFlowy
An organizational tool that makes life easier. A powerful way to take notes, make lists, collaborate, brainstorm, plan and generally organize your brain.
RemoteStandups
Become accountable, productive, and organise your work better with others.
Gwapit
Organize and prioritize the notifications coming from your professional applications.
One Time File
One-time file sharing, limited to 400mb.
1ty.me
Send a password or some other form of simple but sensitive information safely and securely to a recipient.
Hustl
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.
Prod
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
