Backbone.js tutorial for beginners – part 1/2

Level: intermediate

Backbone.js is popular JavaScript library, used heavy to create single-page web applications.

The library was constructed using RESTful JSON interface and model–view–presenter (MVP) pattern. The creator of Backbone.js is Jeremy Ashkenas – author of underscore.js and CoffeeScript.

Backbone.js tutorial for beginners

Backbone.js needs only one dependency to work: Underscore.js (>= 1.5.0).

Example – working with Backbone.js

var object = {};
_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "an event");

Library introduces us to another level of abstraction. When working with Backbone, we can stop looking at our Web application from JavaScript DOM point of view.

With Backbone.js we represent our data as a model, that can be created, verified (validation), deleted, or saved on the server.

Backbone.js has four fundamental concepts (layers):

– Backbone.Model

– Backbone.View

– Backbone.Router

– Backbone.Collection.

Functional programming in JavaScript and the underscore.js library

Level: intermediate

Functional programming is a programming methodology being a variation of declarative programming, in which functions belongs to the fundamental values, and the emphasis is on valuation of (often recursive) functions.

It’s used also by the underscore.js library, which supports functional programming in JavaScript.

Functional programming in JavaScript and underscore.js

This JavaScript library offers a variety of facilities available in Prototype.js (or e.g. in Ruby language!), BUT doesn’t overload the native JS objects.

On underscore.js another popular library is based: Backbone.js! The author of both libraries is also the creator of CoffeeScript.

Examples of use – underscore.js

_.map([1, 2, 3], function(num){ return num * 3; });
// => [3, 6, 9]

In such a simple way we can perform mapping of all the values in the list given as an argument.

_.times(4, function() { console.log("JS") });

This example will print “JS” in the console four times.

Underscore.js contains more than 100 useful functions, such as each, map, filter, find, invoke.

QR codes in JavaScript!

Level: intermediate

The QR Code (Quick Response) is alphanumeric, two-dimensional, square graphic code, invented by the Japanese company Denso Wave in 1994.

With these codes we meet more frequently. Today’s article is about how to work with QR codes in JavaScript. It’s quite simple with the right tools.

QR codes in JavaScript

There are many solutions for this purpose, so it’s good to try a proven solution in the form of JavaScript library / jQuery plug-in. Writing such a library on your own is quite ambiguous task, which takes more time and effort.

Let’s do a small review of the tools, which can really support our work with QR codes in JavaScript.

QRCode.js

This is a JavaScript library to generate QR codes. It has no dependencies. Here is an example using the configuration options:

var qrcode = new QRCode("test", {
    text: "http://javascript-html5-tutorial.com/",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

Website:

http://davidshimjs.github.io/qrcodejs/

Interesting JavaScript libraries

Level: intermediate

In today’s article we have compiled some interesting JavaScript libraries, which we used in some projects. A lot of them can make our projects more attractive, other are typically tools supporting work with the code.

Interesting JavaScript libraries

Tinycon

Favicon management from JavaScript! With this library we can manipulate an icon in the title bar of the tab. For example we can add animation or show more interesting information, retrieved dynamically via AJAX (e.g. amount of new events, messages, etc)… when the user is viewing other tabs / pages.

Project on GitHub:

https://github.com/tommoor/tinycon

Change your website into a virtual book – Turn.js

With this interesting JavaScript library, we can transform the content of our website / presentation in the virtual book in pleasant way. Sub-pages will be displayed as the next pages of “book”. The whole thing is animated.

Example:

HTML

<div id="flipbook">
  <div class="hard"> Turn.js </div>
  <div class="hard"></div>
  <div> Page 1 </div>
  <div> Page 2 </div>
  <div> Page 3 </div>
  <div> Page 4 </div>
  <div class="hard"></div>
  <div class="hard"></div>
</div>

JavaScript

$("#flipbook").turn({
  width: 400,
  height: 300,
  autoCenter: true
});

Add the cover and contents. An example below.

JavaScript and HTML5 tutorials – creating tools and nice effects

Level: intermediate

From time to time we search interesting stuff on various websites. Today we present a small collection of things, that we were interested in. The tutorials also covers other topics like PHP, MySQL, etc.

JavaScript and HTML5 tutorials – creating tools and nice effects

1. Sliding single-level menu

Menu is one of the important components of any site. In this tutorial author have prepared a modern looking single-level menu. The menu looks really interesting, and have a sliding panel which highlights the active elements.

1

Read more:

http://www.script-tutorials.com/sliding-single-level-menu/

2. Creating Pinterest-like script

More and more people likes Pinterest. If you would like to create own, similar project, here is a nice tutorial and a great starting point.

It’s not only about JS or jQuery, but also PHP and more, so creating a full web application.

Read more – in six parts:

http://www.script-tutorials.com/pinterest-like-script-step-1/

WYSIWYG editors in JavaScript, jQuery and HTML5

Level: intermediate

Hello! Today we present a small set of WYSIWYG editors. They are based on Javascript, of course, but also on newer possibilities offered by HTML5.

WYSIWYG editors

Sometimes we need to add such editor to our projects (e.g. for admin panel of CMS, product descriptions in e-commerce software, etc). There are many ready-to-use, very good solutions.

1. Redactor WYSIWYG

This is an easy to use jQuery plugin, implementing WYSIWYG. It’s a well-designed, flexible editor with good UX.

redactor-wysiwyg

Website:

http://imperavi.com/redactor/

2. The wysihtml5 editor

This project has been created based on HTML5 and JavaScript, does not need jQuery. A big plus for cross-browser – supports popular browsers.

Compress JavaScript and CSS files

Level: intermediate

Minimizing / compression of JavaScript and CSS code is often encountered technique used to optimize the loading time by reducing weight of the file. Today we will try to briefly tell about the tools used for this purpose.

Compress JavaScript and CSS code

Recently someone asked me about it, so we have today’s small article.

We can establish the principle, that files with JavaScript and CSS placed in a production application are already compressed. Of course always keep the source version, to modify if necessary.

To accomplish the task, we can use one of the compressors. I recommend YUI Compressor:

http://yui.github.io/yuicompressor/

Download and unpack:

https://github.com/yui/yuicompressor/releases

Run the command line, and we can compress. Attention: as the tool is a .jar file, we need Java environment in our system.

Call the .jar file with parameters input_file.js -o output_file.min.js.

For example (note the version in the name of compressor):

c:\yuicompressor-2.4.8>java -jar yuicompressor-2.4.8.jar gameFramework.js -o gf.min.js –charset utf-8

We get the output file.

A set of JavaScript tools

Level: intermediate

From time to time we publish articles about interesting and useful tools. Every day we realize different tasks, so we get to know new interesting tools. Or sometimes we find just something interesting.

JavaScript tools and more

OK, let’s take a look.

1. Creating beautiful presentations in HTML5 using reveal.js

This simple framework is am easy to use tool for creating presentations in JavaScript and HTML5. We define the individual slides that make up our whole presentation.

The library provides, among others, UI with transition effects between presentation elements.

Resources:

http://lab.hakim.se/reveal-js

https://github.com/hakimel/reveal.js/

http://mrbool.com/how-to-create-presentations-in-the-browser-with-reveal-js/27264

2. ASCIIFlow

That is a drawing tool, whereby our graphics consist of ASCII characters.

Tutorial Twitter Bootstrap

Twitter bootstrap in nutshell

Level: intermediate

Twitter Bootstrap (TB) is a CSS framework on the MIT license, developed by Twitter. It contains z set of tools to facilitate the creation the UI of pages and web applications. The framework is based mainly on ready solutions of HTML and CSS (LESS).

Tutorial / Twitter bootstrap in nutshell

This an excellent solution can be used for styling elements of our website / web application, among others: spectacular buttons, forms, dialogs, navigation, and others (Twitter Bootstrap also uses the JavaScript language).

Since longer time, during the creation of the web project in PHP, where the layout is not ready yet, I quickly add Twitter Bootstrap to the project, to make features not only working, but also good looking.

Working with such a solution is nice, so let’s try it in action.

First of all – get TB from the homepage:

http://getbootstrap.com/

Now let’s add files to our project – HTML5 page, e.g.:

/css/bootstrap.min.css
/js/bootstrap.min.js

We can also include additional files, for example bootstrap-theme.min.css for the basic theme, or bootstrap-responsive.min.css. It also depends on the version of TB.

Additionally, at the website there is a tool to prepare custom configuration of Twitter Bootstrap, which we want to get:

http://getbootstrap.com/customize/

How rich is the set of the offered components , we can see here:

http://getbootstrap.com/components/

TB is generally great! It’s also a very good choice to work with RWD.

Web storage tutorial – applications that store data locally

Level: intermediate

Today we present the tutorial about creating a simple web application, which stores data in localStorage. The app will be able to save and store the settings of its own appearance.

Web storage tutorial

1. Let’s start by adding jQuery and simple CSS styles for UI elements:

...

<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>

<style>
#main {
  border: solid 1px #00e;  
  margin: 0 auto; 
  padding: 5px; 
  text-align: center; 
  width: 33%;  
}
</style>
...

2. Create a simple form in the body section:

<body>
  <section id="main">
    <form onsubmit="javascript:storeSettings()">
      <label>Select font size: </label><br />
      <input id="your_font" type="number" max="50" min="5" 
        value="14">
      <br />

      <label>Select border size: </label><br />
      <input id="your_border" type="number" max="10" min="1" 
        value="1">
      <br />

      <label>Select color for background: </label><br />
      <input id="your_color" type="color" value="#ffffff">
      <br />

      <p>
        <input type="submit" value="Save settings">
        <input onclick="removeSettings()" type="reset" 
          value="Remove settings">
      </p>
    </form>
  </section>
</body>

Now we can code handlers in JavaScript.