__4 “CD Is Working, Let’s Get a Site Live with Loopback!”

Since it has been more than a few weeks let’s do a quick recap of the previous posts in this series.

  1. Introducing the Thrashing Code Team & Projects” – Know who’s working on what and what the projects are.
  2. Getting Started, Kanban & First Steps for a Sharing App” – Getting the kanban put together and the team involved.
  3. Starting a Basic Loopback API & Continuous Integration” – Getting the skeleton of the API application setup and the continuous integration services running.
  4. Going the Full Mile, Continuous Delivery” – Here the team got the full continuous delivery process setup for ongoing development efforts.

In this article of the series I work with some of my cohort to get initial parts of the application deployed to production. For the first part of this, let’s get some of the work that Norda has done into the project and get it running on the client side.

Client Side

client directory of the loopback project.

client directory of the loopback project.

The first thing I needed was to get a static page setup. This page would then be used to submit an email to the server side that would then deal with whatever processing that I would have for the email message confirmation and related actions.

In Loopback, it is very easy to setup a static page. I just needed a simple index.html page so I created an empty one in the client directory of the project.

The first thing I did was literally put an index.html file with the words “this should work” in the client directory of the project. But after some tweaking and adding in Norda’s work the team ended up with the following.

The next thing to do is setup the Loopback.io framework to host a static site page.

Static Page via Loopback.io

This part of the article is taken pretty much straight out of the static page hosting Strongloop Loopback.io Documentation.

Applications typically need to serve static content such as HTML and CSS files, client JavaScript files, images, and so on.  It’s very easy to do this with the default scaffolded LoopBack application.  You’re going to configure the application to serve any files in the /client directory as static assets.

First, you have to disable the default route handler for the root URL.   Remember back in Create a simple API (you have been following along, haven’t you?) when you loaded the application root URL, http://localhost:3000/, you saw the application respond with a simple status message such as this:

{"started":"2014-11-20T21:59:47.155Z","uptime":42.054}

This happens because by default the scaffolded application has a boot script named root.js that sets up route-handling middleware for the root route (“/”):

server/boot/root.js

module.exports = function(server) {  // Install a `/` route that returns server status
  var router = server.loopback.Router();
  router.get('/', server.loopback.status());
  server.use(router);
};

This code says that for any GET request to the root URI (“/”), the application will return the results of loopback.status().

To make your application serve static content you need to disable this script.  Either delete it or just rename it to something without a .js ending (that ensures the application won’t execute it).

Define static middleware

Next, you need to define static middleware to serve files in the /client directory.

Edit server/middleware.json.  Look for the “files” entry:

...
  "files": {
  },
...

server/middleware.json

Add the following:

...
  "files": {
    "loopback#static": {
      "params": "$!../client"
    }
  },
...

These lines define static middleware that makes the application serve files in the /client directory as static content.  The $! characters indicate that the path is relative to the location of middleware.json.

Add an HTML file

Now, the application will serve any files you put in the /client directory as static (client-side) content.  So, to see it in action, add an HTML file to /client.  For example, add a file named index.html with this content:

/client/index.html

<head>
    <title>LoopBack</title>
</head>
<body>
    <h1>Whatevs</h1>
    <p>
        Some static content...  but just look at the big HTML file below!  🙂
    </p>
</body>

Of course, you can add any static HTML you like–this is just an example.

Graphic Assets

Norda setup the project with a number of assets for the current page creation as well as future pages the site will need. The theme is a high quality theme, with the Coder Swap Logo added at respective key locations. The following are the graphics assets included in the project under the client directory here.

The key files that are included that will be used for our first site we deploy are the various favicon, logo, and related images. You can see those in the root of the client directory. There are a whole bunch of them because of the funky mobile design requirements.

Index.html

The first page I’ve setup is a simple sign up page, with no real functionality. Just something to get started with to build off of. The code for that page looks like this.

<!DOCTYPE html>
<html>
<head>
    <title>
        Code Swap - Notify Me!
    </title>
    <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700" media="all" rel="stylesheet"
          type="text/css"/>
    <link href="stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="stylesheets/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="stylesheets/se7en-font.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="stylesheets/style.css" media="all" rel="stylesheet" type="text/css"/>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">
    <link rel="apple-icon" sizes="114x114" href="apple-icon-114x114.png">
    <link rel="apple-icon" sizes="72x72" href="apple-icon-72x72.png">
    <link rel="apple-icon" sizes="144x144" href="apple-icon-144x144.png">
    <link rel="apple-icon" sizes="60x60" href="apple-icon-60x60.png">
    <link rel="apple-icon" sizes="120x120" href="apple-icon-120x120.png">
    <link rel="apple-icon" sizes="76x76" href="apple-icon-76x76.png">
    <link rel="apple-icon" sizes="152x152" href="apple-icon-152x152.png">
    <link rel="apple-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
    <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="mstile-144x144.png">
    <meta name="msapplication-config" content="browserconfig.xml">

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <script src="javascripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="javascripts/modernizr.custom.js" type="text/javascript"></script>
    <script src="javascripts/main.js" type="text/javascript"></script>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
