Animation.playbackRate - Web APIs
.playbackrate; animation.playbackrate = newrate; value takes a number that can be 0, negative, or positive. negative values reverse the animation. the value is a scaling factor, so for example a value of 2 would double the playback rate. setting an animation’s playbackrate to 0 effectively pauses the animation (however, its playstate does not necessarily become paused). examples in the growing/shrinking alice game example, clicking or tapping the bottle causes alice's growing animation (alicechange) to reverse, causing her to shrink: var shrinkalice = function() { alicechange.playbackrate = -1; alicechange.play(); } // on tap or click, alice will shrink. bottle.addeventlistener("mousedown", shrinkalice, false); bottle.addeventlistener("touchstart", shrinkalice, false); contr...
... tapping the bottle causes alice's growing animation (alicechange) to reverse, causing her to shrink: var shrinkalice = function() { alicechange.playbackrate = -1; alicechange.play(); } // on tap or click, alice will shrink. bottle.addeventlistener("mousedown", shrinkalice, false); bottle.addeventlistener("touchstart", shrinkalice, false); contrariwise, clicking on the cake causes her to "grow," playing alicechange forwards again: var growalice = function() { alicechange.playbackrate = 1; alicechange.play(); } // on tap or click, alice will grow. ...
... click, alice will shrink. bottle.addeventlistener("mousedown", shrinkalice, false); bottle.addeventlistener("touchstart", shrinkalice, false); contrariwise, clicking on the cake causes her to "grow," playing alicechange forwards again: var growalice = function() { alicechange.playbackrate = 1; alicechange.play(); } // on tap or click, alice will grow. ...
...sedown", shrinkalice, false); bottle.addeventlistener("touchstart", shrinkalice, false); contrariwise, clicking on the cake causes her to "grow," playing alicechange forwards again: var growalice = function() { alicechange.playbackrate = 1; alicechange.play(); } // on tap or click, alice will grow. ...

HTMLTextAreaElement - Web APIs
d focus() are inherited from htmlelement from html5 on, but were defined on htmltextareaelement in dom level 2 html and earlier specifications. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: input event fires when the value of an <input>, <select>, or <textarea> element has been changed. ...
...html5 on, but were defined on htmltextareaelement in dom level 2 html and earlier specifications. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: input event fires when the value of an <input>, <select>, or <textarea> element has been changed. ...
...ment in dom level 2 html and earlier specifications. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: input event fires when the value of an <input>, <select>, or <textarea> element has been changed. ...
... example make a textarea autogrow while typing: javascript function autogrow (ofield) { if (ofield.scrollheight > ofield.clientheight) { ofield.style.height = ofield.scrollheight + "px"; } } css textarea.noscrollbars { overflow: hidden; width: 300px; height: 100px; } html <form> <fieldset> <legend>your comments</legend> <p><textarea class="noscrollbars" onkeyup="autogrow(this);"></textarea></p> <p><input type="submit" value="send" /></p> </fieldset> </form> insert html tags example insert some html tags or smiles or any custom text in a textarea. javascript function insertmetachars(sstarttag, sendtag) { var bdouble = arguments.length > 1, omsginput = document.myform.mytxtarea, nselstart = omsginput.selectionstart, nselend = omsginput.selectionend, ...

Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
e a set of flex items that are too wide for their container, they will overflow it. if you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap, or use the shorthand flex-flow with values of row wrap or column wrap. items will then wrap in the container. in the next example i have ten items all with a flex-basis of 160px and the ability to grow and shrink. once the first row gets to a point where there is not enough space to place another 160 pixel item, a new flex line is created for the items and so on until all of the items are placed. as the items can grow, they will expand larger than 160 px in order to fill each row completely. if there is only one item on the final line it will stretch to fill the entire line. we can see the s...
...ay themselves out in reverse ordered lines. note that the reversing is only happening in the inline, row direction. we start on the right then go onto the second line and again start from the right. ...
...g in the inline, row direction. we start on the right then go onto the second line and again start from the right. we aren’t reversing in both directions, starting from the bottom coming up the container! single-dimensional layout explained as we have seen from the above examples if our items are allowed to grow and shrink, when there are fewer items in the last row or column then those items grow to fill the available space. there is no method in flexbox to tell items in one row to line up with items in the row above — each flex line acts like a new flex container. it deals with space distribution across the main axis. if there is only one item, and that item is allowed to grow, it will fill the axis just as if you had a single item flex container. if you want layout in two dimensions...
...s work? typically flexbox-based grid systems work by taking flexbox back to the familiar world of float-based layouts. if you assign percentage widths to flex items — either as flex-basis or by adding a width to the item itself leaving the value of flex-basis as auto — you can get the impression of a two dimensional layout. you can see this working in the example below. here i have set flex-grow and flex-shrink to 0 to make inflexible flex items and am then controlling flexibility using percentages, just like we used to do in float layouts. if you need flex items to line up in the cross axis, controlling the width in this way will achieve that. in most cases however, adding widths to flex items in this way demonstrates that you would probably be better served by switching to grid layo...

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
r property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups. ...
...rols the order in which flex items appear within their flex container, by assigning them to ordinal groups. value: any integer (0 is the default) spec: https://drafts.csswg.org/css-flexbox/#order-property @mixin order($int: 0) { -webkit-box-ordinal-group: $int + 1; -moz-box-ordinal-group: $int + 1; -webkit-order: $int; -ms-flex-order: $int; order: $int; } flexbox grow the flex-grow property sets the flex grow factor. negative numbers are invalid. value: any integer (0 is the default) spec: https://drafts.csswg.org/css-flexbox/#flex-grow-property @mixin flex-grow($int: 1) { -webkit-box-flex: $int; -moz-box-flex: $int; -webkit-flex-grow: $int; -ms-flex: $int; flex-grow: $int; } flexbox shrink the flex-shrink property sets the flex shrink factor. negative n...
...basis the flex-basis property sets the flex basis. negative lengths are invalid. values: see the flex-basis reference (the default is auto) spec: https://drafts.csswg.org/css-flexbox/#flex-basis-property @mixin flex-basis($value: auto) { -webkit-flex-basis: $value; flex-basis: $value; } flexbox "flex" (shorthand) the flex property specifies the components of a flexible length; flex-grow factor, flex-shrink factor, and the flex-basis. when an element is a flex item, flex is consulted instead of the main size property to determine the main size of the element. if an element is not a flex item, flex has no effect. values: see the flex reference for values and default spec: https://drafts.csswg.org/css-flexbox/#flex-property @mixin flex($fg: 1, $fs: 0, $fb: auto) { // set ...
...stead of the main size property to determine the main size of the element. if an element is not a flex item, flex has no effect. values: see the flex reference for values and default spec: https://drafts.csswg.org/css-flexbox/#flex-property @mixin flex($fg: 1, $fs: 0, $fb: auto) { // set a variable to be used by box-flex properties $fg-boxflex: $fg; // box-flex only supports a flex-grow value so lets grab the // first item in the list and just return that. @if type-of($fg) == 'list' { $fg-boxflex: nth($fg, 1); } -webkit-box: $fg-boxflex; -moz-box: $fg-boxflex; -webkit-flex: $fg $fs $fb; -ms-flex: $fg $fs $fb; flex: $fg $fs $fb; } flexbox justify content the justify-content property aligns flex items along the main axis of the current line of the flex cont...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
<box flex="1" align="end" pack="end"> <button label="happy"/> <button label="sad"/> </box> listing 2: how align and pack respond to orient figure 2: output from listing 2 flex elements ordinarily have fixed height and width. the flex attribute indicates that an element should be expanded to take up all of a window's height or width. flex takes a positive integer as a value, which is a growth multiple on the axis of the parent element's orient attribute. for example, flex="1" indicates that the element should extend to fill that axis; if there are two elements with flex="1" in a row, they are adjusted to be of equal size. you can assign flex="2" (or higher values) as a size multiplier for elements. in listing 4, the second label will be displayed twice as big as the first (figure 3)...
...e are two elements with flex="1" in a row, they are adjusted to be of equal size. you can assign flex="2" (or higher values) as a size multiplier for elements. in listing 4, the second label will be displayed twice as big as the first (figure 3). <hbox> <label value="label1" flex="1" style="border: 1px solid;"/> <label value="label2" flex="2" style="border: 1px solid;"/> </hbox> listing 4: growing with flex figure 3: output of listing 4 ordinal within a xul box, elements will ordinarily be laid out following their order of appearance in the source code (laid out left to right or top to bottom). use the ordinal attribute to alter their order. the ordinal attribute takes positive integer values, which are used to order the box’s layout—in the example in listing 5, the buttons wou...
...efault value for ordinal is 1. <vbox> <button label="button1" ordinal="3"/> <button label="button2" ordinal="2"/> <button label="button3" ordinal="1"/> </vbox> listing 5: changing order with ordinal figure 4: output of listing 5 box size you can set the size of xul elements explicitly using the width and height attributes, as shown in listing 6. if you are creating elements that can grow using the flex attribute, you can also set minimums and maximums using minwidth, minheight, maxwidth, and maxheight. these all use pixels as the unit of size. <button label="button" width="200" height="100"/> listing 6: setting the size of a button also, as shown in listing 7, you can embed css inline into elements via the style attribute, which allows you to set sizes using units other than ...

Splitters - Archive of obsolete content
sizeafter when the splitter is dragged, the elements to the right (or below) resize. this attribute indicates which element should resize. set this to closest to have the element immediately to the right of the splitter resize. set this to farthest to have the element that is the farthest away from the splitter to the right resize. (the last element in the box). this attribute can also be set to grow, in which case the elements to the right of the splitter do not change size when the splitter is dragged, but instead the entire box changes size. the default value is closest. if you set the collapse attribute, you should also add a grippy element inside the splitter which the user can use to collapse the element. the width and height attributes of the elements next the splitter are adjusted ...
...find files example let's see what the find file dialog looks like with a splitter in it. one possibility would be to add the results of the search in the dialog. we'll add an area in-between the search criteria and the buttons along the bottom. a splitter will allow you to collapse, or hide, the search results. </tabbox> <iframe src="results.html"/> <splitter collapse="before" resizeafter="grow"> <grippy/> </splitter> <hbox> here, a splitter and an iframe have been added to the dialog. we don't need the spacer after the tabbox any more so we can remove it. the content of the frame is contained in a file called 'results.html'. create this file and put whatever you want in it for now. the iframe will be replaced later with a results list when we know how to create it. for now, it ...
...later with a results list when we know how to create it. for now, it serves to demonstrate the splitter. the splitter has been set to a collapse value of before meaning that the element just before the splitter will collapse. here, it is the iframe. as the images below show, when the grippy is clicked, the iframe is collapsed and the buttons shuffle up. the resizeafter attribute has been set to grow so that the elements after the splitter push themselves down when the splitter is dragged down. this results in the content of the frame growing to any size. it should be noted that the window does not resize itself automatically. you'll also notice that this is a horizontal splitter because it has been placed in a vertical box. normal state: collapsed state: find files example so far : so...

Trees - Archive of obsolete content
olumn headers and an empty tree body. you may have to resize the window to see anything since there isn't any data to display. since the tree has been marked as flexible, the body will stretch to fit the available space. making a tree flexible is quite commonly done, as it is often the case that the data in the tree is the most significant information displayed, so it makes sense to make the tree grow to fit. however, you may specify a specific number of rows to appear in a tree by setting the rows attribute on the tree element. this attribute specifies how many rows are displayed in the user interface, not how many rows of data there are. the total number of rows is supplied by the tree view. if there are more rows of data in the tree, a scrollbar will appear to allow the user to see the rest...
... the total number of rows is supplied by the tree view. if there are more rows of data in the tree, a scrollbar will appear to allow the user to see the rest of them. if you don't specify the rows attribute, the default value is 0, which means that none of the rows will appear. in this case, you would make the tree flexible. if your tree is flexible, it doesn't need a rows attribute since it will grow to fit the available space. the content tree view having said that the data to be displayed in a tree comes from a view and not from xul tags, there happens to be a built-in tree view which gets its data from xul tags. this may be a bit confusing, but essentially, one of the built-in tree views uses a set of tags which can be used to specify information about the data in the tree. the following...
...the second column will appear twice as wide due to the larger flexibility. a single row has been added to demonstrate what the table would look like with a row. in a real implementation, the rows would be added by a script as the search was performed, or a custom view would be created to hold the data. f...

Package management basics - Learn web development
shine. whilst the tooling is on our machine, we can ask the software to inspect our use of the code and only include the functions that we're actually using in production — a process known as "tree shaking". this makes a lot of sense as we want to reduce file size and thus make our app load as quickly as possible. different tooling will let you tree shake in different ways. although the list grows by the month, there are three main offerings for tools that generate bundles from our source code: webpack, rollup, and parcel. there will be more available than this, but these are popular ones: the rollup tool offers tree shaking and code splitting as it’s core features. webpack requires some configuration (though “some” might be understating the complexity of some developers’ webp...
...d automatically. note: at time of writing, parcel 2 had not been released. however when it does, these commands will all still work because the authors of parcel have had the good sense to name the tool slightly differently. to install parcel 1.x you have to install parcel-bundler, but parcel 2.x is simply called parcel. there's a lot of tools available and the javascript package ecosystem is growing at an unprecedented rate, which has pros and cons. there's improvements being made all the time and the choice, for better or worse, is constantly increasing. faced with the overwhelming choice of tooling, probably the most important lesson is to learn what the tool you select is capable of. a rough guide to package manager clients this tutorial installed the parcel package using npm, but as...
...son is to learn what the tool you select is capable of. a rough guide to package manager clients this tutorial installed the parcel package using npm, but as mentioned earlier on there are some alternatives and it's worth at least knowing they exist and having some vague idea of the common commands across the tools. you've already seen some in action, but lets look at the others. the list will grow over time, but at time of writing, the following main package managers are available: npm at npmjs.org pnpm at pnpm.js.org yarn at yarnpkg.com npm and pnpm are similar from a command line point of view — in fact pnpm aims to have full parity over the argument options that npm offers. it differs in that it uses a different method for downloading and storing the packages on your computer, ...

Animation.play() - Web APIs
the play() method of the web animations api's animation interface starts or resumes playing of an animation. if the animation is finished, calling play() restarts the animation, playing it from the beginning. syntax animation.play(); parameters none. return 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: alicecha...
...: 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. ...
..., 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's animation. nommingcake.play(); } // when a user holds their mouse down or taps, call growalice to make all the animations play. cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); specifications specification status comment web animationsthe definition of 'play()' in that specification. working draft ...

CSS Flexible Box Layout - CSS: Cascading Style Sheets
both horizontal and vertical alignment of the children can be easily manipulated. ...
...ch item with the left and right items being flush with the edges of the flex container. you can also see that the items are stretching on the cross axis, due to the default value of align-items being stretch. the items stretch to the height of the flex container, making them each appear as tall as the tallest item. reference css properties flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap order alignment properties the properties align-content, align-self, align-items and justify-content initially appeared in the flexbox specification, but are now defined in box alignment. the flexbox spec now refers to the box alignment specification for up to date definitions. also additional alignment properties are now defined in box alignment. justify-content ...
...er layout methods how flexbox relates to other layout methods, and other css specifications aligning items in a flex container how the box alignment properties work with flexbox. ordering flex items explaining the different ways to change the order and direction of items, and covering the potential issues in doing so. controlling ratios of flex items along the main axis explaining the flex-grow, flex-shrink and flex-basis properties. mastering wrapping of flex items how to create flex containers with multiple lines and control the display of the items in those lines. typical use cases of flexbox common design patterns that are typical flexbox use cases. backwards compatibility of flexbox browser status of flexbox, interoperability issues and supporting older browsers and versions ...

animation-fill-mode - CSS: Cascading Style Sheets
ion-fill-mode> = none | forwards | backwards | both examples you can see the effect of animation-fill-mode in the following example. it demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default). ...
...e | forwards | backwards | both examples you can see the effect of animation-fill-mode in the following example. it demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default). ...
... you can see the effect of animation-fill-mode in the following example. it demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default). html <p>move your mouse over the gray box!</p> <div class="demo"> <div class="growsandstays">this grows and stays big.</div> <div class="grows">this just grows.</div> </div> css .demo { border-top: 100px solid #ccc; height: 300px; } @keyframes grow { 0% { font-size: 0; } 100% { font-size: 40px; } } .demo:hover .grows { animation-name: grow; animation-duration: 3s; } .demo:hover .growsandstays { animation-name: grow; animation-duration: 3s; animation-fill-mode: forwards; } see css animations for more examples. ...

Arrow function expressions - JavaScript
the function was called: a new object in the case of a constructor. undefined in strict mode function calls. the base object if the function was called as an "object method". etc. this proved to be less than ideal with an object-oriented style of programming. function person() { // the person() constructor defines `this` as an instance of itself. this.age = 0; setinterval(function growup() { // in non-strict mode, the growup() function defines `this` // as the global object (because it's where growup() is executed.), // which is different from the `this` // defined by the person() constructor. this.age++; }, 1000); } var p = new person(); in ecmascript 3/5, the this issue was fixable by assigning the value in this to a variable that could be closed over.
... an arrow function does not have its own this. ...
... an arrow function does not have its own this. the this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. ...

Understanding WebAssembly text format - WebAssembly
true}, 0); webassembly memory the above example is a pretty terrible logging function: it only prints a single integer! what if we wanted to log a text string? to deal with strings and other more complex data types, webassembly provides memory (although we also have reference types in newer implementation of webassembly). according to webassembly, memory is just a large array of bytes that can grow over time. webassembly contains instructions like i32.load and i32.store for reading and writing from linear memory. from javascript’s point of view, it’s as though memory is all inside one big (resizable) arraybuffer. that’s literally all that asm.js has to play with (except that it isn't resizable; see the asm.js programming model). so a string is just a sequence of bytes somewhere insi...
...ut to javascript? the key is that javascript can create webassembly linear memory instances via the webassembly.memory() interface, and access an existing memory instance (currently you can only have one per module instance) using the associated instance methods. memory instances have a buffer getter, which returns an arraybuffer that points at the whole linear memory. memory instances can also grow, for example via the memory.grow() method in javascript. when growth occurs, since arraybuffers can’t change size, the current arraybuffer is detached and a new arraybuffer is created to point to the newer, bigger memory. this means all we need to do to pass a string to javascript is to pass out the offset of the string in linear memory along with some way to indicate the length. while there a...
...the table }); note: you can find this example on github as wasm-table.html (see it live also). note: just like memory, tables can also be created from javascript (see webassembly.table()) as well as imported to/from another wasm module. mutating tables and dynamic linking because javascript has full access to function references, the table object can be mutated from javascript using the grow(), get() and set() methods. and webassembly code is itself able to manipulate tables using instructions added as part of reference types, such as table.get and table.set. because tables are mutable, they can be used to implement sophisticated load-time and run-time dynamic linking schemes. when a program is dynamically linked, multiple instances share the same memory and table. this is symmetric...

Using the WebAssembly JavaScript API - WebAssembly
turns an arraybuffer. for example, to write 42 directly into the first word of linear memory, you can do this: new uint32array(memory.buffer)[0] = 42; you can then return the same value using: new uint32array(memory.buffer)[0] try this now in your demo — save what you’ve added so far, load it in your browser, then try entering the above two lines in your javascript console. growing memory a memory instance can be grown by calls to memory.prototype.grow(), where again the argument is specified in units of webassembly pages: memory.grow(1); if a maximum value was supplied upon creation of the memory instance, attempts to grow past this maximum will throw a webassembly.rangeerror exception. the engine takes advantage of this supplied upper-bounds to reserve memory ahead ...
... just like functions, linear memories can be defined inside a module or imported. similarly, a module may also optionally export its memory. ...
...sembly caller supplies the index, which can then be safety bounds checked against the table before indexing and calling the indexed function reference. thus, tables are currently a rather low-level primitive used to compile low-level programming language features safely and portably. tables can be mutated via table.prototype.set(), which updates one of the values in a table, and table.prototype.grow(), which increases the number of values that can be stored in a table. this allows the indirectly-callable set of functions to change over time, which is necessary for dynamic linking techniques. the mutations are immediately accessible via table.prototype.get() in javascript, and to wasm modules. a table example let’s look at a simple table example — a webassembly module that creates and...

widget - Archive of obsolete content
scripting widget content to interact with the widget's content you need to load a separate script into the panel. in the sdk these scripts are called "content scripts" because they're explicitly used for interacting with web content. while content scripts can access the content they're attached to, they can't use the sdk's apis. so implementing a complete solu...
...ww.yahoo.com/favicon.ico"; } }); // a widget that updates content on a timer. widgets.widget({ id: "auto-update-widget", label: "widget that updates content on a timer", content: "0", contentscript: 'settimeout(function() {' + ' document.body.innerhtml++;' + '}, 2000)', contentscriptwhen: "ready" }); // a widget created with a specified width, that grows. var mywidget = widgets.widget({ id: "widget-effect", label: "wide widget that grows wider on a timer", content: "i'm getting longer.", width: 50, }); require("sdk/timers").setinterval(function() { mywidget.width += 10; }, 1000); // a widget communicating bi-directionally with a content script. var widget = widgets.widget({ id: "message-test", label: "bi-directional communication!

The Box Model - Archive of obsolete content
an have even more control over the size of flexible elements using the minwidth, maxwidth, minheight and maxheight attributes, or their css counterparts: min-width, max-width, min-height and max-height. the latter are recommended to keep style code in the skin section of the chrome. as their names should make clear, you can control the flexibility boundaries of elements, thus preventing them from growing or shrinking too much. all css properties involving lengths should be handled with caution. we recommended that you use proportional units (em, %) instead of absolute units (px) whenever possible. using the former allows the ui to scale proportionately depending on font size settings, which are often changed by users with accessibility limitations. a common exception to this rule is when yo...
...d text handling. another way to handle excessive text length is to use the crop attribute. if the line of text is longer than its container will allow, the text will be cut, showing "..." in the place where it was cut. you can choose where to cut the text, but cropping at the end is the most common practice. similarly as with wrapping, cropping will only occur is there is no room for the text to grow, so you'll need to restrict the width using css. text links xul makes it very easy for you to create a label that is also a link. all you need is to set the text-link class to the label, and add an onclick handler (oncommand won't work for this). the label is displayed with the expected link style so that users can easily recognize it as a link. a trickier case is when you need only part of a ...

Mozilla Application Framework in Detail - Archive of obsolete content
ml parser and xml parser, a dom implementation, a css parser and style system, and the code for css-based and html-based layout and rendering. as personal connectivity expands from the desktop computer to new web-enabled products and devices, gecko is a browser engine that has been designed from the ground up to power a new generation of desktop browsers and browsing devices and to accelerate the growth and development of the next-generation internet. small, fast and standards compliant, gecko is easily embeddable across platforms in browsers, desktop applications and browsing devices and delivers full-functionality browsing to them all. innovative gecko technologies it supports make the development of browsers, applications and devices faster and easier than ever before. gecko is the first br...
...will be usable on any supported platform or device. this will dramatically reduce the cost and complexity of developing and distributing rich web applications and full-functionality browsing devices that run them. by meeting the needs of developers and companies who are working to provide consumers with new interactive applications, solutions and services, gecko will become a key catalyst for new growth and innovation and for delivering anytime, anywhere access to millions of new users. as the heart of a browser, the browser engine software component is responsible for interpreting and rendering the graphics, text and script on the web. with gecko, mozilla has cleanly separated the browser engine component from the rest of the client software so it can be embedded and used to interpret, displa...

Adding more elements - Archive of obsolete content
m label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog. a spacer has been added in between each element to separate them. these spacers have been given an explicit width of 10 pixels each. you will notice that if the window is resized, the textbox grows but the other components do not. you will also notice that the label was removed. if you resize the window vertically, the elements do not change size. this is because they are inside horizontal boxes. in might be more appropriate if the find and cancel buttons always stayed along the bottom of the window. this is easy to do by adding a spacer in between the two horizontal boxes. <spacer style="...
...s a box with a nice beveled look, suitable for the current theme. let us change the box into a groupbox: <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> . . . <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </groupbox> there are other cosmetic problems as well. we could also have the groupbox grow so that it extends vertically to the bottom of the box. also, we could modify some of the margins so that the elements are positioned better. we will see more examples of the box model and some of its features as we continue to add elements throughout the tutorial. find files example so far source view next, we will look at how to create stacks. « previousnext » ...

Box Model Details - Archive of obsolete content
example 1 : source view <hbox flex="1"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> in the example above, all three elements will resize themselves as they are all flexible. the two buttons indicate a minimum width of 100 pixels. the buttons will never be smaller than this size but they may grow larger. here the window should appear just over 200 pixels wide. that's enough for the two buttons. because all three elements are flexible, but they don't need any more room, the flexibility adds no extra space. as shown in the image, there are two buttons which expand vertically to fit their container, which in this case is the hbox. the align attribute controls this behavior on a horizonta...
...he right one so it will always receive 3 times as much of the extra space when the window size is increased. the right box enforces a minimum width of 150 pixels. the textbox is flexible so it will resize as the window resizes. the textbox also enforces a minimum width of 100 pixels. the check box appears in the right box along with its label. just below the check box is a spacer. the spacer will grow and shrink but not exceed 30 pixels. the result is that the check box and the find button will be spaced apart from each other by some space of no more than 30 pixels. the second box has an alignment of start. this causes the child elements to be aligned on the left edge. if this was not specified, the default would be stretch, which would make the child elements stretch horizontally. because we ...

tree - Archive of obsolete content
picker and for header behaviors like sorting (these have no default keyboard access). ...
...face methods available via tree.view.selection. disabled type: boolean gets and sets the value of the disabled attribute. disablekeynavigation type: boolean gets or sets the value of the disablekeynavigation attribute. editingcolumn type: nsitreecolumn the column of the tree cell currently being edited, or null if there is no cell being edited. editingrow type: integer the row index of the tree cell currently being edited, or -1 if there is no cell currently being edited. enablecolumndrag type: boolean when set to true, the user may drag the column headers around to change the order in which they are displayed. firstordinalcolumn type: treecol element a reference to the first treecol element, which or may not be the first column dis...

Threats - Archive of obsolete content
puter can identify itself as a site called www.example.net when it is not. this type of impersonation is known as spoofing. misrepresentation. a person or organization can misrepresent itself. for example, suppose the site www.example.net pretends to be a furniture store when it is really just a site that takes credit-card payments but never sends any goods. malware. website malware is a growing problem. business needs have changed the way websites store sensistive data, with more usage of cloud services. but hackers may make out money, data and confidential information from your website by infecting website with malware. for example, site can be infected with a malware redirect hack in which a legitimate redirects to spam site or a phishing page. this kind of malware is widespread on...
...as passwords, usernames, credit card numbers. the attacks often comes in form of instant messages or phishing emails which appear to be legitimate but they are used to obtain personal information. for example, a mail which appears to be to be sent from a bank, asking to verify your identity by giving away your private information. ddos network attack. the volume and strength of ddos attacks are growing as hackers try to bring organizations offline or steal their data by flooding websites and networks with spurious traffic. original document information author(s): ella deon lackey last updated date: 2012 copyright information: © 2012 red hat, inc. link: red hat certificate system common criteria certification 8.1: deployment, planning, and installation original document informat...

Game promotion - Game development
ou spread the word about your shiny little game. you should use at least twitter and facebook and be active on appropriate forums — the most popular one is html5gamedevs.com. share your gamedev news and answer questions, so people will value what you're doing and will know that you're ok. remember to not be too pushy on telling everyone about your games — you're not a walking advertisement. grow your fanbase by talking to them, sharing tips, offering discounts, giving away prizes in competitions, or just complaining at the weather or buggy browser you have to deal with. act cool, be generous, be yourself and be there for others, and you'll get treated with respect. game portals using game portals is mostly concerned with monetization, but if you're not planning to sell licenses to allo...
...promo codes allowing people to access your game for free (or at least a demo or time-limited version), and send them all over the place — to press, youtubers, as competition prizes, etc. if the game reaches certain people you'll get a free advert to thousands of players. it can boost interest in your game more than anything else if you get lucky. fostering the community you can help community grow and promote yourself and your games at the same time. sending out weekly newsletters and organizing online competitions or local meetups will show others that you're passionate about what you do and that they can rely on you. then when you need any help they will be there for you. summary any way of promoting your game is good. you have a whole lot of options to chose from with most of them bei...

Flex - MDN Web Docs Glossary: Definitions of Web-related terms
flex is a new value added to the css display property. along with inline-flex it causes the element that it applies to to become a flex container, and the element's children to each become a flex item. the items then participate in flex layout, and all of the properties defined in the css flexible box layout module may be applied. ...
...n flex layout, and all of the properties defined in the css flexible box layout module may be applied. the flex property is a shorthand for the flexbox properties flex-grow, flex-shrink and flex-basis. in addition <flex> can refer to a flexible length in css grid layout. ...

Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms
flexbox is the commonly-used name for the css flexible box layout module, a layout model for displaying items in a single dimension — as a row or as a column. in the specification, flexbox is described as a layout model for user interface design. the key feature of flexbox is the fact that items in a flex layout can grow and shrink. space can be assigned to the items themselves, or distributed between or around the items. ...
...ayout can grow and shrink. space can be assigned to the items themselves, or distributed between or around the items. flexbox also enables alignment of items on the main or cross axis, thus providing a high level of control over the size and alignment of a group of items. ...

Test your skills: sizing - Learn web development
l to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one in this task, you have two boxes. the first should be sized so that the height will be at least 100 pixels tall, even if there is less content than would cause it to grow to that height, however, the content should not overflow if there is more content than fits in 100 pixels. test this box by removing the content from the html to make sure you still get a 100 pixel tall box even with no content. the second box should be fixed at 100 pixels tall, so that content will overflow if there is too much. try updating the live code below to recreate the finished examp...
...live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task three this task has two images in boxes. one image is smaller than the box, the other is larger and breaking out of the box. if you imagine that the box is responsive and therefore could grow and shrink, which property would you apply to the image so that the large image shrinks down into the box but the small image does not stretch. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help ...

Responsive design - Learn web development
ds, something which was already being explored by gillenwater, and can be read up on in marcotte's article, fluid grids (published in 2009 on a list apart). the second technique was the idea of fluid images. using a very simple technique of setting the max-width property to 100%, images would scale down smaller if their containing column became narrower than the image's intrinsic size, but never grow larger. this enables an image to scale down to fit in a flexibly-sized column, rather than overflow it, but not grow larger and become pixellated if the column becomes wider than the image. the third key component was the media query. media queries enable the type of layout switch that cameron adams had previously explored using javascript, using only css. rather than having one layout for all s...
...ortably fit into the container, then share out the remaining space between all the columns. therefore the number of columns will change according to how much space there is. .container { column-width: 10em; } flexbox in flexbox, flex items will shrink and distribute space between the items according to the space in their container, as their initial behavior. by changing the values for flex-grow and flex-shrink you can indicate how you want the items to behave when they encounter more or less space around them. in the example below the flex items will each take an equal amount of space in the flex container, using the shorthand of flex: 1 as described in the layout topic flexbox: flexible sizing of flex items. .container { display: flex; } .item { flex: 1; } note: as an exampl...

