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

1
"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.

Read More

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

1
atom open
Read More

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 from here.

640

https://chrome.google.com/webstore/detail/singpaore-haze-psi/fidfiidepkipkbnnmfncgpoiejpiompg?hl=en

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
  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:

1
transform:translate(100px, 100px);

Or

1
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

1
FastClick.attach(document.body);

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

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

… to be continue

Use variables instead of calling the DOM itself,

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

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

1
-webkit-overflow-scrolling:touch;

you can also style the sidebar using webkit sidebar:

1
2
3
4
5
6
7
8
9
10
11
12
::-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…

Learning Gulp

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

gulp-video

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.

Read More

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 here…

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 output into another folder, every time you made an change. Its awesome tool that was built.

It just happened that I was reading some news and got into this Gulp thing and start exploring it, and found that its awesome and much easier to use than Grunt.

both are built in node, so you need to install the node module when you start an project,

at the root of your project folder, enter this in your terminal

npm install gulp —save

this will install, and now you can start creating a node script file, gulpfile.js

gulp use each plugin for each different task and thats a great concept, there are only 5 functions that you need know,

gulp.task // create a new task or action 

gulp.src // the source of this file start with same folder as gulpfile.js

gulp.run // run the task / action

gulp.watch // watch this folder or file if made some changes

gulp.dest // the destination of folder to output

Below is an example of how Gulp file work using gulp-sass plugin which will compile scss to css, if you are interested to read more, I suggest that you go directly to the gulp github repo. By the way when I install gulp using older version of Node.js I faced some problem watching the file, so you might want to update your node.js.

var sass = require(‘gulp-sass’);
var gulp = require(‘gulp’);
gulp.task(‘dosass’,function(){
gulp.src(‘sass/*.scss’).pipe(sass()).pipe(gulp.dest(‘./sass/css’));
})
gulp.task(‘default’, function() {
  gulp.run(‘dosass’);
  gulp.watch(‘sass/*.scss’, function(event){
    gulp.run(‘dosass’);
  })
})

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

If you intend to try out now, just do -webkit-filter: blur(10px); // or other properties

By mixing with some of the properties you can get great effects like those Instagram right on your browser, only with CSS, thats really simple and awesome for me.

here is a link to the playground, check it out.

css filter playground

Page 4 of 9« First...23456...Last »