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

    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=”https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit”>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

    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:

    20140421-222839.jpg

    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 specific country you need tools like VPN, vpn is virtual private network, that what actually does is give you/ authorized personnel an access to that server and use the server ip to do things you like, imaging you could access into USA VPN and watch shows from hulu or Netflix, That’s awesome. Of course many other US based streaming site too, one of the biggest activity is watch P*** online, these are very illegal on Singapore, so is not recommended.

    There are many VPN services out there which are quite fair price, a few I recommend are:
    Asstrill vpn
    Hidemyass vpn
    Express vpn
    Strong vpn

    All comes with their own desktop app, so easiest way is download and login, follow instruction, you will be happy after that.

    Now cones the mobile part, for those who do not want to watch on PC you could do it on phone, either android or iPhone, let you tell you a secret app for iPhone that allows you to Stream videos directly from streaming site that does not provide html5 technologies, which means these are using flash videos, you could use this all called iSafeplay, it’s real awesome, you could even save videos, photos, documents and keep it private, that’s the best app I suggest for play boys and play girls.

    So add these up you get what my title suggest, it’s real cool, try out and leave comment below if you need help.

    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 of opening files, so set the limit to a large number will fix this problem

    on your terminal

    ulimit -S -n 2048 # or whatever number you choose

    anyway if you are not familiar with Gulp, check out this page:

    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 is how I automated my process, or at least reduce the process, I am using sublime as my IDE, most people recommend PHP Storm for our project, however I just like to stay with sublime for their lightweight and packages, I installed SFTP for sublime which comes with a trial of 30 days, or you can pay after that for $20 bucks, SFTP allow me to sync local files and folder to remote or remote to local, or two ways sync.

    There is a settings that I love alot is the

    [cc lang=”php”]”upload_on_save”: true

    Once you click save, the file will be automatically send to remote, and there are so much settings you can do with SFTP sublime.

    Just check official Usage page.

    http://wbond.net/sublime_packages/sftp/usage

    However!!! It does not watch my folder, when I do a Git pull, there are so much files downloaded and files changes, the bad thing is SFTP does not watch that for me and upload these changes to remote.
    Continue reading “Sync local files and folder to remote”