Wednesday, November 23, 2011

HTML5 Reset

Summary:

HTML5 Reset is a simple set of best practices to get web projects off on the right foot.
  1. A style sheet designed to strip initial files from browsers, meaning you start off with a blank slate.
  2. Easy to customize -- remove whatever you don't need, keep what you do.
  3. Analytics and jQuery snippets in place
  4. Meta tags ready for population
  5. Empty mobile and print style sheets, including blocks for device orientation
  6. Modernizr.js http://www.modernizr.com/ enables HTML5 compatibility with IE (and a dozen other great features)
  7. IE-specific classes for simple CSS-targeting
  8. iPhone/iPad/iTouch icon snippets
  9. Lots of other keen stuff...
http://html5reset.org
https://github.com/murtaugh/HTML5-Reset 

Wednesday, November 16, 2011

CSS Reference

This an alphabetical list of CSS features. If you are going to add or modify a page, please fit in with the template CSS Reference:Property Template and modify as required. The basic template for example pages can be found here: samples/cssref/TEMPLATE.html. Feel free to discuss any questions or suggestions on the Talk:CSS Reference page.
See also Mozilla CSS Extensions for Gecko-specific properties prefixed with -moz-. See Vendor-prefixed CSS Property Overview by Peter Beverloo for all prefixed properties.

https://developer.mozilla.org/en/CSS/CSS_Reference

Announcing Firefox Aurora 10

In additional to the normal improvements that you’ve come to expect like performance, security and bug fixes, Aurora 10 focuses in HTML5 enhancements.

New additions

Developer Tools

Aurora 10 also implements incremental enhancements like IndexedDB setVersion API changes. Ongoing detailed attention to evolving specifications help to keep Firefox at the front of the Web revolution. (Read more about IndexedDB on MDN.)

DOM

  • We now fire a “load” event on stylesheet linking when the sheet load finishes or “error” if the load fails.
  • We turn the POSTDATA prompt into an information page (when navigating in session history).
  • We only forward event attributes on body/frameset to the window if we also forward the corresponding on* property.
  • We no longer allow more than one call to window.open() when we allow popups.
  • We fixed a bug where a success callback never fired when a position update is triggered after getCurrentPosition().
  • We removed replaceWholeText().
  • We fixed an error with createPattern(zero-size canvas).
  • We now handle putImageData(nonfinite) correctly.
  • We now throw INVALID_STATE_ERR when dispatching uninitialized events.
  • We’ve made Document.documentURI readonly.
  • We fixed document.importNode to comply with optional argument omitted.

Web workers

  • We now allow data URLs.
  • We implemented event.stopImmediatePropagation in workers.
  • We made XHR2 response/responseType work in Web Workers.

Graphics

  • We implement the WebGL OES_standard_derivatives extension.
  • We implement minimal-capabilities WebGL mode.

JavaScript

  • The function caller property no longer skips over eval frames.
  • We fixed E4X syntax so that it is not accepted in ES5 strict mode.
  • weakmap.set no longer returns itself instead of undefined.
  • We implemented the battery API.

Offline: IndexedDB enhancements

  • IndexedDB setVersion API changes
  • Added support for IDBObjectStore/IDBIndex.count
  • Various methods accept both keys and KeyRanges.
  • Added support for IDBCursor.advance.
  • Implemented deleteDatabase.
  • objectStoreNames are no longer updated on closed databases when another connection adds or removes object stores
  • IDBObjectStore.delete and IDBCursor.delete now return undefined.
  • No longer throws an error if there are unknown properties in the options objects to createObjectStore/createIndex.
  • We now the errorCode to “ABORT_ERR” for all pending requests when IDBTransaction.abort() is called.
  • Fixed the sort order for indexes.

Layout

  • We have updated the current rule for handling malformed media queries.
  • We now support the HTML5 element and CSS property unicode-bidi: isolate.
  • The CSS3 implementation now supports unicode-bidi: plaintext.

Media

  • Implemented Document.mozFullScreenEnabled.
  • Enabled the DOM full-screen API on desktop Firefox by default.
http://hacks.mozilla.org/2011/11/announcing-firefox-aurora-10

Tuesday, November 15, 2011

Xhtml Friends Network

