Category Archives: UI Design

Using CSS Media Queries for Responsive UI Design

Using something like Bootstrap for a responsive UI covers most of the bases. But if you need more control, it’s a good idea to get familiar with Media Queries in CSS. It might come in handy some time, plus that is what Bootstrap uses under the hood as well, and it never hurts to learn how the tools you use work. The Mozilla page on media queries goes into just the right amount of detail and gives you a good outline of everything you can do with it.

To be very brief though, here is how you use a media query in CSS:

@media query { normal-css }

This scopes it so that the CSS within the query (i.e. normal-css above) is applied only when the condition dictated by query is true. So, you could use it to say apply this style when the width or height or in a given range, or if we’re using a given type of device, or color setting, and so on.

The following, for example, sets the background color of the body to red only when the view area width is 300 pixels or more (stupid usage scenario, I know, but you get the point as to how this could be used to make your UI responsive in all sorts of ways):

@media (min-width: 300px) { 
   body {
     background-color: red;
   }
}

A powerful tool to have in your chest when building user interfaces.

Bootstrap Modal with AngularJS

We’ll look at a relatively low hanging fruit in case you’re working with vanilla AngularJS and Twitter Bootstrap and are not relying on other add-ons such as AngularUI’s Bootstrap extension. One common need I have is to be able to show or hide Bootstrap modals based on a property on my view-model. Here’s a simplified view of the controller:

var app = angular.module('app', ...);
...

app.controller('ctrl', function ($scope, ...) {
    ...
    $scope.showModal = false;
    ...
});

And here is the HTML:

<a href="#myModal" data-toggle="modal">Show Modal</a>
...
...
<div id="myModal" data-backdrop="static">
    <div>
        Modal text goes here.
        <br/>
        <button data-dismiss="modal">Close</button>
    </div>
</div>

In order to maintain separation of concerns, I want to be able to show or hide the modal as the value of showModal changes. This is another good use for directives in AngularJS. As with the datepicker example, we need a directive that will add a watch on link and use the JavaScript methods available with Bootstrap to control the modal, rather than the data-toggle or data-dismiss attributes.

The directive would then look like:

app.directive('akModal', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch(attrs.akModal, function(value) {
                if (value) element.modal('show');
                else element.modal('hide');
            });
        }
    };
});

Here, we are calling the Boostrap method modal on the element to which the directive is applied, i.e. the div that is the modal container. The HTML modified to work with this directive then looks like:

<a href="#" ng-click="showModal = true">Show Modal</a>
...
...
<div ak-modal="showModal" data-backdrop="static">
    <div>
        Modal text goes here.
        <br/>
        <button ng-click="showModal = false">Close</button>
    </div>
</div>

The modal display is now bound to showModal. Note how we got rid of data-toggle (along with the id on the div) and data-dismiss. Now, if some property on the view-model needs to control whether the modal is displayed, then it would not make sense to have a link hardwired to trigger the specific modal anyway. The case for data-dismiss is different though.

Another thing to consider is – if you have a lot of modals and a lot of different view-model properties controlling them, you are going to have a lot of watches, which you probably don’t want. If we make the assumption that mostly you’re going to have one modal visible at a time (unless you have multiple levels of modals going on – in which case personally I think you would need to rethink the UX you are providing), you can make something more generic such as a modalService that will work with a single modal div and have a showModal operation that takes the content to display in the modal. There would need to be a corresponding hideModal operation as well, of course. I plan to explore this further.

Now, back to the data-dismiss thing. What we have at the moment is somewhat of a one-way binding. It would be ideal if this could be made two-way so that closing the modal using data-dismiss automatically set showModal to false. At the moment, I have not given this enough effort to be able to do it in an acceptably performant way. If someone has, I would love to hear about it.

Dancing with Responsive Design

I have been hearing about responsive design on and off for some time now, and it has always appealed to me as a pattern to follow for web-based user interfaces. CSS3 is obviously quite powerful and media queries provide a relatively easy way to build one unified UI that looks great on PCs, but then adapts and shape-shifts accordingly when viewed on a smartphone or tablet without having to completely re-implement a “mobile site” as so many do today. Since UI design is not my core area, though, I never could quite gather the energy to do something with it. Then I saw support for responsiveness in the new Bootstrap 3. Like with all other aspects of web UI design, it makes responsiveness that much easier as well. As added motivation, I tried out my To Do application in my smartphone – and it looked awful.

In the spirit of rolling my own, my next application I wanted to build for myself was a simple list maker that I could use for groceries, shopping, and other checklists. Since something like that would find its best use across multiple types of devices (and since I am not quite ready to jump into native mobile development just yet), it seemed like the perfect opportunity to try out responsive design with Bootstrap. After getting over a slight upgrade shock after switching from Bootstrap 2.3 to 3 (helped quite a bit by this post here), things became quite easy.

The end result is my new application, so very imaginatively titled My Lists– deployed here (again, be aware that this is a development instance), and open sourced here. Here is a screenshot of what it looks like in PCs and in tablets in landscape:

Image

Here is a screenshot of what it looks like in a smartphone and in tablets in portrait:

Image

Rest of the technology is pretty much the same as To Do– .NET REST API, AngularJS and MongoDB.

Responsive design takes a little getting used to, but I think is quite worth it.

Yes, One More “To Do” Application

UPDATE (2015/1/7)

This application has been re-written from scratch using some new stuff I learned. The new application is called CHORE. Understandably, the links to the application and source code as mentioned in the original post don’t work anymore. I did not update them as I want the original post to stand as is. Here, however, are relevant links to the new application:

The application is hosted here.
The source code can be found here.
More technical details can be found here.

Yes, I figured the one thing that the world really needs is one more To Do application. Seriously, though, when I was working on Finance Manager, I realized I made a few mistakes, specifically with the way I was doing Angular as well as building a REST API. I therefore wanted to build something simpler- yet something that I would personally use, and in the process try to do it “more right” and learn something in the process as well. I think two of the key new things I learned building this application was routing with Angular and working with MongoDB. I ended up building a Mongo provider for theCommons Library as well. I also think this servers as a better example of how to marry TypeScript with Angular.

Here’s a screenshot:

Image

I had my complaints about Astrid, but was getting used to it when it got yanked out of existence all of a sudden by Yahoo (good for them, though). Rather than trying to go and look for something else that worked for me, I decided to build it and learn something in the process as well (which sits well with my thoughts on when to roll your own as a developer – probably a post on that soon to follow). With this application I can create nested categories, create tasks within those categories, give them due dates and start dates – and walk them through a work-flow of created, started, in progress and done (or just created and done – depending on what kind of task it is). Two features I really like that I missed in Astrid is the ability to bulk import tasks from plain text – and the ability to perform bulk actions.

This time, I also made sure I could actually deploy it to the cloud once I was done with it. It is deployed here, using AppHarbor. Since I’m too cheap to want to pay for a To Do application, I’m using the free instance. I intend to use this for my own personal use, but if you plan to use it – be aware that this is a free, development instance and could disappear tomorrow. I would love it, however, if you wanted to look around and offer me feedback.

Again, the application is deployed here, and the source code can be found here. More technical details can be found here.

Other than the obvious gaps to fill (as marked by the many “TODO”s in the source code), one thing I definitely want to do at some point is build a mobile front-end to this – and also make the web UI use responsive layout (if you open the web application in a phone, it looks really messed up). Then there is always that colossal task of going back and fixing mistakes I made with Finance Manager.

Finance Manager

A bunch of things I’ve been working on and have blogged about have culminated into an actual application that uses all of it. Finance Manager is a SPA web application I built for my own use to keep track of my finances. This application allows me to create periodic budgets and record all my transactions. I can then look at my budgeted versus actual amounts based on those transactions. This was already something I was doing with Excel spreadsheet. I took what I was doing and created a domain model out of it, and built this application around it. It is not quite feature complete and not deployed anywhere yet, but I have open sourced the code.

Here’s a quick screenshot of the Transactions tab:

finman

