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.

there is a gulp plugin called gulp-plumber helps when you do not want to break your gulp and print the error on console.

its really easy, just install and include in your gulp pipe like this.
First, install gulp-plumber as a development dependency:

npm install --save-dev gulp-plumber

Then, add it to you gulpfile.js:

var plumber = require('gulp-plumber');
var coffee = require('gulp-coffee');

gulp.src('./src/*.ext').pipe(plumber())
.pipe(coffee())
.pipe(gulp.dest('./dist'));

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 {
  text-style:center;
}

li {
  display:inline-block;
}

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 {
      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 click it will not show the menu, to fix this, do a cursor pointer inside parent li

    
    li {
      cursor:pointer;
    }
    
    

    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.

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