Presenting Goalizr.com

Goalizr is Live!

It's been quiet here on the blog, and for good reason! With less than a day left here at camp, I was able to get my personal project live and working online. Check it out at Goalizr.com!

You can register for an account and start adding your own goals and activities, or login with the Demo account to have a look around. I've added some sample goals and activities to give an idea of how it works. Here's the login...

User: Test
Password: password

I had to reign in my initial scope for the application to get it ready to publish in time, but I'm proud of this release because of what I've learned and the problems I had to solve to get it where it is.

I also want to announce the launch of another project I helped out on, Csharper.in. My classmate, Vicky Goldstein, created this really cool Jeopardy-style game to help people learn C# and ASP.NET related terms and definitions.

It's been quite a ride the last 12 weeks, going from drinking from a firehose to now putting out fires on my own web application. I can say now with certainty, that attending this camp has been the best thing I've ever done for my career. I look forward to getting started with a good company next year, but for now I'm thrilled to be going home to see my wife Anna, and my two kids, Will & Finley!

Working with Bootstrap & JavaScript in a Foreach Loop

Bootstrap is an open-source frontend framework developed by Twitter that provides web developers with a large selection of HTML, CSS & JavaScript components that can save time in the early stages of putting a user interface together.

A couple of the Bootstrap JavaScript components I've used while here at camp are the Modal and the Collapse. A modal is a dialog box or prompt that can be used for a variety of things, and hides the content within the modal body until it is triggered by a button or link. A collapse is more like a Panel, that's been modified to act like a drawer for content, opening when the panel header link is clicked.

Collapse Example from GetBootstrap.com

These are pretty handy UI bits, but they can be tricky when you use them within a foreach loop to populate a page with dynamic database-driven content. On the Goalizr Goals page I wanted to use a Collapse to show a list of Activities associated with each goal. Once I got the code for displaying the Activities in the controller and the view (Thanks for the help, David Graham!), I was ready to implement the Collapse in the loop. But when I ran the application only the first collapse for the first goal worked. The others would actually toggle the collapse for the first one.

Code for Goal Activities Panel

We ran into this problem with Fund.io, and Mark Grunden (who is now an Assistant Counselor, btw!) helped me come up with a solution. In the example above, I have replaced the default IDs and references with Razor calls on the GoalId. This creates a unique ID for every Collapse on the page, allowing all information to be displayed properly when the Collapse header is clicked.

Goalizr Sneak Peek

Goalizr Frontend

There's nothing like a deadline to push you through late nights working on a project. Today was presentation day, so those of us with personal projects have been putting in a lot of time over the last few weeks to get them ready for today. Although I've got three more weeks to work on it, I still wanted to get it pretty good shape for today.

So far, I've got the frontend website at a good stopping point for now. For the remaining three weeks I'm going to focus on finishing out the backend, along with implementing user authentication so the site will allow users to create their own sets of goals, activities and such. Here's what I have so far:

Dashboard > Goals Page

This page shows all the goals, with data populating from the database for each goal. You can create new goals, edit, or delete goals as you wish. On this page I have a working search function which allows you to search through goals by the title or motivation, and a sort feature that allows you to view goals that are ending soonest, or latest. There's also working pagination that limits the number of goals per page.

Some of these things were trickier than I thought they would be coming from more of a plug-and-play background such as WordPress. But the payoff for this trickiness is more power and flexibility. And, not to mention that I'm learning how to build things from scratch and not depending solely on plugins to add functionality to a website.

Dashboard Main Page

Other pages for Activities and Emotions are working, similar to the Goals page, but the main Dashboard for the backend is still pretty much in prototype. The data for the charts is all hard coded in for now, but hopefully by the time I finish up here at camp, I'll have a solid beta version ready to go live.

Here's the development technology I've used so far:

ASP.NET, MVC5, C#, Razor, LINQ, Entity Framework 6, HTML5, CSS3, JavaScript, jQuery, Team Foundation Server, Bootstrap 3

Foggy Night at Pearland Town Center

Flying Dune Buggies & One Page Websites

Today I received an email from an online tech magazine announcing the dawn of the flying dune buggy. That's right... SkyRunner, a company out of Shreveport, LA has just announced that they're now taking orders for the super-cool, super-lightweight paraplane buggy.

I had to check out the link, and I noticed that they are employing a current trend in web design called the one page site. The idea is to put all of your site content in a single HTML file and use anchor tags to navigate throughout different sections of the page. You can check out their site at FlySkyRunner.com to see how they are doing it.

This seems to be a popular way to build sites these days, and with a little JavaScript, JQuery, CSS3, or Ajax, you can add all sorts of effects and animations for the transitions. The results can be impressive, as you can see for yourself at sites like OnePageLove.com and WebDesignerDepot.com.

However slick these websites can be, there is much debate about whether this trend is good for user experience, search engine optimization (SEO), and pay-per-click (PPC) advertising, among other things. Some of the criticisms being brought up include usability issues on mobile devices, poor keyword targeting, and low quality scores for contextual advertising.

For now, it's still difficult to determine if the pros of this trend outweigh the cons, but in the meantime I'm going to take a little break to imagine flying around in my $119,000 flying dune buggy. Until next time...

Fun & Games with Google Earth API

Monster Milktruck over LP Field in Nashville

One of the requirements for our personal projects is to implement some kind of web API within our project. Web APIs, or Application Programming Interfaces, allow web applications to communicate with each other in ways that extend the functionality of the applications in new ways.

Google has been offering its Google Earth API for some time, and many developers are using it to create all sorts of mapping applications that once would have taken a tremendous amount of work. For example, the Monster Milktruck mashup allows you to drive a giant milktruck anywhere on Earth. Other mashups using Google Earth include one that lets you run from Zombies in your neighborhood, or if you're feeling nostalgic, drive the A-Team Van.

I don't know if I'll have the time, but I would love to find a way to set locations for Activities in Goalizr, that way you could see where you spend your time working towards (or being distracted from) your goals. With HTML5 you can now request the location of a user from the browser (geolocation), but there would still be a lot of work getting it setup and persisting to a database. We will see... there's always Version 2.0!

Learn and Practice LINQ & C# with LINQPad

After a much needed day off yesterday, I'm back at it today studying C# Fundamentals and LINQ (language integrated query). Thumbing through the pages of O'Reilly's C# 4.0 Pocket Reference by Joseph Albahari, I discovered that the author is actually the creator of a handy LINQ/C# scratchpad called LINQPad. 

During the second week of camp (seems like years ago, now!), one of our camp-mates, Danyal Mahmud told us about using LINQPad to practice writing LINQ queries. I didn't start using it right away because we were so busy learning new material. But now I wish I had, because not only is LINQPad great for LINQ, it's also great for learning and practicing C#, from a beginner level to advanced.

Here's why... 

Included in the Samples tab of the program are code snippets from C# 5.0 in a Nutshell, another highly rated book by Joseph Albahara. When you install LINQPad, you get snippets from Chapters 8, 9, 10 & 26. Then you can click "Download/import more samples...", and get even more samples from Nutshell, along with snippets from other books like C# in Depth & Asynchronous Functions in C# (I won't even pretend I know what those are... Yet!)

You can view, clone, edit & run these snippets right in the application without having to create new console apps in Visual Studio and you can practice LINQ directly on your own databases with the Add Connection feature. Starting out in C# and LINQ can be intimidating, and overwhelming at times. With tools and resources like these, however, the learning curve starts looking more like a hill than a mountain.