Building a Windows 8 App with HTML5: How to create a small RSS reader in 30min

Building a Windows 8 App with HTML5: How to create a small RSS reader in 30min:
Starting from scratch, we’re going to learn through these 2 tutorials how to build a small RSS reader with HTML5, CSS3 and WinJS, the Microsoft JavaScript framework for Windows 8. We will then build a WinRT application targeting the Windows Store. We’ll try also to follow the Windows 8 UI design guidelines by using Expression Blend 5. If everything goes fine, you should be able to follow these 2 articles in 30 minutes.

Using Psd To Word Press Conversion For Awesome Designs

Using Psd To Word Press Conversion For Awesome Designs: It is a well known fact that Photoshop is the best designing software. Thus many designers are nowadays using Photoshop [...]

Simple example - Node.js, Restify, MongoDb and Mongoose:

Simple example - Node.js, Restify, MongoDb and Mongoose

Before I start, the Backbone.js parts of this tutorial will be using techniques described in "Organizing your application using Modules to construct a simple guestbook.

Getting started

To easily understand this tutorial you should jump straight into the example code base.

Example Codebase

Example Demo

This tutorial will assist you in saving data(Backbone.js Models) to MongoDb and retrieving a list(Backbone.js Collections) of them back.

The technologies

This stack is great for rapid prototyping and highly intuitive. Personal note: I love using JavaScript as my only language for the entire application (FrontEnd/BackEnd/API/Database). Restify is still in early development but is essentially just an extension of Express. So for anyone needing more stability you can easily just substitute Express in.

Node.js

"Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices."

Restify

"Restify is a node.js module built specifically to enable you to build correct REST web services. It borrows heavily from express (intentionally) as that is more or less the de facto API for writing web applications on top of node.js."

MongoDb

"MongoDB (from "humongous") is a scalable, high-performance, open source NoSQL database."

Mongoose

"Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment."

Building the server

In the example repository there is a server.js example which can be executed by running node server.js. If you use this example in your own applications make sure to update the Backbone.js Model and Collection definitions to match your server address.

Restify configuration

The first thing to do is require the Restify module. Restify will be in control of handling our restful endpoints and returning the appropriate JSON.

var restify = require('restify');  
var server = restify.createServer();
server.use(restify.bodyParser());

Note: bodyParser() takes care of turning your request data into a JavaScript object on the server automatically.

MongoDb/Mongoose configuration

We simply want to require the MongoDb module and pass it a MongoDb authentication URI e.g. mongodb://username:server@mongoserver:10059/somecollection

The code below presupposes you have another file in the same directory called config.js. Your config should never be public as it contains your credentials. So for this repository I have added config.js to my .gitignore but added in a sample config.

var mongoose = require('mongoose/');
var config = require('./config');
db = mongoose.connect(config.creds.mongoose_auth),
Schema = mongoose.Schema;  

Mongoose Schema

Mongoose introduces a concept of model/schema enforcing types which allow for easier input validation etc

// Create a schema for our data
var MessageSchema = new Schema({
  message: String,
  date: Date
});
// Use the schema to register a model with MongoDb
mongoose.model('Message', MessageSchema); 
var Message = mongoose.model('Message'); 

Note: Message can now be used for all things CRUD related.

Setting up the routes

Just like in Backbone, Restify allows you to configure different routes and their associated callbacks. In the code below we define two routes. One for saving new messages and one for retrieving all messages. After we have created our function definitions, we attach them to either GET/POST/PUT/DELETE on a particular restful endpoint e.g. GET /messages

// This function is responsible for returning all entries for the Message model
function getMessages(req, res, next) {
  // Resitify currently has a bug which doesn't allow you to set default headers
  // This headers comply with CORS and allow us to server our response to any origin
  res.header("Access-Control-Allow-Origin", "*"); 
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  // .find() without any arguments, will return all results
  // the `-1` in .sort() means descending order
  Message.find().sort('date', -1).execFind(function (arr,data) {
    res.send(data);
  });
}



function postMessage(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  // Create a new message model, fill it up and save it to Mongodb
  var message = new Message();
  message.message = req.params.message;
  message.date = new Date();
  message.save(function () {
    res.send(req.body);
  });
}

// Set up our routes and start the server
server.get('/messages', getMessages);
server.post('/messages', postMessage);

