Keeter Blog

Building a Social Ranking, Single Page App

Sat, 18 May 2013 19:33:00 GMT

What else would I do on a Friday night than build a little app to rank articles based on social media influence? I recorded the whole thing that have published it to youtube, below is the video:

I went ahead and extended the project to include a DotNetShoutout ranking scheme, and I will be putting that together in a video shortly as well.

Hope you all enjoy, and if you have any questions at all, please let me know!

Last Day of Law School/Business School

Fri, 10 May 2013 10:40:34 GMT

It has been a grueling three years, but today is my last law school final. I took my last business final a couple days ago and found out I got a “B” in the course (I was gunning for a 4.0 until that grade; no top grade honors for me at graduation). After today I will be able to do blissful nothingness until bar prep starts at the end of May.

I plan on actually finishing that course that I had originally lined out back in April. Also, I plan on working on a few other projects that have been bouncing around my nugget for the last three years with my time off before the bar exam prep.

I will post to this blog how things worked out after I either destroy or barely survive this final.

Procrasticleaning

Thu, 09 May 2013 14:11:00 GMT

You know when you have something that you need to do, but instead you clean your house, or your office, or your car, or whatever? The act of cleaning gives the false sense of productivity when in actuality you are procrastinating and not completing the task that you are supposed to be working on.

DO NOT GET CAUGHT IN THE PROCASTICLEANING FALSE SENSE OF PRODUCTIVITY!

You might find that your entire office is immaculate, but your project is past deadline.

Also, I am actively procrastiblogging right now, so I can’t judge anybody.

Back to work I go.

Keeter Blog

Wed, 01 May 2013 17:42:00 GMT

Keeter Blog

Squared and Flat UI for Twitter Bootstrap

Wed, 01 May 2013 17:42:00 GMT

The world of flat design is still sorting itself out. You might have the square type of design ala Windows 8 App Store Design Language (previously Metro), and then you have a softer design seen via the aforementioned Flat UI set. Having defined these two types of design at a basic level, lets look at the Metro language theme (free) UI kits/sets built on top of Twitter Bootstrap that can aid in our development efforts.

BootMetro

Boot metro is a play on the Windows 8 design language in that it mimics some basic tenants of that design language and transforms it into a twitter bootstrap wrapper. The key points of this framework lie in its uber-flat design, clean fonts, clean icons, and a geometric feel.

This kit wraps bootstrap cleanly and mimics the essential “day-to-day” elements of bootstrap. Checkout these screenshots of some of the “everyday” components:

Dropdowns

Navbar

Hero Unit

Thumbnails and Lists

Alerts

Progress Bars

Media List

Application Bar

Page with Table

As you can see, this isn’t a “fly-by-night” design set. This is a thought out, thoroughly developed, and supported design set that is clean, documented, and provides a rich overlay on top of the twitter bootstrap framework.

I would love to see some of the UIs that you all will build with this flat and squared kit.

Happy Coding!

AngularJS vs. DurandalJS – part 3 of N – Reputation

Tue, 30 Apr 2013 12:07:00 GMT

This continues the series, where part 1 looked at the technologies, part 2 looked at the data-binding features, and part 1.1 was a video going into the technologies ( you know, trying to beat a dead horse and all)

AngularJS is maintained by Google.

That in and of itself would cause people to switch to that side of the Single Page Application framework debate. However, the argument shouldn’t end there.

DurandalJS is curated by Blue Spire software consulting and principally by Rob Eisenberg. If you are new to the .NET space, then you might not be aware that Rob has made huge strides in taking a complex framework in Windows Presentation Foundation and breaking it down and releasing a framework to manage this WPF mess in a clear, concise, and standards based way. His work in this space has garnered him MVP status as well as a slew of additional accolades. His move into Javascript represents not something new, per se, but a translation of his WPF work into a Javascript paradigm.

That being said, it is still Rob Eisenberg vs. Google. Or is it?

DurandalJS is built on core technologies that are mature and have some strong backing. Specifically, DurandalJS is built with KnockoutJS, SammyJS, and RequireJS, where DurandalJS is nothing more than a sugary abstraction on top of these frameworks that tie them all together. Does that persuade you? What about support?

Will you get support from Google for AngularJS at your corporation? Probably not. Can you get support from Rob Eisenberg at your corp. to assist in DurandalJS development, Hell Yes.

What about “open source” support/reputation in the form of Stack Overflow questions?

