A Beginner's Guide to Using the Application Cache Introduction It's becoming increasingly important for web-based applications to be accessible offline. Yes, all browsers can cache pages and resources for long periods if told to do so, but the browser can kick individual items out of the cache at any point to make room for other things. HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface. Using the cache interface gives your application three advantages: Offline browsing - users can navigate your full site when they're offline Speed - resources come straight from disk, no trip to the network. The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. The cache manifest file The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Referencing a manifest file To enable the application cache for an app, include the manifest attribute on the document's html tag:
Getting Started Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example, <h1>Avatar</h1> tells the browser to display the text string "Avatar" in a heading 1 format. However, the HTML tag doesn't give any information about what that text string means—"Avatar" could refer to the hugely successful 3D movie, or it could refer to a type of profile picture—and this can make it more difficult for search engines to intelligently display relevant content to a user. Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo! 1. 1a. Your web pages have an underlying meaning that people understand when they read the web pages. 1b. itemscope and itemtype Let's start with a concrete example. To begin, identify the section of the page that is "about" the movie Avatar. Back to top 1d.
Getting started | Less.js How to Add Google Author Tags to Your Blog for Improved Search Results Does Google know you’re the author of the content you publish online? If you answered “I don’t know,” chances are you haven’t heard of a very powerful piece of HTML markup code known as rel=”author”. When implemented correctly on websites or blogs with authored content, this small addition to your articles can have a dramatic impact on how your content appears in Google’s search results. This article will explain exactly what rel=”author” is, why you need to pay attention to it and most importantly, how to set it up on your website or blog. What is rel=”author”? Most of us are familiar with the HTML anchor tag as a way to link out to content as seen in this image: Standard anchor tag linking to Google+ account. In that traditional format, the “href” part of the markup is called an attribute of the anchor tag that references the location of the content being linked to. Now, if we add the attribute rel=”author” to the anchor tag, the link looks like this: How to Implement rel=”author”
The best of <time>s (Article updated to correct some typos noticed by commenters, and clarify some aspects.) Avid HTML5 watchers will know that the <time> element was dropped from HTML, then re-instated, with more New! Improved! semantics. As before, you can put anything you like between the opening and closing tags – that’s the human-readable bit. Previously, you could only mark up precise dates. Now, “fuzzy dates” are possible: <time datetime="1905"> means the year 1905<time datetime="1905-11"> means November 1905<time datetime="11-13"> means 13 November (any year)<time datetime="1905-W21"> means week 21 of 1905 As before, times are expressed using the 24 hour clock. You can localise times, as before. <time datetime="09:00Z"> is 9am, UTC. Durations In New! The datetime attribute “D” for days, “H” for hours, “M” for minutes and “XQ” for seconds. You can separate them with spaces (but you don’t have to). Alternatively, you can use a duration time component. pubdate
File: README — Sass Documentation Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes. The new main syntax (as of Sass 3) is known as "SCSS" (for "Sassy CSS"), and is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. The second, older syntax is known as the indented syntax (or just "Sass"). Using Sass can be used from the command line or as part of a web framework. gem install sass After you convert some CSS to Sass, you can run sass style.scss to compile it back to CSS. sass --help To install Sass in Rails 2, just add config.gem "sass" to config/environment.rb. Sass can also be used with any Rack-enabled web framework. require 'sass/plugin/rack'use Sass::Plugin::Rack to config.ru. To use Sass programmatically, check out the YARD documentation. Formatting Sass has two syntaxes. Nesting
Sass Color Variables That Don’t Suck One of the best reasons to use Sass is variables. They help keep your code DRY, which makes it easy to maintain and change. However, with colors, it’s easy for your variables to get out of hand. In this article, I’ll show you an quick, easy method to wrangle your color variables. The Problem Let’s say you have the following CSS: If you decide to use a different color than #b0eb00, you have to change it in multiple places. Now, it’s easy to change the value of $yellow-green everywhere. As you accumulate color variables, you may decide to stick them in in their own file. $yellow-green: #b0eb00; $gray: #595959; $dark-gray: #363636; $light-gray: #a6a6a6; Over time, this file grows until you end up with a mess. Every time you add a new color, it becomes more difficult to find a name for it. A Bad Solution That Does Not Work You’ve felt the pain of your color variables and decided to refactor. At least now it’s obvious what the variables are by looking at them. Another Solution That Doesn’t Work
Introducing HTML5 Resource Center Many developers are now using HTML5 to build apps. It is easy to develop for and it works across a number of different platforms, with minimal or no code change. You can code in something as simple as Notepad, and instantly see it come to life in the browser on your desktop, phone, or tablet. Today we are releasing three new HTML5 resources to help developers learn from our experience and the experience of other industry leaders building HTML5 apps: HTML5 Resource Center helps you build, test, and deploy your web app.HTML5 Blog covers a wide range of HTML5 topics written by Facebook and industry experts.HTML5 Developer Group is the place for raising questions and sharing insights with fellow HTML5 developers. What HTML5 Really Means Technically, HTML5 is a World Wide Web Consortium (W3C) specification. Cross-Platform, Cross-Device Today almost every device, including phones, tablets, computers, and even TVs has a browser. A practical example of this is the web app Words with Friends.