Wednesday, September 8th, 2010
Michael Mahemoff has posted an extremely in-depth tutorial on HTML5Rocks on the subject of offline web apps:
(BTW, don’t hate me ‘cuse of the LOLCat pic — you know you secretly like it)
Tuesday, September 7th, 2010
Steve Souders just pointed me to the great news that two great open source performance projects are working well together:
Pat Meenan just blogged about Page Speed results now available in Webpagetest. This is a great step toward greater consistency in the world of web performance, something that benefits developers and ultimately benefits web users.
The Page Speed SDK gives a path for folks to unify behind standard performance metrics and results. Great work!
If you're working with mobile browsers tinySrc will dynamically scale your images down to the right size on the server side:
To use, you simply prefix the URL to your image with a pointer to tinysrc:
tinySrc will then do the magic for you:
Unless you tell it otherwise, tinySrc will resize the image to fit the screen of the mobile handset visiting your site. For example, if an iPhone visits the site, the image will be constrained to its screen size of 320px x 480px.
In this particular case, the image is of landscape orientation, and width is the constraining dimension. Aspect ratios are always preserved by tinySrc, so our 640px by 400px image will emerge resized for an iPhone as 320px by 200px.
Monday, September 6th, 2010
I recently saw the new HTML5 Search input element and wondered what the heck it does:
Chris Coyier has posted an in-depth article going into this new HTML5 input type to appease your curiosity. The HTML5 spec actually says you don't have to do much with it, but Webkit actually has a range of options.
First, it visually distinguishes the input field with an inset border, rounded corners, and typographic controls:
Chris has discovered that you actually can't override the following visual properties on a search input with CSS:
However, the following can be styled in an HTML5 search input:
Chris (via Mike Taylor) also discovered a 'results' parameter that can be used on Webkit but is not in the HTML5 spec:
which gives a drop down with the number of results requested:
Friday, September 3rd, 2010
The Yahoo! YUI is an incredibly feature-rich JavaScript library with a LOT of functionality but getting your head around all of those features can be tough. The YUI team wants to help developers get up and running more quickly and announced yesterday the release of SimpleYUI; a basic and more streamlined version of the YUI library.
SimpleYUI will contain basic DOM access and manipulation including support for CSS 3 selectors in the selector engine, animations via the new transition module, the event system, Ajax and JSON support.
The great thing is that when you're ready to leverage more advanced features like managed attributes and custom events, you still have the ability to do on-demand loading just like you'd expect from the full-featured version of YUI. This includes any YUI 2 or 3 component or YUI 3 Gallery module.
<script>
Y.use('dd-drag','yui2-datatable', 'gallery-accordion', function(Y) {
// here you can use YUI 3 Drag and drop, YUI 2 DataTable, Accordian or any other control contributed to the gallery by the community
});
</script>
YUI team member Eric Miraglia put up a nice post about SimpleYUI which shows you some of the goodness include.
Josh Duck has put together a fun and useful list of the 104 elements currently in the HTML5 working draft but organized like a periodic table of elements:
When you click on one of the tags more information appears:
Who says chemistry can't be fun?
Thursday, September 2nd, 2010
By Dion Almaer
webOS 2.0 SDK has just launched, and it has node.js built in (and more). The following is taken from my personal blog
At our last Palm Developer Day, Ben and I discussed future APIs for webOS including "JavaScript services" as a way to write code that runs on the other side of the device service bus using JavaScript.
If you think about it, node delivers a services platform for the cloud, so is there a way that we could work together? We got together with Ryan Dahl of Node to try this out, and it turns out that node works fantastically well on a mobile device! Major kudos should go to the V8 team for creating a great VM and to Ryan for writing efficient code that scaled down from the cloud to the device.
Today we announce that node is part of webOS 2.0:
The popular Node.js runtime environment is built into webOS 2.0, which means that you can now develop not just webOS apps but also services in JavaScript. The active Node ecosystem is on hand to provide community support and a rapidly growing library of modules that you can use in your webOS services.
Besides powering the new Synergy APIs, JavaScript services strengthen webOS's support for background processing and add new capabilities—like low-level networking, file system access, and binary data processing—to the web technology stack.
I am really excited about this move for us. The node community is top class. I get to see this time and time again, most recently over the weekend and this week as I judge the node knockout. There is magic in the air with Node. It feels like the Rails days. I remember being so happy to jump to Rails and get away from the heavy world of Enterprise Java. It was a breath of fresh air to not have to argue with folks about every piece of the stack. "What about JSF with HiveMind and Commons-Logging and ...." Argh! Too. Much. Choice. And, a logging abstraction above Log4J was hilarious :)
Node is low level, yet simple. It is more like Sinatra than Rails. The event-based opinions keep you in good stead, and with cloud solutions such as Heroku and no.de you have great deployment stories, unlike Rails back in the day.
If you check out the modules that are growing daily, and the fun real-time hacks from the knockout you will get a good feel for node.
It feels great to have webOS as the first mobile device that embeds node. With db8 we offer a JSON store than can sync to the cloud (e.g. sync with CouchDB). This stack is starting to look pretty great.
I stumbled on the Mozilla Foundation's Drumbeat project recently:
Drumbeat gathers smart, creative people like you around big ideas, practical projects and local events that improve the open web.
It's very well done combination of projects + community.
Drumbeat Toronto Meetup
There's a whole slew of cool projects already one here. A small sample:
Wednesday, September 1st, 2010
Google Rich Snippet
Oli Studholme has an excellent new article on HTML5 Doctor on the different ways HTML5 can be extended with things like microformats, the link tag, and more. Why would you want to do this?
While HTML5 has a bunch of semantic elements, including new ones like
<article>and<nav>, sometimes there just isn’t an element with the right meaning. What we want are ways to extend what we’ve got, to add extra semantics that are machine-readable — data that a browser, script, or robot can use.
First, he starts with the options HTML4 gave us and what options we now have with HTML5:
There were five fundamental ways we could extend HTML 4:
<meta>elementclassattributerelattributerevattributeprofileattributeIn HTML5,
revhas fallen by the wayside, becoming obsolete since hardly anyone used it correctly, and because it can be replaced byrel.profileis also obsolete, and there is no support for namespaces in HTML5. However,<meta>,class, andrelare all in HTML5. In fact,<meta>now has spec-definednames and a way to submit newnamevalues, andrelhas several new link types defined in the HTML5 specification and a way to submit more too.Even better, WAI-ARIA’s
roleandaria-*attributes are allowed in HTML5, and HTML5 validators can check HTML5+ ARIA. Other new methods of extending HTML5 include custom data attributes (data-*), microdata, and RDFa. Guest doctor Chris Bewick introduced us to HTML5’s newdata-*attribute system, which is perfect for adding private custom data for JavaScript, and we’ll no doubt meet microdata and RDFa sooner or later.
Finally there are microformats. As Dr. Bruce touched on microformats in his article on the
<time>element, let’s delve a little deeper into what microformats are and how to use them in HTML5.
Oli then does a great deep dive of microformats, going over the different ones defined by the community to date (there are 33 microformat specifications!) and covering some of the common patterns that you can use if you need to roll your own microformat. If you've been wondering how to use things like hCard, hCalendar, XHTML Friends Network (XFN), etc. in your own systems then definitely give this article a gander.
Tuesday, August 31st, 2010
Check out a demo of the new keyframe animation.
Custom attributes is also a new feature that makes it easier to do things like animating a portion of an attribute segment (demo).
Full release notes:
BTW I just noticed that Dmitry is now at Sencha; they're assembling quite the team! Congrats Dmitry!
Monday, August 30th, 2010
The SVG Web team has announced a new release. SVG Web is a drop in JavaScript library that makes it easy to display SVG graphics on Internet Explorer 6, 7, and 8 using Flash.
The new SVG Web release, like all of their releases, is named after especially silly D&D monsters. The new release is code named Owlephant:
You've heard of Elephants, you've heard of Owls… put them together and you get the fearsome Owlephant. If you encounter one, be sure it will be the last thing you ever, um, encounter. Hoot…. stomp!
With this release SVG Web now scores 55.45% on the SVG compatibility charts, almost at the same level as IE 9 (58%).
Major aspects of this new release includes overhauls and fixes for gradients, clipping, events, text placement, and more. It also includes a huge step forward in SMIL animation support, including being able to animate path segments and interpolate their values, scripting SMIL with JavaScript, and more.
This release has been built by the community, with major contributions from Bruce Duncan from VisualMining.com; Ken Stacey from SVGMaker.com; and the always awesome (and project co-leader) Rick Masters. Thanks to the many people like Michael Neutze, Bruce Rindahl, and more for their bug testing and evangelism!
Everything fixed in this release:
Download the release now and get started!
Please note that there are some breaking changes in this release that will affect code that uses older versions of SVG Web; more details here. Also note that SVG Web does not yet support the native SVG functionality in IE 9 preview releases.
[Disclosure: I'm a member of the SVG Web team]
Perfect for a Monday is a cool 3D model editor built using the Canvas tag and created by Jayesh Salvi:
Via Phil Franks comes an interesting HTML5/CSS3 site for There Studio, which is a kind of coworking space in London:
The site itself has a number of circles with information bouncing on the screen that respond to mouse clicks and moves.
Let's crack the site open using View Source and see how they are doing things. First, they have a repeated background with a little plus symbol with the following style rule on the <body> tag:
The textual content in each of the circles is clean semantic HTML that is search engine friendly:
To turn that into this:
The <h3> is first transformed into having an underline with the padding and margin being on the bottom:
JavaScript creates the circle. The script tags themselves are at the end of the HTML page at the bottom of the <body> tag, a good performance practice in general.
The heart of drawing each circle is in the createBall and createContentBall methods. If a ball will have HTML content, then the createContentBall method is used, otherwise the createBall method is used. Let's look at the createContentBall method; we'll break it down:
First, we create an absolutely positioned DIV that will house our Canvas tag:
Then we draw the actual circle itself using the Canvas tag and append it to our container DIV (Note that an SVG circle created programmatically could have also been used here):
Then we create another DIV to house the HTML content itself:
Notice that we are setting content.onSelectStart to null above; this is so that when you run the mouse button over the text it doesn't select (An alternative way to do this is to use the HTML pointer-events CSS property).
Next comes code to deal with the physics of the circles, which uses Box2D.js, a JavaScript physics engine ported from Flash:
Basically, we define a circle, give it a radius, density, friction, and restitution, and then add it to our collection of shapes with a position and linear velocity. Box2D will then handle the physics and we can just take the values back out to draw things on the screen with a setInterval, which happens in the loop method:
This method gets called with a setInterval periodically. Basically, we apply a delta and a gravity at each time step; see if the mouse is being pressed down (with hooks for touch devices like the iPhone to see if a finger is being pressed down); tell the Box2D World about our gravity and delta and to make an iteration step; and finally use the computed physics values from Box2D to apply CSS3 rotation transforms on our parent DIV and move the element's CSS top and left values around the screen.
Friday, August 27th, 2010
I stumbled across http://webkit.org/specs recently, which is basically a nifty listing of all custom extensions Apple/Webkit has made to web specs, written up as specs themselves so that other browsers can implement them:
There were some on here that I had never even heard of. The first is the Timed Media Elements spec, which is a fancy name for basically CSS that can control playback of video and audio:
Another interesting spec contains extensions to CSS Media Queries, basically making it possible for user agents to query whether CSS Transforms, Animations, 3D Transforms, and Transitions are available so you can apply different style sheets for platforms that support these CSS effects:
TechCrunch reports on a Googler, Paul Truong, who created an HTML5-based game for Gmail called Galactic Inbox using his 20% time:
When you start it up, a little Gmail logo envelope guy pops out of a “20% Projects Lab” and starts flying. Essentially, he’s a spaceship and can shoot objects coming his way. It’s simple, but fun.
Read more on the Gmail Blog.
Play the game yourself (note that you must be using a modern browser)!
Thursday, August 26th, 2010
Ryan Seddon, aka the CSS Ninja, has a nice blog post up where he reverse engineers the new feature in Gmail where you can drag attachments from an email on to your desktop.
Note that the feature only currently works in Chrome.
Ryan begins with the following code:
file.addEventListener("dragstart",function(evt){
evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);
Describing the code Ryan says:
From the code above you attach an ondragstart event listener to something you want to “drag out” and save to your file system. On the dragstart event you set the data using the new “DownloadURL” type and pass file information to it.
Note though that in order to pass the correct data to the dragstart event you need to provide a download URL that can be passed to the setData("DownloadURL" call. Ryan uses the HTML5 data-* attribute to pass this custom data in:
The custom attribute uses three different fields of data separated by colons:
The files mime type, the name you wish it to be saved as (this can be anything) and the url to where the file can be downloaded from.
Nice find Ryan!
In Episode 25, we chat about IE 8, standards, Acid3, server side JavaScript, and more.
Who are the ajaxians? Find out.
Please contact us at . We would love to hear about any news that we could put up here.
We have individual blogs too:
