Constraint validation - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
The creation of web forms has always been a complex task. While marking up the form itself is easy, checking whether each field has a valid and coherent value is more difficult, and informing the user about the problem may become a headache. HTML5 introduced new mechanisms for forms: it added new semantic types for the <input> element and constraint validation to ease the work of checking the form content on the client side. Basic, usual constraints can be checked, without the need for JavaScript, by setting new attributes; more complex constraints can be tested using the Constraint Validation API.
Web Audio Modem
https://martinmelhus.com/web-audio-modem/
Lately, I've been working with a client where my development computer is not connected to the Internet. This is a huge inconvenience, as the unavailability of Google and Stack Overflow vastly impact my productivity. Only recently have I begun to grasp how much of my time is actually spent copy/pasting between Visual Studio and the browser.
My office also features an Internet connected laptop and my development computer expose 3,5 mm jack sockets for audio devices. And thus my problems can be solved! Here's how I made a modem for closing the gap with Web Audio.
Web Audio Modem
https://martinmelhus.com/web-audio-modem
Lately, I've been working with a client where my development computer is not connected to the Internet. This is a huge inconvenience, as the unavailability of Google and Stack Overflow vastly impact my productivity. Only recently have I begun to grasp how much of my time is actually spent copy/pasting between Visual Studio and the browser.
My office also features an Internet connected laptop and my development computer expose 3,5 mm jack sockets for audio devices. And thus my problems can be solved! Here's how I made a modem for closing the gap with Web Audio.
HTML5 Drag and Drop Avatar Changer with Resizing and Cropping | CSS-Tricks
http://css-tricks.com/html5-drag-and-drop-avatar-changer-with-resizing-and-cropping/
Let's create a page where a user can update their avatar with as little friction as possible: they just drop an image anywhere on the page and it's done.
HTML5 Drag and Drop Avatar Changer with Resizing and Cropping | CSS-Tricks
http://css-tricks.com/html5-drag-and-drop-avatar-changer-with-resizing-and-cropping
Let's create a page where a user can update their avatar with as little friction as possible: they just drop an image anywhere on the page and it's done.
quakejs.com
http://www.quakejs.com/
QuakeJS is a port of ioquake3 to JavaScript with the help of Emscripten.
quakejs.com
http://www.quakejs.com
QuakeJS is a port of ioquake3 to JavaScript with the help of Emscripten.
Article: Native vs. HTML5: How the auto industry is forcing change for the mobile web
http://venturebeat.com/2013/10/05/native-vs-html5-how-the-auto-industry-is-forcing-change-for-the-mobile-web/
Article: Native vs. HTML5: How the auto industry is forcing change for the mobile web
http://venturebeat.com/2013/10/05/native-vs-html5-how-the-auto-industry-is-forcing-change-for-the-mobile-web
Imperfect Circles – Aesthetic imperfection with fractal subdivision | Rectangle World – HTML5 Canvas and JavaScript: Tutorials and Experiments
http://rectangleworld.com/blog/archives/413
Getting a computer to draw a shape in the way that a human would requires programming in some imperfection. The simple idea is to add in some randomization of drawing coordinates, which could be done in various ways. Below are two examples of imperfect circles drawn in an HTML5 canvas with JavaScript, where the imperfection has been added through the use of a fractal-like subdivision algorithm. The imperfection can be subtle, but it is enough to make the image appear to be human-drawn. Although the images are quite simple I find them quite nice to look at.
canvg - Javascript SVG parser and renderer on Canvas - Google Project Hosting
http://code.google.com/p/canvg/
canvg is a SVG parser and renderer. It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element. The rendering speed of the examples is about as fast as native SVG.
canvg - Javascript SVG parser and renderer on Canvas - Google Project Hosting
http://code.google.com/p/canvg
canvg is a SVG parser and renderer. It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element. The rendering speed of the examples is about as fast as native SVG.
dat-gui - A lightweight controller library for JavaScript. - Google Project Hosting
http://code.google.com/p/dat-gui/
A lightweight graphical user interface for changing variables in JavaScript.
dat-gui - A lightweight controller library for JavaScript. - Google Project Hosting
http://code.google.com/p/dat-gui
A lightweight graphical user interface for changing variables in JavaScript.
Real-time synchronous multiplayer 3D gaming with HTML5 - The Artillery Blog
http://blog.artillery.com/2012/05/realtime-multiplayer-3d-gaming-html5.html
Six weeks ago we set out to see if we could build a real-time, “twitch” 3D game in the browser using HTML5. We built a few games and were pleasantly surprised with what we achieved.
Announcing Artillery's Project Atlas, a Hardcore RTS for the Browser - The Artillery Blog
http://blog.artillery.com/2013/09/project-atlas-and-the-artillery-platform.html
The Artillery Platform, which Atlas is built upon, uses JavaScript and WebGL to deliver a high-quality, low-latency multiplayer gaming experience to anyone with a modern web browser. The platform is centered around 3D experiences with real-time multiplayer capability and strong community support. The JavaScript-based game engine features a component-entity design, a modern deferred rendering pipeline, and development tools designed to allow creative expression and super-fast iteration.
Interesting textures with layered fractal gradients | Rectangle World – HTML5 Canvas and JavaScript: Tutorials and Experiments
http://rectangleworld.com/blog/archives/654
Here’s another experiment which makes use of a noisy data set defined by fractal subdivision, this time applied to create some interestingly textured gradients
KineticJS HTML5 Canvas Framework
http://kineticjs.com/
KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. Try it out!
KineticJS HTML5 Canvas Framework
http://kineticjs.com
KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. Try it out!
An introduction to the Crafty game engine - Build New Games
http://buildnewgames.com/introduction-to-crafty/
In this tutorial, I’ll show you how Crafty makes it easy to make simple, 2D games and I’ll walk you through the process of making a very simple game from start to finish. By the end of the tutorial, you’ll know how to start making your own games from scratch using Crafty and you’ll have our example game built and running in your own development environment which will give you a great jumping-off point for future projects.
An introduction to the Crafty game engine - Build New Games
http://buildnewgames.com/introduction-to-crafty
In this tutorial, I’ll show you how Crafty makes it easy to make simple, 2D games and I’ll walk you through the process of making a very simple game from start to finish. By the end of the tutorial, you’ll know how to start making your own games from scratch using Crafty and you’ll have our example game built and running in your own development environment which will give you a great jumping-off point for future projects.
Case Study: Auto-Resizing HTML5 Games - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/
In the summer of 2010, we created Sand Trap, a game that we entered in a competition on HTML5 games for mobile phones. But most mobile phones either displayed only part of the game or made the game too small—making it completely unplayable. So we took it upon ourselves to make the game fluidly adjust to match any resolution. After a bit of re-programming and using ideas outlined in this article, we had a game that scaled across any modern browser, whether it ran in a desktop or a mobile device.
Case Study: Auto-Resizing HTML5 Games - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games
In the summer of 2010, we created Sand Trap, a game that we entered in a competition on HTML5 games for mobile phones. But most mobile phones either displayed only part of the game or made the game too small—making it completely unplayable. So we took it upon ourselves to make the game fluidly adjust to match any resolution. After a bit of re-programming and using ideas outlined in this article, we had a game that scaled across any modern browser, whether it ran in a desktop or a mobile device.
You Don't Know Beans About CoffeeScript – Talks – Aseem Kishore
http://aseemk.com/talks/intro-to-coffeescript#/
You've heard of CoffeeScript, and you've probably seen some code in it. But do you really know it? Unless you've written something substantial in it, I contend that you don't.
Bombermine — Massively Bomberman Online with up to 1000 players on the single map
http://t.co/9iPyfM0yYm
Holy cow. MMO BOMBERMAN. The promise of HTML5 multiplayer gaming has been fulfilled. We can all go home, now. http://t.co/9iPyfM0yYm
Build a Street Fighter Demo with CSS Animations and JavaScript
http://davidwalsh.name/street-fighter
I recently learned a cool technique from Simurai about how to animate PNG sprites with the CSS3 animations' steps() property. The main idea in this technique is to "recreate" some kind of animated GIF but with the tiles of a PNG sprite.
Using WebAPIs to make the web layer more capable ✩ Mozilla Hacks – the Web developer blog
https://hacks.mozilla.org/2013/02/using-webapis-to-make-the-web-layer-more-capable/
Part of making both Firefox OS and the web as a platform a stronger layer and alternative for developers, we are working on a number of WebAPIs. I’d like to introduce you them here!
Using WebAPIs to make the web layer more capable ✩ Mozilla Hacks – the Web developer blog
https://hacks.mozilla.org/2013/02/using-webapis-to-make-the-web-layer-more-capable
Part of making both Firefox OS and the web as a platform a stronger layer and alternative for developers, we are working on a number of WebAPIs. I’d like to introduce you them here!
HTML5 History / pushState URLs, .htaccess and You - Joss Crowcroft
http://www.josscrowcroft.com/2012/code/htaccess-for-html5-history-pushstate-url-routing/
So, this is basically doing for single-page apps' index.html what we have typically done for PHP apps using index.php as a single entry point for all URL paths. But, I think it's a horrible idea.
HTML5 History / pushState URLs, .htaccess and You - Joss Crowcroft
http://www.josscrowcroft.com/2012/code/htaccess-for-html5-history-pushstate-url-routing
So, this is basically doing for single-page apps' index.html what we have typically done for PHP apps using index.php as a single entry point for all URL paths. But, I think it's a horrible idea.
Appcache Facts
http://appcachefacts.info/
Appcache Facts
http://appcachefacts.info
Building a live green screen with getUserMedia() and MediaStreams - Tim Taubert
http://timtaubert.de/blog/2012/10/building-a-live-green-screen-with-getusermedia-and-mediastreams/
This is an admittedly very simple example of a green screen but you can use this little template to manipulate your webcam’s live video stream and build all kinds of fancy demos with it.
Building a live green screen with getUserMedia() and MediaStreams - Tim Taubert
http://timtaubert.de/blog/2012/10/building-a-live-green-screen-with-getusermedia-and-mediastreams
This is an admittedly very simple example of a green screen but you can use this little template to manipulate your webcam’s live video stream and build all kinds of fancy demos with it.
gbraad/html5-google-authenticator
https://github.com/gbraad/html5-google-authenticator
A simple Google Authenticator app written in HTML
How to Create a CSS3 Ajax Loading Icon Without Images - SitePoint
http://www.sitepoint.com/css3-ajax-loading-icon/
Fortunately, CSS3 allows us to create loading icons without images. They’re easy to create, scale, re-color, use on any background and don’t incur image downloads
How to Create a CSS3 Ajax Loading Icon Without Images - SitePoint
http://www.sitepoint.com/css3-ajax-loading-icon
Fortunately, CSS3 allows us to create loading icons without images. They’re easy to create, scale, re-color, use on any background and don’t incur image downloads
Atari - Building Atari with CreateJS
http://atari.com/arcade/developers/building-atari-createjs
gritsgame - GRITS is a cross-functional effort to create a boilerplate codebase to provide to HTML5 game developers that are looking to get started using Google's technology stack - Google Project Hosting
http://code.google.com/p/gritsgame/
The intent is to create a very small, multiplayer game to launch and provide all the source code up to the masses for boilerplate.
gritsgame - GRITS is a cross-functional effort to create a boilerplate codebase to provide to HTML5 game developers that are looking to get started using Google's technology stack - Google Project Hosting
http://code.google.com/p/gritsgame
The intent is to create a very small, multiplayer game to launch and provide all the source code up to the masses for boilerplate.
javascript - Convert Data URI to File then append to FormData - Stack Overflow
http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
I've been trying to re-implement an HTML5 image uploader like the one on the Mozilla Hacks site, but that works with WebKit browsers. Part of the task is to extract an image file from the canvas object and append it to a FormData object for upload.
Uploading directly from HTML5 canvas to imgur — Jonas Wagner's Blog
http://29a.ch/2011/9/11/uploading-from-html5-canvas-to-imgur-data-uri
For an upcoming canvas project I want to give the users the ability to upload the content of the canvas to an image sharing service. When looking for a suitable API I came across imgur.com the registration was trivial, and they support CORS and base64/dataurl uploads, perfect!
radikalFX » Blog Archive » Dynamic image collage with HTML5 and Canvas
http://radikalfx.com/2009/10/16/canvas-collage/
My first demo is a simple Canvas element which can be used to make a collage of images.
radikalFX » Blog Archive » Dynamic image collage with HTML5 and Canvas
http://radikalfx.com/2009/10/16/canvas-collage
My first demo is a simple Canvas element which can be used to make a collage of images.
Sketchpad - Online Paint/Drawing application
http://mudcu.be/sketchpad/
Sketchpad - Online Paint/Drawing application
http://mudcu.be/sketchpad
lake.js
http://alligator.github.com/lake.js/
Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element.
lake.js
http://alligator.github.com/lake.js
Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element.
Why Publishers Don't Like Apps - Technology Review
http://www.technologyreview.com/business/40319/
Last fall, we moved all the editorial in our apps, including the magazine, into a simple RSS feed in a river of news. We dumped the digital replica. Now we're redesigning Technologyreview.com, which we made entirely free for use, and we'll follow the Financial Times in using HTML5, so that a reader will see Web pages optimized for any device, whether a desktop or laptop computer, a tablet, or a smart phone. Then we'll kill our apps, too.
Why Publishers Don't Like Apps - Technology Review
http://www.technologyreview.com/business/40319
Last fall, we moved all the editorial in our apps, including the magazine, into a simple RSS feed in a river of news. We dumped the digital replica. Now we're redesigning Technologyreview.com, which we made entirely free for use, and we'll follow the Financial Times in using HTML5, so that a reader will see Web pages optimized for any device, whether a desktop or laptop computer, a tablet, or a smart phone. Then we'll kill our apps, too.
Dillinger, the last Markdown editor, ever.
http://dillinger.io/
Dillinger, the last Markdown editor, ever.
http://dillinger.io
BrowserQuest – a massively multiplayer HTML5 (WebSocket + Canvas) game experiment ✩ Mozilla Hacks – the Web developer blog
http://hacks.mozilla.org/2012/03/browserquest/
BrowserQuest is a tribute to classic video-games with a multiplayer twist. You play as a young warrior driven by the thrill of adventure. No princess to save here, just a dangerous world filled with treasures to discover. And it’s all done in glorious HTML5 and JavaScript.
BrowserQuest – a massively multiplayer HTML5 (WebSocket + Canvas) game experiment ✩ Mozilla Hacks – the Web developer blog
http://hacks.mozilla.org/2012/03/browserquest
BrowserQuest is a tribute to classic video-games with a multiplayer twist. You play as a young warrior driven by the thrill of adventure. No princess to save here, just a dangerous world filled with treasures to discover. And it’s all done in glorious HTML5 and JavaScript.
Visual editor sandbox - MediaWiki
http://www.mediawiki.org/wiki/Special:VisualEditorSandbox
Visual editor sandbox
OFF MY LAWN! – Jeffrey Zeldman Presents The Daily Report
http://www.zeldman.com/2011/11/18/it-is-not-ironic
It is publishing. It is humanity. It is the vanguard of ideas clashing against the rearguard of commerce. This is not new. This is all to be expected. We must stop raising our eyebrows and chuckling at it. We must decide to accept the world as it is, or to roll up our sleeves and help.
Adobe product manager fingers Apple for death of Flash Player for mobile -- Engadget
http://www.engadget.com/2011/11/11/adobe-product-manager-fingers-apple-for-death-of-flash-player-fo
Poll: What Is Your Reaction to the Death of Mobile Flash?
http://www.readwriteweb.com/archives/poll_what_is_your_reaction_to_the_death_of_mobile.php
The Web is singing this morning. The coming death of Flash on mobile devices has made a lot of tech pundits and developers very happy. There is a big fat "I told you so" coming from all corners the of Internet while all Adobe can do is quietly sit back and rue the day the original iPhone was announced.
Ex-Flash Manager: Adobe Ignored Smartphones Until It Was Too Late
http://www.readwriteweb.com/archives/ex-flash_manager_adobe_ignored_smartphones_until_i.php
A former manager and engineer of Flash at Adobe said today that when the true smartphone revolution came in 2007 with the announcement of the iPhone is 2007, Adobe ignored it. Carlos Icaza co-founded Ansca Mobile, the creators of the Corona SDK, left Adobe in 2007 when his call for embracing the touchscreen smartphone evolution was ignored by Adobe executives.
The mobile app is going the way of the CD-ROM: To the dustbin of history | VentureBeat
http://venturebeat.com/2011/11/09/mobile-web
For developers, it’s technologically more manageable to build one mobile web app than a half-dozen or even just two native apps. And given the state of mobile web standards, we’re quickly approaching a point where end users can’t tell the difference between the two. All that’s really left is a business model for mobile web apps, Sullivan contends.
TideArt - Web designers: Time to ditch Flash, Silverlight, and embrace HTML5
http://tideart.com/?id=4ebafb57
Yesterday, Adobe announced major job cuts and a company restructuring, and indicated that their focus on Flash may not be what it used to be, by cutting off Flash development on Android and the Playbook. Meanwhile last week, Microsoft was reluctantly admitting that Silverlight isn't a big part of their future either. The message is clear, and even if it means some relearning for long time web designers, it's time to switch to HTML5 if you haven't already.
LukeW | The Web OS is Already Here…
http://www.lukew.com/ff/entry.asp?1441=
Let me restate that simply. The Web (browser) is inside of every application instead of every application being inside the Web (browser).
Twitter / Ben Ward: Oh for fucks sake. We may ...
http://twitter.com/BenWard/status/130211654393798657
@BenWard: Oh for fucks sake. We may as well just "consider replacing all HTML tags with
DZSlides
http://paulrouget.com/dzslides
DZSlides is a one-page-template to build your presentation in HTML5 and CSS3.
[from codepo8] HTML5 Rocks - A Simple TODO list using HTML5 IndexedDB
http://www.html5rocks.com/tutorials/indexeddb/todo
JPEGs with Alpha Channels?!? | jackadamblog
http://blog.jackadam.net/2010/alpha-jpegs
HTML 5 Chip Tracker
http://jonbro.tk/blog/2010/09/19/html_5_chip_tracker.html
Pixel Editor, free online pixel editor - Pixie
http://pixie.strd6.com
"On Pixie you can create amazing pixel art for free, from anywhere, and share it with the world."
Jon Combe | Experiments | Thrust: A classic computer game remake using
http://joncom.be/experiments/thrust
"Thrust was just awesome and it is that game which I have attempted to recreate here using just JavaScript and the HTML tag. I have 'cheated' a little in that I use Scott Schiller's excellent SoundManager 2 Javascript audio manager (which in turn uses Flash) to play the sounds, but I think that is fair game in the spirit of what I am trying to do."
kanaka's noVNC at master - GitHub
http://github.com/kanaka/noVNC
Google to Open-source VP8 for HTML5 Video
http://newteevee.com/2010/04/12/google-to-open-source-vp8-for-html5-video
W3C FileAPI in Firefox 3.6 at hacks.mozilla.org
http://hacks.mozilla.org/2009/12/w3c-fileapi-in-firefox-3-6
"Often, web applications will prompt the user to select a file, typically to upload to a server. Unless the web application makes use of a plugin, file selection occurs through an HTML input element, of the sort . Firefox 3.6 now supports much of the W3C File API, which specifies the ability to asynchronously read the selected file into memory, and perform operations on the file data within the web application (for example, to display a thumbnail preview of an image, before it is uploaded, or to look for ID3 tags within an MP3 file, or to look for EXIF data in JPEG files, all on the client side). This is a new API, and replaces the file API that was introduced in Firefox 3."
Aral Balkan · Maximizing your DROIT, or: why you should learn HTML5, CSS3, and JavaScript for mobile development.
http://aralbalkan.com/2508
"While Microsoft drifts aimlessly with Windows Mobile trying to play a fruitless game of cat and mouse with Apple, and while Google – the defender of all things open and web – invests in Java with Android, one company has come out of left field with a solid vision to embrace open web technologies for its mobile platform. That company is Palm and its platform is called WebOS. And you should stand up and take notice because it is one of the most important developments in the mobile world today."
HTML5 のセクションアウトラインを生成してみよう！ - IT戦記
http://d.hatena.ne.jp/amachang/20090915/1252999677
It's the HTML 5 outline algorithm in JavaScript. "javascript:(function(s){ s.src = 'http://amachang.sakura.ne.jp/misc/outline/check.js'; document.body.appendChild(s) })(document.createElement('script')) "
HTML 5 Outliner
http://gsnedders.html5.org/outliner
Need to remember that this algorithm exists, for when I start working on an outliner again.
Web Database - W3C HTML5
http://dev.w3.org/html5/webdatabase
"This specification defines an API for storing data in databases that can be queried using a variant of SQL."
camen design · Video for Everybody!
http://camendesign.com/code/video_for_everybody
"Video For Everybody is very simply a chunk of HTML code that embeds a video into a website using the HTML5 element which offers native playback in Firefox 3.5 and Safari 3 & 4 ... In other browsers that do not support , it falls back to Adobe Flash ... If Flash is not installed, QuickTime is used (which allows playback on the iPhone) ... If QuickTime is not installed then Windows Media Player is used in Internet Explorer for Windows Vista and above. ... Finally, if all else fails, a warning is issued that provides links to download the video, and links to software relevant to getting the video to play within the browser itself. ... This is all done without JavaScript and requires only two video encodes, one OGG file for Firefox 3.5, and one MP4 file for everything else (Flash / Safari / iPhone)."
Chromium Blog: Extensions at Google I/O
http://blog.chromium.org/2009/05/extensions-at-google-io.html
"Today I gave a presentation at Google I/O explaining some of the cool ideas that lie at the heart of our upcoming extension system. For those who didn't get a chance to attend the conference, you can check out the slides"
Eric's Archived Thoughts: JavaScript Will Save Us All
http://meyerweb.com/eric/thoughts/2008/10/22/javascript-will-save-us-all
"we’re all vendors now, baby!"
Digital Web Magazine - HTML5, XHTML2, and the Future of the Web
http://www.digital-web.com/articles/html5_xhtml2_and_the_future_of_the_web
"HTML5 will be the future of the web, so my advice would be to pay close attention to it."
Hixie's Natural Log: Tag Soup: appendChild() of a script that calls document.write()
http://ln.hixie.ch/?count=1&start=1155195074
"What will happen? What should I put in the spec?"