Componentizing our Svelte app - Learn web development
ome people prefer an intuitive approach and start looking at the markup and drawing boxes around every component and subcomponent that seems to have its own logic. other people apply the same techniques used for deciding if you should create a new function or object. one such technique is the single responsibility principle — that is, a component should ideally only do one thing. if it ends up growing, it should be split into smaller subcomponents. both approaches should complement each other, and help you decide how to better organize your components. eventually, we will split up our app into the following components: alert.svelte: a general notification box for communicating actions that have occurred. newtodo.svelte: the text input and button that allow you to enter a new todo item...
...r update accordingly. that's because our todo component is receiving the todo via the prop, but it's not sending any information back to its parent. we'll fix this later on. sharing data between components: props-down, events-up pattern the bind directive is pretty straightforward and allows you to share data between a parent and child component with minimal fuss. however, when your application grows larger and more complex it can easily get difficult to keep track of all your bound values. a different approach is the "props-down, events-up" communication pattern. basically, this pattern relies on child components receiving data from their parents via props and parent components updating their state by handling events emitted from child components. so props flow down from parent to child an...

IAccessibleTable
n([out] iunknown accessible ); [propget] hresult childindex([in] long rowindex, [in] long columnindex, [out] long cellindex ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult columnextentat([in] long row, [in] long column, [out] long ncolumnsspanned ); [propget] hresult columnheader([out] iaccessibletable accessibletable, [out] long startingrowindex ); [propget] hresult columnindex([in] long cellindex, [out] long columnindex ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult isselected([in] long row, [in] long column, [out] boolean isselected ); [propget] hresult modelchange([out] ia2tablemodelchange mo...
... the column extent. ncolumnsspanned returns the 1 based column extent of the specified cell. return value e_invalidarg if bad [in] passed, [out] value is 0. s_ok. columnheader() returns the column headers as an iaccessibletable object. content 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 ); parameter...

nsIAlertsService
ubject: always null. topic: "alertfinished" when the alert disappears, "alertclickcallback" if the user clicks the text or "alertshow" (since gecko 22) when the alert is shown. data: the value of the cookie parameter passed into the showalertnotification method. name optional a name for the notification; this is not displayed in the alert. however, certain notification systems (such as growl on mac os x) allow the user to disable alerts by name. this name is used in that configuration panel. on android the name is hashed and used as a notification id. dir optional bidi override for the title. valid values are "auto", "ltr" or "rtl". only available on supported platforms. lang optional language of title and text of the alert. only available on supported platforms. data optiona...
...l optional the principal of the page that created the alert. used for ipc security checks, and to determine whether the alert is actionable. inprivatebrowsing optional controls the image loading behavior. if true, the image url will be loaded in private browsing mode. exceptions thrown ns_error_not_available unable to display the notification; this may happen, for example, on mac os x if growl is not installed. example simple usage the following code was used to display the above notification. var alertsservice = components.classes["@mozilla.org/alerts-service;1"]. getservice(components.interfaces.nsialertsservice); try { alertsservice.showalertnotification("chrome://mozapps/skin/downloads/downloadicon.png", "alert tit...

nsIServerSocket
rver socket. pass -1 to indicate no preference, and a port will be selected automatically. aloopbackonly if true, the server socket will only respond to connections on the local loopback interface. otherwise, it will accept connections from any interface. to specify a particular network interface, use initwithaddress(). abacklog the maximum length to which the queue of pending connections may grow. this parameter may be silently limited by the operating system. pass -1 to use the default value. the default value is 5. native code only!initwithaddress this method initializes a server socket and binds it to a particular local address (and hence a particular local network interface). void initwithaddress( [const] in prnetaddrptr aaddr, in long abacklog ); parameters aaddr the ad...
...is 5. native code only!initwithaddress this method initializes a server socket and binds it to a particular local address (and hence a particular local network interface). void initwithaddress( [const] in prnetaddrptr aaddr, in long abacklog ); parameters aaddr the address to which this server socket should be bound. abacklog the maximum length the queue of pending connections may grow to. this parameter may be silently limited by the operating system. pass -1 to use the default value. the default value is 5. ...

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
page. ...
...x-grow value when there is extra free space or its flex-shrink value when there is not enough space minimum size (only appears when an item is clamped to its minimum size) - the minimum content size of a flex item when there is no more free space in the flex container final size - the size of the flex item after all sizing constraints imposed on it have been applied (based on the values of flex-grow, flex-shrink and flex-basis) at the top of the section is a drop-down list of all the items in the selected flexbox container: you can use this drop-down to select any of the other flex items in the flex container. ...

Intersection Observer API - Web APIs
ncestor element or with a top-level document's viewport. historically, detecting visibility of an element, or the relative visibility of two elements in relation to each other, has been a difficult task for which solutions have been unreliable and prone to causing the browser and the sites the user is accessing to become sluggish. as the web has matured, the need for this kind of information has grown. intersection information is needed for many reasons, such as: lazy-loading of images or other content as a page is scrolled. implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages. reporting of visibility of advertisements in order to calculate ad revenues. deciding whether or not t...
... fields: root the element that is used as the viewport for checking visibility of the target. must be the ancestor of the target. defaults to the browser viewport if not specified or if null. rootmargin margin around the root. can have values similar to the css margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). the values can be percentages. this set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. defaults to all zeros. threshold either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. if you only want to detect when visibility passes the 50% mark, you can use a value of 0.5. if you want the callback to run ev...

MouseEvent.relatedTarget - Web APIs
nts. syntax var target = instanceofmouseevent.relatedtarget return value an eventtarget object or null. example try moving your mouse cursor into and out of the red and blue boxes. ...
...t.relatedtarget return value an eventtarget object or null. example try moving your mouse cursor into and out of the red and blue boxes. ...

Window.resizeBy() - Web APIs
example // shrink the window window.resizeby(-200, -200); notes this method resizes the window relative to its current size. to resize the window in absolute terms, use window.resizeto(). ...
... example // shrink the window window.resizeby(-200, -200); notes this method resizes the window relative to its current size. to resize the window in absolute terms, use window.resizeto(). ...

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
already learned how to use flexbox, the similarities should help you get to grips with grid. one-dimensional vs. two-dimensional layout a simple example can demonstrate the difference between one- and two-dimensional layouts. in this first example, i am using flexbox to lay out a set of boxes. i have five child items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels. i have also set the flex-wrap property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: ...
...onsively. with the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. if we have a lot of space all five items can fit on one row. if we have a very narrow container we may only have space for one. in comparison, the grid version always has three column tracks. the tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid. auto-filling grid tracks we can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the auto-fill and auto-fit properties. in this next example, i have used the auto-fill keyword in place of an integ...

Sticky footers - CSS: Cascading Style Sheets
ich means it is as tall as the container it is in. we then create a single column grid layout with three rows, one row for each part of our layout. grid auto-placement will place our items in source order and so the header goes into the first auto sized track, the main content into the 1fr track and the footer into the final auto sized track. ...
...k will take up all available space and so grows to fill the gap. alternate method if you need compatibility with browsers that do not support grid layout you can also use flexbox to create a sticky footer. the flexbox example starts out in the same way, but we use display:flex rather than display:grid on the .wrapper; we also set flex-direction to column. then we set our main content to flex-grow: 1 and the other two elements to flex-shrink: 0 — this prevents them from shrinking smaller when content fills the main area. ...

WebKit CSS extensions - CSS: Cascading Style Sheets
ebkit-box-shadow -webkit-box-sizing c -webkit-clip-path -webkit-column-count -webkit-column-fill -webkit-column-gap -webkit-column-rule -webkit-column-rule-color -webkit-column-rule-style -webkit-column-rule-width -webkit-column-span -webkit-column-width -webkit-columns f -webkit-filter -webkit-flex -webkit-flex-basis -webkit-flex-direction -webkit-flex-flow -webkit-flex-grow -webkit-flex-shrink -webkit-flex-wrap -webkit-font-feature-settings -webkit-font-kerning -webkit-font-variant-ligatures g-j -webkit-grid -webkit-grid-area -webkit-grid-auto-columns -webkit-grid-auto-flow -webkit-grid-auto-rows -webkit-grid-column -webkit-grid-column-end -webkit-grid-column-gap -webkit-grid-column-start -webkit-grid-gap -webkit-grid-row -webkit-grid-row-end -...
...ius -webkit-border-image -webkit-border-radius -webkit-box-align**, *** -webkit-box-direction**, *** -webkit-box-flex**, *** -webkit-box-orient**, *** -webkit-box-pack**, *** -webkit-box-shadow -webkit-box-sizing -webkit-border-top-left-radius -webkit-border-top-right-radius f -webkit-filter -webkit-flex -webkit-flex-basis -webkit-flex-direction -webkit-flex-flow -webkit-flex-grow -webkit-flex-shrink -webkit-flex-wrap j -webkit-justify-content m -webkit-mask -webkit-mask-clip -webkit-mask-composite* -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-position-x** -webkit-mask-position-y** -webkit-mask-repeat -webkit-mask-size o-p -webkit-order -webkit-perspective -webkit-perspective-origin t -webkit-text-fill-color** ...

box-flex - CSS: Cascading Style Sheets
a property for controlling parts of the xul box model. it does not match either the old css flexible box layout module drafts for 'box-flex' (which were based on this property) or the behavior of '-webkit-box-flex' (which is based on those drafts). see flexbox for information about the current standard. the -moz-box-flex and -webkit-box-flex css properties specify how a -moz-box or -webkit-box grows to fill the box that contains it, in the direction of the containing box's layout. /* <number> values */ -moz-box-flex: 0; -moz-box-flex: 2; -moz-box-flex: 3.5; -webkit-box-flex: 0; -webkit-box-flex: 2; -webkit-box-flex: 3.5; /* global values */ -moz-box-flex: inherit; -moz-box-flex: initial; -moz-box-flex: unset; -webkit-box-flex: inherit; -webkit-box-flex: initial; -webkit-box-flex: unset; ...
...r> values */ -moz-box-flex: 0; -moz-box-flex: 2; -moz-box-flex: 3.5; -webkit-box-flex: 0; -webkit-box-flex: 2; -webkit-box-flex: 3.5; /* global values */ -moz-box-flex: inherit; -moz-box-flex: initial; -moz-box-flex: unset; -webkit-box-flex: inherit; -webkit-box-flex: initial; -webkit-box-flex: unset; syntax the box-flex property is specified as a <number>. if the value is 0, the box does not grow. if it is greater than 0, the box grows to fill a proportion of the available space. notes the containing box allocates the available extra space in proportion to the flex value of each of the content elements. content elements that have zero flex do not grow. if only one content element has nonzero flex, then it grows to fill the available space. content elements that have the same flex gro...

Functions - JavaScript
every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an "object method", etc.). this proved to be less than ideal with an object-oriented style of programming. function person() { // the person() constructor defines `this` as itself. this.age = 0; setinterval(function growup() { // in nonstrict mode, the growup() function defines `this` // as the global object, which is different from the `this` // defined by the person() constructor. this.age++; }, 1000); } var p = new person(); in ecmascript 3/5, this issue was fixed by assigning the value in this to a variable that could be closed over. function person() { var self = this; // some choose `...
... from the `this` // defined by the person() constructor. this.age++; }, 1000); } var p = new person(); in ecmascript 3/5, this issue was fixed by assigning the value in this to a variable that could be closed over. function person() { var self = this; // some choose `that` instead of `self`. // choose one and be consistent. self.age = 0; setinterval(function growup() { // the callback refers to the `self` variable of which // the value is the expected object. self.age++; }, 1000); } alternatively, a bound function could be created so that the proper this value would be passed to the growup() function. an arrow function does not have its own this; the this value of the enclosing execution context is used. thus, in the following code, the th...

WebAssembly.Memory - JavaScript
tes of memory accessed by a webassembly instance. a memory created by javascript or in webassembly code will be accessible and mutable from both javascript and webassembly. constructor webassembly.memory() creates a new memory object. instance properties memory.prototype.buffer an accessor property that returns the buffer contained in the memory. instance methods memory.prototype.grow() increases the size of the memory instance by a specified number of webassembly pages (each one is 64kb in size). examples creating a new memory object there are two ways to get a webassembly.memory object. the first way is to construct it from javascript. the following example creates a new webassembly memory instance with an initial size of 10 pages (640kib), and a maximum size of 100 pag...
... 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0growchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noop...

WebAssembly.Table - JavaScript
es can currently only store function references, but this will likely be expanded in the future. constructor webassembly.table() creates a new table object. instance properties table.prototype.length returns the length of the table, i.e. the number of elements. instance methods table.prototype.get() accessor function — gets the element stored at a given index. table.prototype.grow() increases the size of the table instance by a specified number of elements. table.prototype.set() sets an element stored at a given index to a given value. examples creating a new webassembly table instance the following example (see table2.html source code and live version) creates a new webassembly table instance with an initial size of 2 elements. we then print out the table length an...
... 52notes notes disabled in the firefox 52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0growchrome full support 57edge full support 16firefox full support 52notes full support 52notes notes disabled in the firefox 52 extended support release (esr).ie no support noop...

2015 MDN Fellowship Program - Archive of obsolete content
ground and mozilla priorities. required skills and experience experienced web developer with expertise in javascript, css, html and/or other key technologies. proficient in written and spoken english. mentor information chris mills, senior technology writer, mozilla developer network. github: chrisdavidmills twitter: @chrisdavidmills why increase the reach and impact of your expertise grow your skills beyond coding and managing to educating and communicating build something used by hundreds of thousands (or more) developers worldwide directly impact and grow the value of the open web when application deadline: april 1, 2015 orientation: early june (dates tbd) graduation: august 11-12, 2015 where orientation: a mozilla location (tbd). core program: conducted at your normal...

notifications - Archive of obsolete content
here's a typical example. when the message is clicked, a string is logged to the console. var notifications = require("sdk/notifications"); notifications.notify({ title: "jabberwocky", text: "'twas brillig, and the slithy toves", data: "did gyre and gimble in the wabe", onclick: function (data) { console.log(data); // console.log(this.data) would produce the same result. ...

Alerts and Notifications - Archive of obsolete content
basic modal alert alert('hello'); pop-ups the following code presents a non-modal pop-up, which automatically disappears after an appropriate delay. it uses nsialertsservice. ...

Forms related code snippets - Archive of obsolete content
l">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> <td class="zdp-empty-cell">&nbsp;</td> </tr> </tbody> </table> editable <select> fields the content of the <select> element is actually static and not editable. if you want to emulate an editable select through a <fieldset> of radioboxes and textboxes (written in pure css, without javascript), please see this example. autogrowing <textarea> this example shows how to make a textarea really autogrowing during a typing. insert some custom text in a <textarea> this example shows how to insert some html tags or smiles or any custom text in a textarea. image preview before upload the filereader.prototype.readasdataurl() method can be useful, for example, to get a preview of an image before uploading it.[article] this ex...

Examples and demos from articles - Archive of obsolete content
er with full unicode support this little framework consists of a complete cookies reader/writer with unicode support. xml to json conversion snippets (jxon) jxon (lossless javascript xml object notation) is a generic name by which is defined the representation of javascript objects using xml. there are no real standards for this conversion, but some conventions begin to appear on the web. autogrowing <textarea> this example shows how to make a textarea really autogrowing during a typing. insert some custom text in a <textarea> this example shows how to insert some html tags or smiles or any custom text in a textarea. using setinterval within animations sometimes a page uses dozens and dozens of animations. in such a condition is difficult and unnatural to keep track of all events star...

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
the difference between having separate modules and having a single module with separate submodules is that the submodules all share the same file for registering components (the famous myextension.cpp file), and when compiled they create a single dynamic library. the decision to split a module into submodules is all about code orga...

Appendix: What you should know about open-source software licenses - Archive of obsolete content
the trademarked parts have been scrubbed away by a community effort. the firefox web browser, developed by the mozilla foundation, does not permit modifications of its name or trademarked icon. for this reason, the debian project, which distributes free software as a volunteer effort, has a browser based on firefox, but with a different name and logo. document licenses as open-source software grows in popularity, people have begun thinking about applying its principles to content other than software, to allow anyone to duplicate, distribute, and modify it freely. because oss licenses aren’t directly applicable to these other media, a number of other licenses for documents and other resources have appeared, such as the following: gnu free documentation license (gfdl) creative commons...

Chapter 1: Introduction to Extensions - Archive of obsolete content
pers were largely left to fend for themselves1; however, now there's a considerable store of knowledge. because firefox and its extensions are designed to support multiple languages, excellent extensions come from all over the world, and can be quickly localized by anyone interested. this lowers the threshold both to using and to developing extensions; that fact, combined with firefox's rapidly growing popularity, has created a positive feedback loop, with the number of extension users and extension developers growing explosively—there are now more than 7000 extensions and themes published at the firefox add-ons site (https://addons.mozilla.org). what you can do with extensions let's look at what features extensions can add, and some actual examples of extensions. single feature extensi...

Appendix D: Loading Scripts - Archive of obsolete content
each of these means has its own advantages and disadvantages, as well as its own quirks which may trap the unwary. ...

Introduction - Archive of obsolete content
technologies. even this project, called xul school, covers several other technologies such as javascript, css, xbl and xpcom. xulrunner xulrunner includes the gecko rendering engine, the necko networking library, and several other components that provide os-independent file management, accessibility, and localization, among others. it is this very powerful platform that has allowed such a fast growth of the development community surrounding mozilla and firefox. xulrunner is available in binary form at the xulrunner page, and it is the base for several projects, such as songbird, miro and eudora. there's a very comprehensive list of xulrunner applications in the xulrunner hall of fame. gecko the gecko engine is the part of firefox used to render web pages and its own user interface. you c...

Mozilla Documentation Roadmap - Archive of obsolete content
s that you can follow using a feed reader, such as thunderbird. here are some important feeds you should consider following: planet mozilla. this is the ultimate source for everything related to mozilla. it brings together the feeds of most mozilla employees, as well as several other members of the mozilla community. feeds are added frequently, so the information available through it will only grow with time. it can be hard to follow due of the sheer mass of information coming out of it (dozens of posts per day), but you'll certainly be up to date with pretty much everything if you take the time to read at least part of it. the about:mozilla newsletter is a weekly publication that includes the highlights of what is posted at planet mozilla. it is a good alternative if you feel planet mozil...

Setting Up a Development Environment - Archive of obsolete content
rce. you can even change styles, attributes and execute javascript code in it, although that's not completely reliable. javascript debugger the name says it all. the venkman javascript debugger is a great way to trace execution of your javascript code. to debug extension and browser code, right-click on the loaded scripts panel and uncheck exclude browser files. the list of loaded scripts will grow long to include all of the scripts in firefox. having our file naming conventions prove very useful in this case. you can set breakpoints, step in and out of methods, and even get profiling information from javascript execution. you can inspect variables, keep track of watch expressions, and evaluate arbitrary js at any point in execution. this extension has seen little maintenance in quite some...

User Notifications and Alerts - Archive of obsolete content
need to handle clicks on the alert box. the image can have any size, but it is recommended that you use a medium, fixed size. the main disadvantage of using alerts is that support for the alerts service is not guaranteed for all platforms and firefox versions. support for windows has existed since firefox 2. for mac os x, support was added on firefox 3, and only through a third-party tool called growl. on linux systems, we have confirmed that it works on firefox 3 on ubuntu linux, but we haven't tested all distributions and firefox versions. because of the inconsistent support and temporary nature of these alerts, we don't recommend using this service to show information the user needs to know and can't get in any other way. custom alerts creating custom solutions for alerting the user is ...

Index - Archive of obsolete content
e xul properties, xul reference no summary! 1424 docshell xul properties, xul reference no summary! 1425 documentcharsetinfo xul properties, xul reference no summary! 1426 editable xul properties, xul reference no summary! 1427 editingcolumn xul properties, xul reference no summary! 1428 editingrow xul properties, xul reference no summary! 1429 editingsession xul properties, xul reference no summary! 1430 editor xul properties, xul reference no summary! 1431 editortype xul properties, xul reference no summary! 1432 emptytext xul properties, xul reference no summary! 1433 enablecolumndrag...

Notes on HTML Reflow - Archive of obsolete content
userdefined, for "special situations". currently, this is only used by the viewport frame to schedule a reflow to reflow all of the viewport's fixed-position frames. we should probably try to eliminate it. an incremental reflow may damage other parts of the frame hierarchy; for example, changing the size of the font used in a specific paragraph may cause the paragraph to grow or shrink. a container must therefore propagate any damage that the incremental reflow of the child frame caused, possibly reflowing other children as well. dirty reflows if several incremental changes occur in the same part of the frame hierarchy, it is possible to have several incremental reflows targeted at nearby frames. in this case, it is likely that the individual incremental reflows will ...

Space Manager Detailed Design - Archive of obsolete content
. the class is only used in the layout module and cannot be exported outside of that module (nor does it need to be). it is not a general purpose class, and is not intended to be subclasses . here is the class declaration, taken from the source file as of 01.08.02 /** * class for dealing with bands of available space. the space manager * defines a coordinate space with an origin at (0, 0) that grows down * and to the right. */ class nsspacemanager { public: nsspacemanager(nsipresshell* apresshell, nsiframe* aframe); ~nsspacemanager(); void* operator new(size_t asize); void operator 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...

The new nsString class implementation (1999) - Archive of obsolete content
a requirement for gecko very efficient buffer manipulation architecture the fundamental data type in the new architecture is struct nsstrimpl, given below: struct nsstrimpl { print32 mlength; void* mbuffer; print32 mcapacity; char mcharsize; char munused; // and now for the nsstrimpl api... ...

flex - Archive of obsolete content
elements with larger flex values will be made larger than elements with lower flex values, at the ratio determined by the two elements. the actual value is not relevant unless there are other flexible elements within the same container. ...

resizeafter - Archive of obsolete content
« xul reference home resizeafter type: one of the values below this attribute indicates which element to the right or below the splitter should be resized when the splitter is repositioned. closest the element immediately to the right or below the splitter resizes. farthest the element that is the farthest away from the splitter to the right or below the splitter resizes. grow the elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size. flex the closest flexible element resizes. see also resizebefore ...

Index - Archive of obsolete content
lgtype xul properties, xul reference no summary! 693 docshell xul properties, xul reference no summary! 694 documentcharsetinfo xul properties, xul reference no summary! 695 editable xul properties, xul reference no summary! 696 editingcolumn xul properties, xul reference no summary! 697 editingrow xul properties, xul reference no summary! 698 editingsession xul properties, xul reference no summary! 699 editor xul properties, xul reference no summary! 700 editortype xul properties, xul reference no summary! 701 emptytext xul properties, xul reference no summary! 702 enablecolumndrag ...

Property - Archive of obsolete content
ion currentpage currentpane currentset currenturi customtoolbarcount database datasources date dateleadingzero datevalue decimalplaces decimalsymbol defaultbutton defaultvalue description dir disableautocomplete disableautocomplete disableautoselect disabled disablekeynavigation dlgtype docshell documentcharsetinfo editable editingcolumn editingrow editingsession editor editortype emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increm...

Things I've tried to do with XUL - Archive of obsolete content
nt something else? vlad: the boxobject width/height are the actual width and height of the box, regardless of the actual visible portion of the box (clipped by the window borders, for example). this is assuming no scrolling is going on. resize event problems going with the inability to obtain the clientwidth/clientheight of xul elements, it's impossible to handle the "resize" event yourself to grow/shrink content as needed -- as you grow the content, when you shrink the window, the content will simply be clipped (because now it has a bigger size than the window). you have no way of finding out what the clipped size is, so you can never shrink the content. an ugly workaround for this problem might include nesting an invisible html-element in order to access its "clientwidth" method: <window...

Document Object Model - Archive of obsolete content
n element is visible or not. we'll change the progress meter so that its initially hidden. also, we'll add an id attribute so that we can refer to it in a script to show and hide it. while we're at it, let's also hide the splitter and results tree as we only need to show them after a search is performed. <tree id="results" hidden="true" flex="1"> . . . <splitter id="splitbar" resizeafter="grow" hidden="true"/> <hbox> <progressmeter id="progmeter" value="50%" style="margin: 4px;" hidden="true"/> we've added the hidden attribute and set the value to true. this causes the element to be hidden when it first appears. next, let's add a function that is called when the find button is pressed. we'll put scripts in a separate file findfile.js. in the last section, we added the script...

Grids - Archive of obsolete content
y because both rows are flexible, although the first row is more so. the cell in the first column and first row (the cherry button) will be flexible by a factor of 5 horizontally and flexible by a factor of 10 vertically. the next cell, (lemon) will only be flexible vertically. the flex attribute has also been added to the grid element so that the entire grid is flexible, otherwise it would only grow in one direction. column spanning there is no means of making a cell span a particular number of multiple columns or rows (see discussion for a way of achieving the same effect). however, it is possible to make a row or column that spans the entire width or height of the grid. to do this, just add an element inside the rows element that isn't inside a row element. you can use a box type for ex...

Localization - Archive of obsolete content
el="&results.location;" flex="2"/> <treecol id="size" label="&results.size;" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="mozilla"/> <treecell label="/usr/local"/> <treecell label="&bytes.before;2520&bytes.after;"/> </treerow> </treeitem> </treechildren> </tree> <splitter id="splitbar" resizeafter="grow" style="display: none;"/> <spacer class="titlespace"/> <hbox> <progressmeter id="progmeter" value="50%" style="display: none;"/> <spacer flex="1"/> <button id="find-button" label="&button.find;" oncommand="dofind()"/> <button id="cancel-button" label="&button.cancel;" oncommand="window.close();"/> </hbox> </vbox> </window> each text string has been replac...

Tree Box Objects - Archive of obsolete content
o go up. the scrollbypages() function scrolls by a number of pages and is called automatically when the user presses the page up or page down keys while the tree is focused. a page is equal to the number of visible rows. for example if the tree shows 10 rows at a time, a page will be equivalent to 10 rows. this is a convenient method since when the user resizes a flexible tree, the page size will grow and shrink, so you don't need to calculate the page size manually. this isn't too hard to calculate manually anyway since the tree box object also provides a getpagelength() function which returns the number of rows in a page. in the scrolling example above, getpagelength() would return four. note that in firefox 1.0 and mozilla 1.7 and earlier, the getpagelength() function is called getpagecou...

XUL element attributes - Archive of obsolete content
a tree to indicate that content elements should not be generated. this results in a performance enhancement, but you will not be able to use the dom functions to retrieve the tree rows. flex type: string (representing an integer) indicates the flexibility of the element, which indicates how an element's container distributes remaining empty space among its children. flexible elements grow and shrink to fit their given space. elements with larger flex values will be made larger than elements with lower flex values, at the ratio determined by the two elements. the actual value is not relevant unless there are other flexible elements within the same container. once the default sizes of elements in a box are calculated, the remaining space in the box is divided among the flexible elem...

XML - Archive of obsolete content
ed by gecko into the interface. the heavy lifting is done by the ingredients rather than the chef. this arrangement creates new possibilities for truly cross-platform web applications, application serving, web appliances and embedded systems, and all sort of other things. like all really good technologies, xul and its xp cousins are already being used in ways not imagined by their creators and growing propitiously out of control. author: ian t. oeschger other documents: xml in mozilla original document information author(s): ian t. oeschger last updated date: november 13, 2001 copyright information: copyright (c) ian t. oeschger ...

splitter - Archive of obsolete content
n of the splitter. resizeafter type: one of the values below this attribute indicates which element to the right or below the splitter should be resized when the splitter is repositioned. closest the element immediately to the right or below the splitter resizes. farthest the element that is the farthest away from the splitter to the right or below the splitter resizes. grow the elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size. flex the closest flexible element resizes. resizebefore type: one of the values below this attribute indicates which element to the left or above the splitter should be resized when the splitter is repositio...

ArrayBuffer.transfer() - Archive of obsolete content
fined, the bytelength of the oldbuffer is used. this operation leaves oldbuffer in a detached state. syntax arraybuffer.transfer(oldbuffer [, newbytelength]); parameters oldbuffer an arraybuffer object from which to transfer. newbytelength the byte length of the new arraybuffer object. return value a new arraybuffer object. description the arraybuffer.transfer() method allows you to grow and detach arraybuffer objects. the ability to grow an arraybuffer without copying has the advantage of being much faster for large buffers (similar to realloc). the ability to detach an arraybuffer gives the developer explicit control over when the underlying memory is released. this avoids having to drop all references and wait for garbage collection. examples var buf1 = new arraybuffer(40);...

XForms Custom Controls - Archive of obsolete content
and with these new uses, more and more flexibility will be desired from the controls. introducing custom controls into your environment may be just the solution you are looking for. for example, you might want to render images that are held inside an instance document or you would like to show a disabled trigger when its bound node becomes irrelevant rather than having it not display (the curre...

Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
original document information author(s): beth epperson last updated date: 7 november 2014 ...

The Business Benefits of Web Standards - Archive of obsolete content
per click campaigns. increase website traffic maintain contact with your user on multiple platforms standards-based code and cross-platform go hand in hand. while some browsers have quirks that cause different behavior by platform, mozilla-based browsers are designed to behave identically on all supported platforms (mac, linux, unix, windows...) web content is increasingly being accessed by a growing number of user agents other than browsers, or by browsers on different platforms - for example mobile telephones. feed content such as rss and atom simply will not work without being implemented by following the requisite standard. assumptions about the user and their platform based on erroneous thinking about the anticipated user community are inevitably always wrong. it does not follow for ...

Building up a basic demo with A-Frame - Game development
with it too. note: you can also check it out on github. that was easier than you thought, right? a-frame targets web developers by offering easy to use web markup and all the advantages that brings, such as javascript manipulation. it is easy to start with, but also provides a powerful api for advanced concepts, as well as dealing with cross browser differences and suchlike. the community is growing, just like the number of supported vr devices — it's a great time to start experimenting with such frameworks. ...

Building up a basic demo with Three.js - Game development
rotation rotating is straighforward. you add a value to a given direction of rotation on each frame. add this line of code, right after the requestanimationframe() invocation inside the render function: cube.rotation.y += 0.01; this rotates the cube on every frame, by a tiny bit, so the animation looks smooth. scaling we can also scale an object. applying a constant value, we would make it grow, or shrink just once. let's make things more interesting. first, we implement a helper variable, called t, for counting elapsed time. add it right before the render() function: var t = 0; now let's increase the value by a given constant value, on each frame of the animation. add the following lines, just below the requestanimationframe() invocation: t += 0.01; torus.scale.y = math.abs(math.si...

Randomizing gameplay - Game development
es. below are some suggestions as to how you could expand our little game, to get you started: add a second ball or paddle. change the color of the background on every hit. change the images and use your own. grant extra bonus points if bricks are destroyed rapidly, several-in-a-row (or other bonuses of your choosing.) create levels with different brick layouts. be sure to check the ever growing list of examples and the official documentation, and visit the html5 gamedevs forums if you ever need any help. you could also go back to this tutorial series' index page. « previous ...

2D maze game with device orientation - Game development
vibration apis to enhance the gameplay and is built using the phaser framework. basic javascript knowledge is recommended to get the most from this tutorial. example game by the end of the tutorial you will have a fully functional demo game: cyber orb. it will look something like this: phaser framework phaser is a framework for building desktop and mobile html5 games. it’s quite new, but growing rapidly thanks to the passionate community involved in the development process. you can check it out on github where it’s open sourced, read the online documentation and go through the big collection of examples. the phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea its...

Code splitting - MDN Web Docs Glossary: Definitions of Web-related terms
to prevent the requirement of downloading ginormous files, scripts can be split into multiple smaller files. then features required at page load can be downloaded immediately with additional scripts being lazy loaded after the page or application is interactive, thus improving performance. ...

Flex Item - MDN Web Docs Glossary: Definitions of Web-related terms
the direct children of a flex container (elements with display: flex or display: inline-flex set on them) become flex items. continuous runs of text inside flex containers will also become flex items. ...

JavaScript - MDN Web Docs Glossary: Definitions of Web-related terms
antly different in their syntax, semantics, and use cases. javascript is primarily used in the browser, enabling developers to manipulate webpage content through the dom, manipulate data with ajax and indexeddb, draw graphics with canvas, interact with the device running the browser through various apis, and more. javascript is one of the world's most commonly-used languages, owing to the recent growth and performance improvement of apis available in browsers. origins and history conceived as a server-side language by brendan eich (then employed by the netscape corporation), javascript soon came to netscape navigator 2.0 in september 1995. javascript enjoyed immediate success and internet explorer 3.0 introduced javascript support under the name jscript in august 1996. in november 1996, ne...

Main Axis - MDN Web Docs Glossary: Definitions of Web-related terms
se and your main axis will run top to bottom of the page in the block direction. on the main axis you can control the sizing of flex items by adding any available space to the items themselves, by way of flex properties on the items. ...

Fundamental CSS comprehension - Learn web development
he rounded corners set on the main card container. give the footer a background gradient that goes from lighter to darker, plus rounded corners that fit in with the rounded corners set on the main card container. float the image to the right so that it sticks to the right hand side of the main business card contents, and give it a max-height of 100% (a clever trick that ensures that it will grow/shrink to stay the same height as its parent container, regardless of what height it becomes.) beware! there are two errors in the provided rulesets. using any technique that you know, track these down and fix them before moving on. new rulesets you need to write: write a ruleset that targets both the card header, and card footer, giving them both a computed total height of 50px (inclu...

Sizing items in CSS - Learn web development
ering if you do use percentages in this way. min- and max- sizes in addition to giving things a fixed size, we can ask css to give an element a minimum or a maximum size. if you have a box that might contain a variable amount of content, and you always want it to be at least a certain height, you could set the min-height property on it. the box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height. in the example below you can see two boxes, both with a defined height of 150 pixels. the box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels. this is very useful for dealing with variable amounts of content while avoiding overflow...

Flexbox - Learn web development
the real value of flexbox can be seen in its flexibility/responsiveness — if you resize the browser window, or add another <article> element, the layout continues to work just fine. flex: shorthand versus longhand flex is a shorthand property that can specify up to three different values: the unitless proportion value we discussed above. this can be specified individually using the flex-grow longhand property. a second unitless proportion value — flex-shrink — that comes into play when the flex items are overflowing their container. this specifies how much of the overflowing amount is taken away from each flex item's size, to stop them overflowing their container. this is quite an advanced flexbox feature, and we won't be covering it any further in this article. the minimum siz...

Introduction to CSS layout - Learn web development
perties that can be applied to the flex container, there are properties that can be applied to the flex items. these properties, among other things, can change the way that the items flex, enabling them to expand and contract to fit into the available space. as a simple example of this, we can add the flex property to all of our child items, with a value of 1. this will cause all of the items to grow and fill the container, rather than leaving space at the end. if there is more space then the items will become wider; if there is less space they will become narrower. in addition, if you add another element to the markup the items will all become smaller to make space for it — they will adjust size to take up the same amount of space, whatever that is. flexbox example 2 * {box-sizing:...

How do I start to design my website? - Learn web development
an place orders. second, setting out actionable steps leads to new questions you'll need to answer. usually there turn out to be more questions than we originally thought. (for example, should i learn how to do all this myself, ask someone to do it for me, or use third-party services?) conclusion as you can see, the simple idea "i want to make a website" generates a long to-do list, which only grows longer as you think about it. soon it may look overwhelming, but don't panic. you don't need to answer all the questions and you don't need to do everything on your list. what matters is to have a vision of what you want and how to get there. once you have that clear vision, you need to decide how and when to do it. break down big tasks into small, actionable steps. and those small steps will ad...

UI pseudo-classes - Learn web development
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 use a transition to make it nicely animate into view when the radio is selected/checked. the advantage of using a transform rather than transitioning width/height is that you can use transform-origin to make it grow from the center of the circle, rather than having it appear to grow from the circle's corner. :default and :indeterminate as mentioned above, the :default pseudo-class matches radios/checkboxes that are checked by default, on page load, even when unchecked. this could be useful for adding an indicator to a list of options to remind the user what the defaults (or starting options) were, in case ...

JavaScript basics - Learn web development
language is different from the tools listed above. you can learn more in mdn's javascript learning area, as well as in other parts of mdn. the section below introduces some aspects of the core language, and offers an opportunity to play with a few browser api features too. have fun! a hello world! example javascript is one of the most popular modern web technologies! as your javascript skills grow, your websites will enter a new dimension of power and creativity. however, getting comfortable with javascript is more challenging than getting comfortable with html and css. you may have to start small, and progress gradually. to begin, let's examine how to add javascript to your page for creating a hello world! example. (hello world! is the standard for introductory programming examples.) i...

Publishing your website - Learn web development
ges, which allows you to expose website code live on the web. google app engine is a powerful platform that lets you build and run applications on google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. see how do you host your website on google app engine? for more information. these options are usually free, but you may outgrow the limited feature-set. using a web-based ide such as codepen there are a number of web apps that emulate a website development environment, allowing you to enter html, css and javascript, and then display the result of that code as a website — all in one browser tab. generally speaking, these tools are relatively easy, great for learning, good for sharing code (for example, if you want to s...

Tips for authoring fast-loading HTML pages - Learn web development
phically distributed network of servers that work together to shorten the distance between the user and your website. cdns store cached versions of your website and serve them to visitors via the network node closest to the user, thereby reducing latency. further reading: understanding cdns reduce domain lookups since each separate domain costs time in a dns lookup, the page load time will grow along with the number of separate domains appearing in css link(s) and javascript and image src(es). this may not always be practical; however, you should always take care to use only the minimum necessary number of different domains in your pages. cache reused content make sure that any content that can be cached, is cached, and with appropriate expiration times. in particular, pay attention...

Adding vector graphics to the Web - Learn web development
text in vector images remains accessible (which also benefits your seo). svgs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via css or scripted via javascript. so why would anyone want to use raster graphics over svg? well, svg does have some disadvantages: svg can get complicated very quickly, meaning that file sizes can grow; complex svgs can also take significant processing time in the browser. svg can be harder to create than raster images, depending on what kind of image you are trying to create. svg is not supported in older browsers, so may not be suitable if you need to support older versions of internet explorer with your web site (svg started being supported as of ie9.) raster graphics are arguably better...

From object to iframe — other embedding technologies - Learn web development
ey can be downloaded or read on a separate page, rather than embedding them in a webpage. the case against plugins once upon a time, plugins were indispensable on the web. remember the days when you had to install adobe flash player just to watch a movie online? and then you constantly got annoying alerts about updating flash player and your java runtime environment. web technologies have since grown much more robust, and those days are over. for virtually all applications, it's time to stop delivering content that depends on plugins and start taking advantage of web technologies instead. broaden your reach to everyone. everyone has a browser, but plugins are increasingly rare, especially among mobile users. since the web is easily used without any plugins, people would rather just go to ...

Video and audio content - Learn web development
href="rabbit320.mp4">link to the video</a> instead.</p> </video> the resulting ui looks something like this: the new features are: width and height you can control the video size either with these attributes or with css. in both cases, videos maintain their native width-height ratio — known as the aspect ratio. if the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default. autoplay makes the audio or video start playing right away, while the rest of the page is loading. you are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying. loop makes the video (or audio) start playing again whenever it finishe...

HTML table basics - Learn web development
e to look like so: <td>hi, i'm your first cell.</td> <td>i'm your second cell.</td> <td>i'm your third cell.</td> <td>i'm your fourth cell.</td> as you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. each <td> element creates a single cell and together they make up the first row. every cell we add makes the row grow longer. to stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element ('tr' stands for 'table row'). let's investigate this now. place the four cells you've already created inside <tr> tags, like so: <tr> <td>hi, i'm your first cell.</td> <td>i'm your second cell.</td> <td>i'm your third cell.</td> <td>i'm your fourth cell.</td> <...

Basic math in JavaScript — numbers and operators - Learn web development
ing a browser api called the canvas api. there is no need to worry about how this works — just concentrate on the math for now. the width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50. open in new window in the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. let's try the following: change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator. change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator. change t...

Server-side web frameworks - Learn web development
ramming language. back in the early days of the web, many people learned perl because of a wonderful perl library called cgi. it was simple enough to get started without knowing much about the language and powerful enough to keep you going. mojolicious implements this idea using bleeding edge technologies. some of the features provided by mojolicious are: a real-time web framework, to easily grow single-file prototypes into well-structured mvc web applications. restful routes, plugins, commands, perl-ish templates, content negotiation, session management, form validation, testing framework, static file server, cgi/psgi detection, and first-class unicode support. a full-stack http and websocket client/server implementation with ipv6, tls, sni, idna, http/socks5 proxy, unix domain socket,...

Introduction to client-side frameworks - Learn web development
p until then, composed of static documents. the web became not just a place to read things, but to do things. javascript’s popularity steadily increased. developers who worked with javascript wrote tools to solve the problems they faced, and packaged them into reusable packages called libraries, so they could share their solutions with others. this shared ecosystem of libraries helped shape the growth of the web. now, javascript is an essential part of the web, used on 95% of all websites, and the web is an essential part of modern life. users write papers, manage their budgets, stream music, watch movies, and communicate with others over great distances instantaneously, with text, audio or video chat. the web allows us to do things that used to be possible only in native applications insta...

TypeScript support in Svelte - Learn web development
layground. first class typescript support has been svelte's most requested feature for quite some time. thanks to the hard work of the svelte team, together with many contributors, we have an official solution ready to be put to the test. in this section we'll show you how to setup a svelte project with typescript support to give it a try. why typescript? recently typescript has seen enormous growth. from last year's github octoverse report we can see that typescript is the 7th most used and 5th fastest growing language used on github. according to stackoverflow's 2019 developer survey it is the third most loved language, right behind rust and python. so typescript is going through a great phase of adoption. typescript's main advantages are: early spotted bugs: the compiler checks typ...

Strategies for carrying out testing - Learn web development
to run virtual machine emulations; each operating system you emulate can take up a lot of memory. you tend to choose the hard drive space you want for each install; you could get away with probably 10gb, but some sources recommend up to 50gb or more, so the operating system will run reliably. a good option provided by most virtual machine apps is to create a dynamically allocated hard drive that grows and shrinks as the need arises. to use a virtual box, you need to: get hold of an installer disk or image (e.g. iso file) for the operating system you want to emulate. virtual box is unable to provide these; most, like windows oses, are commercial products that can't be freely distributed. download the appropriate installer for your operating system and install it. open the app; you'll be...

Software accessibility: Where are we today?
one great place to go and learn about this industry is the csun conference in los angeles, which takes place every year in mid-late march. alternative ways to access the screen's contents most computer programs are so visual, they are difficult or impossible to use for persons with visual impairments. this need not be the case. here's how non-print readers use desktop sof...

Debugging Internet Explorer
to run internet explorer in a single process add a dword registry value to hkey_current_user\software\microsoft\internet explorer\main called tabprocgrowth and set it to 0. edgehtml lets you extract various debugging dumps through a special webdriver ms/dumpinternal url. use jrmuizel's script to get started. ...

Embedding the editor
roblem with this ownership model is that there can be only one editor per <editor> tag, yet the document loaded in the <iframe> may itself contain multiple <iframe>s (consider a frameset document, or a document itself containing an <html:iframe>). currently, composer does not deal gracefully with such documents. one editor per window limitation the current composer window xul/c++ architecture has grown up with the assumption that there can be just one <editor> tag per window. at window construction time, we get the editorshell from the <editor> element, and put that into window.editorshell. thence, lots of javascript in editor.js, composercommands.js and the various dialog js files assume that they can get at the one true editor via window.editorshell. this assumption was short-sighted, and mu...

Infallible memory allocation
in extremely low memory conditions, as described in how can memory allocation be infallible?, the application may terminate if an infallible allocator can't find the memory you requested. if you don't know whether or not the memory will be large, use the standard malloc() routine. be sure to check the result for null. be warned that any allocation that's controlled by the user or web content may grow bigger than you expect; people and pages do surprising things all the time! when instantiating objects, the new operator creates them infallibly by default. if you want to allocate them fallibly, use the syntax new (fallible) foo(). when in doubt, use the infallible allocator and don't null check. ns_alloc() is also infallible. explicitly infallible memory allocators the following memo...

MathML Demo: <mo> - operator, fence, separator, or accent
+ b ⋫ c × d a + b ⋪ c ÷ d a + b ↚ c ⋅ d a + b ↛ c * d a + b ⇍ c × d a + b ⇏ c ÷ d a + b ⇎ c ⋅ d a + b ↮ c * d fences latex fences that begin with \left and \right are stretchy. they grow vertically to the height and depth of the enclosed math run. this growth is continuous and symmetric. here are examples of the standard latex fences ( x ) ⁢ [ y ] ⁢ { 1 } ⁢ ⟨ t ⟩ ⁢ ⌊ a ⌋ ⌈ . ⌉ | π | ⁢ || Σ || and / f / ⁢ \ n \ ↕ ℜ ↕ ⇕ 1.0 ⇕ ↑ x 2 ↑ ⁢ ⇑ x a 2 ⇑ ↓ x ↓ ⇓ m ⇓ . here are some example...

Mozilla Development Tools
king out source code from one of these is preferable to downloading an archived snapshot, as you get up-to-the-minute changes. mxr you can browse the up-to-the-minute latest version of the source code online through a massively-hyperlinked source code browser (based on lxr) that lets you cross-reference function and variable names. bonsai bonsai is tree control (get it?). it is our home-grown web-based tool for watching the up-to-the-minute goings-on in our cvs repository (viewing checkins and log messages, reading diffs, etc.) tinderbox tinderbox is for knowing when the tree is in flames. it is our home-grown web-based tool for watching the progress of the continuous builds that we run on multiple platforms. it is how we are able to tell when a checkin has broken the build on s...

Investigating leaks using DMD heap scan mode
frames related to the allocator. caveat: i think block_analyzer.py does not attempt to clamp the address you pass into it, so if it is an offset from the start of the block, it won’t find it. block_analyzer.py will return a series of entries that look like this (with the [...] indicating where i have removed things): 0x7f089306b000 size = 4096 bytes at byte offset 2168 nsattrandchildarray::growby[...] nsattrandchildarray::insertchildat[...] [...] 0x7f089306b000 is the address of the block that contains $leakaddr. 144 bytes is the size of that block. that can be useful for confirming your guess about what class the block actually is. the byte offset tells you were in the block the pointer is. this is mostly useful for larger objects, and you can potentially combine this with debuggi...

Leak-hunting strategies and tips
the most common source of hard-to-fix leaks is ownership cycles. if you can avoid crea...

TraceMalloc
sdleak.tree.raw # frobulate trees to remove extraneous junk perl source/tools/rb/fix-macosx-stack.pl sdleak.tree.raw > sdleak.tree you can also use the leakstats program to analyze a log for shutdown leaks. it will produce a report like the following. leaks: 382739 bytes, 3465 allocations maximum heap size: 7751799 bytes 62095212 bytes were allocated in 391091 allocations. detecting memory usage growth in a running process to do this, dump the existing allocations to a file by calling the function tracemallocdumpallocations from javascript. you can use the following web page to do so. <script type="text/javascript"> var filename = window.prompt("filename to log: "); if (filename) tracemallocdumpallocations(filename); </script> one can then use the script tools/trace-malloc/diff...

NSS API Guidelines
iles together. these header files have a trailing "m." functions and types there are a number of ways of doing things in our api, as well as naming decisions for functions that can affect the usefulness of our library. if our library is self-consistent with how we accomplish these tasks, it makes it easier for the developer to learn how to use our functions. this section of the document should grow as we develop our api. first some general rules. these rules are derived from existing coding practices inside the security library, since consistency is more important than debates about what might look nice. public functions should have the form layer_body(), where layer is an all caps prefix for what layer the function lives in, and body is concatenated english words, where the beginning l...

Overview of NSS
ps page (or this one). the nss libraries passed the niscc tls/ssl and s/mime test suites (1.6 million test cases of invalid input data). complete software development kit in addition to libraries and apis, nss provides security tools required for debugging, diagnostics, certificate and key management, cryptography module management, and other development tasks. nss comes with an extensive and growing set of documentation, including introductory material, api references, man pages for command-line tools, and sample code. nss is available as source and shared (dynamic) libraries. every nss release is backward compatible with previous releases, allowing nss users to upgrade to the new nss shared libraries without recompiling or relinking their applications. open-source licensing and distrib...

Python binding for NSS
principal developer of python-nss is john dennis jdennis@redhat.com. additional contributors are: miloslav trmač mitr@redhat.com bohuslav kabrda slavek@redhat.com the python-nss binding is still young despite having been utilized in several major software projects. thus it's major version number is still at zero. this is primarily so the developers can make changes to the api as experiece grows with it. for example it is already known there are some naming inconsistencies. elments of the api are probably not ideally partitioned into proper namespaces via python modules. some functionality and interface have already been deprecated due to lessons learned. thus at some point in the future when it is felt the api has solidified and been further proven in the field a 1.0 release will be ma...

NSS functions
nssrwlock_new mxr 3.2 and later nssrwlock_unlockread mxr 3.2 and later nssrwlock_unlockwrite mxr 3.2 and later nsssmime_versioncheck mxr 3.2.1 and later port_alloc mxr 3.2 and later port_arenaalloc mxr 3.2 and later port_arenagrow mxr 3.2 and later port_arenamark mxr 3.2 and later port_arenarelease mxr 3.2 and later port_arenastrdup mxr 3.2 and later port_arenaunmark mxr 3.2 and later port_arenazalloc mxr 3.2 and later port_free mxr 3.2 and later...

sslfnc.html
code. description the cipherprefsetdefault function enables or disables individual cipher suites globally. you typically call this in response to changes in user-controlled settings. you must call this function once for each cipher you want to enable or disable. to enable or disable cipher suites for an individual socket, use ssl_cipherprefset. the set of available ssl cipher suites may grow from release to release of nss. applications will find it desirable to determine, at run time, what ssl2 cipher kinds and ssl3 cipher suites are actually implememted in a particular release. applications may disable any cipher suites that they don't know about (for example, that they cannot present to the user via a gui). to that end, nss provides a table that can be examined at run time. all asp...

TLS Cipher Suite Discovery
gories, and the number of possible combinations of all those choices is large. tls does not allow all possible combinations of choices from those categories to be used. instead, tls allows only certain well-defined combinations of those choices, known as cipher suites, defined in the ietf rfc standards. each cipher suite is represented by a 16-bit number. the number of well-defined cipher suites grows with time, and no tls implementation offers all known cipher suites at all times. an implementation that claimed to offer all defined cipher suites would only be able to make that claim for a short time until another new cipher suite was defined. at any time, any real implementation implements some subset of the complete set of well-defined cipher suites. each new release of a tls implementatio...

Utility functions
nssrwlock_new mxr 3.2 and later nssrwlock_unlockread mxr 3.2 and later nssrwlock_unlockwrite mxr 3.2 and later nsssmime_versioncheck mxr 3.2.1 and later port_alloc mxr 3.2 and later port_arenaalloc mxr 3.2 and later port_arenagrow mxr 3.2 and later port_arenamark mxr 3.2 and later port_arenarelease mxr 3.2 and later port_arenastrdup mxr 3.2 and later port_arenaunmark mxr 3.2 and later port_arenazalloc mxr 3.2 and later port_free mxr 3.2 and later...

Necko Architecture
converters stremcnv - stream converter service these libraries will change with time and illustrate the modularity of necko. architecture after a few iterations of our original design, the current necko architecture looks something like this: urls necko's primary responsibility is moving data from one location, to another location. these locations are represented in the form we have all grown to know and love as uris. a url implements the uri interface. the uri interface does resource-generic things like getting/setting the scheme, or getting/setting the spec (everything beyond the first colon ':'). urls provide getting/setting of paths, hosts, ports, filenames, etc. urls are the most commonly used form of a uri. because of their importance, necko provides its own standard implementa...

Tracing JIT
ushing is necessary because all writes to imported values in the native stack are deferred until trace-exit, as an optimization. if the side exit condition indicates that the trace exited successfully -- simply running out of native code or hitting a branch condition that no native code yet exists to handle -- the monitor will inspect the hit count for the trace-exiting pc. if that pc has itself grown hot, the monitor will immediately transition to recording mode starting with the exiting pc. otherwise it will return to monitoring mode. if the side exit condition indicates that the trace exited unsuccessfully -- due to encountering sufficient memory pressure to trigger a garbage collection, running out of native stack space, expiring a timer or any similar abnormal condition -- the monitor r...

SpiderMonkey Internals
ic apis. interpreter like many portable interpreters, spidermonkey's interpreter is mainly a single, tremendously long function that steps through the bytecode one instruction at a time, using a switch statement (or faster alternative, depending on the compiler) to jump to the appropriate chunk of code for the current instruction. a js-to-js function call pushes a javascript stack frame without growing the c stack. but since js-to-c-to-js call stacks are common, the interpreter is reentrant. some spidermonkey bytecode operations have many special cases, depending on the type of their arguments. common cases are inlined in the interpreter loop, breaking any abstractions that stand in the way. so optimizations such as dense arrays and the property cache are, alas, not transparently tucked awa...

JSAPI Cookbook
*/ js::callargs args = js::callargsfromvp(argc, vp); args.rval().setdouble(3.14159); exception handling throw the most common idiom is to create a new error object and throw that. js_reporterror does this. note that javascript exceptions are not the same thing as c++ exceptions. the jsapi code also has to return false to signal failure to the caller. // javascript throw new error("failed to grow " + varietal + ": too many greenflies."); /* jsapi */ js_reporterror(cx, "failed to grow %s: too many greenflies.", varietal); return false; to internationalize your error messages, and to throw other error types, such as syntaxerror or typeerror, use js_reporterrornumber instead. javascript also supports throwing any value at all, not just error objects. use js_setpendingexception to throw ...

JSAPI User Guide
bage collection can be a performance issue. some applications can reduce the frequency of garbage collection simply by increasing the initial size of the jsruntime. perhaps the best technique is to perform garbage collection during idle time, when it is least likely to have any impact on the user. by default, the javascript engine performs garbage collection when it has no other choice except to grow the process. this means that garbage collection typically happens when memory-intensive code is running, perhaps the worst possible time. an application can trigger garbage collection at a more convenient time by calling js_gc or js_maybegc. js_gc forces garbage collection. js_maybegc performs garbage collection only if it is likely to reclaim a worthwhile amount of memory. errors and exceptions...

JS::AutoVectorRooter
ements of other to the array. bool insert(t *p, const t &val) inserts an element val at the position specified by p. void infallibleappend(const t &v) appends an element v to the array. for use when space has already been reserved. void popback() pops an element from the array. t popcopy() pops an element from the array and returns it. bool growby(size_t inc) grows the array by inc. bool resize(size_t newlength) resizes the array to newlength. void clear() clears all elements. bool reserve(size_t newlength) reserves the array with newlength. js::mutablehandle<t> operator[](size_t i) returns to the i-th element as js::mutablehandle&lt;t&gt;. js::handle<t> operator[](size_t i) con...

JS_ForgetLocalRoot
that is subject to garbage collection: a jsobject, jsstring, jsfunction, or jsdouble.) js_forgetlocalroot works on any gc-thing allocated in the current local root scope, but it's more time-efficient when called on references to more recently created gc-things. calling it successively on other than the most recently allocated gc-thing will tend to average the time inefficiency, and may risk o(n2) growth rate, but in any event, you shouldn't allocate too many local roots if you can root as you go (build a tree of objects from the top down, forgetting each latest-allocated gc-thing immediately upon linking it to its parent). if the caller is not in any local root scope, js_forgetlocalroot has no effect. see also bug 519949 bug 803907 ...

JS_MakeStringImmutable
ng *str); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. s jsstring * the string to operate on. s must not be null. description a string's characters can never be changed, but spidermonkey uses two string optimization techniques behind the scenes: a growable string (see js_newgrowablestring ) has a buffer that the javascript engine can reallocate so that concatenating it with another string is much faster. a dependent string (see js_newdependentstring) is a substring of another (growable, dependent, or immutable) string. in memory it is represented as a pointer to the other string and a pair of integers for the substring's starting point and le...

JS_ReportOutOfMemory
emory to report that an operation failed because the system is out of memory. when the javascript engine tries to allocate memory and allocation fails, it reports an error as though by calling this function. call js_reportallocationoverflow if an operation fails because it tries to use more memory (or more of some other resource) than the application is designed to handle. when a script tries to grow an array beyond 230-1 elements, for example, or concatenate strings such that the result is more than 229-1 characters long, the javascript engine reports an error as though by calling this function. see js_reporterror and js_seterrorreporter for more information about error handling in the jsapi. see also mxr id search for js_reportoutofmemory mxr id search for js_reportallocationoverflow ...

JS_SetThreadStackLimit
instead. syntax void js_setthreadstacklimit(jscontext *cx, jsuword limitaddr) name type description cx jscontext * the context to configure. limitaddr jsuword an address near the top of the c stack. this should be a safely writeable address well short of the actual top of the stack. description js_setthreadstacklimit sets the maximum (if stack grows upward) or minimum (downward) legal stack byte address in limitaddr for the thread or process stack used by cx. to disable stack size checking, pass 0 for limitaddr. in a js_threadsafe build, after passing a jscontext from one thread to another, call js_setthreadstacklimit(cx, 0) after calling js_setcontextthread. (see also js_setcontextthread and js_clearcontextthread.) see also mxr id search...

JSAPI reference
1.8.5 js_putescapedstring added in spidermonkey 1.8.5 js_putescapedflatstring added in spidermonkey 1.8.5 js_forget_string_flatness added in spidermonkey 1.8.5 js_stringisflat added in spidermonkey 38 js_assert_string_is_flat added in spidermonkey 1.8.5 js_flattenstring added in spidermonkey 1.8.5 typedef jschar obsolete since jsapi 35 js_newstring obsolete since jsapi 1.8.5 js_newgrowablestring obsolete since jsapi 27 js_getstringbytes obsolete since jsapi 1.8.5 js_getstringbytesz obsolete since jsapi 1.8.5 js_getstringchars obsolete since jsapi 1.8.5 js_getstringcharsz obsolete since jsapi 33 js_getstringcharsandlength added in jsapi 1.8.5 obsolete since jsapi 33 js_getstringcharsz added in spidermonkey 1.8.5 obsolete since jsapi 33 js_getstringcharszandlength added in...

SpiderMonkey 1.8.5
have been introduced into the api, to help embedders writing c++ projects. please note that spidermonkey reserves the js:: namespace for itself. ...

SpiderMonkey 1.8.7
have been introduced into the api, to help embedders writing c++ projects. please note that spidermonkey reserves the js:: namespace for itself. jsautorequest jsautosuspendrequest jsautocheckrequest jsautoentercompartment js::anchor<> js::call obsolete apis js_clearnewbornroots js_enterlocalrootscope js_leavelocalrootscope js_leavelocalrootscopewithresult js_forgetlocalroot js_newgrowablestring deleted apis js_getscopechain use js_getglobalforscopechain api changes operation callback js_setoperationcallback was introduced in js 1.8.0, replacing the branch callback, in anticipation of the addition of the tracing jit (tracemonkey). the interface was finalized only after js 1.8.0 shipped, with bug 477187. the primary change in this interface is that it no longer counts operat...

SpiderMonkey 31
untimes have been destroyed. js_seticumemoryfunctions is a new function which can be used to set the allocation and deallocation functions used by the icu internationalization library. this is unlikely to be of interest to embedders unless you are doing detailed memory profiling. it must be called before js_init is called. ...

Shell global objects
he nursery. when abouttooverflow is true, marks the store buffer as about-to-overflow before collecting. gcparam(name [, value]) wrapper for js_[gs]etgcparameter. the name is one of: maxbytes maxmallocbytes gcbytes gcnumber mode unusedchunks totalchunks slicetimebudget markstacklimit highfrequencytimelimit highfrequencylowlimit highfrequencyhighlimit highfrequencyheapgrowthmax highfrequencyheapgrowthmin lowfrequencyheapgrowth dynamicheapgrowth dynamicmarkslice allocationthreshold minemptychunkcount maxemptychunkcount compactingenabled refreshframeslicesenabled relazifyfunctions(...) perform a gc and allow relazification of functions. accepts the same arguments as gc(). getbuildconfiguration() return an object describing some of the config...

WebReplayRoadmap
omehow, which would make it easier to see what happened in the frame. points on the path could be clicked to seek there, which should offer faster and less clunky navigation than stepping buttons. hide unsupported developer tool features (not yet implemented) support for the normal features of the developer tools is pretty limited in recording/replaying tabs. while the supported features will grow over time, the ui needs to be improved so that features which aren't supported are not shown or are shown in a disabled state. currently, only the debugger, console, and inspector developer tools will work correctly in a recording/replaying tab, and some features of these panels will not work, or will not work in the same way as when a normal tab is being debugged. one important issue is that a...

Redis Tips
reverse indexes (never use keys in production) documentation redis has fantastic documentation. yet redis is so easy to learn and use that you'll seldom feel you need to consult it. there are three reasons to look at the docs for every command you use. time complexity - each command's complexity is given in big-o notation. this is immensely helpful. related commands - an ever-growing list of related commands is given on the right-hand side of the page. recipes - at the bottom of many pages is a section that gives usage patterns or recipes for the command under discussion. there are many insightful ideas to be found here. getting started with redis before you go any further in this document, make sure you have played with redis for at least 5 or 10 minutes. if you hav...

The Rust programming language
closer look at the power and benefits rust provides. ...

Handling Mozilla Security Bugs
owner plus peers) should remain small. its membership should change infrequently and only after consultation with the mozilla.org staff. the security module owner and peers will also work with mozilla.org to populate the initial security bug group. we expect that the mozilla security bug group will initially be significantly larger than the core group of module owners and peers, and that it may grow further over time. new members can be added to the mozilla security bug group as follows: new people can apply to join the security bug group, or may be recruited by existing members. applicants for membership must have someone currently in the security bug group who is willing to vouch for them and nominate them for membership. nomination is done by the "voucher" sending e-mail to the securit...

Starting WebLock
ou need to store it in some way to make data access quick and efficient. url checking the way in which url checking is implemented in the weblock component is not at all optimal. the weblock component manages a simple linked list of url strings. a linear search through the data in the white list may not be terribly bad if the number of urls is under a couple of dozen, but it decays as the list grows. there's also a large bottleneck in the network request. url data is accessed as in the diagram below: you might construct hash values for each of the url strings instead, or add them to some kind of database. but we leave optimizations and real-world performance for web locking to the reader. iweblock method by method the implementation of the iweblock interface is straightforward. webloc...

Index
s, xpcom this function provides a safe way to expose a function from a privileged scope to a less-privileged scope. 37 components.utils.forcegc needscontent, xpcom, xpcom:language bindings, xpconnect components.utils.forcegc lets scripts force a garbage collection cycle. the mozilla javascript engine will perform garbage collection automatically when the javascript heap grows beyond a certain size. this mechanism doesn't account for any native (c++) xpcom objects hanging off javascript objects though. in many cases a javascript application will have internal knowledge of javascript objects referencing large (trees of) xpcom objects and know when they are no longer reachable. in this case it can be important to be able to force a garbage collection cycle from javascri...

Components.utils.forceGC
this mechanism doesn't account for any native (c++) xpcom objects hanging off javascript objects though. in many cases a javascript application will have internal knowledge of javascript objects referencing large (trees of) xpcom objects and know when they are no longer reachable. in this case it can be important to be able to force a garbage collection cycle from javascript. ...

Language bindings
add-on code, to access variables and apis defined in web content.components.utils.exportfunctionthis function provides a safe way to expose a function from a privileged scope to a less-privileged scope.components.utils.forcegccomponents.utils.forcegc lets scripts force a garbage collection cycle. the mozilla javascript engine will perform garbage collection automatically when the javascript heap grows beyond a certain size. this mechanism doesn't account for any native (c++) xpcom objects hanging off javascript objects though. in many cases a javascript application will have internal knowledge of javascript objects referencing large (trees of) xpcom objects and know when they are no longer reachable. in this case it can be important to be able to force a garbage collection cycle from javascri...

nsICookieService
kie. deleted a cookie was deleted. the subject is the deleted cookie. added a cookie was added. the subject is the added cookie. changed a cookie was changed. the subject is the changed cookie. batch-deleted a set of cookies were deleted as part of a purge operation. this typically happens because they have either expired or because the cookie list has grown too large. the subject is an nsiarray of deleted cookies. cleared the entire cookie list was cleared. the subject is null. reload the entire cookie list was changed, and the observer should reload the list of cookies. the subject is null. private-cookie-changed since firefox 20 (see bugzilla #837091) same as cookie-changed, except used in lieu of cook...

nsIMarkupDocumentViewer
nterface in gecko 7.0. prevdoccharacterset acstring textzoom float the amount by which to scale all text. default is 1.0. methods scrolltonode() scroll the make the specified node visible. void scrolltonode( in nsidomnode node ); parameters node the nsidomnode of the node to make visible. sizetocontent() tell the container to shrink-to-fit or grow-to-fit its contents. void sizetocontent(); parameters none. see also full page zoom ...

nsIMutableArray
ve, it is legal to add null elements to the array. note also that null elements can be created as a side effect of insertelementat(). conversely, if insertelementat() is never used, and null elements are never explicitly added to the array, then it is guaranteed that nsiarray.queryelementat() will never return a null value. any of these methods may throw ns_error_out_of_memory when the array must grow to complete the call, but the allocation fails. method overview void appendelement(in nsisupports element, in boolean weak); void clear(); void insertelementat(in nsisupports element, in unsigned long index, in boolean weak); void removeelementat(in unsigned long index); void replaceelementat(in nsisupports element, in unsigned long index, in boolean w...

xptcall FAQ
orm requirement for mozilla? yes. mozilla will not run properly without a functioning port of xptcall. non-functional stub code exists to allow building xptcall on non-supported platforms. but any browser feature that relies on xpconnect will fail. any platform that does not do xptcall is in trouble. we need to get moving on getting xptcall working everywhere! what platforms are supported? the growing list: porting status where can i find other resources? the code is at: xpcom/reflect/xptcall a new porting guide is at: https://developer.mozilla.org/en/xptcall_porting_guide pre-implementation proposals are here and here. original document information author(s): john bandhauer <jband@netscape.com> originally published: 02 september 1999 ...

Index
e of them below. 109 thunderbird developer reference docs no summary! 110 tips and tricks from the newsgroups thunderbird the following discussions on mozilla.dev.apps.thunderbird and mozilla.dev.extensions include useful tips for thunderbird add-on developers. please feel free to add links to threads. we will add a categorization system as the link list grows. you can also help by creating how-tos from any of these topics. 111 working with the folder pane add-ons, extensions, thunderbird the "folder pane" refers to the main navigation element that appears on the left side of the main thunderbird window. here, users traditionally find a hierarchical view of their accounts and folders. beginning in thunderbird 2, additional views o...

Tips and Tricks from the newsgroups
you can also help by creating how-tos from any of these topics. ...

libmime content type handlers
the ability to emit an html representation of an input stream. the primary use of libmime is to parse and render rfc822 messages for use by the messenger component of seamonkey. a necessary capability of this module is to dynamically add the ability to decode and render various content types. this functionality will be accomplished via content type handler plugins for libmime. libmime has a homegrown object system written in c, and since the content type handler plugins need to exist in this module, a description of the libmime object system should be reviewed and understood. api's content type handler plugins are dynamically loaded and need to access internal pointers, functions that are part of the c based object system. the following xp-com interface is implemented by libmime and is nec...

Working with windows in chrome code
data in preferences if you just need to store a string or a number, writing a whole xpcom component may be an unnecessary complication. you can use the preferences service in such cases. pros: quite easy to use for storing simple data. cons: can't easily be used to store complex data. abusing the preferences service and not cleaning up after yourself can cause prefs.js to grow large and slow down application startup. see code snippets:preferences for detailed description of the preferences system and example code. example: var prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); var branch = prefs.getbranch("extensions.myext."); var var1 = branch.getboolpref("var1"); // get a ...

Plug-in Basics - Plugins
s that can increase the flexibility of gecko-based browsers. plug-ins like these are now available: multimedia viewers such as adobe flash and adobe acrobat utilities that provide object embedding and compression/decompression services applications that range from personal information managers to games the range of possibilities for using plug-in technology seems boundless, as shown by the growing numbers of independent software vendors who are creating new and innovative plug-ins. with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser window receive keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into secti...

Introduction to DOM Inspector - Firefox Developer Tools
tion about a particular node or subtree, it presents individual nodes and their values (in the dom, attributes are subnodes of elements, typically) in an active list. you can perform actions on the individual items in this list from the context menu and the edit menu, both of which contain menutimes that allow you edit the values of those attributes. this interactivity allows you to shrink and grow element size, change icons, and do other layout-tweaking updates—all without actually changing the dom as it is defined in the file on disk. loving the inspector the dom inspector can take some figuring out, but once you get used to it, you may find that these structured views of web pages and interfaces were exactly the aspects of your own application development that were missing. the dom i...

Animation.onfinish - Web APIs
" state by setting its starttime to document.timeline.currenttime - (animation.currenttime * animation.playbackrate). syntax var finishhandler = animation.onfinish; animation.onfinish = finishhandler; value a function to be called to handle the finish event, or null if no finish event handler is set. examples animation.onfinish is used several times in the alice in web animations api land growing/shrinking alice game. here is one instance where we add pointer events back to an element after its opacity animation has faded it in: // add an animation to the game's ending credits var endingui = document.getelementbyid("ending-ui"); var bringui = endingui.animate(keysfade, timingfade); // pause said animation's credits bringui.pause(); // this function removes pointer events on the cred...

Animation.pause() - Web APIs
ime is unresolved (for example, if it's never been played or isn't currently playing) and the end time of the animation is positive infinity. throws an invalidstateerror if the animation's currenttime is unresolved (perhaps it hasn't started playing yet) and the end time of the animation is positive infinity. ...

Animation.playState - Web APIs
nd the animation.currenttime property is not updating. finished the animation has reached one of its boundaries and the animation.currenttime property is not updating. previously, web animations defined a pending value to indicate that some asynchronous operation such as initiating playback was yet to complete. this is now indicated by the separate animation.pending property. example in the growing/shrinking alice game example, players can get an ending with alice crying into a pool of tears. in the game, for performance reasons, the tears should only be animating when they're visible. so they must be paused as soon as they are animated like so: // setting up the tear animations tears.foreach(function(el) { el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1...

Animation.reverse() - Web APIs
the animation.reverse() method of the animation interface reverses the playback direction, meaning the animation ends at its beginning. if called on an unplayed animation, the whole animation is played backwards. if called on a paused animation, the animation will continue in reverse. syntax animation.reverse(); parameters none. return value undefined example in the growing/shrinking alice game example, clicking or tapping the bottle causes alice's growing animation (alicechange) to play backwards, causing her to get smaller. it is done by setting alicechange's animation.playbackrate to -1 like so: var shrinkalice = function() { // play alice's animation in reverse alicechange.playbackrate = -1; alicechange.play(); // play the bottle's animation drinking.play()...

Applying styles and colors - Web APIs
in the zig-zag pattern are. if you specify a miterlimit value below 4.2 in this demo, none of the visible corners will join with a miter extension, but only with a small bevel near the blue lines; with a miterlimit above 10, most corners in this demo should join with a miter far away from the blue lines, and whose height is decreasing between corners from left to right because they connect with growing angles; with intermediate values, the corners on the left side will only join with a bevel near the blue lines, and the corners on the right side with a miter extension (also with a decreasing height). function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // clear canvas ctx.clearrect(0, 0, 150, 150); // draw guides ctx.strokestyle = '#09f'; ctx.linewid...

HTMLDetailsElement: toggle event - Web APIs
ifts of fortune are hers to give and to take away. </details> <details id="ch3"> <summary>chapter iii</summary> boethius falls back upon his present sense of misery. philosophy reminds him of the brilliancy of his former fortunes. ...

IntersectionObserver.IntersectionObserver() - Web APIs
wing options: root an element or document object which is an ancestor of the intended target, whose bounding rectangle will be considered the viewport. any part of the target not visible in the visible area of the root is not considered visible. rootmargin a string which specifies a set of offsets to add to the root's bounding_box when calculating intersections, effectively shrinking or growing the root for calculation purposes. the syntax is approximately the same as that for the css margin property; see the root element and root margin in intersection observer api for more information on how the margin works and the syntax. the default is "0px 0px 0px 0px". threshold either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to to...

IntersectionObserver - Web APIs
rsectionobserver.root read only the element or document whose bounds are used as the bounding box when testing for intersection. if no root value was passed to the constructor or its value is null, the top-level document's viewport is used. intersectionobserver.rootmargin read only an offset rectangle applied to the root's bounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes. the value returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements. each offset can be expressed in pixels (px) or as a percentage (%). the default is "0px 0px 0px 0px". intersectionobserver.thresholds read only a list of thresholds, sorted in increasing numeric orde...

Selection.setBaseAndExtent() - Web APIs
is 1, the first child node is included. and so on. note: if the focus position appears before the anchor position in the document, the direction of the selection is reversed — the caret is placed at the beginning of the text rather the end, which matters for any keyboard command that might follow. for example, shift + ➡︎ would cause the selection to narrow from the beginning rather than grow at the end. return value void. exceptions if anchoroffset is larger than the number of child nodes inside anchornode, or if focusoffset is larger than the number of child nodes inside focusnode, an indexsizeerror exception is thrown. examples in this example, we have two paragraphs containing spans, each one containing a single word. the first one is set as the anchornode and the second is...

Lifetime of a WebRTC session - Web APIs
gnaling and video calling for an actual example with a step-by-step explanation of what the code does. this page is currently under construction, and some of the content will move to other pages as the webrtc guide material is built out. pardon our dust! establishing the connection the internet is big. really big. it’s so big that years ago, smart people saw how big it was, how fast it was growing, and the limitations of the 32-bit ip addressing system, and realized that something had to be done before we ran out of addresses to use, so they started working on designing a new 64-bit addressing system. but they realized that it would take longer to complete the transition than 32-bit addresses would last, so other smart people came up with a way to let multiple computers share the same 3...

Using bounded reference spaces - Web APIs
ear the boundaries. it's also useful because the user may be engrossed in gameplay or other activity, not realize they're approaching the boundary, and could become confused or distressed if they wander out of tracking range (especially if doing so causes them to lose a game). the easiest solution is to just treat the each boundary segment as if it were an object to hit test against. as the user grows close to the boundary, you might warn them by displaying a message, flashing a warning indicator, playing an audio warning, or the like. and if the user actually collides with the boundary, don't let them continue past it. <<<--- example --->>> creating a bounded reference space before creating a project that relies on bounded reference spaces, it's important to keep in mind that not all xr d...

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
ly that the camera will not correspond with an object that appears in the scene at all. some examples of ways 3d cameras are used: when rendering animation—whether for filmmaking or for use within the context of a presentation or game—the virtual camera is used just like a real-world film camera. as much as possible, standard cinematographic techniques are used, since the viewer has likely grown up watching films using those techniques, and has subconscious expectations that a film or animation will follow those methods. deviating from them can pull the viewer out of the moment. in business applications, the 3d camera is used to simply set the apparent size and perspective when rendering things such as graphs and charts. in mapping applications, the camera may either be placed directl...

XRViewport.y - Web APIs
e surface into which webxr content is to be rendered. the viewport's x property identifies the x component of the origin, and its is given by the width and height properties. syntax y = xrviewport.y; value the offset from the bottom edge of the rendering surface to the bottom edge of the viewport, in pixels. note: although other web apis typically consider the y axis to begin at the top and grow larger progressing downward, webgl reverses this, with y growing larger as it goes upward on the screen. examples see the main xrviewport page for examples. specifications specification status comment webxr device apithe definition of 'xrviewport.y' in that specification. working draft initial definition. ...

ARIA: Main role - Accessibility
ea consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. <div id="main" role="main"> <h1>avocados</h1> <!-- main section content --> </div> this is the main section of a document that discusses avocados. subsections of this document could discuss their history, the different types, regions where they grow, etc. description the main role is a navigational landmark role identifying the main content of a document. landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. by classifying and labeling sections of a page, structural information conveyed visually through layout can be represented programmatically. screen readers use landmark roles ...

Web applications and ARIA FAQ - Accessibility
arks, regions, and grids on their pages. aria enables dynamic, javascript-driven applications and widgets to interoperate with a variety of desktop-based assistive technologies. for more information about how to create accessible widgets with aria, see the overview of accessible web applications and widgets. where is aria supported? aria is a relatively new specification, but support for it is growing. a wide variety of commonly-used browsers, assistive technologies, javascript toolkits, and applications now support aria. however, many users may still be using older versions of these technologies. you may want to consider implementing aria using progressive enhancement techniques—such as adding aria using javascript, not directly to your markup—in order to more gracefully support older ...

Keyboard-navigable JavaScript widgets - Accessibility
ill not automatically draw the focus outline for items that programatically receive focus. choose between changing the background color via something like this.style.backgroundcolor = "gray"; or add a dotted border via this.style.border = "1px dotted invert". in the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and ie doesn't implement css outlines). prevent used key events from performing browser functions if your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. if your event handler returns false, the event will not be propaga...

Web accessibility for seizures and physical reactions - Accessibility
cle "take advantage of media queries with <style> in setting up media queries, you are enabling controls by the user; these controls are made available in the browser or in the os. see the mdn document, "accessibility: what users can to to browse more safely" to see more details of how a user accesses the controls. prefers-reduced-motion support for prefers-reduced-motion in modern browsers is growing. @media screen and (prefers-reduced-motion: reduce) { } @media screen and (prefers-reduced-motion) { } to see a great example of how to use the code prefers-reduced-motion, visit the mdn document, prefers-reduced-motion, or see the example below from the section on new in chrome 74. button { animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { butto...

Using multi-column layouts - CSS: Cascading Style Sheets
qual. firefox does this. however, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. therefore, if the height is constrained, by setting the css height or max-height properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column. this mode is also much more efficient for layout. column gaps there is a gap between columns. the recommended default is 1em. this size can be changed by applying the column-gap property to the multi-column block: example 6 html <div id="column_gap"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor in...

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> ...

Basic Concepts of grid layout - CSS: Cascading Style Sheets
#ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } the fr unit tracks can be defined using any length unit. grid also introduces an additional length unit to help us create flexible grid tracks. the new fr unit represents a fraction of the available space in the grid container. the next grid definition would create three equal width tracks that grow and shrink according to the available space. <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #...

Subgrid - CSS: Cascading Style Sheets
hat do not fit in your subgrid, a subgrid acts very similarly to any nested grid; the only difference is that the track sizing of the subgrid is set on the parent grid. as with any nested grid however, the size of content in the subgrid can change the track sizing, assuming a track sizing method is used that allows content to affect the size. in such a case, auto-sized row tracks for example will grow to fit content in the main grid and content in the subgrid. as the subgrid value acts in much the same way as a regular nested grid, it is easy to switch between the two. for example, if you realise that you need an implicit grid for rows, all you would need to do is remove the subgrid value of grid-template-rows and perhaps give a value for grid-auto-rows to control the implicit track sizing. ...

Animatable CSS properties - CSS: Cascading Style Sheets
-radius border-top border-top-color border-top-left-radius border-top-right-radius border-top-width border-width bottom box-shadow caret-color clip clip-path color column-count column-gap column-rule column-rule-color column-rule-width column-width columns filter flex flex-basis flex-grow flex-shrink font font-size font-size-adjust font-stretch font-variation-settings font-weight gap grid-column-gap grid-gap grid-row-gap grid-template-columns grid-template-rows height inline-size inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline...

Card - CSS: Cascading Style Sheets
uto-sized by default. therefore this will fit the content added to it. note: the various elements in separate cards do not align with each other, as each card is an independent grid. the proposed subgrid feature of grid level 2 would give a solution to this issue. useful fallbacks or alternative methods flexbox could be used to lay out the card, in which case you should make the content area grow, and other items not grow. this would be a reasonable way to lay out the card, although i have a slight preference for being able to control the tracks from the container rather than needing to add rules to the items. for the overall layout you could use flexbox, however this will result in cards stretching over the final flex row where there are fewer than can fit in the rows above. alternative...

Grid wrapper - CSS: Cascading Style Sheets
tally-centered max-width wrapper and/or the outer edges of the grid. recipe download this example choices made this recipe uses the css grid minmax() function to define the grid track sizes in the grid-template-columns property. for the central columns with a maximum width we can set a minimum value of 0 or greater and a maximum value that specifies the maximum size the column tracks will grow to. using a numeric unit (pixels, ems, rems) will create a fixed maximum size for the central wrapper, whereas using percentage values or viewport units will mean this wrapper grows or shrinks in response to its context. the outer two columns have a maximum size of 1fr, meaning that they will each expand to fill the remaining available space in the grid container. useful fallbacks or alternativ...

Recipe: Media objects - CSS: Cascading Style Sheets
, the footer can be pushed down to the bottom of the media object. another reason to use grid layout is in order that i can use fit-content() for the track sizing of the image. by using fit-content with a maximum size of 200 pixels, when we have a small image such as the icon, the track only gets as large as the size of that image — the max-content size. if the image is larger, the track stops growing at 200 pixels and as the image has a max-width of 100% applied, it scales down so that it continues to fit inside the column. by using grid-template-areas to achieve the layout, i can see the pattern in the css. i define my grid once we have a max-width of 500 pixels, so on smaller devices the media object stacks. an option for the pattern is to flip it to switch the image to the other side...

CSS reference - CSS: Cascading Style Sheets
irdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-v...

box-flex-group - CSS: Cascading Style Sheets
specifications not part of any standard. ...

box-shadow - CSS: Cascading Style Sheets
a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it. <spread-radius> this is a fourth <length> value. positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. if not specified, it will be 0 (the shadow will be the same size as the element). <color> see <color> values for possible keywords and notations. if not specified, it defaults to currentcolor. interpolation each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, an...

clamp() - CSS: Cascading Style Sheets
> is allowed. clamp(min, val, max) is resolved as max(min, min(val, max)) 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. note that using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. it has the same effect as the code in fluid typography but in one line, and without the use of media queries. syntax the clamp() function takes three comma separated expressions as its parameter, in the order of minimum value, preferred value, maximum value. the minimum value is the smallest ...

<easing-function> - CSS: Cascading Style Sheets
-bezier subset of easing functions are often called "smooth" easing functions, because they can be used to smooth down the start and end of the animation. they correlate a time ratio to an output ratio, both expressed as <number>s. for these values, 0.0 represents the initial state, and 1.0 represents the final state. depending on the specific function used, the calculated output can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation. this causes the animation to go farther than the final state, and then return. for some properties, such as left or right, this creates a kind of "bouncing" effect. however, certain properties will restrict the output if it goes outside an allowable range. for example, a color component greater than 255 or smaller than...

flex-shrink - CSS: Cascading Style Sheets
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. ...

font-style - CSS: Cascading Style Sheets
f'); font-family:'amstelvaralpha'; font-style: normal; } label { font: 1rem monospace; } .container { max-height: 150px; overflow: scroll; } .sample { font: 2rem 'amstelvaralpha', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.queryselector('label[for="slant"]'); let slantinput = document.queryselector('#slant'); let sampletext = document.queryselector('.sample'); function update() { let slant = `oblique ${slantinput.value}deg`; slantlabel.textcontent = `font-style: ${slant};`; sampletext.style.fontstyle = sla...

font-weight - CSS: Cascading Style Sheets
normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let weightinput = document.queryselector('#weight'); let sampletext = document.queryselector('.sample'); function update() { weightlabel.textcontent = `font-weight: ${weightinput.value};`; sampletext.style.fontweight = weightinput.value; } weightinpu...

justify-content - CSS: Cascading Style Sheets
g grid layout. 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. the alignment is done after the lengths and auto margins are applied, meaning that, if in a flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space. syntax /* positional alignment */ justify-content: center; /* pack items around the center */ justify-content: start; /* pack items from the start */ justify-content: end; /* pack items from the end */ justify-content: flex-start; /* pack flex items from the start */ justify-content: flex-end; /* p...

max() - CSS: Cascading Style Sheets
e max() within a clamp() or calc() function. formal syntax max( <calc-sum># )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) examples setting a minimum size for a font another use case for css functions is allow a font size to grow while ensuring it is at least a mimum size, enabling responsive font sizes while ensuring legibility. let's look at some css: h1 { font-size: 2rem; } h1.responsive { font-size: max(4vw, 2em, 2rem); } the font-size will at minimum be 2rems, or twice the default size of font for the page. this ensure it is legible and ensures accessibility <h1>this text is always legible, but doesn't chang...

scale - CSS: Cascading Style Sheets
the scale css property allows you to specify scale transforms individually and independently of the transform property. this maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value. syntax /* keyword values */ scale: none; /* single values */ /* values of more than 1 make the element grow */ scale: 2; /* values of less than 1 make the element shrink */ scale: 0.5; /* two values */ scale: 2 0.5; /* three values */ scale: 2 0.5 2; values single number value a <number> specifying a scale factor to make the affected element scale by the same factor along both the x and y axes. equivalent to a scale() (2d scaling) function with a single value specified. two length/percentage values two <number>s ...

table-layout - CSS: Cascading Style Sheets
ine-table elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | fixed examples fixed-width tables with text-overflow this example uses a fixed table layout, combined with the width property, to restrict the table's width. the text-overflow property is used to apply an ellipsis to words that are too long to fit. if the table layout were auto, the table would grow to accomodate its contents, despite the specified width. html <table> <tr><td>ed</td><td>wood</td></tr> <tr><td>albert</td><td>schweitzer</td></tr> <tr><td>jane</td><td>fonda</td></tr> <tr><td>william</td><td>shakespeare</td></tr> </table> css table { table-layout: fixed; width: 120px; border: 1px solid red; } td { border: 1px solid blue; overflow: hidden; white-space: no...

scale() - CSS: Cascading Style Sheets
a <transform-function> data type. this scaling transformation is characterized by a two-dimensional vector. its coordinates define how much scaling is done in each direction. if both coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation). when a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. if it is negative, the result a point reflection in that dimension. a value of 1 has no effect. note: the scale() function only scales in 2d. to scale in 3d, use scale3d() instead. syntax the scale() function is specified with either one or two values, which represent the amount of scaling to be applied in each direction. scale(sx) scale(sx, sy...

scale3d() - CSS: Cascading Style Sheets
s and send us a pull request. this scaling transformation is characterized by a three-dimensional vector. its coordinates define how much scaling is done in each direction. if all three coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation). when a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. if it is negative, the result a point reflection in that dimension. a value of 1 has no effect. syntax the scale3d() function is specified with three values, which represent the amount of scaling to be applied in each direction. scale3d(sx, sy, sz) values sx is a <number> representing the abscissa of the scaling vector. sy is a <number> r...

A hybrid approach - Developer guides
a landing page for the firefox version for their device. every page on the site should look great at a wide variety of resolutions, being built with responsive design in mind. future plans include exploring serving images based on user-agent. so far there is not much to see for mobile, since things are still in the formative stages of development, but you can always watch the new mozilla.org grow up on github. subscribe to the mozilla webdev blog for updates about our progress. summary no approach is a one-size-fits-all solution. web applications that want to heavily modify the content or user flow for mobile users should probably go for a separate mobile site. content-oriented pages that don’t need to modify their content for mobile users will be satisfied with responsive design. if ...

HTTP caching - HTTP
version of one resource is used in combination with the new version of the other one. this is very important when web sites have css stylesheets or js scripts that have mutual dependencies, i.e., they depend on each other because they refer to the same html elements. the revision version added to revved resources doesn't need to be a classical revision string like 1.1.3, or even a monotonously growing suite of number. it can be anything that prevent collisions, like a hash or a date. cache validation when a cached document's expiration time has been reached, it is either validated or fetched again. validation can only occur if the server provided either a strong validator or a weak validator. revalidation is triggered when the user presses the reload button. it is also triggered under no...

Connection management in HTTP/1.x - HTTP
o send successive requests, over the same persistent connection, without waiting for the answer. this avoids latency of the connection. theoretically, performance could also be improved if two http requests were to be packed into the same tcp message. the typical mss (maximum segment size), is big enough to contain several simple requests, although the demand in size of http requests continues to grow. not all types of http requests can be pipelined: only idempotent methods, that is get, head, put and delete, can be replayed safely: should a failure happen, the pipeline content can simply be repeated. today, every http/1.1-compliant proxy and server should support pipelining, though many have limitations in practice: a significant reason no modern browser activates this feature by default. ...

Indexed collections - JavaScript
sole.log(item); }); } array prototype methods can be used on strings as well, since they provide sequential access to their characters in a similar way to arrays: array.prototype.foreach.call('a string', function(chr) { console.log(chr) }) typed arrays javascript typed arrays are array-like objects and provide a mechanism for accessing raw binary data. as you already know, array objects grow and shrink dynamically and can have any javascript value. javascript engines perform optimizations so that these arrays are fast. however, as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times when it would be helpful for javascript code to be able to quic...

Function.prototype.apply() - JavaScript
eption. more perniciously, others will arbitrarily limit the number of arguments actually passed to the applied function. to illustrate this latter case: if such an engine had a limit of four arguments (actual limits are of course significantly higher), it would be as if the arguments 5, 6, 2, 3 had been passed to apply in the examples above, rather than the full array. ...

WebAssembly.Memory() constructor - JavaScript
avascript or in webassembly code will be accessible and mutable from both javascript and webassembly. syntax new webassembly.memory(memorydescriptor); parameters memorydescriptor an object that can contain the following members: initial the initial size of the webassembly memory, in units of webassembly pages. maximum optional the maximum size the webassembly memory is allowed to grow to, in units of webassembly pages. when present, the maximum parameter acts as a hint to the engine to reserve memory up front. however, the engine may ignore or clamp this reservation request. unshared webassembly memories don't need to set a maximum, but shared memories do. shared optional a boolean value that defines whether the memory is a shared memory or not. if set to true, it is a sha...

WebAssembly.Table() constructor - JavaScript
descriptor); parameters tabledescriptor an object that can contain the following members: element a string representing the type of value to be stored in the table. at the moment this can only have a value of "anyfunc" (functions). initial the initial number of elements of the webassembly table. maximum optional the maximum number of elements the webassembly table is allowed to grow to. exceptions if tabledescriptor is not of type object, a typeerror is thrown. if maximum is specified and is smaller than initial, a rangeerror is thrown. examples creating a new webassembly table instance the following example (see table2.html source code and live version) creates a new webassembly table instance with an initial size of 2 elements. we then print out the table len...

WebAssembly.Table.prototype.length - JavaScript
the length prototype property of the webassembly.table object returns the length of the table, i.e. the number of elements in the table. syntax table.length; examples using length the following example creates a new webassembly table instance with an initial size of 2 and a maximum size of 10. var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "3" specifications specification webassembly javascript interfacethe definition of 'length' in that specification. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to...

JavaScript typed arrays - JavaScript
javascript engines perform optimizations so that these arrays are fast. however, as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipulate raw binary data. ...

Web media technologies
today, there are a large number of apis available, as well as html elements, dom interfaces, and other features that make it possible to not only perform these tasks, but use media in tandem with other technologies to do truly remarkable things. this article lists the various apis with links to documentation you may find helpful in mastering them. references html these articles cover html features for media developers. <audio> the <audio> element is used to play audio in a web context. ...

Introduction - SVG: Scalable Vector Graphics
ly because they support different levels of the svg specification or another specification that you are using along with svg (that is, javascript or css). svg is supported in all modern browsers and even a couple versions back in some cases. a fairly complete browser support table can be found on can i use. firefox has supported some svg content since version 1.5, and that support level has been growing with each release since. hopefully, along with the tutorial here, mdn can help developers keep up with the differences between gecko and some of the other major implementations. before starting you should have a basic understanding of xml or another markup language such as html. if you are not too familiar with xml, here are some guidelines to keep in mind: svg elements and attributes shou...

Compiling an Existing C Module to WebAssembly - WebAssembly
result_size(); const resultview = new uint8array(module.heap8.buffer, resultpointer, resultsize); const result = new uint8array(resultview); api.free_result(resultpointer); note: new uint8array(somebuffer) will create a new view onto the same memory chunk, while new uint8array(sometypedarray) will copy the data. depending on the size of your image, you might run into an error where wasm can't grow the memory enough to accommodate both the input and the output image: luckily, the solution to this problem is in the error message. you just need to add -s allow_memory_growth=1 to your compilation command. and there you have it. you have compiled a webp encoder and transcoded a jpeg image to webp. to prove that it worked, turn your result buffer into a blob and use it on an <img> element: ...