javascript

Nestable knockout web components

Web Components are the Next-Big-Thing™, the second-coming, etc etc etc. Yeah, so we’ve all been hearing about web components. How can we use them in a nestable, compatible way?

Background

A few years back the Javascript community discovered databinding. KnockoutJS (a pretty great data binding library) was the in thing. Then AngularJS came onto the scene and I stopped hearing about Knockout. Recently, people have been talking about web components. Web Components are a great way to make your code modular, more readable, and solve all your problems. Unfortunately Chrome is the only browser with a native implementation.

A search for “Web Components” takes you to Google’s Polymer framework, which isn’t a framework - but does give you Web Components. Unfortunately you need IE10 or better. Those of us working for large corporations or government departments generally have to support IE9. What to do?

Well, good news! Knockout implements Web Components - but we can’t call them web components, they are “web component inspired” components that happen to behave indistinguishably from web components, and they also happen to work in IE9. Great!

Why do I want web components?

Simply put, you can write code that looks like this:


<html>
  <body>
    <todo-list params="color: green;">
      <checkable-item>Write blog post</checkable-item>
      <checkable-item>De-clutter house</checkable-item>
    </todo-list>
  </body>
</html>

Nice, readable code - with nestable custom HTML elements.

How to do it

checkable-item web component

This is the view for our checkable list web-component, which will be displayed in our to-do list web component.


<!-- checkable-item-view.html -->
<div style="border:1px solid blue; margin: 5px; padding: 5px;">
  <label data-bind="text: labelText"></label>
  <input data-bind="checked: checkbox" type="checkbox" />
  <input data-bind="value: textField" type="text" />
</div>


// checkable-item-viewmodel.js
define(['knockout'], function(ko) {
    function CheckableItemViewModel(params) {
        this.labelText = params.labelText;
        this.textField = ko.observable();
        this.checkbox = ko.observable();
    }
    return CheckableItemViewModel;
});

todo-list web component

Here is our ‘container’ web component. Notice that knockout template binding in the viewmodel? That allows us to pass through HTML elements. It allows for the nesting of HTML within components. The $componentTemplateNodes contains the DOM nodes nested in the markup.


<!-- todo-list-view.html -->
<div style="border:1px solid red; margin: 5px; padding: 5px;">
  <strong>
    <div data-bind="text: componentText">
    </div>
  </strong>
  <!-- The line below this is where the magic happens -->
  <!-- ko template: { nodes: $componentTemplateNodes } --><!-- /ko -->
</div>


// todo-list-viewmodel.js
define(['knockout'], function(ko) {
    function ToDoListViewModel(params) {
        this.componentText = params.componentText;
    }
    return ToDoListViewModel;
});

Host Page

Here is our HTML page. Note that for it to work, it depends on requireJS, textJS, and KnockoutJS. I’ve placed my web components under a “/Components/” folder. I’ve omitted the dependencies and requireJS configuration from the example below, to keep things brief.

The important part is the component registration.


<html>
  <body>

    <h1>How to create knockout nested components</h1>

    <checkable-item params='labelText:"component that isnt nested"'></checkable-item>

    <todo-list params='componentText:"text passed to component"'>
      <checkable-item params='labelText:"nested component"'></checkable-item>
    </todo-list>

    <script>
    // this is how we register components
    ko.components.register('todo-list', {
      viewModel: { require: 'components/todo-list/viewmodel' },
      template: { require: 'text!components/todo-list/view.html' }
    });
    ko.components.register('checkable-item', {
      viewModel: { require: 'components/checkable-item/viewmodel' },
      template: { require: 'text!components/checkable-item/view.html' }
    });
    </script>
  </body>
</html>

There you have it. Go forth and create Web Components.

/eof

Finding a javascript performance gremlin

Performance issues in a JS app can be frustrating… especially when your app is convoluted soup of data-bound observables. Today I discovered a performance gremlin. I’ll walk you through the process of finding it and rectifying it.

The Symptoms

