1. I start working locally on a brand new project
2. I go to GitHub and create a new repository for my project
3. Confused, start Google-ing how to connect the two of them

How do I connect them?

Here’s what you need to do to connect your local git repo with your remote github repo:

cd /my/local/project/path/
git init
git remote add --track master origin git@github.com:jorgepedret/foo.git

1. CD into your local project directory
2. Run git init, if you haven’t ran it yet
3. Connect the remote repo with your local repo

Done!

Now you can commit your changes, pull rebase and then push to your remote repository

git add .
git commit -m "Initial commit"
git pull --rebase origin master
git push origin master

Another way to do it

Here’s another way to connect your local repo with a remote github repo:

1. Rename your local project directory
2. Clone your GitHub repo specifying the original directory
3. Move the original content to the new repository
4. Delete the temporary directory created in line 1

mv my_project my_project_temp
git clone https://github.com/jorgepedret/foo.git my_project
cp -r ./my_project_temp/. my_project
rm -r ./my_project_temp

What’s the correct way to do it?

The correct way to do it is to start your GitHub repository before starting to code. That way you can simply use git clone and then just start working on it.

That’s it! Thanks to Caius Theory and Ciarán Walsh for helping me find a solution for this problem.

1. Clone all the remote WordPress files in your local computer.
2. Clone the remote WordPress database into your local computer.
3. Update the wp-config.php file with your local MySQL access info and database name.
4. Replace the old domain with the new domain in your local MySQL by running this commands:

UPDATE wp_options SET option_value = REPLACE(option_value, 'http://old.domain.com', 'http://new.domain.com');
UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://old.domain.com', 'http://new.domain.com');

function loadGoogleMapsApi(){
	if(typeof google === "undefined"){
		var script = document.createElement("script");
		script.src = "https://maps.google.com/maps/api/js?sensor=false&callback=loadGoogleMapsApiReady";
		document.getElementsByTagName("head")[0].appendChild(script);
	} else {
		loadGoogleMapsApiReady();
	}
}
function loadGoogleMapsApiReady(){
	$("body").trigger("gmap_loaded");
}

First we define the loadGoogleMapsApi function, where we include the script tag which is going to start loading Google Maps’ API. Notice in line 4 how we define the callback function loadGoogleMapsApiReady. This is the function that will be executed after the library has been loaded.

The second step is defining the callback function loadGoogleMapsApiReady. This function simply triggers the custom even gmap_loaded on the body.

You’re all set now! Now is time to use the on demand functionality. For that you only need to attach some functionality to the custom event gmap_loaded triggered on the body tag. See below:

$("body").bind("gmap_loaded", function(){
	alert("Google map is loaded and ready to be used!");
});
loadGoogleMapsApi();

If you want to load the Google Maps API on a button click, you could do something like this:

$(".my-btn").click(function(){
	$("body").bind("gmap_loaded", function(){
		alert("Google map is loaded and ready to be used!");
	});
	loadGoogleMapsApi();
});

Let me know what you think and how it worked for you.

Here’s a link to the snippet on the gist: https://gist.github.com/2432506

I have a couple of pages that need a set of files, so instead of including one by one in all the pages, I created a function that calls requires them all, keeping the callback function.

require_form = function (callback) {
	require([
		"form",
		"validate",
		"multiselect",
		"form_extend"
		], function(){
			require(["my_validate"], callback);
		}
	);
};

Whenever I need to require the form set of files, I call:

require_form(function(){
	alert('All form files are loaded!');
});

Check out code on the gist https://gist.github.com/2432457

• make a limited symbols subset, with reduced font size
• merge symbols from several fonts to single file
• access large collections of professional-grade open source icons

We’re currently using postMessage/receiveMessage to dynamically resize an iframe inside our client’s page. The plugin works in most browsers, including IE. But in my case, it was failing in IE when a form was submitted inside the iframe. It took us a long time to figure out the solution, but we finally came up with a fix.

In the plugin’s website, they show and example of how to use it to communicate between two iframes residing in two different domains (http://benalman.com/code/projects/jquery-postmessage/examples/iframe/). I’m going to use that example to show you how to solve it.

After a lot of debugging, we found out that the parent_url wasn’t being set in IE after the form was submitted. So our solution was to add a hidden field that can hold the parent_url value when the iframe first loads.

Here’s a quick example of how to fix the issue using the example posted in the plugins’s website:

The child frame code

$(function(){
	var parent_url, link;

	// Create the hidden input field that will hold the parent_url variable.
	$("form").append('<input id="parent_url" type="text" name="parent_url" />');

	// We check to see if location hash is empty. It should only go in here if you're using IE and after the form as been submitted.
	if(document.location.hash == ""){
		var search 		= document.location.search,
				id 				= "parent_url=",
				hs_start	= search.indexOf('parent_url'),
				hs_end 		= search.indexOf('&product_service');

		// Get the parent URL from the URL parameters sent by the form
		parent_url = decodeURIComponent( search.substr(hs_start + id.length, hs_end - id.length - 1) );
	}
	// If location hash is not empty, then we just assign it to the variable parent_url
	else{
		parent_url = decodeURIComponent( document.location.hash.replace( /^#/, '' ) );
	}
	// We assign the value of the parent_url to the hidden input element. That way if document.location.hash is not accessible, it can be accessed
	$("#parent_url").val(parent_url);

	// This is the function that posts a message to the parent for it to resize the iframe
	function setHeight() {
		$.postMessage({ if_height: $('body').outerHeight( true ) }, parent_url, parent );
	};

	setHeight();
});

The code for the parent window stays the same as in the example. After applying this changes, the code should work properly after submitting a form.

Also if you have links in your code and want your iframe to resize every time you go to a new page inside the iframe, try doing something like this in your iframe code:

// Go through each link and append the parent_url variable to the end.
$("a").each(function() {
	$(this).attr("href", $(this).attr("href")+"#"+parent_url);
});

Hope this post saves somebody a bunch of hours of debugging and IE cursing. If you’re having a similar problem implementing postMessage/receiveMessage, post a comment and we can figure out together.

Checkout the code in the gist