The second in the Backbone.js model and view walkthrough series. A little more detail in this tutorial about how Basic Auth tokens and custom http headers are sent to the RoR backend

This example introduces two new Model actions (swap and delete), illustrating how such actions can be handled within a Model’s View.

This is an extension of the example found here: http://arturadib.com/hello-backbonejs/docs/5.html

It is an interesting site where you can read about some of new developments in HTML 5 and try the browser compatibility test page where you can see how your browser stacks up out of a total score of 160 points.

It was interesting to note that Chrome finished first with 137/160, Safari second with 113/160, Opera third with 102/160, Firefox a sluggish 100/160, and the usual suspect Internet Explorer 8 (IE 8), Internet Explorer 9 (IE 9 )scoring a blazing 19/160 points.

The finals results were:

You can also read up abou stuff that is going on a Youtube in terms of new browser based features and Apple moving more towards HTML 5 video than flash.

I really think that the flash era is coming to an end very fast, unfortunately for Adobe. This is mainly because the advent of advanced javascript libraries like jQuery, and HTML 5 video there may be no need for the extra layer any more.

Related articles by Zemanta

• The Gradual Disappearance Of Flash Websites (smashingmagazine.com)
• The New IE9: More HTML5, CSS3, and No Windows XP (mashable.com)
• Opera: Downloads Have Tripled Since Intro of Browser Choice Screen (mashable.com)

Once you record your screencast, you can then manage and administer your own channel similar to a Youtube or Vimeo channel. You get the benefit of a sleek player that clearly distinguishes itself from the rest, simple and has basic sharing capabilities.

Here is a demo by Netuts of an editable list that takes advantage of HTML 5 and the localStorage attribute and works with compatible browsers.

This allows you to create, edit, update and delete elements, and keep the state of the browser even after you refresh the page. This used to be done using either a database or cookies but the nifty use the new localStorage:

More Info

Webstorage documentation – w3.org

localStorage demo -  people.w3.org

Basic information on localStorage – developer.mozilla.org

This time is the jMapping Google Maps plugin. So here is the usual skinny on the features and background:

Who?

What?

So what does this plugin do? i think the best thing is to give the description given by the author:

jQuery plugin for creating Google Maps from semantic markup

This plugin is designed for quick development of a page that implements a Google Map with a list of the locations that are specified within the HTML.

jQuery jMapping plugin

The plugin is fairly easy to get a handle on and allows you easily add info bubbles and embed HTML inside of the info-bubbles in an easy clean manner. The point is always to minimize number of interfaces to deal with and this adequately allows you to not even think of the Google Map API syntax and more on the business of coding your application.

Features

How?

1. Include the Google Maps API javascript

2. Add in the dependencies: MarkerManager 1.1,jQuery Metadata plugin 2.1 and MapIconMaker 1.1

3. Add in the HTML markup for the plugin

<div id="map"></div>

<div id="map-side-bar">
  <div class="map-location" data="{id: 1, point: {lng: -122.2678847, lat: 37.8574888}, category: 'market'}">
    <a href="#" class="map-link">Berkeley Bowl</a>
    <div class="info-box">
      <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 2, point: {lng: -122.4391131, lat: 37.7729943}, category: 'restaurant'}">
    <a href="#" class="map-link">Nopalito</a>
    <div class="info-box">
      <p>The best authentic Mexican restaurant in San Francisco.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 3, point: {lng: -122.4481651, lat: 37.8042096}, category: 'museum'}">
    <a href="#" class="map-link">Exploratorium</a>
    <div class="info-box">
      <p>A hands-on museum of science, art, and human perception in San Francisco.</p>
    </div>
  </div>
</div>

4. Add the jQuery to get the plugin to work

$(document).ready(function(){
  $('#map').jMapping();
});

I guess seeing is believing so i have embedded a demonstration below:

I think another great mapping plugin to get more control over your Google Maps applications using jQuery and the jMapping plugin.

There are plenty of examples to get started with and setup is a breeze, but it is important to remember that there are a lot of others out there so be sure to give them a whirl too.

Related articles by Zemanta

• Google Maps #2 Map Provider in US- #1 Mapping Site in US? Google Maps API (blumenthals.com)
• Maps in boxes, show your users where to go without making them leave (dtelepathy.com)