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.

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...

Coder Camps Prerequisite Work

In preparation for the Coder Camps programming school, I have been asked to complete some prerequisite work in the form of reading, going through online tutorials, as well as setting up this blog and a profile on LinkedIn. Although I'm still working on marking these off the checklist, I thought I'd post something about what it takes to get ready for a camp like this.

One of the books recommended by the school is Head First C# which focuses on the C# programming language and the .NET framework (not related to .net top level domain, by the way). I can tell from going through some of this book, there's a steep learning curve. I'm sure it's true with any programming language, even spoken languages, but I'm banking on being immersed in it for 9 weeks to get into the groove of things.

Another book I picked up, which wasn't recommended but looked interesting, was Code: The Hidden Language of Computer Hardware and Software. Less of a technical book, the author explores the connections between humans and machines, and the history of communications technology such as Morse code & Braille. So far, a good read that explores the world of computers in an entertaining and easy to grasp format.

Another prerequisite is to become familiar with some of the technologies that will be used at the camp. Primarily, we'll be using Visual Studio Express for Web, a web development program designed to help you create modern web applications. After installing the free software, and poking around a little bit, I could tell this is a powerful program. I look forward to seeing what this baby can do!

Since all websites are based on HTML, and more increasingly CSS, JavaScript & jQuery, a general understanding of these is needed to have a good head start going into the training. Coder Camps recommends Codecademy.com online courses to get a handle on these coding skills. I've completed the Web Fundamentals & jQuery courses, and am in the process of completing the JavaScript. The site walks you through lessons and exercises and allows you to enter and test your code in a handy virtual console. Some other online tutorial sites such as Codeschool.com and Teamtreehouse.com include videos and premium features.

While most of these tech bootcamps say they can take a complete beginner and turn them into an entry level programmer, I'm sure the prerequisite work allows students to focus on the meat and potatoes of programming when they get to camp. I feel like I've got a pretty basic understanding of this stuff, but I'm still a little nervous about jumping into 9 weeks of it. Oh well, a little pressure never hurt anyone...