Issue #275 (ES6 Modules, CSS/HTML, Frameworks, Uncats)10/25/18
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!
|
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
Picular
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.
md-page
Create a web page with just markdown. Just include a script and write Markdown inside your .html file.
from-html
A JavaScript utility to get element references directly from an HTML string, to avoid the tediousness of creating nested DOM elements.
focus-visible
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.
styled-components
Now at version 4+ (details). Library that allows you to use the best bits of ES6 and CSS to style your apps without stress.
Atomico
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
|
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 
Gridsome
Build blazing fast websites for any CMS or data with Vue.js.
airr-react
Reusable React components for creating Single Page Apps.
Evergreen
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.
Material-UI
Now at version 3+ (details). React components that implement Google's Material Design.
MailMason
A complete toolset to streamline building and updating a set of consistent transactional emails (i.e. emails sent programmatically via your app).
react-chrome-extension
A boilerplate for creating Chrome extensions with React.
Electron
Now at version 3+ (details). A framework for creating native applications with JavaScript, HTML, and CSS.
Zent
A collection of essential UI components written with React.
Atlaskit
Atlassian's official UI library, built according to the Atlassian Design Guidelines.
|
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
Mindstamp
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.
Wexond
An extensible web browser with a totally different user experience, built on top of Electron, React, and styled-components.
Solid
A new ecosystem created by Tim Berners-Lee to realize the web the way it was originally envisioned.
Spot.IM
Take back ownership of your audience by building a thriving social community to drive conversation, page views, clicks, and revenue.
Nativefier
Make any web page a desktop application.
Cliqz
The no-compromise browser. Gives you relevant search results and does not leak your private data.
Ky
A tiny and elegant HTTP client based on the browser Fetch API.
Servicebot
Integrate Stripe (the popular payment platform) with your SAAS without coding.
PipeGears
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,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
