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.

Visual Studio Keyboard Shortcuts

I'm a big fan of keyboard shortcuts. When I first started working with AutoCAD, I learned to rely less on toolbars and buttons and more on entering short aliases in the command line to get things done. The result was that I spent less time going back and forth from the keyboard to the mouse. Later, when I started using Photoshop, I was amazed at how much time you could save using keyboard shortcuts like CTRL+T (free-transform layer) and CTRL+J (new layer via copy).

The most important keyboard shortcut I ever learned, however, was CTRL+S. It only took one time losing hours of work in a CAD drawing to start using it religiously.

Now I look for shortcuts for any program I spend a lot of time working in. And since I've been spending more time with Visual Studio than with my friends and family the last 5-1/2 weeks, I've gotten pretty friendly with these little time-savers. Here are some of my favorite...

Shortcut	Operation	Notes
CTRL+K, C	Comment a line of code	You can place cursor in line without selecting anything
CTRL+K, U	Uncomment a line of code	Same as above
CTRL+SHIFT+ENTER	Blank line after cursor line	Cursor can be anywhere in the line, and you don't have to use END, ENTER
ALT+UP or DOWN	Move line up or down	Cursor can be anywhere in the line, without selecting
CTRL+DELETE	Delete word to right
CTRL+BACKSPACE	Delete word to left
CTRL+. (period)	Open Smart Tag	When you get the red squiggle, sometimes it's hard to get to this with the mouse
CTRL+ALT+L	Open Solution Explorer
CTRL+; (semicolon)	Focus on Search Solution Eplorer	Same as above, except puts your cursor in the search box
CRTL+, (comma)	Focus on Navigate To	This searches for words in entire solution and takes you to it when you hit ENTER
CTRL+F	Open Quick Find
CTRL+H	Open Quick Replace
CTRL+Q	Open Quick Launch	Allows you to search everything in VS, including tools & options
CTRL+ALT+S	Open Server Explorer
CTRL+W, E	Open Error List
F1	Navigate to Help File	Place cursor in any keyword in text editor, opens MSDN help file for item
F12	Navigate to Definition	Place cursor in code to find definition
CTRL+SHIFT+B	Build Solution
F5	Start Debugging
CTRL+F5	Start w/o Debugging
CTRL+F6	Next Tab
CTRL+SHIFT+F6	Previous Tab

Oh, I almost forgot CTRL+K, D... Automatically formats tabs and white-space to make your code look snazzy!

End of Week 5 Update

Things are coming along pretty well here at camp. We wrapped up the admin dashboard for Fund.io this week, complete with database driven tables for campaigns and comments, graphs for sitewide stats and key performance indicators.

We incorporated some pretty cool features like ajax page updating (which allows the database to be updated and shown on the page instantaneously without reloading the page), and a modal for displaying details about an item without leaving the current page. I also redesigned the front-end slider with a new parallax background effect. When the site goes live, I'll be sure to post links.

I've got a good head start on Goalizr as well. Officially, we were supposed to get started next week on our personal projects, but I heeded the advice of some of the previous campers and started working on it a while back.

For practice, and to learn the latest features in Visual Studio, I migrated my initial solution from VS2012 to VS2013 so it's now running on .NET 4.5.1, MVC 5, Entity Framework 6, and Bootstrap 3. I have a working CRUD for goals, activities &  emotional states, ability to add new users, and a login system that allows logging in with an external API, like Google. Currently, the app is using a basic Bootstrap theme, but I have some mockups in Photoshop I'll be trying to implement for the front-end of the site using HTML5 and CSS3.

Inspired by some of my fellow campers blogs, I'm going to try to post more specific code examples and how-to's pertaining to the technologies I'm using to build my project. It may or may not be helpful to others, but at least I'll have a record of the whole process for me to go back to.

In addition to my personal project, I've been brainstorming with a few of my classmates about getting their own projects up and running. One is an online Jeopardy game for learning C# terms and definitions. Another is a site that allows independent comic book/graphic novel creators to promote and sell their work online. And the other is a site that connects writers and artists and helps them work together to develop children's books, comics, graphic novels, book covers and more. Pretty excited about helping out on these projects too...

Movie Night

Took a little break from coding tonight to go see Ender's Game with some camp buddies. I never read the novel, but from those of us who did, they said it was a pretty good adaptation. If you're into sci-fi, it's definitely worth going to see.