The book makes the assumption that you’re already somewhat familiar with programming and the JavaScript language in particular. Instead of wasting time with absolute basics, it dives right in to Node. The first two chapters explain what exactly Node is, and how the the event loop works. It covers the differences between synchronous and asynchronous tasks, illustrating the reason you want to avoid blocking I/O. The next two chapters deal with sockets, serializing data and message queues. Other sections deal with databases (using CouchDB as an example), unit tests, building and consuming RESTful APIs and single-page web apps.

If you work your way through the examples in the book, you’ll end up building a reasonably complex web app and batch-importing a bunch of data from Project Gutenberg.

Node.js the Right Way is the best introduction to Node that I’ve seen so far. It’s concise enough it won’t take up a lot of your time, covers things more thorougly than a 500-word blog post or hour-long screencast, and there’s no magic “just copy and paste this, I’m not going to bother explaining it.” You should come out of it knowing where to go to keep learning. It’s easy enough to think “I used Express for this, and Grunt for that. Maybe I should search for more information about those tools.”

<p>The most famous keyboard shortcut is probably <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p>

The browser (by default) renders the kbd tags in a monotype font, just like code and pre. But if you’re already going to mark up keys like that for semantic reasons, why not apply a little styling and make it fancy? (I’ve seen a few sites do this, Stack Overflow being one of them.)

kbd {
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 0.1em 0.5em;
	margin: 0 0.2em;
	box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
	background-color: #f7f7f7;
}

While the tag isn’t solely meant for this use case—it can also be used for any user input, such as something you intend the reader to search on Google—I think it’s a great use. The code element tends to be used for the latter case more often, whether it’s considered appropriate or not, so styling it like so shouldn’t get in the way in most cases.

If you have need to display keyboard shortcuts periodically, it’s definitely a nice touch.

A Brief History of Favicons

Favicons, or “shortcut icons,” can be defined in multiple ways. Like all too many things in web design, browsers handle them in slightly different and mildly incompatible ways, meaning there’s plenty of redundancy. Favicons came to be when Microsoft added them to Internet Explorer 5 in 1999, implementing a feature where the browser would check the server for a file named favicon.ico and display it in certain parts of the UI. The following year, the W3C published a standard method for defining a favicon. Rather than simply having the browser look for a file in the root directory, an HTML document should specify a file in the header with a <link> tag, just like with stylesheets.

Fast forward to the present, and you have a bit of screwiness.

• All major web browsers check for the link tag first, and fall back to favicon.ico if it’s not found.
• You can define multiple icons in the HTML header. You can have ICO/PNG/GIF formats, as well as different sizes.
• Some browsers support larger 32×32 favicons, while others will only use the 16×16 ones. Chrome for Mac prefers the 32×32 ones, and scales them down to 16×16 on Macs without Retina displays.
• Big Bad Internet Explorer only supports ICO files for favicons, not PNGs.

The most compatible way to set up your favicon is to define both 32×32 and 16×16 icons in your header, using the PNG format, and make a 16×16 ICO formatted one to name “favicon.ico” and drop into your web root. Browsers that play nicely will use the PNG ones in whatever dimensions they prefer, and IE will fall back to the ICO file.

Writing the Class

Now that the history lesson is out of way, you can see why there’s a little bit of a challenge here. Depending on how badly you want to find and display that icon, you may have to write logic for the different methods. For this tutorial, I will focus on two. The simplest, which is looking to see if there’s a favicon.ico, and a basic implementation of checking for a link tag defining a shortcut icon.

Before we do anything else, we need to install a few dependencies. Either add them to your Gemfile and do a bundle install, or use the gem install command to install them manually.

• HTTParty (gem install httparty)
• Nokogiri (gem install nokogiri)

Now require the necessary libraries at the top of a new Ruby file and we can get going.

require "httparty"
require "nokogiri"
require "base64"

