Today I Learned... in Code

WordPress Genesis Framework – Showing a List of Post Titles in Category View

Today I learned… how to customize the “Category” view in WordPress (Genesis framework) to show just the post titles as ordinary links in a list.

I really like the way posts of a category are displayed on DailyBlogTips. Each post gets a bullet in a simple unordered list.

posts_as_list_items — DailyBlogTips’s category view shows just the post titles in an unordered list.

By default, WordPress (and Genesis) gives you two options for displaying posts by category: either their full form one after another (do not want), or a truncated version with the post title and excerpt (also do not want).

A solution in which the titles were rendered as <a hrefs> between <li></li> tags required modifying the loop when on a Category page.

Please note that this code requires a theme built on the Genesis framework, though it should not be hard to modify the hooks to suit your framework if you know your way around a bit.

Copy the contents of functions.php into your child theme’s functions.php file.

Here’s what this is doing, in English:

When the current page is ‘Categories’ (Line 9), don’t do the usual genesis_loop (Line 13). Instead, do this custom loop (Line 14) called mjg_custom_loop.

Over in mjg_custom_loop, create a new unordered list (Line 21) and for each post (Line 22), echo its permalink and its name into a set of <li> </li> tags (Line 24).

The contents of style.css will probably need to be customized to fit your site’s design, but hopefully this is enough to get you through the hardest part which is customizing the loop on the category page.

Here is how it looks on the site:

category_links_only — Titles-only Category view on TowerSecrets.com

Install NPM packages globally without sudo

To be an effective full-stack Javascript developer, you pretty much have to use npm (Node Packaged Modules).

npm is the official package manager for Node.js. Using it allows you to easily install packages such as underscore, express, grunt, gulp, socket.io from the command line. (read more about npm on Wikipedia and npmjs.org).

Many of these packages need to be installed globally to be used, like so:

$ npm install -g grunt-cli

The -g denotes a global install.

But, in some environments, attempting to install globally without including sudo might give you this sort of error message:

npm ERR! Error: EACCES, open '/Users/YourNameHere/.npm/-/all/.cache.json'
 npm ERR! { [Error: EACCES, open '/Users/YourNameHere/.npm/-/all/.cache.json']
 npm ERR! errno: 3,
 npm ERR! code: 'EACCES',
 npm ERR! path: '/Users/YourNameHere/.npm/-/all/.cache.json' }
 npm ERR!
 npm ERR! Please try running this command again as root/Administrator.

Should you just do what the error message says and run this command as root using sudo? The short answer is: NO! Packages can run their own scripts, which makes installing them with sudo about as safe as shaving with a blowtorch.

There are many ways to solve this problem, but the easiest I’ve found is to simply change what folder npm installs packages into. Just use this terminal command:

npm config set prefix ~/npm

This tells npm to install packages into your home directory in an “npm” subfolder. It will automatically create this new subfolder the first time you globally install a package.

But we’re not done yet! You also need to modify your $PATH to include this new folder. To do this, open the config file of your shell in your favorite text editor. This is most likely “.bashrc” in your home directory, or “.zshrc” if you use Z shell. Once you have the file open, search for a line that looks like this:

export PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games"

At the end of this line, add:

 ":$HOME/npm/bin".

After I made the change, my path line looked like this:

export PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:$HOME/npm/bin"

The $HOME part of that just tells the shell to look in your home directory for a folder called “npm”, and then a folder inside that called “bin”. Once you’ve done these two things, you should now be able to install packages globally in npm without using sudo. Enjoy the tremendous feeling of freedom this brings.

Book Review: You Don’t Know JS – Scope & Closures by Kyle Simpson

scope_and_closures_book_JS_kyle_simpson — Scope & Closures by Kyle Simpson

If you’re an intermediate JavaScripter who’s tired of weighty tomes and arcane examples, You Don’t Know JS – Scope & Closures by Kyle Simpson is right up your alley. This smart book takes a laser-focused look at scope and closures in JavaScript.

My rating: 5/5

