Category: Web Development

• Comparison of Web Application Frameworks

Web Host: Amazon

Email Host: Google

DNS Host: Other/Self-Hosted (followed by Amazon)

Registrar: GoDaddy

SSL Issuer: GeoTrust

Certificate Type: Star

For a complete breakdown, visit http://jpf.github.io/domain-profiler/ycombinator.html

When developing a site, you may have a main javascript file that contains various blocks of code for different parts of your site. As time goes on, this file could get really long and you may not want to break it up to keep minimize requests and the number of files to maintain. Sometimes you might accidentally have code in one block that is meant for one part of  your site interfere with code from another. In addition, you may find it hard to see which blocks of code are getting executed. One way to overcome this is by setting up your code as follows:

/**
 * Code to do one thing on one part of your site,
 * e.g. slide show your product pages
 */
(function ($) {
	$(document).ready(function () {
		 if ($("body.products").size() > 0) {
		 	if (typeof console != 'undefined' && console !== null) {
				console.log("slide show on product pages called.");
			}
			// put code here ...
		}
	});
}(jQuery));


/**
 * Code to do one thing on one part of your site,
 * e.g. custom animation your resources pages
 */
(function ($) {
	$(document).ready(function () {
		 if ($("body.resources").size() > 0) {
		 	if (typeof console != 'undefined' && console !== null) {
				console.log("custom animation on resources pages called.");
			}
			// put code here ...
		}
	});
}(jQuery));

Google recently updated Google Maps and while it looks nice, I actually had to go back to the old (classic) Google Maps to find how to get the embed code to embed a map into a website. If you need to embed a Google Map into your website, you can follow these steps:

1. Go to maps.google.com and search for your location.

2. If you see the new Google Map, click on the gear in top right and select “Classic Maps”

Continue reading Embedding Google Maps into a Website

Adding icons to a website can easily make it look more polished, but it can also be a hassle to find good fonts and deal with resizing them or styling them as images.  I came across this site called Font Awesome that offers 361 fonts as icons so you can style these icons easily via CSS and easily include them into your site.

http://fortawesome.github.io/Font-Awesome/

 

Recently, I had to take and prepare a video for uploading to Kickstarter. Since I wanted a high quality video and I did this all by myself, I just used my phone (Samsung Google Nexus), put it on a tripod and filmed myself in HD. I then transferred the video over USB to my Windows laptop, opened it up in Windows Movie Maker, added some still images, and then saved the output in 1280×720 which has a 16:9 aspect ratio.

Converting a video from 16:9 to 4:3 aspect ratio for Kickstarter

It turns out, for some reason, Kickstarter uses the old 4:3 aspect ratio for videos. Since I wanted to show as much of the video possible without any black bars, I had to crop the video from a 16:9 aspect ratio to 4:3. The width of the Kickstarter video area is 620px wide so I wanted the video to be that wide. I decided to just go with 640 px wide and crop the video to 640 x 480 since that’s a common size. I did this by downloading HandBrake and automatic cropping as shown in the following screenshot. I used the High Profile for the highest quality output. Click on the image to enlarge. Handbrake will automatically crop the black bars.

Continue reading Preparing a Video on Windows for Kickstarter

Here’s a nice, scalable, customizable map of the United States.

http://intridea.github.io/stately/

I wish this existed for all countries.

There are many password management tools and password generators. Here are two that I’ve used that seem pretty good.

Password Generator

http://jpgen.joelwalters.com/

Password Manager

https://www.dashlane.com/

Dashlane can also sync your passwords across multiple computers and devices so you don’t have to manually do so. It also has a nice interface.

Sorting lines of text is easy. Many text editors include that functionality built in. But, what if you need to sort blocks of text, e.g. a PHP classes. Here are some ways to do it.

1. Convert each block of text to a single line by replacing each line break with a unique identifier. Run your built-in line sorting function. Replace each unique identifier with a line break again.

2. Write a regular expression that will match each block of text and sort using a regular expression.

Recently, I needed to edit a php file in Vi and although I need the line of the error, I didn’t see line numbers like I normally do in my Sublime Text 2 editor. It turns out that if you’re in Vi/Vim, you can type

:set numbers

or

:set nu

and line numbers will show up. Much better! But, that only works for the current Vi session. If you want Vi to always show line numbers, edit the .vimrc file in your home folder

vi ~/.vimrc

and append “set number” to it.