<Hi/>I am Max,Frontend developer

About:

I am based in Singapore, have Javascript, React, ReasonMl, ReasonReact projects you'd like to discuss?

Sharing my experience and things I have learned:

Alias git to pull current branch

posted on 03 Mar 2020

Git 2.22 onwards has a current branch flag, with git branch —show-current allows you to see which brach you are at now, sometime you want to pull current branch changes, and the easiest config in my opinion is to set a alias in your bash_profile or zshrc without messing your git config settings.

now […]

Read more

Looping in bs-emotion

posted on 26 Jan 2020

If you like to do a loop in bs-emotion for list of classes and do something, for example different background colors for class of name 1 – 10.

here’s how: First you create a loop function with list of colors that you want to loop over and each class_index_number, since bs-emotion uese ocaml syntax, […]

Read more

let%Everything ReasonML

posted on 08 Dec 2019

let%Anything is a really cool module for ReasonML, Which allows you to create a module and use as with let%Module, lets take a look how to use. Since buckleScript have upgraded to 7++ by default and I am using bs-let for demo: Create a module and method that you like, with let_. Here I create […]

Read more

Built job portal web app with reasonML/ReasonReact, expressjs and mongoDB

posted on 24 Sep 2019

I have added a demo on how I use ReasonMl/ReasonReact with expressJs and mongoDB, you can see how I use Atdgen for sharing types from frontend, reasonML and backend, expressjs/javascirpt types. You can see how I use bs-emotion instead of css, or sass to style the components. you can see the repo on: https://github.com/maxlibin/ParentalJobs This […]

Read more

Build a childcare center search engine with reasonML

posted on 26 Jul 2019

I made a demonstration on how to use ReasonReact/ReasonML to build a childcare center search website. the demo can be seen on: https://amazing-fermi-decca3.netlify.com/ Few tech stacks used here are:ReasonML language, ReasonReact Framework, BS-Emotion for styling, BS-fetch for promise fetching data, BS-JSON for decoding JSON to BuckletScript. Source code can be found on github

Read more

Writing css on ReasonReact with oCaml

posted on 14 Jun 2019

Recently I was working quite a bit on ReasonML / ReasonReact projects, and we moved from writing old approach of writing external CSS to inline-css with bs-emotion (using oCaml syntax directly). Its really easy to use css or sass / scss into ReasonReact components, you can import them the same way you import with from […]

Read more

ReasonML ReasonReact updated with React hooks

posted on 12 Apr 2019

With the latest ReasonReact update, finally support hooks, and new way of writing reasonReact with more functional approach is so much better, easier and fun. Lets try to begin with a new Component, Button.re, BTW, there are some API was replaced to new name space “React” from “ReasonReact”

As you can see above code, […]

Read more

Higher order component for ReasonReact

posted on 15 Mar 2019

A higher order component is basically a reusable component which allows you to takes in another component and return a new component. To recap about higher component check our my older post here In ReasoML higher order function are called “Functors” which takes in a module type and returns a module type, functors are written […]

Read more

Better way to decode JSON in ReasonML/ReasonReact

posted on 08 Dec 2018

Recently I was working on some reasonml/ReasonReact project which required to request data in JSON format from an API endpoint, well there are some BuckleScript decoders such https://github.com/glennsl/bs-json which is the more popular one,the way you decode is pretty easy:

you pass in the json and define the field in Json.Decode… at first it […]

Read more

fast piping in reasonml

posted on 08 Oct 2018

fast piping allow you to transform your function code into more readable syntax, imaging you have human(person(age())) this is very inconvenience to see. with piping you can do it like this:

which is exactly the same as human(person(age())) there are 3 different pipes as I understand you can do like

or

whats different […]

Read more