@maxlibin - blog

July 24, 2021

How to get all Singapore startups, startups owner, investors profiles for free

Recently I was reading some article and happened to came across this website https://www.startupsg.gov.sg, right is a website to showcase startups based in Singapore. In the website, there are a few directories such as startups, investors and profiles: https://www.startupsg.gov.sg/directory/startups/ As you can see the infos are protected on UI part, when you click disclosed funding […]

May 30, 2020

Setting up fullStack web app for React and Go Lang

This is a guide on how to setup a web app with Go/GoLang, React and MongoDB Assuming you have already installed Go language and NodeJS in you machine. If not please install with the links above. A the time of writing I am using go version go1.14.2 darwin/amd64, and Nodejs v13.8.0 So the first thing […]

March 03, 2020

Alias git to pull current branch

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. alias gp=“git […]

January 26, 2020

Looping in bs-emotion

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. .class_1 {background-color: …} .class_2 {background-color: …} .class_3 {background-color: …} .class_4 {background-color: …} here’s how: First you create a loop function with list of colors that you want […]

December 08, 2019

let%Everything ReasonML

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 […]

September 24, 2019

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

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 […]

July 26, 2019

Build a childcare center search engine with reasonML

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

June 14, 2019

Writing css on ReasonReact with oCaml

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 […]

April 12, 2019

ReasonML ReasonReact updated with React hooks

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” [@react.component] let make = (~className) => “This […]

March 15, 2019

Higher order component for ReasonReact

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 […]

December 08, 2018

Better way to decode JSON in ReasonML/ReasonReact

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: point = { x: int, y: int }; let point = json => Json.Decode.{ x: […]

October 08, 2018

fast piping in reasonml

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: age ->person ->human which is exactly the same as human(person(age())) there are 3 different pipes as I understand you can do like age |> […]

August 29, 2018

Convert React project to ReasonReact project

Recently I converted one of my old React project while studying React from Udacity sometime back, Since I am reading ReasonML recently so I thought I might as well convert to ReasonML language or ReasonReact, you can find it here. MyRead ReasonReact

August 15, 2018

optional chaining in javascript

Imaging if you need to access deep level of property and you are not sure that if such properties exists deep down, you are doing something like books && books.book && books.book.authors && books.book.authors.author This is really difficult to read and understand sometime. there is something called optional chaining in javascript proposal which you can […]

July 24, 2018

ReasonML 101 notes

Reason 101: variable assignment with let keyword cannot is immutable, but you can set it to mutable by assign to ref() example JS: let count = 0; count ++; in reason: /* let count = 0; this is immutable */ let count = ref(count); count := count ^ + 1; for string concat: let stringConcat […]

June 28, 2018

Using react higher order component

When you start to work with lots of React components, and you realised alot of component patterns are the same, then you want to reuse these component patterns which is where Higher Order Component(HOC) kicks in. Think of HOC as higher order function: usually you write function in Javascript: const thisFunction = function(a, b) { […]

April 02, 2018

React js 16.3

Recently Facebook has released the react 16.3 which bundled with a few awesome features including Context API and createRef(), I will talk abit about Context API since its quite hot topic. Context API its a feature that allows you to pass your data down to all child levels without passing props around like what you […]

March 26, 2018

Whats wrong with lambda internal server error

Lambda was a great service with great features, and serverless framework is even better, serverless simplified everything you do with AWS or other serverless providers. Was doing some fun with serverless framework where I am simply trying to output a response from some API to Lambda API gateway, and suddenly I got “Internal server error” […]

February 14, 2018

Udacity react nanodegree review

Recently I was graduated from react nanodegree with Udacity. The course was separated into 3 main course: 1) React Fundamentals 2) React & Redux 3) React Native Each course have their own assignment to complete, overall its about 4 or 5 months course, it only took me 1 month plus to complete 😉 since the […]

February 12, 2018

IntersectionObserver

IntersectionObserver is a very simple and powerful browser API, it really good to build such as lazy-load images, contents or whatever, the concept is really simple, it observer an element, when is visible and then you do something about it. One example, when this div is visible then load image. Outthought its not supported by […]

January 27, 2018

simple way to improve react applications performace

Before I start discussing some ways to improve the performance of react applicate, you should read the official doc from react site which already discussed about this topic. So in my own opinion few ways to improve the performance: 1) Use stateless/function component instead of writing class as component, using stateless component will eliminate “this” […]