My team have been working on a large javascript application. We deployed it to a new environment, and started going through some shakedown tests. All seemed to be going well… until I loaded a certain view. Then I waited… and waited. 7 seconds later, the view loaded. I reloaded with a different set of test data. This time the wait was 12 seconds.

That view had worked fine in our lower level environments (loading in under 1 second), what was going on?

Investigation

The first order of business was to fire up the Chrome profiler. The profiler has an option for tracking heap allocations. The way it works is by taking a snap shot of js objects currently in memory, and comparing it to a 2nd snapshot taken at the end of the profile.

The profiler gives us a way to examine all objects retained (not cleaned up by the garbage collector). This is advantageous in two scenarios:

  1. We have a memory leak
  2. The app is spending an unexpectedly long time doing something

With the profiler fired up, and a profile completed - I started examining the output. The Total Cost column shows us the % of total profiled time spent on a line of code. With this in mind, I started at the top (100%) and looked for any large sudden drops in that value. A large drop in value indicates that (for the given line) a function call made in that code path has consumed a large amount of your total cost.

My culprit quickly became obvious:

chrome profiler

Notice the sudden drop from 100% to 50.52%? and a bit further down we can see the second code path - at 49.26%.

In both cases, out problem line is the place() method in the boot bootstrap-datetimepicker.js library.

The Cause

Here is the function concerned. I’ve highlighted the problem line:


if (!this.zIndex) {
                var index_highest = 0;
                $('div').each(function () {
                    var index_current = parseInt($(this).css("zIndex"), 10);
                    if (index_current > index_highest) {
                        index_highest = index_current;
                    }
                });
                this.zIndex = index_highest + 10;
            }

That line shows a jQuery selector querying every single div on the page to get the z-index. Once it finds it, the datepicker adds 10 to the value and uses that as its own z-index. Why would it do that? Simple - so the popup calendar will always display on top of any other page content.

There are some problems with this approach:

  • the date picker calendar is going to display on top of all other elements - including dialogs, overlays, or any other obnoxious controls you are using.
  • block elements other than divs can have a z-index too, so the code might not get the highest z-index anyway.
  • Single page apps typically have a ton of views in memory at any time, which are in the DOM, but not currently visible. That could be a lot of divs to iterate through!

Just how many divs could this thing be looking at?

oh dear

1746.

Now consider that the jQuery selector is being run for every date picker on the page. Life gets painful fast.

The Fix

The current version of the date picker has a way to set the z-index via a property. If we set a z-index, we bypass that problematic jQuery selector.

I went ahead set the z-index to a suitably high value, and reloaded the view.

BAM!

The view loaded in under 1 second, and I rode off into the sunset.

/eof

My first few hours with Visual Studio Code

Microsoft have released a new editor. This is Microsoft’s take on Sublime/Atom. It looks nice, it feels fast, and it can run on OSX or Linux (as well as Windows). I’ve been using it for work this morning - here are my impressions.

Visual Studio Code

You can download it here: Visual Studio Code Preview.

The big news is that Code is cross platform. It can run natively under OSX and Ubuntu, showing just how much Microsoft has changed direction. It will also excite my OSX-using co-worker - Jason - who constantly moans about having to start his Windows vm to run Visual Studio.

First Impressions

This is what you see when Code starts:

code main

My first thought is that it looks very much like Atom - which looks very much like Sublime.

When I jump in to update settings, Code takes me to a JSON file:

code settings

Settings are updated by overriding prperties in either user or workspace based settings files. Very sublime-like, and very nice.

To the left, we have a sidebar with our file explorer, search box, git integration, and debugger. Interestingly I didn’t see any options for TFS source control.

sidebar

The explorer is split into your working files and project view. Double clicking a file will open it and place it in your working files. Code has done away with tabs and is a much better editor because of it.

The Editor

The editor has syntax highlighting (as expected). It also has fantastic intellisense support. My last few projects have been javascript based, and I’ve found that in Sublime/Atom getitng intellisense style completion going is very hit and miss. When it does work, it has always felt like a hand-me-down half hearted effort compared to the joy of Visual Studio Intellisense.

