by Tomas Yates ( @tomas_yates ) via Unsplash

Awesome Web Tools of the Week - August 2019

This is a list of must-try web resources and tools that will help you in lots of things like app automation, web design and development, app deployment, UI and UX design and many more. This is the compilation for the first week of August 2019 that I have discovered through different Web and Tech magazines. Enjoy your awesome productive week!

1. FastLane

Fastlane lets you configure lanes to support your team’s deployment workflows. Use a single command to run a lane.

Fastlane 🚀 handles all tedious tasks, like generating screenshots, dealing with code signing, and releasing your application. It helps in automating beta deployments and releases for your iOS and Android apps.

Link to FastLane Website:

FastLane Documentation:


2. TheaterJS

TheaterJS homepage screenshot

With TheaterJS you can recreate a typing effect that mimics human behaviour. Just add in your own characters and text to create an on-screen dialogue.

Link the theater.min.js file in the <head> section of your HTML document and you're done: 

<script src="path/to/theater.min.js"></script>

Example code from TheaterJS' GitHub page.

<div id="vader"></div>
<div id="luke"></div>

<script src="path/to/theater.min.js"></script>
  var theater = theaterJS()
    .on('type:start, erase:start', function () {
      // add a class to actor's dom element when he starts typing/erasing
      var actor = theater.getCurrentActor()
    .on('type:end, erase:end', function () {
      // and then remove it when he's done
      var actor = theater.getCurrentActor()
    .addScene('vader:Luke...', 400)
    .addScene('luke:What?', 400)
    .addScene('vader:I am', 200, '.', 200, '.', 200, '. ')
    .addScene('Your father!')

Link to TheaterJS Demo: 

Other links

TheaterJS GitHub:

TheaterJS CodePen Demo:


3. BlockRain.JS


Well, this one is for fun and play. With just a few lines of simple code, you can embed the classic game Tetris into your website. And yes, you can not only just play it, but also can customize as per your site theme. And the game is always responsive to any display size from wide to narrow. There are other options like adjusting how fast the blocks fall, add or remove scoreboard and autoplay.

Example setup, as in BlockRain GitHub repo.

Create an element with any class (e.g. <div class="game">) and set a width and height of that element.

<div class="tetris-game" style="width:600px; height:900px;"></div>

And then include JQuery and BlockRain javascript files and BlockRain css file. After that you can setup the game with $('.tetris-game').blockrain

<!-- The stylesheet should go in the <head> -->
<link rel="stylesheet" href="blockrain.css">

<!-- jQuery and Blockrain.js -->
<script src="jquery.js"></script>
<script src="blockrain.js"></script>

 Link to BlockRain.JS website: 

Link to BlockRain.JS GitHub repository:


4. Super-Looper

SuperLooper Homepage screenshot

This is another cool web app to release your inner musician. SUPER-LOOPER is a fun music making app which brings retro electronic music composition to the desktop and iPad. You can record short loops, and combine them to produce seamless looping tracks. And share and save your music files to use it on your website, videos or in anything you wish to. Enjoy!

 Link to Super-Looper website: 

You can also directly download the app from AppStore. The link to the AppStore is


5. Dragula

Dragula Homepage

Implementing a drag and drop technique in a website is rarely as simple as we think. With no bloated dependencies and super easy to set up, Dragula actually understands where to place the elements when they are dragged and dropped. 

You can get it on npm.

npm install dragula --save

Or bower, too.

bower install dragula --save

Or a CDN.

<script src='$VERSION/dragula.min.js'></script>

 Link to Dragula demo page: 

Full documentation with installation instruction, usage guidelines along with code repository is available on GitHub. Follow the link below:


6. vue-goodshare

Vue-goodshare homepage

This is a Vue.js component that allows for social sharing. It is simple and easy to install, has an extensive documentation, and is SEO- friendly with UI customisation options.


Below is an example code for single share element.

 * Import Vue.js
import Vue from "vue";

 * Import vue-goodshare single element
import VueGoodshareFacebook from "vue-goodshare/src/providers/Facebook.vue";

const app = new Vue({
  el: "#app",
  components: {

Add component to HTML template (with attributes):

<div id="app">


screen shot

 Link to vue-goodshare website:  

 Link to GitHub repository:  


7. f2

f2 banner

 F2 is a flexible, elegant and interactive charting library with a focus on mobile. It is HTML Canvas-based and compatible with Node.js, Weex and React Native.

Sample code

<canvas id="mountNode"></canvas>
import F2 from '@antv/f2';

const data = [
  { year: '1951', sales: 38 },
  { year: '1952', sales: 52 },
  { year: '1956', sales: 61 },
  { year: '1957', sales: 145 },
  { year: '1958', sales: 48 },
  { year: '1959', sales: 38 },
  { year: '1960', sales: 38 },
  { year: '1962', sales: 38 },
const chart = new F2.Chart({
  id: 'mountNode',
  width: 375,
  height: 265,
  pixelRatio: window.devicePixelRatio

Demo screenshot

Link to f2 website:  

Demo gallery:

Link to GitHub Repository: