Mac OS X Lord of the Rings calendar

A quick, fun tip for Mac and command line users who are fans of The Lord of the Rings;

Mac OS X ships with the BSD command line calendars, which show important dates in history for various interests. Among the likely candidates of holidays, famous birthdays, and music, there’s a little easter egg for all the fantasy nerds out there (and let’s be honest, if you know how to work a terminal, chances are you’ve read a fantasy novel or two). That’s right, important dates in The Lord of the Rings.

Someone must have spend a good amount of time in the appendixes to figure out these fourty-plus events. To see if today is one of those events, just run this command.

bash/zsh

cat /usr/share/calendar/calendar.lotr | grep $(date +"%m/%d")

fish

cat /usr/share/calendar/calendar.lotr | grep (date +"%m/%d")

Or maybe you’d like to setup a function that calls the command for easy use, or to add to your login message? While we’re at it, why don’t we throw in a few more calendars as well.

Update: I added -A 0 to the calendar command, which limits the display to only events that happened on todays date, instead of tomorrow and yesterday, as well.

bash/zsh

today() {
  calendar -A 0 -f /usr/share/calendar/calendar.birthday
  calendar -A 0 -f /usr/share/calendar/calendar.computer
  calendar -A 0 -f /usr/share/calendar/calendar.history
  calendar -A 0 -f /usr/share/calendar/calendar.music
  calendar -A 0 -f /usr/share/calendar/calendar.lotr
}

fish

function today
  calendar -A 0 -f /usr/share/calendar/calendar.birthday
  calendar -A 0 -f /usr/share/calendar/calendar.computer
  calendar -A 0 -f /usr/share/calendar/calendar.history
  calendar -A 0 -f /usr/share/calendar/calendar.music
  calendar -A 0 -f /usr/share/calendar/calendar.lotr
end

My artsy-fartsy css web experiment

The other day I had some time in between work and an improv show I was doing that night, so to pass the time, I created a simple web experiment in CSS.

I call it, Day and Night.

The quick pitch is that you can control the sun with your mouse, and if you bring the sun down behind the hills in the foreground, the scene changes from day to night.

A simple geometric landscape with day on one half and night on the other. The sun is on the day half.

The experiment is written entirely in HTML, CSS, and JavaScript. You can check out the code on GitHub.

The Guts and Gears

The HTML is very simple. There’s a div for the sun, and both hills, and the body serves as the sky.

<body id="sky" class="sky">
  <div id="sun" class="sun"></div>
  <div class="hills-wrapper">
    <div id="hill-background" class="hill-background"></div>
    <div id="hill-foreground" class="hill-foreground"></div>
  </div>
</body>

Next, I stuck the hills to the bottom of the page.

.hills-wrapper {
  position: relative;
}
.hill-background,
.hill-foreground {
  position: fixed;
  width: 100%;
  bottom: 0;
}

I made use of border-radius to make the hills look like, well, hills, instead of color swatches, in addition to the sun, to make it look round instead of dumb.

I wrote a color scheme for day and night, taking advantage of the compass shade mixin as much as looked good. I also made use of adjoining classes to define the night colors (stay tuned for how they’re utilized in a moment), to a) keep things clean and easy to read, and b) to flip a big ol’ bird to IE6 (seriously, why does CSSLint still consider them a bad practice? Let IE6 die!).

/* variables */
$night_sky : #001f3f;
$night_clouds : shade($clouds, 70%);
$night_grass : shade($grass, 70%);
/* classes */
.sky.night { background-color: $night_sky; }
.clouds.night { background-color: $night_clouds; }
.hill-background.night { background-color: darken($night_grass, 3); }
.hill-foreground.night { background-color: $night_grass; }

Moving on the the JavaScript, I first attached the sun div to mouse movement. Hello addEventListener firing on mousemove.