407 search results for Durandal*

13,286 results for Angular*

The tale of the tape weighs heavily in favor of Angular on this one. With over 13K questions, one should be able to, theoretically, get more community support from Angular. Now, of course, there are other mediums where Durandal questions are asked, but the straight Stack Overflow test can be dispositive in this rudimentary calculation.

One thing to keep in mind though is that the entirety of SammyJS, KnockoutJS, and RequireJS are brought to bear on a Durandal project, so when adding that scope to the equation there are an additional 17,270 questions on SO. This means that the argument for community support behind Angular and Durandal are actually closer than it seems.

But, many corporations will still say “Google vs. Rob Eisenberg,” and of course I understand that, as should everyone. I am not saying that everything Google touches turns to gold (*ahem* *cough* google reader *cough* *tear tear*), but it adds some significant clout to the situation.

Overall, I see this conversation continuing, especially since as a developer community we have devoted significant time to KnockoutJS or any other technology used by Durandal.

Me? I’m still in the Durandal camp. Though, the tides are a shifting.

Law School Finals and App Sneak Peek

Mon, 29 Apr 2013 21:54:00 GMT

So I have been quiet on this blog recently (for the last week or so) because I am knee deep in law school finals (American law school). This, wonderfully, is my last finals week I will ever have as I will be graduating with an MBA and a Juris Doctor in about 10 days (whoa, the last three years went by fast!).

Why do law school finals suck so bad? Well, for starters, it is curved and everyone is hyper competitive. Out of 100 people, if 99 perfect of them get perfect scores and 1 person only misses one question, that student fails (which is the effect of a curve). Also, the ranking of each student is published publicly so each student has a pretty good idea where they stand in relation to others (to include their friends). This type of “Gunner” culture has spawned countless books, movies, and even a series based on a movie that played out in the 70’s (The Paper Chase). The other reason why finals are so harsh is because usually (9 times out of 10) the final represents 100% of your grade. So, you can study your face off all semester and have a shitty day in May and have nothing to show for COUNTLESS hours spent in the library. But, being able to manage this craziness is part of the educational lesson behind American law school.

It might come as a surprise that I am in law school as I focus on technological subjects here on this blog, but that is because writing code and designing UIs is fun and anybody can do it, whereas only people that are lawyers can practice law. A kid with a book from Barnes and Noble can make a website in a night, but a guy that wants to represent a man that can’t afford to hire a lawyer or has the capacity to represent themselves will have to go to school for three years and then pass the bar. I love the law, but it is hard to talk about something that carries its own insurance if said incorrectly (ahem…malpractice insurance).

I will have a couple weeks off after these finals and graduation before studying for the Bar exam really starts, so I will be completing my aforementioned course of Durandal JS during that time. In the mean time, here are some screen shots of the UI for the app I have designed and coded for this Durandal JS course:

Thoughts on Flat UI vs. Skeumorphic Design Patterns

Sun, 28 Apr 2013 19:55:00 GMT

Flat UI is a growing trend these days that stems from, what I believe, the focus on “authentically digital” design and a desire to stray away from skeumorphic design. Skeumorphic design, essentially, is the desire to replicate real-life objects with pixels. This design pattern is notorious with Apple and companies that seek to mimic Apple. Here are some samples of skeumorphic design.

Notice in each of the above examples there is some attempt to replicate what we know in real-life into an approximation of such on the computer. The all-too-common “shelf” idea as in the first picture, or the leather texture and stitching approach in the second picture, or the legal-pad-type-design denoted in the third picture. Each of these images perpetrate the skeumorphic agenda which has led to a culture of artistic innovation that has ridden the Apple bubble. Personally, I like the skeumorphic design as it looks clean, it looks fresh, and it purports to extend the lives of individuals into their devices, and I cannot fault a design-mantra for any of that.

Patterns of Flat Design

Flat design, in contrast to skeumorphic design relies on the “flattening” of shadows, bevels, and the UI components of web design. I will show some images of this as it will be best explained through images of a button:

