Create simple shop.

In this course we create Cart Widget that can be embedded into sites in order to allow its users to buy products and send orders to the site owner.

You'll learn how to:

  • Quickly prototype User Interface with Twitter Bootstrap.
  • Build REST API using NodeJS.
  • Use REST API in Browser with JavaScript.
  • Keep markup and code clean using Client Side Templates.
  • Simplify CSS styling using Browser live refresh.
  • Create dynamic Forms with JavaScript and validate it.
  • Instant reaction UI without blocking, waiting and progress.

Drawing UI

Shop and Cart



Learning JavaScript

Learning JavaScript is both interesting and hard at the same time. It's interesting because it's a nice and powerful language and hard because it has design flaws and unfixed bugs.

There are also adjacent technologies that usually confused with JavaScript, let's make it clear:

  • JavaScript - the language itself, also has official but less known name - ECMAScript.
  • HTML / XHTML - markup language for creating web pages (there's also CSS).
  • DOM (Document Object Model) - Browser JavaScript API for working with web pages.
  • AJAX, XHR - Browser JavaScript API to communicate with Server.

Most learning resources mix those technologies. It's ok if the goal is to quickly add some interaction to web page, but it makes it harder to learn more complex stuff.

Big advantage of JavaScript is that it's forgiving - it allows you to start without having good understanding of the language. But if you want to be efficient - you need to know the language itself. To learn how to use it efficiently read one of books below.

JavaScript: The Good Parts


Interesting toys for learning

Play Simple Canvas Game and investigate its source code. It's about two pages of JavaScript with detailed explanations.

Simple Canvas Game

Space Mahjong a simple Card Game (there's no dedicated repository for sources, but you can see it in the browser).


Functional Mixins in JavaScript

Functional Mixins is a flexible way to share functionality between objects.

From my experience it's more powerful than Class or Prototype based Inheritance, Mixins and even complex machinery like Ruby Object Model. But I believe the biggest advantage of it isn't the power but the simplicity, it's so simple that I wonder why it's so rarely used.

In this example we create Game Unit and add some basic functionality to it (source).

Creating simple Model

Defining Model that have only two methods - set to set attributes, and initialize - a constructor supporting setting attributes.