Who it’s for: Intermediate JavaScripters. If you’ve heard of scope, closures, JS compiling theory, but aren’t sure you really understand them as well as you should, then this book is for you.

Review

Let me preface this review by saying I’m not a big fan of coding books.

I have been frustrated by out-of-date books, untested code, and overly complex explanations from coding wizards who have long since forgotten what it’s like to be a newbie. I’ve always been more of an in-the-trenches doer than an ivory tower studier, anyway.

So, I wasn’t expecting to like Kyle Simpson’s You Don’t Know JS: Scope & Closures book so much. A programmer friend insisted I read it, and 87 pages of golden JS secrets and epiphanies later, I’m glad I did.

This book is…

Brief. No long-winded explanations or storytelling.
Focused. One topic, explored deeply FTW.
Short examples, usually just a handful of lines total.
Easy-to-follow examples with good style choices, such as verbose variable names and comments listing the expected result.
Concepts are explained and re-explained before moving on. This is complicated stuff for us intermediate JavaScripters, and he takes the time to attack topics from multiple angles.

Highlights

You Don’t Know JS – Scope & Closures covers:

variables: declaring, setting, and updating
scope
lexing
hoisting
closures
how the JavaScript compiler reads code
tokenizing

This book deserves credit for explaining the compiler’s process of operations in a way that actually clicked for me.

I also loved the short examples. They were easy to follow, none of that 30+ lines of code spread across two pages stuff you see in other books.

The book’s small size is a plus. I took it with me on a day trip – hooray for books that aren’t the size of my laptop.

Criticisms?

The only thing I might say is that some examples in the book are like, “Yeah, duh, don’t do it that way” but to be honest, I probably had to be told some of these “duh” things myself when I was starting out a few years ago.

Overall, I’d give this book an A+. It fits into the vast gulf between “total n00b” and “JavaScript Jedi”.

Check it out on Amazon.com for the current price (as well as any coupons and deals that might be running).

Note to readers: TILCode is an Amazon Affiliate. Purchases made through some links on this site help support the site at no extra cost to you. Read the full disclosure here.

Read this: Airbnb’s Excellent JavaScript style guide

Today I learned… that Airbnb has a fantastic JavaScript “style guide” available for free on github. The guide is light on long-winded explanations and big on DO and DON’T examples. Check it out, it’s a 15 min read at most.

Here are just a few of the things I learned from it:

Declaring multiple variables

A long list of variable declarations should be done with the unassigned variables last, and all declarations can share one use of var.

// multiple var declarations like so:
var items = getItems(),
    daytime = true,
    length,
    i;

I’m definitely guilty of var var var var var… but I’m not sure how I feel about this particular style. I like the clarity and editability of beginning each line with var, but for declaring lots of like items, I can see the usefulness of this style.

Shortcuts for the win

Instead of writing “if this thing is greater than zero”, you can just write “if this thing”.

Here’s an example:

// bad
if (cars.length > 0) {
  // ... code here
}

// good
if (cars.length) {
  // ... code here
}

Easy enough.

Comment with good style

Oops, I’ve definitely been getting this one wrong. Comments belong on their own line, not off to the right of the line the comment explains.

// bad
var active = true;  // is current tab

// good
// is current tab
var active = true;

Guilty. I’ll quit doing this, as tempting as it is for the sake of shorter files…

Saving a reference to “this”

Oops, here’s another mea culpa. I’ve been saving reference to “this” as “self”, but the style guide suggests _this as a better alternative.

I’m inclined to agree – I found “self” confusing the first time I encountered it, and its relation to “this” wasn’t immediately apparent.

// bad
function() {
  var self = this;
  return function() {
    console.log(self);
  };
}

// bad
function() {
  var that = this;
  return function() {
    console.log(that);
  };
}

// good
function() {
  var _this = this;
  return function() {
    console.log(_this);
  };
}

Those are just a handful of the discoveries I made while exploring this guide.

Be sure to check it out yourself and see what you could be doing better, and don’t miss the giant list of resources at the bottom of the page!

Declaring a variable as a number before adding to it with +=

Today I learned… that you have to explicitly declare a number variable as a number before you can increment it with += in JavaScript.