XFN™ (XHTML Friends Network) is a simple way to represent human relationships using hyperlinks. In recent years, blogs and blogrolls have become the fastest growing area of the Web. XFN enables web authors to indicate their relationship(s) to the people in their blogrolls simply by adding a 'rel' attribute to their <a href> tags.
Introduction and Examples
Introduction to XFN, examples, styling suggestions, and future potential.
Getting Started
Join the XHTML Friends Network in just four easy steps!
Profile
Version 1.1 of the XFN meta data profile: the list of the values used in XFN with their significance. See the XMDP home page for more information on XHTML Meta Data Profiles.
Background
The thinking that went into the design of XFN, why particular values were chosen, and why other values were left out.
FAQ
Frequently asked questions about XFN.
XFN Tools
A collection of tools, templates, editors, communities, and other resources that let you edit XFN information. Includes the XFN Creator, among many others.
XFN and ...
How to use XFN with numerous social network services and other technologies.
What's out there?
Pointers to pages and sites which use XFN, tools, ...
How can I help?
If you would like to support XFN...
Press
Articles about or that reference XFN...
Thanks
Thanks to all those who have helped XFN with their feedback, constructive criticisms, suggestions, and inspirational uses.
Feedback
Let us know what you think about XFN.
http://gmpg.org/xfn/

Monday, November 14, 2011

Vendor-prefixed CSS Property Overview

Next to having four seperate pages for the major rendering engines, this page shows a clearer overview of the implemented, prefixed properties, and their counterparts in other engines. The latest update on this page occurred on 2011-11-14


http://peter.sh/experiments/vendor-prefixed-css-property-overview/

Core HTML5 Canvas

This is the companion website for Core HTML5, Volume I: Canvas, the first volume of the Core HTML5 series from Prentice-Hall. This book takes a code-fueled, no-nonsense, deep dive into one of HTML5's most exciting APIs by showing you how to:

  • Draw and paint
  • Apply shadows, patterns, and gradients
  • Manipulate images
  • Create animations
  • Implement video games
  • Develop custom controls
  • Manipulate videos in realtime
  • A bunch of other cool stuff
This website gives you access to the book's code, a free chapter, and live demonstrations of featured examples from the book.

http://www.corehtml5canvas.com/

WeasyPrint

WeasyPrint is a visual rendering engine for HTML and CSS that can export to PDF. It aims to support web standards for printing. WeasyPrint is free software released under the AGPL license.
It is based on libraries for parsing, text and drawing but not on full rendering engines like WebKit on Gecko. The CSS visual rendering is written in Python and meant to be easy to hack on.
Get started by installing it or jump to:

Sample output

As an example, here is the introduction chapter of the CSS 2.1 spec rendered with WeasyPrint: CSS21-intro.pdf. It was obtained by running:
weasyprint http://www.w3.org/TR/CSS21/intro.html CSS21-intro.pdf

Current status

WeasyPrint 0.1 can fetch a remote web page from an URL, find and fetch associated stylesheets and images, and render it all to PDF or PNG.
Floats, absolute positioning and tables are not supported yet, but WeasyPrint can already be useful for pages with “simple” layout. See the features page for what exactly is supported or not.
Tables (among other things) are being worked on and should be in the next version.

http://weasyprint.org/

Friday, November 11, 2011

25 Cool jQuery Tooltip Plugins for Interactive Designs


jQuery Tooltip
jQuery tooltip is certainly one of the building blocks you should consider using in your web design and development. jQuery tooltips are easy to install and set up and they help you offer extra information on important elements and at the same time make the browsing experience of every visitor interesting and dynamic. Simple and minimalistic design is good for user experience and usability and jQuery tooltips help you achieve this by allowing you to “not show it all” at once. There is a lot of jQuery tooltip scripts available and some are free and some premium. Check out the demos and documentation to make sure you find what suits your needs best.
In this article we are sharing with you jQuery tooltips that you can use in your website to make it look cool and interesting. These are all easy to download scripts and easy to use, if you have the required tweaking know-how.

FlatironJs: an unobtrusive framework initiative for node.js

No one agrees on frameworks. It's difficult to get consensus on how much or how little a framework should do. Flatiron's approach is to package simple to use yet full featured components and let developers subtract or add what they want.
Flatiron promotes code organization and sustainability by clearly separating development concerns. Each component works elegantly with or without its counterparts. Many of the components work the same in the browser as they do on the server. This is the motivation behind flatiron. At it's core flatiron is two things:
  • an initiative to build a collection of decoupled tools with the same standard of quality and performance that you would expect from anything built by nodejitsu. 
  • a full-stack web application development framework which packages these tools together to make isomorphic and stream-based application development easier.

inside the framework

Packaged inside the framework are the basic building blocks for a modern web application.

Node.js v0.6.0: Cluster


The cluster module allows you to easily create a network of processes all which share server ports.A single instance of Node runs in a single thread. To take advantage of multi-core systems the user will sometimes want to launch a cluster of Node processes to handle the load.

Build a simple client-side MVC app with RequireJS


Require JS Logo

