JoshFinnie.com

Updated to Twitter Bootstrap 2.0

2012-02-10T00:00:00-05:00

Twitter Bootstrap

I have to say that I have never been happier as a web developer when Twitter Bootstrap was first announced. It gave me a nice design framework that I could use to get my ideas out into the world faster. I wasn’t worried about how my website was going to look; I could focus on how it was functioning.

There wasn’t a lot that I could have faulted the first implementation of Twitter Bootstrap. I used it on a few projects without a hitch, but a new version is out so I though I’d give it a go.

Luckily Twitter provided an excellent upgrading reference for people going to version 2.0. The one major thing you need to worry about (if you have a pretty standard installation of Twitter Bootstrap) is the change to the top navigation bar:

Navbar (formerly topbar)
Base class changed from .topbar to .navbar
Now supports static position (default behavior, not fixed) and fixed to the top of viewport via .navbar-fixed-top (previously only supported fixed)
Added vertical dividers to top-level nav
Improved support for inline forms in the navbar, which now require .navbar-form to properly scope styles to only the intended forms.
Navbar search form now requires use of the .navbar-search class and its input the use of .search-query. To position the search form, you must use .pull-left or .pull-right.
Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. See navbar docs for how to utilize.

Most important, .topbar was changed to .navbar, meaning you want to take some time to change the top bar in your current code. I also enjoy the expanded documentation of the navbar in general.

For a simple blog like this, I have to say that the upgrade to Twitter Bootstrap went without a hitch. I am sure there will be some more tweaking here and there as I progress using version 2.0, but I would recommend to anyone who uses Twitter Bootstrap to take the time and upgrade!

Minecraft - Skyblock Part 1

2011-11-14T00:00:00-05:00

I said that I wanted to start to post some of my screencasts. Here is a fun one; it is my attempt at a survival adventure map in Minecraft.

Flask Tutorial - Part 1

2011-11-01T00:00:00-04:00

Review

Yesterday’s post was a quick and dirty overview of what Flask is and what it can do for us. Today we are going to expand on our simple Flask program and start to create a working website. So in review, below is what we had for the first Flask application:

from flask import Flask
 app = Flask(__name__)
 	
@app.route("/")
def hello():
    return "Hello World!"
 
if __name__ == "__main__":
    app.run()

Making a Stronger App

The above app, if run, should get you a very simple “Hello World!” application which is the basis of understanding any new language or framework. But it doesn’t do us much good. Luckily for us, Flask is very easy to extend using a wide array of extentions already built for flask. To start off, we want to install two powerful extentions to help with our new website. These two extentions are:

These extensions give you a very strong database ORM and a very easy form developer. Let’s install these two extensions:

$ easy_install Flask-SQAlchemy
$ easy_install Flask-WTF

Building a Stronger App

Now that we have two very important extensions installed, let’s take a look at what we are going to do to our simple “Hello World!” app to include these extensions:

from flask import Flask
from flaskext.sqlalchemy import *
from flaskext.wtf import *

app = Flask(__name__)
db = SQLAlchemy(app)
 	
@app.route("/")
def hello():
    return "Hello World!"
 
if __name__ == "__main__":
    app.run()

Note that I am adding everything that comes with these extensions and will be narrowing down the scope once we get more involved in the app building process. Also, note that we had to initialize the SQLAlchemy extension.

With these two extentions installed and added to our app, let’s go ahead and use them. We are first going to make a simple User model and Sign Up form. The code will look like this:

from flask import Flask
from flaskext.sqlalchemy import SQLAlchemy
from flaskext.wtf import Form, TextField, PasswordField

app = Flask(__name__)
db = SQLAlchemy(app)

class User(db.Model):
    __tablename__ = 'users'
    uid = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(60), unique=True)

class signup(Form):
    username = TextField("Username")
    password = PasswordField("Password")
 	
@app.route("/")
def hello():
    return "Hello World!"
 
if __name__ == "__main__":
    app.run()

With the new User model and Sign Up form, you can see how powerful these two extentions are. And you can see how they make light work of major parts of your web app. Please read the APIs for both of these extentions if you are not clear as to what I did above. There was a lot changed from the first “Hello World!” app to where we stand now.

In Review

In review, we showed how to install Flask extentions and how to incorporate them into your web application. For some practice, extend the User model to something that is worthwhile for a real-world web app. There are some fields that should be added to make this so. Also, for extra credit, do the same to the Sign Up form for next time.

Flask Tutorial - The Beginning

2011-10-31T00:00:00-04:00

What’s to come.

Hello. And welcome back. I am expecting to write a few blog posts about the journy I am about to take. I have gotten it in my head that it would be a good idea to work through a Python clone of Hacker News. I wrote about the idea of news.GISQuery here and I thought it would be a great idea to write about my experiences as I build the site.

I am not sure how this is going to go or even how well it is going to work, but I thought that we can all learn something together. I am in the learning profession and feel that learning python while showing people my growing pains will be a great opportunity. Let people learn through my learning process.

What’s Done is Done

I am not going to lie. I have some experience with both Python and the Flask micro-framework, so I am not starting this from scratch. I have build BeerLedge using Flask, and have been toying with it a lot lately. However, I want to do a lot of things with this project that will push the boundry of my knowledge. This won’t be so much a website (though that is the ultimate goal), but this will also be a framework for people who want to create such websites using Flask.

So, what does this mean? It means that I have created a project on GitHub called Flacker-News, and it is this project that we are going to work on throughout these blog posts. I am hoping that I could use the power of GitHub for good and have more people follow along with the progress of Flacker-News.

Preperation

If you want to follow along with these tutorials, please get comfortable with the Flask micro-framework. The documentation is great and should be able to get you up to speed. Flask is quite easy to get up and running, and I have fallen in love with it! Below is all you need to get a Flask website up and running.

$ easy_install Flask
$ python hello.py
 * Running on http://localhost:5000/

from flask import Flask
 app = Flask(__name__)
 	
@app.route("/")
def hello():
    return "Hello World!"
 
if __name__ == "__main__":
    app.run()

So I hope that this series will be fruitful for both you and me!

Quick UX No-No

2011-10-13T00:00:00-04:00

Why?

I recently went to Geico to look for some car insurance. After finding an acceptable rate, I proceeded to sign in. The signup process was going smoothly, until I checked if my username was available. Being my last name combined with the last name of my fiancee, I had some confidence that I would be okay. I like to check for availability when it allows me, so that I don’t run into any issues down the road. Well, this is what I saw after checking the availability of the username:

A gigantic red box! How is my username taken? I was in shock…

That is until I actually read the message within the gigantic red box. The username is available for my use. Why mark that message in red? I associate red with an error and my head automatically assumed that the username was bad.

I find it amazing how quickly our brains can detect color and associate it with a meaning long before we have the time to read the message sent. I highly recommend using red highlighting for errors or things of important. Success should never be highlighted red, it doesn’t work with our brain’s reception of color.

Which colors?

I use Twitter’s Bootstrap to help style this site, and I love it. The nice thing about this pre-defined stylesheet is that it gives you the standard acceptable coloring for all sorts of notifications:

What does everyone thing? Does using standard highlighting for notifications really matter? Does Twitter have them right in Bootstrap? I would love to hear your comments below.

A Coder's Lifestyle

2011-10-04T00:00:00-04:00

Background

While studying for my undergraduate degree, I briefly dabbled in programming as amajor. I first started in the Computer Science department, but soon felt out-of-place. The introduction class was basically a “Convert this C++, which you should already know, into Java.” I felt entirely lost. Luckily, moving tothe Computer Engineering department gave me the base I needed.

Jump forward 5 years of undergraduate education, and I graduated with a bachelors in Economics. I don’t know why, maybe it was the easy way out, but I never felt like I could succeed as an computer scientist.

Today

Today, I work for a large insurance company as a trainer; almost as removed from a programmer as you can get. But I still feel the urge to create things through code. That is why I have been working on so many pet projects; I just don’t have enough hours in the day.

How to Succeed

I am not sure I know the answer to the question, “how to succeed?” And more importantly, I really need to sit down and define what succeed is, but each night I learn another thing about a programming language that I didn’t know before and hopefully soon enough I will be someone who can hold their weight on sites like StackOverflow.

Here are my tips that I have learned so far:

Don’t over extend yourself This is especially true if you have a full-time job that is not programming related. I find that I get some grandious idea while at work, get home and bang it out. All this does is lead to frustration when it doesn’t work and it’s already 1AM. Start slow.
Stick to one technology at a time. Everywhere you read there is going to be some up-and-coming technology that everyone wants to use. When you are not a full-time programmer, there is no time for you to really experiment with new technologies. You need to make sure your footing is solid before moving forward.
Finish something. It is an amazing feeling when you have finished a program to the point that it works. It is a great boost that you can use to get more excited about programming your next project. No matter how small it is, finish something.