I considered deploying this application on AppHarbor, but I found that while the application in its current state works for me personally, it is not quite ready to be deployed, for a few reasons:

  • It is not quite cloud ready in terms of TypeScript and NuGet settings, configuration, logging, etc.
  • It is not quite ready for the general public in terms of features:
    • You can’t sign up as a new user and create your own workbook.
    • The “Setup” tab that would let you set up lookup values for a workbook has not been built yet.
    • There is no “Administration” interface that I could use for user management.
    • I haven’t had time to put together a nifty landing page.

I do plan to work on all the above issues and at some point make this application available on the cloud though.

Back to the application itself, in terms of general architecture, it’s a pretty small application – there’s a small data access layer with a service layer on top of it. The services are built so as to communicate in terms of data contracts that represent REST resources. The web application then consists of a small MVC component that renders the initial view. The rest of actual data in/out happens through a REST API that is called by a JavaScript-heavy frontend.

In terms of implementation/technologies, the application uses:

  • The Commons Library– and therefore MEF for DI and extensibility, and providers as needed
  • XML file based configuration store provider and text file based logging provider
  • A SQL Server database accessed using the Fluent NHibernate data access provider
  • A T4 based modeling kit to generate entities and repositories from JSON models
  • Web application based on ASP.NET MVC and a REST API using ASP .NET Web API
  • Frontend based on TypeScript, AngularJS and Bootstrap
  • Web based SSO using Google authentication provided by DotNetOpenAuth

So, there you go, I put it all together.

TypeScript, AngularJS and Bootstrap: The Killer Combo

After having recently used this combination, I am in love with it. For those unfamiliar with any of these, here are quick one liners:

TypeScript is a JavaScript superset from Microsoft that compiles down to JavaScript and adds static typing and other neat features like classes and what not. It is worth mentioning that none other than Anders Hejlsberg (the father of C#) was involved in its development.

AngularJS is a JavaScript framework geared towards building rich and testable single-page applications. This one comes from none other than Google.

Bootstrap is a JavaScript/CSS based UI library from Twitter that provides you with a foundation to build killer UIs with little effort.

These are all open source and have good community support. It is interesting that a combination of technologies from Microsoft, Twitter and Google would gel so well. If you’re building a web application with a JavaScript-heavy frontend (which is what the tide has shifted to these days), I have found AngularJS to be most superior so far. I should qualify that by saying by experience with similar frameworks other than Angular is limited to Backbone and Knockout – but I believe that is a sufficient sample. There are countless comparisons of these frameworks side by side all over the web, so I will not get into details on that. As far as Bootstrap is concerned, the ease with which I can now build amazing professional looking and consistent user interfaces is amazing. I would go so far as to say I would not need a designer to do any of my UI or CSS work. Whatever CSS I know (and everyone should know a little CSS, I guess) proves more than sufficient. If you dabble in LESS, you can even get the LESS version of Bootstrap and go crazy.

I believe AngularUI also has a Bootstrap extension, although I have not used that particular library yet. Just vanilla and Angular are proving to be enough for me now, but it is nice to know it’s out there should I ever need it. Now, since you’ll be writing quite a bit of JavaScript with Angular, it has been my experience that TypeScript makes your job easier by an order of magnitude. No more functions within functions within functions to get the behavior of a class – no more weird bugs due to casting errors that went unnoticed. There is a TypeScript declarations file for Angular available here – just drop it in and you’re ready to roll with Angular and TypeScript. Getting that IntelliSense pop up when you type “angular” and hit the dot is a nice feeling.

Two things I miss from Knockout though are how easy it was to subscribe to observables and the notion of computed properties. I know you can do all of this in Angular, but the way you did it in Knockout still seems more intuitive to me. Perhaps I have not fully transitioned to the Angular way of thinking yet. One bone to pick also with TypeScript – it would be nice if there was an object initializer syntax similar to C#. One of the powers of JavaScript is being able to assign an object literal in JSON directly to a variable. That leads to abundant brevity (is that an oxymoron?) which is always good in code. With TypeScript, if your variable is of type Foo, you can’t just assign an object literal that resembles a Foo instance as the compiler has no way of knowing what it exactly is. So you’re stuck with having to create a new Foo, assign all the properties, and so on. I wish they would introduce object initializers. That would be gravy.

All this aside, if you are contemplating building rich web frontends, I strongly recommend this combination.