html5rocks/www.html5rocks.com

....a top-notch resource for web developers

HTML5Rocks was a content site run by Google. Its content lives on at Web Fundamentals and web.dev. Chrome-specific content can be found at Chrome Developers.

Deploy

HTML5Rocks is not deployed automatically. If you make a change, you'll need to deploy it. You can just run gcloud from this folder (there's no build step):

$ gcloud app deploy --project html5rocks-hrd --no-promote ./app.yaml

This will deploy to a unique version and hostname but not take over serving yet. Check it works with your browser, then migrate all traffic to the new version from the Cloud Console.

⚠️ If you get a 500 when testing the site, wait ~10 seconds and try again. The code is slow to start, and App Engine can be initially unhappy.

If you need access to do this, ask in team chat or ping a lead.

Redirects

If you're removing content and want to add a redirect, add it to the "_redirects.yaml" file. Changes to this file need the site to be redeployed as described above.

www.html5rocks.com's Issues

Canvas sample -> Dragging an image towards the bottom or right shows whitespace [moved]

This is Issue 31 moved from the old Google Code project and added by 2010-06-24T07:59:01.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Defect, Priority-Medium, Slides

Original description

Link to page: http://slides.html5rocks.com/#slide24

If you drag a photo on this page towards the bottom or right hand side of the background picture, it starts scrolling (fast!). This causes the white background to scroll into view and the controls and background picture to disappear.

Tutorials should have print stylesheets [moved]

This is Issue 293 moved from the old Google Code project and added by 2010-11-17T23:44:50.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Task, Priority-P3, Milestone-X, Tutorial

Original description

to take away

GWTQuake case study [moved]

This is Issue 200 moved from the old Google Code project and added by 2010-09-21T06:44:15.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, New, casestudy, Milestone-X

Original description

GWTQuake case study , best practices, pain points

Carousel overflows y [moved]

This is Issue 492 moved from the old Google Code project and added by 2011-03-21T17:08:36.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P2, Studio

Original description

<b>Please describe the issue:</b>

http://studio.html5rocks.com/#Carousel flickers a vertical scrollbar when you change slides.

It needs an overflow-y: hidden in the style somewhere.

My window.innerHeight was 783

Automatically publish update on certain date [moved]

This is Issue 550 moved from the old Google Code project and added by 2011-06-27T18:16:14.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Updates, Milestone-7.1

Original description

Setup a 'publish on' date for updates to be auto published (draft-> no draft)

Template based vs. DOM manipulation approach to UI generation on mobile [moved]

This is Issue 26 moved from the old Google Code project and added by 2010-06-24T02:56:26.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Tutorial, Milestone-X, Mobile

Original description

<b>Please describe the issue:</b>
On mobile we found it faster practice to generate UI using SOY templates rather than creating DOM elements. Would be nice to write an article describing these 2 different approaches and the approach we are taking with our common components which is essentially to create control objects as decorators around content created via SOY templates.
Neil Thomas is looking after common components.

<b>Please provide any additional information below.</b>

Slide for css mask [moved]

This is Issue 494 moved from the old Google Code project and added by 2011-03-21T21:10:00.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Milestone-X, new, Slides

Original description

mask using css gradient
- mask using image

html5rocks.com needs a release note [moved]

This is Issue 432 moved from the old Google Code project and added by 2011-02-11T00:18:22.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P2

Original description

<b>What steps will reproduce the problem?</b>
<b>1.</b>
<b>2.</b>
<b>3.</b>

<b>What is the expected output? What do you see instead?</b>


<b>Please use labels and text to provide additional information.</b>

A case study for mugtug sketchpad usage of canvas [moved]

This is Issue 201 moved from the old Google Code project and added by 2010-09-23T00:29:16.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, New, casestudy, Milestone-X

Original description

mugtug agreed to write a case study for sketchpad,

SharedWorker tutorial [moved]

This is Issue 66 moved from the old Google Code project and added by 2010-07-28T00:03:04.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Tutorial, New

Original description

vli:
I dont see one on the list

john.kotzian:
I don't know enough about this function to create a test. However it appears to work in this thread: http://groups.google.com/a/chromium.org/group/chromium-html5/browse_thread/thread/8a1a0042c8c32de3

Need more info

NYT skimmer to offline feature page [moved]

This is Issue 314 moved from the old Google Code project and added by 2010-11-29T23:48:44.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, features, Milestone-X

Original description

as a highlighted app:
http://www.nytimes.com/timesskimmer/

they use app cache... well once they release v2.0 which is coming..

use django 1.2 in updates [moved]