As a web developer, you certainly often started coding your JavaScript in a single file, and, as the code base gets larger and larger, it became really difficult to maintain. To solve this problem you can split your code in several files, add more script tags and use global variables to reach functions declared in other files. But this pollutes the global namespace and for each file an additional HTTP request consumes bandwidth, which slows down the loading time of the page.
If this happened to you, you certainly understand that there is a strong need to organize our front-end code differently, particularly if we have to build large-scale web apps with thousands of lines of JavaScript. We need a new way to organize all this mess to make it easier to maintain. This new technique consists in using script loaders. Plenty of them are available on the web, but we’ll focus on a very good one called RequireJS.
In this step by step tutorial you will learn how to build a simple MVC (Model – View – Controller) app using RequireJS. You don’t need any particular previous knowledge of script loading – we’ll see the basics together.

Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5


Adobe is all about enabling designers and developers to create the most expressive content possible, regardless of platform or technology. For more than a decade, Flash has enabled the richest content to be created and deployed on the web by reaching beyond what browsers could do. It has repeatedly served as a blueprint for standardizing new technologies in HTML.  Over the past two years, we’ve delivered Flash Player for mobile browsers and brought the full expressiveness of the web to many mobile devices.
However, HTML5 is now universally supported on major mobile devices, in some cases exclusively.  This makes HTML5 the best solution for creating and deploying content in the browser across mobile platforms. We are excited about this, and will continue our work with key players in the HTML community, including Google, Apple, Microsoft and RIM, to drive HTML5 innovation they can use to advance their mobile browsers.
Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores.  We will no longer continue to develop Flash Player in the browser to work with new mobile device configurations (chipset, browser, OS version, etc.) following the upcoming release of Flash Player 11.1 for Android and BlackBerry PlayBook.  We will of course continue to provide critical bug fixes and security updates for existing device configurations.  We will also allow our source code licensees to continue working on and release their own implementations.
These changes will allow us to increase investment in HTML5 and innovate with Flash where it can have most impact for the industry, including advanced gaming andpremium video.  Flash Player 11 for PC browsers just introduced dozens of new features, including hardware accelerated 3D graphics for console-quality gaming and premium HD video with content protection.  Flash developers can take advantage of these features, and all that our Flash tooling has to offer, to reach more than a billion PCs through their browsers and to package native apps with AIR that run on hundreds of millions of mobile devices through all the popular app stores, including the iTunes App Store, Android Market, Amazon Appstore for Android and BlackBerry App World.
We are already working on Flash Player 12 and a new round of exciting features which we expect to again advance what is possible for delivering high definition entertainment experiences.  We will continue to leverage our experience with Flash to accelerate our work with the W3C and WebKit to bring similar capabilities to HTML5 as quickly as possible, just as we have done with CSS Shaders.  And, we will design new features in Flash for a smooth transition to HTML5 as the standards evolve so developers can confidently invest knowing their skills will continue to be leveraged.
We are super excited about the next generations of HTML5 and Flash.  Together they offer developers and content publishers great options for delivering compelling web and application experiences across PCs and devices.  There is already amazing work being done that is pushing the newest boundaries, and we can’t wait to see what is still yet to come!

Node v0.6.0

We are happy to announce the third stable branch of Node v0.6. We will be freezing JavaScript, C++, and binary interfaces for all v0.6 releases.
The major differences between v0.4 and v0.6 are
  • Native Windows support using I/O Completion Ports for sockets.
  • Integrated load balancing over multiple processes. docs
  • Better support for IPC between Node instances docs
  • Improved command line debugger docs
  • Built-in binding to zlib for compression docs
  • Upgrade v8 from 3.1 to 3.6