</head>
<body class="login2">
<!-- Registration Screen -->
<div class="login-wrapper">
    <a href="./">
        <img width="100"
             height="30"
             src="images/logo-login@2x.png"/>
    </a>
    <form>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-envelope"></i>
                </span>
                <input class="form-control"
                       type="text"
                       value="Enter your email address">
            </div>
        </div>
        <input class="btn btn-lg btn-primary btn-block"
               type="submit"
               value="Register for updates!">
    </form>
</div>
<!-- End Registration Screen -->
</body>
</html>

As you can see a bulk of the page is favicon and logo related nonsense while about a 1/3rd of the screen is actually the HTML for the form itself. What that looks like when rendered is something like this.

The registration page.

Once that page is up we can then commit to the production branch as outlined in the previous blog entry.

btw – If you’re curious (especially if you’ve read the intro blog entry about the mock team), you might be wondering where and who and how did I create this gorgeous theme? Well, I didn’t, I actually purchased this sweet theme from Theme Forrest. The specific theme is se7en.

Thor Project Opens Up, Building the Cloud Foundry Ecosystem with the Community

The Iron Foundry Team are big advocates of open source software. We write code across all sorts of languages, just like many of the development shops out there do. Sometimes we’re heavy on the .NET, other times we’re all up in some Java, Ruby on Rails, spooling up a Node.js Application or something else. So keeping with our love of open source and our polyglot nature we’ve created the Thor Project with three distinct apps.

Before jumping into the applications though, a little context for what and where Thor is in the grand scheme of things. We need to roll back to the Cloud Foundry Project to get into that. The Cloud Foundry Project is an open source project built around software for PaaS (Platform as a Service) which can be used to build your own PaaS internally or externally, in a cloud provider or directly on hardware. It’s your choice how, when and where you want to use it. For more context on PaaS check out my previous entry “The Confusions of IaaS, PaaS and SaaS“.

Thor Project

Cocoa for OS-X

Thor Odinson

Thor Odinson, God of Thunder

You know who Thor is right? He’s this mythic Norse God, also known as the God of Thunder. Since we’re all about bringing the hamma we welcomed Thor into our team’s stable of applications. So starting immediately we’ve released Thor into the realms for contributions and fighting the good open source software battle! If you’d like to join the effort, check out the github project and feel free to join us!

Technically, what is the Thor Application? This is a Cocoa Application built for OS-X that is used for managing, deploying and publishing applications to Cloud Foundry enabled and or Iron Foundry extended PaaS Environments.

.NET for Windows 7

The .NET Metro version of the Thor Application is also released via github with a provided installer. We’ve almost taken the same path, except of course for the very different UX and UI queues with Windows 7 and the Metro UX design guidelines.

WinRT for Windows 8

I wasn’t really sure what to call this version. Is it Metro or WinRT or Windows 8 or something else? Anyway, there is a project, it is albeit empty at this point, but it is the project where the Windows 8 version of Thor will go! For now get the Windows 7 version and install it on Windows 8, it won’t have touch interface support and things, but should work just like a regular application on Windows 8.

The Code

To get started with these, generally you’d just clone the repo and do a build, then get started checking out the code. There is one catch, for the OS-X version you’ll want to pull down the sub-modules with the following command.

git clone git@github.com:YourForkHere/Thor.git
git submodule update --init --recursive

Once you do that in XCode just make sure to then select the right project as the starting build project.

…then when the application is launched…

Thor Running in OS-X

Thor Running in OS-X

I’ll have more in the coming days and weeks about Thor & Iron Foundry. For now, check out the blog entry on the Iron Foundry Blog and subscribe there for more information.

Thor Brings the Hamma! Cloud Foundry OS-X, Windows 7 and Windows 8 Interfaces FTW!

One of the things that I do in my work is lead the efforts around creating and leading open source projects. As regular readers may know, I’m big into open source efforts, especially around PaaS. My preferred PaaS offering these days for internal, external and public cloud PaaS is Cloud Foundry (with Iron Foundry for all of my .NET needs). Today the we made the projects official and I’m charging forward with a a great team of people. You’ll be able to use these new user interfaces for Cloud Foundry against Tier 3 Web Fabrics, CloudFoundry.com, Stackato, AppFog and any other company that uses Cloud Foundry at the core and exposes the web service APIs for use!

Thor & Thor.NET

