No, not here. There!

After much consideration, I have determined I'm not a real blogger.  I don't want to play around here any longer.  From now on, I'm going to write Markdown and push it to Github!

https://reergymerej.github.io  <- That's where you want to go.

Writing a Code Blog on Blogger

Here are some thoughts on writing a code blog on Blogger.

1. It's a WYSIWYG.  Gross.  I want to write in my editor, where I spend the rest of my waking hours.
2. Markdown is faster.
3. I want lots of formatted code snippets.
4. We'll probably want to be able to reference terminal i/o, but have it collapsible so it doesn't take over the entire post.

This post explains some of the convenience of using Blogger, but also makes me think I should move to Github pages or something else.

1, 2, & 3 - If I write in Vim in Markdown, I can generate it and the copy the source into here... but God help me if I ever want to edit it after saving.  I could create a repo with the Markdown and regenerate it, I guess.

4 - I dunno.  I'm too busy daydreaming about Github pages.  Let's check them out.

Hello!

Guess what?  I've decided to write some stuff... as soon as I can find a replacement typewriter ribbon.

Angular JS - Visual Representation of Custom Directive with Isolated Scope

With a title this long, I'm not even going to start trying to describe this with words.  Colors and lines should do.

Using the Angular Seed Project

OK, you did a few Angular tutorials and now you're ready to really start tinkering. You know there's a seed project to help you get started, but how are you supposed to use it? I'm glad you asked.

The seed project is just a bootstrapper to get you set up with a basic directory structure and dependencies. To use it, just clone it from Github, change what the repo points to, and you're ready to rock.

Step 0 - Prerequisites

You already have a Github account, some basic familiarity with the terminal, and node.js and npm installed.

Step 1 - Create Your Repo in Github.

For my example, I'm using https://github.com/reergymerej/ang-tut-1.git.

Step 2 - Clone the Angular Seed Project.

git clone https://reergymerej@github.com/angular/angular-seed.git

Step 3 - Rename the Directory and Change the Master.

mv ./angular-seed ./ang-tut-1 cd ./ang-tut-1 git remote set-url origin https://reergymerej@github.com/reergymerej/ang-tut-1.git git push -u origin master

Step 4 - Install Node Packages

npm install

Step 5 - Verify

./scripts/web-server.js

Did it work?

node.js - Where to Start

Are you curious about node.js, but don't know where to start? Many of the resources out there provide too much detail too soon, which can be confusing. It's like learning how to change spark plugs when you just want to take a test drive.

If you want a simple "Hello, world." example, here you go.  These steps will get you up and running without superfluous explanation.

Prerequisite - Install node.js

There are a variety of ways to install node and they're all self-explanatory. If you haven't finished this step already, come back when you're done.  To test if you're set up, type this in your terminal:

node -v

If you get a version returned, you're ready.

Step 1 - Create a file named server.js.

This isn't Apache or IIS, so create this file wherever you want. Wherever it is, that will be your server's root.

Step 2 - Copy the code below into server.js.

Each line has a comment to describe what it's doing.

Step 3 - Start your app.

In the terminal, navigate the directory containing server.js. Type the following to start your new app:

node server.js

You will see the message indicating the server is ready to handle responses.

Step 4 - Hello, world.

In your browser, navigate to http://localhost:3000. If you're too nerdy to use a browser, use cURL in another terminal. Voilà, you're running the most spartan node.js server ever.

Step 5 - Again, with feeling.

Now you can move on with your life if you only wanted a cursory introduction. Alternatively, if you want to start playing around, stop the server (ctrl+c twice in the terminal), edit server.js, and start it again. The example code is not ideal by any stretch of the imagination, just meant to be easy and clear.

When you're ready to really start digging in, check out this book, which is the friendliest intro I've found. You can also jump right into the api if you're the guy who was using cURL earlier.

SlickGrid - Where to Start

I'm no documentation specialist or blogger, but someone's got to put this out. This is by no means a  SlickGrid tutorial.  It's more of a completely incomprehensive guide on how to get started messing around with it.

Include the following in the head of your html

CSS

SlickGrid/slick.grid.css - at a minimum so your columns don't overlap
SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css - to make it pretty
SlickGrid/examples/examples.css - to make it even prettier

JavaScript

SlickGrid/lib/jquery-1.7.min.js - this is a jQuery plugin afterall
SlickGrid/lib/jquery.event.drag-2.0.min.js - dependency of Grid class
SlickGrid/slick.core.js - core SlickGrid goodness
SlickGrid/slick.grid.js - Grid class

Create a div to hold the grid.

Make sure you include an ID and height. If there is no height, SlickGrid can't determine how to display the rows and you'll end up seeing nothing.

<div id="grid" style="width:600px; height:200px;"></div>

Define the grid's columns.

var columns = [
    {id: "column_1_id", name: "Column 1 Label", field: "column_1"},
    {id: "column_2_id", name: "Column 2 Label", field: "column_2"},
    {id: "column_3_id", name: "Column 3 Label", field: "column_3"},
    {id: "column_4_id", name: "Column 4 Label", field: "column_4"},
    {id: "column_5_id", name: "Column 5 Label", field: "column_5"},
];

Gather the data for the grid as an array. Just spoof it for now.

var data = [], i = 50;
while(i--){
    data[i] = {
        column_1: 'column 1, row ' + i,
        column_2: 'column 2, row ' + i,
        column_3: 'column 3, row ' + i,
        column_4: 'column 4, row ' + i,
        column_5: 'column 5, row ' + i
    };
};

Set the grid's options.

var options = {
    enableColumnReorder: false,
    enableGridNavigation: false
};

When the DOM's ready, instantiate a new SlickGrid.

Since you're obviously using jQuery, you can just call all this as a .ready() handler.

var grid = new Slick.Grid('#grid', data, columns, options);

That's it!

Now open up the source code and start reading.