We can define a class to make a nice, clean interface for this to keep it modular and easier to reuse. As you can see below, I’ve made a Favicon class and added some accessors for instance variables, as well as an initialize method that assigns the parameter it receives to the @host instance variable before calling the method we will be defining next.

require "httparty"
require "nokogiri"
require "base64"


class Favicon


  attr_reader :host
  attr_reader :uri
  attr_reader :base64


  def initialize(host)
    @host = host
    check_for_ico_file
  end


end

We’ll be implementing the simplest part first. The check_for_ico_file method will send an HTTP GET request to /favicon.ico on the server specified in @host and check to see if a file exists. (The server will send a 200 OK response if it does, and a 404 Not Found error otherwise.) If it does, the URL will be saved to an instance variable and the icon file’s contents will be base64 encoded before being saved to an instance variable as well.

The HTTParty gem is great for this, since it drastically simplifies simple HTTP requests like this.

# Check /favicon.ico
def check_for_ico_file
  uri = URI::HTTP.build({:host => @host, :path => '/favicon.ico'}).to_s
  res = HTTParty.get(uri)
  if res.code == 200
    @base64 = Base64.encode64(res.body)
    @uri = uri
  end
end

If you want, you could go ahead and instantiate the class to try out what we have so far. If you pass it the domain name of a site that uses the /favicon.ico convention, the object should find it without issue.

favicon = Favicon.new("arstechnica.com")

puts favicon.uri
#Outputs http://arstechnica.com/favicon.ico

puts favicon.base64
#Outputs a bunch of base64-encoded gibberish. More on this later

puts puts favicon.host
#Outputs arstechnica.com

Now let’s handle link tags! The process for that is a little bit more in-depth. First we need to request a web page from the server, such as the index page, and parse it for tags that resemble <link rel="shortcut icon" href="..." />. Then we have to evaluate the contents of href to make sure it’s an absolute URL, and prepend the domain name if it is not. After that, we can finally make a request to get the icon itself and save it.

Still with me? Excellent, now here’s the code to do that. I’ll comment it a little more thoroughly, since it looks messier at a glance.

# Check "shortcut icon" tag
def check_for_html_tag

  # Load the index page with HTTParty and pass the contents to Nokogiri for parsing
  uri = URI::HTTP.build({:host => @host, :path => '/'}).to_s
  res = HTTParty.get(uri)
  doc = Nokogiri::HTML(res)

  # Use an xpath expression to tell Nokogiri what to look for.
  doc.xpath('//link[@rel="shortcut icon"]').each do |tag|

    # This is the contents of the "href" attribute, which we pass to Ruby's URI module for analysis
    taguri = URI(tag['href'])

    unless taguri.host.to_s.length < 1
      # There is a domain name in taguri, so we're good
      iconuri = taguri.to_s
    else
      # There is no domain name in taguri. It's a relative URI!
      # So we have to join it with the index URL we built at the beginning of the method
      iconuri = URI.join(uri, taguri).to_s
    end

    # Grab the icon and set the instance variables
    res = HTTParty.get(iconuri)
    if res.code == 200
      @base64 = Base64.encode64(res.body)
      @uri = iconuri
    end
    
  end

end

Now there’s one more thing to do before we’re done. The initialize method needs to be tweaked so it calls our newest method:

def initialize(host)
  @host = host
  check_for_ico_file
  check_for_html_tag
end

Now the class will check for the favicon.ico file first, then the HTML tag. If the HTML tag is present, it will take precedence.

Available as a Gist! For your convenience, the results of this tutorial are available as a GitHub Gist.

Using the Class

Now all you have to do is include the class with a require statement, and grab favicons.

require "favicon"

favicon = Favicon.new("arstechnica.com")

puts favicon.uri
#Outputs http://static.arstechnica.net/favicon.ico

puts favicon.base64
#Outputs a bunch of base64-encoded gibberish. More on this later

puts puts favicon.host
#Outputs arstechnica.com