November 02, 2017

server side react with next.js

After trying out next.js, totally lovely this tool, no reason not to use now with server side react render. One of the biggest benefit I felt is definitely the SEO part. As my screenshot below you can see that in source code which renders the contents, this is great for crawlers to quickly crawl your […]

October 19, 2017

Screenshot with google chrome without any plugin

Its new updates of Chrome 62 and its really easy to take screenshots with build in api, no longer require any plugins or extensions. Open up your chrome, usually I would use Chrome Canary which has latest versions. open up your console with Shift + Control/Command + I Then use the inspector to select element […]

October 15, 2017

react 16 createPortal

React 16 introduced createPortal function which allows you to render elements outside react Dom, this become useful when you need to dynamically render some elements such as tooltip, modals… createPortal function can be used inside render method, and returns jsx as usual and where you want to render this element, as example below: render() { […]

October 05, 2017

Easiest way to handling indexOf

Lets create a function that allow us to if string is available in array with this shortcode function checkStringInArray(arrayItem, stringItem) { return !!~arrayItem.indexOf(stringItem); } using tilde operator will flip the bits in its operand. which is similar to -(x+1) then use !! to convert this into boolen, this is easiest way to check indexOf and […]

September 06, 2017

Headless chrome puppeteer

Happen to try out this “Headless Chrome Node API” from chrome today, this npm allows you to write headless chrome directly which we used to do with phantomjs or other tools, it provides useful and easy APIs, I wrote a simple scripts allow me to check on CDC (ComfortDelGro Driving Centre) website to see if […]

August 31, 2017

Prevent table column resize/jump when you search table rows (React version)

Rendering with table in react is really easy, you just need to map through the result and return whatever should be shown as each TR, below is an example how you render table in react. YourObjectArray.map((item, index) => ( <tr> {item.name} {item.birth} {item.age} </tr> )); here comes a problem that I faced when working with […]

July 27, 2017

Reactive with react and meteor

If you been working with react and meteor, you will realised that both are reactive by nature of its framework/library, but when bridge them together, it does not work well in reactive way. fortunately Meteor team created a package called React Meteor Data.  To use React-Meteor-Data which is pretty easy, you just need to install […]

July 02, 2017

Working with meteor and react

Meteor, or MeteorJS, is a free and open-source isomorphic JavaScript web framework[3] written using Node.js. Meteor allows for rapid prototyping and produces cross-platform (Android, iOS, Web) code. It integrates with MongoDB and uses the Distributed Data Protocoland a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code. souce: https://en.wikipedia.org/wiki/Meteor_(web_framework) Basically meteor.js is a node.js framework that allow you to write web […]

April 15, 2017

React dealing with radios button

By default when you create radio multiple radios with same names, check either one will uncheck the rest. Try out above codes. In jQuery we can get the value of the radio easily using: $(‘input[name=”radio1″]’).val(); In react we have use state to get the value of current selected radio: class Test extends React.Component { handleRadioSelection(e){ […]

February 26, 2017

React dealing with controlled component input forms

In most case react form will works normally until you wanted to set a value in the input and change while changes / start to input in something, <input type=”text” value=”some value here” /> and you realised the value does not change no matter how hard you pressed, this is because of the controlled component: […]

February 08, 2017

react passing props to this.props.children

Previous article I mentioned about this.props.children and its feature, problem is this.props.children does not not provide a way to pass down the props, so we need a wrapper called React.cloneElement which allows you get this component and return a new component where you can also pass in the props like this: {React.cloneElement(this.props.children, this.props)} by the […]

February 03, 2017

Inline css in modern apps

While modern framework communities are push forward in using inline css, innovated by one of the react developer react-css-in-js. As Vjeux have presented in his deck the problems that they faced using css while they are working on react projects. Since then internet was boomed about working on inline css, thats when the birth of […]

January 29, 2017

React double scrollbar component

While playing with react, I have built a react component which server as second scrollbar for your overflow divs. You are free to use the code that I added to github… https://github.com/maxlibin/react-doublescrollbar

January 18, 2017

React pass parameter to parent component or call parent function on ES6

sometime you will need to call parents function on react component, the problem in ES6 is that all functions are not bind with this, so you will need to do manually, below is a simple toggle function that you will call from Child component, notice that in order to call the parent’s method, you will […]

January 11, 2017

What is this.props.children

When I first saw this API, its about to tear my head apart, and now I will share with you about what I have learned on this.props.children the concept is easy: Imaging you have Parent component that call child component that works fine, what if you want to pass in the props to parent and […]

November 23, 2016

using SVG on your web

SVG Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Because of its scalable native, especially with very high graphical screens(example: retinal screen for Mac) these days, we need solutions for images or graphics to be display on these screens. Well these are many ways to […]

August 26, 2016

Fixing a broken image alt

When your image is broken in browser, it will show Alt text from the image attribute if you are using: <img src=”“yourimageurl”” alt=”“Image” /> a quick fix for this is really simple, change your image background and color to transparent. img { color: transparent; background-color: transparent; } that is it, and enjoy.

June 28, 2016

gmail clipping float right

While doing email marketing and when you send out email with long contents and its annoying to see gmail clipped it and it ask you to click to view entire email And yet for me happened to have this problem, this message goes to right side of my content. After playing around for sometime, all […]

May 05, 2016

CSS3 right offset

Did you realised that when you need to place your background image on the right side and it always touches the corner of the right, CSS3 to save, you can actually do a offset of right by doing this: .class { background-position:right 10px center; // this will offset a 10px from right side. }

December 06, 2015

Magento 2 install sample data error

If you ever faced magento 2 installing sample data error using MAMP on local, Zend_Db_Adapter_Exception] SQLSTATE[HY000] [2002] No such file or directory [PDOException] SQLSTATE[HY000] [2002] No such file or directory here’s a solution for you, provided you are using composer to install magento, this happened to me while updating the sample data, php magentoFolder/bin/magento setup:upgrade […]

August 30, 2015

Display all products in woocommerce admin

Woocommerce is good start for ecommerce beginners, easy to install and get start with, I was using CSV importer to import thousands of SKU however I realised that it will not update the current tax that you have. So in order to fix that we need to update the tax again in each product, you […]

June 13, 2015

New Meteor launch page package

I wrote a quick launch for meteor, that anyone can quickly add a launch page on meteor, you can also change the contents from as the options. https://github.com/maxlibin/watcfylaunch

May 16, 2015

Add active state on meteor.js menu

Imaging you have already created a menu in meteor js framework, somewhere in your header, something like this <ul> <li><a href=”/home”>Home</a></li> <li><a href=”/about-us”>About Us</a></li> <li><a href=”/contact-us”>Contact Us</a></li> </ul> SO you want to make the menu to be active when you are on current route, one of the simple solution is to create a template helper, […]

April 28, 2015

Becareful with jquery on or bind event.

When you do jQuery and sometime you would bind some functions on an event outside appended DOM elements, and rerun the function again like this: <ul> <li>test</li> <li>test</li> <li>test</li> </ul> <button></button> for example we want to change the text to something else when we click on each of the li, maybe lets change to “run […]

March 03, 2015

Meteor Async from server to client

Sometime you want to do async call from api and make call or reactive on the client side, so how do you do it? first create a method on server side, I would always recommend using methods rather allow / denied from client side, lets give a method name asyncMethods   // Server side Meteor.methods({ […]

February 01, 2015

Meteor include external javascript or other files

When I first start meteor i found it hard to load external libraries like javascript files, especially when you bought some templates somewhere, which contains more than 5 javascript files and 4 css files. A few solution I tired was using some external library loader, such as IRLibLoader, its pretty easy to use inside your […]

December 12, 2014

Gulp error tracking

If you are using Gulp for you workflow, there might be chance when you have some error, gulp will stop, and you rerun gulp again, wow thats really kills your productivity, especially sometime you don’t see the reflection on your browser and you seems can’t figure out whats wrong until you go check your terminal. […]

November 20, 2014

Remove sudo meteor

Recently when I do some demo to a friend about meteor app I built, so I start my app by doing Sudo Meteor, and he asked me, Why should I do sudo?, and I said I don’t know, then he show me an website that seems to fix this problem by doing Repairing Disk Permission […]

November 18, 2014

Styling your console log

Found an interesting way from an Chinese website to log the console, normally we do a console.log like this: console.log(‘some string’) normally this will just return some boring string “some string” black color, tiny text. What if we want to log multiple results and track which is which etc… sure we could use separator or […]

November 11, 2014

Meteor.js SEO

One of the most important thing in web development which is SEO, meteor.js a new but powerful Node.js framework for web, been using it for a while and really love this framework, I built an application Influencer marketing platform, to watch any ecommerce website’s product, when price changed, it will alert you through email.  Influencer […]

November 03, 2014

Space in css inline-block

Centralise child element on css is pretty straight forward, imaging you have a block like this: some text here… some text here… some text here… some text here… to centralise the li element is easy, all you need is to use list-block or list as the css and text-center for ul, ul { text-style:center; } […]

August 08, 2014

increase clickable area for checkbox or radio

Here is a quick tip for those want to increase their clickable area for inputs like checkbox or radio button, usually we wrap the input like this: some text you either use something like paragraph or some other elements to wrap it, however now the clickable area is only the input, but if you wrap […]

August 01, 2014

use cursor pointer for mobile

If you are creating a menu, using hover and show the child menus, usually looks like this: menu name child menu child menu and css: li ul.child { display:none; } li:hover ul.child { display:block } ok this works fine, nothing wrong here, there is only one problem is that when you use mobile, and you […]

July 25, 2014

Update your hosts for wordpress on digitalocrean

Any one facing problem with digital ocean sending email? the solution is easy, login to your ssh, and open up hosts file [cc lang=”php”]nano /etc/hosts change your host to something like this 127.0.0.1 localhost.localdomain localhost yourhostname and restart your services. and boom, you see your email send instantly.

June 28, 2014

remove trail for css transition

While working on some css transition recently faced a small problem, the item that was animated create a trail (some white lines or cut images) where animated, that created a very experience for users, there isn’t real fix yet, however the temporary solution is to use hardware accelerated css property to improve the graphic rendering […]

June 08, 2014

Remove wordpress asking for FTP

There are many time wordpress has this annoying thing asking for FTP username and password when you try to install the plugins or themes.. here is a simple way give direct access to the file systems. Paste the following line in your wp-config.php  define( ‘FS_METHOD’, ‘direct’);

June 03, 2014

Using sourcemap for front-end development

most of the time when you are using compressor like SASS or Less, and you might find that is difficult to debug the css / javascript code, especially when you compressed the code into Compressed Version, Internet always have solution for this kind of problem, SourceMap which already supported by major browsers, Chrome and Firefox. […]

April 21, 2014

Watch flash / steaming videos on mobile in Singapore

A lot of time when you try to access some websites that provide video streaming, and you found this awesome guy that blocked you, the message looks like this: But there are many brilliant guys that built tools and services that help you across the wall, in order to access websites that only allowed in […]

March 25, 2014

Gulp spawn EMFILE error

for those who faced problem with gulp when watching a big number of files. error might looks like this: child_process.js:935 throw errnoException(process._errno, ‘spawn’); ^ Error: spawn EMFILE at errnoException (child_process.js:988:11) at ChildProcess.spawn (child_process.js:935:11) here is a solution for you, the reason that caused this problem is by default mac is using 256 as default number […]

March 21, 2014

Sync local files and folder to remote

Working in a team project which uses VPN as a virual host where you will see your own changes or can be viewed by team members, however everytime someone made a change and you need to pull from GIT or other Version Control tools, you need to send these changes to the remote server, here […]

March 14, 2014

Hands on Atom Editor

Today I have got invited to test out the new Atom Editor by Github, here is my experience with the editor. The first thing when I open up the editor is open up some files, too bad first start does not allow me to do that, however there is a cool function by Atom, Atom […]

March 13, 2014

Singapore haze PSI

I have updated the chrome extension that I made last year, make the changes to the icons, so now it comes with the PSI index on top of the google chrome Icon itself, so you can see the PSI without clicking the popup, its much lighter now. if you like what I did please download […]

February 24, 2014

Gulp run deprecated

Since the latest version of gulp which no longer need to user the run() function for the logic, It make sense for me since the task function already take care of running the process. First create a task like below example that compile coffeescript and minify it into javascript. var gulp = require(‘gulp’), coffee = […]

February 12, 2014

Things I learn from developing phonegap app

While working with phonegap to build native apps I learn a lot. As you know phonegap or any other tools that used to develop apps with html5 always have bad performance. Here we tips that I learn which can be helpful. I love jquery and use a lot, for web or any other things, mostly […]

February 09, 2014

Learning Gulp

Laracast has a really nice video about Gulp, everyone should check out!

January 16, 2014

Gulp Mamp development

I am doing quite a lot of wordpress stuff and since using Gulp, i found happiness in my development environment, here are the most common modules that I used. tiny-lr gulp-coffee gulp-sass gulp-uglify gulp-jshint gulp-util gulp-livereload gulp-imagemin So what I want to do with my wordpress development is that every time I made some changes […]

January 14, 2014

Ghost clean flat theme

Hi Guys, as promised, i have developed the ghost theme, you can make a clone from https://github.com/maxlibin/gohst-max its free anyway! Here is a screenshot of how actual look To intall ghost theme, create a folder, name it anything you want, clone this repo to your folder. copy the folder to your ghost theme folder, Ghost->content->themes->place […]

January 07, 2014

Gulp js streaming build system

well if you are familiar with Grunt, this is another alternative task build tool Gulp, which is easier and flexible than Grunt npm install -g gulp If you are not familiar with Grunt or Gulp which both are tools that help you improve your workflow such as automated your script compiling, lint, minify it and […]

January 06, 2014

Css filter

Recently I have been using the new CSS element called Filter alot, Its beautiful and easy to use, too bad not all browser are supporting it, infect what i know is for now is only -webkit- browser Here are some properties that we could use: blur grayscale drop-shadow sepia brightness contrast hue-rotate invert saturate opacity […]

December 11, 2013

front-end development 2013

So, 2013 is going to end soon, 2013 is a year of major change of my front-end development process / work flow, below are list of tools that I can’t work without it. Text Editor Sublime Text VIM Compilers SASS (css compiler) Bourbon (sass mixins) CoffeeScript (javascript compiler) Version Control   Git Bitbucket SourceTree   […]

November 23, 2013

Generate md5hash in mac terminal

Most of the time you need to generate a md5hash password for your mysql or any other purpose, you go to some md5hash generator website, but thats just wasting of time, and thanks to openssl you can generate using your terminal echo -n “string that you want to convert” | openssl md5

November 22, 2013

Just for fun

Check out the elf yourself for fun,

October 20, 2013

Working on a Ghost Theme

Am developing an ghost theme, very clean and neat flat design, below is a screenshot of preview, if you guys want it, please comment, you will be the first one to receive the theme for free!  

October 16, 2013

Themeing in Ghost blogging platform

Once you installed Ghost in my previous post guide, open up the ghost folder location, you will see a folder name “themes” in ghost/content/themes there is where contains all themes in your ghost app which is similar to wordpress which is wordpress/wp-content/themes/themeName. Go ahead copy the default theme casper and paste with any name you […]

October 15, 2013

Ghost blogging platform

Kickstarter funded Ghost pure blogging platform,built in node.js, if you are not familiar with node.js which is basically a platform that allows you to write server side programming in javascript, build with google V8 engine(super fast speed). There are many talks about this platform which to replace wordpress, which I am not sure about that, […]

October 14, 2013

Introducing Mou markdown GUI editor

Recently I found an awesome app for markdown editing visually called Mou, still in beta when I am writing this article, but has got all the features that I need(more than what I need), anyway once you download from its official website, http://mouapp.com/, open up, as see from my screenshot below, it comes with 2 column […]

October 01, 2013

Introduction to Mongodb

Untitled Blog Post Name MongoDB is a NOSQL database model which is unstructured/schema-less type, its easy to scale, and fast to query large data type comparing to traditional database type such as mysql. There are quiet a few choice to choose for nosql, here are some of the big names out there: CrunchDB MongoDB Redis […]

September 30, 2013

Todo list google chrome extension

Recently while talking with my girl friend, she ‘s looking to build something and in order to do that she need to write down a todo list, so I build this chrome extension for anyone who wish to keep their list directly on google chrome, its simple and easy use tool. Its built within few […]

September 16, 2013

Access your raspberry pi with your macbook pro

For those who have a macbook pro and raspberry pi and you do not want to use a new keyboard and monitor or mouse, you can use your macbook pro to access your raspberry pi even with screen share. first you need to connect your raspberry pi with ethernet and USB power adaptor. which like […]

September 16, 2013

Mysql command in terminal with mamp

For those who are having problem with mysql command in terminal, if you are getting an error message when you type mysql in command after you installed MAMP on mac, Can’t connect to local MySQL server through socket ‘/tmp/mysql.sock’ (2) The solution is easy, go to your terminal, sudo nano /etc/my.cnf and paste in this […]

September 05, 2013

Love bourbon for sass

Recently I am using another library than using compass. As what is described on its web A simple and lightweight mixin library for Sass. the reason I let go of compass and use this plugin is as my current development tool is that its very easy to compile and include in every project, Whenever I […]

August 24, 2013

Turn your applications into stacks on mac

Here is a guide on how you can make your applications into stacks on your dock. First go to your application folder, create  a new folder by clicking setting icon on the finder menu. Give a name to this folder and drag in all the files you like into this folder, and you might wonder […]

August 01, 2013

Twitter Bootstrap flat ui

For those who have not seen my twitter boostrap Flat UI version on gtihub, please check it out the demo here.

July 23, 2013

Developing Android apps with Android x86 emulator

  For those who are using eclipse and are developing android apps but got pissed with the speed or performance of the build in emulator, here is an alternate solution by using x86 emulator on virtual machine. 1) Download and install the virtualBox from its official website. 2) Download the X86 Image file from here, […]

July 18, 2013

Coolest christmas website inspiration

Some of the coolest Christmas / Holiday website for your inspirations.   http://www.modea.com/wisdomtree/   http://mono-1.com/monotunes/   http://ambitiousreceiver.com/   http://www.nh-hotels.com/winter-holidays/   http://www.lancaster.ac.uk/christmas/   http://bickov.com/projects/greestmas-greeting/   http://itsashapechristmas.co.uk/   http://www.mistletoeonline.co.uk/   http://plugitin.pixelpusher.ca/     http://philipandrews.org/fbxmas/   http://www.stonecanoe.ca/merrylamort/    

July 11, 2013

Compass for sass

In my previous article I talked about how to make use of SASS for your front-end development, today I want to talk abit about Compass, http://compass-style.org/ Compass is an addon to SASS which allows developers easily write CSS3 codes in sass, which means you @include once of compass mixin, compass will compile all css3 prefix […]

July 10, 2013

Image sliders for mobile

Image sliders for mobileHaving image slider is a great way showcase your website, of course for mobile too, say if you built an responsive web for mobile and found that your slider don’t work anymore when you swipe, here are some alternative images slider that work just great on mobile. they are responsive and works […]

July 01, 2013

Clear Cache on chrome

Tips of the day, when you are doing development for some website and sometime you found that Chome cached your image or some scripts and made you always need to clear cache in order to reflect your changes. A quick way yo clear cache is pressing and hold “Shift” and click refresh on your browser. […]

June 21, 2013

Google Chrome extension of current PSI in singapore (live)

Chrome extensions for Singapore PSI level   Air in singapore are really getting bad, and we are all trying to avoid going out, so I took the time to create an small chrome extension that allow everyone to get live update of current PSI (Pollutant Standards Index) level. you can download from from chrome store […]

June 17, 2013

IOS 7 PSD template UI kit

IOS 7 was just announced last week and yet many designers have already adopted and created the template files for download and I know that you definitely would like to download them all, here are some of the resources that I found, [button link=”http://www.teehanlax.com/tools/ios7/” size=”small” target=”self”]iOS 7 GUI PSD (PSD)[/button] [button link=”http://ios.robs.im/”>http://ios.robs.im/” size=”small” target=”self”]IOS-7 icon kit […]

May 31, 2013

Install Laravel 4 and bundles.

Since the release of laravel 4, lots of developer got their hand dirty playing around with the awesome framework, What is Laravel? Laravel is a php framework that help you write codes, faster simpler in a elegant way. See they said about themselves. Laravel is a web application framework with expressive, elegant syntax. We believe […]

May 15, 2013

Create a virtual host in mamp

Running virtual host on your desktop will be a great help to boost up your development alot. I have been doing almost all of my projects now days, I am using MAMP on mac (sorry for window users), if you do not have MAMP go ahead, download and install. Why virtual Host? Virtual host give […]

March 06, 2013

Practice SASS now!

I have been using SASS (http://sass-lang.com/) since last week and found love with it. so what is SASS exactly that people are talking about on the web, basically it allows you to write your css in variables, functions, nesting for better visual and save your time on complex css, then it compile the file into […]

February 05, 2013

Must have Chinese New Year iphone apps 2013

Chinese new year is coming, i am pretty excited about it, i have complied a list of Chinese new year apps, hope you like it. Huang Says   Chinese New Year 2013 Lite   Happy Chinese New Year Free   scrapbox CNY     Pretty Pet Salon Asian Edition   2013免费新年祝福短信大全     Sovereign of […]

December 22, 2012

My first iphone app (singapore 4d result)

I have made an small iphone app that allow to read the latest singapore 4d results, its free and of course there are no ads on it, this is my first try out to build an iphone app, i am glad that its been approved and ready to download.   [button link=”https://itunes.apple.com/sg/app/sg4d-by-maxlibin/id586842687?mt=8&ign-mpt=uo%3D2″ size=”small” target=”blank”]Check out […]

December 12, 2012

QR code PC url To Phone google chrome extension

the problem that keep bugging me is that i can’t find a way to transfer my current website page / url articles into my phone with a click, maybe there are tools that help me to do that, but i don’t really want to install anything or… so i have created a google chrome extension […]

November 18, 2012

Best Chinese website inspiration

The following list are some of the really amazing Chinese websites design. Hope you like it. [button link=”http://www.autobaojun.com/630/index.html” size=”small” target=”blank”]http://www.autobaojun.com/630/index.html[/button] [button link=”http://www.axinweb.com/index.html” size=”small” target=”blank”]http://www.axinweb.com/index.html[/button]   [button link=”http://www.rxqnml.com” size=”small” target=”blank”]http://www.rxqnml.com/[/button]   [button link=”http://x9.landwind.com/” size=”small” target=”blank”]http://x9.landwind.com/[/button] [button link=”http://www.ciads.net/” size=”small” target=”blank”]http://www.ciads.net/[/button]   [button link=”http://www.art1985.com/” size=”small” target=”blank”]http://www.art1985.com/[/button] [button link=”http://encore.buick.com.cn/index.html” size=”small” target=”blank”]http://encore.buick.com.cn/index.html[/button]   [button link=”http://living.casarte.cn/” size=”small” target=”blank”]http://living.casarte.cn/[/button]   [button link=”http://www.ruifox.com/” […]

October 24, 2012

Phonegap 2.1 Whitelist rejection with Ajax

For those who are using phonegap 2.1 and want to do web app or want to request external data from your server or others, you get use jquery Ajax. $.ajax({ url: ‘http://google.com’, dataType: “text”, //

September 27, 2012

Import large sql files to phpmyadmin

have you ever encounter problem with importing large files like 300MB or more sql files into your phpmyadmin? Here is the solution, Open up your phpmyadmin config file, for me I am using MAMP on Mac, opens up [cc lang=”php”]/applications/MAMP/bin/phpMyAdmin/config.inc.php find $cfg[‘UploadDir’ ] = ‘upload’ ; around line 530, change to [cc lang=”php”]$cfg[‘UploadDir’] = ‘upload’; […]

September 21, 2012

Print Css background in Chrome and Safari

One of the problem that i have with css is that it does not allow me to print background color or background image, luckily Chrome and safari have a solution for that. Insert the code below to your css. -webkit-print-color-adjust:exact;

September 08, 2012

jQuery Mouse Wheel Slider

This is one of the project that i created for my full time job, which i want to share this interesting jQuery Wheel slider. If you haven see the slider before, please check out below [button link=”http://35.185.150.236/demo/jwslider/” size=”small” target=”self”]Demo[/button]          [button link=”https://github.com/maxlibin/jwSlider” size=”small” target=”blank”]Download[/button] Lets start with the basic html first I have included 4 javascript files […]

August 28, 2012

Instantly get value while you type with jQuery

Many questions have been asked, how do i get that input value to be shown on another DIV box or somewhere while i typing in the form> luckily jQuery has a easy solutions for us. lets say we have a form that included a text input, and a label input [cc lang=”html”] Here is the […]

August 19, 2012

Xcode 4.4 first start with Phonegap/Corvoda error

When i first run xcode with Corvoda 2.0  from the phonegap official guide Here i get 2 errors as descried below ‘Cordova/CDVViewController.h’ file not found in MainViewController.h ‘Cordova/CDVViewController.h’ file not found in AppDelegate.h the only solution that i found is go to preference “Xcode Preferences -> Locations -> Derived Data -> Advanced…” to “Unique”

August 11, 2012

Usability testing on low budget

In my previous post i talked about usability test and how do you do a usability testing on powerpoint presentation [button link=”http://35.185.150.236/what-is-usability-study-and-how-to-run-usability-test/” size=”small” target=”blank”]Here[/button] We all know that the better usability of your website bring you more happy customers, usability testing is one of the way to improve your interaction with the user and easier […]

July 31, 2012

Interaction design with seo

In this topic, i will talk and present about what is seo and how do you use in design. Search engine optimization from Li Bin  

July 11, 2012

jQuery validation plugins

jQuery has a few plugins for validations that simplify your job and beautify your website. here are some of them

June 30, 2012

what is usability study and how to run usability test

Previous i wrote an article on what is interaction design, now i am going to tell your what is is usability test / study and how do you actually conduct the test in a presentational way. Usability study View more presentations from Li Bin.

June 24, 2012

Get all categories from wordpress

If you are working on wordpress custom theme and you want to include categories that you created and customize it someway that you prefer, here is how. wordpress itself has a Template Tag of calling all the categories. [cc lang=”php”] you can also do an array inside category to customize the way you want. [cc […]

June 09, 2012

What is Interaction Design

Interaction design is consider as new technique for me, yet i am into this stuff now. i know you are asking what is that? Interaction design is about designing for user, understand their goal, their task, their experience, needs and wants, which focus on their behavior. Wikipedia explains: “Interaction design is heavily focused on satisfying […]

June 03, 2012

Max’s Community Project: Style an Unordered List

While browsing the net, came across webdesign.tutplus.com (highly recommended to check out, great to read. ). One of the post was an community project, asking to style a given HTML using only css. [cc lang=”html”] Cheese Sandwich Melamine Intrigue Shrubbery Chat so here is what i came out with. Download / Demo are not yet […]

June 03, 2012

How to remove Uncategorized from WordPress categories

Have you been annoyed by this small thing with a default “uncategorized” category in WordPress categories. You start to write blogs and created a few categories, but you found that you want to delete away the “uncategorized” category, yet there is no delete option for you. annoying isn’t it?? First you need to change the […]

June 02, 2012

Make IE render HTML 5 Tags

The easiest way is to include this tag in your head [cc lang=”html”]

May 13, 2012

Styling select fields

Styling select field is a huge pain, the select field are so limited that we have to look for javascript solutions. Here are some good jQuery Plugins that you download. [button link=”http://www.adamcoulombe.info/lab/jquery/select-box/” size=”small” target=”blank”]Download[/button] [button link=”http://www.abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/” size=”small” target=”blank”]Download[/button] [button link=”http://cssglobe.com/post/8802/custom-styling-of-the-select-elements” size=”small” target=”blank”]Download[/button] [button link=”http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/” size=”small” target=”blank”]Download[/button] [button link=”http://info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/” size=”small” target=”blank”]Download[/button] [button link=”http://www.georgepaterson.com/sandbox/jquery-ui-custom-select-demo/” size=”small” target=”self”]Download[/button] [divider] […]

May 08, 2012

Smooth scroll and find position of scrollbar with jQuery plugin

As a Html designer we all know that we can navigate to a position within a page using Anchor Point [cc lang=”html”] //set a position This is a position // button for me to go to that position Go however many designers are building more sexy and easy ways using javascript libraries, one of the […]

May 05, 2012

Form UI Set

I was appointed to create a registration form that need to be as easy as posible. Well its pretty challenging and ganna be fun!. since i have time, i created a set of UI Forms for readers to download. Hope you like it 🙂 [button link=”http://35.185.150.236/wp-content/uploads/2012/05/form_ui.psd_.zip” size=”small” target=”self”]Download[/button] [divider] [/divider]

May 03, 2012

Easy way to change stylesheet with jQuery

This is my first article here, so i am going to keep it short and sweet, i am going to write a easiest way to switch between stylesheet using jQuery. Assumed that you already have the html Setup with 3 different buttons (give each a unquie class). [cc lang=”html”] Title Button 1 Button 1 Button […]