Creating an SVG filter icon1 min read

I find it easier tot write an HTML page than create a document or powerpoint presentation. Similarly it is easier for me to write SVG icons in XML rather than create one in photoshop. So here is my simple “SVG filter icon”

<svg xmlns="" xmlns:xlink="" width="100" height="100">


Start by opening the svg tag and give it a width and height of 100

Next lets add a circle with a radius of 50 and it’s center coinciding with the svg element’s.

<svg xmlns="" xmlns:xlink="" width="100" height="100">
    <circle cx="50" cy="50" r="50" fill="#1b3131" />


Now lets add the filter icon using a polygon. We write the co-ordinates of each point of the filter icon, magics happens and we get a filter.

<svg xmlns="" xmlns:xlink="" width="100" height="100">
    <circle cx="50" cy="50" r="50" fill="#1b3131" />
    <polygon points="20,25 80,25 55,60 55,75 45,85 45,60" fill="#a9d41e" />


We start from the top left corner of the icon (20, 25) and trace its path through (80,25) (55,60) (55,75) (45,85) (45,60) and is finally joined back to (20, 25)


Complete SVG filter icon

Good day/night 🙂


Why I use Typescript + babel?46 sec read

  • Types helps me to avoid silly mistakes by forcing me to stick to a common rule rather than total chaos.
  • Strip the types and you get javascript, so you don’t loose touch with it
  • I use a javascript transpiler (Babel) anyway. So why not exploit types.
  • It works very well with VS-Code which is an awesome product.

Typescript vs Flow

  • Nothing wrong with, but its harder to set up and documentation is not that good.
  • In case of Typescript just use VS-Code which I use anyway
  • It is pretty much the same. So everything comes down to convenience.

Typescript vs Babel

  • Babel wins for me because of plugins and presets.


  • Well I tried, but the documentation isn’t good enough
  • Laaaaaaaazyyyyy…

Creating a simple babel plugin1 min read

What will it do?

It will change this

let content = include_str(‘path to text file’);

to this

let content = ‘content of text file’;

It works just like the rust-lang include_str!() macro.


  • While looping through the AST, our code checks for a function call (CallExpression ) named include_str
  • If one is found, we derive the required file path from the first argument to the call and the path of the file that is being transpiled
  • Contents of the file are read into a string with fs.readFIleSync
  • The CallExpression  is replaced with the string which is converted into a stringLiteral


const fs = require('fs');
const Path = require('path');

module.exports = function MyPlugin(ref) {
    var t = ref.types;
    return {
        visitor: {
            CallExpression: {
                enter: function (path) {
                    if (t.isCallExpression(path.node) && === 'include_str') {
                        let file_name = this.file.hub.file.opts.filename;
                        let fpath = Path.join(Path.dirname(file_name), path.node.arguments[0].value);
                        let content = fs.readFileSync(fpath, 'UTF-8');



Not tested

Similar libs to check out