Most websites I see go in and over-explain how to grab data, eg. json, from an external website. This is a simple explanation of the SIMPLEST way to nab data.

This is going to go in and grab my gists from github and return the json data.

var url = '';
  httpr = new XMLHttpRequest();'GET',url, false);
  var statusText = httpr.statusText;
  var response = httpr.response;
What is giong on? Line-for-line:
1) Get the url we want to nab data from
2) instantiate the XMLHttpRequest object, which is used to go get and handle our data
3) the open method prepares our data to be retrieved and
4) the send method executes our prepared action
5) simply assigns the response message (If successful it will receive "ok")
6) Is the response. This is where all our json data from line 1 is stored.
7) Just outputs the data to our console.

If you have ever started out writing PHP CLI, you may notice it's kinda hard to find information about how to get input to and back from the user.

Here is a simple function which will allow you to ask the user for input and then return the input.

function getInput($msg){
	print "$msg \n";
	$handle = fopen ("php://stdin","r");
	$line = fgets($handle);
	return trim($line);
And don't forget to start your CLI document with the following!


It is always good to go back to the basics, even if it sounds dumb or beneath you. Here is a reference from this stackoverflow question:

Actually, you are quite right when it comes to header/footer. Here is some basic information on how each of the major HTML5 tags can/should be used (I suggest reading the full source linked at the bottom):

section - Used for grouping together thematically-related content. Sounds like a div element, but its not. The div has no semantic meaning. Before replacing all your div's with section elements, always ask yourself, "Is all of the content related?"

aside - Used for tangentially related content. Just because some content appears to the left or right of the main content isn't enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.

header - There is a crucial difference between the header element and the general accepted usage of header (or masthead). There's usually only one header or 'masthead' in a page. In HTML5 you can have as many as you want. The spec defines it as "a group of introductory or navigational aids". You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as "a thematic grouping of content, typically with a heading."

nav - Intended for major navigation information. A group of links grouped together isn't enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.

footer - Sounds like its a description of the position, but its not. Footer elements contain information about it's containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.


This is just a quick post of a few things that are really bugging me about the podcast app by Apple. This is after a long time of us age and the few things I think I really need in this type of app.

Complete synchronization. This seems like a no brainer, but I'm not just talking about the ability to synch podcasts across different devices, or start/stop times. I'm talking full synchonicity. (That's not a word, but it is now) I want to be able to see if I've EVER played an episode. Perhaps taking it a step further, a list of times listened to, or at least when it was last listened to.

Also, I don't know if this is a bug or a feature. But I have two copies of smodcast. I'm completely unable to delete either one of them from my phone. This seems like it should be a default function, not a "feature".

CSS should be more friendly. I feel it should have certain math qualities, such as variables, addition, subtraction, multiplication etc.

A certain problem that is fairly common when working with a 3 or 4 part layout where you have a header, a sidebar and content (sometimes even a footer) Typically if you want to have your content and/or sidebar extend from just below the header to the very bottom, without adding more to the page, requiring useless scroll-down-to-nothingness, this is difficult to do.

Your first instinct is to make the content height 100%. This doesn't work because you have a header already there, so the height of your page is now 100% + the height of your header. FRUSTRATING, but I get it CSS. I get it.

Easy solution: 100% - 50px. WRONG Like I said. CSS doesn't do math. So what CAN you do?

See this JSFiddle. This is an example solution of what I am talking about. It's pretty simple solution.

.content {
    position: absolute; /* very important, this will not work without */
    top: 50px; /* Set this to the value of the height of whatever div(s) is above it*/
    right: 0px; /* Absolute will kill your floats, so place it where you need */
    bottom: 0px; /* This will force the bottom of the div to the bottom. */
The key here is making sure that you understand that you are no longer floating these divs. Because of this, it may not be the ideal solution for all things, but it definitely is great if you are working on full screen layouts.

This post was kinda thrown on here as an afterthought, so I'm sorry if it is rushed, and please comment below if I missed something, or if you have any suggestions.


  for ( $i = 0; $i < n; $i++ ) { print "Boots. Cats."; }

This has been a huge issue since I can remember. I run into it regularly, and figured I should drop some knowledge on the internets, for those who also have this issue and can't figure this out.

Gradient banding


Do you see in the before the nasty banding that occurs? This can occur in a variety of situations. I at first thought it had to do with my color space, or sample rate, but it occurs in all 8, 16 and 32 bit spaces, CMYK and RGB. So no way to really avoid it, but you can clean it up. If you are seeing banding in your images, go to your Filter Gallery and find the Spatter filter in the brushstrokes setting. Spray radius turn all the way up to 25, and the smoothness to 1.

A few things to remember. The first, in order for this to work, the layer must not have active layer styles applied. If you do, simply create a new layer underneath and merge down (cmd-e, or ctrl-e on windows) Then apply this filter.

The second thing to remember is this will add a little bit of texture. I find the texture you get from this effect is a fine compromise, but it may not be for you, or your particular situation.

Last, adding this effect will make your file larger. This has to do with how the compression occurs in various formats. I won't go over the specifics on how that all works, but do take note of this. It may not matter. It might matter a lot if you are working with web graphics. Keep that in mind, and as always, this is your design. Make it your own. If you find any improvements on this technique, or better way to do it, leave a comment!

This is pretty intermediate in skill level for creating templates. This is to say, in order to be able to create WordPress themes, you need to have a certain familiarity with PHP code. This is one of the many setbacks of WordPress. Never-the-less. They are the most popular CMS engine out there, so if you wish to make it out there creating templates, you better strap in for the learning curve that is coming to you.

Anyways, with WordPress, you can hardcode this right into the head, but it is recommended that dependencies are enqueued into the wp_head() portion of the template. If you do not use wp_head(), then your template will not be able to take advantage of all the features available as a WordPress theme.

Here is a sample of what the enqueuing looks like for LESS.js (Credit to:

// Setting paths to the resources we will need later, js and styles
$path_to_js 	= get_stylesheet_directory_uri() . '/library/js/';
$path_to_styles = get_stylesheet_directory_uri() . '/library/styles/';
// We don't want to load unnecessary things when browsing the Dashboard, right?
if ( ! is_admin() ) {
	function load_LESS() {
		// Retrieving the paths we set above
		global $path_to_js, $path_to_styles;
		// Actually printing the lines we need to load LESS in the HEAD
		print "\n<!-- Loading LESS styles and js -->\n";
		print "
<link rel='stylesheet/less' id='style-less-css'  href='" . $path_to_styles . "style.less' type='text/css' media='screen, projection' />\n";
		print "<script type='text/javascript' src='" . $path_to_js . "less-1.1.3.min.js'></script>\n\n";
	// Adding the action to the HEAD
	add_action( 'wp_head', 'load_LESS' );
Cool eh?