Looking at the denoted “Web 2.0 button” we see a drop shadow, a gradient on the lower portion of the button and a separation of color on the upper part. Though these web 2.0 buttons can be done a thousand different ways, the above is a rough generalization of the design approach. Notice that the button seems “clickable” in that it has features on it that make is seem as though it is “popping” off of the page. In contrast, the flat buttons go about the same scenario much differently. The first flat button is the Windows 8 Metro type of button, which can be characterized by a strong color and a Segoe UI font. The other flat button takes a different approach to flat design, as it is slightly rounded, uses a muted color (the green in this case is: #2ecc71), and the font is subtle, not flashy, but enough to get the job done (in this case it is Lato). Also, which seems to be a style of flat design is a white colored text on top of the button (though I don’t know why this is the case, it just seems prevalent).

Images of Users

Images within the Flat design trend are rounded when portraying profile images. This isn’t a hard and fast rule, but seems to be the rule more often then not, here are some examples:

See how the above pictures use this rounded user-image design? It looks good, it looks clean, and it makes a previously silly function (circle images--- admit it, they look weird in so many circumstances) quite anesthetically appealing.

Colors

The colors are generally muted in a flat design architecture, with heavy reliance on subtle contrast. Look at the below picture:

The colors in this image are HEAVILY muted and are relying on extremely subtle changes in contrast to bring forth UI information. The placeholder text is so light that it is merely hinting what to do, which makes for a relatively attractive appearance. Although this can be argued for days whether it is a viable user interface approach, it cannot be argued that this design looks appealing.

Conclusion

I have actually talked about very little in this post, but I wanted to bring forth some common UI trends as it has been so noticeable to me as of late. With that said, enjoy your developing!

Go Watch DotNetConf Today!

Thu, 25 Apr 2013 14:25:00 GMT

Today is the live streaming of the dotnetconf conference, an open conference, over the air, that is broadcasted live to YOU! It is sent over Google+ and can be viewed via YouTube at a live streaming address. Check out the conversation at: https://jabbr.net/#/rooms/dotnetConf-Live, and make sure to catch the session you are craving!

Session List

Day 1 - April 25th, 2013

Time
Session

9:00 AM (PDT)

4:00 PM (GMT)

Advanced Debugging with WinDbg and SOS

Sasha Goldshtein

Visual Studio is an incredible debugger, but problems encountered in the production environment and exceptionally tough bugs still warrant the introduction of WinDbg and SOS in all their glory. In this session we'll see how to dissect memory leaks with SOS and CLR Profiler, how to solve deadlocks with wait chain traversal and SOSEX, and how to immediately pinpoint application crashes from dump files.

10:00 AM (PDT)

5:00 PM (GMT)

Utilize Compilation as a Service to create the next level plugin capability

Filip Ekberg

We are moving towards a new era where more and more people want to offer the possibility to expand the system with widgets and plugins. By utilizing Compilation as a Service can make it easier for all parties to create plug-ins. For instance operations performed at certain events in an application.Roslyn exposes a C # and VB.NET compiler and we can use this to implement something along those lines. Listen to me give an introductory talk about what Roslyn has to offer and how we can use Compilation as a Service to enable the next level of plugins.

11:00 AM (PDT)

6:00 PM (GMT)

Responsive Design: Designing from Mobile Up

Shawn Wildermuth

Creating web sites today requires that we focus on more screen sizes than ever. Responsive Design can help us do this in an effective way. In this talk, Shawn will show you how to achieve screen-size independence and why designing your look and feed from the mobile experience is the right way to get the best performing site.

12:00 PM (PDT)

7:00 PM (GMT)

Git in my TFS!

Ryan Cromwell

Your a gitster in a land of Team Foundation Server. You want your local branches, git-flow and rebasing, but the rest of the neighborhood isn't ready. What do you do? In this session we'll explore the new open-source Git-Tf project. Git-Tf is a set of cross-platform, command line tools that facilitate sharing of changes between TFS and Git. We'll then look at the recently announced native Git repositories in TFS, what that might mean for your organization and how you can get started today.

1:00 PM (PDT)

8:00 PM (GMT)

.NET Open Source Panel

A conversation about open source with Andreas Håkansson (NancyFx), Jeremy Miller (FubuMVC), Sebastien Lambla (OpenRasta), Mark Rendle (Simple.Web), Demis Bellot (ServiceStack), and Phillip Haydon.

2:00 PM (PDT)

9:00 PM (GMT)

Using require.js in an ASP.NET MVC application

Jonathan Creamer

This talk will cover the basics of using require.js as a JavaScript module system and help describe many of the reasons why such a framework is needed in JavaScript. It will dive into how to integrate require.js into an ASP.NET MVC application and how to minify the JavaScript using the r.js build tool. The talk comes from a written tutorial http://tech.pro/tutorial/1156/using-requirejs-in-an-aspnet-mvc-application.

3:00 PM (PDT)

10:00 PM (GMT)

Power charge your website with MongoDB

Nuri Halperin

We hear a lot about NoSQL and big data. The great news is that you can harness the powers of MongoDB (one of the most popular NoSQL databases) easily and fluently from within ASP.NET / MVC. Using very basic techniques we'll explore how to get a website up and running against this wonderful schema-less database, pitching to it's strengths and relieving many of the ORM and relational pains we may have been subjected to in the past. See why companies like Craigslist, FourSquare, ShutterFly and so many others choose this database for their business.

4:00 PM (PDT)

11:00 PM (GMT)

Angry Birds of Modern JavaScript Development

Elijah Manor

A diabolical herd of pigs stole all of the front-end web architecture from an innocent flock of birds and now they want it back! A team of special agent hero birds will attack these despicable pigs until they recover what is rightfully theirs, front-end architecture! Each bird represents a topic, technique, or library that is useful in JavaScript development. Some topics covered include code organization, events and messaging, MV* frameworks, prototyping and mocking, design patterns, linting, and build systems. Come join me as we watch this epic battle unfold!

5:00 PM (PDT)

12:00 AM (GMT)

Why Windows 8 Applications need OData and How You can be a Data Ninja

Chris Woodruff

Windows 8 applications are the ultimate in consumer experience but what drives these applications? Data!! What you need to remember about Windows 8 applications is that they can work with data through web services. What is the easiest way to drive your new Metro applications and make your users happy? OData is the answer and Chris Woodruff will teach you the secrets of OData and how these skills will make you a Master of Data.

6:00 PM (PDT)

1:00 AM (GMT)

Understanding the Task Parallel Library

Yaniv Rodenski

One of the most fascinating additions to .NET Framework 4.0 was the Task Parallel Library (TPL). In addition to the cleaner parallel APIs, TPL also provides a robust infrastructure for developing better parallel applications. In this session, we will learn how to gain real benefits from parallelizing your applications with .NET 4.0 and TPL. We'll discuss parallel programming paradigms, concepts, APIs and learn about upcoming changes in TPL 4.5.

Day 2 - April 26th, 2013

Time
Session

9:00 AM (PDT)

4:00 PM (GMT)

Advanced Windows Phone 8 Development

Laurent Bugnion

Windows Phone 8 is the next big thing, and the press is already raving about new devices. With new capabilities, new sensors and improved performance, Windows Phone users have devices which are the best on the market. In this code-packed session, we will talk about advanced features such as asynchronous programming, web connections, mapping and location, background operations (multitasking) and other exciting topics.

10:00 AM (PDT)

5:00 PM (GMT)

Rediscover JavaScript

David Vujic

Most of us know JavaScript, right? Do you know the difference between x == y and x === y when coding JavaScript? Don't Google it! Didn't know the answer? Then this session is made for you. During this session we will rediscover the JavaScript programming language and take a look at the elegant parts, the good parts and also the ugly parts that should be avoided. I will write and talk about functions, objects and closures. The things that helps us deliver great interactive products for the Web, the Smart Phone and Windows 8.

11:00 AM (PDT)

6:00 PM (GMT)

HTTP the Right Way with ASP.NET Web API

Steve Michelotti

Modern web applications have seen an explosion in Web API creation. Twitter, Facebook, Google, Azure, you name it – it is becoming essential to provide a Web API so that consumers can build applications and mashups on top of your services. Web 2.0 has shown a trend away from SOAP towards a REST architecture style. With the new ASP.NET Web API, Microsoft is now providing first-class support for HTTP services including tools to apply the richness of a REST architectural style. This demo heavy presentation will show how the new ASP.NET Web API will enable you to build rich HTTP services in a REST architectural style while leveraging custom media types, custom HTTP handlers, jQuery and more! The presentation will also cover new features of MVC 4 including Razor enhancements, support for mobile apps, and single page applications.

12:00 PM (PDT)

7:00 PM (GMT)

Taking the Leap into the touch less future with Leap Motion

Iris Classon

The motion tracking device that even Tom Cruise in Minority Report would envy back in 2002. With the air gesture controlled apps at our door step and the Leap Motion leading the way, this is a session you don’t want to miss. I’ll demonstrate the device, go through its inner workings, the API’s and the air store. But even more important- there will be code. Let’s bring the future to life for a Minority Report 2013 inspired session.

1:00 PM (PDT)

8:00 PM (GMT)

Single Page Web Apps (SPA) Jump Start

John Papa

Interested in learning more about building Single Page Apps? SPA's focus on delivering better user experiences with significant client-side interactions using JavaScript, HTML5 and CSS. Now you can get started with SPA using the ASP.NET SPA Template. This session explores the core pieces that help you build end-to-end SPA solutions including code structure and modularity, using data binding and MVVM, abstracted remote data calls, page navigation and routing, app life cycle, and rich data features. Along the way I'll also touch on popular libraries such as Durandal, Knockout, and Breeze.

2:00 PM (PDT)

9:00 PM (GMT)

Code Second?: Entity Framework Meets Legacy Database Meets PowerShell

Eric Anderson

In an ideal world, projects begin with a stable database mapping strategy and an empty database schema. Current object-relational mapping tools often use opinionated conventions that make building the persistence layer as you build your domain model a snap. But, what do you do when starting with an existing database structure and applying a new ORM tool? That new opinionated tool can often conflict with the existing structure. In this hour, you will learn how a legacy database and Entity Framework Code First can meet in the middle. As a bonus, you will also learn more about getting the most out of the PowerShell environment that is built into Visual Studio via a tiny little project called SolutionScripts.

3:00 PM (PDT)

10:00 PM (GMT)

Applied NoSQL in .NET

Michael Kennedy

Perhaps you've heard about the next generation of databases roughly classified as NoSQL databases? These databases are generally much better than RDBMS at scaling, performance, and ease-of-development (e.g. in NoSQL the object-relational impedance mismatch usually disappears). Unfortunately, many talks on NoSQL are very academic and general. Not this one. This session will introduce the ideas around the so-called NoSQL movement, and we’ll learn how to leverage MongoDB (a popular open source NoSQL db) to build .NET applications using LINQ as the data access language. We’ll build out a .NET application using LINQ and MongoDB in a series of interactive demos using Visual Studio 2012 and C#.

4:00 PM (PDT)

11:00 PM (GMT)

Test Driving .NET

Keith Burnell

Software development methodologies come and go like boy bands. Every week someone in the blogosphere is hyping a new methodology, or modifications to an existing one, all of which claim to be the next big thing. Test-driven development (TDD) is one of the methodologies that has outlasted its fad phase and has become a major player in the software development methodology arena. Once you have grasped the methodology there are numerous ways you can make the process easier in the .NET space. In this talk Keith will provide guidance on how to architect your code and solution structure to lend itself to unit testing. He will also dive deep into how you can, using SOLID design principles, write code optimized for testing. He will discuss more complex concepts such as Inversion of Control/Dependency Injection and mocking. Keith will also dive into automated UI testing tools such as WatiN.

5:00 PM (PDT)

12:00 AM (GMT)

Patterns & Best Practices For Moving From RDBMS to Azure Storage

Caitie McCaffrey

Moving from storing your data in an RDBMS like SQL Server to a NoSQL data store like Azure Table requires a programming paradigm shift. This talk will share the knowledge the Halo Services Team gained while making the jump from SQL to Azure Storage while working on Halo 4. I’ll start with an overview of the core differences between the two data stores. In addition I’ll discuss the importance of partitions in Azure Table, and how to perform transactions. Finally I’ll cover how to incorporate other data best practices, and explore how to achieve transaction like behavior across partitions using the Saga Pattern.

Video Walkthrough of my Home Office (with a treadmill desk!)

Wed, 24 Apr 2013 03:17:00 GMT

A Narrative On AngularJS vs. DurandalJS

Tue, 23 Apr 2013 00:50:00 GMT

This video is a couple of things: 1) my first attempt at a green screen video, and 2) a narrative and view into two competing single page application frameworks.

