Search completed in 1.18 seconds.
Network throttling - MDN Web Docs Glossary: Definitions of Web-related terms
network thro
ttling is an intentional slowing down of internet speed.
... in web performance, network thro
ttling, or network condition emulation, it is used to emulate low bandwidth conditions experienced by likely a large segment of a site's target user base.
...network thro
ttling enables a developer to emulate an experience of a user.
...And 2 more matches
Promise.allSettled() - JavaScript
the promise.allse
ttled() method returns a promise that resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.
... syntax promise.allse
ttled(iterable); parameters iterable an iterable object, such as an array, in which each member is a promise.
... however, if and only if an empty iterable is passed as an argument, promise.allse
ttled() returns a promise object that has already been resolved as an empty array.
... examples using promise.allse
ttled promise.allse
ttled([ promise.resolve(33), new promise(resolve => settimeout(() => resolve(66), 0)), 99, promise.reject(new error('an error')) ]) .then(values => console.log(values)); // [ // {status: "fulfilled", value: 33}, // {status: "fulfilled", value: 66}, // {status: "fulfilled", value: 99}, // {status: "rejected", reason: error: an error} // ] specifications specification ecmascript (ecma-262)the definition of 'promise.allse
ttled' in that specification.
TTL - MDN Web Docs Glossary: Definitions of Web-related terms
ttl can refer either to : the lifetime of a packet in a network can do before being released the expiry time of cached data networking in networking, the
ttl, embedded in the packet, is a usually defined as a number of hops or as an expiration timestamp after which the packet is dropped.
... caching in the context of caching,
ttl (as an unsigned 32-bit integer) being a part of the http response header or the dns query, indicates the amount of time in seconds during which the ressource can be cached by the requester.
... learn more general knowledge
ttl on wikipedia technical reference rfc 2181 on ietf rfc1035 on ietf ...
Throttling - Firefox Developer Tools
the network monitor allows you to thro
ttle your network speed to emulate various connection speeds so you can see how your app will behave under different connection types.
... thro
ttling the toolbar includes a thro
ttling dropdown, which allows you to thro
ttle your network speed to emulate various different network speed conditions.
Elements - Archive of obsolete content
ld be like: <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml" xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg = "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> binding <!entity % binding-content "(resources?,content?,implementation?,handlers?)"> <!element binding %binding-content;> <!a
ttlist binding id id #required extends cdata #implied display cdata #implied inheritstyle true #implied > the binding element describes a single xbl binding.
... content <!element content any> <!a
ttlist content id id #implied > a binding can specify new content that is placed inside the bound element.
... children <!element children empty> <!a
ttlist children id id #implied includes cdata #implied > specifies the location where any child elements of the bound element are placed in the generated content.
...And 13 more matches
Promise - JavaScript
note: a promise is said to be se
ttled if it is either fulfilled or rejected, but not pending.
... you will also hear the term resolved used with promises — this means that the promise is se
ttled or “locked in” to match the state of another promise.
... chained promises the methods promise.then(), promise.catch(), and promise.finally() are used to associate further action with a promise that becomes se
ttled.
...And 8 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
timeouts thro
ttled to ≥ 4ms in modern browsers, settimeout()/setinterval() calls are thro
ttled to a minimum of once every 4 ms when successive calls are triggered due to callback nesting (where the nesting level is at least a certain depth), or after certain number of successive intervals.
... historically some browsers implemented this thro
ttling behaviour a bit differently (e.g.
... timeouts in inactive tabs thro
ttled to ≥ 1000ms to reduce the load (and associated battery usage) from background tabs, timeouts are thro
ttled to firing no more often than once per second (1,000 ms) in inactive tabs.
...And 7 more matches
StringView - Archive of obsolete content
alert(stringview.loadutf8charcode(mystringview.rawdata, 6)); // 119, which is the character code for "w" stringview.loadutf8charcode() is mainly for internal use and generally is of li
ttle utility.
...stringview.pututf8charcode(mystringview.rawdata, "_".charcodeat(0), 5) alert(mystringview); // "hello_world!" stringview.pututf8charcode() is mainly for internal use and generally is of li
ttle utility.
... stringview.getutf8charlength() is mainly for internal use and generally is of li
ttle utility.
...And 5 more matches
Using the Web Animations API - Web APIs
let’s take a look at pausing and playing animations in the growing/shrinking alice game (check out the full code on codepen): in this game, alice has an animation that causes her to go from small to big which we control via a bo
ttle and a cupcake.
...when alice drinks from the bo
ttle, she grows smaller.
... this is because the bo
ttle changes her animation’s playbackrate from 1 to -1: var shrinkalice = function() { alicechange.playbackrate = -1; alicechange.play(); } bo
ttle.addeventlistener("mousedown", shrinkalice, false); bo
ttle.addeventlistener("touchstart", shrinkalice, false); in through the looking-glass, alice travels to a world where she must run to stay in place — and run twice as fast to move forward!
...And 5 more matches
Page Visibility API - Web APIs
timers such as settimeout() are thro
ttled in background/inactive tabs to help improve performance.
... budget-based background timeout thro
ttling is now available in modern browsers (firefox 58+, chrome 57+), placing an additional limit on background timer cpu usage.
... windows are subjected to thro
ttling after 30 seconds, with the same thro
ttling delay rules as specified for window timers (again, see reasons for delays longer than specified).
...And 4 more matches
Building up a basic demo with Three.js - Game development
our render() function will do this job, with a li
ttle help from requestanimationframe(), which causes the scene to be re-rendered constantly on every frame: function render() { requestanimationframe(render); renderer.render(scene, camera); } render(); on every new frame the render function is invoked, and the renderer renders the scene and the camera.
...let's apply a li
ttle rotation to the cube, so we can see more than one face.
...add the following lines, below your shape definitions: var light = new three.pointlight(0xffffff); light.position.set(-10, 15, 50); scene.add(light); we define a white point of light, set its position a li
ttle away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene.
...And 3 more matches
The Essentials of an Extension - Archive of obsolete content
for firefox 2, localizing this file is a li
ttle more complicated.
...for example, if you create a firefox extension, it would normally take li
ttle effort to port it to seamonkey, which has very similar features and ui.
...in the case of the unified menu, things are a li
ttle more difficult due to lack of options.
...And 2 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
however, the concept can be a li
ttle confusing at first.
...low latency is good, meaning there is li
ttle or no delay.
... 286 network thro
ttling glossary, rum, reference, synthetic monitoring, web performance network thro
ttling is an intentional slowing down of internet speed.
...And 2 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
let's talk a li
ttle bit more about how the requestanimationframe() method differs from the other methods used earlier.
... so, unless you need to support older versions of ie, there is li
ttle reason to not use requestanimationframe().
... thro
ttling a requestanimationframe() animation one limitation of requestanimationframe() is that you can't choose your frame rate.
...And 2 more matches
Extending a Protocol
now let's implement the method in ./dom/base/navigator.cpp - we add a li
ttle bit of error boilerplate stuff, as is customary: already_addrefed<promise> navigator::echo(const nsastring& astring, errorresult& arv) { if (!mwindow || !mwindow->getdocshell()) { arv.throw(ns_error_unexpected); return nullptr; } refptr<promise> echopromise = promise::create(mwindow->asglobal(), arv); if (ns_warn_if(arv.failed())) { return nullptr; } // message passing...
...once it's compiled, ./mach run and you should be able to spin up the developer console and type: navigator.echo("hi!"); that will return a pending promise that never se
ttles.
... our goal is now to get that to se
ttle with the value we sent in.
...And 2 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
it was originally going to be called livescript, but it was renamed in an ill-fated marketing decision that attempted to capitalize on the popularity of sun microsystem's java language — despite the two having very li
ttle in common.
... numbers numbers in javascript are "double-precision 64-bit format ieee 754 values", according to the spec — there's no such thing as an integer in javascript (except bigint), so you have to be a li
ttle careful.
...equality is a li
ttle less straightforward.
...And 2 more matches
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
let's explore all of these index.js the index.js file starts by registering the service worker: navigator.serviceworker.register('service-worker.js') .then(function(registration) { return registration.pushmanager.getsubscription() .then(async function(subscription) { // registration part }); }) .then(function(subscription) { // subscription part }); it is a li
ttle bit more complicated than the service worker we saw in the js13kpwa demo.
...pe': 'application/json' }, body: json.stringify({ subscription: subscription }), }); then the globaleventhandlers.onclick function on the subscribe button is defined: document.getelementbyid('doit').onclick = function() { const payload = document.getelementbyid('notification-payload').value; const delay = document.getelementbyid('notification-delay').value; const
ttl = document.getelementbyid('notification-
ttl').value; fetch('./sendnotification', { method: 'post', headers: { 'content-type': 'application/json' }, body: json.stringify({ subscription: subscription, payload: payload, delay: delay,
ttl:
ttl, }), }); }; when the button is clicked, fetch ask...
...s the server to send the notification with the given parameters: payload is the text that to be shown in the notification, delay defines a delay in seconds until the notification will be shown, and
ttl is the time-to-live setting that keeps the notification available on the server for a specified amount of time, also defined in seconds.
...And 2 more matches
Examples - Game development
tanx a multiplayer tank ba
ttle game, created with playcanvas.
... browserquest a mmorpg created by the li
ttle workshop and mozilla.
... classic platformer canvas 2d game based on `visual-ts game engine` - physics based on matter.js commercial games oort online a mmo exploration, building, and ba
ttle game (currently in development.) a wizard's lizard top down zelda-esque exploration/rpg.
... katan.io html5 and canvas implementation of se
ttlers of catan.
How to build custom form controls - Learn web development
this one is a li
ttle bit trickier.
... we have to think a li
ttle further: what about the escape key?
...nput type="radio" name="fruit" value="banana" id="fruitbanana"><label for="fruitbanana"">banana</label></li> <li><input type="radio" name="fruit" value="strawberry" id="fruitstrawberry"><label for="fruitstrawberry">strawberry</label></li> <li><input type="radio" name="fruit" value="apple" id="fruitapple"><label for="fruitapple">apple</label></li> </ul> </fieldset> we'll do a li
ttle styling of the radio button list (not the legend/fieldset) to make it look somewhat like the earlier example, just to show that it can be done: .styledselect { display: inline-block; padding: 0; } .styledselect li { list-style-type: none; padding: 0; display: flex; } .styledselect [type=radio] { position: absolute; left: -100vw; top: -100vh; } .styledselect label { margin: 0; ...
...+ label::after { content : "▼"; background: black; float: right; color: white; padding: 0 4px; margin: 0 -4px 0 4px; } .styledselect:focus-within { border: .2em solid #000; border-radius: .4em; box-shadow: 0 .1em .2em rgba(0,0,0,.45); } .styledselect:focus-within input:checked + label { background-color: #333; color: #fff; width: 100%; } with no javascript, and just a li
ttle bit of css, we are able to style the list of radio buttons to display only the checked item.
Object building practice - Learn web development
our li
ttle balls will bounce around on the screen, and change color when they touch each other.
... the finished example will look a li
ttle something like this: this example will make use of the canvas api for drawing the balls to the screen, and the requestanimationframe api for animating the whole display — you don't need to have any previous knowledge of these apis, and we hope that by the time you've finished this article you'll be interested in exploring them more.
...the color of the fill is set to semi-transparent, rgba(0,0,0,0.25), to allow the previous few frames to shine through slightly, producing the li
ttle trails behind the balls as they move.
...j = 0; j < balls.length; j++) { if (!(this === balls[j])) { const dx = this.x - balls[j].x; const dy = this.y - balls[j].y; const distance = math.sqrt(dx * dx + dy * dy); if (distance < this.size + balls[j].size) { balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')'; } } } } this method is a li
ttle complex, so don't worry if you don't understand exactly how it works for now.
Introducing a complete toolchain - Learn web development
toolchains and their inherent complexity as with any chain, the more links you have in your toolchain, the more complex and potentially bri
ttle it is — for example it might be more complex to configure, and easier to break.
... a li
ttle later in this chapter, we'll provide the eslint config.
... before starting on the development of the actual application code, a li
ttle configuration is required for our tools to work properly.
... putting jsx syntax in the middle of our javascript is going to cause eslint to complain pretty quickly with the current configuration, so we'll need to add a li
ttle more configuration to the eslint settings to get it to accept jsx features.
Shell global objects
functions available only if spidermonkey_promise is defined se
ttlepromisenow(promise) 'se
ttle' a promise immediately.
... this just marks the promise as resolved with a value of undefined and causes the firing of any onpromisese
ttled hooks set on debugger instances that are observing the given promise's global as a debuggee.
... se
ttlefakepromise(promise) 'se
ttle' a promise created by makefakepromise().
... this doesn't have any observable effects outside of firing any onpromisese
ttled hooks set on debugger instances that are observing the given promise's global as a debuggee.
Redis Tips
expire expireat
ttl persist setex example: redis> set foo 42 ok redis>
ttl foo (integer) -1 redis> expire foo 5 (integer) 1 three seconds later ...
... redis>
ttl foo (integer) 2 a further two seconds later ...
... redis> get foo (nil) redis>
ttl foo (integer) -1 using expire you set an expiration in seconds from the present.
...
ttl tells you the time-to-live for the key, if there is an expiration set on it.
Using Service Workers - Web APIs
when we come to call the imgload() function, we call it with the url to the image we want to load, as we might expect, but the rest of the code is a li
ttle different: let body = document.queryselector('body'); let myimage = new image(); imgload('myli
ttlevader.jpg').then((response) => { var imageurl = window.url.createobjecturl(response); myimage.src = imageurl; body.appendchild(myimage); }, (error) => { console.log(error); }); on to the end of the function call, we chain the promise then() method, which contains two functions — the fir...
...l', (event) => { event.waituntil( caches.open('v1').then((cache) => { return cache.addall([ './sw-test/', './sw-test/index.html', './sw-test/style.css', './sw-test/app.js', './sw-test/image-list.js', './sw-test/star-wars-logo.jpg', './sw-test/gallery/', './sw-test/gallery/bountyhunters.jpg', './sw-test/gallery/myli
ttlevader.jpg', './sw-test/gallery/snowtroopers.jpg' ]); }) ); }); here we add an install event listener to the service worker (hence self), and then chain a extendableevent.waituntil() method onto the event — this ensures that the service worker will not install until the code inside waituntil() has successfully occurred.
...t) => { event.respondwith( caches.match(event.request).then((resp) => { return resp || fetch(event.request).then((response) => { let responseclone = response.clone(); caches.open('v1').then((cache) => { cache.put(event.request, responseclone); }); return response; }); }).catch(() => { return caches.match('./sw-test/gallery/myli
ttlevader.jpg'); }) ); }); we have opted for this fallback image because the only updates that are likely to fail are new images, as everything else is depended on for installation in the install event listener we saw earlier.
...in the future they will have thro
ttling/offline modes to simulate bad or non-existent connections, which will be a really good thing.
Rendering and the WebXR frame animation callback - Web APIs
renderer performance concerns clearly, you have very li
ttle time to render your scene each frame.
... for these reasons, unless your renderer is fairly small and lightweight, with li
ttle to do, you should consider offloading everything you can to a worker so you can be computing the next frame while the browser handles other things.
... the left eye sees the die from a li
ttle bit to the left of center, and the right eye sees it from a bit to the right of center.
... as a result, the left eye sees just a li
ttle bit more of the left side of the object and a li
ttle bit less of the right, and vice versa.
DataView - JavaScript
var li
ttleendian = (function() { var buffer = new arraybuffer(2); new dataview(buffer).setint16(0, 256, true /* li
ttleendian */); // int16array uses the platform's endianness.
... return new int16array(buffer)[0] === 256; })(); console.log(li
ttleendian); // true or false 64-bit integer values because javascript does not currently include standard support for 64-bit integer values, dataview does not offer native 64-bit operations.
... function getuint64(dataview, byteoffset, li
ttleendian) { // split 64-bit number into two 32-bit (4-byte) parts const left = dataview.getuint32(byteoffset, li
ttleendian); const right = dataview.getuint32(byteoffset+4, li
ttleendian); // combine the two 32-bit values const combined = li
ttleendian?
... const bigint = window.bigint, bigthirtytwo = bigint(32), bigzero = bigint(0); function getuint64bigint(dataview, byteoffset, li
ttleendian) { // split 64-bit number into two 32-bit (4-byte) parts const left = bigint(dataview.getuint32(byteoffset|0, !!li
ttleendian)>>>0); const right = bigint(dataview.getuint32((byteoffset|0) + 4|0, !!li
ttleendian)>>>0); // combine the two 32-bit values and return return li
ttleendian ?
lang/functional - Archive of obsolete content
thro
ttle(fn, wait, options) this function is new in firefox 30.
... from underscore's thro
ttle() function: this takes a function and returns a new version of the function which, when invoked repeatedly, will not excute the function more than once per wait milliseconds.
... returns function : the thro
ttled version of fn.
Index - Archive of obsolete content
414 dtrace archive, dtrace, performance, profiling, qa, testing dtrace is sun microsystem's dynamic tracing framework that allows developers to instrument a program with probes that have li
ttle to no effect on performance when not in use and very li
ttle when active.
...you will also be getting a li
ttle history on rss.
...yet they are finding an unsuspected ally in the ba
ttle: web standards.
Mozilla Crypto FAQ - Archive of obsolete content
however this ruling did not se
ttle the issue of the constitutionality of u.s.
...provides historical context and technical background for the recent political ba
ttles around encryption and privacy issues.
... the electronic privacy papers: documents on the ba
ttle for privacy in the age of surveillance, by bruce schneier and david banisar (ed.).
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
interoperability the key to interoperability is se
ttling on a standard that has a potential for long-term use.
...they se
ttled on a proprietary environment, and missed the opportunity to make their environment the benchmark – and set the standard.
...the development engineers can shift more readily between projects with li
ttle to no downtime.
XUL Parser in Python - Archive of obsolete content
v.00001 to celebrate activestate's recent announcement about support for perl and python in mozilla, i have put together this li
ttle python script that parses your local xul and builds a list of all the xul elements and their attributes in an html page.
...in the explanation section below, i try to say a li
ttle something about how this script works.
... until i spruce it up a li
ttle, this is just a very basic demonstration of using python's xml parser with xul.
Building up a basic demo with Babylon.js - Game development
let's apply a li
ttle bit of rotation to the box, so we can see more than one face — again, add these lines below the previous one: box.rotation.x = -0.2; box.rotation.y = -0.4; the box looks black at the moment, because we haven't defined any material to apply to its faces.
...in a game something is usually happening — we can see animations and such — so let's try to breathe a li
ttle life into those shapes by animating them.
... scaling add this line below the previous one to scale the torus: torus.scaling.z = math.abs(math.sin(t*2))+0.5; there's a li
ttle bit of adjustment made to make the animation look and feel nice.
Mobile touch controls - Game development
note: the game captain rogers: ba
ttle at andromeda is built with phaser and managing the controls is phaser-based, but it could also be done in pure javascript.
... pure javascript demo let's implement the mobile support in a li
ttle demo available on github, so we can move the player's ship by touching the screen on a mobile device.
... for the actual gameplay, instead of creating more buttons and covering the small mobile screen with them, we can use something a li
ttle bit different: we'll create invisible areas which respond to the given action.
Randomizing gameplay - Game development
function ballhitpaddle(ball, paddle) { ball.animations.play('wobble'); ball.body.velocity.x = -1*5*(paddle.x-ball.x); } it's a li
ttle bit of magic — the new velocity is higher, the larger the distance between the center of the paddle and the place where the ball hits it.
...it ended up that way because of a li
ttle bit of experimentation with the given values, you can do your own experimentation and see what happens.
...below are some suggestions as to how you could expand our li
ttle game, to get you started: add a second ball or paddle.
Endianness - MDN Web Docs Glossary: Definitions of Web-related terms
by far the most common ordering of multiple bytes in one number is the li
ttle-endian, which is used on all intel processors.
... li
ttle-endian means storing bytes in order of least-to-most-significant (where the least significant byte takes the first or lowest address), comparable to a common european way of writing dates (e.g., 31 december 2050).
...305 419 896 in decimal): li
ttle-endian: 0x78 0x56 0x34 0x12 big-endian: 0x12 0x34 0x56 0x78 mixed-endian (historic and very rare): 0x34 0x12 0x78 0x56 ...
Styling links - Learn web development
hovering a link makes the mouse pointer change to a li
ttle hand icon.
...let's look at a really simple example that adds an icon to external links (links that lead to other sites.) such an icon usually looks like a li
ttle arrow pointing out of a box — for this example, we'll use this great example from icons8.com.
...we want to fill up the whole width of the <ul>, leave a li
ttle margin between each button (but not a gap at the right hand edge), and we have 5 buttons to accommodate that should all be the same size.
Introduction to client-side frameworks - Learn web development
angular uses typescript, a superset of javascript that we’ll look at in a li
ttle more detail in the next chapter.
... javascript frameworks were created to make this kind of work a li
ttle easier — they exist to provide a better developer experience.
... overengineering if your web development project is a personal portfolio with a few pages, and those pages have li
ttle or no interactive capability, a framework (and all of its javascript) may not be necessary at all.
Understanding client-side JavaScript frameworks - Learn web development
we'll discover a li
ttle bit of detail about its background and use cases, set up a basic react toolchain on our local computer, and create and play with a simple starter app, learning a bit about how react works in the process.
...in this article, we'll look at a li
ttle bit of vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
...to avoid common pitfalls, we'll have to dig a li
ttle deeper into svelte's reactivity system.
Command line crash course - Learn web development
viewing the command line for the first time can be a daunting experience: a blank screen and a blinking cursor, with very li
ttle obvious help available on what to do.
... now that we’ve discussed two fundamental commands, have a li
ttle poke around your directory and see if you can navigate from one place to the next.
...al page: curl /docs/web/api/fetch -l -i | grep location your output should look something like this (curl will first output some download counters and suchlike): location: /docs/web/api/fetch location: /docs/web/api/globalfetch/globalfetch.fetch() location: /docs/web/api/globalfetch/fetch location: /docs/web/api/windoworworkerglobalscope/fetch although contrived, we could take this result a li
ttle further and transform the location: line contents, adding the base origin to the start of each one so that we get complete urls printed out.
Gecko Profiler FAQ
how to profile startup code that regresses just a li
ttle (<10-15ms ts_paint/tpaint) [mstange] we currently don’t have a good way to do that.
... [ehsan] i don’t think this is very interesting in the general situation, since oses can basically decide to swap out part of your virtual address space and you’d page fault when you access that page next and there is very li
ttle that the program can do about that.
... nothing stands out in the profile, how can i accurately find the next bo
ttleneck?
JSAPI User Guide
a jscontext, or context, is like a li
ttle machine that can do many things involving javascript code and objects.
...if the system runs out of memory in the middle of a script, we do not want finally blocks to execute, because almost anything a script does requires at least a li
ttle memory, and we have none.
...if you do accidentally leak an object from one sandbox into another, the genie is out of the bo
ttle.
Animated PNG graphics
authors the apng specification was authored by: stuart parmenter <pavlov@pavlov.net> vladimir vukicevic <vladimir@pobox.com> andrew smith <asmith15@li
ttlesvr.ca> overview apng is an extension of the portable network graphics (png) format, adding support for animated images.
...at are no longer required to have no other chunks in between them from 0.8 removed crcs for ihdr and plte from actl the actl fctl and adat are now not copy safe, renamed them to actl, fctl and adat from 0.9 split render_op into dispose_op and blend_op from 0.10 no changes test encoder and sample images sample images are available from the apng implementation page at http://li
ttlesvr.ca/apng/ an encoder (open source) is available in versions of the gecko engine starting with version 1.9 alpha 4.
... an application (open source) using the mozilla encoder to assemble apngs available here: http://li
ttlesvr.ca/apng/apngedit.html see also portable network graphics (png) specification (second edition) extensions to the png specification, version 1.2.0 graphics interchange format 89a ...
Building the WebLock UI
weblock indicator in browser user interface package list the user interface described in this section is comprised of four files: weblockoverlay.xul is the file that defines the li
ttle status icon in the browser.
...the separator that appears at the top of this snippet creates a li
ttle divider between widgets like the kind you see in menus that divide sets of functionality available there.
... weblockoverlay.xul the xul that defines the new icon is small: it's a li
ttle icon that calls a javascript function to load the weblock.xul file we defined previously.
nsISSLSocketControl
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void proxystartssl(); void star
ttls(); attributes attribute type description forcehandshake boolean obsolete since gecko 1.9 notificationcallbacks nsiinterfacerequestor methods proxystartssl() starts an ssl proxy connection.
...star
ttls() establishes a star
ttls connection.
...void star
ttls(); parameters none.
Responsive Design Mode - Firefox Developer Tools
dpr (pixel ratio) - beginning with firefox 68, the dpr is no longer editable; create a custom device in order to change the dpr thro
ttling - a drop-down list where you can select the connection thro
ttling to apply, for example 2g, 3g, or lte enable/disable touch simulation - toggles whether or not responsive design mode simulates touch events.
... network thro
ttling if you do all your development and testing using a very fast network connection, users may experience problems with your site if they are using a slower connection.
... regular 2g 250 kb/s 50 kb/s 300 good 2g 450 kb/s 150 kb/s 150 regular 3g 750 kb/s 250 kb/s 100 good 3g 1.5 mb/s 750 kb/s 40 regular 4g/lte 4 mb/s 3 mb/s 20 dsl 2 mb/s 1 mb/s 5 wi-fi 30 mb/s 15 mb/s 2 to select a network, click the list box that's initially labeled "no thro
ttling": ...
Applying styles and colors - Web APIs
here we will explore the canvas options we have at our disposal to make our drawings a li
ttle more attractive.
...using rgba() gives you a li
ttle more control and flexibility because we can set the fill and stroke style individually.
... here's a li
ttle demo in which you can set miterlimit dynamically and see how this effects the shapes on the canvas.
How to create a DOM tree - Web APIs
> <person first-name="eric" middle-initial="h" last-name="jung"> <address street="321 south st" city="denver" state="co" country="usa"/> <address street="123 main st" city="arlington" state="ma" country="usa"/> </person> <person first-name="jed" last-name="brown"> <address street="321 north st" city="atlanta" state="ga" country="usa"/> <address street="123 west st" city="sea
ttle" state="wa" country="usa"/> <address street="321 south avenue" city="denver" state="co" country="usa"/> </person> </people> the w3c dom api, supported by mozilla, can be used to create an in-memory representation of this document like so: var doc = document.implementation.createdocument("", "", null); var peopleelem = doc.createelement("people"); var personelem1 = doc.createelement("pe...
...m3 = doc.createelement("address"); addresselem3.setattribute("street", "321 north st"); addresselem3.setattribute("city", "atlanta"); addresselem3.setattribute("state", "ga"); addresselem3.setattribute("country", "usa"); personelem2.appendchild(addresselem3); var addresselem4 = doc.createelement("address"); addresselem4.setattribute("street", "123 west st"); addresselem4.setattribute("city", "sea
ttle"); addresselem4.setattribute("state", "wa"); addresselem4.setattribute("country", "usa"); personelem2.appendchild(addresselem4); var addresselem5 = doc.createelement("address"); addresselem5.setattribute("street", "321 south avenue"); addresselem5.setattribute("city", "denver"); addresselem5.setattribute("state", "co"); addresselem5.setattribute("country", "usa"); personelem2.appendchild(addres...
... "123 main st", "@city": "arlington", "@state": "ma", "@country": "usa" }], "@first-name": "eric", "@middle-initial": "h", "@last-name": "jung" }, { "address": [{ "@street": "321 north st", "@city": "atlanta", "@state": "ga", "@country": "usa" }, { "@street": "123 west st", "@city": "sea
ttle", "@state": "wa", "@country": "usa" }, { "@street": "321 south avenue", "@city": "denver", "@state": "co", "@country": "usa" }], "@first-name": "jed", "@last-name": "brown" }] } } so what?
ExtendableEvent.waitUntil() - Web APIs
in service workers, waituntil() tells the browser that work is ongoing until the promise se
ttles, and it shouldn't terminate the service worker if it wants that work to complete.
... the activate events in service workers use waituntil() to buffer functional events such as fetch and push until the promise passed to waituntil() se
ttles.
... the waituntil() method must be initially called within the event callback, but after that it can be called multiple times, until all the promises passed to it se
ttle.
Index - Web APIs
in service workers, waituntil() tells the browser that work is ongoing until the promise se
ttles, and it shouldn't terminate the service worker if it wants that work to complete.
...together, these interfaces can be used to help identify an application's performance bo
ttlenecks.
...it behaves the same, except that it can optionally take one or more parameters past windowfeatures, and windowfeatures itself is treated a li
ttle differently.
Promise.prototype.finally() - JavaScript
when the promise is se
ttled, i.e either fulfilled or rejected, the specified callback function is executed.
... syntax p.finally(onfinally); p.finally(function() { // se
ttled (fulfilled or rejected) }); parameters onfinally a function called when the promise is se
ttled.
... description the finally() method can be useful if you want to do some processing or cleanup once the promise is se
ttled, regardless of its outcome.
Promise.race() - JavaScript
description the race function returns a promise that is se
ttled the same way (and takes the same value) as the first promise that se
ttles amongst the promises of the iterable passed as an argument.
... if the iterable contains one or more non-promise value and/or an already se
ttled promise, then promise.race will resolve to the first of these values found in the iterable.
...orever pending: var foreverpendingpromise = promise.race([]); console.log(foreverpendingpromise); settimeout(function(){ console.log('the stack is now empty'); console.log(foreverpendingpromise); }); // logs, in order: // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "pending" } if the iterable contains one or more non-promise value and/or an already se
ttled promise, then promise.race will resolve to the first of these values found in the array: var foreverpendingpromise = promise.race([]); var alreadyfulfilledprom = promise.resolve(100); var arr = [foreverpendingpromise, alreadyfulfilledprom, "non-promise value"]; var arr2 = [foreverpendingpromise, "non-promise value", promise.resolve(100)]; var p = promise.race(arr); var p2 = promise.race(arr2)...
Understanding latency - Web Performance
network thro
ttling to emulate the latency of a low bandwidth network, you can use developer tools and switch to a lower end network connection.
... in the developer tools, under the network table, you can switch the thro
ttling option to 2g, 3g, etc.
...had we thro
ttled, receiving could have been 43seconds!
Web Performance
together, these interfaces can be used to help identify an application's performance bo
ttlenecks.
... glossary terms beacon brotli compression client hints code splitting cssom domain sharding effective connection type first contentful paint first cpu idle first input delay first interactive first meaningful paint first paint http http/2 jank latency lazy load long task lossless compression lossy compression main thread minification network thro
ttling packet page load time page prediction parse perceived performance prefetch prerender quic rail real user monitoring resource timing round trip time (rtt) server timing speculative parsing speed index ssl synthetic monitoring tcp handshake tcp slow start time to first byte time to interactive tls transmission control protocol (tcp) tree shaking web performance docume...
... performance bo
ttlenecks understanding bandwidth bandwidth is the amount of data measured in megabits(mb) or kilobits(kb) that one can send per second.
url - Archive of obsolete content
ge
ttld(url) returns the top-level domain for the given url: that is, the highest-level domain under which individual domains may be registered.
... var urls = require("sdk/url"); console.log(urls.ge
ttld("http://www.bbc.co.uk/")); // "co.uk" console.log(urls.ge
ttld("https://developer.mozilla.org/")); // "org" parameters url : string the url, as a string.
core/heritage - Archive of obsolete content
ruff!' }; // subclassing a `dog` function pet(name, breed) { // once again we do our li
ttle dance if (!(this instanceof pet)) return new pet(name, breed); dog.call(this, name); this.breed = breed; } // to subclass, you need to make another special dance with special // 'prototype' properties.
...to do that we need to freeze constructor's prototype chain to make sure functions are frozen: object.freeze(dog.prototype); object.freeze(pet.prototype); note: also, this is not quite enough as object.prototype stays mutable & in fact we do li
ttle bit more in sdk to address that, but it's not in the scope of this documentation.
SVG General - Archive of obsolete content
you will also find some general purpose scripting helpers, that should make scripting svg a li
ttle easier.
... dynamic scripting helper this li
ttle helper script can be used to simplify creation of svg elements in script.
JavaScript Daemons Management - Archive of obsolete content
the following daemons management framework is the major version of setinterval – a li
ttle framework.
...the daemon constructor itself is nothing but a clone of the li
ttle framework minidaemon with added support for init and onstart functions (declarable during the instantiation of the daemon).
Local Storage - Archive of obsolete content
the rdf api may be removed at some point in the future because it requires a great deal of code even for the simplest tasks, and it currently sees li
ttle maintenance, so we don't recommend using it unless you really have to.
... you'll still need to understand at least a li
ttle about rdf when you read the documentation about templates.
Source code directories overview - Archive of obsolete content
interfaces are used so functionality can be available to both javascript scripts and c code with as li
ttle effort as possible.
...this code contains very li
ttle platform dependent code; it relies on other components to provide platform independent interfaces to platform specific functionality.
Autodial for Windows NT - Archive of obsolete content
mozilla 1.1 also includes a fix to bug 157733, which allows our interaction with the autodial service to work a li
ttle more reliably.
...or pehaps we should assume mozilla users can configure the autodial service and disable the helper by default, but netscape users need a li
ttle more help, and enable it for them.
JavaScript Client API - Archive of obsolete content
the skeleton of a sample record implementation: function foorecord(collection, id) { cryptowrapper.call(this, collection, id); } foorecord.prototype = { __proto__: cryptowrapper.prototype, _logname: "record.foo",
ttl: foo_
ttl, // optional get bar() this.cleartext.bar, set bar(value) { this.cleartext.bar = value; }, get baz() this.cleartext.baz, set baz(value) { this.cleartext.baz = value; } }; to save all that typing for declaring the getters and setters, you can also use utils.defergetset: function foorecord(collection, id) { cryptowrapper.call(this, collection, id); } foorecord.pr...
...ototype = { __proto__: cryptowrapper.prototype, _logname: "record.foo",
ttl: foo_
ttl // optional }; utils.defergetset(foorec, "cleartext", ["bar", "baz"]); the store object the store object (which extends store, as defined in services/sync/modules/engines.js) has the job of creating and maintaining a set of record objects from the underlying data.
XML - Archive of obsolete content
xul is li
ttle beyond the set of tags used to define interface widgets, the relationship between them, or grammar, and some built-in flexibility for using extra resources like images, html elements, and other standards-based technologies.
...as the figure below indicates, xul is an amalgam of these different standards: css for styling or "skinning", dom for the object model and scriptable access, javascript for the linking and behavior, rdf for resources, xml for the structure, and html for the content and some li
ttle extras.
Mozilla release FAQ - Archive of obsolete content
ram will probably be the bo
ttleneck in most cases, at least until you are well over 128m ram.
...however, it makes very li
ttle sense to try to make mozilla into an operating sense, almost as li
ttle sense as it would to make a word processor or a mp3 player into one.
Common Firefox theme issues and solutions - Archive of obsolete content
a li
ttle experimenting may be required to fully address this issue with your theme.
...ile chrome://mozapps/skin/extensions/extensions.svg from the default theme into the mozapps/extensions/ folder of your theme and add the following style rule to the css file extensions.css: .addon[active="false"] .icon { filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale"); opacity:0.3; } about:memory about:memory nodes do not collapse the styling of about:memory is a li
ttle messed up in that nodes do not collapse as they should when clicked on.
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
<div class="card"> <img src="thumb_clown_trigger.jpg" alt="clown trigger" border="0" width="150" height="115"> <h3>clown trigger</h3> <p> our clown trigger is a bold li
ttle fish, though for a few weeks he slept a lot and didn't look well in general.
... i hope that our li
ttle cruise through this aspect of the redesign has gotten you hooked on the idea of using simple markup and css to create interesting effects, if you weren't already.
Anatomy of a video game - Game development
one common technique is to update the simulation at a constant frequency and then draw as much (or as li
ttle) of the actual frames as possible.
...those are good candidates to thro
ttle when available resources become a concern.
Building up a basic demo with the PlayCanvas engine - Game development
in a game something is usually happening — we can see animations and such — so let's try to breathe a li
ttle life into those shapes by animating them.
... cone.setposition(2, math.sin(timer*2), 0); this will move the cone up and down by applying the sin value to the y axis on each frame, with a li
ttle bit of adjustment to make it look cooler.
Desktop gamepad controls - Game development
pure javascript approach let's think about implementing pure javascript gamepad controls in our li
ttle controls demo first to see how it would work.
... phaser approach let's move on to the final gamepad api implementation in the captain rogers: ba
ttle at andromeda game we created with phaser.
Unconventional controls - Game development
the earliest demo of captain rogers: ba
ttle at andromeda was adjusted to work on a huge tv.
...when everything is installed and the controller is connected to your computer we can proceed with implementing support in our li
ttle demo.
MDN Web Docs Glossary: Definitions of Web-related terms
middleware mime mime type minification mitm mixin mobile first modem modern web apps modularity mozilla firefox mutable mvc n namespace nan nat native navigation directive netscape navigator network thro
ttling nntp node node (dom) node (networking) node.js non-normative normative null nullish value number o object object reference oop opengl openssl opera browser operand operator origin ota owasp ...
...monitoring t tag tcp tcp handshake tcp slow start telnet texel thread three js time to first byte time to interactive tld tofu transmission control protocol (tcp) transport layer security (tls) tree shaking trident truthy
ttl turn type type coercion type conversion u udp (user datagram protocol) ui undefined unicode uri url urn usenet user agent utf-8 ux v validator value variable vendor prefix viewport ...
Cascade and inheritance - Learn web development
while working through this lesson may seem less immediately relevant and a li
ttle more academic than some other parts of the course, an understanding of these things will save you much pain later on!
...it can sometimes seem a li
ttle bit complicated, but you will start to remember them as you get more experienced with css, and you can always look up the details if you forget!
Fundamental CSS comprehension - Learn web development
project brief you have been provided with some raw html and an image, and need to write the necessary css to style this into a nifty li
ttle online business card, which can perhaps double as a gamer card or social media profile.
... as a last li
ttle touch, give the paragraph inside the <article> an appropriate padding value so that its left edge lines up with the <h2> and footer paragraph, and set its color to be fairly light so it is easy to read.
Organizing your CSS - Learn web development
you may have used a css property in a specific way to get around older browser incompatibilities, for example: .box { background-color: red; /* fallback for older browsers that don't support gradients */ background-image: linear-gradient(to right, #ff0000, #aa0000); } perhaps you followed a tutorial to achieve something, and the css is a li
ttle non-obvious.
...sometimes you will find that css tutorials have used sass rather than plain css in their codepen demos, so it is handy to know a li
ttle bit about it.
Legacy layout methods - Learn web development
note: normalize is a really useful li
ttle css library written by nicolas gallagher, which automatically does some useful basic layout fixes and makes default element styling more consistent across browsers.
... as you can see, we need to write very li
ttle css when using skeleton.
How do you make sure your website works properly? - Learn web development
try again in a li
ttle while.
... ping is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not: $ ping mozilla.org ping mozilla.org (63.245.215.20): 56 data bytes 64 bytes from 63.245.215.20: icmp_seq=0
ttl=44 time=148.741 ms 64 bytes from 63.245.215.20: icmp_seq=1
ttl=44 time=148.541 ms 64 bytes from 63.245.215.20: icmp_seq=2
ttl=44 time=148.734 ms 64 bytes from 63.245.215.20: icmp_seq=3
ttl=44 time=147.857 ms ^c --- mozilla.org ping statistics --- 4 packets transmitted, 4 packets received, 0.0% packet loss round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms just keep in mind a handy ...
Advanced form styling - Learn web development
firefox se
ttled on this because web developers mostly seemed to be using the -webkit- prefixed version, so it was better for compatibility.
... placed relative to an element's formatting box, but form inputs work more like replaced elements — their display is generated by the browser and put in place — and therefore don't have one): <div class="select-wrapper"><select id="select" name="select"> <option>banana</option> <option>cherry</option> <option>lemon</option> </select></div> we then use generated content to generate a li
ttle down arrow, and put it in the right place using positioning: .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right: 10px; position: absolute; } the second, slightly more major issue is that you don't have control over the box that appears containing the options when you click on the <select> box to open it.
HTML forms in legacy browsers - Learn web development
there are other resources that can be amazingly helpful: browser vendor documentation mozilla: you're in the right place, just browse mdn microsoft: internet explorer standards support documentation webkit: because there are several different editions of this engine, things are a li
ttle trickier.
... <label for="mycolor"> pick a color <input type="color" id="mycolor" name="color"> </label> supported not supported form buttons there are two ways to define buttons within html forms: the <input> element with its attribute type set to the values button, submit, reset or image the <button> element <input> the <input> element can make things a li
ttle difficult if you want to apply some css by using the element selector: <input type="button" value="click me"> if we remove the border on all inputs, can we restore the default appearance on input buttons only?
UI pseudo-classes - Learn web development
we then style this with the following css: input ~ span { position: relative; } input:default ~ span::after { font-size: 0.7rem; position: absolute; content: "default"; color: white; background-color: black; padding: 5px 10px; right: -65px; top: -3px; } this provides a li
ttle "default" label on the one the was originally selected when the page loaded.
...we style the indeterminate radio buttons with the following css: input[type="radio"]:indeterminate { border: 2px solid red; animation: 0.4s linear infinite alternate border-pulse; } @keyframes border-pulse { from { border: 2px solid red; } to { border: 6px solid red; } } this creates a fun li
ttle animated border on the radio buttons, which hopefully indicates that you need to select one of them!
From object to iframe — other embedding technologies - Learn web development
a li
ttle while later (late 90s, early 2000s), plugin technologies became very popular, such as java applets and flash — these allowed web developers to embed rich content into webpages such as videos and animations, which just weren't available through html alone.
... always use the sandbox attribute you want to give attackers as li
ttle power as you can to do bad things on your website, therefore you should give embedded content only the permissions needed for doing its job.
Index - Learn web development
coupled with a li
ttle css for styling, html makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team.
... 298 using vue computed properties beginner, frameworks, javascript, learn, client-side, computed properties, vue in this article we've used a computed property to add a nice li
ttle feature to our app.
Choosing the right approach - Learn web development
samsung internet android full support yesthro
ttling of tracking timeout scriptschrome ?
... 32firefox android full support 29opera android full support 19safari ios full support 8samsung internet android full support 2.0nodejs full support 0.12allse
ttled()chrome full support 76edge full support 79firefox full support 71ie no support noopera full support 63safari full support 13we...
Build your own function - Learn web development
when you save your code and reload it in the browser, you'll see the li
ttle message box appear immediately, only once.
... let's test out our updated function, try updating the displaymessage() call from this: displaymessage('woo, this is a different message!'); to one of these: displaymessage('your inbox is almost full — delete some mails', 'warning'); displaymessage('brian: hi there, how are you today?','chat'); you can see how useful our (now not so) li
ttle function is becoming.
Manipulating documents - Learn web development
creating and placing new nodes the above has given you a li
ttle taste of what you can do, but let's go further and look at how we can create new elements.
... active learning: a dynamic shopping list to round off the article, we'd like to set you a li
ttle challenge — we want to make a simple shopping list example that allows you to dynamically add items to the list using a form input and button.
Introduction to the server side - Learn web development
client-side code is written using html, css, and javascript — it is run inside a web browser and has li
ttle or no access to the underlying operating system (including limited access to the file system).
...here we'll take you through the main client-server interactions in just a li
ttle more detail.
Working with Svelte stores - Learn web development
using the store contract to persist our todos our li
ttle app lets us manage our todos quite easily, but is rather useless if we always get the same list of hardcoded todos when we reload it.
...in this case, if we compile our app for production with npm run build, our public/build/bundle.js file will weight a li
ttle less than 22kb.
Deploying our app - Learn web development
as such, it's important to create a toolchain that handles these problems in a way that requires as li
ttle manual intervention as possible.
...git commit -m ‘simple netlify test’ git push github master you should see your published site update with the change — this might take a few minutes to publish, so have a li
ttle patience.
CSUN Firefox Materials
firefox 1.5, beyond the status quo "...firefox is a great li
ttle browser.
... it's a quick download, occupies very li
ttle disk space, and has a clean, no-nonsense interface." - pc magazine firefox 1.5 is a fast, free, standards compliant web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web.
Debugging on Windows
by default it will be: vc++ 6.0: c:\program files\microsoft visual studio\common\msdev98\bin\autoexp.dat vc++ 7.0: c:\program files\microsoft visual studio .net 2003\common7\packages\debugger\autoexp.dat the file has information about the format in the beginning, and after a li
ttle practice you should be well on your way.
...to set the environment variable for visual studio, use project > properties > debugging > environment and click the li
ttle box.
Eclipse CDT
now when you hit the build button (the li
ttle hammer icon), you should see the source build in the console tab at the bottom of the window.
...instead of processing build console output, eclipse could use something like ld_preload to load its own li
ttle library into all the processes that are invoked as part of the build process.
Eclipse CDT Manual Setup
click on the li
ttle green button beside this message to open the "progress" tab, and keep an eye on the "refreshing workspace" item as you continue with the steps below.
... (if an "indexing" item starts after the "refreshing the workspace" item has finished, click the li
ttle red box beside that item to cancel it, since we want to configure the project before the indexer runs.) initial project properties so that the indexer will run faster and give better results, and so that eclipse doesn't give results for irrelevant files, you should add some resource filters to have eclipse ignore certain non-source files and directories.
Contributing to the Mozilla code base
with more than a million bugs filed in bugzilla, it can be hard to know where to start, so we've created these bug categories to make getting involved a li
ttle easier: codetribute - our site for finding bugs that are mentored, some are good first bugs, some are slightly harder.
...they're all about small changes, sometimes as li
ttle as a few lines, but they're a great way to learn about setting up your development environment, navigating bugzilla, and making contributions to the mozilla codebase.
Performance best practices for Firefox front-end engineers
remember, too, that the goal is to have as li
ttle happen on the main thread as possible.
... the gecko profiler add-on is your friend the gecko profiler is your best friend when diagnosing performance problems and looking for bo
ttlenecks.
Embedding the editor
they should need to do as li
ttle work as possible to get basic editing functionality, be able to have any number of <editor>s per window, and control whether those <editor>s are in html or plain text mode.
... decide on how to implement editing session multiple-editor support eliminate specific interdependencies between composer and the xul document, via nsieditoruserinterface create bo
ttleneck for getting to the focussed editor; ensure that focus changes update state move editor ownership to docshell, creating nsieditorframe created the editing session api which copes with collections of editors (or make editor refocussable) open questions where should file open and save logic live?
Deferred
* if the promise is already se
ttled it does nothing.
... * if the promise is already se
ttled it does nothing.
Localizing with Pontoon
pontoon is a very simple and intuitive tool that requires li
ttle to no technical skill to use in the l10n workflow.
...you can now pat yourself on the back, do a li
ttle dance, go to sleep or do something else to celebrate your work!
About NSPR
nspr20, an effort started in 1996, built on that original idea, though very li
ttle is left of the original code.
...it is a goal of nspr that nspr impose as li
ttle overhead as possible in accessing those appropriate system features.
PRSocketOptionData
syntax #include <prio.h> typedef struct prsocketoptiondata { prsockoption option; union { pruintn ip_
ttl; pruintn mcast_
ttl; pruintn tos; prbool non_blocking; prbool reuse_addr; prbool keep_alive; prbool mcast_loopback; prbool no_delay; prsize max_segment; prsize recv_buffer_size; prsize send_buffer_size; prlinger linger; prmcastrequest add_member; prmcastrequest drop_member; prnetaddr mcast_if; } value; } prsocketoptiondata; fields the structure has the following fields: ip_
ttl ip time-to-live.
... mcast_
ttl ip multicast time-to-live.
Hacking Tips
therefore, the jit frames do not appear until you se
ttle on the next breakpoint.
... to work-around this issue you can use the recording feature of gdb, to step one instruction, and se
ttle back to where you came from with the following set of gdb commands: (gdb) record full (gdb) si (gdb) record goto 0 (gdb) record stop if you have a core file, you can use the gdb unwinder the same way, or do everything from the command line as follow: $ gdb -ex 'enable unwinder .* spidermonkey' -ex 'bt 0' -ex 'thread apply all backtrace' -ex 'quit' out/dist/bin/js corefile the gdb unwinder is supposed to be loaded by dist/bin/js-gdb.py and load python scripts which are located in js/src/gdb/mozilla under gdb.
Starting WebLock
the existing code would need to change very li
ttle for a weblock implementation to take advantage of files that do not actually exist on disk.
...there's also a large bo
ttleneck in the network request.
nsINavHistoryQuery
asking for things that do have a given annotation is a li
ttle different.
...this one is a li
ttle different than most.
nsISocketTransportService
currently "star
ttls", "ssl" and "udp" are supported.
...mozilla.org:2000 with tls support and default proxy settings var socket = transportservice.createtransport(["star
ttls"], 1,"mozilla.org", 2000, null); see also nsisockettransport nsirunnable nsiproxyinfo ...
Getting Started Guide
this takes a li
ttle getting used to on your part, but ends up with less typing, clearer, safer code, and less leaks.
... void f( nscomptr<t>* ) avoid passing an nscomptr by address, if possible this practice requires callers to have an nscomptr, and requires them to do a li
ttle extra work, as operator& for nscomptrs is private (to help prevent leaks caused by casting; also see bug 59414).
Working with windows in chrome code
it also handles window features a li
ttle differently, including always assuming the dialog feature is specified.
... example 5: using nsiwindowwatcher for passing an arbritrary javascript object it is still possible to pass any javascript object using nsiwindowwatcher, it just takes a li
ttle more effort.
Introduction to DOM Inspector - Firefox Developer Tools
(note: this is now a dead link.) when you first start the dom inspector, you are presented with a two-pane application window that looks a li
ttle like the main mozilla browser.
... basic actions of the dom nodes viewer selecting elements by click another powerful interactive feature of the dom inspector is that when you have the dom inspector open and have enabled this functionality by choosing edit > select element by click or by clicking the li
ttle magnifying glass icon in the upper left portion of the dom inspector application, you can click anywhere in a loaded web page or the the inspect chrome document, and the element you click will be shown in the document pane in the dom nodes viewer and information displayed in the object pane.
Network monitor toolbar - Firefox Developer Tools
thro
ttling menu, to simulate various connection types a menu of other actions: persist logs: by default, the network monitor is cleared each time you navigate to a new page or reload the current page.
... network monitor features the following articles cover different aspects of using the network monitor: network request list network request details network traffic recording performance analysis thro
ttling ...
Network request details - Firefox Developer Tools
timings tab the timings tab provides information about how long each stage of a network request took, with a more detailed, annotated, view of the timeline bar, so it is easy to locate performance bo
ttlenecks.
... network monitor features the following articles cover different aspects of using the network monitor: toolbar network request list network traffic recording performance analysis thro
ttling ...
Call Tree - Firefox Developer Tools
by analyzing its results, you can find bo
ttlenecks in your code - places where the browser is spending a disproportionately large amount of time.
... these bo
ttlenecks are the places where any optimizations you can make will have the biggest impact.
Animation.pause() - Web APIs
{ transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bo
ttle that reads "drink me." var stopplayingalice = function() { alicechange.pause(); nommingcake.pause(); drinking.pause(); }; // when the user releases the cupcake or the bo
ttle, pause the animations.
... cake.addeventlistener("mouseup", stopplayingalice, false); bo
ttle.addeventlistener("mouseup", stopplayingalice, false); specifications specification status comment web animationsthe definition of 'play()' in that specification.
Animation.playbackRate - Web APIs
examples in the growing/shrinking alice game example, clicking or tapping the bo
ttle 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.
... bo
ttle.addeventlistener("mousedown", shrinkalice, false); bo
ttle.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.
Animation.reverse() - Web APIs
return value undefined example in the growing/shrinking alice game example, clicking or tapping the bo
ttle 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 bo
ttle's animation drinking.play() } but it could also have been done by calling reverse() on alicechange like so: var shrinkalice = function() { // play alice's animation in reverse alicechange.reverse(); // play the bo
ttle's animation drinking.play() } specifications specification status comment web animationsthe definition of 'reverse()' in that specification.
Using the CSS Painting API - Web APIs
we also add a li
ttle bit of complexity later in this tutorial.
...ckwidth) + (start * 10) + 10, y ); ctx.lineto( (blockwidth) + (start * 10) + 20, y ); ctx.lineto( (blockwidth) + (start * 10) + 20 + (highlightheight), highlightheight ); ctx.lineto( (blockwidth) + (start * 10) + 10 + (highlightheight), highlightheight ); ctx.lineto( (blockwidth) + (start * 10) + 10, y ); ctx.closepath(); ctx.fill(); } } // paint }); we can then create a li
ttle html that will accept this image as backgrounds: <h1 class="fancy">largest header</h1> <h3 class="fancy">medium size header</h3> <h6 class="fancy">smallest header</h6> we give each header a different value for the --highcolour custom property .fancy { background-image: paint(headerhighlight); } h1 { --highcolour: hsla(155, 90%, 60%, 0.7); } h3 { --highcolour: hsla(255, 90%, 60%, 0.5); } h6 ...
CacheStorage - Web APIs
elf.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/myli
ttlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); self.addeventlistener('fetch', function(event) { event.respondwith(caches.match(event.request).then(function(response) { // caches.match() always resolves // but in case of success response will have value if (response !== undefined) { return response; } else { return fetch(event.reque...
...) { // response may be used only once // we need to save clone to put one copy in cache // and serve second one let responseclone = response.clone(); caches.open('v1').then(function (cache) { cache.put(event.request, responseclone); }); return response; }).catch(function () { return caches.match('/sw-test/gallery/myli
ttlevader.jpg'); }); } })); }); this snippet shows how the api can be used outside of a service worker context, and uses the await operator for much more readable code.
Document: scroll event - Web APIs
examples scroll event thro
ttling since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as dom modifications.
... instead, it is recommended to thro
ttle the event using requestanimationframe(), settimeout(), or a customevent, as follows.
Element: scroll event - Web APIs
examples scroll event thro
ttling since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as dom modifications.
... instead, it is recommended to thro
ttle the event using requestanimationframe(), settimeout(), or a customevent, as follows.
Using IndexedDB - Web APIs
transaction lifetimes are really very simple but it might take a li
ttle time to get used to.
...the success callback for cursors is a li
ttle special.
WebGL model view projection - Web APIs
exercise if that sounds a li
ttle abstract, open up the vertex shader and play around with the scale factor and watch how it shrinks vertices more towards the surface.
...0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, ]; mdn.multiplypoint(copyz, [2, 3, 4, 1]); //> [2, 3, 4, 4] however in the last example we performed (z + 1) * scalefactor: var scalefactor = 0.5; var simpleprojection = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, scalefactor, 0, 0, 0, scalefactor, ]; mdn.multiplypoint(simpleprojection, [2, 3, 4, 1]); //> [2, 3, 4, 2.5] breaking it out a li
ttle further we can see how this works: var x = (2 * 1) + (3 * 0) + (4 * 0) + (1 * 0) var y = (2 * 0) + (3 * 1) + (4 * 0) + (1 * 0) var z = (2 * 0) + (3 * 0) + (4 * 1) + (1 * 0) var w = (2 * 0) + (3 * 0) + (4 * scalefactor) + (1 * scalefactor) the last line could be simplified to: w = (4 * scalefactor) + (1 * scalefactor) then factoring out the scalefactor, we get this: w = (4 + 1) * scalefact...
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
while this is a li
ttle heavy-handed to be used for every single object in a scene, it can be very useful for a few specific objects to have their own coordinate system in this manner.
... on the other hand, if your app involves the user physically moving in real space to move around through your virtual world, simply adopting the new tracking position and jumping there can be unse
ttling to the user, and should be avoided if possible.
Web audio spatialization basics - Web APIs
} break; } } it's a similar story for our move in and out values too: case 'back': if (transform.zaxis > innerbound) { transform.zaxis -= 0.01; panner.positionz.value += 40; } break; case 'forward': if (transform.zaxis < outerbound) { transform.zaxis += 0.01; panner.positionz.value -= 40; } break; our rotation values are a li
ttle more involved, however, as we need to move the sound around.
...greesy; // 'left' is rotation about y-axis with negative angle increment z = panner.orientationz.value*math.cos(q) - panner.orientationx.value*math.sin(q); x = panner.orientationz.value*math.sin(q) + panner.orientationx.value*math.cos(q); y = panner.orientationy.value; panner.orientationx.value = x; panner.orientationy.value = y; panner.orientationz.value = z; break; this is a li
ttle confusing, but what we're doing is using sin and cos to help us work out the circular motion the coordinates need for the rotation of the boombox.
Web Authentication API - Web APIs
the parameters received from the server will be passed to the create() call, typically with li
ttle or no modification and returns a promise that will resolve to a publickeycredential containing an authenticatorattestationresponse.
...the parameters received from the server will be passed to the get() call, typically with li
ttle or no modification.
Layout using named grid lines - CSS: Cascading Style Sheets
,148,13,.4); color: rgb(92,148,13); font-size: 150%; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> <div class="overlay">overlay</div> </div> given that we have this ability to position create lines from named areas and areas from named lines it is worth taking a li
ttle bit of time to plan your naming strategy when starting out creating your grid layout.
...this can seem a li
ttle bit overcomplicated at first, but remember you don’t need to use all of them.
Using CSS transforms - CSS: Cascading Style Sheets
ight { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a li
ttle nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result the second element to configure is the position of the viewer, with the perspective-origin property.
....right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a li
ttle nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result once you have done this, you can work on the element in the 3d space.
background-attachment - CSS: Cascading Style Sheets
suddenly she came upon a li
ttle three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and alice's first thought was that it might belong to one of the doors of the hall; but, alas!
...however, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a li
ttle door about fifteen inches high: she tried the li
ttle golden key in the lock, and to her great delight it fitted!
max-block-size - CSS: Cascading Style Sheets
some years ago—never mind how long precisely—having li
ttle or no money in my purse, and nothing particular to interest me on shore, i thought i would sail about a li
ttle and see the watery part of the world.
...some years ago—never mind how long precisely—having li
ttle or no money in my purse, and nothing particular to interest me on shore, i thought i would sail about a li
ttle and see the watery part of the world.
Creating a cross-browser video player - Developer guides
<figure id="videocontainer"> <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-ba
ttle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-ba
ttle-clip-medium.webm" type="video/webm"> <source src="video/tears-of-steel-ba
ttle-clip-medium.ogg" type="video/ogg"> <!-- flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-ba
ttle-clip-medium.mp4" width="1024" height="576"> <pa...
...ram name="movie" value="flash-player.swf?videourl=video/tears-of-steel-ba
ttle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&image=img/poster.jpg&file=flash-player.swf?videourl=video/tears-of-steel-ba
ttle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video playback possible, please download the video from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-ba
ttle-clip-medium.mp4">download mp4</a> </video> <figcaption>© blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figu...
DataView.prototype.getBigInt64() - JavaScript
syntax dataview.getbigint64(byteoffset [, li
ttleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from.
... li
ttleendian optional indicates whether the 64-bit int is stored in li
ttle- or big-endian format.
DataView.prototype.getBigUint64() - JavaScript
syntax dataview.getbiguint64(byteoffset [, li
ttleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from.
... li
ttleendian optional indicates whether the 64-bit int is stored in li
ttle- or big-endian format.
DataView.prototype.getFloat32() - JavaScript
syntax dataview.getfloat32(byteoffset [, li
ttleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... li
ttleendian optional indicates whether the 32-bit float is stored in li
ttle- or big-endian format.
DataView.prototype.getFloat64() - JavaScript
syntax dataview.getfloat64(byteoffset [, li
ttleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... li
ttleendian optional indicates whether the 64-bit float is stored in li
ttle- or big-endian format.
DataView.prototype.getInt16() - JavaScript
syntax dataview.getint16(byteoffset [, li
ttleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... li
ttleendian optional indicates whether the 16-bit int is stored in li
ttle- or big-endian format.
DataView.prototype.getInt32() - JavaScript
syntax dataview.getint32(byteoffset [, li
ttleendian]) parameters byteoffset the offset, in bytes, from the start of the view where to read the data.
... li
ttleendian optional indicates whether the 32-bit int is stored in li
ttle- or big-endian format.
DataView.prototype.getUint16() - JavaScript
syntax dataview.getuint16(byteoffset [, li
ttleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... li
ttleendian optional indicates whether the 16-bit int is stored in li
ttle- or big-endian format.
DataView.prototype.getUint32() - JavaScript
syntax dataview.getuint32(byteoffset [, li
ttleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... li
ttleendian optional indicates whether the 32-bit int is stored in li
ttle- or big-endian format.
DataView.prototype.setBigInt64() - JavaScript
syntax dataview.setbigint64(byteoffset, value [, li
ttleendian]) parameters byteoffset the offset, in bytes, from the start of the view to store the data from.
... li
ttleendian optional indicates whether the 64-bit int is stored in li
ttle- or big-endian format.
DataView.prototype.setBigUint64() - JavaScript
syntax dataview.setbiguint64(byteoffset, value [, li
ttleendian]) parameters byteoffset the offset, in bytes, from the start of the view to store the data from.
... li
ttleendian optional indicates whether the 64-bit int is stored in li
ttle- or big-endian format.
DataView.prototype.setFloat32() - JavaScript
syntax dataview.setfloat32(byteoffset, value [, li
ttleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... li
ttleendian optional indicates whether the 32-bit float is stored in li
ttle- or big-endian format.
DataView.prototype.setFloat64() - JavaScript
syntax dataview.setfloat64(byteoffset, value [, li
ttleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... li
ttleendian optional indicates whether the 64-bit float is stored in li
ttle- or big-endian format.
DataView.prototype.setInt16() - JavaScript
syntax dataview.setint16(byteoffset, value [, li
ttleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... li
ttleendian optional indicates whether the 16-bit int is stored in li
ttle- or big-endian format.
DataView.prototype.setInt32() - JavaScript
syntax dataview.setint32(byteoffset, value [, li
ttleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... li
ttleendian optional indicates whether the 32-bit int is stored in li
ttle- or big-endian format.
DataView.prototype.setUint16() - JavaScript
syntax dataview.setuint16(byteoffset, value [, li
ttleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... li
ttleendian optional indicates whether the 16-bit int is stored in li
ttle- or big-endian format.
DataView.prototype.setUint32() - JavaScript
syntax dataview.setuint32(byteoffset, value [, li
ttleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... li
ttleendian optional indicates whether the 32-bit int is stored in li
ttle- or big-endian format.
Promise.any() - JavaScript
also, unlike promise.race(), which returns the first se
ttled value (either fulfillment or rejection), this method returns the first fulfilled value.
...this is in contrast to promise.race(), which resolves or rejects with the first promise to se
ttle.
Proxy - JavaScript
r' }, { name: 'seamonkey', type: 'browser' }] console.log(products.types); // ['browser', 'mailer'] console.log(products.number); // 3 a complete traps list example now in order to create a complete sample traps list, for didactic purposes, we will try to proxify a non-native object that is particularly suited to this type of operation: the doccookies global object created by the "li
ttle framework" published on the document.cookie page.
...get the "doccookies" object here: https://developer.mozilla.org/docs/dom/document.cookie#a_li
ttle_framework.3a_a_complete_cookies_reader.2fwriter_with_full_unicode_support */ var doccookies = new proxy(doccookies, { get: function (otarget, skey) { return otarget[skey] || otarget.getitem(skey) || undefined; }, set: function (otarget, skey, vvalue) { if (skey in otarget) { return false; } return otarget.setitem(skey, vvalue); }, deleteproperty: function (otarget, skey) { if (skey in otarget) { return false; } return otarget.removeitem(skey); }, enumerate: function (otarget, skey) { return otarget.keys(); }, ownkeys: function (otarget, skey) { return otarget.keys(); }, has: function (otarget, skey) { return skey...
encodeURIComponent() - JavaScript
// the following are not required for percent-encoding per rfc5987, // so we can allow for a li
ttle better readability over the wire: |`^ replace(/%(?:7c|60|5e)/g, unescape); } // here is an alternative to the above function function encoderfc5987valuechars2(str) { return encodeuricomponent(str).
...// i.e., %27 %28 %29 %2a (note that valid encoding of "*" is %2a // which necessitates calling touppercase() to properly encode) // the following are not required for percent-encoding per rfc5987, // so we can allow for a li
ttle better readability over the wire: |`^ replace(/%(7c|60|5e)/g, (str, hex) => string.fromcharcode(parseint(hex, 16))); } specifications specification ecmascript (ecma-262)the definition of 'encodeuricomponent' in that specification.
async function - JavaScript
use promise.all or promise.allse
ttled instead.
... if you wish to safely perform two or more jobs in parallel, you must await a call to promise.all, or promise.allse
ttled.
Web audio codec guide - Web media technologies
if so, avoid lossy compression, which would be compounded by recompressing the audio; or at least use as li
ttle compression as possible.
... in this case, it appears that flac is most likely the best codec to go with; alac has li
ttle to no direct browser support.
Performance Monitoring: RUM vs synthetic monitoring - Web Performance
controlling for environmental variables is helpful in understanding where performance bo
ttlenecks have been occurring and identifying the source of any performance issues.
... rum v synthetic synthetic is well suited for catching regressions during development life cycles, especially with network thro
ttling.
Mobile first - Progressive web apps (PWAs)
note: starting with very li
ttle and working up as the need arises usually makes more sense than starting with everything and then covering up things if they aren't needed!
...there is very li
ttle going on here, and anyone with a basic understanding of css should be able to understand most of it by just looking at the source code in app.css.
Index - WebAssembly
this article explains a li
ttle bit about how it works, and how to use available tools to covert text format files to the .wasm assembly format.
...this article describes what they are in a li
ttle more detail.
XUL Migration Guide - Archive of obsolete content
if your add-on only needs a li
ttle help from those techniques, and can accomplish most of what it needs using the supported apis, then it might still be worth migrating: we'll add more supported apis in future releases to meet important use cases.
jpm - Archive of obsolete content
developing without browser restarts because jpm run restarts the browser each time you invoke it, it can be a li
ttle cumbersome if you are making very frequent changes to an add-on.
List of Mozilla-Based Applications - Archive of obsolete content
according to the build instructions grani grain sizing assessment tool according to this wiki page grani is based on xul and xpcom daim gwt-mosaic-xul xul builder for google web tools hachette's multimedia encyclopedia electronic encyclopedia this product was using mozilla in 2004 but i’m not sure if new version still does hacketyhack li
ttle coders helma web application framework uses mozilla rhino holt mcdougal cd-roms educational cd-roms activity generator and lab generator are both based on custom firefox distributions houdini 3d animation tools uses gecko in embedded help viewer httpunit automated testing framework uses mozilla rhino htmlunit browser for...
DTrace - Archive of obsolete content
dtrace is sun microsystem's dynamic tracing framework that allows developers to instrument a program with probes that have li
ttle to no effect on performance when not in use and very li
ttle when active.
Creating a Help Content Pack - Archive of obsolete content
the glossary and index data sources will be hidden - information found only in them will not be displayed unless the user conducts a search of the help pack that would return glossary or index results.xxx this sentence is ugly - a li
ttle rewording help here would be nice a data source description is pretty much the same no matter which type you're defining, and the syntax is pretty simple.
Introducing the Audio API extension - Archive of obsolete content
var currentsampleoffset = audiooutput.mozcurrentsampleoffset(); audio data written using the mozwriteaudio() method needs to be written at a regular interval in equal portions, in order to keep a li
ttle ahead of the current sample offset (the sample offset that is currently being played by the hardware can be obtained with mozcurrentsampleoffset()), where "a li
ttle" means something on the order of 500 ms of samples.
Running Tamarin acceptance tests - Archive of obsolete content
777 /data/loca/android_runner.sh' test it out with a simple .abc or no args for usage (should return exitcode=0) $ tamarin-redux/platform/android/android_shell.py hello.abc hello exitcode=0 test it out by retrieving the version information of the shell on the android device $ $avm -dversion shell 1.4 debug build 6299:455bca954565 features avmsystem_32bit;avmsystem_unaligned_int_access;avmsystem_li
ttle_endian;avmsystem_arm;avmsystem_unix; avmfeature_jit;avmfeature_abc_interp;avmfeature_selftest;avmfeature_eval;avmfeature_protect_jitmem; avmfeature_shared_gcheap;avmfeature_cache_gqcn;avmfeature_safepoints;avmfeature_swf12;avmfeature_swf13;avmtweak_exact_tracing; running acceptance tests --androidthreads sets the number of threads to the number of phones found via usb.
Tamarin build documentation - Archive of obsolete content
note the "\obj9" directory under \platform\win32 for the win32 builds and "\x64" directory under \platform\win32 for 64-bit builds; this looks a li
ttle odd but preserves previous behavior as much as possible to avoid initial disruption from the shell rename fix.
The new nsString class implementation (1999) - Archive of obsolete content
the deficiencies of the current implementation are: class based -- making it unsuitable for cross-dll usage due to fragility li
ttle intrinsic i18n support few efficiencies, notably a lack of support for narrow (1-byte) character strings no support for external memory management policy lack of xpcom interface notable features of the new nsstrimpl implementation are: intrinsic support for 1 and 2 byte character widths provides automatic conversion between strings with different character sizes inviolate base structure ...
Install script template - Archive of obsolete content
ws the plid specification: http://mozilla.org/projects/plugins/plugin-identifier.html **/ // define some global variables var plugin_file = "npmyplugin.dll"; // this plugin consists of an xpt file because it is scriptable // http://mozilla.org/projects/plugins/scripting-plugins.html var component_file = "npmypluginscriptable.xpt"; var plugin_size = 2000; // (dll file) reserve a li
ttle extra so it is not required to update too often var component_size = 10; // (xpi file) reserve a li
ttle extra so it is not required to update too often var software_name="cult3d mozilla viewer"; // plids (http://mozilla.org/projects/plugins/plugin-identifier.html) are coined by vendors.
WinRegValue - Archive of obsolete content
the possible values are: winregvalue.reg_sz = 1 winregvalue.reg_expand_sz = 2 winregvalue.reg_binary = 3 winregvalue.reg_dword = 4 winregvalue.reg_dword_li
ttle_endian = 4 winregvalue.reg_dword_big_endian = 5 winregvalue.reg_link = 6 winregvalue.reg_multi_sz = 7 winregvalue.reg_resource_list = 8 winregvalue.reg_full_resource_descriptor = 9 winregvalue.reg_resource_requirements_list = 10 regdata a java byte array containing the data.
More Tree Features - Archive of obsolete content
ex="1" persist="width ordinal hidden" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joshua granville" /> <treecell label="vancouver" /> <treecell label="7:06:00" /> <treecell label="9:10:26" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="robert valhalla" /> <treecell label="sea
ttle" /> <treecell label="7:08:00" /> <treecell label="9:15:51" /> </treerow> </treeitem> </treechildren> </tree> three attributes of the columns must be persisted, the width attribute to save the column widths, the ordinal attribute which holds the position of the column, and the hidden attribute which holds whether the column is hidden or visible.
Using Visual Studio as your XUL IDE - Archive of obsolete content
compared to a simple text-editor, visual studio gives you some special features when writing xul: intellisense / autocompletion for elements and attributes validation syntax coloring (okay, more sophisticated editors like notepad++ provide this as well) before you can use all of this, you have to adjust visual studio a li
ttle.
Adobe Flash - Archive of obsolete content
as part of mozilla's effort to improve the user experience, a feature was added in firefox 49 that automatically blocks certain flash modules that have li
ttle or no user-noticeable impact from being used.
Element - Archive of obsolete content
nt) m <managingeditor> (rss managing editor element) n <name> (rss name element) o p <pubdate> (rss published date element) q r <rating> (rss rating element) <rss> (rss's root "rss" element) s <skipdays> (rss skip days element) <skiphours> (rss skip hours element) <source> (rss source element) t <textinput> (rss text input element) <title> (rss title element) <
ttl> (rss
ttl element) u <url> (rss url element) v w <webmaster> (rss web master element) <width> (rss width element) x y z ...
Using workers in extensions - Archive of obsolete content
rences-service;1"] .getservice(components.interfaces.nsiprefservice) .getbranch("stockwatcher2."); this.prefs.queryinterface(components.interfaces.nsiprefbranch2); this.prefs.addobserver("", this, false); this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.worker = new worker("chrome://stockwatcher2/content/ticker_worker.js"); // small li
ttle dance to get 'this' to refer to stockwatcher, not the // worker, when a message is received.
Displaying notifications (deprecated) - Archive of obsolete content
for example, let's simply append a li
ttle html to our document when these events fire: notification.onclick = function() { var e = document.createelement("p"); e.innerhtml = "<strong>the notification was clicked.</strong>"; document.body.appendchild(e); }; notification.onclose = function() { var e = document.createelement("p"); e.innerhtml = "<strong>the notification was closed.</strong>"; document.body.appendchild(e); }; ...
Index - Game development
45 build the brick field 2d, beginner, canvas, games, javascript, phaser, tutorial building the brick field is a li
ttle bit more complicated than adding a single object to the screen, although it's still easier with phaser than in pure javascript.
Game distribution - Game development
it's easy to prepare a game for them as such an action involves li
ttle to no modification of the game itself — usually adding a manifest file containing necessary information in a zipped package containing all the resources is enough.
Implementing controls using the Gamepad API - Game development
for example, the fridge tank will turn right only when the x value is bigger than 0.5: if(gamepadapi.axesstatus[0].x > 0.5) { this.player.angle += 3; this.turret.angle += 3; } even if we move it a li
ttle by mistake or the stick doesn't make it back to its original position, the tank won't turn unexpectedly.
Efficient animation for web games - Game development
puzzowl isn’t out yet, but here’s a li
ttle screencast of it running on a nexus 5: note: this article was originally written and published by chris lord, on his blog — see efficient animation for games on the (mobile) web.
Build the brick field - Game development
add the following just above the drawball() call: drawbricks(); compare your code at this point, the game has got a li
ttle more interesting again : exercise: try changing the number of bricks in a row or a column, or their positions.
Build the brick field - Game development
building the brick field is a li
ttle bit more complicated than adding a single object to the screen, although it's still easier with phaser than in pure javascript.
Player paddle and controls - Game development
it's very similar to positioning the paddle — we need to have it placed in the middle of the screen horizontally and at the bottom vertically with a li
ttle offset from the bottom.
Round Trip Time (RTT) - MDN Web Docs Glossary: Definitions of Web-related terms
$ ping example.com ping example.com (216.58.194.174): 56 data bytes 64 bytes from 216.58.194.174: icmp_seq=0
ttl=55 time=25.050 ms 64 bytes from 216.58.194.174: icmp_seq=1
ttl=55 time=23.781 ms 64 bytes from 216.58.194.174: icmp_seq=2
ttl=55 time=24.287 ms 64 bytes from 216.58.194.174: icmp_seq=3
ttl=55 time=34.904 ms 64 bytes from 216.58.194.174: icmp_seq=4
ttl=55 time=26.119 ms --- google.com ping statistics --- 5 packets transmitted, 5 packets received, 0.0% packet loss round-trip min/avg/max/stddev = 23.781/26.
Pseudo-classes and pseudo-elements - Learn web development
a more valid use of these pseudo-elements is to insert an icon, for example the li
ttle arrow added in the example below, which is a visual indicator that we wouldn't want read out by a screenreader: these pseudo-elements are also frequently used to insert an empty string, which can then be styled just like any element on the page.
Positioning - Learn web development
if you save and refresh now, you'll see a fun li
ttle effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it.
CSS first steps - Learn web development
how css is structured now that you have an idea about what css is and the basics of using it, it is time to look a li
ttle deeper into the structure of the language itself.
create fancy boxes - Learn web development
the box-shadow property allow us to create inner light and a flat drop shadow effect, but with some li
ttle extra work it becomes possible to create a more natural geometry by using pseudo-element and the transform property.
How to structure a web form - Learn web development
here is a li
ttle example: <form> <fieldset> <legend>fruit juice size</legend> <p> <input type="radio" name="size" id="size_1" value="small"> <label for="size_1">small</label> </p> <p> <input type="radio" name="size" id="size_2" value="medium"> <label for="size_2">medium</label> </p> <p> <input type="radio" name="size" id="size_3" value="large"> <labe...
Example - Learn web development
sure that all text field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* to give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } input:focus, textarea:focus { /* to give a li
ttle highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height: 5em; /* to allow users to resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /* to position the buttons to the same p...
Dealing with files - Learn web development
to demonstrate this, we will insert a li
ttle bit of html into our index.html file, and make it display the image you chose in the article "what will your website look like?" copy the image you chose earlier into your images folder.
Advanced text formatting - Learn web development
n't use presentational elements like <code><font></code> and <code><center></code>.</p> <p>in the above javascript example, <var>para</var> represents a paragraph element.</p> <p>select all the text with <kbd>ctrl</kbd>/<kbd>cmd</kbd> + <kbd>a</kbd>.</p> <pre>$ <kbd>ping mozilla.org</kbd> <samp>ping mozilla.org (63.245.215.20): 56 data bytes 64 bytes from 63.245.215.20: icmp_seq=0
ttl=40 time=158.233 ms</samp></pre> the above code will look like so: marking up times and dates html also provides the <time> element for marking up times and dates in a machine-readable format.
Debugging HTML - Learn web development
however, error messages can quickly get more complicated and less easy to interpret as programs get bigger, and even simple cases can look a li
ttle intimidating to someone who doesn't know anything about rust.
Document and website structure - Learn web development
scared, but determined to protect his friends, he raised his wand and prepared to do ba
ttle, hoping that his distress call had made it through.</p> <hr> <p>meanwhile, harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap.
HTML Tables - Learn web development
coupled with a li
ttle css for styling, html makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team.
Inheritance in JavaScript - Learn web development
to create a subclass we use the extends keyword to tell javascript the class we want to base our class on, class teacher extends person { constructor(subject, grade) { this.subject = subject; this.grade = grade; } } but there's a li
ttle catch.
Web performance - Learn web development
to go a bit deeper into these topics, with modules such as: introduction to html css first steps javascript first steps once you've worked through this module, you'll probably be excited to go deeper into web performance — you can find a lot of further teachings in our main mdn web performance section, including overviews of performance apis, testing and analysis tools, and performance bo
ttleneck gotchas.
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
try restarting the dev server and going to localhost:4200 again, and you'll now see that we have a fully-operational ba
ttlestation “todos left” counter and clear button: if you're asking yourself why we're not just doing the toggle on the component, since the function is entirely self-contained and not at all needing anything from the service, then you are 100% right to ask that question!
Getting started with React - Learn web development
we'll discover a li
ttle bit of detail about its background and use cases, set up a basic react toolchain on our local computer, and create and play with a simple starter app — learning a bit about how react works in the process.
Getting started with Svelte - Learn web development
a charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>svelte app</title> <link rel='icon' type='image/png' href='/favicon.png'> <link rel='stylesheet' href='/global.css'> <link rel='stylesheet' href='/build/bundle.css'> <script defer src='/build/bundle.js'></script> </head> <body> </body> </html> the minified version of bundle.js weighs a li
ttle more than 3kb, which includes the "svelte runtime" (just 300 lines of javascript code) and the app.svelte compiled component.
Creating our first Vue component - Learn web development
update the component object like so: export default { props: { label: { required: true, type: string }, done: { default: false, type: boolean } }, data() { return { isdone: this.done }; } }; vue does a li
ttle magic here — it binds all of your props directly to the component instance, so we don’t have to call this.props.done.
Getting started with Vue - Learn web development
in this article we'll look at a li
ttle bit of vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
Handling common HTML and CSS problems - Learn web development
for example: <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-ba
ttle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-ba
ttle-clip-medium.webm" type="video/webm"> <!-- offer download --> <p>your browser does not support html5 video; here is a link to <a href="video/tears-of-steel-ba
ttle-clip-medium.mp4">view the video</a> directly.</p> </video> this example includes a simple link allowing you to download the video if even the html5 vid...
Strategies for carrying out testing - Learn web development
studying analytics data now you should be able to go back to the analytics web homepage, and start looking at the data you've collected about your site (you need to leave a li
ttle bit of time for some data to actually be collected, of course.) by default, you should see the reporting tab, like so: there is a huge amount of data you could look at using google analytics — customized reports in different categories, etc.
Git and GitHub - Learn web development
git handbook (from github) this git handbook goes into a li
ttle more depth, explaining what a vcs is, what a repository is, how the basic github model works, git commands and examples, and more.
Package management basics - Learn web development
installing parcel run the following command to install parcel locally: npm install parcel-bundler once that's done all the things, we're now ready for some "modern client-side development" (which really means using build tools to make the developer experience a li
ttle easier).
Accessibility API cross-reference
tribute title or caption of window titlebar n/a n/a <title> a button that can be pushed in or out, but doesn't provide separate indicator of checked state n/a toggle_button toggle_button button with aria-pressed attribute a toolbar toolbar tool_bar tool_bar toolbar the li
ttle piece of help text that comes up when you put your mouse over something tooltip tool_tip tool_tip tooltip a grid whose rows can be expanded and collapsed in the same manner as for a tree.
Initial setup
web-based l10n tools we'll talk about these in a li
ttle bit.
MathML In Action
or what about those things that just seem itchy, and that you wish could be done just a li
ttle better?
Mozilla Style System
the style system actually has relatively li
ttle to do with style sheets; it instead deals with style rule processors.
JS::PerfMeasurement
page_faults page faults that required disk access ::context_switches .context_switches context switches involving the profiled thread ::cpu_migrations .cpu_migrations migrations of the profiled thread from one cpu core to another these events map directly to "generic events" in the linux 2.6.31+ <linux/perf_event.h> interface, and so unfortunately are a li
ttle vague in their specification; for instance, we can't tell you exactly which level of cache you get misses for if you measure cache_misses.
Leak-hunting strategies and tips
start finding and fixing leaks by running part of the task under nstracerefcnt logging, gradually building up from as li
ttle as possible to the complete task, and fixing most of the leaks in the first steps before adding additional steps.
Memory reporting
an example involving inheritance things are a li
ttle trickier when inheritance is involved.
Power profiling overview
first of all, all measurements are best done on a quiet machine that is running li
ttle other than the program of interest.
Scroll-linked effects
this means that the effects implemented will lag a li
ttle bit behind what the user sees the scroll position to be.
NSS FAQ
however, there is li
ttle or no documentation currently available for the rest of the nss api.
nss tech note1
quickder was written to be as compatible as possible with the classic decoder, in order to ease migration to it in areas of critical performance bo
ttlenecks.
Overview of NSS
like nss, nspr has been ba
ttle-tested in multiple products.
Scripting Java
in practice there's li
ttle need to call the javaadapter constructor directly.
Rebranding SpiderMonkey (1.8.5)
croll down" a few lines until you see these lines: install:: $(pkg_config_files) @echo pkg_config_file: $(pkg_config_files) those two lines should be modified to read back: install:: $brand.pc @echo pkg_config_file: $brand.pc note: while it is possible to automate the manual editing process, this has been discouraged due to the fact that these files are automatically generated and very li
ttle constant data can be depended upon.
SpiderMonkey Internals: Thread Safety
*/ js_endrequest(cx); js_clearcontextthread(cx); it isn't a bo
ttleneck; multiple threads are allowed to be in requests on the same jsruntime at once.
SpiderMonkey Internals
these messages can be localized at compile time by replacing the .msg file; or, with a li
ttle modification to the source, at run time.
Web Replay
this feature has had li
ttle testing or polishing and there is not yet a good definition of 'reasonably similar'.
WebReplayRoadmap
if js performance is a bo
ttleneck, recordings can be analyzed for code regions that are both very hot and have inconsistent types.
Exploitable crashes
there is li
ttle public information about it, and it is hard to find even on the apple developer site.
Avoiding leaks in JavaScript XPCOM components
to understand closures a li
ttle better before examining how they can cause leaks, consider the following example, in which there are two pairs of function objects, and each pair has an instance of the private_data variable: // this function returns an array containing two functions.
imgIEncoder
post-multiplied alpha us used (for example 50% transparent red is 0xff000080) input_format_hostargb 2 input is host-endian argb: on big-endian machines each pixel is therefore argb, and for li
ttle-endian machiens (intel) each pixel is bgra (this is used by canvas to match it's internal representation) pre-multiplied alpha is used (that is, 50% transparent red is 0x80800000, not 0x80ff0000) possible values for outputoptions.
mozIRegistry
i think this might make it a li
ttle more flexible, thereby making xpcom more general-purpose.
nsIBinaryInputStream
this might be used, for example, to implement network protocols or to read from architecture-neutral disk files, that is ones that can be read and written by both big-endian and li
ttle-endian platforms.
nsIBinaryOutputStream
this might be used, for example, to implement network protocols or to produce architecture-neutral binary disk files, that is ones that can be read and written by both big-endian and li
ttle-endian platforms.
nsIInstallLocation
offsetting can be bri
ttle but you should know what install locations are being defined for your own application.
nsIWebBrowser
active means that it's visible enough that we want to avoid certain optimizations like discarding decoded image data and thro
ttling the refresh driver.
Xptcall Porting Guide
i ended up with larger stubs than i would have preferred rather than ba
ttle the compiler over what would happen to the stack before my asm code began running.
Xptcall Porting Status
from looking at the linux x86 code, i gather that the vtable layout is a li
ttle different for those compilers and the code will need minor modifications in order to work properly.
Autoconfiguration in Thunderbird
guessing if all other mechanisms failed, thunderbird tries to guess the configuration, by trying common server names like imap.<domain>, smtp.<domain>, mail.<domain> etc., and, when a mail server answers, checking whether it supports ssl, star
ttls and encrypted passwords (cram-md5).
Filelink Providers
some providers require thunderbird to do very li
ttle in order to connect a user to their account.
Mail client architecture overview
most of these modules have li
ttle dependancy on the mail reader itself: compose - the mail compose module is responsible for anything that has to do with sending mail.
Standard OS Libraries
wms on ubuntu work a li
ttle differently but we'll revisit this topic later in this article (did you know they have a *special* firefox build for ubuntu?).
Source map errors - Firefox Developer Tools
the message looks a li
ttle different in this case: in this case, the error will also be displayed in the source tab in the debugger: networkerror when attempting to fetch resource a bug in firefox prevents it from loading source maps for web extensions.
Debugger - Firefox Developer Tools
onpromisese
ttled(promise) a promise object, referenced by the debugger.object instance promise that was allocated within a debuggee scope, has se
ttled (either fulfilled or rejected).
Index - Firefox Developer Tools
53 thro
ttling 110n:priority, debugging, dev tools, firefox, guide, networking, tools the network monitor allows you to thro
ttle your network speed to emulate various connection speeds so you can see how your app will behave under different connection types.
Performance Analysis - Firefox Developer Tools
network monitor features the following articles cover different aspects of using the network monitor: toolbar network request list network request details network traffic recording thro
ttling ...
Network request list - Firefox Developer Tools
network monitor features the following articles cover different aspects of using the network monitor: toolbar network request details network traffic recording performance analysis thro
ttling ...
Network Monitor - Firefox Developer Tools
n pieces: the main screen contains the toolbar, the network request list, and the network request details pane: the performance analysis view is a separate screen: working with the network monitor the following articles cover different aspects of using the network monitor: toolbar network request list network request details network traffic recording performance analysis thro
ttling ...
UI Tour - Firefox Developer Tools
statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser is spending executing it, so you can identify bo
ttlenecks in your code.
Cache.addAll() - Web APIs
', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/myli
ttlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specifications specification status comment service workersthe definition of 'cache: addall' in that specification.
Cache.put() - Web APIs
var response; var cachedresponse = caches.match(event.request).catch(function() { return fetch(event.request); }).then(function(r) { response = r; caches.open('v1').then(function(cache) { cache.put(event.request, response); }); return response.clone(); }).catch(function() { return caches.match('/sw-test/gallery/myli
ttlevader.jpg'); }); specifications specification status comment service workersthe definition of 'cache: put' in that specification.
CacheStorage.match() - Web APIs
) { // response may be used only once // we need to save clone to put one copy in cache // and serve second one let responseclone = response.clone(); caches.open('v1').then(function (cache) { cache.put(event.request, responseclone); }); return response; }).catch(function () { return caches.match('/sw-test/gallery/myli
ttlevader.jpg'); }); } })); }); specifications specification status comment service workersthe definition of 'cachestorage: match' in that specification.
CacheStorage.open() - Web APIs
elf.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/myli
ttlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); specifications specification status comment service workersthe definition of 'cachestorage: open' in that specification.
A basic ray-caster - Web APIs
after realizing, to my delight, that the nifty <canvas> element i'd been reading about was not only soon to be supported in firefox, but was already supported in the current version of safari, i had to try a li
ttle experiment.
Using images - Web APIs
art gallery example in the final example of this chapter, we'll build a li
ttle art gallery.
Console API - Web APIs
the console api spec was created to define consistent behavior, and all modern browsers eventually se
ttled on implementing this behavior — although some implementations still have their own additional proprietary functions.
Document.open() - Web APIs
three-argument document.open() there is a lesser-known and li
ttle-used three-argument version of document.open() , which is an alias of window.open() (see its page for full details).
Introduction to the DOM - Web APIs
but the relationship between objects and the interfaces that they implement in the dom can be confusing, and so this section attempts to say a li
ttle something about the actual interfaces in the dom specification and how they are made available.
Element.computedStyleMap() - Web APIs
<p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a li
ttle bit of css a { --colour: red; color: var(--colour); } we add javascript to grab our link and return back a definition list of all the css property values using computedstylemap().
Element.scrollTop - Web APIs
if set to a value greater than the maximum available for the element, scrolltop se
ttles itself to the maximum value.
Event.preventDefault() - Web APIs
html here's the form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"> </form> </div> css we use a li
ttle bit of css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-radius: 2px; padding: 10px; position: absolute; background-color: #fbd8d4; color: #3b3c40; } javascript and here's the javascript code that does the job.
HTMLMediaElement.readyState - Web APIs
have_future_data 3 data for the current playback position as well as for at least a li
ttle bit of time into the future is available (in other words, at least two frames of video, for example).
Intersection Observer API - Web APIs
the author of the web site may not even realize this is happening, since they may know very li
ttle about the inner workings of the two libraries they are using.
Using the MediaStream Recording API - Web APIs
keeping the interface constrained to the viewport, regardless of device height, with calc() the calc() function is one of those useful li
ttle utility features that's cropped up in css that doesn't look like much initially, but soon starts to make you think "wow, why didn't we have this before?
RTCIceCandidateStats.networkType - Web APIs
for example, if the networktype is wifi but the user is connected using a cellular hotspot, the connection will be bo
ttlenecked by the underlying cellular network (and any other networks between the two peers).
RTCNetworkType - Web APIs
for example, if the networktype is wifi but the user is connected using a cellular hotspot, the connection will be bo
ttlenecked by the underlying cellular network (and any other networks between the two peers).
Resize Observer API - Web APIs
concepts and usage there are a whole raft of use cases for responsive design techniques (and others besides) that respond to changes in an element's size, but previously their implementations have often been hacky and/or bri
ttle.
Resource Timing API - Web APIs
however, note that some properties have li
ttle to no implementation so see each property's "browser compatibility" section for more specific interoperability data.
ServiceWorkerGlobalScope: install event - Web APIs
ll', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/myli
ttlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ); }) ); }); you can also set up the event handler using the serviceworkerglobalscope.oninstall property: globalscope.oninstall = function(event) { ...
ServiceWorkerGlobalScope.oninstall - Web APIs
ll', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/myli
ttlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ); }) ); }); specifications specification status comment service workersthe definition of 'event handlers' in that specification.
Streams API concepts - Web APIs
when a stream later in the chain is still busy and isn't yet ready to accept more chunks, it sends a signal backwards through the chain to tell earlier transform streams (or the original source) to slow down delivery as appropriate so that you don't end up with a bo
ttleneck anywhere.
A simple RTCDataChannel sample - Web APIs
<div class="messagebox"> <label for="message">enter a message: <input type="text" name="message" id="message" placeholder="message text" inputmode="latin" size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> finally, there's the li
ttle box into which we'll insert the messages.
Writing a WebSocket server in C# - Web APIs
using system.text; using system.text.regularexpressions; while(client.available < 3) { // wait for enough bytes to be available } byte[] bytes = new byte[client.available]; stream.read(bytes, 0, bytes.length); //translate bytes of request to string string data = encoding.utf8.getstring(bytes); if (regex.ismatch(data, "^get")) { } else { } the response is easy to build, but might be a li
ttle bit difficult to understand.
Lighting a WebXR setting - Web APIs
obviously, there are exceptions to this guideline, such as when your scene represents an otherworldly or alien setting, or when your goal is to create an unse
ttling visual effect.
Visualizations with Web Audio API - Web APIs
f the right hand side of the canvas, then draw the stroke we've defined: canvasctx.lineto(canvas.width, canvas.height/2); canvasctx.stroke(); }; at the end of this section of code, we invoke the draw() function to start off the whole process: draw(); this gives us a nice waveform display that updates several times a second: creating a frequency bar graph another nice li
ttle sound visualization to create is one of those winamp-style frequency bar graphs.
Window.openDialog() - Web APIs
it behaves the same, except that it can optionally take one or more parameters past windowfeatures, and windowfeatures itself is treated a li
ttle differently.
WindowOrWorkerGlobalScope.caches - Web APIs
', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/myli
ttlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specifications specification status comment service workersthe definition of 'caches' in that specification.
XRVisibilityState - Web APIs
in order to optimize resource utilization, the user agent may be handling the session's requestanimationframe() callbacks at a thro
ttled rate.
Basic form hints - Accessibility
<form> <ul> <li> <input id="wine-1" type="checkbox" value="riesling"/> <label for="wine-1">berg ro
ttland riesling</label> </li> <li> <input id="wine-2" type="checkbox" value="pinot-blanc"/> <label for="wine-2">pinot blanc</label> </li> <li> <input id="wine-3" type="checkbox" value="pinot-grigio"/> <label for="wine-3">pinot grigio</label> </li> <li> <input id="wine-4" type="checkbox" value="gewurztraminer"/> <label for="wine-4">gewürztra...
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
ng: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> .box1 { grid-area: 1 / 1 / 4 / 2; } .box2 { grid-area: 1 / 3 / 3 / 4; } .box3 { grid-area: 1 / 2 / 2 / 3; } .box4 { grid-area: 3 / 2 / 4 / 4; } this order of values for grid-area can seem a li
ttle strange, it is the opposite of the direction in which we specify margins and padding as a shorthand for example.
Privacy and the :visited selector - CSS: Cascading Style Sheets
li
ttle white lies to preserve users' privacy, firefox and other browsers will lie to web applications under certain circumstances: the window.getcomputedstyle method, and similar functions such as element.queryselector, will always return values indicating that a user has never visited any of the links on a page.
backface-visibility - CSS: Cascading Style Sheets
ight { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a li
ttle nicer */ th, p, td { background-color: #eeeeee; margin: 0px; padding: 6px; font-family: sans-serif; text-align: left; } result specifications specification status comment css transforms level 2the definition of 'backface-visibility' in that specification.
inherit - CSS: Cascading Style Sheets
for non-inherited properties, this specifies a behavior that typically makes relatively li
ttle sense and you may consider using initial instead, or unset on the all property.
orphans - CSS: Cascading Style Sheets
it has a li
ttle bit more text than the first one.</p> </div> css div { background-color: #8cffa0; height: 150px; columns: 3; orphans: 3; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status comment css fragmentation module level 3the definition of 'orphans' in that specification.
page-break-inside - CSS: Cascading Style Sheets
it has a li
ttle bit more text than the third one.</p> </div> css .page { background-color: #8cffa0; height: 90px; width: 200px; columns: 1; column-width: 100px; } .list, ol, ul, p { break-inside: avoid; } p { background-color: #8ca0ff; } ol, ul, .list { margin: 0.5em 0; display: block; background-color: orange; } p:first-child { margin-top: 0; } result specifications sp...
perspective-origin - CSS: Cascading Style Sheets
.right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a li
ttle nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result specifications specification status comment css transforms level 2the definition of 'perspective-origin' in that specification.
perspective - CSS: Cascading Style Sheets
ight { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a li
ttle nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result specifications specification status comment css transforms level 2the definition of 'perspective' in that specification.
widows - CSS: Cascading Style Sheets
it has a li
ttle bit more text than the first one.</p> </div> css div { background-color: #8cffa0; columns: 3; widows: 2; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status comment css fragmentation module level 3the definition of 'widows' in that specification.
writing-mode - CSS: Cascading Style Sheets
</td> </tr> <tr> <td>sideways-rl</td> <td class="example text5"><span>我家没有电脑。</span></td> <td class="example text5"><span>example text</span></td> <td class="example text5"><span>מלל ארוך לדוגמא</span></td> <td class="example text5"><span>1994年に至っては</span></td> </tr> </table> css some preparatory css just to make things look a li
ttle better: table { border-collapse:collapse; } td, th { border: 1px black solid; padding: 3px; } th { background-color: lightgray; } .example { height:75px; width:75px; } the css that adjusts the directionality of the content looks like this: .example.text1 span, .example.text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; }...
Setting up adaptive streaming media sources - Developer guides
other reasons to use live profile over ondemand for vod content may be: your client or server does not support range requests your server cannot cache range requests efficiently your server cannot prefetch range requests efficiently the sidx* is large and having to load it first slows down startup a li
ttle you want to use the original files for both dash and other forms of delivery (such as microsoft smooth streaming) as a transition strategy you can use the same media files for both live transmission and vod at a later stage *sidx or segmentindexbox is a structure describing a segment by giving its earliest presentation time and other meta-data and can often make up a large portion of the mpd...
Media buffering, seeking, and time ranges - Developer guides
15 19 21 for this audio instance, the associated timeranges object would have the following available properties: myaudio.buffered.length; // returns 2 myaudio.buffered.start(0); // returns 0 myaudio.buffered.end(0); // returns 5 myaudio.buffered.start(1); // returns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a li
ttle bit of html: <p> <audio id="my-audio" controls> <source src="music.mp3" type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="300" height="20"> </canvas> </p> and a li
ttle bit of javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontex...
XHTML - Developer guides
the problems are described in more details in the following articles: beware of xhtml by david hammond sending xhtml as text/html considered harmful by ian hickson xhtml's dirty li
ttle secret by mark pilgrim xhtml - what's the point?
<input type="hidden"> - HTML: Hypertext Markup Language
the edit form's html might look a li
ttle bit like this: <form> <div> <label for="title">post title:</label> <input type="text" id="title" name="title" value="my excellent blog post"> </div> <div> <label for="content">post content:</label> <textarea id="content" name="content" cols="60" rows="5"> this is the content of my excellent blog post.
<input type="time"> - HTML: Hypertext Markup Language
using the step attribute you can use the step attribute to vary the amount of time jumped whenever the time is incremented or decremented (for example, so the time moves by 10 minutes at a time when clicking the li
ttle arrow widgets).
Browser detection using the user agent - HTTP
however, internet explorer was such a special li
ttle wasp exception prior to version 9 that it was very easy to detect the browser based upon the browser-specific features available.
HTTP conditional requests - HTTP
the client first reads the original files, modifies them, and finally pushes them to the server: unfortunately, things get a li
ttle inaccurate as soon as we take into account concurrency.
Cross-Origin-Embedder-Policy - HTTP
examples certain features depend on cross-origin isolation you can only access certain features like sharedarraybuffer objects or performance.now() with unthro
ttled timers, if your document has a coep header with the value require-corp value set.
Cross-Origin-Opener-Policy - HTTP
examples certain features depend on cross-origin isolation certain features like sharedarraybuffer objects or performance.now() with unthro
ttled timers are only available if your document has a coop header with the value same-origin value set.
Array.prototype.indexOf() - JavaScript
} else // all else for (; i !== len; ++i) if (that[i] === member) return i return -1 // if the value was not found, then return -1 } })(object, math.max, math.min) however, if you are more interested in all the li
ttle technical bits defined by the ecma standard, and are less concerned about performance or conciseness, then you may find this more descriptive polyfill to be more useful.
Array.isArray() - JavaScript
if (!array.isarray) { array.isarray = function(arg) { return object.prototype.tostring.call(arg) === '[object array]'; }; } examples using array.isarray // all following calls return true array.isarray([]); array.isarray([1]); array.isarray(new array()); array.isarray(new array('a', 'b', 'c', 'd')); array.isarray(new array(3)); // li
ttle known fact: array.prototype itself is an array: array.isarray(array.prototype); // all following calls return false array.isarray(); array.isarray({}); array.isarray(null); array.isarray(undefined); array.isarray(17); array.isarray('array'); array.isarray(true); array.isarray(false); array.isarray(new uint8array(32)); array.isarray({ __proto__: array.prototype }); instanceof vs isarray when ...
Promise() constructor - JavaScript
note that if you call resolutionfunc or rejectionfunc and pass another promise object as an argument, you can say that it is "resolved", but still cannot be said to be "se
ttled".
Promise.all() - JavaScript
in comparison, the promise returned by promise.allse
ttled() will wait for all input promises to complete, regardless of whether or not one rejects.
await - JavaScript
description the await expression causes async function execution to pause until a promise is se
ttled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment.
this - JavaScript
a function's this keyword behaves a li
ttle differently in javascript compared to other languages.
Strict mode - JavaScript
still, this hiding makes li
ttle sense and is probably undesirable (it might hide a typo, for example), so in strict mode duplicate argument names are a syntax error: function sum(a, a, c) { // !!!
Linking - SVG: Scalable Vector Graphics
to get around this, requires a li
ttle ugly javascript hacking: button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <g onclick="top.document.href='page2.html'" cursor="pointer"> <!-- button graphical elements here --> </g> </svg> example for an example of this solution at work see www.codedread.com.
Paths - SVG: Scalable Vector Graphics
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 10 h 90 v 90 h 10 l 10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> <circle cx="90" cy="90" r="2" fill="red"/> <circle cx="90" cy="10" r="2" fill="red"/> <circle cx="10" cy="90" r="2" fill="red"/> </svg> we can shorten the above path declaration a li
ttle bit by using the "close path" command, called with z.
SVG: Scalable Vector Graphics
some real eye-candy svg at svg-wow.org firefox extension (grafox) to add a subset of smil animation support interactive photos manipulation html transformations using svg's foreignobject mapping, charting, games & 3d experiments while a li
ttle svg can go a long way to enhanced web content, here are some examples of heavy svg usage.
XPath snippets - XPath
> <person first-name="eric" middle-initial="h" last-name="jung"> <address street="321 south st" city="denver" state="co" country="usa"/> <address street="123 main st" city="arlington" state="ma" country="usa"/> </person> <person first-name="jed" last-name="brown"> <address street="321 north st" city="atlanta" state="ga" country="usa"/> <address street="123 west st" city="sea
ttle" state="wa" country="usa"/> <address street="321 south avenue" city="denver" state="co" country="usa"/> </person> </people> you can now "query" the document with xpath expressions.