Code’s intellisense is brilliant. It can negotiate require.js dependency trees. “Go to Definition” works. Peek works. “Go to symbol” works.

intellisense

I did find one annoyance. Code wasn’t quite sure about ES6, and gave some warnings about TypeScript (which I’m not using).

es6 intellisense

Given how fast the Javascript community moves, this should be fixed fairly quickly.

Looking to the top right of the editor, we see this row of buttons:

editor buttons

The buttons are:

  • split editor
  • Changes view
  • open preview

Splitting the editor gives you 2 panes (side by side). Change view displays differences compared to the checked in version in source control - a built in diff tool - awesome!

Preview is enabled if you are in a html or markdown file. It splits the view, and gives you a preview pane on the right which updates as you make code changes.

split view

What about column editing?

It’s in there! If you hold alt and click, you get a second cursor… and a third… and a forth… etc:

multi-cursor

This is the main feature that pulled me into Sublime editor. Code has a decent implementation (but I do miss being able to middle-click and drag - Sublime style).

Other nifty things

Here are a few other items I noticed:

  • there is a debugger, but only for node and mono. ASP5 support is coming soon. The debugger seemed to work ok when I gave it a test with a node.js app.
  • the search pane is great - better than any other editor I have tried. I can use regex, I can exclude and include files or folders and apply a filter - and I can do all of those things at the same time, easily.
  • it is built on Github Electron Shell, the same base Atom uses.
  • themes are supported

Overall

How is Code in general use? If you use Atom or Sublime, you’re going to be right at home. I haven’t found anything that has pissed me off. Code looks nice, and the defaults are sane.

The only thing I can really fault it for is the name. Try searching “Microsoft Code” in a search engine. Go on. Just try.

I like that I can take Code with me if I move to a different OS.

Code uses the same base as Atom (Electron), but unlike Atom - it doesn’t have issues of random lock ups or slow down. Code feels like a native editor. It feels fast.

In summary - I love Code! I wrote this blog post in Code, I previewed it in Code, and I checked it in in Code. If you’re a front-end developer, go get Code. Go!

/eof

Accidental NPM Packaging (and JSPM!)

Last week I created a package - an NPM. I didn’t intend to. I just wanted to use the Microsoft Signal-R javascript client, and I was surprised to see it wasn’t listed in the Node package repository.

How hard can it be to create a package anyway?

There are two great motivators for developers. Laziness and annoyance.

  • Laziness: “I bet I can automate this, so I can spend more time doing interesting things”.
  • Annoyance:“Why isn’t there an NPM package for this? what is this, the dark ages?!”.

I found myself annoyed when I decided to use Microsoft’s SignalR Javascript client. There was no JSPM or NPM package.

The package manager I was using is JSPM - a wonderful bundle of joy that can use either NPMs or git repos as a package source. Lets make packages!

Pre Conditions

You need:

  • npm (node package manager)
  • jspm (javascript package manager)
  • a git client
  • github & npm accounts

Make a JSPM github package


c:\\github> mkdir mypackage
c:\\github> cd mypackage
c:\\github\\mypackage> git init

Add a .gitignore file, and setup your github remote repo as your origin.

Now you need a package.json file. This file defines what your package is, what it depends on, who maintains it, and where it lives. It can define a lot of other things too, as defined by the package.json spec. We can create one with npm.


c:\\github\\mypackage> npm init

name: (mypackage)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\github\mypackage\package.json:

{
  "name": "mypackage",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

Edit your package.json to suit your project. Run it through a json validator. Once you’re happy with it, commit and push it to github:


c:\\github\\mypackage> git commit -a
c:\\github\\mypackage> git push origin master

Now you can test it. Add trying adding it to another project, directly from your github repo:


c:\\github\\mypackage> jspm install github:[youraccount]/[your repo]

Ok, hopefully that went well.

Create NPM package & add to NPM repo


c:\\github\\mypackage> npm publish

Update NPM package

/eof

Animating Aurelia

Have you heard of Aurelia? It’s Rob Eisenberg’s new framework. If you travelled forward in time two years and wrote a framework based on cutting edge tech, Aurelia would be the result. Aurelia is built on technology so new that the standards haven’t been ratified yet. I’m talking ES6, ES7, transpiling, a proper module loader, lambda expressions (arrow functions), computed properties, and more.

Aurelia

Now let’s use this massively powerful framework to animate a few boxes.

{% raw %}

2015-04-28 Article Updated

This article had some incorrect code listed, and was not making proper use of the Aurelia-Animator. I have corrected the text and updated the code samples. Thanks to commenter “firens” for giving me a heads up.

{% endraw %}

Applying CSS Animations in Aurelia

What we are going to do is this:

Have new databound elements fade in as they are added to the DOM, using CSS transitions. Then, we will update a counter and animate it.

To achieve our goal, we start by installing Aurelia’s animation library. Open a command prompt and add it to your project as follows:


$ jspm install aurelia-animator-css

If you haven’t seen jspm before, check it out. It isn’t limited to jspm packages. Jspm can also install and manage npm packages, as well as pulling modules down from github repositories.

CSS Animations

If you’re unfamiliar with CSS animations - don’t worry. They are straight forward. You define the key points in the animation - the starting state (0%) and the end state (100%). Apply CSS styles for those key points. The browser will extrapolate the rest. Here are the definitions for our “fade-in” and “flash” animations:


@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
/* for compatibility with older browsers */
@-webkit-keyframes fade-in{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

/* Credit goes to http://daneden.github.io/animate.css/ */
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

To use our new animations we need to create a CSS class to apply to our new DOM elements, and we need to define a class to animate our counter.


.fade-in-box {
  -webkit-animation: 0.5s fade-in;
  animation: 0.5s fade-in;

  border: 1px solid black;
  background: yellow;
}

.au-attention {
  -webkit-animation: 0.5s flash;
  animation:  0.5s flash;
}

Aurelia .js class

This is our view model.


import {inject} from 'aurelia-framework';
import {CssAnimator} from 'aurelia-animator-css';

// Use this decorator to inject the animator
@inject(CssAnimator)
export class ListExample{

  heading = 'List Example';

  listItems = [
    { listItem: 'pencils', qty: 2 },
    { listItem: 'glue', qty: 1 },
  ];

  // The inject decorator needs an appropriate constructor
  // to inject the animator.
  constructor(animator) {
    this.animator = animator;
  }

  addListItem() {
     this.listItems.push({listItem: 'packing tape',  qty: 1 });

     // then removeClass method returns a promise. We can use "then"
     // to chain it to addClass. This allows us to 'toggle' the class on the
     // element - and fire the animation
     this.animator.removeClass(this.elGridCount, 'au-attention')
        .then(this.animator.addClass(this.elGridCount, 'au-attention'));
  }

}

The code above creates a list of items and a button - which we bind our view to. Notice the nice ES6 syntax?

Aurelia .html view

This is our view.


<template>
  <section>
    <h2>${heading}</h2>

    <div><button click.trigger="addListItem()">Add List Item</button></div>

    <div role="grid">
      <div repeat.for="row of listItems" style="display: flex;">
        <div style="flex: 1 auto;" class="fade-in-box" >${row.listItem}</div>
        <div style="flex: 1 100px;" class="fade-in-box" >${row.qty}</div>
      </div>
    </div>

    Count: <div ref="elGridCount">${listItems.length}</div>

  </section>
</template>

In the view, we’ve defined a list, and used “repeat.for” to bind it to our view model list items. The button is bound to addListItem().

We’ve also added a count of our list items. Note the “ref” attribute on the counter. This attribute is used in the model to reference the element in the view.

Click!

When the user clicks the button, the following events occur:

Events related to new item addition

  1. The view model method addListItem() adds a new item to the list.
  2. Aurelia observes the new item being added, and triggers a DOM insert to add it to the grid.
  3. The browser begins the fade in animation for the new element

Events related to the counter

  1. The view model method addListItem() calls the aurelia animator with the removeClass method, and passes in addClass via a promise..
  2. The Aurelia-Animator removes the “au-attention” class (if it exists), then follows the next function in the promise chain (addClass).
  3. The Aurelia-animator adds the “au-attention” class to the “elGridCount” element in the view.
  4. The browser renders the “flash” animation referenced in the “au-attention” css class.

Pretty cool, huh? Some subtle, unobtrusive animations can really make a page seem slick. Just don’t go overboard, or you’ll take us back to the hellish days of animated gif wall papers.

You may be thinking “all the animator has done is add a css class to an element - the browser handled the animation part. What is the point of the animator?”.

Good question. The animator:

  • gives us events (such as animation start/end)
  • allows us to chain multiple animations together using promises
  • can also set/change the speed of animations
  • can stagger animations - one after the other

The animator uses Aurelia’s animator service - which provides an animation interface. The interface allows the animator service to have alternative implementations swapped in. For example, an implementation of the famo.us animation library) could be integrated. Exciting times ahead!

Aurelia-animator Supported Events

The DOM events supported by Aurelia’s animator are:

  • enter - Element enters view
  • leave - Element leaves view
  • removeClass - Class removed from DOM
  • addClass - Class added to DOM

The “move” event is defined, but not currently supported. It will return a failed result if you try.

/eof

SPA within a SPA? Durandal child routers

My current project had an interesting requirement come through: “We want the app to navigate to another single page app when the user clicks next on this page, but still have our widgets at the top”. The client wanted to utilise an existing durandal SPA inside a new durandal spa.

Note
This post is relates to the Durandal single page app framework. If you are not working with Durandal you are probably going to find it very dull.

This is the requirement I was given:

Ez-Anchor

A SPA within a SPA using Durandal. Why? well, we have some existing SPAs that the client wants to reuse, but they need to run within a new SPA - as part of a multi-step process.

There are two ways we can achieve this:

  1. Use Compose and directly load the view in your current SPA
  2. Use a child router

Using compose is easier and faster, is only useful if you only want to use a single view. If you have a bit of complexity in the 2nd SPA, child routers are going to give you far more flexibility.

Child routers?

Exactly what they sound like! A router that is logically a child of another router. They allow you to include an entire navigation structure from one spa, in a second SPA. As an added bonus you can raise events from one SPA to the other.

As I have multiple pages and some complexity to deal with, I’ve gone with a child router (rather than trying to jam in multiple views with compose).

Here is my folder structure:

  • Website
    • Apps
      • SPA1
      • Views
        • spa1_page1.html (spa2 host)
        • spa1_page2.html
        • spa1_shell.html
      • ViewModels
        • spa1_shell.js (router is here)
        • spa1_page1.js (child router is here)
        • spa1_page2.js
      • DataModels
      • SPA2
      • Views
        • spa2_view1.html
      • ViewModels
        • spa2_view1.js
      • DataModels
      • Shared
      • Services

Here is the sequence of events when the user loads the SPA:

  1. User navigates to app/SPA2/page1.
  2. The router notices that the route matches a splat route: /SPA2/*. The splat route points to a page containing a child router. The router is intelligent enough to determine that it should hand off to the child router.
  3. The second SPA hosted on the page attempts to load its default route.

Easy as that.

Notes

  • Your child router should logically be set up as a sub folder (meaning if your site is logically under /, your child router will need routes for /derp/) - if you try to use a flat structure, you are going to see “route not found” a lot, even when it should work. If you do get it to work, you may find that when you try to navigate out of your child SPA you get stuck in the child SPA, ending up with nested child SPAs. It’s like dividing by 0, and can cause the end of the world. No one wants that.
  • SPA2 needs to be hosted within a block element in a view in SPA1.
  • The child router can be configured to pre-append a path to all route destinations, allowing them to all be relative to a given page.
  • You may need to update your require.js conf to allow any services needed by SPA2 to be resolved.
  • If both SPAs rely on different libraries with the same name (for instance, both have a common.js within the SPA, with different content) you are going to have to refactor a little and give these libraries different names/Ids. Otherwise you will end up in dependency hell.

Code Sample

Here is the code we need to make it all work.

spa1_shell.js (Main Router)


define(function(require) {
  "use strict";

      var router = require('plugins/router');
      var system = require("durandal/system"),

      return {
        activate: activate
      };

      function activate() {

        var routes = [
            // Default view is the one with the empty string route
            { route: '', moduleId: 'Splash', title: 'Splash', nav: true },
            { route: '/SPA2/*', moduleId: 'PersonalDetailsHost', title: 'PD SPA', nav: true },
        ];

        return router.map(routes)
          .buildNavigationModel()
            .activate();
      }

spa1_page1.js (Child Router)


define(['plugins/router', 'knockout'], function (router, ko) {

  var childRouter = router.createChildRouter()
      .makeRelative({
        moduleId: '../../../../apps/SPA2/viewmodels',
        fromParent: true
      }).map([
            { route: '*SPA2', moduleId: 'spa2_view1', title: 'This is SPArta' },
      ]).buildNavigationModel();
  return {
    router: childRouter, //the property on the view model should be called router
    continueClick: continueClick // we still want to capture this event
  };

spa1_page1.html (Second SPA host)


Heading

SPA 1

Look, I could be a SPA 1 widget

/eof

Get Angular Running in 5 minutes

Want to try some Angular development? Need to get a dev environment set up? With a couple of automation tools, I’ll have you up and going in 5 minutes.

Prerequisites

You need the following two apps installed:

  1. Git
  2. Chocolately package manager.

Instructions

We are going to use the Angular Seed project template.

Fire up a command window, then run the following commands:

cd\git   (change this to the folder you intend to use)
git clone https://github.com/angular/angular-seed.git
cd angular-seed
cinst nodejs.install
"c:\Program Files\nodejs\npm" install
"c:\Program Files\nodejs\npm" start

You should now be able to open http://localhost:8000/app/ in your web browser.

What just happened?

git clone https://github.com/angular/angular-seed.git

This cloned Angular Seed to your local drive.

cinst nodejs.install

Chocolatey installed nodejs and npm (node package manager).

"c:\Program Files\nodejs\npm" install

NPM found the node based project in your current folder, and automatically installed the node dependencies.

"c:\Program Files\nodejs\npm" start

NPM launched the node.js instance, which happens to be available at http://localhost:8000/app/

Too easy! :)

For a full run down of how to use the template, go here: angular-seed on github.

/eof

Create a Single Page App in 2 Minutes using Ember App Kit

Single Pages Apps (SPAs) are the current flavour of the month. They have seemingly appeared from nowhere, but now it seems like every developer is talking about them. Wikipedia describes this pattern as follows:

A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. In a SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.

In my experience they offer some advantages over traditional apps:

  • Very responsive
  • Rapid development time
  • Data is usually provided via a REST API - making integration to other systems easy

along with some disadvantages:

  • Usually implemented with javascript (with all baggage it brings, such as horrendous function passing syntax everywhere)
  • Can be harder to debug - you can end up in dependency hell
  • Common tasks such as continuous integration is harder than with more mature patterns such as MVC (example: making javascript unit tests play nice with TFS).

The high responsiveness alone makes SPAs worth of investigating. Responsive web apps == happy users!

Now I’m going to show you how to build one.

Ok, I’m sold. What now?

So, where do we start? The SPA (and javascript) community is fast moving place. I have lost track of the number of new templates and libraries in use… Knockout, Angular, Durandal, Ember, Bootstrap, JQuery, etc, etc, etc. You can attempt to roll your own SPA from the ground up, or you can use a ready made project template - such as the Ember App Kit.

Ember App Kit gives you:

  • A nice project structure
  • GruntJS automation for minification, compilation, and deployment
  • Ember SPA framework - with Handlebar templates, routing, controllers
  • Unit tests with QUnit
  • Javascript 6 (ECMA6) modules (this is very very cool- a tool called a transpiler is used. ECMA6 takes Javascript into the realm of modern languages with a proper object model and sane module support)

Esentially, this kit gives us an out-of-the-box ready to go application. You can use it as a starting point to customise and build on for your own application.

Let’s get started

  1. Go to Ember App Kit’s git hub page and either (https://github.com/stefanpenner/ember-app-kit/archive/master.zip">Download the template (and unzip it to a folder) or clone the repo.
  2. Install Node JS if you don’t already have it. Ember App Kit uses Grunt to automate various tasks, and grunt uses Node.
  3. Once you have Node, open a command window and do a global install of Grunt using the following command: npm install -g grunt-cli
  4. Now install Bower. Bower is a client side package manager: npm install -g bower
  5. Still in the commend window, change to your new folder from step one. Install your npm dependencies: npm install
  6. Install your Bower dependencies: bower install

Now run the app

The following command will run your app in debug mode and watch for file changes (restarting the app as needed): grunt server

…and this is the result:

Where to now?

You now have a fully working Ember app ready to build on. Check out the Ember Sherpas guide as well as the getting started guide to get some in depth detail on some of the features mentioned above. Be sure to leave a comment if you find this helpful (or not so helpful).

References

/eof

Linking to Google Drive images from your Blog

A good number of us have content stored on google drive. Wouldn’t it be handy if we could reference that content in our blog posts? Good news, you can!

Steps

  1. Go to your google drive account.
  2. Ensure the folder the item is in, is shared (use the option Anyone who has the link can view).
  3. Share the item (use the same option as above). Copy the “Link to Share” link.
  4. Paste the link in the linkifier below
  5. Copy the link produced, and insert it into your blog via any of your usual methods

How it works

A link with this format: http://drive.google.com/file/d/[id number]edit?usp=sharing

is transformed using a regular expression, to this format:

http://drive.google.com/uc?export=view&id=(id number)

Google Drive Linkifier

Paste your Google Drive Link Here
Your link should have the format: https://drive.google.com/file/d/(id number)/edit?usp=sharing

Please post a comment if you have any problems.

/eof

VS2013 Web Essentials Zen Coding is a huge time saver for web developers

As a web developer, I have regularly found myself needing to type a large amount of HTML layout code. Your page starts to grow, and your eyes begin to glaze over as you type DIV after DIV.

Enter Zen Coding. In a nutshell, ZenCoding is a set of editor extensions, allowing a developer to use shorthand for common tasks. Microsoft have incorporated these extensions into Web Essentials for Visual Studio 2013.

I can’t overstate how awesome this feature is. For example, if I type:


div

…and then hit the tab key, I get:


<div>
</div>

A div has been added for me. But what if I need to add a CSS Id?


div#mainContent

// tab...
<div id="mainContent">
</div>

We can add a CSS class too:


div#mainContent.redbox

// tab...
<div id="mainContent" class="redbox">
</div>

Maybe we need some test data to check our layout? Zen even supports Lorem Ipsum!


div>lorem

// tab...
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
</div>

This part is cool. What if we want 3 table rows, each with 2 columns? (yes, I know, you all use pure CSS now - not tables)..


table>tr*3>td*2

// tab...
<table>
<tr>
        <td></td>
        <td></td>
    </tr>
<tr>
        <td></td>
        <td></td>
    </tr>
<tr>
        <td></td>
        <td></td>
    </tr>
</table>

If you find it isn’t working after installing Web Extensions, make sure you are using the release copy of Visual Studio 2013 (the latest version of Web Extensions doesn’t work with VS2013 pre-release). Let me know if you find more handy short cuts.

/eof