In order to support Windows we reworked much of the core architecture. There was some fear that our work would degrade performance on UNIX systems but this was not the case. Here is a Linux system we benched for demonstration:
v0.4.12 (linux)v0.6.0 (linux)
http_simple.js /bytes/10245461 r/s6263 r/s
io.js read19.75 mB/s26.63 mB/s
io.js write21.60 mB/s17.40 mB/s
startup.js74.7 ms49.6 ms
Bigger is better in http and io benchmarks, smaller is better in startup. The http benchmark was done with 600 clients on a 10GE network served from three load generation machines.
In the last version of Node, v0.4, we could only run Node on Windows with Cygwin. Therefore we’ve gotten massive improvements by targeting the native APIs. Benchmarks on the same machine:
v0.4.12 (windows)v0.6.0 (windows)
http_simple.js /bytes/10243858 r/s5823 r/s
io.js read12.41 mB/s26.51 mB/s
io.js write12.61 mB/s33.58 mB/s
startup.js152.81 ms52.04 ms
We consider this a good intermediate stage for the Windows port. There is still work to be done. For example, we are not yet providing users with a blessed path for building addon modules in MS Visual Studio. Work will continue in later releases.
For users upgrading code bases from v0.4 to v0.6 we’ve documented most of the issues that you will run into. Most people find the change painless. Despite the long list of changes most core APIs remain untouched.
Our release cycle will be tightened dramatically now. Expect to see a new stable branch in January. We wish to eventually have our releases in sync with Chrome and V8′s 6 week cycle.
Thank you to everyone who contributed code, tests, docs, or sent in bug reports.
Here are the changes between v0.5.12 and v0.6.0:
2011.11.04, Version 0.6.0 (stable)
  • print undefined on undefined values in REPL (Nathan Rajlich)
  • doc improvements (koichik, seebees, bnoordhuis, Maciej Małecki, Jacob Kragh)
  • support native addon loading in windows (Bert Belder)
  • rename getNetworkInterfaces() to networkInterfaces() (bnoordhuis)
  • add pending accepts knob for windows (igorzi)
  • http.request(url.parse(x)) (seebees)
  • #1929 zlib Respond to ‘resume’ events properly (isaacs)
  • stream.pipe: Remove resume and pause events
  • test fixes for windows (igorzi)
  • build system improvements (bnoordhuis)
  • #1936 tls: does not emit ‘end’ from EncryptedStream (koichik)
  • #758 tls: add address(), remoteAddress/remotePort
  • #1399 http: emit Error object after .abort() (bnoordhuis)
  • #1999 fs: make mkdir() default to 0777 permissions (bnoordhuis)
  • #2001 fix pipe error codes
  • #2002 Socket.write should reset timeout timer
  • stdout and stderr are blocking when associated with file too.
  • remote debugger support on windows (Bert Belder)
  • convenience methods for zlib (Matt Robenolt)
  • process.kill support on windows (igorzi)
  • process.uptime() support on windows (igorzi)
  • Return IPv4 addresses before IPv6 addresses from getaddrinfo
  • util.inspect improvements (Nathan Rajlich)
  • cluster module api changes
  • Downgrade V8 to 3.6.6.6

Thursday, November 10, 2011

ExecJS


ExecJS lets you run JavaScript code from Ruby. It automatically picks the best runtime available to evaluate your JavaScript program, then returns the result to you as a Ruby object.
ExecJS supports these runtimes:

Testing Routes in Rails

Routes in rails are really cool but they can be confusing to newbies and, as they become more complex, it can be difficult to make sure that all of your paths are still working like you expect. My intention here is not to provide a primer on routes but rather to show how easy it is to test and verify routes.

http://blog.zobie.com/2008/11/testing-routes-in-rails/

Wednesday, November 9, 2011

Intel’s Parallel Extensions for JavaScript

Intel’s Parallel Extensions for JavaScript, code named River Trail, hooks into on-chip vector extensions to improve performance of Web applications. Details of Intel’s attempt to get on the JavaScript juggernaut emerged last month at its developer event.
The prototype JavaScript extension offered by Intel is intended to allow JavaScript apps to take advantage of modern parallel chip capabilities. Sequential gives way to parallel, at least in theory.
In-browser games and image editing are pitched as examples of application elements that would take advantage of new eight-core processors, blogs Intel’s Stephan Herhut.The software is said to ”play nicely” with the WebGL JavaScript API to OpenGL for 3D visualization in the browser.

CodeKit

A screenshot of the CodeKit window

CodeKit automatically compiles Less, Sass, Stylus & CoffeeScript files. It effortlessly combines, minifies and error-checks Javascript. It even optimizes images, auto-reloads your browser and lets you use the same files across many projects. And that's just the first paragraph.




CSS3 Secrets

10 things you might not know about CSS3
http://lea.verou.me/css3-secrets

HTML5 Security Cheatsheet

What your browser does when you look away...


http://html5sec.org/

Using HTML5's Navigation Timing API to measure Page Load speed

To measure the time taken for a page to load one can use the Date object in the head section and calculate the time taken for the page to load in window.onload function. However, it calculates the time taken for the page to load after the first bit of JavaScript in the head is executed. This doesn't indicate the time taken by the web server to serve the requested page. The Navigation Timing API introduced in HTML5 provides data that can be used to measure the performance of a website. The API provides a PerformanceTiming interface which contains several attributes that can be used to get end-to-end latency data.


http://css.dzone.com/articles/using-html5s-navigation-timing

HTML5 Data Attribute Example