This wraps up the server side of things, if you follow the example then you should see something like

http://backbonetutorials.nodejitsu.com/messages

Note: Again you must remember to change the Model and Collection definitions to match your server address.

Setting up the client (Backbone.js)

I've actually used the latest copy of http://backboneboilerplate.com to set up the example page.

The important files you will want to check out are;

• views/dashboard/page.js
• views/guestbook/form.js
• views/guestbook/list.js
• models/message.js
• collections/messages.js
• templates/guestbook/

Saving a message

First of all we want to setup a template for showing our form that creates new messages.

<textarea class="message"></textarea>
<button class="post-message">Post Message</button>

This template gets inserted into the DOM by views/guestbook/form.js, this Backbone view also handles the interaction of the form and the posting of the new data.

Let us create a Backbone Model that has the correct URL for our restful interface.

define([
  'underscore',
  'backbone'
], function(_, Backbone) {
  var Message = Backbone.Model.extend({
      url: 'http://localhost:8080/messages'
  });
  return Message;
});

We can see how we require our predefined model for messages and also our form template.

define([
  'jquery',
  'underscore',
  'backbone',
  'models/message',
  'text!templates/guestbook/form.html'
], function($, _, Backbone, MessageModel, guestbookFormTemplate){
  var GuestbookForm = Backbone.View.extend({
    el: '.guestbook-form-container',
    render: function () {
      $(this.el).html(guestbookFormTemplate);
      
    },
    events: {
      'click .post-message': 'postMessage'
    },
    postMessage: function() {
      var that = this;

      var message = new MessageModel();
      message.save({ message: $('.message').val()}, {
        success: function () {
          that.trigger('postMessage');
        }
      });
    }
  });
  return GuestbookForm;
});

Note: trigger is from Backbone Events, I binded a listener to this view in views/dashboard/page.js so when a new message is submitted, the list is re-rendered. We are setting the date of the POST on the server so there is no need to pass it up.

Retrieving a list of messages

We setup a route on our server to generate a list of all available messages at GET /messages. So we need to define a collection with the appropriate url to fetch this data down.

define([
  'jquery',
  'underscore',
  'backbone',
  'models/message'
], function($, _, Backbone, MessageModel){
  var Messages = Backbone.Collection.extend({
    model: MessageModel, // Generally best practise to bring down a Model/Schema for your collection
    url: 'http://localhost:8080/messages'
  });

  return Messages;
});

Now that we have a collection to use we can setup our views/list.js to require the collection and trigger a fetch. Once the fetch is complete we want to render our returned data to a template and insert it into the DOM.

define([
  'jquery',
  'underscore',
  'backbone',
  'collections/messages',
  'text!templates/guestbook/list.html'
], function($, _, Backbone, MessagesCollection, guestbookListTemplate){
  var GuestbookList = Backbone.View.extend({
    el: '.guestbook-list-container',
    render: function () {
      var that = this;
      var messages = new MessagesCollection();
      messages.fetch({
        success: function(messages) {
          $(that.el).html(_.template(guestbookListTemplate, {messages: messages.models, _:_}));
        }
      });
    }
  });
  return GuestbookList;
});

The template file should iterate over messages.models which is an array and print out a HTML fragment for each model.

<% _.each(messages, function(message) { %>

<p><%= message.get('message') %></p>
<em><%= message.get('date') %></em>

<% }); %>

This actually sums up everything you need to know to implement this simple example.

Conclusion

Example Codebase

Example Demo

In this example you should really be using relative URL's in your collections/models and instead setting a baseUrl in a config file or by placing your index.html file on the restful server.

This example is hosted on GitHub therefore we had to include the absolute URL to the server which is hosted on nodejitsu.com

On a personal note, I have of recent used the Joyent, Nodejitsu, MongoDbHq stack after they have now partnered up and I have nothing but good things to say. Highly recommend you check it out!

As always I hope I made this tutorial easy to follow!

Get in touch with me on twitter, comments or GitHub!

Relevant Links

Organizing Your Backbone.js Application With Modules

Beginners Guide : Ways to Add CSS Files in HTML

Beginners Guide : Ways to Add CSS Files in HTML: CSS (Cascading Style Sheets), the style sheet language is most commonly added to website pages that are written in XHTML [...]

