Posts in Category: CSS

Building a SPA with html5, web api, knockout and jquery - Notes 

Categories: CSS Javascript Notes WebApi

Building single page apps with html5, asp.net web api, knockout and jquery by JohnPapa.net and Pluralsight

Wonderful, just wonderful. This is one of the best and most complete tutorials I have ever seen. A must for every web developer. Non-developers should at least watch the application, to see how user friendly and responsive it is. The senior developer will get plenty of pointers to useful frameworks and libraries, while the beginner will get clear explanations and the why and how things are done. The included source code is very reusable and the only things that might need to be added to be able to use this in an enterprise environment are some secure token service and caching. (the use of breeze or upshot is recommended but not shown in the tutorial, probably because these frameworks are very new?) Enjoy. 
Why SPA?
  • As rich and responsive as a desktop app
  • Persisting important state on the client
  • Mostly loaded in the intitial page load
  • Progressively downloads features as required
  • 2-way data binding (MVVM)
  • Tombstoning / dropped connections 
Technologies used:
  • CSS
  • LESS
  • Media Queries and responsive design
  • HTML5
  • Modernizr
  • HTML5 Boilerplate
  • AMD - Async Module Definition
  • Revealing Module Pattern
  • Prototypes
  • MVVM
  • jQuery - DOM/AJAX (+jquery.mockjson +jquery.activity)
  • knockout.js - Data Binding/MVVM (+Commanding +ChangeTracking +Templating +Validation)
  • amplify.js - Data Push/Pull, Client Storage, Messaging
  • Sammy.js - Nav/History
  • require.js - Dependency Resolution
  • underscore.js - Javascript Helpers
  • moment.js - Date parsing and formatting
  • toastr.js - UI Alerts
  • qunit - Testing
  • POCO Models
  • JSON and AJAX
  • Web API
  • Unit of Work Pattern
  • Repository Pattern
  • Single Responsibility Principle (SRP)
  • Entity Framework (EF Code First)
  • SQL Database
  • NuGet
  • Ninject IoC
  • Web Optimization
  • JsFiddle.com / JsBin.com
  • Sublime / Notepad++
  • Mindscape - less in visual studio
  • Resharper
  • Responsinator.com - check in different sizes
  • ElectricPlum.com - iphone emulator
  • http://jpapa.me/responsivedesignbookmarklet
  • Web Standards Visual Studio Plugin
  • Web Essentials Visual Studio Plugin
3.DATA LAYER (EntityFramework 5.0)
SessionBrief (uses IDs)
Session: SessionBrief (gets full properties)
[Key] (uses Id as default)
HasRequired( ).WithMany( ).HasForeignKey( ) 
override OnModelCreating : modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
CodeCamperDbContext : DbContext
   public CodeCamperDbContext() : base(nameOrConnectionString: "CodeCamper") { }
   public DbSet<Session> Sessions { get; set; }
Database.SetInitializer( );
HasRequired (s => s.Speaker).WithMany(p => p.SpeakerSessions).HasForeignKey(s => s.SpeakerId);
SRP - Single Responsibility Principle
public interface IRepository<T> where T : class
   IQueryable<T> GetAll();
   T GetById(int id);
   void Add(T entity);
   void Update(T entity);
   void Delete(T entity);
   void Delete(int id);
public class EFRepository<T> : IRepository<T> where T : class
   protected DbContext DbContext { get; set; }
   protected DbSet<T> DbSet { get; set; }
   public virtual T GetById(int id)
      return DbSet.Find(id);
Unit of Work Pattern decouples webapi controllers from the repositories and dbcontext
4. JSON with WebApi
Ninject IoC Container
kernel = new StandardKernel();
config.DependencyResolver = new NinjectDependencyResolver(kernel);
get throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.NotFound));
put return new HttpResponseMessage(HttpStatusCode.NoContent);
response = request.createresponse(HttpStatusCode.Created);
response.Headers.Location = new Uri(Url.Link(RouteConfig.ControllerAndId, new { id = ...
testing : endpoints respond with success? return expected data? crud works?
var json = config.Formatters.JsonFormatter;
json.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
[Required(ErrorMessage = "Title is required")]
config.Filters.Add(new ValidationActionFilter());
//Puts the model errors in a JObject and returns them with
content.Response.CreateResponse<JObject>(HttpStatusCode.BadRequest, errors);
5. SPA Frame
Fallback for jQuery if CDN fails
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="script/lib/jquery-1.7.2.min.js"><\/script>')</script>
To activate bundles, the compilation debug has to be false.
bundles.UseCdn = true 
Modernizr goes separate since it loads first
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/lib/modernizr-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jsmocks").IncludeDirectory("~/Scripts/app/", "*.js", searchSubdirectories:false);
bundles.Add(new StyleBundle("~/Content/css").Include(...);
bundles.Add(new StyleBundle("~/Content/less", new LessTransform(), new CssMinify()).Include("~/Content/styles.less"));
6. Javascript Structure
  • Who is responsible for what?
  • Global scope pollution
  • High code re-use
  • Separation of concerns
  • Revealing Module Pattern
  • Bootstrapper.js will prime the data and setup the presentation
jQuery's deferreds, promises and $.when() at http://api.jquery.com/jquery.when/
ModularDemo to show js module dependencies: http://requirejs.org
define('alerter', ['dataservice'], function (dataservice) { ... });
requirejs.config({ baseUrl:'scripts', paths: { 'jquery' : 'jquery-1.7.2' } });
<input class="filter-box" type="text" 
data-bind="value: sessionFilter.searchText, 
valueUpdate: 'afterkeydown', 
escape: clearFilter"
placeholder="filter by model and brand"/>
_.reduce(timeslots, function (memo, slot) {
day = moment(slotStart).format('ddd MM DD');
configureExternalTemplates = function () {
infuser.defaults.templatePrefix = "_";
infuser.defaults.templateSuffix = ".tmpl.html";
infuser.defaults.templateUrl = "/Tmpl";
ko.bindingHandlers.escape example
self.searchText = ko.observable().extend({ throttle: config.throttle });
WebEssentials Plugin
ko.bindingHandlers example for favorites icon
sessions = ko.observableArray().trackReevaluations()
Debugging Tip
<div style="border: white dotted thin; clear: both">
<h4>Sessions JSON</h4>
<pre data-bind="text:ko.utils.debugInfo(speaker())"></pre>
ko.utils.debugInfo = function (items) {
return ko.computed(function() {
return ko.toJSON(items, null, 2); // JSON.stringify(ko.toJS(timeslots), null, 2);
8. Data Services on the Client
  • DataContext, DataService and Model Mappers
  • SRP - Single Responsibility Principle
  • datacontext.sessions.getData({data: sessions});
It's faster to create the raw array and then stick it into an ko.observableArray, so you get only one event notification !
  • $.ajax() vs $.getJSON()
  • http://amplifyjs.com : Wraps Ajax calls, Always Async, Mock Data, Caching
var init = function () {
amplify.request.define('session-briefs', 'ajax', {
url: 'api/sessionbriefs',
dataType: 'json',
type: 'GET'
//cache: true
//cache: 60000 // 1 minute
//cache: 'persist'
dataservice.session.js vs mock.dataservice.session.js
$.mockJSON.data.TITLE = [
'Pick and choose from these lines',
'Bla bla bla',
  'more bla bla' 
var data = $.mockJSON.generateFrom Template({
 'sessions|100-120' : [{
'id|+1': 1,
title: '@TITLE',
code: '@LOREM', //just one word
description: '@LOREM_IPSUM' //just some text  
//some hardcoded to do some testing against
data.sessions[0].id = 1;
data.sessions[0].title = 'Single Page Apps';
if (_useMocks) {
dataserviceInit = mock.dataserviceInit;
config.useMocks(true); //can be used in your tests
Role of the Data Context
  • Caches client data (Stores data in memory)
  • Facade for Data Services (Simplified API)
  • HandlesDataRequestLogic (Cached then return else get and cache) 
sessions = new EntitySet(dataservice.session.getSessionBriefs, modelmapper.session, model.session.Nullo); 
EnititySet has mapDtoToContext, add, removeById, getLocalById, getAllLocal, getData, updateData
Prototypes in Javascript
  • Uses DataController that inherits from ApiController
  • Can get meta data from your WCF services
  • From the asp.net team
var dataSource = upshot.RemoteDataSource({
    providerParameters: { 
        url: constants.serviceUrl, 
        operationName: "GetProducts" 
    provider: constants.provider,
    entityType: "Product:#Sample.Models"
manager = new entityModel.EntityManager('api/todos');
var query = new entityModel.EntityQuery()
query = query.where("IsArchived", op.Equals, false);
  • Uses a Metadata action method on your controller (contextProvider.Metadata());
9. Navigation between views
sammy.get("#/sessions/:id', function (context) {
presenter.transitionTo( $(viewName), path );
  •  jQuery event delegation to the container (performance)
  • bindEventToList(config.viewIds.sessions, sessionBriefSelector, callback, eventName)
  • resharper ctrl-shift-f7 and ctrl-alt-down will find the selected word in file.
$(rootSelector).on(eName, selector, function() {
var session = ko.dataFor(this);
return false;
Adding page transitions
  • css3-transitions: http://caniuse.com or http://realworldvalidator.com
  • jQuery transitions if you want to go cross-browser
  • presenter.transitionTo();
Browser history
<button class="button-back" data-bind="command: goBackCmd"></button>
goBackCmd = ko.asyncCommand({
execute: function (complete) { router.navigateBack(); complete() },
canExecute: function (isExecuting) { return !isExecuting && !isDirty(); }
ko.bindingHandlers.command = { ... };
Cancel & Recall using amplifyjs
  • module amplify.store for client storage on old and new browsers
  • messenger module amplify.publish and amplify.subscribe
If changes and user clicks back button, we use toastr to display a warning message (http://nuget.org/packages/toastr).
sammy.before(/*/, function () { ... response = routeMediator.canLeave(); ... }
store.save(config.stateKeys.lastView, context.path);
This module wraps amplify, so it can easily be replaced with localstorage on HTML5
expires: config.storeExpirationMs in milliseconds
Alternatives for sammy.js
10. Saving, Change Tracking and Validation
self.dirtyFlag = new ko.DirtyFlag([
isDirty = ko.computed(function() {
return canEdit() ? speaker().dirtyFlag().isDirty() : false;
Asynchronous Commands 
(eg. disable save button once it is clicked and put status indicator)
saveCmd = ko.asyncCommand({
execute: function(complete) {
canExecute: function(isExecuting){
return !isExecuting && isDirty() && isValid();
<button data-bind="command: saveCmd, activity: saveCmd.isExecuting'>Save</button>
Explicit vs Implicit Save?
saveFavorite = function (selectedSession) {
if (isBusy) { return; }
isBusy = true;
var cudMethod = selectedSession.isFavorite()
? datacontext.attendance.deleteData
: datacontect.attendance.addData;
success: function() { isBusy = false; },
error: function() { isBusy = false; }
Use valueHasMutated() to tell and observable its value has updated.
Validate Data?
  • Using Knockout.Validation plugin.
self.firstName = ko.observable().extend({ required: true });
self.email = ko.observable().extend({ email: true });
self.blog = ko.observable().extend({
pattern: {
message: 'Not a valid url',
params: /[@]([A-Za-z0-9_]{1,15})/i
validationErrors = ko.validation.group(speaker());
isValid = ko.computed(function() {
return canEdit() ? validationErrors().length == 0 : true;
canLeave = function() {
return canEdit() ? !isDirty() && isValid() : true;
11. Mobility and Responsive Design with CSS and Less
  • Balsamiq to do mocks of gui
  • Web Essentials in Extensions and Updates of Visual Studio 2012
  • http://lesscss.org
  • Less: Variables, Mixins, Nested Rules, Functions and Operations
  • Media Queries
  • Testing for multiple devices: http://jpapa.me/electricplum 
@media only screen and (max-width: 1000px)
@media only screen and (max-width: 900px)
@media only screen and (max-width: 800px)
@media only screen and (max-width: 480px)
@media only screen and (max-width: 320px)
@media only screen and (max-width: 240px)
@media only screen and (max-height: 768px) {
.view-list { height: 330px; }


Selectors Overview 

Categories: CSS Javascript


* { any element }
#elementId * { all children of elementId } E { all tags E }
E F { all tags F descendants of E } E>F { all tags F direct children of E } // child combinator E+F { all tags F immediately preceded by sibling E } // adjacent selector E~F { all tags F preceded by any sibling E } // sibling combinator E.C { all tags E with class C }  // .C = *.C E#I { all tags E with id I } // #I = *#I E[A] { all tags E with attribute A } E[A=V] { all tags E with attribute A of value V } // eg. a[href="foo"] E[A^=V] { all E with attribute A value beginning with V } E[A$=V] { all E with attribute A value end with V } // eg. a[href$=".jpg"] E[A*=V] { all E with attribute A value contains with V }
E[A~=V] { all E with value in space separated list A }
a:link { anchors tags that not been clicked on }
a:visited { anchors tags that have been clicked }
X:checked { all checked radio and checkboxes }
X:disabled, X:enabled
X:after, X:before { generate content around an element } // eg. .crumb:after { content : ">" }
X:hover { styling element on hover over } // user action pseudo class
X:not(selector) // eg. div:not(#container)
X:only-child { target elements wich are only child of parent }
X:only-of-type { elements that have no siblings within parent container }
X:first-of-type { first sibling of its type }
X:nth-child(n) {
nth-child is 1-based all the other selectors are 0-based }
X:nth-child(Xn+Y) { every x element }
X:nth-of-type(n) { select according to type of element }
X::first-letter { first letter of block elements }
X::first-line { first line of block elements }


:contains(foo) :file :header //h1 -> h6 :hidden :image //input[type=image] :input //input, select, textarea, button :not(filter) :parent //all elements that have children including text but not empty ones :password :radio
:radio:checked :reset :selected :submit :text :visible
:eq(n) returns nth matching element
:gt(n) elements after nth matching
:lt(n) elements before nth matching
E:has(F) all tags E with at least one F contained //only one nested level eg. foo:not(bar:has(baz))


/html//form/fieldset all <fieldset> elements direct under <form>
/html//form/*/input all <input> elements directly under exactly on element under <form>
//div/.. matches all elements that are direct parent to a <div>
//div[@p] all div elements with at least one <p>
position() equals :first
position()>n equals :gt(n)

CSS3 Overview 

Categories: CSS

A selector overview you can find at: https://ict.ken.be/selectors


@font-face { font-family: "My Font"; src:url("myFont.eot"); }
text-shadow:x y blur color; (ie -> filter:dropshadow)




LESS css 

Categories: CSS

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions:


Less for server-side compiler for .Net:


Syntax highlighting of '.less" files in visual studio: 


(do not use the same names for your .css and .less files cause the vs extention will compile the .less into .css)

Quick online testing:



While LESS can be used together with bootstrap, you could also go for a Sass, Compass & Foundation combination.