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 on disk Utility, but turns out it does not work for me, so when I do meteor, I saw some error message like this,
Continue reading “Remove sudo meteor”

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 other ways, normally I will like this this.

console.log('some string | another string')

Continue reading “Styling your console log”

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 {

li {

however there is a problem in this case, there will be a small space between each li element, to fix this here is a trick, change your html to:

  • some text here...
  • some text here...
  • some text here...
  • some text here...

hope this works for you.

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 with


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 {
    li:hover ul.child {

    ok this works fine, nothing wrong here, there is only one problem is that when you use mobile, and you click it will not show the menu, to fix this, do a cursor pointer inside parent li

    li {

    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 localhost.localdomain localhost yourhostname and restart your services. and boom, you see your email send instantly.

    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

    Add this property to where you transition the css, hope this help you.

    -webkit-transform: translate3d(0,0,0);

    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’);

    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. here is a good source to read more about – <a hrefs=””>sourcemap</a>

    to simplify, SourceMap allow us to live edit or debug compiled and compressed files like sass, coffeescript from the main source file. 

    This is how you do on chrome, 

    Open up your Developer Tools and click on settings, make sure that the option: Enable css “Enable CSS source maps” and “Auto-reload generated CSS” are both ticked.

    Now you need to map your css to sass or scss file, 
    Open the Source tab from developer toolbar and right click the css you want to map to the scss