Many Simple Models over One Complicated Model

Many Simple Models over One Complicated Model:

I see it again and again.
When they have invested time and energy in a model (tool, framework, method), people have a tendency to make their models more and more complicated. “Let’s add another dimension.” “Let’s deepen the domains.” “Let’s add some columns or swim lanes.” “Let’s draw an extra diagram.”
But complexity thinkers know better. They understand you need different approaches for different contexts. It is better to apply different models to different problems.

Each systems approach is useful for certain purposes and in particular types of problem situation. A diversity of approaches, therefore, heralds not a crisis but increased competence in a variety of problem contexts.

- Michael C. Jackson, Systems Thinking

This means it makes more sense to use multiple simple models instead of one complicated model. Having a toolkit of methods and frameworks, which each fail in their own way, is a smarter approach than relying on one method or framework to deal with all situations.

Complexity itself is anti-methodology. It is against "one size fits all."

- Tom Petzinger, Interaction of Complexity and Management

Of course, it’s very human to hold on to the model you had already invested in. In behavioral economics it’s called the endowment effect. We value more what we already have, because we own it. It’s irrational, but natural. And especially those who have created their own method or framework, will usually cling on to it like Bashar Hafez al-Assad to his presidential chair.

The more work you put into something, the more ownership you begin to feel for it.

- Daniel Ariely, Predictably Irrational

It makes sense to realize that holding on to your favorite method or framework is predictably irrational. The sensible thing to do is to invest in multiple models, and multiple approaches.
Don’t extend your diagram to accommodate an extra dimension. Just erase it, and start from scratch.
(image: House Democrats' Health Plan)

5 Steps Guide For Developing Joomla Website

5 Steps Guide For Developing Joomla Website: Five simple steps and you get started with your Joomla website. If you are looking for guide lines for developing [...]

Your HTML5 Questions 20

Your HTML5 Questions 20:
We’re back again to answer some more of your questions. This time we’ve included a bonus answer so you’ve got six to go at, rather than the usual five!

In this post, we’ll cover an XMLHttpRequest query, how to define sections, understanding outlines, which markup to use for a social bar, using HTML5 with a legacy site, and hidden headings for accessibility.

XMLHttpRequest #

Kieran asked:

I have a test web page where I read the contents of a text file in my dropbox public folder using XMLHttpRequest. However my code works fine in IE but does not work in firefox. I thought XMLHttpRequest2 would work with HTML5. Can you help? Here is the code:

<!DOCTYPE html><html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>JS file reading</title>
  <!--<link href="layout.css" rel="stylesheet" type="text/css">-->
</head>
<body>
  <script type="text/javascript">
    var oRequest = new XMLHttpRequest();
    var sURL = "http://dl.dropbox.com/u/34358808/test1.pkl";

    oRequest.open("GET",sURL,false);
    oRequest.setRequestHeader("User-Agent",navigator.userAgent);
    oRequest.send(null)

    if (oRequest.status==200) alert(oRequest.responseText);
    else alert("Error executing XMLHttpRequest call!");
  </script>
  Reading files with javascript
</body>
</html>

I wouldn’t recommend running that as a synchronous request.

That said, I can’t see how your code would work. You’re making a cross-domain request, and Dropbox hasn’t enabled CORS (as far as I can see — and I did a couple of initial checks).

Maybe give XHR2 a better read and check out CORS, which is what I think you want.

Bottom line, since you’re hitting Dropbox, unless you do something like a JSONP request (and modify the content appropriately), I don’t think you’re going to be able to achieve what you’re shooting for here.

— Remy

Defining Sections on Home Page and Category Pages #

Özer asked:

An example website is www.kahome.com. I have no problem with header footer aside etc. However, I am confused while using article on homepage and category pages.

The homepage contains main menu, an important image, a brief information text, some important seasonal category links (changing seasonally), news section (dynamically changing) and secondary categories at the bottom.

First: Centered main image <div id="orta"> should be tagged as article or not?

Second: <div id="sidebar-2"> with brief company information should tagged as an article or aside? (it is currently aside because of CMS layout but i can change it)

Third: seasonal category links <div id="ana"> is tagged as article. Is it true?

Fourth: for the category page, there is a collection of products and they are completely tagged in <article>. Should each product link be tagged as sub articles (they have just title, image, 3 words description) or is it better to use <section> for each product box?

Last question is about your sectioning system: In html5doctor.com homepage sectioning, “article id=opener” contains a featured article (sub article) and an aside section with recent comments. However there is no top level article in “opener” section.

For “more posts from HTML5 doctor” section, <section> is used as main frame and <article>s are nested in it.

What is the difference between of those two sections and what is the purpose of such usage? (Probably detailed answer to this question will also answer my questions above.) Thank you for your kind interest.

Hi Özer,

1. The image in the center of your homepage is not an article, it isn’t a standalone piece of content (like a news post or shop product) and appears to be just a nice image to spruce up the homepage. However, if the photo of the table was one of your products and you were using that space to advertise that product with a link through to the product, perhaps some text content like a name and description, that could be considered an article.
2. If that company information box was just on the homepage as a little introduction, I would consider it just part of the homepage and therefore not an <article>. If it had a heading, I would probably use <section> rather than <div> and make it part of the document outline. See our article on document outlines for more on this.
3. I would consider the seasonal categories area a <section>, if you added a heading like “Seasonal Categories” to the document outline, and then each category within that could be an article as they summarise the standalone content that is a category page.
4. I personally don’t see a problem with using <article> for each of your products in a listing. If you think of it like a news feed, perhaps even via RSS, each product is a standalone entity and should be treated as such. We have examples of this in our post about <article> (see the section entitled “A <section> containing <article>s”).

Finally, even though you aren’t marking up a blog, Dr Bruce’s article Designing a Blog with HTML5 may prove useful in helping you understand how and when to use <section>, <article>, and other elements.

Hope this helps! Mike

Outline View #

Tarun asked:

I have a very small question, regarding outline view in html5.

Problem is in HTML5 we need a heading tag in each section, article, nav etc. for outline view. But in a document there are many places where we do not need to display any heading for an article, section or nav etc.

So there are two solution i know are below:

1. Set display none to heading not need to show. But the problem is it’s not good for SEO purpose. Search engine may blacklist if they find lot of sections with display none property.
2. Set a big value to text-indent so that they will not display, but again same problem. it’s not good for SEO.

Please give me a proper solution for that. Thanks in advance :)