In a couple weeks we’ll be making the github repositories completely public, open sourcing the code & products entirely and looking forward to working with the community to make these tools as awesome as we can. For now, if you’d like to jump into the repositories and see where we are and what we’re up to as we step toward opening them completely, sign up via “early access“. We’ll get you setup on the repo so you can fork, pull and add you’re own signature bits.

Why did we name the project Thor? Well, we’ve been spearheading the Iron Foundry Community efforts for .NET support on Cloud Foundry so we figured we needed someone to bring the hamma to the battle, nobody better than Thor for that!

I’ll have a regular write up of snippets, code and other things I’m working on here so subscribe and give me a follow on Twitter (@adron) and App.net (@adron). Also, for official open source releases of the project check out the Iron Foundry Organization site that has the Iron Foundry downloads, source, Thor and the official Iron Foundry Blog.

So 2012 is Coming Up, It’s the End of The World, and There Are Lots of Conferences!

On that note, here are a few of the conferences I’d like to attend. I expect I’ll be able to make it to about 70% of them. If you’re going to any of these, message me on Twitter @Adron (or leave a comment below) and we’ll have a coffee, beer, or beverage of your choice and chit chat about cloud computing, utility or grid bits, software development, node.js, testing, or what have you.  Cheers!

UX Related Conferences

Even though UX is by no means my specialty or something I generally am hired to work on, I personally consider UX to be one of the most important aspects of software development that exists. UX is the difference between “insanely great” applications and “shit” (I’m quoting Steve Jobs here, so excuse the harsh language, but it is true). With this serious focus on UX I find it extremely helpful to attend UX related conferences, talk to UI/UX pros, and generally be involved as often as possible in effective and great ways to build experiences for users around systems.

  • SXSW in Austin, Texas: I’d love to attend this conference, it is however unlikely. Matter of fact, it is probably one of the only conferences I’d travel to Texas for. One of these days, I hope to attend.
  • IA Summit in New Orleans, Louisiana: There are two primary reasons this event is on my list. 1, it’s in New Orleans and I always love to go visit my haunts from when I lived in the area and 2, the content looks pretty good & some solid people are attending.  Conversations and after conference events should be extremely enlightening.
  • An Event Apart in Seattle, Washington: Again, a great conference series and it’s also in a great location. Seattle (which I happen to live here right now too) is a great place for conferences, a great place to think, and a great place for a convergence of user experience thought leaders.
  • UX Week in San Francisco, California: San Francisco is another awesome city for these types of events (not distracting and annoying like Las Vegas). There will be some great collaboration and networking with great content. I’ll be putting forth an effort to attend this event.
  • WebVisions in Portland, Oregon:  It’s in Portland, Oregon. Nuff said. Well ok, I’ll add a little more. WebVisions often has some of the best content around. I’ve never attended one of the conferences officially but have interacted with and been in town when the conference takes place in Portland. The beauty of Portland is that the events easily spill over into the most walkable, drink friendly, foodie heaven, easy to talk in environment, and one of the most technologically advanced and versed populations in the United States – thus providing WebVisions a GREAT reputation in my opinion.
  • Siggraph in Los Angeles, California: This event really opens the mind up to some amazing new interactive experiences with technology.

Dev Related Conferences

Ok. I’m a software developer, no real need to define why I’m going to these.  😉

  • Agile Open Northwest in Seattle, Washington: This is a great open spaces conference about agile ideals, practices, and approaches. It’s a great conference to get together with advocates and practitioners of agile/lean/XP or whatever and discuss what works, doesn’t, and what might work. Stepping into the future of being a better, faster, higher quality, happier and more bad ass team!
  • WhereConference in San Francisco, California:  This event has multiple wins.
    • It’s in San Francisco, which is generally always cool.
    • It’s an O’Reilly Conference, which are generally always awesome.
    • Mobile + Geographic Location Finding is one of the most interesting and coolest realms of technology these days.
    • There are some spectacularly cool people attending that I’d love to spend some face to face time with and discuss where they’re headed, where they see location going, and generally have a drink or three and having a great time.
  • OSCON in Portland, Oregon: This event is one of the, if not the best Open Source Software Conference in existence!  Again, anything in Portland makes it pretty easy to attend, and the environment in that city just adds all that much more to the conference!

Cloud / Utility / Big Data Computing Conferences

I’m a big advocate of geographically dispersed, grid compute, utility computing, platform infrastructure or software as a service, on autoscaling, scalable, and big data wielding, high query hadooping systems, AKA Cloud Computing. I see it as the future of high quality, fast paced, massively scaled, intelligent systems and development of these systems. Maybe I’ve drank the kool-aid, either way I’m hedging my bets with the cloud computing realm and not on legacy & traditional hosting and methods associated with that. Thus, I’m going to as many of these conferences too!

  • Cloud Connect in Santa Clara, California: I’ve no idea how this conference is, nor if it will be good, but I’m signed up already. Anyone I know going? Anyone I don’t know but should? Ping me.
  • Strata in Santa Clara, California: Again, never been to Santa Clara nor a conference here. I’ve heard good things about Strata so am working to attend. There is some really good content and more than a few people I’d like to catch up with.