AngularJS vs. DurandalJS - part 2 of N – Data-binding

Mon, 22 Apr 2013 19:06:00 GMT

tl;dr

Both AngularJS and DurandalJS have data-binding. The methods that they employ to perform this function is arbitrary as they are both easy, logical, and are straight-forward. However, as you might have some inherent preferences, I show how each framework performs binding.

Intro

Angular and Durandal both have their own opinion regarding data-binding. Data-binding is, at the outset, a method to tie together the current state of a javascript variable with a UI component. For example, if a javascript variable named “X” has a current value of “foo", then the data-bound UI component, like a <span> tag, will have a value of “foo” as well. As the variable changes, so does the UI component, in real-time. When going about this approach by each framework, the idiosyncrasies of each begins to show themselves.

Angular’s Binding Pattern

Angular hearts handlebars. Handlebars is a templating library that replaces annotated variables in the markup with actual values. Usually a handlebars approach uses “{{“ and “}}” as the annotation convention, so if a Customer object has a property of Name, then the handlebars expression in the template that is bound to the Customer object would look like {{ Name }}.This pattern is easy, understandable, and requires very little view markup that is superfluous. Here is some markup that has the Angular handlebar data-bind syntax:

<div>

<span> {{ Address }} </span>

<button ng-click=”HandleConfirmClick()”>Confirm</button>

