Issue #252 (IW Plug, Static Sites, JS Utils, Text Editors)
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.
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.
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.
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
Simple component coupled with a CLI that will lazy load your images with a blurry preview.
Convert a string to a slug (e.g. "CSS rocks" becomes "css-rocks"). Useful for URLs, file names, etc.
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".
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.
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)
An online IDE developed by Mozilla that can be used to compile C/C++ and Rust code into WebAssembly (WASM).
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!