HTML5 For Web Designers, Chapter 2 Home The French revolution was an era of extreme political and social change. Revolutionary fervor was applied to time itself. For a brief period, the French Republic introduced a decimal time system, with each day divided into ten hours and each hour divided into one hundred minutes. It was thoroughly logical and clearly superior to the sexagesimal system. Decimal time was a failure. Design Principles Keen to avoid the mistakes of the past, the WHATWG drafted a series of design principles to guide the development of HTML5. Where XHTML 2 attempted to sweep aside all that had come before, HTML5 builds upon existing specifications and implementations. Some of the other design principles include “Do not reinvent the wheel,” and “Pave the cowpaths,” meaning, if there’s a widespread way for web designers to accomplish a task—even if it’s not necessarily the best way—it should be codified in HTML5. Keeping It Real The creation of HTML5 has been driven by an ongoing internal tension. Out of cite
Home Cube Time Series Data Collection & Analysis Cube is a system for collecting timestamped events and deriving metrics. By collecting events rather than metrics, Cube lets you compute aggregate statistics post hoc. Collecting Data An event in Cube is simply a JSON object with a type, time, and arbitrary data. Cube’s collector receives events and saves them to MongoDB. Querying Events Cube defines a simple language for querying events. You can intersect filters and customize which event fields are returned. request(browser).gt(duration, 250).lt(duration, 500) Cube supports both HTTP GET and WebSockets for retrieving events. Querying Metrics You can also use Cube to group events by time, map to derived values, and reduce to aggregate metrics. The first few results of which appear as: Or, to count requests to the path "/search", change the expression: sum(request.eq(path, "/search")) sum(request(duration)) Want to learn more?
Octopress Rending your XML as HTML with XSLT in Rails I had a need to convert XML services that my rails app was providing into customizable html widgets tht could then be in-jested by some sort of server side includes(like NGINX's SSI). So I needed to use XSLT. When the W3C wrote the XML specification they also developed the Extensible Stylesheet Language for Transformations. XSLT provides a powerful, flexible language for transforming XML documents into something else. So to quickly look at how we're rendering xml currently. def show @event = Event.find(params[:id]) render :xml => @eventend OK so we are simply rendering only xml back from this request. So, I'm going to assume that you've seen this responds to block before and you know that it's just going to render the show.html.erb template in our views, when html is requested. Installing Ruby's XSLT Library I'm on Mac OS-X 10.5.2 and haven't tested this install on anything else, but it's pretty simple really, unfortunately it's not a gem, but hey, it's not that hard Getting Rails to render:
Rails on XML, Part 1: Background [Part of the Rails on XML series.] I'm sure the first question in many readers' minds is "Why bother?". The intersection between the XML community and the Ruby community is very small. A rubyist might use XML to implement a RESTful web service, but that's going far enough, thank you very much. However, if you've been paying attention to the pure XML workflow for creating web applications, it has some interesting ideas, and some exuberant followers. I'm not sure I'm tapped into the most forceful propaganda for this way of thinking, but you can sample it here, in this quote from 2006: A profound change is likely about to shake up your world if you’re a web developer, one that I suspect will make the recent efforts in the AJAX space pale in comparison as far as its effect. and in this quote from 2007: To put these remarks in context, I need to backup and give an outline of the entire XML web application toolchain. I'll have more to say about what's good, and bad, in future postings.
Canvas You are here: Home Dive Into HTML5 Diving In HTML 5 defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. So what does a canvas look like? Invisible canvas The markup looks like this: Let’s add a dotted border so we can see what we’re dealing with. Canvas with border You can have more than one <canvas> element on the same page. Let’s expand that markup to include an id attribute: Now you can easily find that <canvas> element in the DOM. var a_canvas = document.getElementById("a"); Simple Shapes Every canvas starts out blank. Click to draw on this canvas The onclick handler called this function: function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100); } And then there’s this Every canvas has a drawing context Paths path .
Basic animations - MDN Docs Since we're using JavaScript to control <canvas> elements, it's also very easy to make (interactive) animations. Doing more complex animations can take a little extra work; we hope to introduce a new article to help with that soon. Probably the biggest limitation is that once a shape gets drawn it stays that way. Basic animation steps These are the steps you need to take to draw a frame: Clear the canvas Unless the shapes you'll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn previously. Controlling an animation Shapes are drawn to the canvas by using the canvas methods directly or by calling custom functions. That means we need a way to execute our drawing functions over a period of time. Scheduled updates First there's the window.setInterval() and window.setTimeout() functions, which can be used to call a specific function over a set period of time. setInterval(function, delay) setTimeout(function, delay) or init(); Gartic
HTML5 Canvas Cheat Sheet There are cheat sheets for just about anything out there but I couldn't find one for the HTML5 canvas element, so I decided to do something about that, mostly for my own sake but if other people find it useful that's just all the better. The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla's examples). So, it's basically just a listing of the attributes and methods of the canvas element and the 2d drawing context. Choose between a 2 page PDF document or a PNG file. Thanks! Corrections and comments are welcome!