Windows Live Microsoft Word Document UX vs. Google Docs UX

Before even getting to the point of writing a document, there are very distinct user experiences (UX). I have my own preferences, but I am very curious what others think.

When somebody decides to create a new Microsoft Word Document in the Windows Live Site on their Skydrive they’re presented with this interface.

Windows Live Skydrive Microsoft Word Document

Windows Live Skydrive Microsoft Word Document (Click for full size image)

To start typing in the prospective document you much choose your security, enter a document name, and save the document.  It assumes that you absolutely want a unique name, will have a document viewable by the entire Internet, and that you have to save it just to start.

In Google Docs though the approach is entirely different.  When you create a new Google Document you are presented with the actual document interface as shown.

Google Docs Interface (Click for larger image)

Google Docs Interface (Click for larger image)

Google Docs assumes that you want to immediately start typing your word processor document. It also assumes you may not know what you want to name the file, nor that you even need to actually save it, until you of course start typing. At that time the document starts to automatically save. It also assumes that this is your document and you don’t want the entire world to be able to view the document.

So I’m left with questions:

  • Which interface do people really prefer?
  • Do people prefer to start typing immediately or filling out the three pieces of information like the MS Word Doc requires?
  • One appears to allow for immediate productivity for the document creator vs. the other one. Is that just my observation or do others see it that way also?
Please let me know your two cents, I’m truly curious about which UX works out better for you.

Tip To The MSDN Team, Props on the Site

Yesterday I wrote a somewhat critical blog entry to Microsoft regarding their completely unintelligible use of domains, subdomains, and messaging around products.  I’m not sure who exactly is responsible, but I hope they read it.  I didn’t mean it as a personal attack or anything, just simply as a “please get yourself in line and respect what you do” type of message.

So that leads me to this open letter.  This open letter is primarily about giving props for a job well done on the site redesign of MSDN.  First off though I want to mention one thing.

Tip #1 – The URL is still a bit funky with the .aspx and en-us in it.  Clean that thing up. http://msdn.microsoft.com/en-us/default.aspx should look more like http://msdn.microsoft.com/ and that’s it.  NOTHING else.  At least get rid of the “default.aspx” page hanging around there.  Almost every major framework stack; PHP, Ruby on Rails, etc has removed the index.htm and at least left clean RESTful URIs.  It is a beautiful thing, make yours beautiful too.

Ok, now for the props!

Dear MSDN Team,

I wanted to write this open letter and commend the team on the redesign of the MSDN Site.  First let’s take a look at the MSDN Site.

MSDN Site Home Page

MSDN Site Home Page

At the very top of the page two things I like immediately.  Some UX Folks might not, but I dig the UX design around the UI for the four links; desktop, web, cloud, and phone.  The simple nature, basic styles of the blocks, and the hover over effect creates a very immediate communication of what each is focused around.  I read blog entry by Pete Brown about the MSDN and these blocks, which Microsoft’s Team dubbed “Hubs”.  There is a FAQ also available on the redesign.

The other point I’d like to draw attention to is that someone put the news on the upper part of the page.  Here I caught the “Visual Studio Lightswitch” News bit.  Of course, one could say it’s just a big add, but it really is more about MSDN news bits.  But I digress, I like that the upper section has that instead of digging around for it.

The sections below that have various links, that often don’t show up on the initial page display.  Scrolling down to search through this information is acceptable though, as it is something one would dig through and have intent around something very specific.

desktop

desktop

desktop

The desktop section of the site is setup following the new guidelines around simplification of data presentation.  This is something that has been sorely needed on MSDN for years.  Not sure if one remembers the nasty nested to the Nth degree treeview on the left hand side.  I don’t know where it went, but I’m really happy it is gone.  Now the layout is simple and to the point, with the key points of information being laid out in multiple steps.

web

The web section, again follows this new redesign model of user experience.

web

web

cloud

The cloud section again follows this new redesign…

cloud

cloud

phone

This too follows the redesign.  Simple, clean, and straight forward presentation of information.

phone

phone

I also like how the messaging around the primary platforms is clear.  It almost doesn’t’ seem like marketing is involved, which in my opinion is the best type of marketing.  When marketing kind of acts as the librarian that is helping you to find that key piece of information.  It’s very cool, it’s almost kind of cool in a way.

To summarize, I’m impressed.  MSDN Team, you guys have done a great job.  Props!

A Frequent Business User and Customer,
Adron @ Composite Code

That’s it for open letters for a while.  Now I’m off to do a bit of coding with Azure for the Phone using Visual Studio 2010.  🙂