Using the Web Animations API - Web APIs
nderland (see the full code on codepen): notice that the background moves, alice spins, and her color changes at an offset from her spinning. we’re going to focus on just alice for this tutorial. here’s the simplified css that controls alice’s animation: #alice { animation: alicetumbling infinite 3s linear; } @keyframes alicetumbling { 0% { color: #000; transform: rotate(0) translate3d(-50%, -50%, 0); } 30% { color: #431236; } 100% { color: #000; transform: rotate(360deg) translate3d(-50%, -50%, 0); } } this changes alice’s color and her transform’s rotation over 3 seconds at a constant (linear) rate and loops infinitely. in the @keyframes block we can see that 30% of the way through each loop (about .9 seconds in), alice’s color changes from blac...
...h each loop (about .9 seconds in), alice’s color changes from black to a deep burgundy then back again by the end of the loop. moving it to javascript now let’s try creating the same animation with the web animations api. representing keyframes the first thing we need is to create a keyframe object corresponding to our css @keyframes block: var alicetumbling = [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects. each object represents a key from the original css. however, unlike css, the web animations api doesn’t need to explicitly be told the percentages along the animation for each key to appea...
...) and boom: the animation starts playing (see the finished version on codepen). the animate() method can be called on any dom element that could be animated with css. and it can be written in several ways. ...
...And 5 more matches

<feComposite> - SVG: Scalable Vector Graphics
ath id="red100" d="m 0 0 l 0 100 l 100 0 z" fill="#ff00ff" /> <path id="blue50" d="m 0 125 l 100 125 l 100 225 z" fill="#00ffff" fill-opacity=".5" /> <path id="red50" d="m 0 125 l 0 225 l 100 125 z" fill="#ff00ff" fill-opacity=".5" /> <g id="twobluetriangles"> <use xlink:href="#blue100"/> <use xlink:href="#blue50"/> </g> <g id="bluetriangles"> <use transform="translate(275,25)" xlink:href="#twobluetriangles"/> <use transform="translate(400,25)" xlink:href="#twobluetriangles"/> <use transform="translate(525,25)" xlink:href="#twobluetriangles"/> <use transform="translate(650,25)" xlink:href="#twobluetriangles"/> <use transform="translate(775,25)" xlink:href="#twobluetriangles"/> <use transform="translate(900,25)" xlink:href="#twoblue...
...w on top of an opaque white surface, thus obliterating the background.</desc> <g enable-background="new"> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-size="27">(with feflood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-size="27">(with feflood)</text> <use xlink:href="#bluetriangles"/> <g transform="translate(275,25)"> <use xlink:href="#red100" filter="url(#overflood)" /> <use xlink:href="#red50" filter="url(#overflood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#red100" filter="url(#inflood)" /> <use xlink:href="#red50" filter="url(#inflood)" /> <text x="35" y="275">in</text> </g> ...
... <use xlink:href="#red100" filter="url(#overflood)" /> <use xlink:href="#red50" filter="url(#overflood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#red100" filter="url(#inflood)" /> <use xlink:href="#red50" filter="url(#inflood)" /> <text x="35" y="275">in</text> </g> <g transform="translate(525,25)"> <use xlink:href="#red100" filter="url(#outflood)" /> <use xlink:href="#red50" filter="url(#outflood)" /> <text x="15" y="275">out</text> </g> <g transform="translate(650,25)"> <use xlink:href="#red100" filter="url(#atopflood)" /> <use xlink:href="#red50" filter="url(#atopflood)" /> <text x="10" y="275">atop</text> </g> ...
...And 5 more matches

<metadata> - SVG: Scalable Vector Graphics
<!-- define symbols used in the svg --> <defs> <!-- hubplug symbol. ...
...--> <symbol id="hub"> <desc>a typical 10baset/100basetx network hub</desc> <text x="0" y="15">hub</text> <g transform="translate(0 20)"> <rect width="253" height="84"/> <rect width="229" height="44" x="12" y="10"/> <circle fill="red" cx="227" cy="71" r="7" /> <!-- five groups each using the defined socket --> <g id="sock1et" transform="translate(25 20)"> <title>socket 1</title> <use xlink:href="#hubplug"/> </g> <g id="socket2" transform="translate(70 20)"> <title>socket 2</title> <use xlink:href="#hubplug"/> </g> <g id="socket3" transform="translate(115 20)"> <title>socket 3</title> <use xlink:href="#hubplug"/> </g> <g id="socket4"...
... <title>socket 1</title> <use xlink:href="#hubplug"/> </g> <g id="socket2" transform="translate(70 20)"> <title>socket 2</title> <use xlink:href="#hubplug"/> </g> <g id="socket3" transform="translate(115 20)"> <title>socket 3</title> <use xlink:href="#hubplug"/> </g> <g id="socket4" transform="translate(160 20)"> <title>socket 4</title> <use xlink:href="#hubplug"/> </g> <g id="socket5" transform="translate(205 20)"> <title>socket 5</title> <use xlink:href="#hubplug"/> </g> </g> </symbol> <!-- computer symbol --> <symbol id="computer"> <desc>a common desktop pc</desc> <g id="monitorstand" transform="tra...
...And 5 more matches

Rosetta - Archive of obsolete content
sion 3 or later. ...
...ext/x-c" ], yourcompiler); |*| \*/ var rosetta = new (function () { function createscript (oscript, oxhr200) { var smimetype = oscript.getattribute("type").tolowercase(), obaton = document.createcomment(" the previous code has been automatically translated from \"" + smimetype + "\" to \"text/ecmascript\". ...
...) { oscript.hasattribute("src") ? ...
...And 4 more matches

SVGTransform - Web APIs
an svgtransform object corresponds to a single component (e.g., scale(…) or matrix(…)) within a transform attribute. an svgtransform object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...it is invalid to attempt to define a new value of this type or to atte...
... normative document svg 1.1 (2nd edition) constants name value description svg_transform_unknown 0 the unit type is not one of predefined unit types. it is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. ...
...And 4 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
aximum magnification to the maximum value of fov you support and map corresponding values in between. if you start each frame's rendering pass by computing the perspective matrix, you can then multply into that matrix all the other transforms you need to apply in order to result in the frame's desired geometry. for example: const transform = createperspectivematrix(viewport, 130, 1, 100); const translatevec = vec3.fromvalues(-trackdistance, -cranedistance, pushdistance); mat4.translate(transform, transform, translatevec); this starts with the perspective matrix representing a 130° vertical field of view, then applies a translation that moves the camera in a manner that includes track, crane, and push movements. scaling transforms unlike a true "zoom", scaling involves multiplying each of the...
... between the target and its surroundings doesn't change even as the target gets larger or smaller in the frame. on the other hand, a dolly shot, by actually moving the camera, replicates the sense of physical movement, causing the relationships of objects in the scene to shift as you expect while moving past them as you go toward or away from the target of the shot. to perform a dolly operation, translate the camera view forward and backward along the z axis: mat4.translate(viewmatrix, viewmatrix, [0, 0, dollydistance]); here, [0, 0, dollydistance] is a vector wherein dollydistance is the distance to dolly the camera. since this works by moving the entire world around the camera, what really happens here is that the entire world moves along the z axis by dollydistance meters relative to the came...
...to right or vice-versa. the camera doesn't rotate at all, so the focus of the shot slowly glides off the screen. this can suggest concentration, time passing, or contemplation when attempting to establish emotion in a scene. it's also used frequently in "walk-and-talk" scenes, wherein the camera glides alongside the characters and they walk through the scene. to move the camera left and right, translate the view matrix along the x axis in the opposite direction from the desired camera movement: mat4.translate(viewmatrix, viewmatrix, [-truckdistance, 0, 0]); note the vector [-truckdistance, 0, 0]. this compensates for the fact that the truck operation works by moving the world rather than the camera. by moving the entire world in the opposite direction from the direction indicated by truckdista...
...And 4 more matches

Localizing without a specialized tool
ool, this document (along with create a new localization) will enable you to learn just what needs to be done. before we start, did you make sure to install mercurial and confirm that you have set up the proper build environment on your local machine? you cannot begin localizing mozilla file by file without a specialized tool without going through the create a new localization page. what we will translate we will translate a small piece of the ui found in the search bar. the search bar is next to the right of the location bar, and by default points to the google search. if you click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines... there is also a tooltip that appears when you h...
...e prior sub directory before the main directory where you want to be. you can always check the path by typing pwd once you are in the root working directory with both en-us source and the l10n base, copy the searchbar.dtd file by typing cp mozilla-1.9.2/browser/locales/chrome/browser/searchbar.dtd l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/ open the file in your x-testing directory and translate the words inside the quotation marks. be sure to only translate what is in the quotation marks. for the purposes of this tutorial, we will just convert all letters to uppercase, so that the change is visible in the ui. <!entity cmd_enginemanager.label "manage search engines..."> <!entity searchendcap.label "search"> save the file. .properties files the property file "search.p...
...each ".." represents the prior sub directory before the main directory where you want to be. you can always check the path by typing pwd once you are in the root working directory with both en-us source and the l10n base, copy the searchbar.dtd file by typing cp mozilla-1.9.2/browser/locales/chrome/browser/search.properties l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/ open that file and translate the strings that follow the "=". for instance, enter the proper translation for the line "add %s" cmd_addfoundengine=add "%s" with these two string examples translated, you can now test your work to see immediately where you have translated. refer to the building and testing section of the create a new localization page. going one-by-one with your compare-locales output open for review, we will...
...And 3 more matches

EffectTiming.fill - Web APIs
eeffect with an animation object. the keyframeeffect takes an object of timing properties, which is where we pass in fill. ...
...keyframeeffect takes an object of timing properties, which is where we pass in fill. forwards makes the rabbit retain its last keyframe rather than reverting to its unanimated state: // create a set of keyframes to slide the rabbit down the hole--and keep him down with 'fill'! var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // set up the rabbit's animation to play on command by calling rabbitdownanimation.play() later var rabbitdownanimation = new animation(rabbitdownkeyframes, document.timeline); alternatives to fill modes fill modes are primarily provided as a means of representing the animation-fill-mode feature of css animations. when used to...
... css cascade over normal author styles. in order to avoid leaking memory when many filling animations overlap, the browser is required to remove overlapped animations which can lead to surprising results in some cases. ...
...And 3 more matches

Index - Web APIs
rack, audiotrack, html dom, media, property, read-only, reference, label, metadata, track the read-only audiotrack property label returns a string specifying the audio track's human-readable label, if one is available; otherwise, it returns an empty string. 191 audiotrack.language api, audio, audiotrack, html dom, language, localization, media, property, read-only, reference, translated, translation, track the read-only audiotrack property language returns a string identifying the language used in the audio track. 192 audiotrack.sourcebuffer api, audio, audiotrack, html dom, mse, media, media source extensions, property, read-only, reference, sourcebuffer, track the read-only audiotrack property sourcebuffer returns the sourcebuffer that created the t...
...fault grid overlayed. normally 1 unit in the grid corresponds to 1 pixel on the canvas. the origin of this grid is positioned in the top left corner at coordinate (0,0). all elements are placed relative to this origin. so the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default. 526 drawing text canvas, graphics, intermediate, tutorial the canvas rendering context provides two methods to render text: 527 finale canvas, graphics, tutorial there are a variety of demos and further explanations about canvas on these sites: ...
...s which describe the pattern. 598 canvasrenderingcontext2d.settransform() api, canvas, canvasrenderingcontext2d, method, reference the canvasrenderingcontext2d.settransform() method of the canvas 2d api resets (overrides) the current transformation to the identity matrix, and then invokes a transformation described by the arguments of this method. this lets you scale, rotate, translate (move), and skew the context. 599 canvasrenderingcontext2d.shadowblur api, canvas, canvasrenderingcontext2d, property, reference the canvasrenderingcontext2d.shadowblur property of the canvas 2d api specifies the amount of blur applied to shadows. the default is 0 (no blur). 600 canvasrenderingcontext2d.shadowcolor api, canvas, canvasrenderingcontext2d, propert...
...And 3 more matches

matrix3d() - CSS: Cascading Style Sheets
o; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: ...
... html <div class="foo"> lorem ipsum dolor sit amet, consectetur adipisicing elit. ...
... html <div class="foo"> lorem ipsum dolor sit amet, consectetur adipisicing elit. ...
...And 3 more matches

rotate() - CSS: Cascading Style Sheets
*/ background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations. ...
...: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations. ...
...ng rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations. ...
...And 3 more matches

CSS3 - Archive of obsolete content
ctuation properties. a few features present in early css text level 3 draft have being postponed to the next iteration of this module . css transforms level 1 working draft adds: the support of bi-dimensional transforms to be applied to any element using the css transform and transform-origin properties. ...
...erties. a few features present in early css text level 3 draft have being postponed to the next iteration of this module . css transforms level 1 working draft adds: the support of bi-dimensional transforms to be applied to any element using the css transform and transform-origin properties. ...
... a few features present in early css text level 3 draft have being postponed to the next iteration of this module . css transforms level 1 working draft adds: the support of bi-dimensional transforms to be applied to any element using the css transform and transform-origin properties. ...
...And 2 more matches

Localization content best practices
ts should use the same format, they should be at the top of the file (after the license header) and just drop the (entity name/key) reference. land good quality strings don't land temporary strings. if you already know that your strings are temporary, they shouldn't be exposed to the localization process. this would waste everybody's time and create unnecessary frustration: localizers have to translate strings that are destined to change, developers will need to use new ids later to update them. if you're reviewing a patch, check also strings for grammar errors, capitalization or inconsistencies. for example, use the single unicode …, and not three dots. if you have any doubts about the quality of strings, ask a copywriter to do a copy review of this text. ideally, all strings landing in cod...
...nd it, and let localizers decide the best order for their language. units another example is localizing percentages or units. some locales use a space between the number and the % symbol, some don't, some use a non-breaking space. splitting splitting sentences into several keys often inadvertently presumes a grammar, a sentence structure, and such composite strings are often very difficult to translate. when a composite string is needed, try to give the translators "room to move". word order if a string will contain a placeholder, always add the placeholder to the string to allow the localizer to change the word order if necessary. for example, it might seem ok in english to present the strings [username] says: to localizers simply as says: but this will cause serious issues in many other lan...
...not be parsed. it might be tempting to 'save time' by presenting this as the url of this feed %s and then is invalid; cannot be reached and cannot be parsed. however, linguistically these are different types of sentences and will be handled differently in other languages. this is usually not a case of translator choice but obligatory in the language. for example, in gaelic these sentences must be translated as tha url an inbhir seo mì-dhligheach;cha ruig sinn url an inbhir seo and cha ghabh url an inbhir seo a pharsadh. unless there are significant savings of translation volume involved, it is usually easier and quicker for translators to handle these as fixed strings rather than composed strings, especially considering the time needed for locating, checking and potentially fixing composed strin...
...And 2 more matches

Localizing with Mozilla Translator
since it is written in java, any platform that supports java 1.7 or above supports mozillatranslator also. if you decide to use mozillatranslator, be sure you have java 1.7 or above installed on your system. like most cat tools, mozillatranslator employs glossaries and translation memory to leverage your work from previous translations, thus cutting time and effort when localizing new versions of mozilla applications. ...
...orite repository tool, and then update the product(s) in mt. this will remove obsolete strings and files from the internal database of mt, and will present you with a list of new and updated strings. if you are starting a new localization, all strings will be marked as new or updated.mt puts a fuzzy flag on each flag and saves it in its database. all this means is that the strings have yet to be translated. you can save your work in progress and reopen it to continue working by selecting view fuzzy from the edit menu. after translating those strings (if using the edit phrase dialog, you can get translation suggestions for strings having an original text equal to existing translations), you can run some automated tests to detect typical errors. after that, you export either the whole product or in...
...e useful at a certain moment for mt users, but that, due to its temporary nature, don't fit in the user manual. migrating contents when the directory structure changes overall, if you are a ''good'' mt user and you do things like: checking "keep original" flags for strings not needing translation, instead of just leaving the translation empty struggling to get empty lists when running "untranslated strings" and "view fuzzy" if you are up to date in localization regularly running qa checks and trying to minimize them. you will always do better if you can export a partial glossary and reimport it as needed. see the following example. let's assume you have a firefox product in mt with the directory layout present in language packs, as you probably would need for a initial localization. t...
...And 2 more matches

Localizing with Pontoon
ct the project you want to work on and your locale from the dropdown menus. pontoon will automatically open that locale's project for you to get started. note that for our purposes here, we'll be using firefox affiliates website to demo pontoon's functionality and workflow. and there it is, opened inside pontoon: main toolbar as you can see, most of the interface is taken by the website being translated. only the toolbar on top belongs to pontoon, containing the following items (from left to right): list of strings opens a sidebar with a list of all strings to localize. project selector (affiliates) switches between projects to localize. resource selector (homepage) switches between project resources to localize, like subpages or localization files. hidden if no resources available fo...
... progress indicator displays your progress on the resource being localized. more details are available in the popup. user menu allows for user-specific tasks, like commiting to repository, downloading files and signing out. info menu gives important information, like the anticipated project timeline and a list of keyboard shortcuts. alright, how about we do some translating now? translate strings when using pontoon for localization, you have a couple of options to translate your strings. you can translate in-context, out-of-context, or a combination of the two. we'll start with looking at in-context translation. in-context pontoon's in-context translation mode is what puts it above others. it opens a web page (or web app) and enables real-time editing of that page. here's how y...
...rings when using pontoon for localization, you have a couple of options to translate your strings. you can translate in-context, out-of-context, or a combination of the two. we'll start with looking at in-context translation. in-context pontoon's in-context translation mode is what puts it above others. it opens a web page (or web app) and enables real-time editing of that page. here's how you translate your first string: hover over the text you want to translate with your mouse. an edit button appears over that text. click on it to enable the translate mode. replace the original text with its translation into your language. click the save button to save your translation. out-of-context some strings are impossible to translate in-context, e.g. the contents of the <title> tag in websi...
...And 2 more matches

nsIXULTemplateQueryProcessor
riable ?id would be the member variable, since it is the unique value that identifies a result. each result will have the four variables referred to defined for it and the values may be retrieved using the result's nsixultemplateresult.getbindingfor() and nsixultemplateresult.getbindingobjectfor() methods. the template builder must call initializeforbuilding() before the other methods, except for translateref(). the builder will then call compilequery() for each query in the template to compile the queries. when results need to be generated, the builder will call generateresults(). the initializeforbuilding(), compilequery() and addbinding() methods may not be called after generateresults() has been called until the builder indicates that the generated output is being removed by calling the done() ...
...a binding allows an additional variable to be set for a result, outside of those defined within the query. these bindings are always optional, in that they will never affect the results generated. this function will never be called after generateresults(). any bindings that...
...sted document. abuilder the template builder. ashoulddelaybuilding whether the builder should wait to build the content or not. return value a datasource object. initializeforbuilding() initialize for query generation. this will be called before the rules are processed and whenever the template is rebuilt. this method must be called once before any of the other query processor methods except for translateref(). void initializeforbuilding( in nsisupports adatasource, in nsixultemplatebuilder abuilder, in nsidomnode arootnode ); parameters adatasource datasource for the data. abuilder the template builder. arootnode the root node the builder is attached to. exceptions thrown ns_error_invalid_arg if the datasource is not supported. ns_error_unexpected if generateresults() has already been c...
...And 2 more matches

Using CSS transforms - CSS: Cascading Style Sheets
plied in order from right to left. examples here is an unaltered image of the mdn logo: rotating here is the mdn logo rotated 90 degrees from its bottom-left corner. <img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 150 pixels on the x-axis. <img style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> 3d specific css properties performing css transformations in 3d space is a bit more complex. you have to start by configuring the 3d space by giving it a perspective, then you have to configure ho...
...ckface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); }...
...by default the perspective is centered on the viewer, which is not always adequate. ...
...And 2 more matches

RDF Datasource How-To - Archive of obsolete content
f universe" consists of a set of statements about internet resources; for example, "my home page was last modified april 2nd", or "that news article was sent by bob". in the most abstract sense, a datasource is a collection of such statements. more concretely, a datasource is a translator that can present information as a collection of rdf statements. ...
...ob". in the most abstract sense, a datasource is a collection of such statements. more concretely, a datasource is a translator that can present information as a collection of rdf statements. for example, a "file system datasource" would translate the file system into statements like "/tmp is a directory" and "/tmp/foo is contained within /tmp". ...
...d translate the file system into statements like "/tmp is a directory" and "/tmp/foo is contained within /tmp". an "imap datasource" would use the imap protocol to translate your mail server's inbox as a collection of statements like "message number 126's subject is 'make money fast on the internet'" and "message number 126 was sent by 'spammer128@hotmail.com'". an "address book" datasource could translate a database file into statements like "spammer128@hotmail.com's real name is 'billy dumple'" and "spammer128@hotmail.com is considered an 'important friend'." statements from one datasource can be combined with statements from another datasource using a composite datasource. by combining statements from the imap datasource and address book datasource, above, we'd be able to identify the sender of ...
...chore will be to implement the nsirdfdatasource interface. there are basically two approaches that you can take in this endeavor: delegate to an inner proxy. for example, you may choose to delegate to the in-memory datasource, which is a generic datasource that implements nsirdfdatasource. typically, you provide a parser for reading in some sort of static storage (e.g., a data file); the parser translates the datafile into a series of calls to assert() to set up the in-memory datasource. when flush() is called, or the last reference to the datasource is released, a routine walks the in-memory datasource and re-serializes the graph back to the original file format. for examples of an implementation like this, look at the rdf/xml datasource or the bookmarks datasource. you may want to choose this i...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
(css) css, codingscripting, glossary, needscontent a css descriptor defines the characteristics of an at-rule. at-rules may have one or multiple descriptors. each descriptor has: 110 deserialization deserialization, deserialize, glossary, javascript the process whereby a lower-level format (e.g. that has been transferred over a network, or stored in a data store) is translated into a readable object or other data structure. 111 developer tools codingscripting, developer tools, glossary developer tools (or "development tools" or short "devtools") are programs that allow a developer to create, test and debug software. 112 digest cryptography, glossary, privacy, security a digest is a small value generated by a hash function from...
...etadata about that document, such as author, description, and links to css or javascript files that should be applied to the html. 203 high-level programming language codingscripting, glossary a high-level programming language has a significant abstraction from the details of computer operation. it is designed to be easily understood by humans and for this reason they must be translated by another software. unlike low-level programming languages, it may use natural language elements, or may automate (or even entirely hide) significant areas of computing systems, making the process of developing simpler and more understandable relative to a lower-level language. the amount of abstraction provided defines how "high-level" a programming language is. 204 hoisting cod...
...r web application to different languages, regional differences, and technical requirements for different regions and countries. internationalization is the process of architecting your web application so that it can be quickly and easily adapted to various languages and regions without much engineering effort when new languages and regions are supported. also so that a user can browse features to translate or localize the application to access all the content without breaking the layout. 236 internet beginner, glossary, guide, intro, needscontent, tutorial, web, webmechanics the internet is a worldwide network of networks that uses the internet protocol suite (also named tcp/ip from its two most important protocols). 237 intrinsic size css, glossary, intrinsic si...
...in an array buffer or file format). 412 server glossary, infrastructure, networking, protocol, server a server is a software or hardware offering a service to a user, usually referred to as client. a hardware server is a shared computer on a network, usually powerful and housed in a data center. a soft...