I am sure I will have more thoughts as I get back into bloggin, but I thought this would be a good step in the right direction. Let me know what you think.

Life Changes and Another Start with Jekyll

2011-09-29T00:00:00-04:00

Hello, again.

It has seemed that I have forgone posting here for quite some time. I never really got the hang of it, and the design never seemed right. This is not an excuse, but more of an explanation of what has been happening in my life.

Most recently, I have finally made the move out of Connecticut and now reside in Washington, DC. I have wanted to make the move out of Connecticut for some time; I yearned for a big city lifestyle. And with my fiancee finally graduating from her master’s program, I thought this would be a great time to make the jump.

It was not easy, however! There seemed to be immeasurable amount of hurdles that we had to jump. Finding an apartment in the DC area was almost impossible; our one remaining car (We sold my VW Rabbit to help fund the move) was hit and totaled; Budget Rental cancelled our truck last minute. However, this has been my first week here (I was lucky enough to have the ability to work from home at my current job), and I could not be happier.

With this move, I have revitalized my energies towards all things internet. I have a growing desire to finish all my outstanding projects and it starts here…

What’s new?

I have done very little here in terms of coding, but with the release of Bootstrap by Twitter, I feel as though I can throw something up that looks half-way decent without any trouble at all. The iteration of CSS that I had on this site before was terrible, and it never allowed me to be proud of what I was doing here (or similarly what I was doing over at Geohackr). With Bootstrap, I have something nice enough to get by, where now I can work solely on content. I am still using Jekyll, but I have added a rake deploy option that allows me to put up new posts super-fast with minimal effort.

On the horizon

I have a lot going through in my head right now as to what I want to do moving forward. Below is a short list of what I have on my plate and what I have planned for each of them.

BeerLedge: Currently in the process of switching out the CSS for jQuery Mobile to make it more user friendly on most smartphones. Also looking to add some extra features to make it stand above the other mobile beer-checkin sites.
AnonTweet.me: Currently a pet project, it has some success from people using it once and a while. Have been re-writing it using the Flask micro-framework to learn the python wrapper of the Twitter API.
140Pl.us: With the removal of Deck.ly from TweetDeck, I have some renewed interest in this idea. There is a lot of work to get this up and running with any success, but it should be an interesting challenge.
GeoHackr: This blog ran into the same issue I ran into with this one. I think with Bootstrap, I should be able to get it up and running with some success. Also, I NEED to finish my thesis so I should get a renewed interest in the topic anyways.
GISQuery: Now that OSQA is maturing with some regularity, I feel that bringing GISQuery up and running will be a lot easier. I rewrote most of the code in Flask, but never made it go live. I am thinking of setting up the code on GitHub as Flask-QandA and going from there. This website has a lot of work to compete with StackExchange, but I think personalizing it beyond what StackExchange will be willing to do is where I can win this battle.
news.GISQuery: This is a new site I have been working on that allows people to submit GIS stories in the fashion of Hacker News. I am very excited about this one, and with the new developments in Flask (mostly the new Admin extension), the progress of this site should rapidly pick up.
DotFiler: DotFiler is suppose to be a website where people can upload their dotfiles and retrieve them when needed. I was hoping to add a social flare to the site letting people rate/comment/subscribe to dotfiles, but this idea never got off the ground. Maybe one day…
BiblioQuick: BiblioQuick was something that I thought of while working on my master’s thesis. I though that it would be great if there was a place that you can go and see all the bibliographies of papers on a topic and have people rate and rank each bibliography. Much like DotFiler, this never got off the ground, but as I said above I am again getting into the swing of the master’s thesis and ideas for this site my come fast and furious.

In Closing

Thanks for reading my ramblings above. Come back here as I continue my promise of writing more. I also plan on making some videos that I will be posting here. I love Minecraft and would love to start a “Let’s Play.” There is also the idea of creating a video tutorial of Flask as I work my way through building the websites mentioned above. Who knows… Thanks again, and come back for more regularly-scheduled posts!

Banning IE6

2010-09-15T00:00:00-04:00

I really don’t understand why people have decided that I am not allowed to see their website. Sure, I understand that IE6 is overly out-of-date, but there has to be a reason that I am running it. For example, my office has not upgraded yet; so because of that I am not allowed to see your site?

