Issue #208 (Excel in JS, React, Git/CLI, Media)07/13/17
In nerdy, code golf-like manner, a JavaScript developer named Ondřej Žára recently recreated a functioning Excel-like spread sheet using just 25 lines of JavaScript. This is an update to a previous version of the spreadsheet.
The most recent iteration of the demo is using modern JavaScript techniques, avoids the hated with statement, and does the job in four fewer lines of code than the previous one.
It's amazing how many different JavaScript and DOM features he's using in this concise code. Here is a list of most of the interesting techniques he's incorporating (I've provided links to archives of this newsletter for most of the topics):
That's more or less all the modern techniques used plus a few others that are old but maybe not as well known.
Amazing how such a small piece of code can work as inspiration for beginners to the language to learn so many different features. Most of the newsletter articles I've linked to above have links to tutorials and MDN articles, so you'll have lots to delve into.
And if you don't already know, I've produced two e-books in which I've put together all the JavaScript and DOM coding tips I've written for the intros to this newsletter, so you can buy one of those if you like short coding quick tips.
Now on to this week's tools!
|
React Tools
Controlled Forms
Aims to simplify form management with React and Redux. Ships functional APIs to create your very own form fields and is built with flexibility and customization in mind.
Jetset
RESTful API fetching and caching for React apps, backed by an immutable state tree.
react-day-picker
Fully customizable ~8kb date picker component for React with ARIA support and localization.
Grid Styled
Responsive React grid system built with styled-components.
flight
The best way to build animation compositions for React. Design and compose a component to start with, a component to end with, and Flight will take it from there.
React Batch
Batch component for performant frequent updates.
React-log
React for the console. Exports a single React Component called Log. Each child will not be rendered on the DOM, but it will produce a analog representation on the console.
React Content Loader
Component in React and SVG with a collection of loaders that simulate the content will be loaded, similar to Facebook cards.
SVG to JSX
Converts SVG to valid React SVG, written in Svelte.
|
Git, GitHub, and Command Line Tools
create-component-app
Tool to generate different types of React components from the terminal.
Ink
React for CLIs. Build and test your CLI output using components.
Kobble
Instantly create and organize beautiful content for a variety of purposes, including notes, blogs, wikis, presentations, and slideshows, using content stored on GitHub.
GitPitch
Use GitHub Flavored Markdown to craft a compelling promotion, pitch, or presentation.
git-follow
follows the lifetime changes of a pathspec (including renames) through the history of a Git repository, providing a simplified log and patch diff format.
termplay
Play an image/video in your terminal.
preact-cli
Start building a Preact Progressive Web App in seconds.
gh-board
Serverless, Trello-like kanban board for GitHub issues.
Release
CLI that automatically generates a new GitHub release and populates it with the changes (commits) made since the last release.
|
Multimedia Tools
Audio Shop
Your friendly neighbourhood script for mangling images or video using audio editing tools.
Pasition
SVG and Canvas path transition and animation library.
flubber
Some best-guess methods for smoothly interpolating between 2-D shapes.
Copyfish
Firefox Add-on that allows you to extract text from images, videos, or PDFs.
MarkYourPhotos.us
Online tool to add a custom watermark to your images.
Rembrandt.js
Image comparison using node-canvas.
Cardery
A script that uses DOM-to-image to render PNG images from card data in CSV format and card templates written in HTML, CSS, and JavaScript.
|
A Tweet for Thought
Apparently, facial recognition technology is more common than you think.
Suggestions / Corrections
Made something? Send links via 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...
The top answer in this thread has to be the most thorough and well-researched answer to the most pointless Stack Exchange question ever. Ah, what people will do for fake internet points. Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