// Mouse move event listener.
document.addEventListener('mousemove', function(e) {
  var top = e.clientY - 100,
  left = e.clientX - 100,
  aboveTheHills;
  // Stick the sun to the cursor.
  sun.setAttribute('style', 'left:' + left + 'px;top:' + top + 'px');

Finally, I needed to detect if the sun was below the hills. The method I came up with isn’t perfect, since the sun can still be peaking out from behind the rounded hills, but it would be way to hard to teach the DOM how to “see” if the sun was visible.

However, my solution does consistently change from day to night, no matter the screen size, with the power of math!

 // Detect night.
aboveTheHills = window.innerHeight - hillBg.clientHeight + (sun.clientHeight / 2);
if (e.clientY > aboveTheHills) {
  // It's night.
  sky.className = 'sky night';
  hillBg.className = 'hill-background night';
  hillFg.className = 'hill-foreground night';
}
else {
  // It's day.
  sky.className = 'sky';
  hillBg.className = 'hill-background';
  hillFg.className = 'hill-foreground';
}

Finish it off by adding a background-color transition to all the effected elements, and you get to be the god of the sun!

Automating Jekyll Post Creation

Jekyll is a tool for static site generation, and it’s what powers Github pages, both of which generate and host this site, respectively.

It’s a fantastic tool for hackers to create simple, and fast (see static site, above) blogs using minimal configuration, the Liquid templating engine for layout, and markdown for posts.

I had previously used Wordpress as my blogging platform of choice, like so many others, and came to Jekyll because of it’s simplicity, it’s speed, and it’s hackability, not to mention that as a Github user, you are entitled to a free Jekyll (or static HTML) site hosted on their blazing fast setup.

One minor pain point for me, is when creating a new post in Jekyll, you need to create a new file in the following convention: title-of-your-post-year-month-day.md. In addition, each post needs some meta data at the top of the markdown file.

Now, this could all be typed out each time without too much time being eaten up, but we’re programmers, damn it, so why do things manually when they can be reasonably automated? To the shell!

#!/bin/bash
# Create a new post for a Jekyll blog.

cd /path/to/your/jekyll/repo/_posts

FILETILE=$(echo "$1" | tr " " "-" | tr '[:upper:]' '[:lower:]')
POSTDATE=$(\date +"%Y-%m-%d")
POSTNAME=$POSTDATE-$FILETILE.md
POSTBODY="---
layout:     post
title:      $1
date:       $POSTDATE $(\date +"%H:%M:%S")
summary:
categories:
---"

cat <<EOF >> $POSTNAME
$POSTBODY
EOF

open "$POSTNAME"

This code is also available as a gist.

To use the script, just download it, modify the path on the cd /path/to/your/jekyll/repo/_posts line to point to your Jekyll installation’s _posts directory, and save the script somewhere in your PATH.

Now, if you saved the file as new_post for example, you can call it like, new_post "My Sick Blog Post", and an appropriately named file with most of the meta data filled out will appear in your _posts directory.

Not only that, but it will immediately launch the default editor for markdown files, so you can start writing straight away!

Enjoy.

Finding shit in a new code base

When a developer moves to a new company, one of the biggest transitions is adapting to the new code base. While most companies will be understanding of newcomers making their way into the rigorous complexities of unknown machine-speak, that slack isn’t limitless, and it’s important to understand the code quickly. It is, after all, the point of the developer’s employment.

However, understanding anything, much less all the working parts of a production level code base, takes time. You get there through practice; “front loading” your brain by reading all the code up front may work for some - and let me be clear, it certainly can’t hurt - but for me, I only get a top-glaze of understanding. Real knowledge comes from doing. That is, working with the code.

But what happens when you are still building your knowledge of the code base, and you have to fix something? Or build a new feature? Or take something out? Thankfully, we work with computers, and we have many great tools at our disposal to quickly find the code we’re looking for. And, as an added bonus, these tools can be used any time, even when you’re not new. If that’s not future proof, I don’t know what is.

Spanfeller Group is a Drupal shop, so some of the examples are specific to that platform. We also use git and mostly run Unix-like platforms (Mac, Linux), and all the examples use the Unix Command Line. If you’re on Windows, I would highly suggest installing cygwin. If the thought of using the command line gives you the creeps, I would humbly ask that you read one or two examples before running for the hills; you may have a change of heart. If not, the hills will always be there.

So without further adieu, let’s dive into some killer ways to find what you’re looking for, fast.

git grep

Anyone who has been even briefly introduced to their inner CLI nerd probably knows about grep, the swiss army knife of searching within multiple text files. With a fairly straightforward invocation, you can search recursively through directories, and get line numbers to boot.

grep -rn [pattern] .

However, it’s 2013, and we’ve made some serious progress as a file-searching society. Enter git grep. As you might think, it only works inside git repositories, but it has many distinct advantages over traditional grep. For starters, it’s faster. A lot faster. Because it uses git’s internal file index, searches are blisteringly speedy. It also does not search inside .git directories, or any patterns matched by .gitignore by default, which really cuts down on junk results. Also by default, git-grep is recursive, so you won’t have to throw in an -r switch, and it comes with color results turned on, so you can more easily see you matches.

So to search your repository for a preprocess function called “mytheme_preprocess_node”, you would run the following:

git grep -n "mytheme_preprocess_node"

The -n switch turns on line numbers for the search matches. To turn them on permanently, run this command from your terminal:

git config --global grep.lineNumber true

Now you can run the git grep command above without the -n switch, and still get line numbers. Some other useful switches are -i, which makes your search case insensitive, -I, which ignores binary files, and -p, which shows the function name of the match. This last example is smart, knowing if the match is the function name, or if the match is inside a function, and prints the information accordingly.

ack

git grep is great, but what if you need more flexibility? Or you need to find something outside of a git repo? You could go back to grep, or you could use ack. Ack is grep, but built for programmers. Like git grep, it is recursive and uses colors by default, and also uses the Perl regex engine, which many people find more powerful and intuitive than the standard grep regex. It also ignores .git, .svn, .hg directories, and binary files, among other unwanted data that would normally be searched. While not quite as fast as git grep, it is still much faster than regular grep.

Installing ack is easy. You can install from CPAN, through Homebrew or MacPorts on the Mac, or through the package manager on major Linux distributions. A caveat for Debian and derivitive distributions (Ubuntu, Mint, etc), the package is called ack-grep, so to keep your fingers typing less, you can rename the package locally with this command:

sudo dpkg-divert --local --divert /usr/bin/ack --rename --add /usr/bin/ack-grep

Using ack is simple:

ack "mytheme_preprocess_node"

The results will be returned in color, separated by file, and with line numbers by default.

Unlike grep or git grep, ack searches work off of a file type white list, only searching the files that appear in that list. Ack ships with pretty sane defaults, including a wide range of programming languages. However, to tell it about Drupal-specific file types, as well as some relatively newer types such as sass (and python, for some reason), you’ll need to do a little configuration. Nothing heavy, just copy the below into a new file, and save it as .ackrc in your home directory.

# Custom types and abbreviatinos.
--type-set=py=.py
--type-set=sass=.sass
--type-set=coffee=.coffee
--type-set=module=.module
--type-set=info=.info
--type-set=inc=.inc

You can follow that pattern for any new file types you may want to add. Just like git grep, you can add the -i switch to ignore case, and -l just prints the file names containing the matches. The one ack option I use the most without question, however, is the ability to limit search by file type. This is incredibly powerful. Frequently, I find myself needing to search for a CSS class I found in the source code, but I don’t want style definitions, just where it’s being printed in the template. No problem! Just use ack to filter out CSS results.

ack --no-css "myclass"

You can also limit your search to a single file type.

ack --type=css "myclass"

Saves me tons of time, all the time.

drush

So far, we’ve focused solely on searching inside files, and while that’s hugely important, it’s hardly the whole story. This is where folks not running Drupal can tune out.

If you do work with Drupal, and aren’t familiar with drush, you owe it to yourself to check it out. Most of it’s extensive feature set is outside the scope of this post, but in very brief summery, drush is a tool to maintain and manipulate your Drupal installation from the command line.

To install on Unix-like systems, you can use pear.

pear channel-discover pear.drush.org
pear install drush/drush

On the Mac, you can also use Homebrew, and it is in many Linux distribution’s package managers. There is also an installation guide for Windows.

Once you have drush installed, you can find valuable information about your Drupal instance with a few keystrokes. Navigate inside your Drupal installation (it doesn’t matter where), and run:

drush st

That will give you a high-level view of your Drupal installation, including Drupal version, database information, and currently enabled theme.

How about if you need to find out what modules are installed? Normally, you would have to sift through the modules page, looking for enabled checkboxes. With drush, you can cut to the chase.

drush pml | ack "Enabled" | less

The pml parameter lists all the modules currently available, and piping it to ack sorts on all that are enabled. The final pipe to less just gives us a nice pager if are results are long. You can also sort on “Disabled” and “Not installed”.

The sites at Spanfeller run a lot of modules, some of which we probably don’t need. To get a count of how many modules are in the code base, I ran the following command:

drush pml | wc -l

Or, for only enabled modules:

drush pml | ack "Enabled" | wc -l

wc stands for “Word Count”, and the -l parameter counts lines. Subtract 4 from the final result, since the drush output adds some lines for formatting and information.

You can also get more detailed information about the modules you have in your code base quickly. Say you wanted to get information about the views module, you would run:

drush pmi views

For the module release information, use:

drush rl views

And for the module release notes, run:

drush rln views

One last convenient drush trick, is using it to connect to your database CLI. Say you’ve figured out all you can from the code, and you need to poke around in the database. Normally, you would less or vi the settings.php file, find the database details, then run your connection command. Something like myusql -umyuser -pmypass mydatabasename, for mysql.

With drush, you could run drush st to save you from manually looking at settings.php, but we can take it a step further.

drush sql-cli

Run that baby, and you will be automatically dropped into a sql command line using the credentials from settings.php. Pretty sweet, right?

Wrap it up

That’s about it. Hopefully these tips and tricks are useful to someone, and all the text-based command line goodness has convinced the GUI inclined of it’s merits. If not, the hills are calling.

Just saw iron man 3. Fun movie. And, spoilers, most expensive fireworks ever.

Original post: <twitter.com/chrisjohn…>

A comparison of Angular, Backbone, CanJS and Ember - Sebastian’s Blog t.co/b18ZaNkGx…

Original post: <twitter.com/chrisjohn…>

Blink - QuirksBlog t.co/dslcngm1m…

Original post: <twitter.com/chrisjohn…>

Chromium Blog: Blink: A rendering engine for the Chromium project t.co/EpFRLQePX…

Original post: <twitter.com/chrisjohn…>

I love Dropbox because It seamlessly integrates into the filesystem of every device and OS I use; it’s essential. t.co/1u6FGAkJ

Original post: <twitter.com/chrisjohn…>

Should you even bother reading an article on SEO if it’s not the top google result?

Original post: <twitter.com/chrisjohn…>

Just posted a gist shortcut for editing gitignores https://gist.github.com/bronzehedwick/3984550 #git #bash #zsh

Original post: <twitter.com/chrisjohn…>

I’m Leaving Facebook

Yep, I’m going to do it. Why?

Well because I don’t feel comfortable with their privacy policies anymore. When I first joined back in the spring of 2004, facebook had a strict sense of user privacy. Here’s a press release circa 2004,

No personal information that you submit to Thefacebook will be available to any user of the Web Site who does not belong to at least one of the groups specified by you in your privacy settings.

Contrast that to their current policy, as of April 2010,

When you connect with an application or website it will have access to General Information about you. The term General Information includes your and your friends’ names, profile pictures, gender, user IDs, connections, and any content shared using the Everyone privacy setting. … The default privacy setting for certain types of information you post on Facebook is set to “everyone.” … Because it takes two to connect, your privacy settings only control who can see the connection on your profile page. If you are uncomfortable with the connection being publicly available, you should consider removing (or not making) the connection.

If this is how facebook feels, I must then choose to not make the connection. To me, their policies are clearly in service of the corporations they sell my information to; none of these “expanded” privacy policies help me. I do believe one of the primary functions of the internet is sharing, and it is a wonderful tool to do so. However I don’t believe that this sharing should, and, as facebook would have us believe, must come at a sacrifice in privacy.

My interests and opinions are now converted directly into objects suitable only for dataminer’s and advertiser’s consumption. You can read more about this policy in this article.

Now, many may argue that privacy settings can still be set on facebook, and while I respect that opinion, I offer this refutation: first, facebook can change your privacy settings at any time without notice. Not only can they, but they have. Repeatedly. This may seem like a minor inconvience, a simple trip to the settings page, but without notice, data can be open for the period that you were unaware of the change. I know it happened to me. It’s also greatly discomforting to me to be a part of a company that treats me and my data in this way.

I recently did a privacy check of my facebook account with a tool called ReclaimPrivacy. It found most of my settings secure, however friends could still “accidentally” share my information with corperations. I was unable to fix this problem. However, even if my facebook page had come back with a clean bill of health, I would still have quit on principle and for fear of the future: I cannot get behinda company that has such disregard for my privacy, and whose track record suggests a continual “big brother” decline. Conjuring Orwell may seem prosaic, but I cannot help but feel it is deserved.

So that’s my reasoning. Facebook is very convienent and uuseful in many ways, not to mention addicting, however it’s also really evil. There, I said it. If you feel the same way, consider quitting facebook too.

As for alternatives, unfortunately there is nothing directly like facebook to switch to that has the same level of popularity. However, the Diaspora Project looks very promising, and there will be a release at the end of the summer. (Thanks to Jack Donovan for introducing me to it!) Also, there’s always twitter, which is very open about being public, so you know exactly what you’re sharing.

Good God, #Drupal7 alpha 4 is amazing! Cannot wait for a stable release so I can upgraden start going out!!!

Original post: <twitter.com/chrisjohn…>

ASCII Star Wars

Folks, I have stumbled upon something so nerdy, so impressive, and so potentially useless that I had to share it.

That thing is ASCII Star Wars. Let me explain. Someone has animated the movie Star Wars Episode IV: A New Hope, entirely with ASCII characters. In other words, with punctuation like @$&()_?&#8221;:}| etc. There is no sound, so all the dialog is shown in the form of subtitles. How cool is that???

Even if you don’t like Star Wars (you should all be ashamed of yourselves), how impressive is it that one guy had THAT much time on his hands to animate an entire movie with text? I am personally not acquainted with the animation methods of arranging text symbols into recognizable shapes and making them move, however I’m sure it must be tedious. I have not seen the whole thing (I intend to one of these days), but I hear that the movie ends when princess Leia is rescued. However, the guy is apparently still working on the thing, so maybe in a couple years we’ll have the whole thing, and if he’s REALLY committed, all the sequels. This might start a new movie-to-ASCII trend; thousands will be working tirelessly to convert high budget, multi-million dollar Hollywood classics into text (imagine Titanic made completely out of $’s). Or maybe it’s a totally isolated incident, and no one else would spend years of their life doing this. It’s a toss up. Predictions aside, if you would actually like to SEE ASCII Star Wars, here’s how:

Windows

  1. Click Start, then Run.
  2. Type telnet. This will open the telnet program, which looks the same as a DOS prompt.
  3. Type open towel.blinkenlights.nl.
  4. Enjoy!

Mac OS X

  1. Open Terminal (you can either search for it, or browse to Applications/Utilities)
  2. Type telnet (this will start a telnet prompt).
  3. Type open towel.blinkenlights.nl
  4. Enjoy!

Linux

  1. Open a Terminal or switch to command line.
  2. Type telnet
  3. Type open towel.blinkenlights.nl

…or you could just click here for the web version, but it’s not as cool.

And there you have it; type it, watch it, love it (or maybe just the first two, I don’t know).

Rejoice in the nerd!