In the previous blog entry I went thru the steps needed to get a Node.js site up and running with Express.js. Next I’m going to leap right into getting some mash ups going with Coder Wall. I’m currently waiting on Geekli.st to get me some beta API access, when that happens I’ll be adding some of the geeky list to the portfolio. For now… on with the mash up.
Folder Structure
First things first, get the pertinent pieces you need from proudify.js (check it out here: https://github.com/icebreaker/proudify and on Mihail’s site here: http://proudify.me). My folder structure looked like this once I had pulled in the js & css files I needed. You may notice I have three image files too, I picked them up via http://iconfinder.com, but you can snag my github and they’re included in that.
If you just want to clone the code, I do have it available on github @ https://github.com/Adron/codingwall.
. . . . Next I setup the index.jade like this:
h1= title
div.splitter
div.left
div.navAlpha
p Welcome to #{title}'s Portfolio Site
a(href='http://www.linkedin/in/adron’)
| <img alt="Linkedin" src="images/linkedin.png" style="border: 0px" />
br
a(href='http://twitter.com/adron’)
| <img alt="Twitter @adron" src="images/twitter.png" style="border: 0px" />
br
a(href='http://www.facebook.com/adron’)
| <img alt="Facebook" src="images/facebook.png" style="border: 0px" />
div.navBeta
p #{title}'s Other Web Presence
ul
li
a(href='http://compositecode.com’)
| Composite Code
li
a(href='https://github.com/Adron’)
| Github
li
a(href='http://www.linkedin.com/in/adron’)
| LinkedIn
li
a(href='http://www.facebook.com/adron’)
| Facebook
li
a(href='http://twitter.com/adron’)
| Twitter
div.right
div.crazy
p the content
After I setup the index.jade I changed the layout.jade to have the following code.
doctype 5
html(lang="en")
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/stylesheets/site.css')
link(rel='stylesheet', href='/stylesheets/splitter.css')
link(rel='stylesheet', href='/stylesheets/proudify.min.css')
script(src='/javascripts/jquery-1.4.4.min.js')
script(src='/javascripts/jquery-ui-1.8.7.custom.min.js')
script(src='/javascripts/jquery-proudify.min.js')
body!= body
Those are basically all the changes I made for the first push to github. Run the standard app:
node app.js
Once it runs you should see the basic display of information. The proudify.js pulls the CoderWall badges from the their site.
Coding Wall
At this time I still haven’t had time to weave in the Geekli.st yet, but will work toward doing that in the future and making a post.
I’ll be adding other features to this, as an example, around database support, connecting to services and a host of other functionalities. So stay tuned to this blog and be sure to follow the github repository for the latest bits.
Until then, enjoy.
2. I’m a polyglot dev. .NET kind of burned me out a few years back and I dedicated to learning as many other frameworks, languages, and tech stacks that I could. I’ve never been happier with the variety these days. I’ll admit though I still love to use all those years of experience I have with .NET. Indeed, I have a little soft spot in my heart for C#. Tier 3, along with the Iron Foundry Project, has given me the opportunity to work across languages and stacks including Node.js, Ruby, Objective-C and more.
3. I like to build things, advocate for those things and what they can do for you, for dev teams, and in the end what we developers can build with them. Sometimes this might mean I do it myself, sometimes it means coordinating and leading a team (or as I often say of leads, “serving” the team). Right now I’m getting to do a little bit of both and it is indeed fun and really exciting! This brings me to the answer.