Bootstrapping a new locale
ose to use: notepad++ or notepad2 on windows, vim, gedit or kate on gnu/linux, textwrangler on mac os x. (read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (~/ab-cd/browser/chrome/browser) $ edit ab-cd/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by the developers or l10n-drivers. localization notes will look like this: <!-- localization notes... --> after the localization notes, you will see a list of <!entity> strings like the following: <!entity certerror.pagetitle "untrusted connection"> you should go through each entity, translating the value in the parameters (e.g. untrusted connection in the ex...
...alization notes... --> after the localization notes, you will see a list of <!entity> strings like the following: <!entity certerror.pagetitle "untrusted connection"> you should go through each entity, translating the value in the parameters (e.g. untrusted connection in the example above), like so (example for polish): <!entity certerror.pagetitle "niezaufane połączenie"> once you have translated all the <!entity> strings in this file, you should save your work and open the next .dtd or .property file. you will need to go through each and every file to in every directory in ab-cd. recommended order of localization for recommended order of localization, refer to the localization "phase list" which provides a very rough guide on where to start and in what order to proceed through transl...
...ugh each and every file to in every directory in ab-cd. recommended order of localization for recommended order of localization, refer to the localization "phase list" which provides a very rough guide on where to start and in what order to proceed through translation. the localization phase lists (firefox 3.5: ff35.phaselist, firefox 3.6: ff36.phaselist). description of phases. land your translated files one by one, making sure it follows the *mozilla-1.9.2* structure. this will familiarize you with our "hg" commands and will get us something that we can import easily when you are done. working with bit bucket before a team becomes official, we like to get the localizers comfortable with the hg commands that allow for cloning, pulling, committing, and pushing work to an experimental re...
...cket.org/mozillal10n/ab-cd/ $ hg push ssh://hg@bitbucket.org/mozillal10n/ab-cd/ as you begin to move through your translations, you should "commit" the changes locally and "push" your work to this experimental respository. for instance, if you have finished translating all the .dtd and .property files in your ~/ab-cd/browser/ directory, then you should $ cd ~/ab-cd/ $ hg status $ hg commit -m "translated browser/" $ hg push http://bitbucket.org/mozillal10n/ab-cd/ note that due to the distributed nature of hg, hg commit saves the changes locally, i.e. in the hg repository on your computer. you can see the history of commits with hg log. after doing hg commit, you still need to send the changes to bitbucket. this is why you need to do hg push, which sends the already made commits to the remote r...

Index
tion, l10n localization (l10n) is the process of translating software user interfaces from one language to another and adapting it to suit a foreign culture. these resources are for anyone with an interest in the technical aspects involved in localization. ...
...lization. 2 application translation with mercurial android, draft, editing, firefox, lightning, localization, mercurial, seamonkey, translate, patch, thunderbird first, get the required programs to compile mozilla applications like firefox and thunderbird from build instructions. this is only necessary once. 3 bootstrapping a new locale localization, mercurial, translate, bit bucket (see also https://developer.mozilla.org/en/create_a_new_localization) 4 encodings for localization files internationalization, localization when creating a localization for mozilla products, it’s important to be aware of the encoding of the files that you generate. 5 index localization found 42 pages: 6 l10n checks inter...
...cess for requesting one and following its progress. 19 localization: frequently asked questions faq, guide, internationalization, localization, mozilla this page lists tweaks and tips that may not require a complete page on its own. for more detailed documentation about localization in general, see our localization page. 20 localizing xliff files for ios oasis, translate, xliff, xml, ios firefox for ios uses the xliff xml-based file format to hold and transfer localization data. xliff (extensible localisation interchange file format) is a localization standard governed by the oasis standards body. the goal of the standard is to have an xml-based format to use when exchanging localization data between tools without the potential of data loss or corruption. m...
...sion. 28 mozilla l10n style guide localization cultural references, idioms, and slang require a full understanding of these references between the cultures of your source and target languages. an example of a cultural reference in english would be the phrase, "kick-off meeting." this is a reference that uses an american football term. it means a meeting to begin a project. to translate it, you can follow one of two approaches: 29 mozilla content localized in your language localization, mdn, mozilla, reference, style guide no summary! 30 mozilla content localized in your language localization this section of the style guide is for you to author. the content here should be what you and your localization team have decided, together, to fol...

XPIDL
scidptr const nscid* nscid** ? nsiid const nsiid nsiid* ? nsid const nsid nsid* ? nscid const nscid nscid* ? ...
...ike. the calls are more mangled in native contexts. an important attribute for methods and attributes is scriptability. a method or attribute is scriptable if it is declared in a scriptable interface and it lacks a noscript or notxpcom property. any method that is not scriptable can only be accessed by native code. however, scriptable methods must contain parameters and a return type that can be translated to script: any native type, save those declared with an nsid, utf8string, cstring, astring, or jsval property, may not be used in a scriptable method or attribute. an exception to the above rule is if the parameter has the iid_is property (a special case for some queryinterface-like operations). in general, this means that the only usable native types are those declared in nsrootidl.idl (see abo...
...he only usable native types are those declared in nsrootidl.idl (see above). methods and attributes are mangled on conversion to native code. if a method is declared notxpcom, the mangling of the return type is prevented, so it is called mostly as it looks. otherwise, the return type of the native method is nsresult, and the return type acts as a final outparameter if it is not void. the name is translated so that the first character is unconditionally uppercase; subsequent characters are unaffected. however, the presence of the binaryname property allows the user to select another name to use in native code (to avoid conflicts with other functions). for example, the method '[binaryname(foo)] void bar();' becomes 'nsresult foo()' in native code (note that capitalization is still applied). however,...
...e passed-in-value for inout parameters. the script code would need to set this property to assign a value to the parameter. regular in parameters are reflected more or less normally, with numeric types all representing numbers, booleans as true or false, the various strings (including astring et al) as a javascript string, and nsid types as a components.id instance. in addition, the jsval type is translated as the appropriate javascript value (since a jsval is the internal representation of all javascript values), and objects that are marked nsivariant have their types automatically boxed and unboxed as appropriate. the equivalent representations of all idl types in native code is given in the earlier tables; parameters of type inout follow their out form. native code should pay particular attent...

Matrix math for the web - Web APIs
he order is switched, so matrices are non-commutative. another mind-bender is that matrix multiplication in webgl and css needs to happen in the reverse order that the operations intuitively happen. for instance, to scale something down by 80%, move it down 200 pixels, and then rotate about the origin 90 degrees would look something like the following in pseudo-code. transformation = rotate * translate * scale composing multiple transformations the function that we will be using to compose our matrices is multiplyarrayofmatrices(), which is part of the set of utility functions introduced near the top of this article. it takes an array of matrices and multiplies them together, returning the result. in webgl shader code, this is built into the language and the * operator can be used. additiona...
...sformations the function that we will be using to compose our matrices is multiplyarrayofmatrices(), which is part of the set of utility functions introduced near the top of this article. it takes an array of matrices and multiplies them together, returning the result. in webgl shader code, this is built into the language and the * operator can be used. ...
...akes an array of matrices and multiplies them together, returning the result. in webgl shader code, this is built into the language and the * operator can be used. additionally this example uses scale() and translate() functions, which return matrices as defined above. let transformmatrix = mdn.multiplyarrayofmatrices([ rotatearoundzaxis(math.pi * 0.5), // step 3: rotate around 90 degrees translate(0, 200, 0), // step 2: move down 100 pixels scale(0.8, 0.8, 0.8), // step 1: scale down ]); view on jsfiddle finally, a fun step to show how matrices work is to reverse the steps to bring the matrix back to the original identity matrix. let transformmatrix = mdn.multiplyarrayofmatrices([ scale(1.25, 1.25, 1.25), // step 6: scale back up trans...
...s to reverse the steps to bring the matrix back to the original identity matrix. let transformmatrix = mdn.multiplyarrayofmatrices([ scale(1.25, 1.25, 1.25), // step 6: scale back up translate(0, -200, 0), // step 5: move back up rotatearoundzaxis(-math.pi * 0.5), // step 4: rotate back rotatearoundzaxis(math.pi * 0.5), // step 3: rotate around 90 degrees translate(0, 200, 0), // step 2: move down 100 pixels scale(0.8, 0.8, 0.8), // step 1: scale down ]); why matrices are important matrices are important because they comprise a small set of numbers that can describe a wide range of transformations in space. they can easily be shared around in programs. different coordinate spaces can be described with matrices, and some ma...

WebGL model view projection - Web APIs
oint[1]; let z = point[2]; return [x, y, z, 1]; } function homogeneoustocartesian(point) { let x = point[0]; let y = point[1]; let z = point[2]; let w = point[3]; return [x/w, y/w, z/w]; } as previously mentioned and shown in the functions above, the w component divides the x, y, and z components. when the w component is a non-zero real number then homogeneous coordinate easily translates back into a normal point in cartesian space. now what happens if the w component is zero? in javascript the value returned would be as follows. homogeneoustocartesian([10, 4, 5, 0]); this evaluates to: [infinity, infinity, infinity]. this homogeneous coordinate represents some point at infinity. this is a handy way to represent a ray shooting off from the origin in a specific direction. in a...
... defined in the mdn webgl shared code. the new function looks like this: cubedemo.prototype.computemodelmatrix = function(now) { //scale down by 50% var scale = mdn.scalematrix(0.5, 0.5, 0.5); // rotate a slight tilt var rotatex = mdn.rotatexmatrix(now * 0.0003); // rotate according to time var rotatey = mdn.rotateymatrix(now * 0.0005); // move slightly down var position = mdn.translatematrix(0, -0.1, 0); // multiply together, make sure and read them in opposite order this.transforms.model = mdn.multiplyarrayofmatrices([ position, // step 4 rotatey, // step 3 rotatex, // step 2 scale // step 1 ]); }; in order to use this in the shader it must be set to a uniform location. the locations for the uniforms are saved in the locations object shown below:...
.... in the mdn webgl shared code you'll find the mdn.orthographicmatrix(). this can replace the mdn.perspectivematrix() function in cubedemo.prototype.computeperspectivematrix(). view matrix while some graphics libraries have a virtual camera that can be positioned and pointed while composing a scene, opengl (and by extension webgl) does not. this is where the view matrix comes in. its job is to translate, rotate, and scale the objects in the scene so that they are located in the right place relative to the viewer given the viewer's position and orientation. simulating a camera this makes use of one of the fundamental facets of einstein's special relativity theory: the principle of reference frames and relative motion says that, from the perspective of a viewer, you can simulate changing the pos...
...view forward, the inverse matrix causes the objects in the scene to move back. the following computeviewmatrix() method animates the view matrix by moving it in and out, and left and right. cubedemo.prototype.computeviewmatrix = function(now) { var moveinandout = 20 * math.sin(now * 0.002); var moveleftandright = 15 * math.sin(now * 0.0017); // move the camera around var position = mdn.translatematrix(moveleftandright, 0, 50 + moveinandout ); // multiply together, make sure and read them in opposite order var matrix = mdn.multiplyarrayofmatrices([ // exercise: rotate the camera view position ]); // inverse the operation for camera movements, because we are actually // moving the geometry in the scene, not the camera itself. this.transforms.view = mdn.invertmatrix(ma...

<transform-function> - CSS: Cascading Style Sheets
element up or down in 3d space. scalex() scales an element up or down horizontally. scaley() scales an element up or down vertically. scalez() scales an element up or down along the z-axis. skewing (distortion) skew() skews an element on the 2d plane. skewx() skews an element in the horizontal direction. skewy() skews an element in the vertical direction. translation (moving) translate() translates an element on the 2d plane. translate3d() translates an element in 3d space. translatex() translates an element horizontally. translatey() translates an element vertically. translatez() translates an element along the z-axis. description various coordinate models can be used to describe an html element's size and shape, as well as any transformations applied to it. the mo...
...> <option>rotatez(360deg)</option> <option>rotate3d(1, 1, 1, 90deg)</option> <option>scale(1.5)</option> <option>scalex(1.5)</option> <option>scaley(1.5)</option> <option>scalez(1.5)</option> <option>scale3d(1, 1.5, 1.5)</option> <option>skew(17deg, 13deg)</option> <option>skewx(17deg)</option> <option>skewy(17deg)</option> <option>translate(100px, 100px)</option> <option>translatex(100px)</option> <option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css ...
...ment { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: ...
....7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } .select-form { margin-top: 50px; } javascript const selectelem = document.queryselector('select'); const example = document.queryselector('#example-element'); selectelem.addeventlistener('change', () => { if(selectelem.value === 'choose a function') { return; } else { example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectelem.value}`; settimeout(function() { ...

transform - SVG: Scalable Vector Graphics
the transform attribute defines a list of transform definitions that are applied to an element and the element's children. html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property. however, be aware that there are some difference in syntax between the css property and the attribute. see the documen...
...if y is not provided, it is assumed to be 0. in other words: xnew = xold + <x> ynew = yold + <y> example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- no translation --> <rect x="5" y="5" width="40" height="40" fill="green" /> <!-- horizontal transl...
...if y is not provided, it is assumed to be 0. in other words: xnew = xold + <x> ynew = yold + <y> example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- no translation --> <rect x="5" y="5" width="40" height="40" fill="green" /> <!-- horizontal translation --> <re...
...ot provided, it is assumed to be 0. in other words: xnew = xold + <x> ynew = yold + <y> example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- no translation --> <rect x="5" y="5" width="40" height="40" fill="green" /> <!-- horizontal translation --> <rect x="5" y="5" width="40" height="40" fill="blue" transform="translate(50)" /> <!-- vertical translation --> <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" /> <!-- both horizontal and vertical translation --> <rect x="5" y="5" width="40" height="40" fill="yellow" transform="translate(50,50)" /> </svg> scale the scale(<x> [<y>]) transform function specifies a scale operation by x and y. if y is not provi...

Building up a basic demo with the PlayCanvas engine - Game development
d your first object in a 3d environment using playcanvas! it was easier than you thought, right? here's how it should look: and here's the code we have created so far: you can also check it out on github. more shapes now we will add more shapes to the scene. ...
...aterial.diffuse.set(1, 0.58, 0); cylindermaterial.update(); cylinder.model.model.meshinstances[0].material = cylindermaterial; cone creating a cone and its material is done in almost exacly the same way as we did for the cylinder. add the following code, again, at the bottom of your script: var cone = new pc.entity(); cone.addcomponent("model", { type: "cone" }); app.root.addchild(cone); cone.translate(2, 0, 0); var conematerial = new pc.phongmaterial(); conematerial.diffuse.set(0.9, 0.9, 0.9); conematerial.update(); cone.model.model.meshinstances[0].material = conematerial; the code above will create a new cone, add it to the app and move it by 2 units to the right so it's not overlapping the cylinder. then the material is created, given a gray color, and assigned to the cone entity. here'...
...units to the right so it's not overlapping the cylinder. then the material is created, given a gray color, and assigned to the cone entity. here's how it should look right now: this works, but it is a bit boring. in a game something is usually happening — we can see animations and such — so let's try to breathe a little life into those shapes by animating them. animation we already used translate or rotate to adjust the position of the shapes; we could also change their positions directly with setposition, or scale them. to show actual animation, we need to make changes to these values inside the rendering loop, so they are updated on every frame. there's a special update event that we can use for that — add the following code just below the previous additions: var timer = 0; app.on("u...

UI pseudo-classes - Learn web development
don't want it to be picked up by assistive technologies. ...
...having a purely visual indicator solves this problem. note: this also ...
... styles back up yourself. we saw examples of this in the previous article when we talked about using appearence: none on radios/checkboxes. as a recap, the :checked code from our styled radio buttons example looks like so: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2); } you can try it out here: basically, we build the styling for the radio button "inner circle" using the ::before pseudo element, but set a scale(0) transform on it. we then...

SVG Guidelines
you can als...
...you can also use svg grouping to avoid duplica...
... shapes. avoid excessive grouping editors can sometimes do excessive grouping while exporting svgs. this is due to the way editors work. nested groups avoid multiple-level nesting of groups, these make the svg less readable. nested transforms some editors use <g> tags to do nested transforms, which is usually not needed. you can avoid this by doing basic algebra, for example: <g transform="translate(-62, -310)"><shape transform="translate(60, 308)"/></g> can be cut down to: <shape transform="translate(-2,-2)"/> because: -62+60 = -310+308 = -2 performance tips these rules are optional, but they help speeding up the svg. avoid using a <use> tag when that <use> tag is being referenced only once in the whole file. instead of using css/svg transforms, apply directly the transform on the ...

Mozilla Content Localized in Your Language
nar calendar observed? other regional calendar observed? time format how is time expressed in your language? including 0-24 hr expression, hour, minute and second. percentages how are percentages expressed in your language? digit groups how are digit groups expressed in your language? example: 1.23 (decimal separator) or 1,000 (thousand separator) using comma or period. ...
...ime format how is time expressed in your language? including 0-24 hr expression, hour, minute and second. percentages how are percentages expressed in your language? digit groups how are digit groups expressed in your language? example: 1.23 (decimal separator) or 1,000 (thousand separator) using comma or period. acronyms do you translate widely accepted acronyms such as cd, dvd, mb? if translated, is there an equavilent acronym and widely accepted in the language? gender are there exceptions to standard gender conventions within your language? if so, what are they? tone/register what is the appropriate tone for your translations? does it vary by product and target audience? if so, how? what are formality to avoid? list products and their tones if different. capitalization what is ...
... often inserted automatically in the ui where strings are truncated. ellipsis should only be used at high level of ui pages, but not be on the final page (after a series of click-through) where detailed instruction is given. ellipsis should not be used as a way to solve truncation issue. focus on making the ui short and precise. the sequence of the sentence structure in another language may not translate well, when a sentence is half finished as such. add fluency :: spelling, punctuation, capitalization, diacritics, typography, unpaired brackets or quote marks, whitespace. include a note to look for, reference, and adhere to a national standard for the language, where possible. add style :: register, variants/slang, awkward, company style (branding guidelines), inconsistent style, third...

Localizing XLIFF files for iOS
t> tags. source english strings are contained in <source> child tags. here is an example of such a <trans-unit> <trans-unit id="add to bookmarks"> <source>add to bookmarks</source> </trans-unit> your translations must be contained inside <target> child tags. ...
...that need to be translated. do not delete the <source> tag sets. <trans-unit id="add to bookmarks"> <source>add to bookmarks</source> <target>your_translation_here</target> </trans-unit> provide translations of the strings in the <source> tag sets by placing their translations in the <target> tag sets beneath them. keep in mind the following sets of characters that need to remain untranslated: $(some_text_here) is a variable format, %1$@ is another variable format. <note> tags contain localizer notes from developers and should not be translated. <trans-unit id="add to bookmarks"> <source>add to bookmarks</source> <target>agregar a marcadores</target> <note>no comment provided by engineer.</note> </trans-unit> save your translations along the way. on...
...> <note>no comment provided by engineer.</note> </trans-unit> save your translations along the way. once you've completed translation, it's important to make sure the xml in your xliff file is valid (e.g., no broken tag sets). open the file in firefox to have it run a validity check and correct any errors it might yell about. commiting your xliff file using this command, commit your translated xliff file into your locale's directory: git commit -m "commit message here" . push your commit into the github repo: git push kick up your feet, pop open a cold beer (or soda), and pat yourself on the back for doing something new, different, and exciting! ...

Localization formats
ting the web l10n process. html/php maybe you are designing a project that has relatively small translation needs like three to four lines (or more) of content asking users to update to the next version of software available. you may choose to present just the html for localization: we give an html file which lists several pieces of content like, <h1>getting started</h1> and the localizer translates to <h1>débuter avec firefox</h1> the localizer then submits the translated html or php back to us by either checking in changes to svn or sending us a patch that pascal checks in. advantages to html good for small projects very simple for web developers gives localizers the exact context of translations a localizer who knows basic html can style translations to make sure translations...
...("getting started")?></h1> function ___($str) { return $array[$str]; } advantage to .lang simple work-flow allowing the web developer to place the file in svn and it can appear on the staging server .lang syntax is like simplified .po, which many localizers who are familiar with linux and other projects understand mozilla has a basic tool called main.lang checker, which can show any untranslated files to the localizer no need to compile to .mo file so a localizer can see his/her changes more quickly creating simple diffs .lang files will be cached which will reduce any slowness effect disadvantage to .lang no plural forms no context for localizers unless you provide good comments no styling by localizers if it is needed may be slower because file is not compiled into binaries...
...save the .po file using a completely different structure or order of entities. read more about gettext on wikipedia and on mdc. wiki blogging, documentation, and other types of mozilla content often surface as wikis. case study: download day in the above gettext example, notice how the web developer used "certificate_intro" as the value of the msgid. this is not the actual content that was translated. so, if a localizer wanted to use one of the many powerful gettext tools, like po-editor, the msgid provides no context for translation or for other localizers to verify translations when qa-ing. this should have been avoided. in the case of download day, someone created entity-like identifiers in the msgid, which we have shown above with the "certificate_intro" key. then, an en-us repository w...

Extras
"15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 l 10...
... <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> </lineargradient> <radialgradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/> </radialgradient> </defs> <rect width="300" height="250" fill="url(#grad1)"/> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g transform="translate(-50,-35)"> <rect width="100" height="70" fill="url(#grad2)"/> <switch> <foreignobject width="100" height="70" requiredextensions="http://www.w3.org/...
...27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g transform="translate(-30,-30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <msup> <mi>α</mi> <mi>n</mi> </msup> <mrow> <mi>n</mi> <mo>!</mo> </mrow> </mfrac> </mrow> </math> </foreignobject> <t...

IAccessibleTable
alue is null. s_ok. caption() returns the caption for the table. the returned object could be an iaccessible or an iaccessible2. [propget] hresult caption( [out] iunknown accessible ); parameters accessible if the table has a caption then a reference to it is returned, else a null pointer is returned. return value s_false if there is nothing to return, [out] value is null. s_ok. childindex() translates the given row and column indexes into the corresponding cell index. [propget] hresult childindex( [in] long rowindex, [in] long columnindex, [out] long cellindex ); parameters rowindex 0 based row index for the cell. columnindex 0 based column index for the cell. cellindex returns the 0 based index of the cell at the specified row and column indexes. return value e_invalidarg if bad [in...
...t and size of the returned table are implementation dependent. [propget] hresult columnheader( [out] iaccessibletable accessibletable, [out] long startingrowindex ); parameters accessibletable the column header. startingrowindex the 0 based row index where the header starts, usually 0. return value s_false if there is no header, [out] values are null and 0 respectively. s_ok. columnindex() translates the given cell index into the corresponding column index. [propget] hresult columnindex( [in] long cellindex, [out] long columnindex ); parameters cellindex 0 based index of the cell in the parent or closest ancestor table. typically this is the value returned from iaccessible2.indexinparent(), but in the case where the table cells are not direct children of the table this is the cell inde...
...t and size of the returned table are implementation dependent. [propget] hresult rowheader( [out] iaccessibletable accessibletable, [out] long startingcolumnindex ); parameters accessibletable the row header. startingcolumnindex the 0 based column index where the header starts, usually 0. return value s_false if there is no header, [out] values are null and 0 respectively. s_ok. rowindex() translates the given cell index into a row index. [propget] hresult rowindex( [in] long cellindex, [out] long rowindex ); parameters cellindex 0 based index of the cell in the parent or closest ancestor table. typically this is the value returned from iaccessible2.indexinparent(), but in the case where the table cells are not direct children of the table this is the cell index specified by the "table...

Using the CSS Typed Object Model - Web APIs
; // cssmathsum example let btnwidth = allcomputedstyles.get('width') console.log( btnwidth ); // cssmathsum console.log( btnwidth.values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( btnwidth.operator ); // 'sum' // csstransformvalue let transform = allcomputedstyles.get('transform'); console.log( transform ); // csstransformvalue {0: cssscale, 1: csstranslate, length: 2, is2d: true} console.log( transform.length ); // 1 console.log( transform[0] ); // cssscale {x: cssunitvalue, y: cssunitvalue, z: cssunitvalue, is2d: true} console.log( transform[0].x ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].y ); // cssunitvalue {value: 0.95, unit: "number"} console.log( transform[0].z ); // cssunitvalue {value: 1, unit: "num...
...cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( btnwidth.operator ); // 'sum' csstransformvalue with cssscale the display: inline-block; also enables transforming. in our css we have transform: scale(0.95);, which is a transform function. ...
... transform property, we get a csstransformvalue. we can query the length (or number) of transform functions with the .length property. seen as we have a length of 1, which represents a single transform function, we log the first object and get a cssscale object. we get cssunitvalues when we query the x, y, and z scaling. the readonly cssscale.is2d property is true in this scenario. had we added translate(), skew(), and rotate() transform functions, the length would have been 4, each with their own x, y, z values, and each with an .is2d property. for example, had we included transform: translate3d(1px, 1px, 3px), the .get('transform') would have returned a csstranslate with cssunitvalues for x, y, and z, and the readonly .is2d property would have been false. cssimagevalue our button has one back...

CanvasRenderingContext2D.rotate() - Web APIs
ringcontext2d.rotate() method of the canvas 2d api adds a rotation to the transformation matrix. syntax void ctx.rotate(angle); parameters angle the rotation angle, clockwise in radians. you can use degree * math.pi / 180 to calculate a radian from a degree. the rotation center point is always the canvas origin. to change the center point, you will need to move the canvas by using the translate() method. examples rotating a shape this example rotates a rectangle by 45°. note that the center of rotation is the top-left corner of the canvas, and not a location relative to any shape. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx...
...red'; ctx.fillrect(100, 0, 80, 20); // reset transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); result the center of rotation is blue. the non-rotated rectangle is gray, and the rotated rectangle is red. rotating a shape around its center this example rotates a shape around its center point. to do this, the following steps are applied to the matrix: first, translate() moves the matrix's origin to the shape's center. rotate() rotates the matrix by the desired amount. finally, translate() moves the matrix's origin back to its starting point. this is done by applying the values of the shape's center coordinates in a negative direction. html <canvas id="canvas"></canvas> javascript the shape is a rectangle with its corner at (80, 60), a width of 140, a h...
...with its corner at (80, 60), a width of 140, a height of 30. its horizontal center is at (80 + 140 / 2), or 150. its vertical center is at (60 + 30 / 2), or 75. thus, the center point is at (150, 75). const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140, 30); // matrix transformation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140, 30); result the non-rotated rectangle is gray, and the rotated rectangle is red. specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.rotate' in that specification. living standa...

Compositing and clipping - Web APIs
by default the <canvas> element has a clipping path that's the exact same size as the canvas itself. in other words, no clipping occurs. a clip example in this example, we'll use a circular clipping path to restrict the drawing of a set of random stars to a particular region. ...
...th ctx.beginpath(); ctx.arc(0, 0, 60, 0, math.pi * 2, true); ctx.clip(); // draw background var lingrad = ctx.createlineargradient(0, -75, 0, 75); lingrad.addcolorstop(0, '#232256'); lingrad.addcolorstop(1, '#143778'); ctx.fillstyle = lingrad; ctx.fillrect(-75, -75, 150, 150); // draw stars for (var j = 1; j < 50; j++) { ctx.save(); ctx.fillstyle = '#fff'; ctx.translate(75 - math.floor(math.random() * 150), 75 - math.floor(math.random() * 150)); drawstar(ctx, math.floor(math.random() * 4) + 2); ctx.restore(); } } function drawstar(ctx, r) { ctx.save(); ctx.beginpath(); ctx.moveto(r, 0); for (var i = 0; i < 9; i++) { ctx.rotate(math.pi / 5); if (i % 2 === 0) { ctx.lineto((r / 0.525731) * 0.200811, 0); } else...
...next, we create the circular clipping path by drawing an arc and calling clip(). clipping paths are also part of the canvas save state. if we wanted to keep the original clipping path we could have saved the canvas state before creating the new one. everything that's drawn after creating the clipping path will only appear inside that path. you can see this clearly in th...

DOMMatrix() - Web APIs
3d operations.. syntax var dommatrix = new dommatrix([init]) parameters init optional a string containing a sequence of numbers or an array of numbers specifying the matrix you want to create, or a css transform string. example this example creates a dommatrix to use as an argument for calling point.matrixtransform(). ...
...tax var dommatrix = new dommatrix([init]) parameters init optional a string containing a sequence of numbers or an array of numbers specifying the matrix you want to create, or a css transform string. example this example creates a dommatrix to use as an argument for calling point.matrixtransform(). ...
...css transform string. example this example creates a dommatrix to use as an argument for calling point.matrixtransform(). var point = new dompoint(5, 4); var scalex = 2; var scaley = 3; var translatex = 12; var translatey = 8; var angle = math.pi / 2; var matrix = new dommatrix([ math.sin(angle) * scalex, math.cos(angle) * scalex, -math.sin(angle) * scaley, math.cos(angle) * scaley, translatex, translatey ]); var transformedpoint = point.matrixtransform(matrix); specifications specification status comment geometry interfaces module level 1the definition of 'dommatrix' in that specification. candidate recommendation initial definition. ...

SVGSVGElement - Web APIs
ectratio, zoomandpan, transform and viewtarget within currentview will correspond to the values from the svg view specification fragment identifier svgsvgelement.currentscale on an outermost <svg> element, this float attribute indicates the current scale factor relative to the initial view to take into account user magnification and panning operations. ...
...om the svg view specification fragment identifier svgsvgelement.currentscale on an outermost <svg> element, this float attribute indicates the current scale factor relative to the initial view to take into account user magnification and panning operations. dom attributes currentscale and currenttranslate are equivalent to the 2×3 matrix [a b c d e f] = [currentscale 0 0 currentscale currenttranslate.x currenttranslate.y]. ...
...the behavior is undefined for <svg> elements that are not at the outermost level. ...

perspective() - CSS: Cascading Style Sheets
editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...

scaleZ() - CSS: Cascading Style Sheets
n the z-coordinate of each point of the element. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
...the element. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
...lies to the 3d space and can't be represented on the plane. 10001000s 1000010000s00001 examples html <div>normal</div> <div class="perspective">translated</div> <div class="scaled-translated">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .perspective { /* includes a perspective to create a 3d space */ transform: perspective(400px) translatez(-100px); background-color: limegreen; } .scaled-translated { /* includes a perspective to create a 3d space */ transform: perspective(400px) scalez(2) translatez(-100px); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'scalez()' in that specification. editor's draft initial defi...

Performance fundamentals - Web Performance
mpositor, which can render them in a performant, power-efficient fashion. an app's startup performance matters just as much as its runtime performance. gecko is optimized to load a wide variety of content efficiently: the entire web! many years of improvements targeting this content, like parallel html parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc., translate just as well to improving web applications on firefox. application performance this section is intended for developers asking the question: "how can i make my app fast"? startup performance application startup is punctuated by three user-perceived events, generally speaking: the first is the application first paint — the point at which sufficient application resources have been loaded to...
...instead of tweaking absolute positioning and fiddling with all that math yourself, use the transform css property to adjust the position, scale, and so forth of your content. the reason is, once again, hardware acceleration. the browser can do these tasks on your gpu, letting the cpu handle other things. in addition, transforms give you capabilities you might not otherwise have. not only can you translate elements in 2d space, but you can transform in three dimensions, skew and rotate, and so forth. paul irish has an in-depth analysis of the benefits of translate() from a performance point of view. in general, however, you have the same benefits you get from using css animations: you use the right tool for the job and leave the optimization to the browser. you also use an easily extensible way of ...
... the same benefits you get from using css animations: you use the right tool for the job and leave the optimization to the browser. you also use an easily extensible way of positioning elements — something that needs a lot of extra code if you simulate translation with top and left positioning. another bonus is that this is just like working in a canvas element. note: you may need to attach a translatez(0.1) transform if you wish to get hardware acceleration on your css animations, depending on platform. as noted above, this can improve performance, but can also have memory consumption issues. what you do in this regard is up to you — do some testing and find out what's best for your particular app. use requestanimationframe() instead of setinterval() calls to window.setinterval() run code...

<feColorMatrix> - SVG: Scalable Vector Graphics
" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">reference</text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 70)" filter="url(#colormethesame)" /> <text x="70" y="120">identity matrix</text> <!-- combine rgb into green matrix --> <filter id="colormegreen"> <fecolormatrix in="sourcegraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="ur...
... 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="url(#colormegreen)" /> <text x="70" y="190">rgbtogreen</text> <!-- saturate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colormesaturate)" /> <text x="70" y="260">saturate</text> <!-- huerotate --> <filter id="colormehuerotate"> <fecolormatrix in="sourcegraphic" type="huerotate" values="180" /> </filter> <use href="#circles" transform="translate(0 280)" filter="url(#colormehuerotate)" /> <text x="70" y="330">huerotate</text> <!-- luminancetoalpha --> <filte...
... working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of '<fecol...

Basic Transformations - SVG: Scalable Vector Graphics
ight="10" /> <rect x="20" y="0" width="10" height="10" /> </g> </svg> all following transformations are summed up in an element's transform attribute. transformations can be chained simply by concatenating them, separated by whitespace. translation it may be necessary to move an element around, even though you can position it with the according attributes. for this purpose, the translate() transformation stands ready. <svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> the example will render a rectangle, translated to the point (30,40) instead of (0,0). if the second value is not given, it is assumed to be 0. rotation rotating an element is quite a common task. use the rotate() tr...
...te a common task. use the rotate() transformation for this: <svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> </svg> this example shows a square that is rotated by 45 degrees. the value for rotate() is given in degrees. multiple transformations transformations can be concatenated easily just by separating them with spaces. for example, translate() and rotate() are common used transformations. <svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /> </svg> this example shows again the small square shown above that this time is also rotated by 45 degrees. skewing to make a rhombus out of our rectangle, the skewx() and skewy() transformations a...
... the svg transform documentation. detailed information about this property can be found in the svg recommendation. effects on coordinate systems when using transformations you establish a new coordinate system inside the element the transformations apply to. that means, the units you specify for the element and its children might not follow the 1:1 pixel mapping, but are also distorted, skewed, translated and scaled according to the transformation. <svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g> </svg> the resulting rectangular in the above example will be 100x100px. the more intriguing effects arise, when you rely on attributes like userspaceonuse and the such. embedding svg in svg in contrast to html, svg allows you to embed ot...

l10n - Archive of obsolete content
he identifier values break all your .properties files. if you're supplying different localizations for a string depending on the number of items (that is, whether to use a singular or plural form) then get() takes a second integer parameter which indicates the number of items there are. you can supply one or more placeholders to get(), which are strings, such as proper names, that should not be translated themselves but instead should be inserted into the translated string. you can't use plurals and placeholders in the same expression: if you do, the placeholders will be ignored. parameters identifier : string a identifier for the localization of a particular string in the current locale. count : integer optional parameter. if you're supplying different localizations for a string for singul...
... var _ = require("sdk/l10n").get; console.log(_("child_id", 1)); console.log(_("child_id", 2)); see the tutorial on plural support for more information. note that if you use this parameter, you can't supply any placeholders. placeholder1...n : string optional parameters. if you do not include the count parameter, you can supply one or more placeholder strings that are to be inserted into the translated string at locations defined by the translator. if you supply multiple placeholders, each one is a separate string parameter. var _ = require("sdk/l10n").get; console.log(_("home_town", "alan", "norwich")); see the tutorial on placeholder support for more information. returns string : the localized string referenced by the identifier parameter passed in, or the identifier itself if no refere...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
er than the web page being displayed in the content area is chrome. extensions also can be considered xul applications with chrome. three kinds of packages make up chrome the content package this package is used to contain the main xul and javascript source files. most extensions consist of a single content package2 the locale package this package is used to contain language data that can be translated. to make an extension’s gui support multiple languages, you can include multiple locale packages, one for each language. the skin package this is used to include source files used as visual elements in the gui, including style sheets and images. most extensions include only one skin package, but you can include multiple skin packages to allow the gui to change with different themes. chrome ...
... here --> <menuseparator /> <menuitem label="clear sessions" oncommand="gsessionstore.clear(event);" /> </menupopup> implementing methods now we’re going to actually implement the methods we defined in the gsessionstore object, one at a time. in the interest of space, i’m not including all the code here, but you can download it from the following url: fixme: include code from xuldev: translate it and attach it to the chapter document init method the init method is as shown in listing 17. the init method first gets the sessionstore directory inside the profile directory using nsllocalfile, which we’ll refer to through the variable _dir in subsequent lines (lines 3–6); if the directory doesn’t exist, we’ll create it (lines 7–8)3. listing 17: content for init method init: fu...

Index - Archive of obsolete content
es for both users and developers compared to the old xpinstall/-style extensions. 241 firefox addons developer guide the original document is in japanese and distributed via the xuldev.org website. so there may be still some reference to the xuldev website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported). 242 hiding browser chrome add-ons, extensions, xul, xulbrowserwindow there are times in which an extension may find it useful to hide browser chrome (that is, toolbars, the location bar, and so forth), in order to reduce clutter when presenting a particular user interface. this is done, for example, by the about:a...
...the c++ caller. 434 existing content this is a list of existing mozilla.org documentation. it needs to be checked, prioritized, and migrated. 435 extension frequently asked questions this is quick set of answers to the most common issues with extension development. they are currently written with mostly firefox in mind, but most if not all should easily translate to seamonkey, thunderbird or any of the other applications. for thunderbird, you may also find the extension howto or faq pages helpful. 436 external cvs snapshots in mozilla-central mozilla-central contains copies of external software modules that it depends on. 437 fast graphics performance with html no summary! 439 firefox archive, fir...

Space Manager Detailed Design - Archive of obsolete content
perator delete(void* aptr, size_t asize); static void shutdown(); /* * get the frame that's associated with the space manager. this frame * created the space manager, and the world coordinate space is * relative to this frame. * * you can use queryinterface() on this frame to get any additional * interfaces. */ nsiframe* getframe() const { return mframe; } /** * translate the current origin by the specified (dx, dy). this * creates a new local coordinate space relative to the current * coordinate space. */ void translate(nscoord adx, nscoord ady) { mx += adx; my += ady; } /** * returns the current translation from local coordinate space to * world coordinate space. this represents the accumulated calls to * translate(). */ void gettrans...
...n is used. void* operator new(size_t asize); void operator delete(void* aptr, size_t asize); a static method is used to shutdown the space manager recycling. this method deletes all of the space mangers in the recycler,and prevents further recycling. it is meant to be called only when the layout module is being terminated. static void shutdown(); origin / coordinate space translation /** * translate the current origin by the specified (dx, dy). this * creates a new local coordinate space relative to the current * coordinate space. */ void translate(nscoord adx, nscoord ady) { mx += adx; my += ady; } /** * returns the current translation from local coordinate space to * world coordinate space. this represents the accumulated calls to * translate(). */ void gettranslation(nscoord& ax, ...

Localization - Archive of obsolete content
means that wherever the text "&findlabel;" appears in the xul file, it will be replaced with the text "find". note that entity declarations do not have a trailing slash at the end of them. in the dtd file for a different language, the text for that language will be used instead. for japanese: <!entity findlabel "検索"> for example, the following text: <description value="&findlabel;"/> is translated as: english version: <description value="find"/> japanese version: <description value="検索"/> you would declare an entity for each label or string of text that you use in your interface. you should not have any directly displayed text in the xul file at all. in addition to using entities for text labels, you should use them for any value that could be different in a different language. a...
...code. you might notice that the text '2520 bytes' has been replaced by two entities. this is because the phrase structure may be different in another locale. for example, the number might need to appear before the equivalent of 'bytes' instead of after. of course, this might need to be more complicated in order to display kb or mb as needed. the access keys and keyboard shortcuts have also been translated into entities because they will likely be different in a different locale. next, the dtd file - findfile.dtd: <!entity findwindow.title "find files"> <!entity filemenu.label "file"> <!entity editmenu.label "edit"> <!entity filemenu.accesskey "f"> <!entity editmenu.accesskey "e"> <!entity opencmd.label "open search..."> <!entity savecmd.label "save search..."> <!entity closecmd.label "close"> <...

The Business Benefits of Web Standards - Archive of obsolete content
ience: less bandwidth and fast loads html code is often much more compact (therefore easier to read and maintain) when used in conjunction with css. according to various reports, case studies, and andy king, author of speed up your web site: web site optimization, css has made it possible to transform table-based layouts into css-based layouts. typically this reduces page size by 25 to 50%. this translates into better user experience, according to usability guru jakob nielsen, who notes that users tend to close a web page when it takes more than 10 seconds to load. the style sheet only needs to load once and then it is cached. the payload might be slightly higher for the first page. but for accessing multiple pages of a site over many visits the savings in bandwidth are huge. improve search en...
...gners, by the developers of proprietary code generators or by the need to perform three dimensional coding gymnastics to cope with the vendors of browsers and other user agents. foremost among the goals of standards led development to improve that user experience are the great twins usability and accessibility. put simply - and quite crudely - a pleasing, satisfying and fulfilling user experience translates, into more traffic, more repeat visitors, fewer bounces, greater loiter time and higher click throughs. ultimately that better user experience delivers the business or operational objectives of the site. greater dialogue, more sales, more people interacting with the site operator in some way. sites which are built using web standards methodologies, processes and practises perform far better for...

Drawing graphics - Learn web development
creating a loop playing with loops in canvas is rather fun — you can run canvas commands inside a for (or other type of) loop just like any other javascript code. let's build a simple example. make another fresh copy of our canvas template (1_canvas_template.html) and open it in your code editor. add the following line to the bottom of your javascript. this contains a new method, translate(), which moves the origin point of the canvas: ctx.translate(width/2, height/2); this causes the coordinate origin (0, 0) to be moved to the center of the canvas, rather than being at the top left corner. this is very useful in many situations, like this one, where we want our design to be drawn relative to the center of the canvas. now add the following code to the bottom of the java...
...get a character from a certain rather awesome retro computer game to walk across the screen. make another fresh copy of our canvas template (1_canvas_template.html) and open it in your code editor. make a copy of walk-right.png in the same directory. ...

Introduction to client-side frameworks - Learn web development
pen-source web application framework led by the angular team at google and by a community of individuals and corporations. it is a complete rewrite from the same team that built angularjs. angular was officially released on the 14th of september 2016. angular is a component-based framework which uses declarative html templates. at build time, transparently to developers, the framework's compiler translates the templates to optimized javascript instructions. angular uses typescript, a superset of javascript that we’ll look at in a little more detail in the next chapter. vue evan you first released vue in 2014, after working on and learning from the original angularjs project. vue is the youngest of the big four, but has enjoyed a recent uptick in popularity. vue, like angularjs, extends html w...
...arah drasner writes about how vue can replace jquery as a tool for making small portions of a webpage interactive. larger code base and abstraction frameworks allow you to write more declarative code – and sometimes less code overall – by dealing with the dom interactions for you, behind the scenes. this abstraction is great for your experience as a developer, but it isn't free. in order to translate what you write into dom changes, frameworks have to run their own code, which in turn makes your final piece of software larger and more computationally expensive to operate. some extra code is inevitable, and a framework that supports tree-shaking (removal of any code that isn't actually used in the app during the build process) will allow you to keep your applications small, but this is still ...

IPDL Tutorial
of serializable data types. struct namevaluepair { nscstring name; nscstring value; }; in implementation code, these structs can be created and used like so: namevaluepair entry(astring, anotherstring); foo(entry.name(), entry.value()); // named accessor functions return references to the members arrays ipdl has simple syntax for arrays: invokemethod(nscstring[] args); in c++ this is translated into a nstarray reference: virtual bool recvinvokemethod(nstarray<nscstring>& args); ipdl's generated data structures can be used in several protocols if they are defined in a separate .ipdlh file. these files must be added to the ipdl.mk makefile like regular .ipdl files, and they use the same syntax (except they cannot declare protocols). to use the structures defined in foo.ipdlh, inclu...
...s have parameters, direction, semantics, and return values like other ipdl messages. a constructor and destructor message must be declared for each managed protocol. each subprotocol must include a `manager` statement. at the c++ layer, the subclasses in both the child and the parent must implement methods for allocating and deallocating the subprotocol actor. the constructor and destructor are translated into standard c++ methods for messages. note: __delete__ is a built-in construct, and is the only ipdl message which does not require an overridden implementation (ie. recv/answer__delete__). however, overridden implementations are encouraged when some action should happen on protocol destruction in lieu of using the deallocpprotocol function. class ppluginparent { /* allocate a pplugininst...

Localizing extension metadata on addons.mozilla.org
cription eula privacy policy version notes developer comments when you submit a new extension to amo, the process is divided into several steps. in step 2, you'll be asked to provide the attributes listed above in the add-on's default locale (selected in step 1). the values you provide here are used as fallback values if someone requests a language that doesn't exist. step 4 allows you to translate any of the above fields into any other language amo supports. remember, all fields are optional when localizing. any field that is blank will just show up in the default locale. getting translation help you are kindly advised not to use any automatic online translation, which can bring unpleasant low-quality output to users. always prefer a qualified human translation. amo doesn't directly pro...
...th an online translation system. they also provide help for adding a localization support to your extension if there is no localization structure yet. you can already request for amo fields localization on the forums, and these fields will be added soon to the web translation system. amazon mechanical turk this is not free, but for a very modest amount of money you can get your amo page quickly translated by native speakers. create an account and then, using the “basic open-ended question” template, follow the instructions to upload the text of your amo page. on the properties page you can specify the location of the worker in order to restrict to people living in the country where the language is spoken. the reward is up to you, but $5-10 per translation seems to work well. localization cod...

QA phase
this is due to a bug in the build logic. please either follow the above structure closely or adjust the commands below according to your custom setup. to copy this file to the appropriate directory, do the following: navigate to your working directory from your command-line terminal (i.e., where you created the folder str...
...r changeset has been successfully pushed to your repository! as you begin to move through your translations, you should commit the changes locally and push your work to this experimental repository. for instance, if you have finished translating all the .dtd and .properties files in your x-testing/browser/chrome/browser/ directory, then you should run these commands: $ hg status $ hg commit -m "translated browser/chrome/browser/" $ hg outgoing $ hg push http://hg.mozilla.org/l10n-central/x-testing note that due to the distributed nature of hg, hg commit saves the changes locally (i.e., in your computer's hg repository). you can see the history of commits with hg log. after doing hg commit, you still need to send the changes to the remote repository. this is where hg push comes in. this sends you...

Translation phase
're interested in localizing mozilla applications. each l10n tool follows a different workflow for localizing mozilla application projects. we've linked a brief tutorial to each l10n tool name below. follow the tutorials to help you decide which l10n tool fits your specific needs. these are the l10n tools we use to localize mozilla applications: pootle a user-friendly web portal built on the translate toolkit api. this tool includes workspaces for translating strings, reviewing string submissions, and project dashboards. see the instance of pootle used to localize mozilla applications. koala a l10n add-on for the offline, stand-alone komodo edit text editor. mozilla translator am offline, stand-alone, java-based l10n tool that helps you translate and integrates with your repositories. v...
... these are the mozilla application projects that are localized using the l10n tools above: firefox the award-winning firefox® web browser has security, speed and new features that will change the way you use the web. ...

Localization sign-off reviews
tween your latest approved revision and the new revision you've submitted for release approval. hence, unless a localizer makes a change within the new revision that nullifies the approved work in the previous revision, the sign-off criteria will be significantly less comprehensive than a technical review. here is some of the criteria we use to perform sign-off reviews: increased amount of untranslated strings we look for previously translated strings changing to untranslated strings in the new revision. this is a common problem with some tools. encoding some tools add bom to utf-8 encoded files, and some change the encoding altogether. mistakenly localized code we look for changes in localized code that should not have been localized or wasn't localized in the previous rev...
...hat should not have been localized or wasn't localized in the previous revision. search plugin changes this greatly impacts productization. we look for these changes and file bugs when they're found in a new revision. further indications of tool-originated corruption this is common. most bugs filed from sign-offs are caused by a tool corrupting your localization's files. newly translated strings that shouldn't have been translated self-explanatory enough, right? access key changes we ensure that when access keys are changed that they are consistent with the keyboard layout for that particular locale and not blended between two or more distinct layouts. how it all works a large part of the review process takes place before you even submit your request for a sign-of...

Creating localizable web content
depending on context, find alternate strings or document an explanation of the string for localizers check that we don't link in new pages to sub-pages with anchors. ...
...t added to an existing page in english. happens for things like faq, or video pages for example. for video, use the code to display the video in an overlayed video player on the page instead of linking to a video section in english. per-locale customizations check if there are alternative links for localized pages (e.g., links to mdn, addons.mozilla.org, or other external resources, are there translated equivalents we can use). if there are alternatives, use them by adding the $lang; parameter in the urls evaluate the impact of new pages on all our web properties, especially links to community sites and redirects. sometimes you can leave some freedom of modification for a block of text so that the localizers link to relevant local resources. images check that images are not going to be a pr...

What every Mozilla translator should know
0n list also available as mozilla.dev.l10n, .l10n in short. discussion about localization take part here just as well as l10n-focused announcements. planning list also available as mozilla.dev.planning, .planning in short. the mozilla project discusses general planning and schedule questions here. discussions of interest to the general mozilla developer community are at least notified here. translate the mozilla web or mozilla.dev.l10n.web, we moved announcements and discussions about the translation of the mozilla web pages to this group. all these groups are pretty low traffic. to keep the track of what's going on, it's also a good idea to read the planet mozilla l10n when you have a problem use the above mailing lists the person in charge of the mozilla l10n is axel hecht (l10n a...
... pretty low traffic. to keep the track of what's going on, it's also a good idea to read the planet mozilla l10n when you have a problem use the above mailing lists the person in charge of the mozilla l10n is axel hecht (l10n at mozilla.com), pike on irc another interesting way of getting help is the irc channel #l10n at irc.mozilla.org useful tools the l10n dashboard pontoon narro translate toolkit koala 0.1 mozillatranslator mercurial the hg is organized into several repositories, sometimes called branches. we have the main repository called mozilla-central (or trunk) where the day to day developing work is done. when a development is started for an specific version, a new repository is created under hg.mozilla.org/releases/. all the content of the trunk is copied to this new ...

Localization Use Cases
the gender of the subject. solution in l20n, the localizer can define the gender (or, in fact, any arbitrary trait) as an attribute of the entity. ...
... ...

JSS Provider Notes
ekeyspec dsaprivatekey pkcs8encodedkeyspec rsaprivatekey dsaprivatekey getkeyspec() is not supported. this method exports key material in plaintext and is therefore insecure. note that a public key's data can be accessed directly from the key. translatekey() simply gets the encoded form of the given key and then tries to import it by calling generatepublic() or generateprivate(). only x509encodedkeyspec is supported for public keys, and only pkcs8encodedkeyspec is supported for private keys. keygenerator supported algorithms notes aes des...
...c4 secretkeyspec for increased security, some secretkeys may not be extractable from their pkcs #11 token. in this case, the key should be wrapped (encrypted with another key), and then the encrypted key might be extractable from the token. this policy varies across pkcs #11 tokens. translatekey tries two approaches to copying keys. first, it tries to copy the key material directly using nss calls to pkcs #11. if that fails, it calls getencoded() on the source key, and then tries to create a new key on the target token from the encoded bits. both of these operations will fail if the source key is not extractable. the class java.security.spec.pbekeyspec in jdk versi...

Mozilla-JSS JCA Provider notes
apublickey dsapublickey rsaprivatecrtkeyspec rsaprivatekey dsaprivatekeyspec dsaprivatekey pkcs8encodedkeyspec rsaprivatekey dsaprivatekey getkeyspec() is not supported. this method exports key material in plaintext and is therefore insecure. note that a public key's data can be accessed directly from the key. translatekey() simply gets the encoded form of the given key and then tries to import it by calling generatepublic() or generateprivate(). only x509encodedkeyspec is supported for public keys, and only pkcs8encodedkeyspec is supported for private keys. keygenerator supported algorithms notes aes des desede (des3) rc4 the securerandom argument passed to init() is ignored, because nss does not support...
...edekeyspec des deskeyspec desede des aes rc4 secretkeyspec for increased security, some secretkeys may not be extractable from their pkcs #11 token. in this case, the key should be wrapped (encrypted with another key), and then the encrypted key might be extractable from the token. this policy varies across pkcs #11 tokens. translatekey tries two approaches to copying keys. first, it tries to copy the key material directly using nss calls to pkcs #11. if that fails, it calls getencoded() on the source key, and then tries to create a new key on the target token from the encoded bits. both of these operations will fail if the source key is not extractable. the class java.security.spec.pbekeyspec in jdk versions earlier than 1.

Index
tries to find reasonable defaults. 218 js_contextiterator jsapi reference, spidermonkey js_contextiterator steps through the set of contexts associated with the runtime rt. each call to js_contextiterator returns the next context in the cycle. 219 js_convertarguments jsapi reference, obsolete, spidermonkey js_convertarguments provides a convenient way to translate a series of js values into their corresponding js types with a single function call. it saves you from having to write separate tests and elaborate if...else statements in your function code to retrieve and translate multiple js values for use with your own functions. 220 js_convertargumentsva jsapi reference, obsolete, spidermonkey js_convertargumentsva is to js_convertargum...
...pi reference, spidermonkey the stub functions are not designed to be called directly by a jsapi application. rather, they are convenient stand-ins anywhere the jsapi requires callbacks of certain types. examples at jsclass illustrate how stub functions can be used. 428 js_pusharguments jsapi reference, obsolete, spidermonkey js_pusharguments provides a convenient way to translate a series of native c/c++ values to jsvals with a single function call. 429 js_putescapedstring jsapi reference, reference, référence(2), spidermonkey js_putescapedstring and js_putescapedstring write str into buffer escaping any non-printable or non-ascii character using \escapes for js string literals. guarantees that a nul is at the end of the buffer unless size is 0. ret...

JIT Optimization Strategies
more shape-guarded direct loads from the object. the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] elif obj.shape == shape2 then obj.slots[5] elif obj.shape == shape3 then obj.slots[2] ... end getprop_innerize attempts to optimize a situation where a property access of the form window.prop can be directly translated into a property access on the inner global object. this optimization will always fail on property accesses which are not on the window object. it is useful because accessing global names via the 'window' object is a common idiom in web programming. getprop_inlinecache this is the worst-case scenario for a property access optimization. this strategy is used when all the others fail. the engin...
...ined above, this optimization will be suppressed. in particular, arguments cannot be returned from the function, or passed as an argument into calls (except for the apply case above). getelem_argumentsinlined similar to geteelem_arguments, but optimizes cases where the access on arguments is happening within an inlined function. in these cases, an access of the form arguments[i] can be directly translated into a direct reference to the corresponding argument value in the inlined call. consider the following: function foo(arg) { return bar(arg, 3); } function bar() { return arguments[0] + arguments[1]; } in the above case, if foo is compiled with ion, and the call to bar is inlined, then this optimization can transform the entire procedure to the following pseudo-code: compiled foo(arg): //...

IAccessibleTableCell
own cellaccessibles, [out] long ncolumnheadercells ); parameters cellaccessibles pointer to an array of references to cell accessibles. the array is allocated by the server. free it with cotaskmemfree. ncolumnheadercells the number of accessibles returned; the size of the returned array. return value s_false if there is no header, [out] values are null and 0 respectively. s_ok. columnindex() translates this cell accessible into the corresponding column index. [propget] hresult columnindex( [out] long columnindex ); parameters columnindex returns the 0 based column index of the cell of the specified cell or the index of the first column if the cell spans multiple columns. return value s_ok. isselected() returns a boolean value indicating whether this cell is selected. [propget] hresult iss...
...,)] iunknown cellaccessibles, [out] long nrowheadercells ); parameters cellaccessibles pointer to an array of references to cell accessibles. the array is allocated by the server. free it with cotaskmemfree. nrowheadercells the number of accessibles returned; the size of the returned array. return value s_false if there is no header, [out] values are null and 0 respectively. s_ok. rowindex() translates this cell accessible into the corresponding row index. [propget] hresult rowindex( [out] long rowindex ); parameters rowindex returns the 0 based row index of the specified cell or the index of the first row if the cell spans multiple rows. return value s_ok. table() returns a reference to the accessbile of the containing table. [propget] hresult table( [out] iunknown table ); parameters...

nsIAccessibleTable
h row and column index are valid then the corresponding accessible object is returned that represents the requested cell regardless of whether the cell is currently visible (on the screen). nsiaccessible getcellat( in long rowindex, in long columnindex ); parameters rowindex the row index of the cell. columnindex the column index of the cell. return value an nsiaccessible object. translate the given row and column indices into the corresponding cell index. long getcellindexat( in long rowindex, in long columnindex ); parameters rowindex the row index of the cell. columnindex the column index of the cell. return value a cell index. getcolumndescription() return the description text of the specified column in the table. astring getcolumndescription( in long colum...
...tentat( in long row, in long column ); parameters row the row index of the cell. column the column index of the cell. return value the number of columns the cell spans. return the index of the column containg the given cell index. long getcolumnindexat( in long cellindex ); parameters cellindex the cell index. return value the column index. getrowandcolumnindicesat() translate the given cell index into the corresponding row and column indices. void getrowandcolumnindicesat( in long cellindex, out long rowindex, out long columnindex ); parameters cellindex cell index to return row and column indices for. rowindex row index at the given cell index. columnindex column index at the given cell index. getrowdescription() return the description text of the...

nsIXULTemplateBuilder
g() method. the bindings are evaluated after a rule has matched. templates may generate content recursively, using the previous iteration's results as reference point to invoke the same queries. since the reference point is different, different output will typically be generated. the reference point nsixultemplateresult object for the first iteration is determined by calling the query processor's translateref() method using the value of the root node's ref attribute. this object may be retrieved later via the builder's rootresult property. for convenience, each reference point as well as all results implement the nsixultemplateresult interface, allowing the result objects from each iteration to be used directly as the reference points for the next iteration. when using multiple queries, each may ge...
...ource that the template builder observes and uses to create content. this is used only for rdf queries and is maintained for backwards compatibility. it will be the same object as the datasource property. for non-rdf queries, it will always be null. rootresult nsixultemplateresult readonly: the virtual result representing the starting reference point, determined by calling the query processor's translateref method with the root node's ref attribute as an argument. queryprocessor nsixultemplatequeryprocessor [noscript] readonly: the query processor used to generate results. methods rebuild() force the template builder to rebuild its content. all existing content will be removed first. the query processor's done() method will be invoked during cleanup, followed by its initializeforbuilding() m...

nsIAbCard/Thunderbird3
[noscript] void setpropertyasastring(in string name, in astring value); [noscript] void setpropertyasautf8string(in string name, in autf8string value); [noscript] void setpropertyasuint32(in string name, in pruint32 value); [noscript] void setpropertyasbool(in string name, in boolean value); void deleteproperty(in autf8string name); autf8string translateto(in autf8string atype); void copy(in nsiabcard srccard) boolean equals(in nsiabcard card) astring generatephoneticname(in boolean alastnamefirst) attributes attribute type description properties nsisimpleenumerator readonly: a list of all the properties that this card has as an enumerator, whose members are all nsiproperty objects.
...operty. deleteproperty() deletes the property with the given name. some properties may not be deleted. however, the implementation will not check this constraint at this method. if such a property is deleted, an error may be thrown when the card is modified at the database level. void deleteproperty(in autf8string name); parameters name the case-sensitive name of the property to set. translateto() translates a card into a specific format. the following types are supported: base64xml xml vcard autf8string translateto(in autf8string atype); parameters atype the type of item to translate the card into. return value a string containing the translated card. exceptions thrown ns_error_illegal_value type not recognized. copy() this function will copy all values from ...

Basic animations - Web APIs
.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fillstyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokestyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // earth var time = new date(); ctx.rotate(((2 * math.pi) / 60) * time.getseconds() + ((2 * math.pi) / 60000) * time.getmilliseconds()); ctx.translate(105, 0); ctx.fillrect(0, -12, 40, 24); // shadow ctx.drawimage(earth, -12, -12); // moon ctx.save(); ctx.rotate(((2 * math.pi) / 6) * time.getseconds() + ((2 * math.pi) / 6000) * time.getmilliseconds()); ctx.transla...
...sun, 0, 0, 300, 300); window.requestanimationframe(draw); } init(); <canvas id="canvas" width="300" height="300"></canvas> screenshotlive sample an animated clock this example draws an animated clock, showing your current time. ...

EffectTiming.easing - Web APIs
t at which the change of values occur within the interval. if the second parameter is omitted, it is given the value end. step-start equivalent to steps(1, start) step-end equivalent to steps(1, end). ...
...cur within the interval. if the second parameter is omitted, it is given the value end. step-start equivalent to steps(1, start) step-end equivalent to steps(1, end). ...

Element.animate() - Web APIs
o include a composite operation or iteration composite operation in your options list: composite optional determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. defaults to replace. add dictates an additive effect, where each successive iteration builds on the last. for instance with transform, a translatex(-200px) would not override an earlier rotate(20deg) value but result in translatex(-200px) rotate(20deg). accumulate is similar but a little smarter: blur(2) and blur(5) become blur(7), not blur(2) blur(5). replace overwrites the previous value with the new one. iterationcomposite optional determines how values build from iteration to iteration in this animation. can be set to accumul...
... returns an animation. examples in the demo down the rabbit hole (with the web animation api), we use the convenient animate() method to immediately create and play an animation on the #tunnel element to make it flow upwards, infinitely. notice the array of objects passed as keyframes and also the timing options block. document.getelementbyid("tunnel").animate([ // keyframes { transform: 'translatey(0px)' }, { transform: 'translatey(-300px)' } ], { // timing options duration: 1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animation — the ke...

GlobalEventHandlers.onmouseup - Web APIs
event object as its sole argument. example in this example, a piece of "toast" hides when you click down with the mouse, and reappears when you release. it uses the onmousedown and onmouseup event handlers. ...
.../div> </div> css .container { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 110px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); } javascript function depress() { toast.classlist.add('depressed'); } function release() { toast.classlist.remove('depressed'); } const toaster = document.queryselector('.toaster'); const toast = document.queryselector('.toast'); toaster.onmousedown = depress; document.onmouseup = release; res...

HTMLElement - Web APIs
ough it doesn't have an effect on all of them. htmlelement.style is a cssstyledeclaration, an object representing the declarations of an element's style attributes. htmlorforeignelement.tabindex is a long representing the position of the element in the tabbing order. htmlelement.title is a domstring containing the text that appears in a popup box when mouse is over the element. htmlelement.translate is a boolean representing the translation. event handlers most event handler properties, of the form onxyz, are defined on the documentandelementeventhandlers, globaleventhandlers or toucheventhandlers interfaces and implemented by htmlelement. in addition, the following handlers are specific to htmlelement. htmlelement.oncopy returns the event handling code for the copy event (bug 28...
... specification status comment css object model (cssom) view modulethe definition of 'htmlelement' in that specification. working draft added the following properties: offsetparent, offsettop, offsetleft, offsetwidth, and offsetheight. html living standardthe definition of 'htmlelement' in that specification. living standard added the following properties: translate, itemscope, itemtype, itemid, itemref, itemprop, properties, and itemvalue. added the following method: forcespellcheck(). moved the onxyz attributes to the globaleventhandlers interface and added an inheritance from it. html5the definition of 'htmlelement' in that specification. recommendation added the following properties: dataset, hidden, tabindex, accesskey, accesskeyl...

Using the MediaStream Recording API - Web APIs
tion screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { ...
...we then use the mediarecorder api to record the stream, and output each recorded snippet into the source of a generated <audio> element so it can be played back. we'll declare some variables for the record and stop buttons, and the <article> that will contain the generated audio players: const record = ...

SVGTransformList - Web APIs
llowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. example using multiple svgtransform objects in this example we create a function that will apply three different transformations to the svg element that has been clicked on. in order to do this we create a separate svgtransform object for each transformation -- such as translate, rotate, and scale. we apply multiple transformation by appending the transform object to the svgtransformlist associated with an svg element. <svg id="my-svg" viewbox="0 0 300 280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>example showing how to transform svg elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function tran...
...jects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root element to access the createsvgtransform() function var svgroot = evt.target.parentnode; // svgtransformlist of the element that has been clicked on var tfmlist = evt.target.transform.baseval; // create a seperate transform object for each transform var translate = svgroot.createsvgtransform(); translate.settranslate(50,5); var rotate = svgroot.createsvgtransform(); rotate.setrotate(10,0,0); var scale = svgroot.createsvgtransform(); scale.setscale(0.8,0.8); // apply the transformations by appending the svgtranform objects to the svgtransformlist associated with the element tfmlist.appenditem(translate); t...

Visual Viewport API - Web APIs
nd size, and receives the resize and event:visualviewport:scroll events you can onitor to know when chances occur to the window's viewport. example the code below is based on the sample the specification, though it adds a few things that make it function better. it shows a function called viewporthandler(). when called it queries the offsetleft and height properties for values it uses in a css translate() method. you invoke this function by passing it to both event calls. one thing that may not be clear in this example is the use of the pendingupdate flag and the call to requestanimationframe(). the pendingupdate flag serves to prevent multiple invocations of the transfrom that can occur when onresize and onscroll fire at the same time. using requestanimationframe() ensures that the transform o...
...wport's offset from the layout viewport origin. var viewport = event.target; var offsetleft = viewport.offsetleft; var offsettop = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead. ...

backface-visibility - CSS: Cascading Style Sheets
100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); }...
...rm: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; margin: 0px; padding: 6px; font-family: sans-serif; text-align: left; } result specifications specification status comment css transforms level 2the definition of 'backface-visibility' in that specification. editor's draft initial definition. ...

perspective-origin - CSS: Cascading Style Sheets
100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bo...
...nsform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result specifications specification status comment css transforms level 2the definition of 'perspective-origin' in that specification. editor's draft in...

perspective - CSS: Cascading Style Sheets
ckface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); }...
...rm: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result specifications specification status comment css transforms level 2the definition of 'perspective' in that specification. editor's draft initial definition ...

transform-box - CSS: Cascading Style Sheets
transform-box: fill-box is used to make the the transform-origin the center of the bounding box, so the r...
...transform-box: fill-box is used to make the the transform-origin the center of the bounding box, so the rectangle spins in place. without it, the transform origin is the center of the...

matrix() - CSS: Cascading Style Sheets
ribing the translation to apply. ...
...nslation to apply. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001 [a b c d tx ty] the values represent the following functions: matrix( scalex(), skewy(), skewx(), scaley(), translatex(), translatey() ) examples html <div>normal</div> <div class="changed">changed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .changed { transform: matrix(1, 2, -1, 1, 80, 80); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'matrix()' in that specification. working...

scale3d() - CSS: Cascading Style Sheets
inates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
... editor's draft initial definition ...

transform-style - CSS: Cascading Style Sheets
#example-element { margin: 50px; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: ...
....7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } javascript const cube = document.getelementbyid('example-element'); const checkbox = document.getelementbyid('preserve'); checkbox.addeventlistener('change', () => { if(checkbox.checked) { cube.style.transformstyle = 'preserve-3d'; } else { cube.style.transformstyle = 'flat'; } }) result specifications specification status comment css tr...

Global attributes - HTML: Hypertext Markup Language
tion; the order in which the elements are focused is the increasing value of the tabindex. if several elements share the same tabindex, their relative order follows their relative positions in the document. title contains a text representing advisory information related to the element it belongs to. such information can typically, but not necessarily, be presented to the user as a tooltip. translate an enumerated attribute that is used to specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged. it can have the following values: empty string and yes, which indicates that the element will be translated. no, which indicates that the element will not be translated. sp...
...nition of 'global attributes' in that specification. recommendation snapshot of html living standard. from html 4.01 specification, the concept of global attributes is introduced and the dir, lang, style, id, class, tabindex, accesskey, and title are now true global attributes. xml:lang which was initially part of xhtml, is now also part of html. hidden, data-*, contenteditable, and translate have been added. html 4.01 specification recommendation there are no global attributes defined. several attributes that will become global attributes in subsequent specifications are defined on a subset of elements. class and style are supported on all elements but <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>. dir is supported on all e...

rotate - SVG: Scalable Vector Graphics
10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="0"> <mpath href="#themotionpath"/> </animatemotion> </path> <g transform="translate(100, 0)"> <use href="#themotionpath"/> <!-- green arrow which will rotate along the motion path --> <path fill="green" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(200, 0)"> <use href="...
...nsform="translate(200, 0)"> <use href="#themotionpath"/> <!-- blue arrow which will rotate backwards along the motion path --> <path fill="blue" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto-reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg> result specifications ...

stdDeviation - SVG: Scalable Vector Graphics
the second value repre...
...the second value represents a standard deviation along the y-axis. if one number is provided, then that value is used for both ...

stitchTiles - SVG: Scalable Vector Graphics
00%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(0, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 0);" /> <rect x="0" y="0" width="100" height="100" styl...
...width="100" height="100" style="filter: url(#noise1); transform: translate(0, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320px, 100px);" /> </svg> usage notes value nostitch | stitch default value nostitch animatable yes nostitch this value indi...

vector-effect - SVG: Scalable Vector Graphics
the suppression of rotation, skew and scaling. when this vector effect and the transform property are defined at the same time, that property is consumed for this effect. ...
... candidate recommendation initial definition ...

simple-prefs - Archive of obsolete content
which is provided as a string. it is used to label the button. in "package.json": { "type": "control", "label": "click me!", "name": "sayhello", "title": "say hello" } in "main.js": var sp = require("sdk/simple-prefs"); sp.on("sayhello", function() { console.log("hello"); }); localization using the sdk's localization system, you can provide translated forms of the title and description attributes. see the localization tutorial for more details. getting and setting preferences unless you've marked them as hidden, the user will be able to see and change the preferences in the add-on manager. you can also see them and change them programmatically using the prefs property, and listen for changes to a preference using on(). simple-prefs in the...

util/object - Archive of obsolete content
rged with descriptors onto the source object. any argument given with "falsy" values (null, undefined) in case of objects are skipped. let { merge } = require("sdk/util/object"); var a = { jetpacks: "are yes", foo: 10 } var b = merge(a, { foo: 5, bar: 6 }, { foo: 50, location: "sf" }); b === a // true b.jetpacks // "are yes" b.foo // 50 b.bar // 6 b.location // "sf" // merge also translates property descriptors var c = { "type": "addon" }; var d = {}; object.defineproperty(d, "name", { value: "jetpacks", configurable: false }); merge(c, d); var props = object.getownpropertydescriptor(c, "name"); console.log(props.configurable); // true parameters source : object the object that other properties are merged into. arguments : object n amount of additional objects that are me...

Localization - Archive of obsolete content
g in: your main add-on's javascript code html files packaged with your add-on the title, description and homepage fields of your add-on's metadata the title and description fields of your add-on's preferences. it doesn't, yet, support localization of css or content scripts, or the add-on's title and description that appear in the add-ons manager. see limitations below. localized strings translated strings are kept in a directory called "locale" under your main add-on directory, one file for each locale. the files: use the .properties format are named "xx-yy.properties", where "xx-yy" is the name of the locale in question contain one entry for each string you want to localize, consisting of an identifier for the string and its translation in that locale, in the format identifier=trans...

Canvas code snippets - Archive of obsolete content
canvas2dcontext.setup.call(this, this.ctx); } } canvas2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globa...

Examples and demos from articles - Archive of obsolete content
n to stop them when appropriate through the cleartimeout() function. a possible approach to solve this problem is to nest all the informations needed by each animation to start, stop, etc. etc. in different objects and then to create a constructor for such class of objects in order to standardize and simplify the instantiation of them. convert relative paths to absolute this example show how to translate relative paths to absolute paths. a shortcut to massively modify the dom this example shows how to create a framework able to modify many properties of dom objects at the same time. filter the digitation into a form field, capture the digitation of a hidden word this example shows the use of the onkeypress event during a digitation into a form field. ajax – submitting forms and uploading f...

StringView - Archive of obsolete content
"b" in base64 encoding... stringview.uint6tob64() is mainly for internal use and generally is of little utility. advanced examples edit an ascii part contained within a binary file let's compile this c program: #include <stdio.h> int main () { printf("hello world!\n"); return 0; } in a 64-bit machine it will result in an output like the following first alert. ...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
in many aspects. for the latest xul specifications, please see the xul reference on mdc and the xul page in the mozilla wiki. for each element that i explain in this chapter, i will illustrate it with a source code example. you can type these examples up and open them in firefox to see how they behave and appear. you can download a file with all the source code examples from: fixme: attache the translated tarball - paul task !. xul display methods xul is used almost exclusively in mozilla applications like firefox and thunderbird, and extensions for them, but other web browsers based on firefox or the gecko engine, and even web-based content also used xul. for example, there is the mozilla amazon browser, which helps with shopping at amazon, and the presentation method in xul, a tool for writin...

JavaScript Object Management - Archive of obsolete content
ss logic in jsm, available through service objects, and chrome scripts are limited to handle presentation logic. we handle most of our code through static objects, singleton objects that don't require instantiation. but it is sometimes necessary to define classes and be able to create multiple instances. common cases include interacting with a local database or a remote api. data will often be translated into arrays of entities, and those are better represented through classes. one way to define a class is as follows: /** * user class. represents a hello world user (whatever that may be). */ 〈modulenamespace〉.user = function(aname, aurl) { this._name = aname; this._url = aurl; }; /** * user class methods. */ 〈modulenamespace〉.user.prototype = { /* the name of the user. */ ...

The Essentials of an Extension - Archive of obsolete content
or>appcoast</em:creator> <em:homepageurl>https://developer.mozilla.org/docs/xul_school</em:homepageurl> this is the data that is displayed before and after the extension is installed, that you can see in the add-ons manager. there are many other tags that can be added, for contributors and translators. the full specification of the install.rdf file has all the details. since extensions can be translated to multiple languages, it is often necessary to translate the extension's description, or even its name. a localized description and name can be added with the following code: <em:localized> <description> <em:locale>es-es</em:locale> <em:name>xul school hola mundo</em:name> <em:description>bienvenido a xul school!</em:description> </description> </em:localized> the es-es lo...

Useful Mozilla Community Sites - Archive of obsolete content
d a new version of your extension, and once it's approved it will be pushed as an update to all your users. if you decide to host your own extension, you'll have to learn about the update system in order to push your own updates. babelzilla babelzilla is a worldwide community of localizers. developers submit their extensions using the web translation system (wts) and volunteers around the world translate them to different languages. the community is very active, and you can be sure to get translations for the most commonly used languages within a few days of submitting your extension. you'll also receive feedback that you wouldn't notice by testing only in one language, which can reveal other bugs in your locale handling. there's a significant portion of users that use a localized version of fir...

Firefox addons developer guide - Archive of obsolete content
file and directory names: italic method and variable names: class name if you want to add a fixme, add: fixme: a message notes: the original document is in japanese and distributed via the xuldev.org website. so there may be still some reference to the xuldev website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported). there are a few things that could be done to make this fit the site better, and for general cleaning up: tables should use the "standard-table" css class so they're styled the same as those on the rest of mdc. there should be some introductory text on the table of contents page at https://developer.mozilla.org/en/firefox_addons_d...

Add-ons - Archive of obsolete content
sions have many advantages for both users and developers compared to the old xpinstall/-style extensions. firefox addons developer guide the original document is in japanese and distributed via the xuldev.org website. so there may be still some reference to the xuldev website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported). hotfix extension this document has been moved to the add-ons wiki. how to convert an overlay extension to restartless first off, what kind of add-on are we talking about here? well, xul overlays and windows, jsm files, chrome & resource mappings with localization, default preferences, but no xpcom components of your own. some of t...

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
"author" : " jehan procaccia mci int-evry- jehan.procaccia at int-evry.fr" "creation date" : " 02 september 2006" ...

Source code directories overview - Archive of obsolete content
app contains contains code to build the firefox executable. base contains the xul and branding code. components contains firefox specific components like history, bookmarks, preferences, migration, sidebar.. configcontains build scripts for firefox. extensions contains code for making certain extensions work. installer contains the firefox installer code. locales contains the files that are translated for firefox. themes contains firefox themes. toolkit toolkit is used by the standalone products. components contains the alerts, autocomplete, command line interface, console, cookies, download manager, filepicker, history, password manager, typeaheadfind, view source, etc. content contains xul specific to the toolkit. library contains libxul work. localescontains files that are transl...

Drag and Drop - Archive of obsolete content
dragged, a drag session should be started. the drag session handles updating the mouse cursor and where the object should be dropped. if something cannot be dragged, it should not start a drag session. because the user generally has only one mouse, only one drag session is in use at a time. note that drag sessions can be created from within mozilla itself or from other applications. mozilla will translate the data being dragged as needed. the list below describes the event handlers that can be called, which may be placed on any element. you only need to put values for the handlers where you need to do something when the event occurs. ondrag called periodically throughout the drag and drop operation. ondraggesture called when the user starts dragging the element, which normally happens when...

Extension Frequently Asked Questions - Archive of obsolete content
for thunderbird, you may also find the extension howto or faq pages helpful. if you're looking for a place to get started, try our tutorial, building an extension or mozillazine's getting started tutorial. use the extension wizard to generate a template to start with. be sure to set the development preferences. todo: add content. ...

Layout System Overview - Archive of obsolete content
ine elements and other blocks.other layout models: xul in addition to managing css-defined formatting, the layout system provides a way to integrate other layout schemes into the presentation. currently layout supports the formatting of xul elements, which utilize a constraint-based layout language. the box is introduced into the layout system's frame model via an adapter (boxtoblockadapter) that translates the normal layout model into the box formatting model. conceptually, this could be used to introduce other layout systems, but it might be worth noting that there was no specific facility designed into the layout system to accommodate this. layout deals with frames, but as long as the layout system being considered has no need to influence presentational elements from other layout systems, it ca...

Mozilla Application Framework in Detail - Archive of obsolete content
make improvements to the underlying application logic without having to rewrite the higher level code. our platform also can take advantage of other internet standards such as xslt and rdf. rdf, a core element to the framework, allows you to define dynamic elements in your ui (elements that may change after you have completed the application, such as a "history" menu item). xslt could be used to translate information from web services, rss, soap, or other xml-based languages and convert them into a form that you might display in your user interface. the gecko rendering engine gecko is the revolutionary rendering engine that offers advanced features for internet browsing anywhere across applications, computing platforms and devices. this innovation in browser technology offers small size, speed an...

New Skin Notes - Archive of obsolete content
ews and webwatch should be hidden or localized too. --gandalf 01:30, 29 aug 2005 (pdt) we'll revisit this later. tab links are currently as intended. --dria no, they're not. when i'm on polish devmo and i click on documentation or main devmo logo i'm redirected to english version. it's a bug. --gandalf 00:39, 31 aug 2005 (pdt) link url fixed for wiki skin only. tab text will currently remain untranslated ("documentation"). devnews and webwatch are not currently being localised so shall remain as they are, with link to english wiki. --dria further notes and ideas (future) skin designed more for the editorial crowd, with the editor tools more prominently placed in the skin. the core format would be the same as "default", however. skin designed with simplicity in mind -- minimal header, na...

Space Manager High Level Design - Archive of obsolete content
atespacemanager). the general algorithm in nsblockreflowstate::recoverfloats is: for each line in the block, see if it has floated blocks if floats are in the line, iterate over the floats and add each one to the space manager via the addrectregion method. the actual rect for the frame is cached in an nsfloatcache so it does not have to be recomputed. if the block has any block children, then translate the space manager to the child block's origin and update the space manager in the context for the child block, recursively. when done with the child, restore the space managers coordinates by translating by the negative of the child block's origin. the general algorithm in nsblockreflowstate::flowandplacefloat is: the region that the float currently occupies is recorded. the band of available...

Example Sticky Notes - Archive of obsolete content
ound element. --> <stylesheet src="notes.css"/> </resources> <content> <!-- this svg graphics will be added automatically around each bound element. the position of the original content is indicated by <children/> tag. --> <svg:svg width="60px" height="60px"> <svg:g fill-opacity="0.6" stroke="#ffffff" stroke-width="1px"> <svg:circle cx="25px" cy="12px" r="12" fill="#ff0000" transform="translate(0,0)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#00ff00" transform="translate(7,12)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#0000ff" transform="translate(-7,12)"/> </svg:g> </svg:svg> <children/> </content> <implementation> <!-- here and futher cdata wrappers around javascript code are not mandatory but recommended. this way you protect yourselve from < and > signs br...

How to implement a custom XUL query processor component - Archive of obsolete content
// eventually we should read the <query> to create filters return this._data; }, generateresults: function(adatasource, aref, aquery) { // preform any query and pass the data to the result set return new templateresultset(this._data); }, addbinding: function(arulenode, avar, aref, aexpr) { // add a variable binding for a particular rule, which we aren't using yet }, translateref: function(adatasource, arefstring) { // if we return null, everything stops return new templateresult(null); }, compareresults: function(aleft, aright, avar) { // -1 less, 0 ==, +1 greater var leftvalue = aleft.getbindingfor(avar); var rightvalue = aright.getbindingfor(avar); if (leftvalue < rightvalue) { return -1; } else if (leftvalue > rightvalue) ...

Building Trees - Archive of obsolete content
stead of generating content, the builder uses the cell attributes to determine what to display. the tree builder implements the nsitreeview interface, so it becomes the tree’s view—in other words, the tree’s view and the tree’s builder are the same object. when the tree is displayed, it asks the view for the contents of each cell. the builder looks at the label for the corresponding cell, translates any variables or predicates into values, and returns the value. in the example above, the first cell should display the title. the builder doesn’t compute any labels until the view asks for them. when the view requests a label for the first cell, the builder looks up the ‘http://purl.org/dc/elements/1.1/title’ predicate for the row in question and returns it. the content builder generates ...

The Joy of XUL - Archive of obsolete content
xul provides among application logic, presentation, and language text is the ease of customizing for different customers or groups of users. a developer can maintain one primary code base for their application and customize the logo and branding for each of their customers by supplying different skins. an application that is written and deployed with an english language user interface can be translated to french for the same customer. while such changes are extensive and affect most (if not all) of the application, they are also isolated from one another, enabling the core xul definition and application logic to be shared among all of the custom versions. supporting technologies there are number of other technologies introduced by mozilla that complement xul for building cross plat...

Complete - Archive of obsolete content
t. file structure in the new file structure, there is a locale directory for all the locales. each locale has its own directory there. in each locale's directory, there is an allcustom directory. this is useful when files from various components and extensions and all unpacked in the same place—it keeps each set of files separate. in the allcustom directory, the file allcustom.dtd contains the translated strings. the file contents.rdf contains registration data used by seamonkey. localizing the description firefox etc. display a description of the extension in the extensions window. the description in install.rdf is the default. for each supported locale, a description in install.properties overrides the default. a preference setting in defaults/preferences/allcustom.js makes the connection betw...

Adding Buttons - Archive of obsolete content
ton" label="cancel"/> </window> you'll notice that the cancel button was added also. the window has been given a horizontal orientation so that the two buttons appear beside each other. if you open the file in mozilla, you should get something like the image shown here. note: you should not put text labels directly in the xul file. you should use entities instead so that text can be easily translated. in the next section, we will find out how to add labels and images to a xul window. see also more button features « previousnext » ...

Adding Style Sheets - Archive of obsolete content
ome://findfile/content/findfile.xul so the style sheet file will be stored in chrome://findfile/skin/findfile.css. all the xul examples so far have actually been using a style sheet already. the second line has always been: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this line indicates that we want to use the style provided by chrome://global/skin/. in mozilla, this will be translated as the file global.css, which contains default style information for xul elements. you could leave the line out and the elements will still work, however they will look fairly plain. the style sheet applies various fonts, colors and borders to make the elements look more suitable. changing the styles however, there will be times when the default look of elements will not give the look that is de...

Introduction - Archive of obsolete content
uild an application even for only one platform. the time required to compile and debug can be lengthy. with xul, an interface can be implemented and modified quickly and easily. xul has all the advantages of other xml languages. for example xhtml or other xml languages such as mathml or svg can be inserted within it. also, text displayed with xul is easily localizable, which means that it can be translated into other languages with little effort. what kinds of user interfaces can be made with xul? xul provides the ability to create most elements found in modern graphical interfaces. some elements that can be created are: input controls such as textboxes and checkboxes toolbars with buttons or other content menus on a menu bar or pop up menus tabbed dialogs trees for hierarchical or tabula...

The Chrome URL - Archive of obsolete content
les are specified in the manifest files stored in the chrome directory. if you were to move the file messenger.jar somewhere else and update the manifest file accordingly, thunderbird will still work since it doesn't rely on its specific installed location. by using chrome urls we can leave details like this to mozilla. similarly, if the user changes their theme, the 'skin' part of the chrome url translates to a different set of files, yet the xul and scripts don't need to change. here are some more examples. note how none of the urls specify which theme or locale is used and none specify a specific directory. chrome://messenger/content/messenger.xul chrome://messenger/content/attach.js chrome://messenger/skin/icons/folder-inbox.gif chrome://messenger/locale/messenger.dtd to refer to subdirectorie...

XPCOM Interfaces - Archive of obsolete content
tself. however, there is a way in which you can call them, which we will see shortly. we can call any of the functions provided by the component as described by the interfaces it implements. for example, once we have a component, we can check if it implements nsisound, and, if so, we can play sound through it. the process of calling xpcom from a script is called xpconnect, which is a layer which translates script objects into native objects. creating xpcom objects there are three steps to calling an xpcom component. get a component get the part of the component that implements the interface that we want to use. call the function we need once you've done the first two steps, you can repeat the last step as often as necessary. let's say we want to rename a file. for this we can use the nsil...

XUL Structure - Archive of obsolete content
command. in addition, keyboard shortcuts for each command are also defined, because they may be different for each language. dtd files are used by xul files so, in general, you will have one per xul file. the locale part also contains properties files, which are similar, but are used by script files. the file browser.properties contains a few such localized strings. this structure allows you to translate mozilla or a component into a different language by just adding a new locale for that language. you don't have to change the xul code at all. in addition, another person could supply a separate package that applies a skin or locale to your content part, thus providing support for a new theme or language without having to change the original package. other packages there is a special package cal...

XUL Coding Style Guidelines - Archive of obsolete content
tes are the xul writers' notes to the localizers/translators. they are placed above the actual entity string in the format: <!-- localization note (entity.name): content --> where the <var>entity.name</var> is the entity name (id) for the string (entity value) to be localized, and the content provides helpful hints to the localizers. for example: <!-- localization note homebtn.label : do not translate the entity value "home". --> <!-- entity homebtn.label "home" --> properties files are very similar, but use the pound sign instead of <!--<var>xxxxx</var>-->: # localization note entity name : content we recognize that translation is a subset of localization even though we've consistently referred to our notes as "localization note". files not to be localized? some files live in the tree bu...

Archived Mozilla and build documentation - Archive of obsolete content
existing content this is a list of existing mozilla.org documentation. it needs to be checked, prioritized, and migrated. extension frequently asked questions this is quick set of answers to the most common issues with extension development. they are currently written with mostly firefox in mind, but most if not all should easily translate to seamonkey, thunderbird or any of the other applications. for thunderbird, you may also find the extension howto or faq pages helpful. firefox sync sync refers to a family of related components and services which provide synchronization of data between mozilla application instances. these components and services include: force rtl (this is a tem...

2006-11-10 - Archive of obsolete content
for seamonkey 1.0.5 is available now. latvian pellcheck dictionary for ff2.0 newest openoffice dictionary files for ff 2.0 spell-checker is available. trunk / 1_8 for kurdish firefox the firefox translations of the kurdish are only in trunk translating the firefox privacy policy the final and approved en-us version of privacy policy is available here and ready for localization team to translate. seamonkey 1.0.6 and 1.1 beta upcoming seamonkey 1.0.6 and 1.1 beta are both available here. discussions help about firefox 3 a discussion on how to syncronise mozilla_1_8_branch with the trunk, which tag should be used to check-in files on trunk, and when files will be pulled from trunk to create another branch (mozilla_1_9_branch?) for firefox 3. meetings none for this week. aut...

2006-11-17 - Archive of obsolete content
is uploaded to ftp.mozilla.org seamonkey 1.0.6 in russian (ru-ru) seamonkey 1.0.6 in russian (ru-ru) is uploaded to ftp.mozilla.org seamonkey 1.0.6 in czech (cs-cz) seamonkey 1.0.6 in czech (cs-cz) is uploaded to ftp.mozilla.org seamonkey 1.0.6 he-il seamonkey 1.0.6 he-il is released. seamonkey 1.0.6 in french seamonkey 1.0.6 in french (fr-fr) is released. discussions how to translate mozilla to a language called quiché how to translate mozilla to a language called quiché. how to start a localization how to start a localization po format usage discussion on how to make l10n easier due to expansion to 100 locales. quick builds for localisers (full or partial) discussion on moz-l10n-builder, which automates many of the functions required in localization process. link...

2006-11-24 - Archive of obsolete content
elease schedule for localizations beta 1 freeze for thunderbird 2 is scheduled on december 4th (en-us only). beta 2 freeze around january 4th. final release date in in early 2007. approval queue for fx 2.0.0.1 closing closing the approval queue for firefox 2.0.0.1 discussions quality of localized builds and process requirements quality of localized builds and process requirements the translate toolkit mdnto po: its current state and how to use it discussion on clarifications on translate toolkit to avoid confusion. feedback on l10n:ownership draft feedback on the l10n:ownership draft at mozilla wiki site detailed here. summary vs. live titles there seems to be a few locales that use "summary" or a translation thereof instead of "live titles" to name the ui part of microsummaries...

Building a Theme - Archive of obsolete content
rm the structure and behavior of an application ui), locale (dtd, .properties files etc that contain strings for the ui's localization), and skin (css and images that form the theme of the ui) finally, the path of a file to load. so, chrome://foo/skin/bar.png loads the file bar.png from the foo theme's skin section. when you load content using a chrome uri, firefox uses the chrome registry to translate these uris into the actual source files on disk (or in jar packages). create a chrome manifest the chrome manifest is the file that maps these chrome uris to your theme's files. for more information on chrome manifests and the properties they support, see the chrome manifest reference. open the file called chrome.manifest that you created alongside the chrome directory at the root of your ex...

VBArray.toArray - Archive of obsolete content
each successive dimension is appended to the end of the previous one. ...

Issues Arising From Arbitrary-Element hover - Archive of obsolete content
estricted by css2. any element can, in theory, be in any of the three states, and thus can be styled based on those states. this has not traditionally been the case. bare pseudo-classes the second piece of the problem comes when we consider the effects of a "bare" pseudo-class in a selector. for example: :hover {color: red;} this is equivalent to the css2 rule: *:hover {color: red;} ..which translates as "any element that is being hovered should have its foreground colored red." thus, hovering over paragraphs, tables, headings, and any other element in a document will cause text to become red. a common variant is to use a bare class and hover pseudo-class together, like this: .nav:hover {color: red;} in situations where the only instances of the class value nav are applied to hyperlinks, t...

GLSL Shaders - Game development
more about model, view, and projection transformations from the vertex processing paragraph, and you can also check out the links at the end of this article to learn more about it. both projectionmatrix and modelviewmatrix are provided by three.js and the vector is passed with the new 3d position, which results in the original cube moving 10 units along the x axis and 5 units along the z axis, translated via a shader. we can ignore the fourth parameter and leave it with the default 1.0 value; this is used to manipulate the clipping of the vertex position in the 3d space, but we don't need in our case. the texture shader code now we'll add the texture shader to the code — add the code below to the body's second <script> tag: void main() { gl_fragcolor = vec4(0.0, 0.58, 0.86, 1.0); } this ...

Tiles and tilemaps overview - Game development
re those elements are rendered on the screen). the world coordinates can be expressed in terms of tile position (row and column of the map) or in pixels across the map, depending on the game. to be able to transform world coordinates into screen coordinates, we need the coordinates of the camera, since they determine which section of the world is being displayed. ...

Compile - MDN Web Docs Glossary: Definitions of Web-related terms
is a software to execute this task. sometimes, this task is also referred to as "assembling" or "build", which typically indiciates more than just compilation is done, e.g. packaging it in a binary format. usually, a compiler transforms a higher-level language such as c or java, which humans understand, into a machine language, such as assembly, that the cpu can understand. some compilers which translate between similar level languages are called transpilers or cross-compilers, for instance to compile from typescript to javascript. those are considered productivity tools. most compilers work either ahead-of-time (aot) or just-in-time (jit). as a programmer, you usually invoke aot compilers from a command line or your ide. the most famous, "gcc" is one example. jit compilers are usually transpar...

Deserialization - MDN Web Docs Glossary: Definitions of Web-related terms
the process whereby a lower-level format (e.g. that has been transferred over a network, or stored in a data store) is translated into a readable object or other data structure. in javascript, for example, you can deserialize a json string to an object by calling the function json.parse(). learn more general knowledge serialization on wikipedia ...

High-level programming language - MDN Web Docs Glossary: Definitions of Web-related terms
unlike low-level programming languages, it may use natural language elements, or may automate (or even entirely hide) significant areas of computing systems, making the process of developing simpler and more understandable relative to a lower-level language. the amount of abstraction provided defines how "high-level" a programming language is. ...

Internationalization - MDN Web Docs Glossary: Definitions of Web-related terms
r web application to different languages, regional differences, and technical requirements for different regions and countries. internationalization is the process of architecting your web application so that it can be quickly and easily adapted to various languages and regions without much engineering effort when new languages and regions are supported. also so that a user can browse features to translate or localize the application to access all the content without breaking the layout. internationalization includes support for multiple character sets (usually via unicode), units of measure (currency, °c/°f, km/miles, etc.), date and time formats, keyboard layouts, and layout and text directions. ...

Localization - MDN Web Docs Glossary: Definitions of Web-related terms
e to a specific culture. the following are common factors to consider: language unit of measure (e.g., kilometers in europe, miles in u.s.) text direction (e.g., european languages are left-to-right, arabic right-to-left) capitalization in latin script (e.g., english uses capitals for weekdays, spanish uses lowercase) adaptation of idioms (e.g., "raining cats and dogs" makes no sense when translated literally) use of register (e.g., in japanese respectful speech differs exceptionally from casual speech) number format (e.g., 10 000,00 in germany vs. 10,000.00 in the u.s.) date format currency cultural references paper size color psychology compliance with local laws local holidays personal names learn more general knowledge localization at mozilla on mdn localization on wiki...

Serialization - MDN Web Docs Glossary: Definitions of Web-related terms
in an array buffer or file format). in javascript, for example, you can serialize an object to a json string by calling the function json.stringify(). css values are serialized by calling the function cssstyledeclaration.getpropertyvalue(). ...

Percent-encoding - MDN Web Docs Glossary: Definitions of Web-related terms
rs don't need to be encoded, though they could. ':' '/' '?' '#' '[' ']' '@' '!' '$' '&' "'" '(' ')' '*' '+' ',' ';' '=' '%' ' ' %3a %2f %3f %23 %5b %5d %40 %21 %24 %26 %27 %28 %29 %2a %2b %2c %3b %3d %25 %20 or + depending on the context, the character ' ' is translated to a '+' (like in the percent-encoding version used in an application/x-www-form-urlencoded message), or in '%20' like on urls. learn more general knowledge definition of percent-encoding in wikipedia. technical knowledge rfc 3986, section 2.1, where this encoding is defined. ...

What is a Domain Name? - Learn web development
on. how does a dns request work? as we already saw, when you want to display a webpage in your browser it's easier to type a domain name than an ip address. let's take a look at the process: type mozilla.org in your browser's location bar. your browser asks your computer if it already recognizes the ip address identified by this domain name (using a local dns cache). if it does, the name is translated to the ip address and the browser negotiates contents with the web server. end of story. if your computer does not know which ip is behind the mozilla.org name, it goes on to ask a dns server, whose job is precisely to tell your computer which ip address matches each registered domain name. now that the computer knows the requested ip address, your browser can negotiate contents with the web s...

Styling web forms - Learn web development
assistive technologies as part of the label of each form element inside the fieldset — but using a technique like the one above is fine. the legend contents will still be spoken in the same way; it is just the visual position that has changed. note: you could also use the transform property to help you with positioning your <legend>. however, when you position it with for example a transform: translatey();, it moves but leaves an ugly gap in the <fieldset> border, which is not easy to get rid of. a specific styling example let's look at a concrete example of how to style an html form. we will build a fancy-looking "postcard" contact form; see here for the finished version. if you want to follow along with this example, make a local copy of our postcard-start.html file, and follow the below ...

CSS performance optimization - Learn web development
ller, reducing the time that rendering is blocked. animating on the gpu browsers are optimized to handle css animations, and handle animating properties that do not trigger a reflow (and therefore also a repaint) very well. to improve performance, the node being animated can be moved off the main thread and onto the gpu. properties that will lead to compositing include 3d transforms (transform: translatez(), rotate3d(), etc.), animating transform and opacity, position: fixed, will-change, and filter. some elements, including <video>, <canvas> and <iframe>, are also on their own layer. when an element is promoted as a layer, also known as composited, animating transform properties is done in the gpu, resulting in improved performance, especially on mobile. will-change property the css will-chang...

Multimedia: video - Learn web development
objective: to learn about the various video formats, their impact on performance, and how to reduce video impact on overall page load time while serving the smallest video file size based on each browsers file type support. why optimize your multimedia? for the average website, 25% of bandwidth comes from video. optimizing video has the potential for very large bandwidth savings that translate into better website performance. optimizing video delivery it's best to compress all video, optimize <source> order, set autoplay, remove audio from muted video, optimize video preload, and consider streaming the video. the sections below describe each of these optimization techniques. compress all videos most video compression work compares adjacent frames within a video, with the intent of ...

Componentizing our React app - Learn web development
hree lines that render our <todo /> component are almost identical, with only one difference: the value of each prop. we can clean up our code with one of javascript's core abilities: iteration. to use iteration, we should first re-think our tasks. tasks as data each of our tasks currently contains three pieces of information: its name, whether it has been checked, and its unique id. this data translates nicely to an object. since we have more than one task, an array of objects would work well in representing this data. in src/index.js, make a new const beneath the final import, but above reactdom.render(): const data = [ { id: "todo-0", name: "eat", completed: true }, { id: "todo-1", name: "sleep", completed: false }, { id: "todo-2", name: "repeat", completed: false } ]; next, we'll pa...

Getting started with React - Learn web development
ngs we’ve learned. in react: components can import modules they need and must export themselves at the bottom of their files. component functions are named with pascalcase. you can read jsx variables by putting them between curly braces, like {so}. some jsx attributes are different than html attributes so that they don't conflict with javascript reserved words. for example, class in html translates to classname in jsx. note that multi-word attributes are camel-cased. props are written just like attributes inside component calls and are passed into components. previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list compon...

Deploying our app - Learn web development
test fails with an exit code of 1 — this is a system-level value that says "something failed". the npm run test command will use node to run all the files that are in the tests directory that end with .js. in our build script, npm run test is called, then you see the string && — this means "if the thing on the left succeeded (exited with zero), then do this thing on the right". so this translates into: if the tests pass, then build the code. you'll have to upload your new code to github, using similar commands to what you used before: git add . git commit -m ‘adding test’ git push github master in some cases you might want to test the result of the built code (since this isn't quite the original code we wrote), so the test might need to be run after the build command. you...

Mozilla accessibility architecture
erwise they do not know how to find each other. it is also useful to override these the child getters to return nothing, as we do in nsleafaccessible, nstextaccessible and other accessible implementations where we want to be sure to avoid children. returning nothing for leaf and text objects also helps speed up tree construction and traversal. 4. accessible events accessible events are dom events translated into the event mechanism of the given platform, using the enumerated event numbers listed in nsiaccessibleeventreceiver.idl. the accessibility client can find out what kind of event occurred as well as what accessible node the event occured on. table of gecko event to accessible event translation accessible documents listen for dom events on nodes within them, and consequently fire the appropri...

Gecko info for Windows accessibility vendors
mpledomdocument. here are the methods for isimpledomdocument: hresult get_url (/* [out] */ bstr *url); // location of document hresult get_title (/* [out] */ bstr *title); // from the <title> hresult get_mimetype(/* [out] */ bstr *mimetype); // for example text/html or text/plain hresult get_doctype (/* [out] */ bstr *doctype); // from the <!doctype ..> hresult get_namespaceuriforid( // translate namespace id's from isimpledomnode /* [in] */ unsigned short namespaceid, // calls into the actual namespace uri's /* [out] */ bstr *namespaceuri); hresult put_alternateviewmediatypes(/* [in] */ bstr * commaseparatedmediatypes); // for example "aural, braille" keyboard user interface and api fortunately, gecko uses the standard keyboard api's for each supported platform. for a large ...

Chrome registration
it will typically be a xul file, since xul is designed for describing the contents of windows and dialogs. the javascript files that define the user interface are also contained within the content packages, as well as most xbl binding files. locale localizable applications keep all their localized information in locale providers. this allows translators to plug in a different chrome package to translate an application without altering the rest of the source code. the two main types of localizable files are dtd files and java-style properties files. skin a skin provider is responsible for providing a complete set of files that describe the visual appearance of the chrome. typically a skin provider will provide css files and images. note: scripts (including those found in xbl) loaded from ski...

Creating Sandboxed HTTP Connections
setting up an http connection the first step in setting up an http connection from an url (stored in a string) is to create an nsiuri out of it. nsiuri is an xpcom representation of an uri, with useful methods to query and manipulate the uri. ...

Extending a Protocol
efptr<> for instances that can be cycle collected. manager pwindowglobal; - we explicitly state that pwindowglobal is our manager. parent: - these are the messages that the parent is able to recieve. note that the child doesn't need to receive any messages. this is because of "async" and "returns" forms a mozpromise. async echo(nscstring data) returns (nscstring aresult); - the "returns" here translates to a mozpromise, with a resolver that will settle a promise with the expected value. async __delete__(); - this is called when an instance is deleted. it lets you do cleanup if needed. ok, if we now try to compile this (./mach build), it will say: |manager| declaration in protocol `pecho' does not match any |manages| declaration in protocol `pwindowglobal' that's good! it means the syntax i...

ISO8601DateUtils.jsm
dateobj = iso8601dateutils.parse(datestring); to convert a date object into a date string: datestring = iso8601dateutils.create(dateobj); method overview string create(adate); date parse(adatestring); methods create creates an iso 8601 format date string, e.g. "2010-05-15t13:45:00z", from a javascript date object. string create( adate ); parameters adate a javascript date object to translate into an iso 8601 format string. return value an iso 8601 format date string. parse converts an iso 8601 format date string into a javascript date object. date parse( adatestring ); parameters adatestring an iso 8601 format date string. return value a javascript date object corresponding to the specified date string. ...

Sqlite.jsm
sm javascript code module is a promise-based wrapper around the storage/sqlite interface. sqlite.jsm offers some compelling advantages over the low-level storage xpcom interfaces: automatic statement management. sqlite.jsm will create, manage, and destroy statement instances for you. you don't need to worry about caching created statement instances, destroying them when you are done, etc. this translates to fewer lines of code to talk to sqlite. all operations are asynchronous. use of synchronous storage apis is discouraged because they block the main thread. all the functionality in sqlite.jsm is asynchronous. easier memory management. since sqlite.jsm manages statements for you, it can perform intelligent actions like purging all cached statements not in use, freeing memory in the process. t...

L10n testing with xcode
ng instructions for firefox on ios. open the client.xcodeproj file in xcode. select the client project in the left pane and choose editor > import localizations from the toolbar and select your localized xliff file. a window will then appear showing the diff between the imported xliff file and the existing resources in the project folder. click the import button. xcode will import your translated strings into the project by adding them to the project folder and replacing the existing strings. next, you need to configure the ios app simulator to run the app in your locale. choose product > scheme > edit scheme from the toolbar menu. in the edit scheme screen, select run from the left pane and then navigate to the options tab. select your language from the application language menu a...

SVN for Localizers
o it all of the files from https://svn.mozilla.org/projects/moz...om/trunk/locales/[your locale code]. note: the directory you create will be located inside the directory that you're currently in with your console (or cygwin console). also, we use https instead of http because changes can only be pushed back to the mozilla svn repository through a secure connection. open the files you want to translate with your favorite text editor. translate the content in those files, save them and check for differences by entering this command from the command-line: svn diff this command produces output with every change made to each file. it's a bit hard to read, but you can also create a diff file (aka a diff patch) use svn diff > /path/to/output/file.diff to save the output to a file. note that path...

Localization technical reviews
or more info about utf-7 in firefox, see bug 441876. more intl.properties checkpoints, cont we also check the plural rule for the locale, that the general.useragent.locale is set to the locale code, that accept-lang shows the locale code(s) (like ab, ab-cd,...) and is followed by en and en-us, and finally that intl.menuitems.insertseparatorbeforeaccesskeys = true, where "true" should be left untranslated. inspect firefox-l10n.js we ensure that there are no odd preferences, or #filter substitutions for general.useragent.locale. most locales should have the following: #filter substitution pref("general.useragent.locale", "@ab_cd@") how it all works a large part of the review process takes place before you even submit your request for a technical review. to put it simply, when we receive yo...

Creating localizable web applications
third part\n" msgstr "" in order to indent your code, you must use string concatenation. see snippet 4 above for an example of how to do this. use gettext contexts depending on context in which it is used, one english string might require two or more different translations. this is particularly true for short strings, like "file" or "log in". for instance, "log in" as a button label might be translated by a localizer as the imperative, but for a dialog title, the localizer may choose to use a different form, like gerund (much like "logging in"). gettext's context feature allows the developer to distinguish between two identical english strings and disambiguate the translation. use gettext plurals whenever you put numbers in your messages, make it possible to use different singular and plural...

Setting up the infrastructure
ly compile all locales' messages.po files to message.mo files. this is useful when a localizer submits a new version of the messages.po file. on the staging server you can also choose to set up a cronjob that will run compile-mo.sh every n minutes. this way the localizers will be able to preview their changes almost in real-time. stats-po.sh will give you a bird's-eye view on the statistics of translated, fuzzy and missing strings for each locale. create en-us locale (locale/lc_messages/) in the locale folder. create an empty filed named messages.po in the locale/lc_messages folder. create new locales by repeating steps 4 and 5 for each of them. review the english content following the web content localizability guidelines. review your code following the web applications localizability...

Writing localizable code
hange the semantics of a localized string, change the key. this will more likely be a good key name, and it will help tools to pick up that the change you do is different from just a spell fix. try not to assume grammar in composite strings splitting sentences into several keys often inadvertently presumes a grammar, a sentence structure, and such composite strings are often very difficult to translate. when a composite string is needed, try to give the translators "room to move". an example of a well used composite string is firefox's setting for visited pages: the translator can (implicitly) position the text field as he sees fit. don't use preprocessor macros the use of #if #else #endif or #expand is strongly discouraged. there are few exceptions to this rule, but in general, the localiz...

gettext
the expression n==1 ? 0 : n==2 ? 1 : 2 is evaluated to 2, and so a msgstr[2] should be used. read more about plurals in gettext at gnu.org. using context with msgctxt depending on context in which it is used, one english string might require two or more different translations. this is particularly true for short strings, like "file" or "log in". for instance, "log in" as a button label might be translated by a localizer as the imperative, but for a dialog title, the localizer may choose to use a different form, like gerund (much like "logging in"). gettext's context feature allows the developer to distinguish between two identical english strings and disambiguate the translation. in the po file, msgctxt looks like this: msgctxt "button label" msgid "log in" msgstr "" msgctxt "dialog title" msgid...

Using the viewport meta tag to control layout on mobile browsers
wser doesn't render a page at a larger size. to fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. this is especially useful on large-screen devices like the ipad. (allen pike's choosing a viewport for ipad sites has a good explanation for web developers.) for pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. for example, if your layout needs at least 500 pixels of width then you can use the following markup. when the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen: <meta name="viewport" content="width=500, initial-scale=1"> other attributes that are available are minimum-scale, maximum-scale, and user-...

Research and prep
be taken into account and given preference for what is desired in that language/locale. if you have questions about what that means, please contact milos@mozilla.com or milos on irc. rss readers and content handlers productization for rss readers and content handlers applies only to firefox desktop. your selections for default rss readers and content handlers should follow these guidelines: be translated in your language (because it makes the application unusable if it's not in your language provide for the intended user experience (e.g., minimal to no advertisements within the user experience) no more than three (if possible) choices. choosing based on popularity is fine. examples from various localizations some examples from en-us web service provider rationale g...

Emscripten
llvm bytecode (e.g. generated from c/c++ using clang, or from another language) and compiles that into javascript, which can be run on the web. important: this page provides a very brief introduction to what emscripten is. to get started with emscripten, go to the official emscripten wiki. using emscripten, you can compile c and c++ code into javascript compile any other code that can be translated into llvm bytecode into javascript. compile the c/c++ runtimes of other languages into javascript, and then run code in those other languages in an indirect way (this has been done for python and lua)! emscripten makes native code immediately available on the web: a platform that is standards-based, has numerous independent compatible implementations, and runs everywhere from pcs to ipads. w...

nss tech note3
tusageemailrecipient ...... used to encrypt s/mime emails. certusageobjectsigner ........ used to verify signatures on files of executable code, e.g. jar files. certusagestatusresponder ..... used by an ocsp responder certusageverifyca ............ a ca of any kind. each cert has a "type" and a "key usage", each of which may contain one or more valid values. each of the above seccertusages translates into a required set of cert type and key usage for the certificate itself, and into another set of required cert type and key usage for all the ca certs in the cert chain. to determine if a cert is valid for a given cert usage, it must have the the cert type and key usage required for that cert usage, and all the ca certs in the cert chain must have the cert type and key usage required for ca c...

Python binding for NSS
any error reported by nss/nspr is converted into a python exception and raised. the exact error code, error description, and often contextual error information will be present in the exception object. enumerated constants used in the nss/nspr api's are available in the python module under the exact same name as they appear in the c header files of nss/nspr. convenience functions are provided to translate between the numeric value of an enumerated constant and it's string representation and visa versa. python-nss internally supports utf-8. strings may be python str objects or python unicode objects. if a python unicode object is passed to a nss/nspr function it will be encoded as utf-8 first before being passed to nss/nspr. python-nss tries to be flexible when generating a print representation o...

sslerr.html
on a server socket, indicates a failure of one of the following: (a) to un...

Pork Tool Development
tool is used as an example; tests are in the "oink/renamer_tests" subdirectory. replacement for the "renamer" tool, a diff file is generated as the ast is traversed, using the visitor pattern. the diff file is generated using the "patcher" class. source locations ast nodes have a location associated with them; sourceloc is defined to be an integer corresponding to an string offset. this can be translated to an unboxedloc, which has a line and column offset (see renamer.cc:65). macro expansion this section refers to macro expansion when using mcpp (see installing pork). for the rename_class.cpp test, generate the file with "gcc -e -wp,-w0,-k rename_class.cpp > rename_class.cc" and run the renamer with "../renamer -rename foo bar rename_class.cc". for terminology, suppose "my_foo" --> "foo". the...

Rhino JavaScript compiler
the resulting java class files can then be loaded and executed at another time, providing a convenient method for transferring javascript, and for avoiding translation cost. note that the top-level functions available to the shell (such as print) are not available to compiled scripts when they are run outside the shell. compiler command line java org.mozilla.javascript.tools.jsc.main [options] file1.js [file2.js...] where options are: -extends java-class-name specifies that a java class extending the java class java-class-name should be generated from the incoming javascript source file. ...

Creating JavaScript jstest reftests
in test262 (they might!), contributing to test262 will allow all other javascript implementors to use your tests as well. you would like to contribute tests of an ecmascript, intl or json feature insufficiently covered by test262. at the time of this writing, mozilla imports test262 tests in to the directory js/src/tests/test262. when importing test262, the test file's in-file metadata is translated from test262 format to a format readibly by the jstest harness. if you are contributing directly to test262, you must submit the tests in the test262 format, which you can see in the test262 git repository and read about here. an update script exists in the js/src/tests directories to fetch and reformat the test262 suite, see test262-update.py. writing a new test file please read the high...

SpiderMonkey Internals
division symbol or the start of a regular expression. the compiler attempts no error recovery; it bails out on the first error. the emitter does some constant folding and a few codegen optimizations; about the fanciest thing it does is to attach source notes to the script for the decompiler's benefit. the decompiler implements function.tosource(), which reconstructs a function's source code. it translates postfix bytecode into infix source by consulting a separate byte-sized code, called source notes, to disambiguate bytecodes that result from more than one grammatical production. garbage collector the gc is a mark-and-sweep, non-conservative (exact) collector. it is used to hold js objects and string descriptors (jsstring), but not string bytes. it runs automatically only when maxbytes (as pas...

JS_ConvertArguments
variables for optional parameters must already be initialized, because if an optional parameter is not in argv, js_convertarguments does not modify the corresponding variable. the variables do not need to be rooted. (if conversion creates a new gc thing, the corresponding jsval is written back to argv, which is rooted.) description js_convertarguments provides a convenient way to translate a series of js values into their corresponding js types with a single function call. it saves you from having to write separate tests and elaborate if...else statements in your function code to retrieve and translate multiple js values for use with your own functions. cx is the context for the call. argc indicates the number of js values you are passing in for conversion. argv is a pointer to th...

JS_PushArguments
vals. there must be one argument for each argument described in format. ap va_list (in js_pushargumentsva) the list of arguments to be converted to jsvals. there must be one argument for each argument described in format. the type va_list is a standard feature of the c programming language. it is defined in <stdarg.h>. description js_pusharguments provides a convenient way to translate a series of native c/c++ values to jsvals with a single function call. cx is the context for the call. markp points to a void * to hold the internally allocated stack frame pointer to pass back to js_poparguments. format is a sequential character array, where each element of the array indicates the js type into which to convert the next c/c++ argument. format can contain one or more instances of ...

JSAPI reference
ons to throw and catch javascript exceptions: js::createerror added in spidermonkey 38 js_isexceptionpending js_getpendingexception js_setpendingexception js_clearpendingexception js_throwstopiteration added in spidermonkey 1.8 js_isstopiteration added in spidermonkey 31 typedef jsexceptionstate js_saveexceptionstate js_restoreexceptionstate js_dropexceptionstate these functions translate errors into exceptions and vice versa: js_reportpendingexception js_errorfromexception js_throwreportederror obsolete since jsapi 29 values and types typedef jsval js::value js::value constructors: js::nullvalue added in spidermonkey 24 js::undefinedvalue added in spidermonkey 24 js::booleanvalue added in spidermonkey 24 js::truevalue added in spidermonkey 24 js::falseval...

Shell global objects
le function has been loaded directly from the cache. this function throws an error if fn is not a validated asm.js module. isasmjsfunction(fn) returns whether the given value is a nested function in an asm.js module that has been both compile- and link-time validated. wasmissupported() returns a boolean indicating whether webassembly is supported on the current device. wasmtexttobinary(str) translates the given text wasm module into its binary encoding. wasmbinarytotext(bin) translates binary encoding to text format wasmextractcode(module) extracts generated machine code from webassembly.module. islazyfunction(fun) true if fun is a lazy jsfunction. isrelazifiablefunction(fun) ture if fun is a jsfunction with a relazifiable jsscript. enableshellallocationmetadatabuilder() use shellal...

Feed content access API
edresult that describes a feed; its doc property is an nsifeed that contains all the feed data. to get the title of the feed, you look at the feed.title property. the title is an nsifeedtextconstruct that can represent the text in various formats; we get its text property to fetch the feed's title as html-encoded text. we could, alternatively, use its plaintext() method to get a copy of the title translated into plain text. we then scan the array of items in the feed by looking at the feed.items nsiarray. this array contains nsifeedentry objects that describe each feed item. we build the contents of the document by looking at the title, link, summary, and content properties for each item. the full url of the link is retrieved using the link's resolve() method. to initialize a fetch of the feed, we ...

Introduction to XPCOM for the DOM
compiler turns the idl methods and attributes into c++ functions according to the following rules: the methods of the interface keep the same name in c++ . however in idl we have to use the so-called "intercaps" model. that means that the first letter is lower-cased, and the other letters that begin a new word are upper-cased. for example, in idl we'd write getelementbyid, which in c++ would be translated to getelementbyid. ns_imethod is a macro that basically means "virtual nsresult". the argument list and return type are turned into correct c++ types according to rules not described here. the attributes of the interface become two functions: a getter, and a setter. in our example, since the attribute is declared as read-only, only a getter is defined: getneat. the argument is a pointer to an ...

XPCShell Reference
p() for the nsixpconnect interface for more information. version(newversion) version() returns the javascript engine version number. if you pass a number to it, it will set the version number (and return the old version number). see the above documentation on the -v command-line argument for more information. quit(exitcode) quit() exits the shell. you can specify arguments that will get translated to an exit code. quit(5) will exit xpcshell with a result code of 5. original document information author: david bradley <dbradley@netscape.com> last updated date: 17 march 2003 copyright information: portions of this content are © 1998–2008 by individual mozilla.org contributors; content available under a creative commons license. ...

nsIDocShell
channelisunsafe boolean find out if the currently loaded document came from a suspicious channel (such as a jar channel where the server-returned content type is not a known jar type). read only. charset string the converter to use when reading the document's data. in mozilla code, all text is encoded as unicode. when reading a document, a converter is used to translate the text from its original format into unicode. this attribute lets you: see what converter was used when retrieving the document's data. override that character set for documents for which the specified fallback or auto-detected character set is incorrect. reading this value reports the encoding that was used when loading the data into the document. setting this attribute...

nsIProtocolHandler
andler. nsichannel newchannel( in nsiuri auri ); parameters auri the uri for which to construct a channel. return value return the newly constructed channel. newuri() makes a uri object that is suitable for loading by this protocol, where the uri string is given as an utf-8 string. the caller may provide the charset from which the uri string originated, so that the uri string can be translated back to that charset (if necessary) before communicating with, for example, the origin server of the uri string. (many servers do not support utf-8 iris at the present time, so we must be careful about tracking the native charset of the origin server.) nsiuri newuri( in autf8string aspec, in string aorigincharset, in nsiuri abaseuri ); parameters aspec the uri string in utf-8 encodi...

nsIMsgCloudFileProvider
get the proper credentials for starting uploads. void createexistingaccount(in nsirequestobserver acallback); parameters acallback the nsirequestobserver for monitoring the start and stop states of the creation operation. providerurlforerror() for an error code, for example uploadwouldexceedquota, a provider might have a url with information on how to deal with that error. this function translates those error codes into those urls. if the provider has no appropriate url for the error, the method returns the empty string. void providerurlforerror(in unsigned long aerror); parameters aerror an error code to be translated into a url. ...

Mail and RDF
asource. in the example of mail folders, each folder datasource first registers itself with the mail session as a nsifolderlistener because it wants information about when a folder changes. each template registers itself as an rdf observer. when a folder's contents or properties change, it tells the mail session to notify the folder listeners that the data has changed. the folder datasource then translates these property changes into onassert() or onunassert() calls to the observers. the calling chain essentially looks like this: registration: folder datasource registers itself with the mail session as a folder listener rdf template registers itself with the datasource as a content observer. notification: folder data changes. folder notifies mail session that it's data changed. mail s...

Add to iPhoto
es handle memory management, dumping cftype objects to the console, comparing cftype values, and so forth. we'll be using a number of these methods, but for brevity's sake, since these are generally simple declarations, let's look at only the cfrelease() and cfretain() declarations. ...

Using COM from js-ctypes
b test.cpp vtable needs vtable description here. the order of the vtable is very critical. when used from c or js-ctypes, the order of the vtable methods should match the order of the c++ vtable. __stdcall and __cdecl needs __stdcall and __cdecl (callback_abi) description here. call by reference needs c++ reference (&) and c pointer (*) description here. converted c code now we can translate whole code into c syntax. #include <sapi.h> int main(void) { if (succeeded(coinitialize(null))) { struct ispvoice* pvoice = null; hresult hr = cocreateinstance(&clsid_spvoice, null, clsctx_all, &iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->lpvtbl->speak(pvoice, l"hello, firefox!", 0, null);...

Using Objective-C from js-ctypes
ing = (id)objc_getclass("nsstring"); sel initwithcstring_encoding = sel_registername("initwithcstring:encoding:"); int nsutf8stringencoding = 4; id tmp = objc_msgsend(nsstring, alloc); id text = objc_msgsend(tmp, initwithcstring_encoding, "hello, firefox!", nsutf8stringencoding); note that you need to release this allocated nsstring instance. converted c code now we can translate our whole code into c syntax. #include <objc/objc.h> #include <objc/runtime.h> #include <objc/message.h> int main(void) { // nsspeechsynthesizer* synth = [[nsspeechsynthesizer alloc] initwithvoice: nil]; id nsspeechsynthesizer = (id)objc_getclass("nsspeechsynthesizer"); sel alloc = sel_registername("alloc"); sel initwithvoice = sel_registername("initwithvoice:"); id tmp = objc_msgsend...

Standard OS Libraries
orefoundation js-ctypes snippets that can be copied and pasted to scratchpad cocoa see using objective-c from js-ctypes for more info. ...

Mozilla
will then compare them and verify whether they produce the same bitmap. creating sandboxed http connections starting with gecko 1.8.1 (firefox 2), it is possible to create sandboxed http connections which don't affect the user's cookies. this article will cover the basics of doing http connections from xpcom javascript, and should easily translate to c++ xpcom. debugging debugging a project as large as mozilla can be a daunting task. fortunately, over the years, mozilla developers have come up with not just technologies and features to help you debug code, but have devised tips and techniques that can help too. also available are assorted tools that you can use when debugging. ...

Debugger.Memory - Firefox Developer Tools
istics determine how long to retain the uncompressed code. bytecode. this is spidermonkey’s parsed representation of javascript. bytecode can be interpreted directly, or used as input to a just-in-time compiler. source is parsed into bytecode on demand; functions that are never called are never parsed. machine code. spidermonkey includes several just-in-time compilers, each of which translates javascript source or bytecode to machine code. heuristics determine which code to compile, and which compiler to use. machine code may be dropped in response to memory pressure, and regenerated as needed. furthermore, spidermonkey tracks which types of values have appeared in variables and object properties. this type information can be large. in a census, all the various forms of javascrip...

Debugger.Source - Firefox Developer Tools
r a similar function isnot considered to be loaded from a url; the url accessor on debugger.source instances for such sources should return undefined.) if the instance refers to webassembly code, the url of the script that called new webassembly.module with the string "> wasm" appended. sourcemapurl if the instance refers to javascript source, if this source was produced by a minimizer or translated from some other language, and we know the url of a source map document relating the source positions in this source to the corresponding source positions in the original source, then this property’s value is that url. otherwise, this is null. (on the web, the translator may provide the source map url in a specially formatted comment in the javascript source code, or via a header in the http ...

Debugger-API - Firefox Developer Tools
ugger api (which all follow some general conventions): a debugger.object represents a debuggee object, offering a reflection-oriented api that protects the debugger from accidentally invoking getters, setters, proxy traps, and so on. a debugger.script represents a block of javascript code—either a function body or a top-level script. given a debugger.script, one can set breakpoints, translate between source positions and bytecode offsets (a deviation from the “source level” design principle), and find other static characteristics of the code. a debugger.frame represents a running stack frame. you can use these to walk the stack and find each frame’s script and environment. you can also set onstep and onpop handlers on frames. a debugger.environment represents an envi...

Paint Flashing Tool - Firefox Developer Tools
you should see that the margin-left version triggers a series of repaints as the element moves, while the transform version only causes repaints in the start and end positions. why? well, when you use transform, the browser creates a separate layer for the element. so when the...

Call Tree - Firefox Developer Tools
he results in a table. each row represents a function in which at least one sample was taken, and the rows are ordered by the number of samples taken while in that function, highest to lowest. samples is the number of samples that were taken when we were executing this particular function, including its children (the other functions called by this particular function). total time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording. these numbers should roughly be the same as the number of samples. total cost is that number as a percentage of the total number of samples in the selected portion of the recording. self time is calculated as the time spent in that particular function, excluding its children. this comes from ...

Responsive Design Mode - Firefox Developer Tools
ixel ratio) - beginning with firefox 68, the dpr is no longer editable; create a custom device in order to change the dpr throttling - a drop-down list where you can select the connection throttling to apply, for example 2g, 3g, or lte enable/disable touch simulation - toggles whether or not responsive design mode simulates touch events. while touch event simulation is enabled, mouse events are translated into touch events; this includes (starting in firefox 79) translating a mouse-drag event into a touch-drag event. (note that when touch simulation is enabled, this toolbar icon is blue; when simulation is disabled, it is black. on the right end of the screen, three buttons allow you to: camera button - take a screenshot settings button - opens the rdm settings menu close button - closes r...

Animation.commitStyles() - Web APIs
animation has been removed. it will cause the end styling state to be written to the element being animated, in the form of properties inside a style attribute. syntax animation.commitstyles(); parameters none. return value none. examples const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); }); specifications specification status comment web animationsthe definition of 'commitstyles()' in that specification. working draft ...

Animation.onremove - Web APIs
mation.onremove; animation.onremove = removehandler; value a function to be called to handle the remove event, or null if no remove event handler is set. examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves. the event handler sets up an animation that...

Animation.pause() - Web APIs
le animation.pause() is used many times in the alice in web animations api land growing/shrinking alice game, largely because animations created with the element.animate() method immediately start playing and must be paused manually if you want to avoid that: // animation of the cupcake slowly getting eaten up var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bottle that reads "drink m...

Animation.persist() - Web APIs
removed due to the browser's automatically removing filling animations behavior. syntax animation.persist(); parameters none. return value none. examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves. the event handler sets up an animation that...

Animation.play() - Web APIs
value undefined example in the growing/shrinking alice game example, clicking or tapping the cake causes alice's growing animation (alicechange) to play forward, causing her to get bigger, as well as triggering the cake's animation. two animation.play()s, one eventlistener: // the cake has its own animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // pause the cake's animation so it doesn't play immediately. nommingcake.pause(); // this function will play when ever a user clicks or taps var growalice = function() { // play alice's animation. alicechange.play(); // play the cake'...

Animation.replaceState - Web APIs
havior. persisted: the animation has been explicitly persisted by invoking animation.persist() on it. removed: the animation has been explicitly removed. examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves. the event handler sets up an animation that...

AudioTrack.kind - Web APIs
s are: "alternative" a potential alternative to the main track, such as a different audio take or a version of the soundtrack with only the music and no dialogue. "descriptions" an audio track providing audible descriptions of the action depicted in a video track. "main" the primary audio track. "main-desc" the primary audio track with audio descriptions mixed into it. "translation" a translated version of the primary audio track. "commentary" an audio track containing a commentary. this might be used to contain the director's commentary track on a movie, for example. "" (empty string) the track doesn't have an explicit kind, or the kind provided by the track's metadata isn't recognized by the user agent. specifications specification status comment htm...

AudioTrack.language - Web APIs
g of the primary language used in the audio track, or an empty string ("") if the language is not specified or known, or if the track doesn't contain speech. for example, if the primary language used in the track is united states english, this value would be "en-us". for brazilian portuguese, the value would be "pt-br". example this example locates all of a media element's primary language and translated audio tracks and returns a list of objects containing each of those tracks' id, kind, and language. this could then be used to build a user interface for selecting the language the user would like to listen to while watching a movie, for example. function getavailablelanguages(el) { var tracklist = []; const wantedkinds = [ "main", "translation" ]; el.audiotracks.foreach(function...

CSSNumericValue - Web APIs
face of the css typed object model api represents operations that all numeric values can perform. interfaces based on cssnumericvalue below is a list of interfaces based on the cssnumericvalue interface. cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssnumericarray cssperspective csspositionvalue cssrotate cssskew cssskeyx cssskeyw csstranslate cssunitvalue properties none. event handlers no methods cssnumericvalue.add adds a supplied number to the cssnumericvalue. cssnumericvalue.sub subtracts a supplied number from the cssnumericvalue. cssnumericvalue.mul multiplies the cssnumericvalue by the supplied value. cssnumericvalue.div divides the cssnumericvalue by the supplied value. cssnumericvalue.min returns the minim...

CSSStyleValue.parse() - Web APIs
tring containing one or more values to apply to the provided property. return value a cssstylevalue object containing the first supplied value. example the code below parses a set of declarations for the transform property. the second code block shows the structure of the returned object as it would be rendered in a developer tools console. const css = cssstylevalue.parse( 'transform', 'translate3d(10px,10px,0) scale(0.5)'); csstransformvalue {0: csstranslate, 1: cssscale, length: 2, is2d: false} specifications specification status comment css typed om level 1the definition of 'parse()' in that specification. working draft initial definition. ...

CSS Object Model (CSSOM) - Web APIs
managing screen orientation specifications specification status ...

CSS Typed Object Model API - Web APIs
, by representing them with specialized js objects that can be manipulated and understood more easily and more reliably than string parsing and concatenation. this is easier for authors (for example, numeric values are reflected with actual js numbers, and have unit-aware mathematical operations defined for them). it is also generally faster, as values can be directly manipulated and then cheaply translated back into underlying values without having to both build and parse strings of css. css typed om both allows for the performant manipulation of values assigned to css properties while enabling maintainable code that is both more understand and easier to write. interfaces cssstylevalue the cssstylevalue interface of the the css typed object model api is the base class of all css values accessi...

CanvasRenderingContext2D.setTransform() - Web APIs
note: see also the transform() method; instead of overriding the current transform matrix, it multiplies it with a given one. ...

CanvasRenderingContext2D.transform() - Web APIs
note: see also the settransform() method, which resets the current transform to the identity matrix and then invokes transform(). syntax void ctx.transform(a, b, c, d, e, f); the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters a (m11) horizontal scaling. ...

CanvasRenderingContext2D - Web APIs
nsform retrieves the current transformation matrix being applied to the context. canvasrenderingcontext2d.rotate() adds a rotation to the transformation matrix. the angle argument represents a clockwise rotation angle and is expressed in radians. canvasrenderingcontext2d.scale() adds a scaling transformation to the canvas units by x horizontally and by y vertically. canvasrenderingcontext2d.translate() adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid. canvasrenderingcontext2d.transform() multiplies the current transformation matrix with the matrix described by its arguments. canvasrenderingcontext2d.settransform() resets the current transform to the identity matrix, and then invokes the transform() method with the same argum...

Compositing example - Web APIs
"rgba(0,0,0,0)"); gradient.addcolorstop(0.7, "rgba("+color.r+","+color.g+","+color.b+",1)"); gradient.addcolorstop(1, "rgba(255,255,255,1)"); ctx.beginpath(); ctx.moveto(oleft + halfwidth, otop); ctx.lineto(oleft + halfwidth, otop + halfwidth); ctx.lineto(oleft + halfwidth + 6, otop); ctx.fillstyle = gradient; ctx.fill(); ctx.translate(oleft + halfwidth, otop + halfwidth); ctx.rotate(rotate); ctx.translate(-(oleft + halfwidth), -(otop + halfwidth)); } ctx.beginpath(); ctx.fillstyle = "#00f"; ctx.fillrect(15,15,30,30) ctx.fill(); return ctx.canvas; }; // hsv (1978) = h: hue / s: saturation / v: value color = {}; color.hsv_rgb = function (o) { var h = o.h / 360, s = o.s / 100,...

Drawing shapes with canvas - Web APIs
fault grid overlayed. normally 1 unit in the grid corresponds to 1 pixel on the canvas. the origin of this grid is positioned in the top left corner at coordinate (0,0). all elements are placed relative to this origin. so the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y). later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it, but for now we'll stick to the default. drawing rectangles unlike svg, <canvas> only supports two primitive shapes: rectangles and paths (lists of points connected by lines). all other shapes must be created by combining one or more paths. luckily, we have an assortment of path drawing functions which make it possible to com...

DOMMatrix - Web APIs
alent to the dot product a⋅b, where matrix a is the source matrix and b is the matrix given as an input to the method. returns itself. dommatrix.premultiplyself() modifies the matrix by pre-multiplying it with the specified dommatrix. this is equivalent to the dot product b⋅a, where matrix a is the source matrix and b is the matrix given as an input to the method. returns itself. dommatrix.translateself() modifies the matrix by applying the specified vector. the default vector is [0, 0, 0]. returns itself. dommatrix.scalenonuniformself() modifies the matrix by applying the specified scaling on the x, y, and z axes, centered at the given origin. by default, the y and z axes' scaling factors are both 1, but the scaling factor for x must be specified. the default origin is (0, 0, 0). retur...

DOMMatrixReadOnly - Web APIs
if any of the elements in the matrix are non-finite (even if, in the case of a 2d matrix, the non-finite values are in elements not used by the 2d matrix representation). dommatrixreadonly.transformpoint() transforms the specified point using the matrix, returning a new dompoint object containing the transformed point. neither the matrix nor the original point are altered. dommatrixreadonly.translate() returns a new dommatrix containing a matrix calculated by translating the source matrix using the specified vector. by default, the vector is (0, 0, 0). the original matrix is not changed. static methods this interface inherits methods from dommatrixreadonly. fromfloat32array() creates a new mutable dommatrix object given an array of single-precision (32-bit) floating-point values. if t...

Element.releasePointerCapture() - Web APIs
recommendation non-stable version. pointer eventsthe definition ...

Element.setPointerCapture() - Web APIs
recommendation non-stable version. pointer eventsthe definition ...

HTMLElement: animationcancel event - Web APIs
s="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeven...

HTMLElement: animationiteration event - Web APIs
s="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeven...

HTMLElement: animationstart event - Web APIs
s="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeven...

KeyboardEvent.code - Web APIs
tion.x = 399; } else if (position.x > 399) { position.x = 0; } if (position.y < 0) { position.y = 399; } else if (position.y > 399) { position.y = 0; } } the refresh() function handles applying the rotation and position by using an svg transform. function refresh() { let x = position.x - (shipsize.width/2); let y = position.y - (shipsize.height/2); let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; spaceship.setattribute("transform", transform); } finally, the addeventlistener() method is used to start listening for keydown events, acting on each key by updating the ship position and rotation angle, then calling refresh() to draw the ship at its new position and angle. window.addeventlistener("keydown", function(event) { if (event.

KeyframeEffect.KeyframeEffect() - Web APIs
ance. its parameter is as follows: sourcekeyframes a keyframeeffect object that you want to clone. examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment web animations level 2the definition of 'keyframeeffectoptions.iterationcomposite' in that specification. draft added the iterationcomposite option. web animationsth...

KeyframeEffect.target - Web APIs
ns #elementtoanimate keyframes.target; // assigns keyframes a new target keyframes.target = newtargetelement; value an element, csspseudoelement, or null. examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: var whiterabbit = document.getelementbyid("rabbit"); var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // returns <div id=​"rabbit">​click the rabbit's ears!​</div>​ rabbitdownkeyframes.target; specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification. working draft editor's draft. ...

KeyframeEffect - Web APIs
es that make up this effect. animationeffect.updatetiming() updates the specified timing properties. examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification. working draft initial definition ...

KeyframeEffectOptions - Web APIs
frame to keyframe, and how to behave when the animation begins and ends. properties composite optional determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. defaults to replace. add dictates an additive effect, where each successive iteration builds on the last. for instance with transform, a translatex(-200px) would not override an earlier rotate(20deg) value but result in translatex(-200px) rotate(20deg). accumulate is similar but a little smarter: blur(2) and blur(5) become blur(7), not blur(2) blur(5). replace overwrites the previous value with the new one. iterationcomposite optional determines how values build from iteration to iteration in this animation. can be set to accumu...

getBBox() - Web APIs
; return value the returned value is a svgrect object, which defines the bounding box. this value is irrespective of any transformation attribute applied to it or the parent elements. ...

SVGMatrix - Web APIs
d component of the matrix. svgmatrix.e a float representing the e component of the matrix. svgmatrix.f a float representing the f component of the matrix. methods svgmatrix.multiply() performs matrix multiplication. this matrix is post-multiplied by another matrix, returning the resulting new matrix as svgmatrix. svgmatrix.inverse() returns the inverse matrix as svgmatrix. svgmatrix.translate() post-multiplies a translation transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.scale() post-multiplies a uniform scale transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.scalenonuniform() post-multiplies a non-uniform scale transformation on the current matrix and returns the resulting matrix as svgmatr...

StylePropertyMapReadOnly - Web APIs
stylepropertymapreadonly object. examples we have to have an element to observe: <p> this is a paragraph with some text. we can add some css, or not. the style map will include all the default and inherted css property values. </p> <dl id="output"></dl> we add a touch of css with a custom property to better demonstrate the output: p { --somevariable: 1.6em; --someothervariable: translatex(33vw); --anothervariable: 42; line-height: var(--somevariable); } we add javascript to grab our paragraph and return back a definition list of all the default css property values using computedstylemap(). // get the element const myelement = document.queryselector('p'); // get the <dl> we'll be populating const styleslist = document.queryselector('#output'); // retrieve all computed st...

VisualViewport - Web APIs
xed we need to offset it by the visual // viewport's offset from the layout viewport origin. var offsetleft = viewport.offsetleft; var offsettop = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead. ...

WEBGL_debug_shaders - Web APIs
the webgl_debug_shaders extension is part of the webgl api and exposes a method to debug shaders from privileged contexts. this extension is not directly available to web sites as the way of how the shader is translated may uncover personally-identifiable information to the web page about the kind of graphics card in the user's computer. webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: depending on the privacy settings of the browser, this extension might only be available to privileged contexts. this extension is available to both, webgl1 and webgl2 contexts. methods webgl_debug_shaders.gettranslatedshadersource() returns the translated shader source. specificatio...

Clearing with colors - Web APIs
gl state variables (such as the clear color). there are many "dials" and "switches" that affect drawing with webgl. the clear color is just the first of many you will get to know. this is why webgl/opengl is often called a state machine. by tweaking those "dials" and "switches" you can modify the internal state of the webgl machine, which in turn changes how input (in this case, a clear command) translates into output (in this case, all pixels are set to green). finally, we note that color in webgl is usually in rgba format, that is four numerical components for red, green, blue and alpha (opacity). therefore, clearcolor() takes four arguments. <p>a very simple webgl program that shows some color.</p> <!-- text within a canvas element is displayed only if canvas is not supported. --> <canv...

Compressed texture formats - Web APIs
exture format extension must first be enabled. usage unless otherwise specified, this article applies to both webgl 1 and 2 contexts. if supported, textures can be stored in a compressed format in video memory. this allows for additional detail while limiting the added video memory necessary. textures are uncompressed on the fly when being accessed by a shader. note that this advantage doesn't translate to network bandwidth: while the formats are better than uncompressed data, they are in general far worse than standard image formats such as png and jpg. as compressed textures require hardware support, therefore no specific formats are required by webgl; instead, a context can make different formats available, depending on hardware support. this site shows which formats are supported in the use...

Adding 2D content to a WebGL context - Web APIs
ve the result. mat4.perspective(projectionmatrix, fieldofview, aspect, znear, zfar); // set the drawing position to the "identity" point, which is // the center of the scene. const modelviewmatrix = mat4.create(); // now move the drawing position a bit to where we want to // start drawing the square. mat4.translate(modelviewmatrix, // destination matrix modelviewmatrix, // matrix to translate [-0.0, 0.0, -6.0]); // amount to translate // tell webgl how to pull out the positions from the position // buffer into the vertexposition attribute. { const numcomponents = 2; // pull out 2 values per iteration const type = gl.float; // the data in the buff...

WebGL tutorial - Web APIs
on the canvas we use a javascript context object, which creates graphics on the fly. in this tutorial getting started with webgl how to set up a webgl context. adding 2d content to a webgl context how to render simple flat shapes using webgl. using shaders to apply color in webgl demonstrates how to add color to shapes using shaders. animating objects with webgl shows how to rotate and translate objects to create simple animations. creating 3d objects using webgl shows how to create and animate a 3d object (in this case, a cube). using textures in webgl demonstrates how to map textures onto the faces of an object. lighting in webgl how to simulate lighting effects in your webgl context. animating textures in webgl shows how to animate textures; in this case, by mapping an ogg vid...

Introduction to WebRTC protocols - Web APIs
lient will send a request to a stun server on the internet who will reply with the client’s public address and whether or not the client is accessible behind the router’s nat. nat network address translation (nat) is used to give your device a public ip address. a router will have a public ip address and every device connected to the router will have a private ip address. requests will be translated from the device’s private ip to the router’s public ip with a unique port. that way you don’t need a unique public ip for each device but can still be discovered on the internet. some routers will have restrictions on who can connect to devices on the network. this can mean that even though we have the public ip address found by the stun server, not anyone can create a connection. in this...

Writing a WebSocket server in C# - Web APIs
tect a get from the client. note that this will block until the first 3 bytes of a message are available. alternative solutions should be investigated for production environments. using system.text; using system.text.regularexpressions; while(client.available < 3) { // wait for enough bytes to be available } byte[] bytes = new byte[client.available]; stream.read(bytes, 0, bytes.length); //translate bytes of request to string string data = encoding.utf8.getstring(bytes); if (regex.ismatch(data, "^get")) { } else { } the response is easy to build, but might be a little bit difficult to understand. the full explanation of the server handshake can be found in rfc 6455, section 4.2.2. for our purposes, we'll just build a simple response. you must: obtain the value of the "sec-websocket-k...

Web Video Text Tracks Format (WebVTT) - Web APIs
ake a comment across more than one line this way. example 6 - common comment usage webvtt - translation of that film i like note this translation was done by kyle so that some friends can watch it with their parents. 1 00:02:15.000 --> 00:02:20.000 - ta en kopp varmt te. - det är inte varmt. 2 00:02:20.000 --> 00:02:25.000 - har en kopp te. - det smakar som te. note this last line may not translate well. 3 00:02:25.000 --> 00:02:30.000 - ta en kopp styling webvtt cues you can style webvtt cues by looking for elements which match the ::cue pseudo-element. within site css video::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are styled to use a gray linear gradient as thei...

Geometry and reference spaces in WebXR - Web APIs
ng about the position of the headset or, more crucially, its coordinate system. but the controller still needs a way to report its position to your app. thus, it has its own coordinate system. this is a reference space which is provided to your app when input events occur. this reference space internally knows how to map the coordinates of the controller to the headset's coordinates, so webxr can translate coordinates back and forth for you. once created, an xrreferencespace guarantees a certain level of support for motion and orientation tracking, and provides a mechanism for obtaining an xrviewerpose from which you can get a matrix which represents the position and facing direction of the space relative to the world space, if the space represents a viewer such as the user's headset, an observer'...

Web audio spatialization basics - Web APIs
= panner.orientationz.value*math.cos(q) - panner.orientationy.value*math.sin(q); y = panner.orientationz.value*math.sin(q) + panner.orientationy.value*math.cos(q); x = panner.orientationx.value; panner.orientationx.value = x; panner.orientationy.value = y; panner.orientationz.value = z; break; } boombox.style.transform = 'translatex('+transform.xaxis+'px) translatey('+transform.yaxis+'px) scale('+transform.zaxis+') rotatey('+transform.rotatey+'deg) rotatex('+transform.rotatex+'deg)'; const move = prevmove || {}; move.frameid = requestanimationframe(() => moveboombox(direction, move)); return move; } wiring up our controls wiring up out control buttons is comparatively simple — now we can listen for a mouse eve...

Window.requestAnimationFrame() - Web APIs
ent's final position is 200px (0.1 * 2000) to the right of its initial position. const element = document.getelementbyid('some-element-you-want-to-animate'); let start; function step(timestamp) { if (start === undefined) start = timestamp; const elapsed = timestamp - start; // `math.min()` is used here to make sure that the element stops at exactly 200px. element.style.transform = 'translatex(' + math.min(0.1 * elapsed, 200) + 'px)'; if (elapsed < 2000) { // stop the animation after 2 seconds window.requestanimationframe(step); } } window.requestanimationframe(step); notes edge versions below 17 and internet explorer do not reliably fire requestanimationframe before the paint cycle. specification specification status comment html living stan...

XRRigidTransform() - Web APIs
syntax let xrrigidtransform = new xrrigidtransform(position, orientation); parameters position optional an object conforming to dompointinit which specifies the coordinates at which the point or object is located. these dimensions are specified in meters. ...

XRRigidTransform.matrix - Web APIs
syntax let matrix = xrrigidtransform.matrix; value a float32array containing 16 entries which represents the 4x4 transform matrix which is described by the position and orientation properties. ...

ARIA: article role - Accessibility
his particular article represents. inside an application or other widget that causes screen readers and other assistive technologies to be in pass-through mode, an article can be used to indicate that these should switch back to treating the enclosed content as regular web content. instead of including the article role on a non-semantic element, the <article> element should be used. user agents translate this to the appropriate accessibility information just like the article role. using the <article> element also helps search engines better discover the structure of a page. examples of appropriate uses of the role="article", or preferably <article>, include blog posts, forum posts, a comment to a forum or blog post, a comment to a comment to a forum or blog post, any an item in a social media fee...

An overview of accessible web applications and widgets - Accessibility
h as sliders, menu bars, tabs, and dialogs. properties describe characteristics of these widgets, such as if they are draggable, have a required element, or have a popup associated with them. states describe the current interaction state of an element, informing the assistive technology if it is busy, disabled, selected, or hidden. aria attributes are interpreted automatically by the browser and translated to the operating system's native accessibility apis. so an element with role="slider" will be controlled in the same way as a native slider is controlled on the operating system. this provides a much more consistent user experience than was possible in the previous generation of web applications, since assistive technology users can apply all of their knowledge of how desktop applications work ...

Web Accessibility: Understanding Colors and Luminance - Accessibility
the use of hsl color values rather than rgb values is css color module 3 (see section 4.2.4), the rationale being that rgb is hardware-oriented, reflecting the use of crts, and that rgb is non-intuitive. that said, hsl colors incorporate lightness, not luminance, and this is a significant consideration. note that in that same section of the css color module 3, there are algorigthms available to translate the hsl to rgb. newer technologies, such as opengl and direct3d incorporate support for the srgb gamma curve, although some articles for opengl reference use of rgba rather than srgb. webgl is usually in the rgba format; see an example of how it is used in "clearing with colors". where accessibility is concerned, however, standards and guidelines are currently written predominantly using the ...

font-weight - CSS: Cascading Style Sheets
commonly used values correspond to common weight names, as described in the common weight name mapping section below. in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts. css fonts level 4 extends the syntax to accept any number between 1 and 1000, inclusive, and introduces variable fonts, which can make use of this much finer-grained range of font weights. common weight name mapping the numerical values 100 to 900 roughly correspond to the following common weight names: value common weight name ...

@keyframes - CSS: Cascading Style Sheets
the @keyframes css at-rule controls the intermediate steps in a css animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. this gives more control over the intermediate steps of the animation sequence than transitions. syntax @keyframes slidein { from { transform: translatex(0%); } to { transform: translatex(100%); } } values <custom-ident> a name identifying the keyframe list. this must match the identifier production in css syntax. from a starting offset of 0%. to an ending offset of 100%. <percentage> a percentage of the time through the animation sequence at which the specified keyframe should occur. description javascript can access the @keyframes at-rule with the css object model interface csskeyframesrule. to use ke...

-webkit-transform-2d - CSS: Cascading Style Sheets
yntax -webkit-transform-2d is a boolean css media feature whose value is true if the browser supports -webkit prefixed css 2d transforms. values true the browser supports the 2d css transforms with the -webkit prefix. false the 2d css transforms prefixed with -webkit are not supported by the browser. examples basic example @media (-webkit-transform-2d) { div { -webkit-transform: translate(100px, 100px); } } this media feature is only supported by webkit. if possible, use an @supports feature query instead: @supports (-webkit-transform: translate(100px, 100px)) { div { -webkit-transform: translate(100px, 100px); } } specifications not part of any standard. ...

update - CSS: Cascading Style Sheets
rely underpowered devices. fast the layout may change dynamically according to the usual rules of css, and the output device is not unusually constrained in speed, so regularly-updating things like css animations can be used. example: computer screens. examples html <p>if this text animates for you, you are using a fast-updating device.</p> css @keyframes jiggle { from { transform: translatey(0); } to { transform: translatey(25px); } } @media (update: fast) { p { animation: 1s jiggle linear alternate infinite; } } result specifications specification status comment media queries level 4the definition of 'update' in that specification. candidate recommendation initial definition. ...

Variable fonts guide - CSS: Cascading Style Sheets
ze. conversely, when a much larger size was being used (like 48 or 60px), there might be much greater variation in thick and thin stroke weights, showing the typeface design more in line with the original intent. while this was originally done to compensate for the ink and paper printing process (very thin lines at small sizes often didn’t print, giving the letterforms a broken appearance), it translates well to digital displays when compensating for screen quality and physical size rendering. optical size values are generally intended to be automatically applied corresponding to font-size, but can also be manipulated using the lower-level font-variation-settings syntax. there is a new attribute, font-optical-sizing, created to support variable fonts in css. when using font-optical-sizing, the...

CSS Transforms - CSS: Cascading Style Sheets
css transforms is a module of css that defines how elements styled with css can be transformed in two-dimensional or three-dimensional space. reference properties backface-visibility perspective perspective-origin rotate scale transform transform-box transform-origin transform-style translate data types <transform-function> guides using css transforms step-by-step tutorial about how to transform elements styled with css. specifications specification status comment css transforms level 1 working draft initial definition. css transforms level 2 editor's draft adds individual transforms. ...

Using CSS transitions - CSS: Cascading Style Sheets
tool to make things look much smoother without having to do anything to your javascript functionality. take the following example. <p>click anywhere to move the ball</p> <div id="foo"></div> using javascript you can make the effect of moving the ball to a certain position happen: var f = document.getelementbyid('foo'); document.addeventlistener('click', function(ev){ f.style.transform = 'translatey('+(ev.clienty-25)+'px)'; f.style.transform += 'translatex('+(ev.clientx-25)+'px)'; },false); with css you can make it smooth without any extra effort. simply add a transition to the element and any change will happen smoothly: p { padding-left: 60px; } #foo { border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transitio...

Animatable CSS properties - CSS: Cascading Style Sheets
ding-top scroll-snap-coordinate scroll-snap-destination scrollbar-color shape-image-threshold shape-margin shape-outside tab-size text-decoration text-decoration-color text-decoration-thickness text-emphasis text-emphasis-color text-indent text-shadow text-underline-offset top transform transform-origin translate vertical-align visibility width word-spacing z-index zoom ...

Grid wrapper - CSS: Cascading Style Sheets
accessibility concerns although grid enables us to position items anwhere (within reason), it is important when placing items using css grid that your underlying markup follows a logical order (see css grid layout and accessibility for more details). ...

CSS reference - CSS: Cascading Style Sheets
emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()user-zoom (@viewport)v:validvar()vertical-alignvh@viewportviewport-fit (@viewport)visibility:visitedvmaxvminvwwwhite-spacewidowswidthwidth (@viewport)will-changeword-breakword-spacingword-wrapwriting-modexxzz-indexzoom (@viewport)others--* selectors the following are the various...

font-weight - CSS: Cascading Style Sheets
commonly used values correspond to common weight names, as described in the common weight name mapping section below. in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the fallback weights system. css fonts level 4 extends the syntax to accept any number between 1 and 1000 and introduces variable fonts, which can make use of this much finer-grained range of font weights. fallback weights if the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered: ...

linear-gradient() - CSS: Cascading Style Sheets
ecified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). the order of the side keywords does not matter. if unspecified, it defaults to to bottom. the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg, respectively. the other values are translated into an angle. <angle> the gradient line's angle of direction. a value of 0deg is equivalent to to top; increasing values rotate clockwise from there. <linear-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis). <color-hint> the color-hint is an interpolation hint defining how t...

offset-path - CSS: Cascading Style Sheets
11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h506 l900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" /> <path id="firstscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,0 -20,10 a20,20 0 1,1 -40,-10 h20 a10,10 0 0,1 30,0 m-40,20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,20 m0,0" transform="translate(0,0)" fill="green" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> <path id="secondscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,1 -20,-10 a20,20 0 1,0 -40,10 h20 a10,10 0 0,0 30,0 m-40,-20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,-20 m0,0" transform="translate(0,0)" ...

repeating-linear-gradient() - CSS: Cascading Style Sheets
pecified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). the order of the side keywords does not matter. if unspecified, it defaults to to bottom. the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively. the other values are translated into an angle. <angle> the gradient line's angle of direction. a value of 0deg is equivalent to to top; increasing values rotate clockwise from there. <linear-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis). a percentage of 0%, or a length of 0, represents the start of the gra...

transform-origin - CSS: Cascading Style Sheets
tion origin of the rotate() function is the center of rotation. this property is applied by first translating the element by the value of the property, then applying the element's transform, then translating by the negated property value. this means, this definition transform-origin: -100% 50%; transform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is center. syntax /* one-value syntax */ transform-origin: 2px; transform-origin: bottom; /* x-offset | y-offset */ transform-origin: 3cm 2px; /* x-offset-keyword | y-offset */ transform-origin: left 2px; /* x-offset-keyword | y-offset-keyword */ transform-origin: right top; /* y-offset-keyword | x-offse...

Using device orientation with 3D transforms - Developer guides
ion data to a 3d transform is basically to use the alpha, gamma, and beta values as rotatez, rotatex and rotatey values. there are however two corrections that should be applied to those values: the initial alpha value is 180 (device flat on the back, top of the screen pointing 12:00), so the rotatez value should be alpha - 180 the y axis of the screen coordinate system is inverted, such that translatey(100px) moves an element 100px down, so the rotatey value should be -gamma finally, the order of the three different rotations is very important to accurately convert an orientation to a 3d rotation: rotatez, then rotatex and then rotatey. here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // re...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
rmatted as xml, and can be embedded directly into a web page or can be placed in he page using the <img> element, just like any other type of image. webgl the web graphics library is an opengl es-based api for drawing high-performance 2d and 3d graphics on the web. see our webgl tutorial to find out more. how to describe a color in order to represent a color in css, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. this is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. as such, there are several ways you can describe color in css. for more detailed discussion of each of the color value types, see the reference for the cs...

HTML attribute reference - HTML: Hypertext Markup Language
overrides the browser's default tab order and follows the one specified instead. target <a>, <area>, <base>, <form> specifies where to open the linked document (in the case of an <a> element) or where to display the response recieved (in the case of a <form> element) title global attribute text to be displayed in a tooltip when hovering over the element. translate global attribute specify whether an element’s attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged. type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> defines the type of the element. usemap <img>, <input>, <object> value ...

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
t. the placeholder is used to show an example input, not an explanation or prompt. not only is the placeholder not accessible to screen readers, but once the user enters any text into the form control, or if the form control already has a value, there is no placeholder. browsers with automatic page translation features may skip over attributes when translating, meaning the placeholder may not get translated. don't use the placeholder attribute if you can avoid it. if you need to label an <input> element, use the <label> element. client-side validation warning: client-side validation is useful, but it does not guarantee that the server will receive valid data. if the data must be in a specific format, always verify it also on the server-side, and return a 400 http response if the format is inv...

<time> - HTML: Hypertext Markup Language
it may represent one of the following: a time on a 24-hour clock. a precise date in the gregorian calendar (with optional time and timezone information). a valid time duration. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

HTML documentation index - HTML: Hypertext Markup Language
, html, reference the tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the tab key, hence the name). 32 title global attributes, html, reference, title the title global attribute contains text representing advisory information related to the element it belongs to. 33 translate experimental, global attributes, html, reference the translate global attribute is an enumerated attribute that is used to specify whether an element's translateable attribute values and its text node children should be translated when the page is localized, or whether to leave them unchanged. 34 x-ms-acceleratorkey attribute, html, html:microsoft extensions, non-standard...

An overview of HTTP - HTTP
ument, the web page. scripts executed by the browser can fetch more resources in later phases and the browser updates the web page accordingly. a web page is a hypertext document. this means some parts of displayed text are links which can be activated (usually by a click of the mouse) to fetch a new web page, allowing the user to direct their user-agent and navigate through the web. the browser translates these directions in http requests, and further interprets the http responses to present the user with a clear response. the web server on the opposite side of the communication channel, is the server, which serves the document as requested by the client. a server appears as only a single machine virtually: this is because it may actually be a collection of servers, sharing the load (load balan...

Proxy Auto-Configuration (PAC) file - HTTP
ompare (e.g. the url, or the hostname). shexp is a shell expression to compare against. returns true if the string matches the specified shell expression. note that the patterns are shell glob expressions, not regular expressions. * and ? are always supported, while [characters] and [^characters] are supported by some implmentations including firefox. this is mainly because the expression is translated to a regexp via subsitution of [.*?]. for a reliable way to use these regexp syntaxes, just use regexp instead. examples shexpmatch("http://home.netscape.com/people/ari/index.html" , "*/ari/*"); // returns true shexpmatch("http://home.netscape.com/people/montulli/index.html", "*/ari/*"); // returns false weekdayrange() syntax weekdayrange(wd1, wd2, [gmt]) note: (before firefox 49) wd1...

Left shift (<<) - JavaScript
xcess bits shifted off to the left are discarded. zero bits are shifted in from the right. for example, 9 << 2 yields 36: . 9 (base 10): 00000000000000000000000000001001 (base 2) -------------------------------- 9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) bitwise shifting any number x to the left by y bits yields x * 2 ** y. so e.g.: 9 << 3 translates to: 9 * (2 ** 3) = 9 * (8) = 72. examples using left shift 9 << 3; // 72 // 9 * (2 ** 3) = 9 * (8) = 72 specifications specification ecmascript (ecma-262)the definition of 'bitwise shift operators' in that specification. ...

Web video codec guide - Web media technologies
er of the camera or of objects in the frame of view) and determines how many pixels the moving object has moved in each direction. then that shift is stored, along with a description of the pixels that have moved that can't be described just by that shift. in essence, the encoder finds the moving objects, then builds an internal frame of sorts that looks like the original but with all the objects translated to their new locations. in theory, this approximates the new frame's appearance. then, to finish the job, the remaining differences are found, then the set of object shifts and the set of pixel differences are stored in the data representing the new frame. this object that describes the shift and the pixel differences is called a residual frame. original frame inter-frame difference...

Lazy loading - Web Performance
lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation. overview as the web has evolved, we have come to see huge increases in the number and size of assets sent to users. ...

Performance budgets - Web Performance
to be proactive and plan any tech debt, while not blocking development or deploys. the error level is an upper bound limit, where changes will have a negative and noticeable impact. in order to begin, you need to first measure the devices and connection speeds where your users are coming from (e.g. a ~$200 android device over a 3g connection), using multiple tools. these time-based metrics will translate into file-size budgets. a default baseline to reduce bounce rate is to achieve time to interactive under 5 seconds in 3g/4g, and under 2 seconds for subsequent loads. however, based on the specific goals and content of your site, you might choose to focus on other metrics. for a text-heavy site such as a blog or a news site, the first contentful paint metric could reflect more closely the user ...

Web Performance
n summary, we should always try to create our animations using css transitions/animations where possible. if your animations are really complex, you may have to rely on javascript-based animations instead.lazy loadinglazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. it is a way of shorten the critical rendering path length, what would translate into improved page load times. navigation and resource timingsnavigation timings are metrics measuring a browser's document navigation events. resource timings are detailed network timing measurements regarding the loading of an application's resources.optimizing startup performanceregardless of platform, it's always a good idea to start up as quickly as possible. since that's a universal iss...

azimuth - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'azimuth' in...

baseFrequency - SVG: Scalable Vector Graphics
if one number is provided, then that value is used for both x ...

color-rendering - SVG: Scalable Vector Graphics
opti...

diffuseConstant - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'dif...

divisor - SVG: Scalable Vector Graphics
if the specified divisor is 0 then the default value will be used instead. specifications specification status comment filter effects module level 1th...

elevation - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'elevation...

exponent - SVG: Scalable Vector Graphics
cr type="gamma" exponent="5"/> <fefuncg type="gamma" exponent="5"/> <fefuncb type="gamma" exponent="5"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes <number> if the type attribute of the component element is set to gamma, this value specifies the exponent of the gamma function specifications specification status comment filter effects module level 1the definition of 'exponent' in that ...

flood-color - SVG: Scalable Vector Graphics
working draft removed the <icccolor> value and aligned the value to the css color value. scalable ve...

flood-opacity - SVG: Scalable Vector Graphics
a number of 0 or a percentage of 0% represents a fully transparent color, 1 or 100% represents a fully opaque color. specifications ...

fr - SVG: Scalable Vector Graphics
reen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" ...

fx - SVG: Scalable Vector Graphics
animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5"...

fy - SVG: Scalable Vector Graphics
animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5"...

gradientTransform - SVG: Scalable Vector Graphics
ent1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <radialgradient id="gradient2" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100" gradienttransform="skewx(20) translate(-35, 0)"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="transform: translatex(220px);" /> </svg> usage notes default valu...

intercept - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'intercept...

k1 - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'k1' in that spec...

k2 - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'k2' in that spec...

k3 - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'k3' in that spec...

k4 - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'k4' in that spec...

kernelMatrix - SVG: Scalable Vector Graphics
values are separated by space characters and/or a comma. the number of entries in the list must equal <orderx> times <ordery>. if the result of orderx * ordery is ...

lighting-color - SVG: Scalable Vector Graphics
working draft removed the <icccolor> value. scalable vector graphics (svg) 1.1 (second edition)th...

limitingConeAngle - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'l...

mode - SVG: Scalable Vector Graphics
specifications specification status comment filter effects module level 1the definition of 'mode' in that specification. working draft no change scalable vector graphics...

numOctaves - SVG: Scalable Vector Graphics
negative values are forbidden. example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" numoctaves=...

order - SVG: Scalable Vector Graphics
the values provided must be <integer>s greater than zero. values that are not integers will be truncated, i.e. rounded to the closest integer val...

points - SVG: Scalable Vector Graphics
last one will be ignored. two elements are using this attribute: <polyline>, and <polygon> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" transform="translate(100,0)" points="50,0 21,90 98,35 2,35 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates by a space. it makes things more readable for human beings. --> </svg> polyline for <polyline>, points defines a list of points, each representing a vertex of the line to be drawn. each point is define by a x and y c...

pointsAtX - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'pointsatx...

pointsAtY - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'pointsaty...

pointsAtZ - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'pointsatz...

preserveAlpha - SVG: Scalable Vector Graphics
in this case, the filter will temporarily unpremultiply the color component values and apply the kernel. false this value indicates that the convolution will apply to all chan...

scale - SVG: Scalable Vector Graphics
when the value of this attribute is 0, this operation has no effect on the source image. specifications specification status comment filter effects module level 1t...

seed - SVG: Scalable Vector Graphics
ise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="100" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraph...

specularConstant - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'sp...

specularExponent - SVG: Scalable Vector Graphics
value <number> default value 1 animatable yes fespotlight for <fespotlight>, specularexponent defines the exponent value controlling the focus for the light source. value <number> default value ...

surfaceScale - SVG: Scalable Vector Graphics
value <number> default value 1 animatable yes fediffuselighting for <fediffuselighting>, surfacescale defines the height of the surface. value <number> default value 1 animatable yes specifica...

tableValues - SVG: Scalable Vector Graphics
each number can be between 0 and 1. an empty list results in an...

type - SVG: Scalable Vector Graphics
cg>, <fefuncb>, and <fefunca> elements, it indicates the type of component transfer function. for the <feturbulence> element, it indicates whether the filter primitive should perform a noise or turbulence function. for the <style> and <script> elements, it defines the content type of the element. ...

z - SVG: Scalable Vector Graphics
value <number> default value 1 animatable yes fespotlight for <fespotlight>, z defines the location along the z-axis for the light source in ...

zoomAndPan - SVG: Scalable Vector Graphics
panning represents a translation (i.e., a shift) transformation on an svg document fragment in response to a user interface action. ...

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
h smil for a brief overview. full documentation for svg is forthcoming. someday. there is also a description of the mozilla support of the changes in svg 2. element implementation status a quick overview of the svg 1.1 elements and the current status of the native support. element notes structure module svg implemented. currentscale and currenttranslate dom attributes are implemented, but there is no pan and zoom user interface. svgsvgelement unimplemented attributes: contentscripttype, contentstyletype, viewport, currentview unimplemented bindings: getintersectionlist, getenclosurelist, checkintersection, checkenclosure g implemented. defs imp...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
implementation status unknown auto as initial value for width and height attributes ...

Functions - XPath
e() false() floor() format-number() xslt-specific function-available() generate-id() xslt-specific id() (partially supported) key() xslt-specific lang() last() local-name() name() namespace-uri() normalize-space() not() number() position() round() starts-with() string() string-length() substring() substring-after() substring-before() sum() system-property() xslt-specific translate() true() unparsed-entity-url() xslt-specific (not supported) ...

Index - XPath
on returns a string that is the part of a given string before a given substring. 50 sum xslt, xslt_reference the sum function returns a number that is the sum of the numeric values of each node in a given node-set. 51 system-property xslt, xslt_reference the system-property function returns an object representing the given system-property. 52 translate xslt, xslt_reference the translate function evaluates a string and a set of characters to translate and returns the translated string. 53 true xslt, xslt_reference the true function returns a boolean value of true. 54 unparsed-entity-url xslt, xslt_reference the unparsed-entity-url() function returns the uri of the unparsed entity with the...

The Netscape XSLT/XPath Reference - XSLT: Extensible Stylesheet Language Transformations
) name() (supported) namespace-uri() (supported) normalize-space() (supported) not() (supported) number() (supported) position() (supported) round() (supported) starts-with() (supported) string() (supported) string-length() (supported) substring() (supported) substring-after() (supported) substring-before() (supported) sum() (supported) system-property() (supported) translate() (supported) true() (supported) unparsed-entity-url() (not supported) ...

Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
all rights reserved. note: this reprinted article was original...

Compiling a New C/C++ Module to WebAssembly - WebAssembly
hello.html — specifies that we want emscripten to generate an html page to run our code in (and a filename to use), as well as the wasm module and the javascript "glue" code to compile and instantiate the wasm so it can be used in the web environment. at this point in your source directory you should have: the binary wasm module code (hello.wasm) a javascript file containing glue code to translate between the native c functions, and javascript/wasm (hello.js) an html file to load, compile, and instantiate your wasm code, and display its output in the browser (hello.html) running your example now all that remains is for you to load the resulting hello.html in a browser that supports webassembly. it is enabled by default in firefox 52+ and chrome 57+/latest opera (you can also run wasm c...