Posts

6 steps to create local copy of your live WordPress site

I know there are bunch of other posts on how to create local copy of your live WordPress site, however, they are too much descriptive. Here I will show you step by step approach rather than descriptive one. 1. Export your live database into an sql file. 2. Download/Copy your live WordPress site folder to your local machine. 3. Move your downloaded WordPress site files inside local server’s web root. 4. Open exported sql file using notepad or any other editor of your choice and replace “http://www.yoursite.com” with “http://localhost/wordpress” and Save that file. (CAUTION: This file could be very large so replacing might take time. Command for replacing file content on *nix based system.) 5. Import database from that sql file into your local mysql database. 6. Open wp-config.php file which you can find inside your copied WordPress folder. In that file replace DB_NAME with your local WordPress database which you imported in above step. DB_USER with database user name. D
3 comments
Read more

Partially rendering Handlerbars from Backbone view

Image
While working on a project I had this situation where I wanted to render a view partially after some ajax is done. In this post I will explain how to render HandlerBar views partially. For the purpose of demonstrate I will simulate delay using setTimeout() function instead of an ajax request. So for an example lets consider following setup 1. Template <script id="PersonTemplate" type="text/x-handlebars-template"> <div> {{firstName}} {{lastName}} <div> <div id="divPartial"> <a href="{{website}}">{{website}}</a> </div> </script> 2. Backbone Model var PersonModel = Backbone.Model.extend({ defaults: { firstName: 'Bharat', lastName: 'Patil', website: '' } }); 3. Backbone view using Handlerbars view var TestView = Backbone.View.extend({ //assign model view instance model: objPerson, //get the
Post a Comment
Read more

Step by step Cordova calabash-ios automation

Step by step guide about how to integrate calabash-ios with Cordova in an automated way without opening Apple Xcode. Note: First try steps given on https://github.com/calabash/calabash-ios . If those steps aren’t working for you then try following steps. For me only manual steps given on above link worked. Also this script doesn’t create separate target same as “calabsh-ios setup” command. I also presume that you have already setup your cordova project and nodejs . sudo gem install calabash-cucumber If you get any error then try using following command sudo ARCHFLAGS=-Wno-error=unused-command-line-argument-hard-error-in-future gem install calabash-cucumber reference Go inside your Cordova project directory npm install xcode npm install fs-extra npm install underscore Download script “cordova-calabash-ios.js” from here and paste it inside your cordova project at www level (not inside www). (Note: This is very primitive script you can modify it according to your n
1 comment
Read more

DataSync PhoneGap/Web applications using LocalStorage

Recently I have developed a PhoneGap application in which I wanted to synchronize data with server. In this post we will see a simple method to send data from PhoneGap application / Web application using LocalStorage as a queue. Conditions were like below: Store data in queue locally in LocalStorage Sync data with server if online when application comes online it should start syncing the data again if any upon successful sync remove from queue else try again synching one item at a time I have developed this solution using Backbone and Backbone LocalStorage plugin. Lets start understanding the solution. 1. Backbone Model var QueueModel = Backbone.Model.extend({ defaults:{ 'url': null, 'method': null //http method like GET, PUT, POST etc. } }); This model is nothing but representation of ajax settings that can be found here . 2. Backbone Collection used as a Queue which is using Backbone.LocalStorage plugin. You should use singleton p
6 comments
Read more

How to create syntax highlighter using jQuery

Image
Today I am going to show you how to create a basic code highlighter for website. This UI is actually inspired by sixrevisions.com . I have added functionality of showing line numbers. Following things will be covered How to add line numbers How to highlight single line comments i.e. those lines which starts with // How to highlight comment blocks i.e. those lines which are enclosed within /* */ Live Demo       Download Code To use this code highlighter you have to wrap your code inside <pre> tags. Really there is nothing new in it. It is the same traditional old method. <code> tag is another way of adding code into your post. However there is a difference between <pre> and <code> tag. To give analogy of their working I would give example of <div> and <span> respectively. This means <pre> is a block tag and <code> tag can be used inline. One important thing we need to consider is, in WordPress if you want to
2 comments
Read more

KineticJS – draw lines using mouse tutorial

Image
In this post we will see how to draw lines using mouse with KineticJS canvas library. First we will go through a basic logic for drawing line. Also we will see how this logic can be implemented for KineticJS. live Demo  |  Download Code Logic for drawing line on canvas using mouse Listen for mousedown, mousemove, mouseup events on canvas on mousedown store x1, y1 relative to canvas element set started = true on mousemove if started = false then exit get current x, y element = line(x1, y1, x, y) on mouseup if started = false then exit get current x, y element = line(x1, y1, x, y) Explanation is as below Add following div into body <div id="canvasArea"> </div> Initialize a stage and layers var stage = new Kinetic.Stage({ container: 'canvasArea', width: 500, height: 500, draggable: false }), layer = new Kinetic.Layer({ name: 'layer' }), tmpLayer = new Kinetic.Layer({
2 comments
Read more

How to get local time from UTC using Moment.JS

Image
  Moment.JS is a beautiful javascript library for parsing, validating, manipulating, and formatting dates. This is a must have utility library when it comes to manipulating timestamps and dates in javascript. Here I will show how to get local time if you have a utc date time string. Lets say you have a UTC date-time string as  2014-02-19 05:24:32 AM and you want to determine time in your timezone then use following code: moment.utc('2014-02-19 05:24:32 AM').toDate(); toDate() method gives javascript Date() object. Below I have shared an example of how to use it. You can click on JavaScript link below to see the code.
9 comments
Read more