Web Tools Weekly Issue #319 (Thunk, Frameworks, Build Tools, Uncats)

Issue #319 (Thunk, Frameworks, Build Tools, Uncats)08/29/19

This week I came across a JavaScript pattern that I had never seen before and which, at first glance, I would have sworn is a syntax error. The pattern is very similar to what's referred to as an Immediately Invoked Function Expression, or IIFE.

If you recall, an IIFE looks like this:

(function () {

        // do stuff here...

      })();

The key portion of the code is the fact that there are two sets of parentheses appearing back-to-back. One wraps the function and the other follows in order to immediately invoke it.

But this week I saw something referred to by Dave Ceddia as a 'thunk' (which is a programming term). Dave uses it to refer to the following pattern:

function outerFunction() {

        return function thunk() {

          console.log('Inner function has returned.');

        };

      }

      outerFunction()();

Try it on CodePen

As Dave explains, the "thunk" is the function that gets returned by the outer function. The last line that executes the outer function also executes the inner function due to the double parentheses.

I'm not completely sure of what this is doing from a technical perspective, but I would assume the point of the extra parentheses pair is the same as with the IIFE: The inner function is getting immediately invoked, which is (from what I can tell) the only way to invoke it so that it correctly gets returned.

Apparently there are practical use cases for this, such as mentioned in this Stack Overflow thread and in Dave's post mentioned above.

Now on to this week's tools!

Front-end Frameworks

Free Mobile Form Builder and Survey Tool
JotForm Mobile Forms, available on iOS and Android, lets users collect powerful data on the go with custom forms and surveys. The free mobile app offers offline capabilities, kiosk mode, form assigning, 100+ app integrations, and advanced form fields you won't find anywhere else. sponsored

Dashboard
A UI Kit for building responsive admin dashboard web apps.

Lazy Kit
A complete design system built on Bootstrap 4. It overwrites all Bootstrap 4 components and adds 2 more plugins and comes with three example pages.

HTML Email Templates
A small set of four HTML email templates (two newsletter, two e-commerce) from MySigMail.

Serverless Components
An easier way to build and share serverless applications with the Serverless Framework. Deploy entire serverless use-cases, like a blog or user registration system, without managing complex cloud infrastructure configurations.

MVC.js
A simple MVC application in plain JavaScript. Might be a good starting point to learn about the model/view/controller pattern.

Pylon
Declarative layout primitives for CSS and HTML. Encapsulates Flexbox logic into a set of declarative and expressive tags and attributes which, when combined, form robust user interfaces.

Conference App in a Box
Full-stack and cross-platform app customizable and themeable for any event or conference.

KendoReact
A React UI component library with dozens of customizable UI and data visualization components, including Data Grid, DatePicker, TreeView, and more.

electron-with-server-example
An example Electron app with a back-end server wired up via IPC.

FullStack
A React/ApolloGraphQL/Node/Mongo demo written in Typescript that can be used as a full-stack boilerplate for you to learn some cool things or to build your next app.

Electron
Now at version 6+ (details). A framework for creating native applications with web technologies like JavaScript, HTML, and CSS.

Build Tools, Bundlers, Deploy, etc.

Transform
A polyglot web converter. Convert HTML, SVG, JSON, GraphQL, and more to various formats.

patch-package
Lets app authors instantly make and keep fixes to npm dependencies.

Feathery
Easiest way to deploy a JavaScript SPA application, with automatic SEO indexing.

fast-fp.macro
Zero overhead functional programming library for projects using babel-plugin-macros.

Divjoy
The React code base generator. A free web-based tool to create the perfect code base for your next project.

preducks
Prototype and export React + Redux + Typescript apps. Download for Windows or try it in the browser.

rollup-plugin-off-main-thread
Use Rollup with workers and ES6 modules today.

tomo
A friendly command line tool designed to help create sustainable software using web technology.

cessie
Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.

SCAR
One-click static website deployment on AWS. Deploy static websites in seconds – with HTTPS, a global CDN, and custom domains.

npmfs
A JavaScript package inspector. Includes a package viewer, package diff, and deep linking to specific lines in files and diffs.

go-web-app
CLI for setting up a Go WebAssembly frontend app. I don't normally include Go tools, but this was submitted by a 15-year old developer, so I couldn't resist!

The Uncategorizables

Tech Productivity Newsletter
Looking for productivity tools? I've moved most of them to my new brief weekly newsletter on productivity in tech. promoted

Qazy
The simplest way to create a newsletter. Write it in the editor, distribute it with a blast email tool, and get paid via integrated billing.

Superposition
Mac, Windows, or Linux app. Extract design tokens from websites and use them in code and in your design tool.

geo-info
A simple free geocoding API for turning coordinates into human readable locations and locations into coordinates.

Foliate
A simple and modern eBook viewer.

listmonk
Self-hosted newsletter + mailing list manager. Performance and features packed into a single binary.

Honeycomb
Next-generation application performance monitoring for modern Engineering and DevOps to observe, debug, and improve production systems efficiently.

Tripetto
Make smart forms and surveys. Totally untangles building deeply conversational flows with a self-organizing visual form editor.

CommonLook
Test, create, remediate and validate PDFs for accessibility and compliance with the latest ADA and Section 508 regulations.

Medium to own blog
Switch from Medium to your own blog in a few minutes using this automated process.

EmailMe.chat
Chatbot platform for your website. Offer an interactive experience whenever a visitor clicks on an email link.

CodeFund
an ethical, open, and developer-driven ad platform that funds contributors
of the open-source ecosystem.

A Tweet for Thought

Lately I feel like I do more writing than coding, so this hits close to home.

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

Trennd is a neat and simple site that displays data visualizations of topics that are trending upwards in recent years via Google search, "so you can find the next big thing."

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris