frontend.html5.md

Front-End

• HTML5
  • Aprendizado
  • Compatibilidade
  • Ferramentas
  • Caso de Uso
  • Dicas
    • dicas: WebRTC
    • dicas: WebGL
    • dicas: Game
    • dicas: Desenvolvimento de Jogos
    • dicas: Armazenamento
    • dicas: Performance
    • dicas: Server Sent Events
    • dicas: Full Screen API
    • dicas: File System/API
    • dicas: Clipboard API
  • Bibliotecas
    • Presentation System
    • WebRTC
    • Text Search
    • Gesture
    • Storage
    • Animations
    • Physics
    • WebGL
    • Games
      • Game Engine
  • Desenvolvimento de Aplicações
    • Offline
      • Christophe Coenraets
      • FT Labs
      • Icenium
    • Mobile
      • Firefox OS
      • Apache Cordova & PhoneGap
        • PhoneGap
        • BlackBerry
    • Desktop
    • Desktop and Mobile

HTML5

Refere-se a nova sintaxe do HTML, além de novos recursos para serem utilizados diretamento pelo web browser, conforme apresentados: Slides | HTML5 Rocks e Entendendo quais APIs (realmente) fazem parte do HTML5 | Tableless

Aprendizado

• WebPlatform.org — Your Web, documented

• html5.org

• Dive Into HTML5 - livro online sobre HTML5, este link da versão em português

• HTML5 Rocks

• HTML5 Doctor

• HTML5 MDN - Mozilla Developer Network | demos

• HTML5 Guia de Referência - Tabless

• HTML5 Demos and Examples

• HTML5 Bookmarks - daily news articles and bookmarks

• HTML5 - 20 Things I Learned About Browsers and the Web

• Introducing HTML5: Bruce Lawson and Remy Sharp

• HTML5 Canvas Tutorials

• Canvas Tutorial

• Learn HTML5, CSS3, Javascript and more

• Adobe & HTML

• Adobe DevNet - HTML5, CSS3, and JavaScript

• MSDN - HTML 5, CSS3 e JavaScript

• Central HTML5 da SourceForge e Microsoft

• Facebook HTML5 Resource Center - Facebook Developers

• HTML5 Myth Busting

• HTML5Labs | Microsoft

--

• Accessibility Features of HTML5 - With Mark Sadecki, W3C / Web Accessibility Initiative

--

• The HTML 5 JavaScript API Index

• Ultimate HTML5 Cheatsheat [Infographic] | Tech King

• HTML5 Security Cheatsheet

Compatibilidade

• When JavaScript Feature Detection Fails | SitePoint

--

• Mobile HTML5 - compatibility

• [Slides] The Android Browser

--

• Can I use...? - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

• HTML5 Please - Use the new and shiny responsibly

• The HTML5 Test - verifica o quando o web browser suporta os recursos do HTML5

• haz.io › HTML5 & CSS3 Browser Capabilities

• HTML5 Readiness

• HTML5 Features - Storage

• The CSS3 Test

• Is WebRTC ready yet? - Browser support scorecard

• The Developer's Guide To Writing Cross-Browser JavaScript Polyfills | Addy Osmani

• Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser | HTML5 Cross Browser Polyfills

  • Modernizr - documentação em português

  • Up and Running with Modernizr | Adobe Developer Connection

• Internet Explorer Web Platform Status and Roadmap | status.modern.IE

Ferramentas

• Initializr - Start your HTML5 project in 15 seconds!

• Tools to Package Your HTML5 App for Mobile Devices

• FireShell - fiercely quick front-end boilerplate and workflows

• Google Web Designer - Create engaging, interactive HTML5-based designs and motion graphics that can run on any device.

• Canva - gives you everything you need to design blog graphics, presentations, Facebook covers, flyers, posters, invitations and so much more.

Caso de Uso

• Next Generation Web Layout: National Geographic Forest Giant | HTML5 Rocks

• Chrome Music Lab

Dicas

• HTML5 Boilerplate

• HTML5 Up! - Responsive HTML5 and CSS3 Site Templates

• HTML5 - Async Scripts | Zeno Rocha

• The progress element | HTML5 Doctor

• New HTML5 Form Input Types

• HTML5 Input Types Alternative | David Walsh Blog

• What you need to know about HTML5 forms | TechRepublic

• 5 HTML5 Javascript APIs to keep an eye on

• Baterry API | Loop Infinito

• Using Device Orientation in HTML5 | Site Point

--

• [GitHub] raphamorim / awesome-canvas - A curated list of awesome HTML5 Canvas with examples, related articles and posts.

• All About HTML5 tag canvas | SmartBear

• [Speaker Deck] Playground with canvas - Raphael Amorim - Canvas é uma tela de bitmap que pode ser usada para a renderização de elementos gráficos ou outras imagens visuais rapidamente. No HTML5 ele permite que se desenhem elementos gráficos usando JavaScript. Vamos abordar funcionalidades e recursos e porque você deveria estar pensando em utilizar o canvas no seu próximo projeto.

• Canvas Inspection using Chrome DevTools - HTML5 Rocks

• Exploring canvas drawing techniques | Perfection kills

• HTML5 Canvas Save Drawing as an Image | HTML5 Canvas Tutorials

• Saving Canvas Data as an Image | Tech.pro

• Quick one: using download attribute on links to save Canvas as PNG | Christian Heilmann

• [GitHub] hongru / canvas2image - a tool for saving or converting canvas as img

• [GitHub] niklasvh / html2canvas - Screenshots with JavaScript

• [GitHub] viliusle / Hermite-resize - Image resize/resample using Hermite filter with JavaScript.

• Resizing an image in an HTML5 canvas | StackOverflow

• HTML5 image upload, resize and crop | CodeForest

• Resizing and Cropping Images with Canvas | Codrops

• [GitHub] fengyuanchen / cropperjs - JavaScript image cropper

• [GitHub] viliusle / miniPaint - online image editor

• Build a JavaScript Particle System in 200 Lines | HTML5 Hub

• N-body planar choreographies: illustrating mathematics in HTML5 canvas | Rectangle World - HTML5 Canvas and JavaScript: Tutorials and Experiments

• Using blend modes in HTML Canvas | Web Platform Team Blog

• Tiny Raytracer | Gabriel Gambetta

• Realistic terrain in 130 lines | PlayfulJS

• [GitHub] felipenmoura / js-chroma-key - A chroma key effect made in JavaScript, HTML5 and CSS3 in 100 lines of js

  • O poder do canvas em 100 linhas de JS | InfoQ Br

• Building an HTML5 green screen (Chroma key) dynamic video player | Mark Mower - Digital Marketing Agency

  • HTML 5 Real time video chroma key (green screen)

--

• MicIO – HTML5 to MicroController Communication through a headphone jack

  • [GitHub] cobookman / HTML5.MicIO

--

• How to prefetch video/audio files for uninterrupted playback in HTML5 video/audio | Thundering Herd

• Capturing Audio & Video in HTML5 - HTML5 Rocks

• Making HTML5 audio actually work on mobile

• Introduction to Web Audio API | CSS-Tricks - 2017/03/06

• How to Generate Noise with the Web Audio API | Noisehack

• Custom Audio Effects in JavaScript with the Web Audio API | Noisehack

• How to Build a Supersaw Synthesizer with the Web Audio API | Noisehack

• Dynamic Audio Generation In the Browser : a JavaScript Synthesizer

• Writing Web Audio API code that works in every browser | Mozilla Hacks

• Frequency Modulation (FM) with Web Audio API | @GreWeb | jsfiddle

• Creating Sound with the Web Audio API and Oscillators | Flippin' Awesome

--

• JavaScript Dubstep Generator - Uma lib que gera efeitos no canvas com ondas sonoras de uma música

--

• HTML5 Video and Background Images

• html5 video streaming from google drive

• Adding captions and subtitles to HTML5 video | MDN

• [GitHub] sampotts / plyr - A simple HTML5, YouTube and Vimeo player

--

• [Speaker Deck] Augmented Reality in JavaScript - by Zeno Rocha

  • Realidade Aumentada com HTML5 | InfoQ BR

• [codepen.io] Spirograph in HTML 5

--

• Using Web Workers - Web APIs | MDN

• [GitHub] developit / stockroom - Offload your store management to a worker

--

• Service Workers

  • [GitHub] delapuente / service-workers-101 - An infographic to summarize the most important parts of the Service Workers' API

  • A beginner’s guide to Service Workers | Samsung Internet Developers – Medium - 2017/07/25

  • ServiceWorker: A revolução da plataforma Web | BrasilJS - 2016/04/04

  • Making a Simple Site Work Offline with ServiceWorker | ponyfoo

  • Asset caching with service worker | Medium by @philipp.schaechtele

  • Service Workers replacing AppCache: a sledgehammer to crack a nut | Medium by @firt

• Web Workers

  • Mais Válvulas para seu Javascript | Tableless - 2015/10/15

    • [GitHub] ganexasi / webworker

  • Parallel Processing in JS | Advanced Web Machinery - 2016/08/09

  • [GitHub] mchaov / WebWorkers - Demos with and without web workers

--

• Introduction to WebSockets | Tech.Pro

• Configuring & Optimizing WebSocket Compression | igvita.com

• Simple WebSockets example to stream real-time events | Kim Rudolph

• Tutorial: Pushing browser updates using WebSockets in Glassfish | jaxenter.com

• Socket.io

  • Introducing Socket.IO 1.0 | Socket.io

  • Building a Real-time SMS Voting App with Socket.io and Highcharts.js | Twilio

  • Writing an AngularJS App with Socket.IO | HTML5 Rocks

  • Real Time Web Analytics with Node.js and Socket.IO | Christophe Coenraets

  • Real-Time Chat With Node.js' Readline & Socket.io - Tuts+ Code Tutorial

• Near-Realtime Analytics with MongoDB, Node.js & SmoothieCharts | codecentric

• WebLogic

  • REST, SSE or WebSockets on WebLogic 10.3.6 | Java / Oracle SOA blog

  • [SlideShare] Oracle Coherence & WebLogic 12c Web Sockets: Delivering Real Time Push at Scale

--

• HTML5 Geolocation API - Specification and Usages | ST Solutions

• Está perdido? Geolocalização! | Tableless - Entendendo como utilizar a API de Geolocalização (geolocation) do HTML5 com Javascript.

--

• HTML5 Web Notification

• Criando notificações desktop com HTML5 | Andre Loureiro

• An Introduction to the Web Notifications API | Site Point

• [GitHub] Nickersoft / push.js - A compact, cross-browser solution for using the JavaScript Notifications API

--

• 12 Awesome CSS3 Features That You Can Finally Start Using | Tutorialzine

• [GitHub] pmneila / jsexp - Some simulation experiments in JavaScript

dicas: WebRTC

• WebRTC.org

• WebRTC: Update and Workarounds | Mozilla Hacks

• [Speaker Deck] WebRTC Data Black Magic

• [YouTube] Real-time communication with WebRTC: Google I/O 2013

• WebRTC data channels: WebRTC data channels for high performance data exchange | HTML5 Rocks

• WebRTC: Not Quite Magic | Alex Freska

--

• WebRTC Experiments & Demos

  • [GitHub] muaz-khan / WebRTC-Experiment

  • RecordRTC: WebRTC audio/video recording

--

• Licode - Open Source Communication Provider

• Talky - Group video chat and screen sharing

dicas: WebGL

• WebGL Fundamentals | HTML5 ROCKS

• This is a list of all the WebGL related activities happening on the web

--

• How to write portable WebGL | CodeFlow

• WebGL Debugging and Profiling Tools | Real-Time Rendering

• 9 WebGL Demo Examples Experiments | CSS Matter

• Fusing WebGL, CSS 3D and HTML - Zero to Sixty in One Second | Acko.net

• Using WebGL to Add 3D Effects to Your Website | HTML5 Hub

• Barry Martin's Hopalong Orbits Visualizer - WebGL Experiment - An interactive flight through attractor orbits generated using Barry Martin's Hopalong formula.

• Three.js and Babylon.js: a Comparison of WebGL Frameworks | SitePoint

• WebGL With Three.js: Basics | Nettuts+

• Live editing WebGL shaders with Firefox Developer Tools | Mozilla Hacks

• WebGL – working with GLSL source files | pheelicks.com

--

• The Era of WebGL | Medium

• Non-Intrusive WebGL | Medium

dicas: Game

• HTML5 Gamepad Tester

--

• Largest Directory of HTML5 Games

• FightCode - Killing Robots for Fun

• Code Combat - Learn to Code JavaScript by Playing a Game

• Full Screen Mario : a purely HTML5 remake of the original Super Mario Bros game

  • [GitHub] Diogenesthecynic / FullScreenMario - An HTML5 remake of the original Super Mario Brothers - expanded for wide screens.

• [GitHub] infusion / HTML5-Tetris - A HTML5 Tetris Implementation

• [GitHub] ellisonleao / clumsy-bird - A MelonJS port of the famous Flappy Bird Game

• [GitHub] gloomyson / StarCraft - HTML5 version for StarCraft game

• The JavaScript Warrior - Welcome to the JSWarrior Game. Unlike traditional games, you can't control your character through a keyboard or joystick. The only way you can control your character is through JavaScript.

dicas: Desenvolvimento de Jogos

• Screen size management in mobile HTML5 games | HTML5 Hub

--

• Announcing Artillery's Project Atlas, a Hardcore RTS for the Browser | The Artillery Blog - HTML5 Game Development and Engineering. 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.

--

• Criando um Game Loop em HTML5 | iMasters

--

• HTML5 Game Development | Eric Terpstra - A presentation on getting started creating games on the web.

• Getting Started With HTML5 Game Development | Mozilla Hacks

• Using the Web Speech API to Create Voice Driven HTML5 Games | HTML5 Hub

• [GitHub] idflood / ThreeNodes.js - This is an attempt to make something like "vvvv" in javascript, html and webgl.

• VVVV.js - the visual programming language VVVV brought to your web browser

• How to Learn Three.js for Game Development | Gamedevtuts+

• Building a 3D MMO Using WebSocket | David Walsh Blog

• Criando um MMO 3D utilizando WebSockets | iMasters

• Building Multiplayer HTML5 Games with Cloak | Bocoup

• The Pond – building a multi-platform HTML5 game | Mozilla Hacks

dicas: Armazenamento

• HTML5 Browser Storage: the Past, Present and Future | SitePoint

• A Quick Guide to Web Storage | Tutorialzine

• Web SQL DB vs. IndexedDB | JavassCrypt

--

• IndexedDB Basic concepts - Web API Interfaces | MDN

• An Introduction to IndexedDB | Dev.Opera

• Breaking the Borders of IndexedDB | Mozilla Hacks

• IndexedDB and Date Example

• Working With IndexedDB | Tuts+ Code Tutorial

• Working With IndexedDB - Part 2 | Tuts+ Code Tutorial

• Using IndexedDB to Manage 3D WebGL Assets | SitePoint

• indexeddb file system | mode·switch

• Indexed: Query IndexedDB Like Mongo | fluidbyte

• [GitHub] erikolson186 / zangodb - MongoDB-like interface for HTML5 IndexedDB

--

• Client-Side Storage Options | Tech Pro

• Storing Javascript objects in LocalStorage | DroidIT Blog

• localForage: Offline Storage, Improved | Mozilla Hacks

• HTML5 Web Storage - Teddy Garland | Coder Wall

• Dropbox Datastores and Drop-Ins | Nettuts+

• [YoutTube] Google Cloud Storage - Getting started with the JavaScript Sample Application - This demonstration covers getting started with Google Cloud Storage using JavaScript

  • [GitHub] GoogleCloudPlatform / storage-getting-started-javascript - This is a simple web-based example of calling the Google Cloud Storage API in JavaScript

• Using Local Storage as a communication channel | Tech.pro

• Please Stop Using Local Storage | The Practical Dev - 2018/01/30

--

• [Gist] leudanielm / GlobalEvents.js - Fire events between different browser windows using localStorage

dicas: Performance

• What makes WebAssembly fast? | Mozilla Hacks - 2017/02/28

• Why WebAssembly is Faster Than asm.js | Mozilla Hacks - 2017/03/15

• WebAssembly 101: a developer's first steps | Openbloc - 2017/06/04

• Five things you can do to make HTML5 perform better

• Native Speed on the Web: JavaScript and asm.js | Alon Zakai

dicas: Server Sent Events

• HTML5 e SSE (Server Sent Events) - Igor Costa

• Push Notifications to the Browser With Server Sent Events

dicas: Full Screen API

• Fullscreen API Specification

• Using fullscreen mode | MDN

dicas: File System/API

• Exploring the FileSystem APIs | HTML5 Rocks / Ler arquivos em JavaScript usando as APIs do arquivo | HTML5 Rocks

• File Reader | Mozilla Developer Network

• Ler arquivos locais em JavaScript | HTML5 Rocks

• File System and JavaScript. Processing Files in Browser | XB Software

• Use the HTML5 File API to Work with Files Locally in the Browser | Scotch

--

• Resize an Image Using Canvas, Drag and Drop and the File API | David Walsh Blog

• Creating a File Encryption App with JavaScript | Tutorialzine

dicas: Clipboard API

• Clipboard API and events | W3C

• Unblocking Clipboard Access | Web | Google Developers

• The Clipboard API crashcourse | Frontend News #2 - 2018/08/01

Bibliotecas

• RgbQuant.js - an image quantization library

• CamanJS - JavaScript Image Manipulation

• [GitHug] raphamorim / origami.js - HTML5 Canvas for Humans

--

• Drawingboard.js - a simple canvas based drawing app that you can integrate easily on your website.

--

• Snap.svg - is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more.

--

• [GitHub] mark-rolich / RulersGuides.js - Creates Photoshop-like guides and rulers interface on a web page | Demo

--

• [GitHub] openseadragon / openseadragon - An open-source, web-based viewer for zoomable images, implemented in pure JavaScript

--

• [GitHub] maroslaw / rainyday.js - Simulating raindrops falling on a window (use canvas)

  • Creating a Realistic Rain Effect with Canvas and JavaScript | Flippin' Awesome

  • rainyday.js | CreativeJS

--

• [GitHub] kovacsv / JSModeler - A JavaScript framework to create and visualize 3D models.

--

• [GitHub] vagnervjs / frame-player - A video player without video files, just JSON. Based on 'images frames' thought to mobile devices!

--

• [GitHub] auduno / clmtrackr - Javascript library for precise tracking of facial features via Constrained Local Models

• [GitHub] eduardolundgren / tracking.js - A modern approach for Computer Vision on the web

--

• [GitHub] TalAter / annyang - A javascript library for adding voice commands to your site, using speech recognition

• [GitHub] Selz / plyr - A simple HTML5 media player

• Popcorn.js - The HTML5 Media Framework

• Audio5js - The HTML Audio Compatibility Layer

• [GitHub] EvandroLG / audioJS - AudioJS is a agnostic lib cross-browser to work easily with the AudioContext API of HTML5.

• [GitHub] egonelbre / jsfx - Javascript Sound Effect Generator

• [GitHub] meenie / 8bit.js - 8Bit.js Audio Library - Write music using 8bit oscillation sounds

• [GitHub] watilde / beeplay - Write A Song In JavaScript

• [GitHub] meenie / band.js - Music composer interface for the Web Audio API.

  • Retro Game Music using Web Audio and Band.js | Flippin' Awesome

• Ion.Sound - jQuery-plugin for playing sounds on events

• [GitHub] eshiota / retro-audio-js - Web Audio API based retro player that give us that nostalgic feelings

  • Retro.js Demo - Uma lib que usa a Web Audio API para tocar teclado usando uma representação em JSON de partituras de teclado, no site tem exemplo de 3 músicas

• Pedalboard.js - Open-source JavaScript framework for developing audio effects with Web Audio API

• [GitHub] kylestetz / lissajous - A tool for programmatic audio performance in the browser using Javascript

--

• [GitHub] openfin / fin-hypergrid - a polymer based super high performant grid control

--

• seen.js - Render 3D scenes into SVG or HTML5 Canvas

• heatmap.js | Create HTML5 Heatmaps with Canvas and JavaScript | Sample

  • High Performance JS heatmaps | Codeflow

• Chart.js - Simple HTML5 Charts using the canvas tag

• Aristochart - Customizável e flexível biblioteca de gráficos em Canvas

• HumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5.

• CreateJS Studio - A suite of Javascript libraries & tools for building rich, interactive experiences with HTML5.

• Fabric.js is a powerful and simple Javascript canvas library. Fabric provides interactive object model on top of canvas element Fabric also has SVG-to-canvas (and canvas-to-SVG) parser.

• 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.

• Nanoko - is a JavaScript modular framework enabling flexible and sustainable HTML5 applications development and their deployment on both mobile and desktop applications. Getting Started | utiliza o maven como base para o projeto |

• Resumable.js - A JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API

• [GitHub] mailru / FileAPI - a set of javascript tools for working with files. Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation

• [GitHub] chrisben / imgcache.js - JS library based on the File API to cache images for offline recovery (target: cordova/phonegap & chrome)

--

• [GitHub] RelaxedJS / ReLaXed - Create PDF documents using web technologies

• jsPDF - A HTML5 client-side solution for generating PDFs.

  • [GitHub] MrRio / jsPDF - Generate PDF files in JavaScript. HTML5 FTW : gh-page

  • Generating PDFs from Web Pages on the Fly with jsPDF | SitePoint - 2016/02/16

• PDF.js - A general-purpose, web standards-based platform for parsing and rendering PDFs.

  • How fast is PDF.js? | Mozilla Hacks

  • Custom PDF Rendering in JavaScript with Mozilla’s PDF.Js | SitePoint - 2016/05/16

• [GitHub] bpampuch / pdfmake - Client/server side PDF printing in pure JavaScript

--

• [GitHub] FileReader.js - Read Files with JavaScript!

• [GitHub] OptimalBits / fs.js - This module provides a wrapper for the HTML5 File System API inspired in nodejs fs module

• [GitHub] sindresorhus / screenfull.js - Simple wrapper for cross-browser usage of the JavaScript Fullscreen API

• [GitHub] maxogden / psd.js - PSD Parser in JavaScript | site

--

• [GitHub] lukasoppermann / html5sortable - VanillaJS sortable lists and grids using native HTML5 drag and drop API.

• [GitHub] willianjusten / screamer-js - is a Vanilla Javascript plugin to provide simple yet fully customisable web notifications using Web Notifications API.

Presentation System

• 5 of the Best Free HTML5 Presentation Systems

• SlideCaptain - Modern online presentation tool - Made with JavaScript, HTML5, CSS3, Bootstrap, MongoDB, Node.js and AngularJS.

--

• [GitHub] pete-otaqui / deckard - A Web Animations API driven slide deck library

--

• [GitHub] hakimel / reveal.js - The HTML Presentation Framework

  • Example Presentations | reveal.js github wiki

  • reveal.js is available on npm

  • Reveal.js: criando apresentações no navegador | Tableless

  • slid.es - The easiest way to create and share beautiful presentations. Online presentation tool based on reveal.js

  • [GitHub] piatra / kreator.js - slide tool interface for reveal.js

    • kreator

    • javascript nodejs kreator reveal.js | ROSEdu Summer of Code Blog

--

• deck.js - presentation engine

  • [GitHub] imakewebthings / deck.js

  • [GitHub] thiagofelix / hackynote - A presentation editor and preview based on markdown. Made for hackers

  • [GitHub] jtrussell / bedecked - Turn markdown files into html presentations you can share with dropbox (or S3, or...)

--

• bespoke.js - DYI presentation micro-framework

  • Bespoke.js: The Road to 1KB (Slides)

--

• [GitHub] viniciusalmeida / ninja-presentation - Do not be fooled. You do not have to be a ninja to use this toolkit for slides presentation!

--

• WebSlides

  • [[GitHub] jlantunez / webslides] - Making HTML presentations easy

WebRTC

• sipML5 - The world's first open source HTML5 SIP client

• [GitHub] erbbysam / webRTCCopy - A simple file sharing application using webRTC-data.io

• [GitHub] cowbell / sharedrop - HTML5 clone of Apple's AirDrop - easy P2P file transfer powered by WebRTC

Text Search

• lunr.js - A bit like Solr, but much smaller and not as bright - Simple full-text search in your browser

  • Building a Full-Text Index in Javascript | Gary Sieling

• [GitHub] brianreavis / sifter.js - A library for textually searching arrays and hashes of objects by property (or multiple properties). Designed specifically for autocomplete.

Gesture

• [GitHub] roboleary / LeapTrainer.js - A gesture learning and recognition framework for the Leap Motion

• [GitHub] EightMedia / hammer.js - A javascript library for multi-touch gestures

• [GitHub] soyjavi / QuoJS - Micro JavaScript Library for Mobile Devices

• [GitHub] roboleary / LeapCursor.js - Effortless Leap Motion support for websites

• Kiwi.js

  • [GitHub] gamelab - Kiwi.JS is a fun and friendly HTML5 game engine with a focus on WebGL and Mobile rendering

  • Add Motion Control to a Kiwi.js Game With the Leap Motion Controller | Tuts+ Game Development Tutorial

Storage

• FireBase - a powerful API to store and sync data in realtime

  • [GitHub] firebase / geofire - Realtime location queries with Firebase

  • GeoFire 2.0 - is an open-source JavaScript library that allows you to store and query a set of items based on their geographic location

  • Firebase Database não é bagunça! - BrazilJS - 2017/10/03

--

• PouchDB - The Database that Syncs! PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

  • [GitHub] pouchdb / pouchdb - PouchDB is a pocket-sized database

  • 10 things I learned from reading (and writing) the PouchDB source | PouchDB

--

• TaffyDB - The JavaScript Database

• SpahQL - Query, manipulate and manage JSON data effortlessly.

• [GitHub] TremayneChrist / Based - Client-side JavaScript database

• [GitHub] chambs / minidb - a simple wraper for local/session storage DOM API management

• [GitHub] tuxracer / simple-storage - Simple localStorage / sessionStorage supporting objects and arrays

• [GitHub] arokor / barn - Fast, atomic persistent storage layer on top of localstorage

• [GitHub] tantaman / LargeLocalStorage - Problem: You need to store a large amount of key-value based data in IE, Chrome, Safari, AND Firefox

• [GitHub] DVLP / localStorageDB - Increase localStorage size 10 times or more! Very easy to use and potentially much faster than native localStorage!

• JayData - The cross-platform HTML5 data-management library for JavaScript

  • GitHub / JayData

  • Codeplex / JayData

• [GitHub] lcavadas / Storage.js - Javascript library that wraps storage logic ( localStorage, WebSQL, IndexedDB) for all browsers

• lawnchair - simple json storage

• [GitHub] zefhemel / persistencejs - is an asynchronous Javascript database mapper library. You can use it in the browser, as well on the server (and you can share data models between them).

• LocalStorage with Amplify.js | TysonJS

• [GitHub] justindeguzman / locstor - JavaScript helper library for HTML5 localStorage

• [GitHub] tsironis / lockr - A minimal API wrapper for localStorage

• [GitHub] mozilla / localForage - Offline storage, improved.

  • localForage: Offline Storage, Improved | Mozilla Hacks

  • Armazenamento Offline com o LocalForage | iMasters

  • [GitHub] ask11 / storage - Storage is a functional wrapper around localForage. That means it's an asynchronous browser storage with multiple back-ends (IndexedDB, WebSQL, localStorage), which is built for a better offline experience.

• [GitHub] techfort / LokiJS - javascript embedded / in-memory database

  • LokiJS - A lightweight javascript document oriented database

  • An introduction to LokiJS: the idiomatic way | Joe Minichino - Medium

• [GitHub] jensarps / IDBWrapper - A cross-browser wrapper for IndexedDB

• [GitHub] aaronpowell / db.js - is a wrapper for IndexedDB to make it easier to work against

• [GitHub] paldepind / synceddb - Makes it easy to write offline-first applications with realtime syncing and server side persistence

• [GitHub] js-data / js-data - Robust framework-agnostic in-memory data store

--

• ForerunnerDB - High Performance Web Database - is the only JavaScript database with a simple, rich JSON-based query language. Based on MongoDB's query language and built with web applications in mind, ForerunnerDB will have you up and running in minutes.

  • [GitHub] Irrelon / ForerunnerDB - A JavaScript database with mongo-like query language, data-binding support, runs in the browser as a client-side DB or on the server via Node.js!

--

• [GitHub] addyosmani / basket.js - A script and resource loader for caching & loading scripts with localStorage

• [GitHub] keithwhor / FSO.js - JavaScript FileSystemObject library for temporary and permanent client-side file storage

Animations

• [GitHub] sole / tween.js - Javascript tweening engine

• Turn.js - The page flip effect in HTML5

• [GitHub] thednp / kute.js - is a native Javascript animation engine featuring great code quality, badass performance, morphSVG, drawSVG, 2D and 3D transforms, SVG transforms, colors, as well as other CSS3 properties or presentation attributes.

Physics

• PhysicsJS - A modular, extendable, and easy-to-use physics engine for javascript

  • Building a 2D Browser Game with PhysicsJS | Flippin' Awesome

• Matter.js - is 2D physics engine for the web

• Physics Sandbox - Fun Physics Projects

  • [GitHub] micaeloliveira / physics-sandbox - This repo contains simple physics simulations

WebGL

• The Book of Shaders - This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.

--

• three.js - JavaScript 3D library

  • The Beginner's Guide to three.js | Treehouse Blog

  • How to build a game with Three.js | Creative Bloq

  • 20 Impressive Examples for Learning WebGL with Three.js | Tutorialzine

  • Shader Particle Engine - A GLSL-heavy particle engine for THREE.js. Based on Stemkoski's great particle engine

  • Building 3D in the browser with Three.js | Webdesigner Depot

  • [GitHub] nxxcxx / Neural-Network - Abstract visualization of biological neural network

• Babylon Engine for HTML5 - Babylon.js is a webgl / javascript 3D engine.

• Voodoo - is a new Javascript framework that lets you easily mix 2D and 3D content together on the same page.

• [GitHub] PixelsCommander / HTML-GL - Get as many FPS as you need and amazing effects by rendering HTML/CSS in WebGL

• [GitHub] turbo / js - perform massive parallel computations in your browser with GPGPU

• [GitHub] patriciogonzalezvivo / glslEditor - Simple WebGL Fragment Shader Editor

Games

• [GitHub] FuzzYspo0N / realtime-multiplayer-in-html5 - an example using node.js, socket.io and HTML5 Canvas to explain and demonstrate realtime multiplayer games in the browser.

• Unreal Engine in the browser

• EndGate - a game framework to build powerful HTML5 games

• Senshi | Zolmeister - an open source MMO Battle-Royale inspired HTML5 game

• Goo

  • [Vimeo] Creating a Goon in Goo Create

  • Goo Engine

  • Goo Create

Game Engine

• [GitHub] sourceful / game-engines - HTML5 Game Engines list

--

• JSNES - A JavaScript NES emulator

• Game Closure - The Game Closure DevKit. 100% JavaScript. Build your games faster than ever before! Native speed. Write HTML5 games that outperform the competition.

• voxel.js * blocks in yo browser

• Joy.JS - A Joyful HTML5 2D Game Engine

• Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5.

• Construct 2 - The Free HTML5 Game Engine

• enchant.js - A simple JavaScript framework for creating games and apps

• IIOEngine - An interactive app framework for HTML5 built with canvas and javascript

• Phaser 1.0 - Desktop and Mobile HTML5 Game Framework is released

• [GitHub] beakable / isometric - HTML5 Canvas Isometric Engine

• [GitHub] suffick / Clarity - A simple, customisable and scriptable platform game engine. Demo

• [GitHub] melonjs / melonJS - a fresh & lightweight javascript game engine

• PlayCanvas Engine - is the world’s easiest to use WebGL Game Engine

  • PlayCanvas Goes Open Source | Mozilla Hacks

Desenvolvimento de Aplicações

• Developing Cross-Browser Extensions | Frontend Babel

• Installing web apps natively | 2ality

--

• Web Fundamentals | Google Developers - Best practices for modern web development

• [GitHub] google / web-starter-kit

  • Web Starter Kit | Google Developer - Boilerplate & Tooling for Multi-Device Development

Offline

• Can I use offline web applications? - Compatibility table for support of offline web applications in desktop and mobile browsers.

• [GitHub] pazguille / offline-first - Everything you need to know to create offline-first web apps

• [GitHub] offlinefirst / research - Links, feedback, comments, resources, anything pertaining to offline first research.

--

• Offline | Dive into HTML5

• MDN - Application Cache API

• [SlideShare] HTML5 Offline & Storage

• offline and storage - tutorials | WebPlatform.org

• Apostilas da Caelum offline com Application Cache do HTML 5

• Palestra : HTML5 offline e Application Cache | Sérgio Lopes

• AppCache, manifest, mundo offline e ServiceWorker | Eduardo Matos

• Building Offline Experiences with HTML5 AppCache and IndexedDB | IEBlog

• Criação de experiências offline com AppCache e IndexedDB | MSDN Br

• Managing HTML5 Offline Storage | Google Developers

• Load Your Game Faster with AppCache | Learning Three.js

• [YouTube] O elo perdido: sincronizando webapps html5 com o servidor (node.js) - Slides

• A Comprehensive Guide to Taking your HTML5 Game Offline | HTML5 Gamer

Christophe Coenraets

• Simple Offline Data Synchronization for Mobile Web and PhoneGap Applications

• Building Mobile Apps with HTML and a Local Database

• Top 10 Performance Techniques for PhoneGap and Hybrid Apps - Slides Available

FT Labs

• Tutorial 4: History API in an offline HTML5 web app

Icenium

• Is This Thing On? (Part 1) - Detect and manage online/offline connectivity in Web/mobile applications

Mobile

• [SlideShare] How Can HTML Compete with Native?

• 60fps on the mobile web | Flipboard Engineering

--

• [GitHub] appium / appium - Automation tests for iOS and Android Apps

--

• Screensiz.es is a nifty little database of screen specifications for the most popular devices on the market.

• List of displays by pixel density | Wikipedia

--

• Create high-performance mobile UIs with Famo.us | IBM developerWorks

--

• Tools to Package Your HTML5 App for Mobile Devices

• Response JS: mobile-first responsive design in HTML5

• Default system fonts - Android / iOS6 / WP7 - 8

• Touch Gesture Reference Guide | LukeW

• It’s not a web app. It’s an app you install from the web | Forecast Blog

• Aplicativos Híbridos, Android e o poder da WebView

• Uma tonelada de truques de Web mobile | DevCast

• 20 Excellent Wireframing Tools for Mobile | Mashable

• Fries: Prototype Android apps using HTML, CSS and JavaScript

• Nativo ou Web? Técnicas e Dicas em JavaScript móvel | InfoQ Br

--

• [GitHub] paulirish / iOS-WebView-App - Simple iOS app that loads a web page created to ease debugging a uiWebView

--

• Ionic - The Most Advanced HTML5 Mobile App Framework. Ionic utilizes AngularJS in order to create a framework most suited to develop rich and robust applications.

  • Mastering the Ionic Framework: Learn to Build & Deploy Native Speed HTML5 Based Apps | Thinkster

  • Pull to Refresh | Formulas | Learn Ionic

  • Sample Mobile Application with Ionic and AngularJS | Christophe Coenraets

  • Ionic – Mobile UI Framework for PhoneGap/Cordova Developers | Devgirl's Weblog

  • [GitHub] ccoenraets / ionic-slides - Slides for my Ionic talk at the Fluent Conference, April 21st 2015.

Firefox OS

• Localizing Firefox OS Apps | Mozilla Hacks

• Guia Rápido de Desenvolvimento para Firefox OS - Criando apps com HTML5 para o Firefox OS (eBook)

• [GitHub] buildingfirefoxos / bfxos-brackets - Building Firefox OS with Adobe Brackets extension

• [GitHub] tehsis / webinstaller - Helper for installing Mozilla webapps

• [GitHub] robnyman / Firefox-OS-Boilerplate-App - Creating Firefox OS apps

Apache Cordova & PhoneGap

• PhoneGap, Cordova, and what’s in a name? | PhoneGap

• Apache Cordova - is a platform for building native mobile applications using HTML, CSS and JavaScript.

• Cordova + Web Best Practices | Gaunt Face - Matthew Gaunt - Getting PhoneGap / Cordova up and running with Yeoman

• Apache Cordova, removendo os 300ms de delay entre o toque e o click | Igor Costa

• Building Robust Cordova Apps with AppBuilder and Grunt | Telerik Developer Network

PhoneGap

• PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.

• Adobe PhoneGap 3.0 Released

• Phonegap 3.0 mais rápido e muito mais adaptável | Igor Costa

• PhoneGap 3.0 - Stuff You Should Know | Devgirl's Weblog

• CPBR6 slides da palestra Phonegap | Igor Costa

• PhoneGap Build - Package mobile apps in the cloud. - Simply upload your HTML5, CSS, and JavaScript assets to the Adobe® PhoneGap™ Build cloud service and we do the work of compiling for you.

• [SlideShare] Write once, run "everywhere"

  • [GitHub] phonegap-showcase / phonegap-ngcordova

--

• Aula 01: Introdução ao Phonegap | Loiane Groner

--

• [SlideShare] Automating PhoneGap Build

• [YouTube] Mac Mini and Jenkins as a Phonegap Build Server

• [GitHub] Medic - Continuous integration setup for Apache Cordova

• Continuous Integration of iOS Projects using Jenkins, CocoaPods, and Kiwi

--

• Angular.js

  • PhoneGap and AngularJs, The Start | Tech Pro

  • PhoneGap and AngularJs, Notification Service | Tech Pro

  • PhoneGap and AngularJS: In App Browser | Tech Pro

  • Building PhoneGap Apps with AngularJS | Brian Ford

  • AppGyver Steroids - Build PhoneGap based apps with native performance. Rapidly.

  • [GitHub] calvinl / ng-phonegap - Grunt workflow for building AngularJS applications on PhoneGap

• Andrew Trice

  • Category : Phonegap / Apache Cordova

  • Performance & UX Considerations For Successful PhoneGap Apps

  • PhoneGap Legends – A Sample Game App

• Christophe Coenraets

  • Apache Cordova Tutorial - In this tutorial, you will learn strategies and best practices to build native-like mobile applications with HTML, JavaScript, and CSS. You will build an Apache Cordova (aka PhoneGap) Employee Directory application from scratch using the Single Page Architecture, HTML templates, touch events, and performance optimization techniques.

    • [GitHub] ccoenraets / cordova-tutorial

  • PhoneGap and PhoneGap Build in 5 Minutes

  • Cordova (aka PhoneGap) 3.x Tutorial

  • Architecting a PhoneGap Application: Video + Slides

  • Top 10 Performance Techniques for PhoneGap Applications

  • Hardware-Accelerated Page Transitions for Mobile Web Apps / PhoneGap Apps

  • [GitHub] ccoenraets / pull-to-refresh - Example of Using Pull-To-Refresh in PhoneGap / Cordova apps

  • How to upload pictures from a PhoneGap Application to Node.js (and other servers)

  • How to Upload Pictures from a PhoneGap App to Amazon S3

BlackBerry

• Criando seu primeiro App com BBUI.js e Webworks para BB10 | Igor Costa

Desktop

• [GitHub] coolaj86 / HelloNode - An installable example node app

• AppJS - for Linux, Windows and Mac using HTML, CSS and Javascript

• Chrome - Packaged Apps

• Desktop Apps with HTML5 and the Mozilla Web Runtime | Mozilla Apps

• TideSDK - Create multi-platform desktop apps with HTML5, CSS3 and JavaScript - TideSDK formerly known as Titanium Desktop is the best way to create beautiful, unique desktop apps using your web development skills.

• Create HTML5 Desktop Apps & Games - Developers | Pokki

• Introduction to HTML5 Desktop Apps With Node-Webkit | Nettuts+

Desktop and Mobile

• Appcelerator Titanium

  • Wunderlist 2 | Code - GitHub

    • [GitHub] Wunderlist

• @zaedysayao : Rio.js - [SlideShare] Construindo aplicações Desktop com HTML, CSS e JS - Rio.JS Conference 2013 | [Github] Fontes mostrados durante o primeiro RioJS Conference