This is Issue 553 moved from the old Google Code project and added by 2011-06-27T23:04:15.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Task, Priority-P3, Updates, Milestone-X

Original description

from google.appengine.dist import use_library
use_library('django', '1.2')

I tried to upgrade before, but it was a mess and required library changes as well.
Might take some work.

More info on the "mobifying" post about Home screen icons and `is_mobile` boolean. [moved]

This is Issue 479 moved from the old Google Code project and added by 2011-03-05T07:06:56.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P3, Milestone-6, Mobile, Tutorial

Original description

There is an awesome post my Mathias Bynens on home screen icons:
http://mathiasbynens.be/notes/touch-icons

Also, it would be rad if you explained how the "is_mobile" boolean is defined.

integrate gmail mobile content [moved]

This is Issue 135 moved from the old Google Code project and added by 2010-08-04T22:25:13.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P1, Milestone-X, Tutorial, New, Mobile

Original description

Forthcoming stuff coming, but for now its worth considering what's already published on http://googlecode.blogspot.com/search/label/mobile

"Pussssshing the Web forward with Notifications" [moved]

This is Issue 447 moved from the old Google Code project and added by 2011-02-18T19:52:05.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, New, Tutorial, Mobile

Original description

mobile tutorial on push technologies
- sse
- intents

Slide for -webkit-border-image [moved]

This is Issue 493 moved from the old Google Code project and added by 2011-03-21T21:08:46.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Milestone-X, Slides, New

Original description

border-width: 31px;
-webkit-border-image: url(images/border-image.png) 31  round stretch;
-webkit-border-image: url(images/border-image.png) 31  stretch round;
...

Choosing a Framework [moved]

This is Issue 453 moved from the old Google Code project and added by 2011-02-18T19:57:28.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Mobile, Tutorial, New

Original description

Sencha - http://www.sencha.com
jQuery mobile - http://jquerymobile.com/
PhoneGap - http://www.phonegap.com/
http://www.appcelerator.com/

No textual equiv. for profile links. [moved]

This is Issue 501 moved from the old Google Code project and added by 2011-03-31T22:56:30.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P2, a11y

Original description

Profile links (twitter, homepage, etc) look like:

  <li><a data-type=&quot;google&quot; itemprop=&quot;url&quot; href=&quot;http://www.google.com/profiles/{{profile.google}}&quot;>&nbsp;</a></li>

There's nothing there for a visually impaired user.

Letting go of jQuery for HTML5 Developers [moved]

This is Issue 233 moved from the old Google Code project and added by 2010-10-14T16:30:21.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P1, Tutorial, Milestone-7.1, New

Original description

 - insertadjacenthtml, delegation, traversal

basically all the newish DOM methods (and array extras) that facilitate a jquery-ish style of dev.

getters and setters might come into play too...

ARIA Article

This is Issue 507 moved from the old Google Code project and added by 2011-04-19T07:01:01.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Tutorial, Milestone-X, new

Original description

Article on ARIA goodness in HTML5.

Moving update back to draft after publishing changes published date to '9999-..' [moved]

This is Issue 551 moved from the old Google Code project and added by 2011-06-27T18:20:04.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P1, Updates, Milestone-7.1

Original description

Verify this, but I've seen it happen.

the picture in picture demo doesnt work on iPad [moved]

This is Issue 545 moved from the old Google Code project and added by 2011-06-22T23:58:27.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P2

Original description

I tried the HTML5 demo of the picture in picture playback but it doesn't seem to work on my ipad.
can the ipad play more than 1 video at a time?

draft by default [moved]

This is Issue 549 moved from the old Google Code project and added by 2011-06-27T18:15:20.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P2, Updates, Milestone-7.1

Original description

They draft checkbox should be enabled by default.

Sync database API with worker [moved]

This is Issue 76 moved from the old Google Code project and added by 2010-07-28T00:15:18.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Milestone-X, SampleCode, Tutorial, offline

Original description

Sync database API with worker

UI Design Considerations for Mobile Web Apps [moved]

This is Issue 449 moved from the old Google Code project and added by 2011-02-18T19:54:11.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Mobile, Tutorial, New, Milestone-Q42011-1

Original description

mobile ui patterns:
- vertical layout
- minimal whitespace
- absolute position
- fast buttons

Mention Useful and Common HTML5 Resources in Slides [moved]

This is Issue 193 moved from the old Google Code project and added by 2010-09-16T20:52:37.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Enhancement, Priority-Medium, Slides

Original description

I always mention:

caniuse.com
html5 boilerplate
html5 reset
html5 docter
html5rocks.com

"Making "Native Apps" with HTML5" [moved]