If you don't remember what data attributes are, here's a quick reminder. Data attributes are a way to add ad hoc data to your DOM. By prefixing an attribute with data- in front of your name/value pair, your have HTML that is still valid no matter what name you use.


http://www.coldfusionjedi.com/index.cfm/2011/11/3/HTML5-Data-Attribute-Example

Apple iOS 5: HTML5 Developer Scorecard

Whenever a new device or mobile operating system comes out, we do our HTML5 Developer Scorecard to help folks who are building mobile web apps understand how to take advantage of these new devices. In early October, iOS 5 (and the iPhone 4S) was released. In our last few reviews, iOS has come head and shoulders above other device platforms as the best platform for HTML5 developers. High performance, hardware accelerated rendering, super quick JavaScript, and speed of adoption of new HTML5 features, it’s been the best platform to build modern web apps on.


http://www.sencha.com/blog/apple-ios-5-html5-developer-scorecard

Tuesday, November 8, 2011

Gosu

Gosu is a 2D game development library for the Ruby and C++ programming languages, available for Mac OS X, Windows and Linux. The C++ version is also available for iPad, iPhone and iPod Touch.
Visual C++ 2008 (recommended) or 2010 required for the Windows C++ version, but the free Express versions are fine.
Both languages have access to:
  • 2D graphics and text, accelerated by 3D hardware
  • Sound samples and music in various formats
  • Keyboard, mouse and gamepad input
Ruby/Gosu integrates well:

Ruby Game Development: Overview

If you are coming from a Ruby background and haven't yet decided on a library or want to know about alternatives to Gosu, or if you haven't yet decided to even use Ruby, check out Andrea O. K. Wright’s articles and conference talk.
Article (part 1) / Article (part 2) / Video of the talk (RubyConf '07)

http://www.libgosu.org/

GromJS

GromJS is a Server-Side JavaScript interpreter based on Mozilla's SpiderMonkey core script engine which in operation with Bauk HTTP Server provides complete PHP-like environment for JS scripting on Web server.

GromJS interpreter includes persistent operation mode (has ability to execute multiple scripts by single process for extreme performance), session management, direct read/write access to Web server files and directories, support for MySQL, PostgreSQL and SQLite databases, system program execution and pipes, HTTP file upload and authentication, cookies, CGI environment variables, and more.

It represents the most advanced Server-Side JavaScript platform available, providing more functionality and features than any other JavaScript system. For example, it has more speed and features than Microsoft's IIS/JScript ASP scripting server.

http://www.bauk.ws/gromjs/gromjs.jsx

Reading local files in JavaScript

HTML5 finally provides a standard way to interact with local files, via the File API specification. As example of its capabilities, the File API could be used to create a thumbnail preview of images as they're being sent to the server, or allow an app to save a file reference while the user is offline. Additionally, you could use client-side logic to verify an upload's mimetype matches its file extension or restrict the size of an upload.
The spec provides several interfaces for accessing files from a 'local' filesystem:
  1. File - an individual file; provides readonly information such as name, file size, mimetype, and a reference to the file handle.
  2. FileList - an array-like sequence of File objects. (Think <input type="file" multiple> or dragging a directory of files from the desktop).
  3. Blob - Allows for slicing a file into byte ranges.
When used in conjunction with the above data structures, the FileReader interface can be used to asynchronously read a file through familiar JavaScript event handling. Thus, it is possible to monitor the progress of a read, catch errors, and determine when a load is complete. In many ways the APIs resemble XMLHttpRequest's event model.
Note: At the time of writing this tutorial, the necessary APIs for working with local files are supported in Chrome 6.0 and Firefox 3.6. As of Firefox 3.6.3, the File.slice() method is not supported.

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Tuesday, November 1, 2011

normalize.css

Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.
Check out the demo

https://github.com/necolas/normalize.css

Respond.js

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

  • Copyright 2011: Scott Jehl, scottjehl.com
  • Dual licensed under the MIT or GPL Version 2 licenses.
The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).
If you're unfamiliar with the concepts surrounding Responsive Web Design, you can read up here and also here
Demo page (the colors change to show media queries working)

https://github.com/scottjehl/Respond

html5shiv

Public repo for the latest HTML5 JavaScript shim for IE to recognise and style the HTML5 elements.
Source code adds new HTML5 elements (which is simple code), but actually mirror's @jon_neal's and afarkas's IE Print Protector project. It's currently up to date, and for the full details and uncompressed source code see here: http://www.iecss.com/print-protector/
Seriously, these guys did all the hard work - getting it to work in the browser was easy, @jon_neal and afarkas made IE actually print HTML5 elements. Please take a moment to thank them!

http://code.google.com/p/html5shiv/