Issue #262 (Closures, Jamstack, CSS/HTML, JS Utils)07/26/18
You've probably seen many articles online discussing the concept of JavaScript closures. The funny thing about closures is you're almost better off not knowing anything about them. And I'd argue that developers for whom JavaScript is their only programming language will benefit from using closures more so than developers who come from a language that doesn't have the feature.
Here is some code that demonstrates the benefits of a closure:
|
let outside = "This is outside the function.",
funcRef;
function parentFunction () {
let inside = "This is inside the function.";
function nestedFunction () {
console.log(outside);
console.log(inside);
}
funcRef = nestedFunction;
}
parentFunction();
funcRef();
|
View on JS Bin
For most JavaScript developers, there's really nothing all that special in this code. What this does is so common that developers use it without even thinking and probably take for granted the effect.
The closure in the code helps the variable called inside to be accessible even after parentFunction() has finished executing. If you try to log the inside variable outside parentFunction(), you'll get an error (which is just basic JavaScript scoping).
In line with this, in the book Secrets of the JavaScript Ninja, the authors define closures succinctly:
"A closure allows a function to access and manipulate variables that are external to that function. Closures allow a function to access all the variables, as well as other functions, that are in scope when the function itself is defined."
Again, if JavaScript is the only language you've used extensively, then this is probably just redundant information that doesn't help you a whole lot because you've probably been taking advantage of this the whole time you've been using the language. In this StackOverflow thread, the top answer adds this useful bit of info:
"In C and most other common languages, after a function returns, all the local variables are no longer accessible because the stack-frame is destroyed."
I think that part helps to clarify the contrast. Some of us are so accustomed to using this feature that we don't realize how different it is when closures aren't a feature.
Now on to this week's tools!
|
CMS's, Static Sites, Site Builders, etc.
Kinsta Managed WordPress Hosting
Powered by Google Cloud Platform, Kinsta takes managed hosting to the next level with resource isolation and automatic scalability. They offer 15+ data centers, 24x7 support/backups, free SSL/CDN, and dev-friendly staging/SSH. sponsored via Syndicate
Superstylin'
A Gatsby starter that uses styled-components as the main way to style your Gatsby site. Provides an easy to start structure to get you up and running with your first Gatsby-powered site.
Unlayer
The perfect email editor and page builder for SaaS. An embeddable editor that your customers will love.
Sanity
Edit collaboratively, distribute over APIs, and freely decide later how and where your content will be used.
AI-Blocks
A powerful and intuitive WYSIWYG interface that allows anyone to create Machine Learning models
Contentful
An API-first, cloud-based platform to power your sites and apps, allowing you to create first-class user experiences.
Lightwell
Software for creatives to make native mobile apps without writing a line of code.
Taxi for Email
Drag-and-drop email building for brand and agency teams. Send with your existing email platform.
Middleman
Build static websites with an easy-to-use Ruby-based framework. A static site generator using all the shortcuts and tools in modern web development.
Elmstatic
Elm-to-HTML static site generator (still in early development).
Bael Netlify CMS Template
A free template that gives you an easy way to start a blog that uses modern technologies like static-site JAMstack architecture, CSS grid layout, responsive design, and fuzzy search — all wrapped up in a brutalist aesthetic.
|
|
Recommended Reading for Developers
|
CSS and HTML Tools
Builder Book
This book teaches you how to build a full stack JavaScript web app from scratch. You'll learn React, Material-UI, Next.js, Express, Mongoose, and MongoDB, as well as APIs for Google OAuth, GitHub, AWS SES, MailChimp, and Stripe. sponsored 
CSS Micro Reset
A minimal barebones CSS reset.
Clarion CSS Architecture
The days of the monolithic styles.css page are gone. Use Clarion to help you and your teams build better projects that are easier to maintain, collaborate in, and do amazing things.
Epic Spinners
Easy to use, CSS-only loading spinners with Vue.js integration.
OptiCSS
A template-aware stylesheet optimizer.
css2sass
Online tool to convert CSS to Sass (SCSS) currently up to version 3.4.14.
Img2
Replace img elements with img-2 to automatically pre-cache images and improve page performance.
CSS Blocks
Blazing fast CSS for your design systems and app components. Inspired by CSS Modules, BEM and Atomic CSS, CSS Blocks is the next evolution of best practices.
Fontisto
Vector-based icon font and CSS toolkit consisting of 600+ free icons.
WP CSS Version History
WordPress plugin that's a custom CSS file editor using WordPress versioning and post lock functionality.
eqio
A simple, tiny alternative to element/container queries.
Gradients Cards
Customizable and editable gradients available for download as CSS, Adobe XD, or Sketch.
|
JavaScript Utilities
front-matter
An ultra simple and light-weight library for extracting front-matter.
Proxymise
Lightweight ES6 proxy for promises with no additional dependencies. Allows for method and property chaining without the need for intermediate then() or await for cleaner and simpler code.
Singlie
Progressive and functional implementation of the circular and linear singly linked list data structures in modern ES6.
number-flip
Change a number on the page with a "flipping" animation.
face-api.js
JavaScript API for face detection and face recognition in the browser implemented on top of the tensorflow.js core API.
Pickr
Flat, simple, responsive and hackable Color-Picker. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize.
LuminJS
A JavaScript library to progressively highlight any text on a page. Great for when you want users to pay attention to some important text.
JavaScript State Machine
A JavaScript finite state machine library.
xmatch
Simple pattern matching for ES6 (no transpilation).
TOAST UI Calendar
A JavaScript schedule calendar that is full featured. Now your service just got the customizable calendar.
|
A Tweet for Thought
A quote (with slide) from Jeremy Keith's talk at An Event Apart Boston on what parts of the front-end we should invest in long term.
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...
Similar to last week's final link, this is Awesome Talks, another tech talks video site with lots of options to filter by category, length, and even includes a way to hide videos you've already watched.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
