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”

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

 

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

 

Disclaimer

Not tested

Similar libs to check out