Web Tools Weekly
What a Tool!

Issue #248  (TypeScript Intro, Testing, Frameworks, JS Utils)

Once in a while I feature tools in this newsletter that are written in something called TypeScript. Prior to writing this intro, I knew very little about it, but I thought it would help to do a little research and share some of that info here with a quick history lesson and the potential benefits of using TypeScript if you're a JavaScript developer.

TypeScript is a language developed and maintained by Microsoft, first made public in 2012, although it was in development for a few years prior to that. TypeScript is intended to fix some of the weaknesses inherent in JavaScript, particularly in developing large scale applications. TypeScript is referred to as a superset of JavaScript and it transpiles into JavaScript.

I would say TypeScript is like CoffeeScript on steroids. Maybe that's not the best analogy, but that might give you a decent idea of what it's about, assuming you know what CoffeeScript is.

The benefits of TypeScript include:

  • An improved type system (i.e. optional static typing and type inference)
  • Features in ES6+ not yet available in all browsers
  • Makes working with modules and classes easier
  • Tooling support, packaging, IDE support, etc.
  • Integrates with popular libraries like Angular and React
That's my understanding, and I hope I haven't misstated anything. For more info, here are some sources: Finally, if you want to know what future JavaScript features are included in TypeScript today, Kangax's compatibility tables includes a column for "TypeScript" when you choose ES6 or higher.

Now on to this week's tools!

Testing and Debugging Tools

Endpoints
Allows you to view and respond to requests on an HTTP endpoint.

aXe
Now at version 3+. The accessibility engine. An open source rules library for accessibility testing.

Sloth
Chrome extension that brings connections like your users have to you by applying throttling to mimic a slow connection.

React Hot Loader
Tweak React components in real time.

React Perftool
Chrome extension to help you inspect the performance of React components.

Network Information Monitor
Displays network quality, as reported by Network Information API.

Argo Tunnel
Exposes applications running on your local web server, on any network with an internet connection, without adding DNS records or configuring a firewall or router.

Træfik
A modern HTTP reverse proxy and load balancer made to deploy microservices with ease.  Supports several back ends to manage its configuration automatically and dynamically.

Recommended Reading for Devs
Learning React Book     Secrets of the JavaScript Ninja Book

Front-end Frameworks

iView
A high quality UI Toolkit based on Vue.js with branches for Vue 2.x and 1.x.

React App SDK
Everything you love about Create React App — the best tooling for developing React applications, plus server-side code support (SSR, GraphQL API, etc) and config overrides (Babel, webpack, etc.).

React Material Web Components
A React wrapper for Google's official Material Components for the web.

reas
A minimalist and highly customizable component system built on top of React and styled-components.

Taiga
A small HTML/PostCSS framework working with Nunjucks for starting a living component library and style guide. Mobile-first and based on ITCSS and BEM.

ReactSymbols
Modern React UI library full of pixel-perfect components.

Durandal
A cross-device, cross-platform client framework written in JavaScript and designed to make building SPAs easy to create and maintain.

Tabler
A premium and open source dashboard template with a responsive and high quality UI.

React SPA Boilerplate
A boilerplate for building single-page applications in React.

vue_typescript_starter_kit
Starter kit for Vue + VueX + TypeScript + webpack.

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

JavaScript Utilities and Modules

HotKeys.js
A robust, dependency-free JavaScript library for capturing keyboard input and key combinations entered.

Task Easy
A simple, customizable, and lightweight priority queue for promise based tasks.

Workly
A really simple way to move a stand-alone function/class to a web worker.

Awaity.js
A functional, lightweight alternative to bluebird.js (a full featured promise library) built with async/await in mind.

Tippy.js
Now at version 2+. A highly customizable vanilla JavaScript tooltip and popover library.

dset
A tiny (135B) utility for safely writing deep Object values.

Driver
Light-weight, dependency-free, vanilla JavaScript engine to drive a user's focus across the page (i.e. it's a website "tour" utility"). Allows keyboard functionality.

crypto-hash
Tiny hashing module that uses the native crypto API in Node.js and the browser.

wasap.js
A simple JavaScript library that allows anyone to contact you via WhatsApp without requiring them to add you to their contact list.

shades
A lodash-inspired lens-like library for JavaScript. A lens is a path into an object that can be used to extract its values, or even "modify" them in place.

A Tweet for Thought

"Explain how websites make money." Pretty accurate, I think.
 

Send Me Your Tools!

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

If you're interested in watching other developers code, you might like devstream.tv. If that's not enough, here's a curated list of developers who stream.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly