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”

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 comes with an command option in terminal to open up current folder. You can open your project by using

atom open

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 = require('gulp-coffee'),
    uglify = require('gulp-uglify');
  

  // define your file directory

  paths = {
    coffee: "./coffee/*.coffee"
    js:"./js"
  }


  // create an new task do compile coffeeScript
  gulp.task('coffeeScript', function(){
    gulp.src(paths.coffee)
    .pipe(coffee({bare:ture})) // options are allow here for coffee script
    .pipe(uglify()) // minify the javascript
    .pipe(gulp.dest(paths.js))
  });
  
  // watch the file changes...
  gulp.task('watch', function(){
      gulp.watch(paths.coffee, ['coffeeScript']);
  });
  
  // Gulp default function for proceed the gulp.
  gulp.task('default', ['coffeeScript', 'watch']);

anyway remember to update your node.js or else you will get an Bus Error.

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 animations, interactions and DOM manipulating. But phonegap jquery animation looks really bad, so first rule for me is never use jquery animation on phonegap, use CSS animations. However that’s not the end, use translate instead of using positions:

transform:translate(100px, 100px);

Or

transform:translate3d(100px, 100px, 0);

jQuery click event comes with 300ms Delay, which made the app looks a bit unnatural, one javascript plugin I recommend is fastclick.js

FastClick.attach(document.body);

or if you prefer not to use plugin, touchend event should be good enough to prevent this delay.

$('element').on('touchend', function(){
// do something
})

… to be continue

Use variables instead of calling the DOM itself,

var someThing = $('.something');
someThing.attr('id', 'someId');
someThing.hide() // show()

Use touch when you want to overflow something within a box.

-webkit-overflow-scrolling:touch;

you can also style the sidebar using webkit sidebar:
[cc lang=’css’]
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: none;
padding:2px;
}

::-webkit-scrollbar-thumb {
border-radius: 6px;
background: #ccc;
}

Reduce the DOM elements, One way that I did is to create a Class in javascript, whenever a new Page need, call that function with that would append my Html into the Dom and remove the previous elements.

If you have more to share, please comment below…

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 to SASS / CoffeeScript or even when I saved the image it will reload the page automatically.

Continue reading “Gulp Mamp development”