This is Issue 448 moved from the old Google Code project and added by 2011-02-18T19:53:07.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Mobile, new, Tutorial

Original description

How to replicate the functionality, speed, performance, look/feel of native apps in HTML5 mobile

List of slides which lack cross-browser CSS, or inaccurately label themselves as Chrome only [moved]

This is Issue 473 moved from the old Google Code project and added by 2011-03-01T22:48:21.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P2

Original description

Hey guys, figured it wasn't really worth filing a bunch of bugs for these, so thought I'd just list 'em all together.
Cross-browser demo support just helps propagate HTML5, so presumably you'd be fans.

http://slides.html5rocks.com/#drag-out  (Seems to work just fine in FF4, but says it is Chrome only?
https://developer.mozilla.org/En/DragDrop/Drag_Operations )

http://slides.html5rocks.com/#video-audio  (you guys could add moz gradient as well as webkit one, and/or http://hacks.mozilla.org/wp-content/uploads/2010/08/reflectionwithwaterripples.html)

http://slides.html5rocks.com/#css-gradients  (-moz-linear-gradient https://developer.mozilla.org/En/CSS/-moz-linear-gradient)

http://slides.html5rocks.com/#css-shadow (does not use standard boxShadow in changeShadow https://developer.mozilla.org/En/CSS/box-shadow)

http://slides.html5rocks.com/#logo-demo (-moz-linear-gradient)

Fullscreen API [moved]

This is Issue 80 moved from the old Google Code project and added by 2010-07-28T00:24:41.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P1, Milestone-Q12012, Tutorial, SampleCode, MovedFromQ42011

Original description

Fullscreen for video

"Debugging a mobile app" [moved]

This is Issue 446 moved from the old Google Code project and added by 2011-02-18T19:50:51.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, new, Mobile, Tutorial, MovedFromQ42011, Milestone-Q12012

Original description

- Very hard! Easily could be several articles
- Guide to getting up and running with Android emulator
  + use GAE and proxy localhost, etc.
- issues with appcache on iPad && Safari
- Cover console, emulators

Add better cp/mv for tutorials/file/filesystem/terminal.html [moved]

This is Issue 472 moved from the old Google Code project and added by 2011-02-25T08:18:45.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P3, Milestone-X, Tutorial

Original description

<b>Please describe the issue:</b>

cp/mv commands in terminal.js look un-realistic.
The attached patch replaces cp/mv commands with better ones.

<b>Please provide any additional information below.</b>

Polyfills, progressive ehancements, feature detection article [moved]

This is Issue 377 moved from the old Google Code project and added by 2011-01-06T22:59:42.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P2, Tutorial, Milestone-6

Original description

stuff is important

object-fit sample/slide [moved]

This is Issue 382 moved from the old Google Code project and added by 2011-01-10T19:22:59.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Slides, SampleCode, New, Milestone-X

Original description

http://dev.opera.com/articles/view/css3-object-fit-object-position/

PageVisibility API tutorial [moved]

This is Issue 530 moved from the old Google Code project and added by 2011-06-01T23:36:56.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Tutorial, New, Milestone-Q32012

Original description

http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/PageVisibility/Overview.html

Starting to land in Chromium

problems with FF 3.6 and opera [moved]

This is Issue 543 moved from the old Google Code project and added by 2011-06-16T00:02:25.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P2

Original description

The current version doesn't work properly jump  w FF 3.6 and opera.  The scrolling the second slide almost complitely... the trimmed down version frontera the examples works better on FF. But presente a Bug on chrome and FFF4... where the First key event are ignores... un fact it seems to be just the right key down evets 

"Performance Wins for Your Mobile App" [moved]

This is Issue 442 moved from the old Google Code project and added by 2011-02-18T19:46:38.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, New, Mobile, Tutorial

Original description

Fragments for screen resolutions: come up with framework for different resolutions.