This is probably a boneheaded newbie mistake, but it had me stumped for several minutes. I declared a variable, var total; and then tried to add to it by writing total +=5. And then I scratched my head as my code returned NaN.

var total;
 
total += 5;
console.log(total); //prints "NaN"

This happens because “undefined” and zero are not equivalent in JavaScript!

Even though JavaScript isn’t “strongly typed”, you can’t add numbers to something that isn’t a number yet.

Declaring total by setting it to an actual number, ie: var total = 0, fixed my “NaN” problem.

var total = 0;
 
total += 5;
console.log(total); //prints a 5

Add a screenshot to your Github repo README.md

Today I learned… that you can add images to a Github repository README.md file! I’m now drunk with power and the desire to decorate all my repos with screenshots.

In README.md:

![alt text](screenshots/filename.png "Description goes here")

This approach (with a relative filepath to screenshots/filename.png) assumes your screenshot is part of your repo. For student projects, personal work, and other small stuff, including screenshots in your repo is no biggie.

If you don’t want the screenshot in your repo, you can upload it somewhere else and link to it directly like so:

![alt tag](http://domain.com/path/to/img.png "Description goes here")

.png is the preferred file format.

To take a screenshot on a Mac, press COMMAND + SHIFT + 4 at the same time. By default, the screenshot is saved as a .png to your desktop.

Reasons why repo screenshots rule:

screenshots illustrate what the project does
they help distinguish your repos from one another
they can help you remember projects you worked on a while ago
they show off your ability to document your work*
save you from having to clone in a project and start up a server to remember what it looked like
make a pretty portfolio of your work

* Documenting your stuff helps future-you and everyone else you might ever work with (including maybe your manager or boss). The people who do well in their careers are often those who take the time to record what they did, how they did it, why they did it that way, and share it with others. The ability to document one’s work is something I always looked for when making a hiring decision.

Screenshot action shot:

I don’t expect to win any graphic design awards here, but I can surf my own repos and remember what I did at a glance, which is pretty sweet.

Quickly add lines to .gitignore using echo in the command line

Today I learned… that you don’t have to open .gitignore in your editor, add a line(s) to it, save it, and close it. You can do all that in one step from the command line using echo!

Here’s a preview:

$ echo '.DS_Store' >> .gitignore

How it works

Here’s a common scenario. You do git status on your working folder and discover git wants to add some file you don’t want added to your remote repository, like the pesky .DS_Store file.

Thanks, but no thanks, git. I don't want that .DS_Store file in my git repository. — Thanks, but no thanks, git. I don’t want that .DS_Store file in my git repository.

If your git project doesn’t already have a .gitignore file, create one in one step by typing this while in your project’s root directory:

$ touch .gitignore

From here, you could open that .gitignore file in an editor and add lines to it, save it and close it, but that’s rather cumbersome if all you need to add is one or a few lines.

Here’s a faster way, using “echo” to push some new data into the file.

$ echo '.DS_Store' >> .gitignore

The double >> is important. If you type just one >, you’ll overwrite the existing contents. Using >> appends your echo string to the end.

For a sanity check, open up .gitignore and you’ll see that .DS_Store has been added.

Once you’re more accustomed to using .gitignore you’ll probably come up with a “boilerplate” .gitignore to copy and paste into all your projects, but you’ll probably never reach a point where you aren’t occasionally surprised by an unwanted file showing up in your git status.

Mkdir and cd into it in one line

Today I learned… that you can make a new directory and cd into it on just one line.

$ mkdir dirname && cd $_

It’s the little things.

Automate Express server restarts with Nodemon

Today I learned… that you don’t have to navigate to Terminal, press CTRL + C to stop the server, and re-enter node server.js to start up the express server again in order to see your latest work in the browser.

There’s a better way: get Nodemon and automate this repetitive process!

Nodemon will watch the files in the directory you run it in and restart your server automatically when it detects a change.

To install Nodemon:

$ npm -g install nodemon

To get Nodemon running:

$ nodemon server.js

Leave that Terminal window open and let Nodemon work its magic.