Given the fact that IE in general has a lot of little hacks required to make a website look good, I come to your websites with an understanding that my view of your website might not be ideal. I even understand that I might not have all the functionality that I should given how IE reacts to javascript and your beautiful ajax-y stuff. But I like content. I don’t run javascript; I don’t run flash. But you don’t have a problem with that. Just that I run IE6.

Stop with this trend of blocking IE6 and allow people, who most likely understand that they are running an out-of-date browser but can’t do anything about it, to read the content that you worked so hard to write! Please?

Public Transportation in Connecticut

2010-02-24T00:00:00-05:00

I have lived in Hartford almost seven months now and every once and a while I get an itching to go out and try public transportation. I see them everywhere, Connecticut’s DOT buses and all their blueness. But their usefulness escapes me. Granted I live in the major city and work in a suburb, but one would think that I would be able to get a bus from relatively close to my apartment complex and be able to have it drop me off at work. (And of course the reason why I think this is because I have a bus stop at the front door of my place of employement.) However, this is not the case. For some reason when Connecticut was determining the bus routes, they felt it was common knowledge that only people north of the city center would want to work in the northern part of the state; being closer to West Hartford than Bloomfield, I need not apply.

This is silly. Why can’t I catch one bus from my neighborhood of Parkville and get to Windsor? Why do I have to take a bus to the city center, and then get on another bus meant for people who live north of the center? To add insult to injury, I have to make my way down to "CCSU"http://www.ccsu.edu every once and a while and forget trying to get from Windsor to New Britain in any reasonable timeframe.

I have to say that with the cold weather around us, my car coming to its 60,000 mile checkup, and the plethora of buses I pass on my commute to and from work, I should be able to take said buses! I don’t know what can be done about the current bus routes in Connecticut. I once tried to solve this issue at UConn as an undergraduate, but fell short. I think trying to take on a system as big as the one in Connecticut might be a lost cause.

And there is some good news on the public transportation front. There is a proposal for a light rail line to be installed from New Haven to Springfield (which will include a stop in both Hartford and New Britain. And there is a bus line that is being built especially for the New Britain to Hartford commute. Obviously these two projects haven’t even started yet, so it might be a loss cause on my part, but I am happy to see Connecticut thinking about commuters who want to use the public transportation that is offered. I just wish I could…

Transfering Domains

2010-02-11T00:00:00-05:00

So it is official. I have finally moved all my domains away from my old webhosting provider to GoDaddy. I am not sure why I kept all my domains with my webhosting company, but it made a terror when I started this process of switching to "WebFaction"http://webfaction.com/.

If anyone is starting a web development company or even just has a few websites, I highly recommend keeping your domains and hosting seperate! When you make the switch, like I did, from one hosting company to another it will make the whole process much easier.

As of right now, I still don’t have all my sites up-and-running, but slowly and surely they are coming back online on WebFaction. Good thing I didn’t have any real important websites that this downtime would effect. I am looking at major redesigns of the two sites I care about: "140Plus"http://140pl.us/ and GeoHackr.

If and when I switch next time all I have to do is change the DNS and poof!

Converting GeoHackr from WordPress to Jekyll

2010-02-02T00:00:00-05:00

For the past couple of months I have been working on a Geography based blog called "GeoHackr"http://geohackr.com/. This blog is currently run off a WordPress blog hosted at "Bluehost"http://bluehost.com/, and, now that I have found this wonderful blogging program Jekyll, I am wondering if a full-blown Wordpress implementation is actually worth it.
There are a lot of things to consider. Fortunately enough, GeoHackr only has 20+ posts currently writte; if there were more than this I am not sure it would be worth the time it will take to transfer GeoHackr to Jekyll. Other things that I have to take into consideration is the plug-ins that I will be loosing in this transfer. Love it or hate it, WordPress is an amazing blogging platform.

Luckily, there are ways around the WordPress plug-in problem. Most of the plug-ins actually have websites that will give you the code needed to install the plug-in on any platform. And in other areas, there are somethings that you can find that work better than what is given through plug-ins. For example, on this blog; I started using Disqus for comments and I have fallen in love with this new system.
You can see what the blog posts look like by going to the test site: “GeoHackr Test”http://joshfinnie.com/geohackr_test/.

First Post

2010-01-25T00:00:00-05:00

Hello and welcome to Josh Finnie.com. I am very excited that I got Jekyll up and running on my new server at "Webfaction"http://webfaction.com/. I appologize in advance for the look and feel of this website as I am trying to get the technology down before I work on its looks.