"Time-to-text" on mobile is important. Load things lazily (don't display images /content that may never be seen. @font-face keeps text invisible while font downloads.

Minimize browser reflows: If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or position-fixed to accomplish this.

document.createDocumentFragment()
dataURIs
css selectors (read from right to left -> no decendant selectors, ids are best)
css3 3d transforms for animations instead of el.style.top/el.style.left
gzip, js/css compressions
combine css/jss
sprites
hiding/unhiding containers instead of creating them on the fly?
Be smart about DOM manipulations: e.g. reduce browser repaints
new ECMASCript methods (querySelector, array methods, etc.) instead of libs.

HTML5 2d and 3d graphics introduction [moved]

This is Issue 152 moved from the old Google Code project and added by 2010-08-15T06:10:41.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Defect, Priority-Medium, Tutorial, Milestone-X

Original description

canvas, webgl, etc

It would be good to include "if this feature is supported by mobile safari or android" in tutotirals [moved]

This is Issue 540 moved from the old Google Code project and added by 2011-06-08T16:19:02.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P2

Original description

<b>What steps will reproduce the problem?</b>
<b>1.</b>
<b>2.</b>
<b>3.</b>

<b>What is the expected output? What do you see instead?</b>


<b>Please use labels and text to provide additional information.</b>

data- attribute article [moved]

This is Issue 372 moved from the old Google Code project and added by 2011-01-04T23:04:20.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P3, Tutorial, Milestone-Q42011-1, New

Original description

from jared wyles.

ernest will coordinate

Send him http://code.google.com/p/html5rocks/wiki/ContributorsGuide and
ask for a Google Doc with the content ( so we can add comments/make suggestions).

Web Inspector Storage tab screenshot out of date [moved]

This is Issue 421 moved from the old Google Code project and added by 2011-02-05T00:27:34.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P3, Tutorial

Original description

Hello,

The screenshot for the storage tab location is no longer available in that location. It has moved to the "Resources Tab" > "Storage Node" 

http://www.html5rocks.com/tutorials/developertools/part1/#toc-overview-storage


Thanks,
Mohamed Mansour

Best Practices for cross promotion/pollination of native and html5 web app version [moved]

This is Issue 451 moved from the old Google Code project and added by 2011-02-18T19:55:44.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Mobile, new, Tutorial

Original description

- Show buttons on site pointing to mobile version.
- "It's on the Web" button. [romannurik (consultant)]

WebView vs. WebApp [moved]

This is Issue 450 moved from the old Google Code project and added by 2011-02-18T19:54:56.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Mobile, Tutorial, New, Milestone-Q22012

Original description

- WebView gives you discoverability in Marketplace
- WebView: has intents, notifications, and other native apis (polyfill until they're available in html5)

Fullscreen API [moved]

This is Issue 80 moved from the old Google Code project and added by 2010-07-28T00:24:41.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P1, Milestone-Q12012, Tutorial, SampleCode, MovedFromQ42011

Original description

Fullscreen for video

WebStorage is supported in IE8 [moved]

This is Issue 519 moved from the old Google Code project and added by 2011-05-10T13:35:14.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P2, Milestone-Q42011-1, offline, features

Original description

In your page about storage, you show a table about name/value pair storage browser support and write  Support is OK for IE 10+

http://caniuse.com/ said it's OK for IE 8+.

navigator.registerProtocolHandler() tutorial and slides [moved]

This is Issue 531 moved from the old Google Code project and added by 2011-06-01T23:38:24.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Milestone-Q42011-1, Tutorial, New, Slides

Original description

https://developer.mozilla.org/en/DOM/window.navigator.registerProtocolHandler

In Chromium

have html5 badge for author page [moved]

This is Issue 349 moved from the old Google Code project and added by 2010-12-16T23:33:31.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P2

Original description

<b>What steps will reproduce the problem?</b>
<b>1.</b>
<b>2.</b>
<b>3.</b>

<b>What is the expected output? What do you see instead?</b>


<b>Please use labels and text to provide additional information.</b>

AppCache usable from worker, also appcache debugging [moved]

This is Issue 77 moved from the old Google Code project and added by 2010-07-28T00:17:05.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P3, Milestone-X, Tutorial, offline

Original description

vli:
eric, this can be a revision to the current appcache tutorial you are working on.

Canvas example -> Dragable photos may not show up. [moved]

This is Issue 32 moved from the old Google Code project and added by 2010-06-24T08:02:07.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P3, Slides

Original description

Link to page: http://slides.html5rocks.com/#slide24

The locations of the dragable photos on this page are randomized. It appears that the boundaries for their location are not defined correctly; every now and then they will appear almost or entirely out of view of the bottom or right hand side of the picture.

replace pic with videos on author page [moved]

This is Issue 350 moved from the old Google Code project and added by 2010-12-16T23:34:07.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Bug, Priority-P2

Original description

sample: http://particlebrand.com/v2/company.html

UI Patterns that are dependant on the device you're view on [moved]

This is Issue 452 moved from the old Google Code project and added by 2011-02-18T19:56:44.000Z by [email protected]. Please review that bug for more context and additional comments, but update this bug.

Original labels: Type-Feature, Priority-P2, Mobile, Tutorial, New

Original description

rommanurrik consultant

- Hide onscreen back button on Android, show it on iOS
- Tabs: android on top, iPhone on bottom
- Behaviors consistent with platform
- Should we really make these device-dependant modifications?