I think <article>s often need a heading (but not necessarily if the <article> is a comment, nested in a parent article). Whether or not you have heading on sections, <nav> is entirely up to your content authors and designers.

If you don’t need them, don’t add them.

— Bruce

HTML5 Element for a Social Bar #

Ibo asked:

I was wondering what HTML5 tag to use for the a social bar (Facebook and Twitter links, etc). Is there a common practice for sectioning social links? Should a social bar be defined as a section or should it be as grouping links? Has a tag like <social></social> ever been considered for the HTML5 standard? Could a tag like this be beneficial to SEO?

Even though I might be a rookie at coding html, I take great pride and comfort in coding semantically correct html.

A design I made has a social bar on the very top of the page. Should I include it the header section like I do with the main navigation tags? In coding html, is this the best practice?

<header>
  <div id="social">...</div>
  <h1>...</h1>
  <nav>...</nav>
<header>

Seems to me that a social bar is peripheral to your content rather than introductory or navigation, and therefore shouldn’t be in the <header>. As it’s peripheral, I’d probably put in in <aside> — most likely just a plain old <div>, but either way not in a header.

— Bruce

HTML5 with an Older Site #

Clodagh asked:

I have been requested to build a HTML5 area within the confines of a site that is not HTML5. Is this possible and how would it work with doctypes? I would greatly appreciate any advice you can give on this.

Solution #1 (preferred)

Change the doctype for the whole site. Assuming it already has some kind of doctype (and therefore works in standards mode rather than quirks mode), all existing content and functionality will be unchanged and new stuff will be fine.

Solution #2

If you can’t change the doctype, you can use an obsolete permitted doctype — that is, just add the HTML5 areas and leave the doctype alone.

— Bruce

Hidden Headings for Accessibility #

Tim asked:

I have been seeing more of these pointers popping up lately advising to place a heading (h1 etc.) before each section in our document telling what the section is. For example, <h1>Site Navigation</h1> placed immediately before the nav that outlines your main site navigation. The presumption in these cases is that you would then be hiding the text via text-indent so that it didn’t appear to visual site visitors, but would be available for sight-disabled users so they know what the section is and so that the document outline is correct and sections. This seems odd to me and I’ve struggled with why. Is this a good practice?

