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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">

</svg>

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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
    <circle cx="50" cy="50" r="50" fill="#1b3131" />
</svg>

svg-circle

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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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" />
</svg>

 

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)

svg-filter

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.

Purescript?

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

Code

  • 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

index.js

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) && path.node.callee.name === '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');
                        path.replaceWith(t.stringLiteral(content));
                    }
                }
            }
        }
    };
};

 

Disclaimer

Not tested

Similar libs to check out