Home The Jekyde Blog - Vimperator Introduction Jekyde is a static blog builder, server and writer in Node.JS. Using Jekyde, You could write your blog in Markdown and LaTeX easily. The main differences between Jekyde and other similar tools are the following three features: Take care of conflicts between Markdown and LaTeX: You only need to write LaTeX formulas as $...$ and $$...$$. Jekyde is written in Node.JS. 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
jnordberg/wintersmith · GitHub - Vimperator 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. It also enables richer analysis, such as quantiles and histograms of arbitrary event sets. 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))
getpelican/pelican-themes · GitHub - Vimperator 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. In this case, we're going to use it to create HTML documents. 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 First you'll need to download the library, you can get it from here Getting Rails to render: Create an XSLT Style
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 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: [E]nlightened innovators ... have seen the real world benefits of dumping object middle-tier stacks and relational databases and going with a pure declarative approach to solving business problems based around XForms/REST and XQuery. To put these remarks in context, I need to backup and give an outline of the entire XML web application toolchain. Note that if you buy into all of this, you don't really need an application server any more, be it implemented in Rails, or not. 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. If we need to move it we have to redraw it and everything that was drawn before it. 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 Note: The window.requestAnimationFrame() method is now the recommended way to schedule animations. setInterval(function, delay) or
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). Choose between a 2 page PDF document or a PNG file. Corrections and comments are welcome!
Create a Drawing App with HTML5 Canvas and JavaScript { William Malone } by William Malone This tutorial will take you step by step through the development of a simple web drawing application using HTML5 canvas and its partner JavaScript. The aim of this article is to explore the process of creating a simple app along the way learn: How to draw dynamically on HTML5 canvas The future possiblities of HTML5 canvas The current browser compatibility of HTML5 canvas Each step includes a working demo; if you want to skip ahead: Define Our Objective Let's create a web app where the user can dynamically draw on an HTML5 canvas. Our tools could use colors (except maybe our eraser). Similarly let's also give our user 4 different sizes to draw with, because we can. 3 tools: crayon, marker, eraser 4 colors to choose from (except eraser) 4 sizes to choose from Like a coloring book, let's give our user something to "color". Prepare HTML5 Canvas: Markup We only need a line of markup; everything else will be in scripting. Wait... Prepare HTML5 Canvas: Scripting Give it a try: Updates
Five Things You Should Know About HTML5 You are here: Home Dive Into HTML5 1. It’s not one big thing You may well ask: “How can I start using HTML5 if older browsers don’t support it?” But the question itself is misleading. You may think of HTML as tags and angle brackets. Chapter 2 and Appendix A will teach you how to properly detect support for each new HTML5 feature. 2. Love it or hate it, you can’t deny that HTML 4 is the most successful markup format ever. Now, if you want to improve your web applications, you’ve come to the right place. Read all the gory details about HTML5 forms in Chapter 9. 3. “Upgrading” to HTML5 can be as simple as changing your doctype. Upgrading to the HTML5 doctype won’t break your existing markup, because obsolete elements previously defined in HTML 4 will still render in HTML5. 4. Whether you want to draw on a canvas, play video, design better forms, or build web applications that work offline, you’ll find that HTML5 is already well-supported. 5. HTML5 is here to stay.