Web Tools Weekly
What a Tool!

Issue #252  (IW Plug, Jamstack, JS Utils, Text Editors)05/17/18

Segment Personas is Now Out of Beta
Personas allows you to combine user data and events into one universal customer profile. Then, you can build computed traits and custom audiences on top of your data and auto-sync to Facebook, Google, Redshift, and hundreds more.
Sign Up Today
Segment Personas

As many of you know, in addition to this newsletter, I run a website called Impressive Webs where, for years, I've written about front-end code. For a long while there, however, I didn't publish articles regularly, choosing to focus on this newsletter and other projects.

Last month I began publishing regularly again and my plan is to publish three or four articles per month, as time allows. Most of the posts will be on HTML and CSS, with some coverage of Web APIs and related technologies. More or less anything on the front end that I don't cover in this newsletter intro.

Here are the most recent posts:

You can subscribe to email updates for new articles or you can use the RSS feed, if that's your preference.

That's my shameless self-plug for this week. I'll get back to the usual coding tips in next week's issue.

Now on to this week's tools!

Site Builders, Static Sites, CMS's, etc.

Personas by Segment is now out of beta
Use Personas to treat your customers like people, not data points. Get started with Personas. sponsored 

Webflow Ecommerce
Visually design, build, and grow online stores.

Generate a website from Google Sheets. No coding necessary. Build a site with pictures, text and links. Update it instantly in your spreadsheet.

Lonely Page
Create and design your landing, event, business or profile page with the simplest, most flexible one-page builder you've ever used.

Adds a table of contents to Gatsby Markdown files using mdast-util-toc (which generates a table of contents using a Markdown abstract syntax tree).

Multiple products to create stunning animated and interactive HTML5 content, do iOS testing, and edit HTML and PHP with a live preview.

A user friendly, secure, and serverless JavaScript CMS.

Turn Google Sheets into an API in 5 minutes. Access Google Spreadsheets via REST API and use it as a data store or CMS. No‑deploy, no‑maintenance.

The React static site generator that separates editing and code concerns.

Prerender SPA Plugin
Flexible, framework-agnostic static site generation for sites and single-page applications built with webpack.

Zero-config React development environment and static site generator.

Recommended Reading for Developers
Learning React Book   Ruby for Beginners Book   CSS in Depth Book

JavaScript Utilities

Simple component coupled with a CLI that will lazy load your images with a blurry preview.

A face-detection library in 200 lines of JavaScript.

Convert a string to a slug (e.g. "CSS rocks" becomes "css-rocks"). Useful for URLs, file names, etc.

A library for working with monetary values in JavaScript.

Multiple Images upload with Laravel 5.2 and Dropzone.js.

A modularization framework to manage application states using an immutable model tree.

Cycle through the items of an array. Useful for cycling through tabs, images of a slideshows, etc.

Tiny library (<200B gzip'd) for deferring something by a "tick".

A universal, human-centric, replayable JavaScript event emitter.

Flow-compatible runtime type system for JavaScript.

A Simple and Isomorphic GraphQL Client for JavaScript.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

Text Editors, Code Playgrounds, IDEs

A new kind of editor, focused on maximizing productivity – combining modal editing with features you expect in modern editors. Built with Neovim.

AWS Cloud9
A cloud IDE for writing, running, and debugging code.

An Atom package that allows for epic pair programming, powered by Pusher.

Now at version 1+. Build and deploy in seconds. Instant programming environment for your favorite language.

Offline front-end playground right in your browser. No network involved, so it opens and shows previews instantly, with preprocessor support and external libraries too.

Decentralized, cross-editor, collaborative text-editing.

A system used to create syntax highlighters for modern IDEs. (details)

WebAssembly Studio
An online IDE developed by Mozilla that can be used to compile C/C++ and Rust code into WebAssembly (WASM).

Online Regular Expression testing and Cookbook for: Go, Java, JavaScript, .Net, Perl, PHP, Python, Ruby, and lots more.

Modern, smart, and extensible cloud IDE with additional features only a cloud application can give you.

A Tweet for Thought

Is it more difficult to be a CSS beginner today? Or was it worse 10 years ago? This thread has some comments on that subject.

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

Ashley Nolan has published the results of this year's Front-end Tooling Survey. Check that out if you'd like to know what's trending in the industry.

Thanks to all for subscribing and reading!

Keep tooling,