Now…what of that “base64-encoded gibberish?” It’s the perfect format for a little trick called Data URIs, which you can read all about over at CSS-Tricks. If you cache that base64 string somewhere, probably in a database, you can output it like so:

<img width="16" height="16" alt="favicon" src="data:image/gif;base64,BLAHBBLAHGIBBERISHGOESHERE" />

It will display like any other image, but won’t use an additional HTTP request, because the image data is already embedded on the page. This makes it perfect for a list of web sites with icons beside them. Instead of kicking off several HTTP requests for individual tiny images, you just embed them right in the page.

If you’re unfortunate enough that you must support antique versions of Internet Explorer (version seven or prior) then you can’t use Data URIs, as they were not supported. However, all is not lost. You could conceivably adapt the class and have it write the image data to files on the server instead of base64-encoding them.

JavaScript is the Most Popular Language, with Ruby Coming in Second

I was surprised at first, as I had initially assumed the graph was referring to Node.js. Then I facepalmed when I realized that, obviously, most of that is client-side JavaScript.

Ruby is well ahead of Python, which is way down in the #5 slot, below Java and shell scripts. Considering how many times Redditors have tried to tell me that Python has a larger and more active community, despite my previous observations, I found it amusing. (I’m a fairly recent adopter of the Ruby language, which I chose to invest time in learning—over Python—partially because of its large, thriving community of developers.)

PHP, strangely, is even lower on the list than Python. PHP is definitely used more widely than either Ruby or Python, yet its found in comparatively few repositories on GitHub. There are a few points of speculation I take away from this:

• There isn’t too much overlap between Git users and PHP users. One could argue that since a large portion of PHP users are beginner developers, they haven’t picked up source control yet.
• The average PHP developer could be working on closed source projects for one reason or another. Either for work reasons or because they haven’t been bitten by the FOSS bug yet. Or they’re working on a hobby project that’s going to be The Next Big Thing, and they want to keep it closed.
• There’s a difference between active developers creating unique projects, and end users dropping in a pre-made script to run. Sure, PHP definitely has the widest install base. It’s astronomical. But how many developers out there choose to work with it to create open source projects?

What can you do if you don’t like either option?

Jason Mayes hacked together a clever bit of JavaScript that loads up one of the new Twitter widgets, scrapes the content out, and reformats it into nicer unstyled HTML. Then you can style it however you want in your stylesheet.

I’m using this right now on my personal blog, since Twitter’s new widgets don’t look very good when they’re crammed into a narrow sidebar.

git ls-files | xargs wc -l

It uses git ls-files to generate a list of files, which it then passes it to the wc command, which generates word and character count statistics (the “l” flag makes it count lines).

Obviously the line is a bit of a mouthful (handful?). So you can create an easier alias, like “gitlines” and put it in your .bashrc file.

alias gitlines="git ls-files | xargs wc -l"

Amazon, however, uses a more advanced trick, which cleverly solves the problem while enabling the menu to be snappy and delay-free. They track the cursor movement to determine the user’s intent. If it’s moving diagonally toward the submenu, the menu stays open. If it’s moving down the list, the submenu instantly changes. No delays making it seem sluggish, and no irritations from glitchy menus.

Ben Kamens, lead developer at Khan Academy, described this behavior in an interesting blog post and released a jQuery plugin that replicates it.

As it turns out, Apple has been using the same principle for their OS’s menus for a long time. At least since the early 1990s, perhaps earlier, though I’m not familiar enough with Apple’s history to pinpoint exactly when. It’s funny how often the wheel is reinvented…

Breaking down Amazon’s mega dropdown [Ben Kamens]

//Example from http://guzzlephp.org/
$client = new Client($url);
$request = $client->get('/user')->setAuth('user', 'pass');
$response = $request->send();

jQuery also operates in a similar manner, using the same principle. The technique is called method chaining, and is quite useful in cases where a class has many public methods that could be called upon with each others’ output.

If you wanted, the above example could conceivably be rewritten like this:

$client = new Client($url);
$path = $client->get('/user');
$request = $path->setAuth('user', 'pass');
$response = $request->send();

This works because of the way chainable methods are set up. The secret to making it work is that every method must return the entire object. What you’re doing when you chain Method A with Method B ($object->methodA()->methodB) is calling Method B from the object returned by Method A, which it returned from the object that called it to begin with.

Here’s an example class that permits chaining, since there’s no way that code could be more syntactically awkward than that sentence:

class MyClass {

	function __construct() {
		$this->thing = "a";
	}

	function addB() {
		$this->thing .= "b";
		return $this;
	}

	function addC() {
		$this->thing .= "c";
		return $this;
	}

	function __tostring() {
		return $this->thing;
	}

}

$obj = new MyClass();
echo $obj->addB()->addC(); //outputs "abc"
echo $obj->addB(); //outputs "ab"
echo $obj->addC(); //outputs "ac"
echo $obj; //outputs "a"

When you initialize the object, the constructor sets the thing property to be a. Each one of the methods returns $this, which of course is the entire object. So if you call addB(), it adds b to the string and then returns $this. So you can chain the addC() method, which is basically calling it on the $this that addB() returned.

I hope this helps you understand method chaining. It took me a little while to figure it out, and explaining it clearly is about as easy as reading this probably is.

It’s fairly easy to write such a function. The basic idea is to loop around four times—once for each segment—and have a nested loop that runs five times, picking a random character each time. Here’s what I came up with:

function generate_key_string() {

	$tokens = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
	$segment_chars = 5;
	$num_segments = 4;
	$key_string = '';

	for ($i = 0; $i < $num_segments; $i++) {

		$segment = '';

		for ($j = 0; $j < $segment_chars; $j++) {
    			$segment .= $tokens[rand(0, 35)];
		}

		$key_string .= $segment;

		if ($i < ($num_segments - 1)) {
    			$key_string .= '-';
		}

	}

	return $key_string;

}

The $tokens string contains the characters that are valid in the key, so the loop can pick from it. The $segment_chars and $num_segments variables are the number of characters in a segment and the number of segments in the key, respectively. $key_string is an empty string that the loop will add the characters into.

The first for loop runs four times, assuming the desired result is four segments in the key. The inner loop picks a character out of $tokens at random each time it goes around. (PHP strings are also arrays, with the each character having its own numerical offset.) The characters are tacked onto the $segment string.

Then the segment is joined with the $key_string, and a dash character is applied if the loop isn’t on the final segment yet. End result: something like H8OV7-HNTB5-JLLOH-W8FG2.

Now how can you make sure the key is unique when it’s generated?

do {
	$key_string = generate_key_string();
	$result = $db->query("SELECT license_key FROM my_license_key_table WHERE license_key = '$key_string'");
	//$db is a PDO object. If you're not familiar with PDO, check out http://www.webmaster-source.com/2011/08/05/getting-your-feet-wet-with-pdo-and-migrating-old-mysql-code/
} while ($result != false);

You generate a new key string with the function, check to see if it exists in your database, and lather/rinse/repeat until that is no longer the case. Usually you won’t have collisions too often, so it will only need to run once. I’m too lazy to figure out the probability, but considering there are 52,521,875 possible combinations for one 5-character segment…you’re probably not going to run into performance issues anytime soon. And if you do, just add another segment onto your key strings.

There’s a lot of outdated information on the Web that leads new PHP users astray, propagating bad practices and bad code. This must stop. PHP: The Right Way is an easy-to-read, quick reference for PHP best practices, accepted coding standards, and links to authoritative tutorials around the Web.

PHP: The Right Way is a useful guide to how to write PHP that won’t make other developers cringe in horror. It starts off with some tips on how to manage your development environment and then gets to the good part: what not to do. Advice is featured on matters such as database access, password hashing, and other security issues.

The site is an excellent central resource that gives a good overview of things that every beginning PHP developer should be aware of.