See Webcredible and About.com.

Good question, and I’m considering writing an article about it. It’s come about because it’s well-known that people with screenreaders often navigate a page (or derive a preliminary mental map of its structure) via its heading structure. Here’s a YouTube video by a blind web developer explaining how he does this. In JAWS, for example, a user can hit the H key to jump from heading to heading, hit “2″ to go to the next <h2>, “3″ to go to the next <h3>, and so on. (This is why I recommend that you don’t make all headings into <h1>s in the hope that the HTML5 Outlining algorithm will deal with it, because until browsers actually understand that, screenreader users will get a completely flat hierarchy. That’s changing, though; Jaws 13 supports the h1-only technique in Internet Explorer 9 and Firefox. See Accessible culture for more).

However, power users of screenreaders have other mechanisms to navigate a page. Since the Webcredible article you cite (dated 2007), many assistive technologies now allow navigation via ARIA landmark roles. HTML5 mints new elements like <nav> and <aside> that have similar semantics to those ARIA roles (ARIA can be used in any markup language, including HTML4 and SVG).

Thus, because a user can get to the <nav> through other means, it can be argued that having a heading “navigation” is redundant. Or not: my own blog has headings for navigation types such as “categories” and “recent comments”, but I don’t have a heading “main nav”, “main content”, or “footer”.

I don’t do it for two reasons. First, it feels redundant to me. The structural semantics are there for user agents to consume. Second, I dislike using CSS to hide content from the view, not because of worries about SEO penalties, but simply because it feels wrong to me.

But your mileage may vary.

— Bruce

Got a question for us? #

That wraps up this round of questions. If you’ve got a query about the HTML5 spec or how to implement it, you can get in touch with us and we’ll do our best to help.

Related Posts:

• Document Outlines
• Your Questions #16
• Avoiding common HTML5 mistakes
• Your Questions Answered #5
• Your Questions Answered #7

Your HTML5 Questions 20 originally appeared on HTML5 Doctor on October 9, 2012.

11 Must Have Free WordPress Plugins For Every WordPress Installation

11 Must Have Free WordPress Plugins For Every WordPress Installation:
WordPress does not need any introduction; it has become one of the most commonly used blogging platforms. It comes with a plethora of plugins to make your blogging experience even more interesting and enjoyable. WordPress plugins not only add additional functionality to your blog but will also make them look visually appealing. If you look into WordPress Plugin Directory, you will find more than six thousands plugins to choose from.
In this round up, we are sharing a collection of 11 extremely important WordPress plugins that are required for every WordPress installation. This list contains some important plugins to let you secure your blog from spam and help you attain good ranking on different search engines.
Akismet
Akismet Possibly the best way in the world to protect you from web spam.

Contact Form 7
It allows you to flexibly design the form and mail. You can manage multiple contact forms as well. In addition, it supports many features including AJAX submitting, CAPTCHA, Akismet spam filtering, file uploading, etc.

Google (XML) Sitemaps Generator for WordPress
This plugin generates a XML-Sitemap compliant sitemap of your WordPress blog. This format is supported by Ask.com, Google, YAHOO and MSN Search.

WP Google Analytics
This plugin allows you to use the powerful Google Analytics to track your WordPress stats. It’s easily configurable to:

All in One SEO Pack
WordPress SEO plugin to automatically optimize your WordPress blog for Search Engines.

White Label CMS
The White Label CMS plugin is for developers who want to give their clients a more personalised and less confusing CMS.

WP-DB Manager
Allows you to optimize database, repair database, backup database, restore database, delete backup database, drop/empty tables and run selected queries. Supports automatic scheduling of backing up, optimizing and repairing of database.

cformsII
cforms is a powerful and feature rich form plugin for WordPress, offering convenient deployment of multiple Ajax driven contact forms throughout your blog or even on the same page.

WP-PageNavi
Adds a more advanced paging navigation interface.

Conditional Captcha
Essential Plugin Along with Akismet to Combat Real Spam

Login LockDown
Limits the number of login attempts from a given IP range within a certain time period.