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

 

 

HTML custom input with type hidden and number1 min read

I don’t think it is possible to a create an element like

Solution is to create a custom element like this

MDN – Using Custom ELements (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)

To add a property of value to our <hidden-num> element, we must add the get value()  and set value(val)  methods.

An attribute of value is also added to element if the value property is changed. A number  value is returned if the elem.value  is accessed.

Custom element is registered with

customElements.define("hidden-num", InputHiddenNum);

Built in element can also be extended like

<input is="hidden-num" />

Refer – MDN – Customized built-in Elements (https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Customized_built-in_elements)