</div>

Durandal’s Binding Pattern

Durandal goes about things differently because Durandal is merely an extension of a series of frameworks that already exist (namely jQuery, Knockout, RequireJS, and SammyJS). Thus, the data-binding scenario for Durandal is merely the data-bind syntax that Knockout offers. Knockout, in contrast to Angular, uses the data-* attribute to source its data-binding commands. For example, a <span> element that has a data-bind attribute of text:Name would have a span whose value would derive from the Name property value. Here is the same code as above but with the Durandal data-binding pattern.

<div>

<button data-bind=”click: HandleConfirmClick”>Confirm</button>

</div>

Conclusion

This is all rather basic, but it quickly shows the differences between the two frameworks. Each requires client-side markup in the form of templated language annotations or HTML5 data-* attributes, so in this regard, both frameworks are similar in their abilities.

AngularJS vs. DurandalJS – part 1 of N – Where do these technologies fit?

Thu, 18 Apr 2013 21:02:00 GMT

Here’s the deal, I like DurandalJS. Though, I’m not going to lie, I really like AngularJS as well. These two technologies compete in many respects as they both seem to tackle the same problem. What problems are these frameworks trying to tackle? I have made a diagram of what I see to be the core developments in client side technologies, and after you view this, I will talk about where I see Angular and Durandal fitting in (note that there are a myriad of other useful frameworks that do storage, pub/sub eventing, animation, data-binding, AMD pattern ala requireJS, and a slew of other things, but this represents what I believe is the focus on today’s client-side development).

