background preloader

Mozilla Developers

Facebook Twitter

Firefox OS Help. Firefox for Android Help. Using files from web applications. Using the File API, which was added to the DOM in HTML5, it's now possible for web content to ask the user to select local files and then read the contents of those files.

Using files from web applications

This selection can be done by either using an HTML <input> element or by drag and drop. Using web workers - MDN Docs. Dedicated Web Workers provide a simple means for web content to run scripts in background threads.

Using web workers - MDN Docs

Drag and drop. Firefox and other Mozilla applications support a number of features for handling drag and drop.

Drag and drop

This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there. A translucent representation of what is being dragged will follow the mouse pointer during the drag operation. The drop location may be a different application. Web sites, extensions, and XUL applications may make use of this functionality to customize what elements may be dragged, the drag feedback, as well as specify where elements may be dropped.

This section covers drag and drop in Firefox 3.5 (Gecko 1.9.1) and later. Drag and drop basics. DOM Storage. Summary.

DOM Storage

IndexedDB. IndexedDB is an API for client-side storage of significant amounts of structured data, which also enables high performance searches of this data using indexes.

IndexedDB

CSS media queries. AJAX. Asynchronous JavaScript + XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and most importantly the XMLHttpRequest object.

AJAX

When these technologies are combined in the Ajax model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions. Although X in Ajax stands for XML, JSON is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript.

Using CSS transforms. By modifying the coordinate space, CSS transforms change the position and shape of the affected content without disrupting the normal document flow.

Using CSS transforms

This guide provides an introduction to using transforms. CSS transforms are implemented using a set of CSS properties that let you apply affine linear transformations to HTML elements. CSS animations. CSS animations make it possible to animate transitions from one CSS style configuration to another.

CSS animations

Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints along the way. There are three key advantages to CSS animations over traditional script-driven animation techniques: They're easy to use for simple animations; you can create them without even having to know JavaScript. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they're well made). Configuring the animation. Using HTML5 audio and video. HTML5 introduces built-in media support via the <audio> and <video> elements, offering the ability to easily embed media into HTML documents.

Using HTML5 audio and video

Using CSS gradients. CSS gradients are new types of <image> added in the CSS3 Image Module.

Using CSS gradients

Using CSS gradients lets you display smooth transitions between two or more specified colors. This lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly. Browsers support two types of gradients: linear, defined with the linear-gradient() function, and radial, defined with radial-gradient(). Using Application Cache - MDN Docs. Introduction HTML5 provides an application caching mechanism that lets web-based applications run offline. Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users.

Applications that are cached load and work correctly even if users click the refresh button when they are offline. Using an application cache gives an application the following benefits: Canvas. SVG. JavaScript. JavaScript (JS) is a lightweight, interpreted, programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as node.js and Apache CouchDB. JS is a prototype-based, multi-paradigm, dynamic scripting language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. Read more about JavaScript. Document Object Model (DOM) The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents.

HTML5. HTML5 is the latest evolution of the standard that defines HTML. CSS. Cascading Style Sheets (CSS) are a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects like SVG or XHTML). HTML. HTML (HyperText Markup Language) is the most basic building block of the Web. It describes and defines the content of a webpage. Other technologies besides HTML are generally used to describe a webpage's appearance/presentation (CSS) or functionality (JavaScript). Developer Network. WebSockets.