NotesThe 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.FeedUnfurl
NotesLately, 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.Unfurl
NotesLet'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. FeedEmbedUnfurl
NotesGetting 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.Unfurl
Notescanvg 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. Unfurl
NotesSix 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.Unfurl
NotesThe 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.Unfurl
NotesHereās another experiment which makes use of a noisy data set defined by fractal subdivision, this time applied to create some interestingly textured gradientsUnfurl
NotesKineticJS 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!Unfurl
NotesIn 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.FeedUnfurl
Notes 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. Unfurl
NotesYou'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.Unfurl
NotesI 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.FeedEmbedUnfurl
NotesPart 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!FeedEmbedUnfurl
NotesSo, 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.Unfurl
NotesThis 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.FeedUnfurl
NotesFortunately, 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 downloadsFeedUnfurl
NotesI'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.FeedUnfurl
NotesFor 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!FeedUnfurl
Notes 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. Unfurl
NotesBrowserQuest 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.FeedEmbedUnfurl
NotesIt 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. FeedEmbedUnfurl
NotesThe 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. Unfurl
NotesA 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. Unfurl
NotesFor 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.Unfurl
NotesYesterday, 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.Unfurl
NotesLet me restate that simply. The Web (browser) is inside of every application instead of every application being inside the Web (browser).FeedUnfurl
Constraint validation - HTML: HyperText Markup Language | MDN
Web Audio Modem
quakejs.com
An introduction to the Crafty game engine - Build New Games
Case Study: Auto-Resizing HTML5 Games - HTML5 Rocks
Build a Street Fighter Demo with CSS Animations and JavaScript
Using WebAPIs to make the web layer more capable ā© Mozilla Hacks ā the Web developer blog
WE ARE BACK
javascript - Convert Data URI to File then append to FormData - Stack Overflow
Uploading directly from HTML5 canvas to imgur ā Jonas Wagner's Blog
Sketchpad - Online Paint/Drawing application
OFF MY LAWN! ā Jeffrey Zeldman Presents The Daily Report
Adobe product manager fingers Apple for death of Flash Player for mobile -- Engadget
LukeW | The Web OS is Already Hereā¦