The key elements that I focus on are DOM manipulation, routing, and MV* (model-view-controller or model-view-viewmodel, or some other variation). Although data access is very important, and many frameworks throw in an element of data access just for fullness (like Angular’s $http object), I believe that data frameworks are more often found to be separate tools, and not wrapping into, say, routing frameworks. In the world of Javascript, and client-side development, you will see frameworks popping up all the time that try to accomplish the MV* and routing scenario; and Angular and Durandal do just that. Thus, right off the bat, you should think of Angular and Durandal to accomplish the entirety of the blue and red circles above. I will get into it more later, but essentially these frameworks allow for Single Page Applications.

So what can these frameworks do exactly?

The key differences between Angular and Durandal at the outset lies in the amount of inherent knowledge a dev can bring to the party. If you know Knockout and RequireJS, then Durandal will be easy to understand. If you want to learn Google’s opinion on Knockout, RequireJS, and SammyJS, then go check out Angular. I will expand on this concept in later posts, but for now, this post shows part of the world of modern Javascript and targets the patterns that these frameworks have looked to perfect.

Tragedy in Boston

Tue, 16 Apr 2013 14:18:00 GMT

Two bombs went off yesterday in Boston at the finish line of the storied Boston Marathon. The blast killed three, injured 144, and left many without legs. This act of terrorism, as defined by the White House, is the first successful act of public terrorism since 9/11. Was it foreign terrorism though? Yesterday was Patriot day in Boston, Tax Day for America, and of course, the Boston Marathon; either one of these events could spark aggression. Only time will tell where this act originated from.

My heart goes out to Boston.

Upcoming Course I’m Producing on Durandal JS and Mobile Development

Sun, 14 Apr 2013 23:57:00 GMT

So I dig mobile development with HTML5. The tools given to us by such frameworks as Knockout, Durandal, Phonegap/Cordova, and a myriad of other javascript frameworks allow for beautiful HTML5 development without the knowledge of specific native coding paradigms. Because I think this is the future of mobile and the web, I will be producing a multi-part course on this subject while developing a real-life application. The basic layout of the course is as follows (this is an initial listing, nothing is final).

1. Why HTM5 for native application development on a mobile device

2. Why Durandal makes sense compared to similar frameworks like AngularJS

3. What components makes Durandal special

a. Crash course on KnockoutJS (data-binding)

b. Crash course on RequireJS (AMD pattern delivery)

c. Crash course on SammyJS (routing)

c. How Durandal seamlessly puts these libraries together into a framework

4. Part 1: The App Design

Problem: Define the problem our app will solve

Design: Design the characteristics that our app will need to meet the problem

Solution: Start hashing out the foundation of our application

a. Create a new project for Windows Phone 8

b. Pull Durandal down from Nuget

c. Create a main.js

d. Create a shell.js and shell view

e. Create initial routing and publish the app to emulator to review

5. Part 2: Login

Problem: Users need to log into a system they can trust

Design: Incorporate Facebook login mechanisms into the design of the application and use Facebook login as our user repository

Solution: Add Facebook login into our application

a. Create a Facebook Bootstrap

b. Add the Facebook scripts to the page asynchronously

c. Create a splash screen

d. Create a login screen and routing

e. Create a click event in the login viewmodel to handle the user initiating a facebook authentication

f. Ask FB to login user, and after user has logged in, redirect to login handler and then to their dashboard (to view all current events added)

6. Part 3: Create an Event

Problem: A person that wants to add gifts to a registry will need an event to send the gifts to

Design: Create an event-add screen, an event summary screen, an event-edit screen, and we will need to also be able to delete events

Solution:

a. Event-Add screen

1. Create an event add view and viewmodel

2. Add a form to create an event that has validation using Knockout Validation

3. Add a click event to handle movement of form data to a server for insertion

4. Show user a successful save message (or error) via modal and send them to the event summary screen

b. Event Summary screen

1. Create an event summary view and VM

2. Create handler for an edit button that will enable the user to edit the details of the event (date, time, etc.)

3. Create a handler to handle the requested deletion of the event

4. Create a handler to add a gift to the event

c. Event Edit screen

1. Put all values back into inputs and allow for editing

2. Validate data

3. Handle data input and send back to server to update

7. Part 4: Add a gift to the event registry

Problem: We have an event, which is awesome, but we don’t have a way for users to actually add gifts to the registry

Design: Incorporate Phonegap to interface with the phone’s camera, and use a phonegap plugin to access barcode data and perform lookups with said data

Solution:

a. Create gift-add view and viewmodel

b. Create click event to handle the phone capture request

c. Handle the picture capture by the phone and publish the image back to the server and associate the picture with the event in the phone’s database

d. Create click event for a barcode scan picture and utilize the barcode reader data to perform a SKU lookup against a product database the product to the user in a modal. The modal will give the user the option to accept the product or not.

e. Handle a “done” click event that brings the user back to the event summary screen where he/she can view the gifts and details of the event

8. Part 5: Publish event data to Facebook

Problem: The user created an event, they added gifts to the event, and now they just want other people to see what to get them off their registry

Design: Publish the event to FB using the FB event publishing API

Solution:

1. Create Publish to FB button on event summary screen

2. Create a handler to manage the click even of that button and display to the user a pre-publishing verification screen.

3. Once the user verifies the data, they can continue and publish the data to FB using the “publish” button on the pre-publishing verification screen

9. Part 6: Publish App as an Android App

Problem: We have been using the windows phone emulator to test our native app, but the requirements changed and I need to publish this to Android

Design: use the Phonegap build services to create Android binaries and use the build service result on an Android phone

Solution:

1. Walk through the tests to use the Phonegap build service on the Phone gap website

2. Publish results to Android phone

3. Test

10. Conclusion

1. Review app

2. review relevance of our production mechanism (HTML5, single page application, etc.)

3. Say goodbye

Based on the above, it looks like it will be a 10 part series, and each video will most likely be an hour. These videos will be HEAVY on code and will teach through a “learn as I do” mechanism.

What do you think, is this something that you, dear reader, would be interested in?

Using Twitter Bootstrap with Flat Design

Thu, 11 Apr 2013 16:57:00 GMT

UPDATE: Check out a much "flatter" bootstrap theme here

I must say, I greatly enjoy the flat design culture that is prevalent right now on the internets. I would be remiss if I did not say that Microsoft’s Metro design language (now called the Windows App Store design language or something like that) has pushed current design down this “flat” path.

What is flat design?

I think the easiest way to define flat design is to show what is not flat design:

Notice that a) each of these components comes from the base twitter bootstrap design, and that b) each of them involve drop shadows, gradients, and basically conveys hierarchical function through design (i.e. “I am a button, I look like I am popping up from the page, click me!”). This type of design looks fantastic, has function on top of design, and has been accepted by the community and users for years. Although this method is functional and fantastic, Windows came out and said, “look, we understand that this stuff is all 3-d like and cool, but it isn’t ‘authentically digital.’” The authentically digital mindset gave way to this super-flat design:

Notice here the consistent type design (Segoe UI) and the complete lack of three-dimensional depth with their icons and live tiles? The colorful boxes are merely boxes that exist within the design, and do not show a perception of floating above the design and necessitating a drop-shadow. This looks fancy, it looks unique, and it seems functional enough, so how can we tie this super flat design style into a usable and functional web design library?

Enter Flat UI

I don’t work for designmodo, but I really like their stuff. They recently released a Flat UI component suite on top of twitter bootstrap that allows for default styling in a pseudo flat manner. The CSS component suite also defines a set of colors that I think rock:

Let’s look at some component side-by-sides (boostrap first, then flat UI second):

Button:

Nav Menu:

Inputs:

Login Form:

Where to get Flat UI?

You can pick up the latest revision of Flat UI from Github at this address: https://github.com/designmodo/Flat-UI. I enjoy the flat design, and when it ties easily into my current web design flow (ala twitter bootstrap), it makes things even better.

Happy Coding!

Using Knockout Validation in a Durandal JS View

Tue, 09 Apr 2013 15:50:00 GMT

Why should you care about this video? If you validate forms (which you should), and you use Durandal JS (which is awesome), then Knockout Validation is the most pragmatic way to add validation to your project.

New Blog Design Here

Mon, 08 Apr 2013 15:42:00 GMT

So yeah, I was tired of the design as it was previously, I mean…it was nice, but it was just SO MUCH WORK. Here was the design previously:

It was a good looking piece of work and it captured the “metro” feel that I was going for, but it was a pain in the butt to publish something that has to have three different sized images for the post (a featured size, a secondary size, and a quad size). Plus,I used Blueprint CSS to design the grid layout, and that gave me nothing in terms of responsiveness. Look at what happened when I adjusted the screen size:

It wasn’t pretty nor responsive, the side quad images were ravaged and nothing changed it’s viewing size (even with a viewport tag added). Thus, I felt like it was time to redesign (I do this every six months or so because I get bored apparently). The goals of the new design were to have a good and responsive look while having a simple publishing mechanism that I felt good about, as in it was easy, clean, and without trouble. Here is a screen shot of the three responsive views.

Making this responsive type of layout is SUPER trivial and only takes a little Twitter Bootstrap magic. Honestly, this took me maybe an hour to adjust using Orchard and Twitter Bootstrap. If you are looking for some quick development and easy designing…look at Orchard CMS and Twitter Bootstrap.

7 Single Page Application Videos I’ve Made Recently

Wed, 03 Apr 2013 16:07:00 GMT

I haven’t been very good about posting the videos that I have publishing on YouTube regarding Durandal JS, so I will post the links and download links below:

Durandal Intro video

Watch: http://www.youtube.com/watch?v=AKdsk9uIuQU
Download: 720p MP4

Durandal and where to go after getting it from Nuget

Watch:http://www.youtube.com/watch?v=1NUZ0R16CxQ
Download: 720p MP4

Durandal and Coffeescript

Watch: http://www.youtube.com/watch?v=wZwRSJCJtoo
Download: 720p MP4

Durandal and how to utilize modals

Watch: http://www.youtube.com/watch?v=r_g9dNa4K88
Download:720p MP4

Durandal and Pub-Sub with Events

Watch:http://www.youtube.com/watch?v=wuCpf-Tvff4
Download: 720p MP4

Durandal and how to wire up jQuery and the DOM

Watch: http://www.youtube.com/watch?v=WmH5tX1o_Lg
Download:720p MP4

Durandal and my #1 Gotcha after developing for a month

Watch: http://www.youtube.com/watch?v=w_XjWg6xL8I
Download: 1080p MP4

Hopefully with these vids and some others that I have planned in the works you will able be able to start some rockin’ Durandal development.

Utilizing Modals within Durandal JS

Sun, 31 Mar 2013 14:35:00 GMT

This video dives into the modal utilities of the “app” file in Durnandal JS. If you have any questions, then please leave a comment here or on Youtube!