Search completed in 1.18 seconds.
499 results for "ttl":
Your results are loading. Please wait...
Network throttling - MDN Web Docs Glossary: Definitions of Web-related terms
network throttling is an intentional slowing down of internet speed.
... in web performance, network throttling, 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 throttling enables a developer to emulate an experience of a user.
...And 2 more matches
Promise.allSettled() - JavaScript
the promise.allsettled() 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.allsettled(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.allsettled() returns a promise object that has already been resolved as an empty array.
... examples using promise.allsettled promise.allsettled([ 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.allsettled' 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 throttle your network speed to emulate various connection speeds so you can see how your app will behave under different connection types.
... throttling the toolbar includes a throttling dropdown, which allows you to throttle 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;> <!attlist 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> <!attlist content id id #implied > a binding can specify new content that is placed inside the bound element.
... children <!element children empty> <!attlist 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 settled 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 settled 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 settled.
...And 8 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
timeouts throttled to ≥ 4ms in modern browsers, settimeout()/setinterval() calls are throttled 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 throttling behaviour a bit differently (e.g.
... timeouts in inactive tabs throttled to ≥ 1000ms to reduce the load (and associated battery usage) from background tabs, timeouts are throttled 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 little utility.
...stringview.pututf8charcode(mystringview.rawdata, "_".charcodeat(0), 5) alert(mystringview); // "hello_world!" stringview.pututf8charcode() is mainly for internal use and generally is of little utility.
... stringview.getutf8charlength() is mainly for internal use and generally is of little 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 bottle and a cupcake.
...when alice drinks from the bottle, she grows smaller.
... this is because the bottle changes her animation’s playbackrate from 1 to -1: var shrinkalice = function() { alicechange.playbackrate = -1; alicechange.play(); } bottle.addeventlistener("mousedown", shrinkalice, false); bottle.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 throttled in background/inactive tabs to help improve performance.
... budget-based background timeout throttling is now available in modern browsers (firefox 58+, chrome 57+), placing an additional limit on background timer cpu usage.
... windows are subjected to throttling after 30 seconds, with the same throttling 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 little 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 little 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 little 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 little more complicated.
...for example, if you create a firefox extension, it would normally take little effort to port it to seamonkey, which has very similar features and ui.
...in the case of the unified menu, things are a little 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 little confusing at first.
...low latency is good, meaning there is little or no delay.
... 286 network throttling glossary, rum, reference, synthetic monitoring, web performance network throttling 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 little 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 little reason to not use requestanimationframe().
... throttling 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 little 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 settles.
... our goal is now to get that to settle 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 little 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 little careful.
...equality is a little 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 little 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 battle game, created with playcanvas.
... browserquest a mmorpg created by the little 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 battle game (currently in development.) a wizard's lizard top down zelda-esque exploration/rpg.
... katan.io html5 and canvas implementation of settlers of catan.
How to build custom form controls - Learn web development
this one is a little bit trickier.
... we have to think a little 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 little 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 little 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 little balls will bounce around on the screen, and change color when they touch each other.
... the finished example will look a little 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 little 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 little 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 brittle it is — for example it might be more complex to configure, and easier to break.
... a little later in this chapter, we'll provide the eslint config.
... before starting on the development of the actual application code, a little 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 little more configuration to the eslint settings to get it to accept jsx features.
Shell global objects
functions available only if spidermonkey_promise is defined settlepromisenow(promise) 'settle' a promise immediately.
... this just marks the promise as resolved with a value of undefined and causes the firing of any onpromisesettled hooks set on debugger instances that are observing the given promise's global as a debuggee.
... settlefakepromise(promise) 'settle' a promise created by makefakepromise().
... this doesn't have any observable effects outside of firing any onpromisesettled 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 little different: let body = document.queryselector('body'); let myimage = new image(); imgload('mylittlevader.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/mylittlevader.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/mylittlevader.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 throttling/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 little time to render your scene each frame.
... for these reasons, unless your renderer is fairly small and lightweight, with little 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 little 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 little bit more of the left side of the object and a little bit less of the right, and vice versa.
DataView - JavaScript
var littleendian = (function() { var buffer = new arraybuffer(2); new dataview(buffer).setint16(0, 256, true /* littleendian */); // int16array uses the platform's endianness.
... return new int16array(buffer)[0] === 256; })(); console.log(littleendian); // 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, littleendian) { // split 64-bit number into two 32-bit (4-byte) parts const left = dataview.getuint32(byteoffset, littleendian); const right = dataview.getuint32(byteoffset+4, littleendian); // combine the two 32-bit values const combined = littleendian?
... const bigint = window.bigint, bigthirtytwo = bigint(32), bigzero = bigint(0); function getuint64bigint(dataview, byteoffset, littleendian) { // split 64-bit number into two 32-bit (4-byte) parts const left = bigint(dataview.getuint32(byteoffset|0, !!littleendian)>>>0); const right = bigint(dataview.getuint32((byteoffset|0) + 4|0, !!littleendian)>>>0); // combine the two 32-bit values and return return littleendian ?
lang/functional - Archive of obsolete content
throttle(fn, wait, options) this function is new in firefox 30.
... from underscore's throttle() 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 throttled version of fn.
Custom XUL Elements with XBL - Archive of obsolete content
the includes attribute gives you a little more flexibility with children, but it's rarely needed.
... a property is a little more robust.
...and all with very little additional code.
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 little to no effect on performance when not in use and very little when active.
...you will also be getting a little history on rss.
...yet they are finding an unsuspected ally in the battle: web standards.
Mozilla Crypto FAQ - Archive of obsolete content
however this ruling did not settle the issue of the constitutionality of u.s.
...provides historical context and technical background for the recent political battles around encryption and privacy issues.
... the electronic privacy papers: documents on the battle 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 settling on a standard that has a potential for long-term use.
...they settled 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 little 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 little 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 little something about how this script works.
... until i spruce it up a little, 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 little 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 little 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 little bit of adjustment made to make the animation look and feel nice.
Mobile touch controls - Game development
note: the game captain rogers: battle 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 little 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 little 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 little 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 little 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 little 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 little-endian, which is used on all intel processors.
... little-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): little-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 little 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 little 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 little 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 little more detail in the next chapter.
... javascript frameworks were created to make this kind of work a little 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 little or no interactive capability, a framework (and all of its javascript) may not be necessary at all.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
to avoid common pitfalls, we'll have to dig a little deeper into svelte's reactivity system.
... to find out what is happening here, we'll have to dig a little deeper into svelte reactivity.
...they make little to no attempt to understand what our javascript code is doing.
Dynamic behavior in Svelte: working with variables and props - Learn web development
export let todos = [] this may feel a little weird at first.
...just like the export keyword being used to declare props, this may look a little alien.
...the following would work too, but it is a little less readable: $: newtodoid = totaltodos ?
Understanding client-side JavaScript frameworks - Learn web development
we'll discover a little 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 little 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 little 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 little obvious help available on what to do.
... now that we’ve discussed two fundamental commands, have a little 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 little 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 little (<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 little that the program can do about that.
... nothing stands out in the profile, how can i accurately find the next bottleneck?
JSAPI User Guide
a jscontext, or context, is like a little 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 little memory, and we have none.
...if you do accidentally leak an object from one sandbox into another, the genie is out of the bottle.
Animated PNG graphics
MozillaTechAPNG
authors the apng specification was authored by: stuart parmenter <pavlov@pavlov.net> vladimir vukicevic <vladimir@pobox.com> andrew smith <asmith15@littlesvr.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://littlesvr.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://littlesvr.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 little status icon in the browser.
...the separator that appears at the top of this snippet creates a little 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 little 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 starttls(); attributes attribute type description forcehandshake boolean obsolete since gecko 1.9 notificationcallbacks nsiinterfacerequestor methods proxystartssl() starts an ssl proxy connection.
...starttls() establishes a starttls connection.
...void starttls(); 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 throttling - a drop-down list where you can select the connection throttling to apply, for example 2g, 3g, or lte enable/disable touch simulation - toggles whether or not responsive design mode simulates touch events.
... network throttling 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 throttling": ...
Applying styles and colors - Web APIs
here we will explore the canvas options we have at our disposal to make our drawings a little more attractive.
...using rgba() gives you a little more control and flexibility because we can set the fill and stroke style individually.
... here's a little 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="seattle" 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", "seattle"); 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": "seattle", "@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 settles, 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() settles.
... 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 settle.
Index - Web APIs
WebAPIIndex
in service workers, waituntil() tells the browser that work is ongoing until the promise settles, 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 bottlenecks.
...it behaves the same, except that it can optionally take one or more parameters past windowfeatures, and windowfeatures itself is treated a little differently.
Promise.prototype.finally() - JavaScript
when the promise is settled, i.e either fulfilled or rejected, the specified callback function is executed.
... syntax p.finally(onfinally); p.finally(function() { // settled (fulfilled or rejected) }); parameters onfinally a function called when the promise is settled.
... description the finally() method can be useful if you want to do some processing or cleanup once the promise is settled, regardless of its outcome.
Promise.race() - JavaScript
description the race function returns a promise that is settled the same way (and takes the same value) as the first promise that settles amongst the promises of the iterable passed as an argument.
... if the iterable contains one or more non-promise value and/or an already settled 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 settled 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 throttling 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 throttling option to 2g, 3g, etc.
...had we throttled, receiving could have been 43seconds!
Web Performance
together, these interfaces can be used to help identify an application's performance bottlenecks.
... 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 throttling 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 bottlenecks 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
gettld(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.gettld("http://www.bbc.co.uk/")); // "co.uk" console.log(urls.gettld("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 little 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 little 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 little easier.
... dynamic scripting helper this little 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 little framework.
...the daemon constructor itself is nothing but a clone of the little framework minidaemon with added support for init and onstart functions (declarable during the instantiation of the daemon).
Communication between HTML and your extension - Archive of obsolete content
i set the onblur action to a little javascript function that performed a standard ajax request to get a result.
... the onreadystatechange was set to another little javascript function that would update a specific element on the html page with the result.
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 little maintenance, so we don't recommend using it unless you really have to.
... you'll still need to understand at least a little about rdf when you read the documentation about templates.
Setting Up a Development Environment - Archive of obsolete content
the only noticeable difference for the user is that the xpi installation dialog will say that the extension was created by you, making the dialog a little easier to trust.
... this extension has seen little maintenance in quite some time, so it is very buggy.
Performance best practices in extensions - Archive of obsolete content
do as little as possible here.
... when these events cannot be avoided, computation during the listeners should be kept to a minimum and real work throttled.
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 little effort as possible.
...this code contains very little 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 little 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 little 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.
New Skin Notes - Archive of obsolete content
--dria headers need a little padding.
...also, and this is a nit, it's a little "my" crazy up there -- do we need all the "my"s?
Skinning XUL Files by Hand - Archive of obsolete content
as with anything truly democratic, you have to fuss a little bit with things to make them work.
... you have to share, and you have to have a little bit patience.
XML - Archive of obsolete content
xul is little 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 little extras.
Mozilla release FAQ - Archive of obsolete content
ram will probably be the bottleneck in most cases, at least until you are well over 128m ram.
...however, it makes very little sense to try to make mozilla into an operating sense, almost as little 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 little 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 little 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 little fish, though for a few weeks he slept a lot and didn't look well in general.
... i hope that our little 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.
The Business Benefits of Web Standards - Archive of obsolete content
yet they are finding an unsuspected ally in the battle: web standards.
... there should be little need to plunge into the increasing costs and uncertain quality and integrity of proprietary pay per click campaigns.
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 little) of the actual frames as possible.
...those are good candidates to throttle 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 little 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 little 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 little 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: battle at andromeda game we created with phaser.
Unconventional controls - Game development
the earliest demo of captain rogers: battle 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 little 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 throttling 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 little 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 little 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 little online business card, which can perhaps double as a gamer card or social media profile.
... as a last little 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 little 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 little bit about it.
Legacy layout methods - Learn web development
note: normalize is a really useful little 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 little css when using skeleton.
Typesetting a community school homepage - Learn web development
give your headings a little bit of letter-spacing to make them not too too squashed, and allow the letters to breathe a bit.
... give the first paragraph after each heading in the <section> a little bit of text-indentation, say 20px.
How do you make sure your website works properly? - Learn web development
try again in a little 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 settled 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 little 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 little 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 little 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 little "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 little 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 little 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 little 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 little 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 little feature to our app.
Choosing the right approach - Learn web development
samsung internet android full support yesthrottling 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.12allsettled()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 little 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) little function is becoming.
Manipulating documents - Learn web development
creating and placing new nodes the above has given you a little 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 little 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 little 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 little more detail.
Working with Svelte stores - Learn web development
using the store contract to persist our todos our little 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 little 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 little 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 little patience.
Client-side tooling overview - Learn web development
safety net these are tools that make the code you write a little better.
... it often takes some time for new developer tools to settle down in their complexity.
CSUN Firefox Materials
firefox 1.5, beyond the status quo "...firefox is a great little browser.
... it's a quick download, occupies very little 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 little practice you should be well on your way.
...to set the environment variable for visual studio, use project > properties > debugging > environment and click the little box.
Eclipse CDT
now when you hit the build button (the little 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 little library into all the processes that are invoked as part of the build process.
Eclipse CDT Manual Setup
click on the little 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 little 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 little 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 little 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 little 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 bottlenecks.
Embedding the editor
they should need to do as little 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 bottleneck 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 settled it does nothing.
... * if the promise is already settled it does nothing.
Localizing with Pontoon
pontoon is a very simple and intuitive tool that requires little to no technical skill to use in the l10n workflow.
...you can now pat yourself on the back, do a little 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 little is left of the original code.
...it is a goal of nspr that nspr impose as little 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 settle on the next breakpoint.
... to work-around this issue you can use the recording feature of gdb, to step one instruction, and settle 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 little for a weblock implementation to take advantage of files that do not actually exist on disk.
...there's also a large bottleneck in the network request.
nsINavHistoryQuery
asking for things that do have a given annotation is a little different.
...this one is a little different than most.
nsISocketTransportService
currently "starttls", "ssl" and "udp" are supported.
...mozilla.org:2000 with tls support and default proxy settings var socket = transportservice.createtransport(["starttls"], 1,"mozilla.org", 2000, null); see also nsisockettransport nsirunnable nsiproxyinfo ...
Getting Started Guide
this takes a little 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 little 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 little 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 little 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 little 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 little 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
throttling 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 throttling ...
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 bottlenecks.
... network monitor features the following articles cover different aspects of using the network monitor: toolbar network request list network traffic recording performance analysis throttling ...
Call Tree - Firefox Developer Tools
by analyzing its results, you can find bottlenecks in your code - places where the browser is spending a disproportionately large amount of time.
... these bottlenecks are the places where any optimizations you can make will have the biggest impact.
Animation.pause() - Web APIs
WebAPIAnimationpause
{ transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bottle that reads "drink me." var stopplayingalice = function() { alicechange.pause(); nommingcake.pause(); drinking.pause(); }; // when the user releases the cupcake or the bottle, pause the animations.
... cake.addeventlistener("mouseup", stopplayingalice, false); bottle.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 bottle causes alice's growing animation (alicechange) to reverse, causing her to shrink: var shrinkalice = function() { alicechange.playbackrate = -1; alicechange.play(); } // on tap or click, alice will shrink.
... bottle.addeventlistener("mousedown", shrinkalice, false); bottle.addeventlistener("touchstart", shrinkalice, false); contrariwise, clicking on the cake causes her to "grow," playing alicechange forwards again: var growalice = function() { alicechange.playbackrate = 1; alicechange.play(); } // on tap or click, alice will grow.
Animation.reverse() - Web APIs
WebAPIAnimationreverse
return value undefined example in the growing/shrinking alice game example, clicking or tapping the bottle causes alice's growing animation (alicechange) to play backwards, causing her to get smaller.
... it is done by setting alicechange's animation.playbackrate to -1 like so: var shrinkalice = function() { // play alice's animation in reverse alicechange.playbackrate = -1; alicechange.play(); // play the bottle's animation drinking.play() } 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 bottle'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 little 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 little 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/mylittlevader.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/mylittlevader.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 throttling 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 throttle the event using requestanimationframe(), settimeout(), or a customevent, as follows.
Element: scroll event - Web APIs
examples scroll event throttling 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 throttle 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 little time to get used to.
...the success callback for cursors is a little special.
WebGL model view projection - Web APIs
exercise if that sounds a little 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 little 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 little 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 unsettling 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 little 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 little 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 little 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 little 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 little bit of time to plan your naming strategy when starting out creating your grid layout.
...this can seem a little 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 little 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 little 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 little 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 little door about fifteen inches high: she tried the little 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 little or no money in my purse, and nothing particular to interest me on shore, i thought i would sail about a little and see the watery part of the world.
...some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, i thought i would sail about a little 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-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> <!-- flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"> <pa...
...ram name="movie" value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videourl=video/tears-of-steel-battle-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-battle-clip-medium.mp4">download mp4</a> </video> <figcaption>&copy; blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figu...
DataView.prototype.getBigInt64() - JavaScript
syntax dataview.getbigint64(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from.
... littleendian optional indicates whether the 64-bit int is stored in little- or big-endian format.
DataView.prototype.getBigUint64() - JavaScript
syntax dataview.getbiguint64(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from.
... littleendian optional indicates whether the 64-bit int is stored in little- or big-endian format.
DataView.prototype.getFloat32() - JavaScript
syntax dataview.getfloat32(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... littleendian optional indicates whether the 32-bit float is stored in little- or big-endian format.
DataView.prototype.getFloat64() - JavaScript
syntax dataview.getfloat64(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... littleendian optional indicates whether the 64-bit float is stored in little- or big-endian format.
DataView.prototype.getInt16() - JavaScript
syntax dataview.getint16(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... littleendian optional indicates whether the 16-bit int is stored in little- or big-endian format.
DataView.prototype.getInt32() - JavaScript
syntax dataview.getint32(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view where to read the data.
... littleendian optional indicates whether the 32-bit int is stored in little- or big-endian format.
DataView.prototype.getUint16() - JavaScript
syntax dataview.getuint16(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... littleendian optional indicates whether the 16-bit int is stored in little- or big-endian format.
DataView.prototype.getUint32() - JavaScript
syntax dataview.getuint32(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data.
... littleendian optional indicates whether the 32-bit int is stored in little- or big-endian format.
DataView.prototype.setBigInt64() - JavaScript
syntax dataview.setbigint64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to store the data from.
... littleendian optional indicates whether the 64-bit int is stored in little- or big-endian format.
DataView.prototype.setBigUint64() - JavaScript
syntax dataview.setbiguint64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to store the data from.
... littleendian optional indicates whether the 64-bit int is stored in little- or big-endian format.
DataView.prototype.setFloat32() - JavaScript
syntax dataview.setfloat32(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... littleendian optional indicates whether the 32-bit float is stored in little- or big-endian format.
DataView.prototype.setFloat64() - JavaScript
syntax dataview.setfloat64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... littleendian optional indicates whether the 64-bit float is stored in little- or big-endian format.
DataView.prototype.setInt16() - JavaScript
syntax dataview.setint16(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... littleendian optional indicates whether the 16-bit int is stored in little- or big-endian format.
DataView.prototype.setInt32() - JavaScript
syntax dataview.setint32(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... littleendian optional indicates whether the 32-bit int is stored in little- or big-endian format.
DataView.prototype.setUint16() - JavaScript
syntax dataview.setuint16(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... littleendian optional indicates whether the 16-bit int is stored in little- or big-endian format.
DataView.prototype.setUint32() - JavaScript
syntax dataview.setuint32(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data.
... littleendian optional indicates whether the 32-bit int is stored in little- or big-endian format.
Promise.any() - JavaScript
also, unlike promise.race(), which returns the first settled 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 settle.
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 "little framework" published on the document.cookie page.
...get the "doccookies" object here: https://developer.mozilla.org/docs/dom/document.cookie#a_little_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 little 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 little 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.allsettled instead.
... if you wish to safely perform two or more jobs in parallel, you must await a call to promise.all, or promise.allsettled.
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 little compression as possible.
... in this case, it appears that flac is most likely the best codec to go with; alac has little to no direct browser support.
Performance Monitoring: RUM vs synthetic monitoring - Web Performance
controlling for environmental variables is helpful in understanding where performance bottlenecks 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 throttling.
Mobile first - Progressive web apps (PWAs)
note: starting with very little 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 little 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 little 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 little more detail.
2015 MDN Fellowship Program - Archive of obsolete content
finding and addressing performance bottlenecks depends on tooling the browser networking and rendering but also, often more important, user perception.
SDK API Lifecycle - Archive of obsolete content
unstable the api is in the process of settling, but has not yet had sufficient real-world testing to be considered stable.
XUL Migration Guide - Archive of obsolete content
if your add-on only needs a little 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.
Release notes - Archive of obsolete content
throttle() and debounce() functions added to lang/functional.
jpm - Archive of obsolete content
developing without browser restarts because jpm run restarts the browser each time you invoke it, it can be a little cumbersome if you are making very frequent changes to an add-on.
Getting started (cfx) - Archive of obsolete content
developing without cfx run because cfx run restarts the browser each time you invoke it, it can be a little cumbersome if you are making frequent changes to an add-on.
Developing for Firefox Mobile - Archive of obsolete content
running jpm-mobile test is identical: jpm-mobile test --adb /path/to/adb packaging mobile add-ons to package a mobile add-on as an xpi, use the command: jpm xpi actually installing the xpi on the device is a little tricky.
Examples and demos from articles - Archive of obsolete content
[article] code snippets and tutorials javascript complete cookies reader/writer with full unicode support this little framework consists of a complete cookies reader/writer with unicode support.
Enhanced Extension Installation - Archive of obsolete content
little things this upgrade fixes or changes it used to not be possible to move items in the extension manager ui up and down if there were items that were from two different install locations in the list - that is there were actually two rdf containers and ordering is unique to each.
Jetpack Processes - Archive of obsolete content
these processes are relatively lightweight, do not have access to xpcom, and can innately do little other than compute.
Chapter 1: Introduction to Extensions - Archive of obsolete content
in order to create an extension, you need an idea and just a little programming ability.
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
because it was often used at first to display pop-up windows, marching text in status bars, or in other ways that made web pages less useful to users, the language acquired a reputation as having little practical use and lacking in functionality.
Appendix A: Add-on Performance - Archive of obsolete content
do as little as possible in your load handler.
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
add-ons normally run code at startup, and as it is covered in the main tutorial, all you need is a load event handler and a little code.
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
other extensions might do something similar, trying to hook the same functions, but a little different, ending up with completely broken code.
Introduction - Archive of obsolete content
if you're unfamiliar with these terms, it's good that you take some time and learn a little about mozilla.
Mozilla Documentation Roadmap - Archive of obsolete content
it takes a little getting used to, specially learning how to choose the best search queries, but it's an invaluable resource of information.
Useful Mozilla Community Sites - Archive of obsolete content
using babelzilla takes little time and is very valuable.
Setting up an extension development environment - Archive of obsolete content
explore this profile a little: change some settings, install any additional extensions, and finally close this instance of firefox.
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
because of the iframe, we backed off of the idea that we'd be able to adhere to xhtml strict rules, and settled for using the xhtml transitional dtd.
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
this model of web navigation is so common that most internet users do little else.
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 little 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...
MMgc - Archive of obsolete content
#3 is a little harder because there are a good # of gc roots.
Bookmark Keywords - Archive of obsolete content
the %s is a little flag that means "insert user input here." it doesn't have to go at the end of the location field-- it can be anywhere inside the field.
DTrace - Archive of obsolete content
dtrace is sun microsystem's dynamic tracing framework that allows developers to instrument a program with probes that have little to no effect on performance when not in use and very little 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 little 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.
Help Viewer - Archive of obsolete content
naturally, then, everyone needs a little help now and then, and getting that help to the user is critical to making applications useful.
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 little ahead of the current sample offset (the sample offset that is currently being played by the hardware can be obtained with mozcurrentsampleoffset()), where "a little" means something on the order of 500 ms of samples.
Menu - Archive of obsolete content
ArchiveMozillaJetpackUIMenu
context menus context menus behave a little differently from other menus.
Mozilla Application Framework in Detail - Archive of obsolete content
modular, embeddable: gecko's modular architecture enables developers to add or remove modules with little effort, fitting the software to the available hardware and adjusting functionality to match product requirements.
New Security Model for Web Services - Archive of obsolete content
<!element webscriptaccess (delegate?|allow*)> <!element delegate empty> <!element allow empty> <!attlist allow type|from cdata #implied>.
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_little_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 little 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 little 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 ...
Treehydra Manual - Archive of obsolete content
for now, the best way to learn gimple is to look at existing code as there is little newbie documentation to be had.
[Deprecated] The Mozilla build VM - Archive of obsolete content
"good" first bugs may be a little stale, but at some point in their lives we considered that they would be a good first step for newcomers to mozilla.
Creating XPI Installer Modules - Archive of obsolete content
the archiving of an archive may seem a little redundant--and if you want you can instead use the xpi to archive the install script and "flat", or uncompressed, versions of the resources.
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 little extra so it is not required to update too often var component_size = 10; // (xpi file) reserve a little 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_little_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.
Learn XPI Installer Scripting by Example - Archive of obsolete content
this install script does not include any version or disk space checking, very little error checking, only a single executable, no registration, and no commenting.
A XUL Bestiary - Archive of obsolete content
xul itself contains very little provision for how widgets are to be presented in the interface.
Building accessible custom components in XUL - Archive of obsolete content
role declarations are a little confusing at first glance, but they all follow the same pattern.
Introduction to XUL - Archive of obsolete content
in brief, mozilla has settled on xml entities as the mechanism.
Rule Compilation - Archive of obsolete content
the template builder generates content lazily, that is, it processes as little as needed, and only continues when necessary.
Broadcasters and Observers - Archive of obsolete content
you can also have only one if you wanted to but that would accomplish very little since the main reason for using broadcasters is to have attributes forwarded to multiple places.
Creating a Skin - Archive of obsolete content
for example, having different images for the check boxes in the find files dialog as other windows looks a little odd.
Document Object Model - Archive of obsolete content
the fourth button is a little confusing, but might clarify that it is the uri that is important and not the prefix.
Introduction - Archive of obsolete content
also, text displayed with xul is easily localizable, which means that it can be translated into other languages with little effort.
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="seattle" /> <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.
Popup Menus - Archive of obsolete content
a good example is the drop down menu that appears when you click on the little down arrows next to the back and forward buttons in a browser window.
Stacks and Decks - Archive of obsolete content
the orient property has little meaning on a stack as children are laid out above each other rather than from side to side.
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 little.
XUL accessibility guidelines - Archive of obsolete content
providing the additional information is easy, but is often forgotten because it yields little or no visual change.
XUL accessibility tool - Archive of obsolete content
be aware that the report might take a little while to be ready depending on the complexity of the application being analyzed and the speed of your machine.
The Implementation of the Application Object Model - Archive of obsolete content
individual widgets, even complex widgets like the trees and toolbars need little to no drawing code (above and beyond what nglayout already has) in order to work.
XULRunner Hall of Fame - Archive of obsolete content
taskpool taskpool is a little application to help keep track of time.
Archived Mozilla and build documentation - Archive of obsolete content
dtrace dtrace is sun microsystem's dynamic tracing framework that allows developers to instrument a program with probes that have little to no effect on performance when not in use and very little when active.
2006-10-20 - Archive of obsolete content
he stated that he was able to pre-package the extensions that he wanted by following this walkthrough and a little bit of help from this post.
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 little or no user-noticeable impact from being used.
What is RSS - Archive of obsolete content
you will also be getting a little history on rss.
Getting Started - Archive of obsolete content
this tutorial is mostly meant for beginners to rss (i.e., those with no or very little prior rss experience).
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 little 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 little 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); }; ...
Reference - Archive of obsolete content
javascript 1.5" might be a little confusing.
Writing JavaScript for XHTML - Archive of obsolete content
of course, you can still use strings like in document.write(), but it takes a little more effort.
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
one is easily fixed by validation, but the other is a little more subtle.
RDF in Mozilla FAQ - Archive of obsolete content
well, here's a little...
Index - Game development
45 build the brick field 2d, beginner, canvas, games, javascript, phaser, tutorial building the brick field is a little 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 little 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.
Game promotion - Game development
when the time comes your community will help you spread the word about your shiny little game.
Building up a basic demo with A-Frame - Game development
we can set the position of the camera explicitly and move it back a little bit from the center of the scene, so we'll be able to see the shapes.
Building up a basic demo with PlayCanvas editor - Game development
now we can apply the colored material to the shape by clicking and dragging its icon from the bottom part of the screen (the little dot on the left hand side of the material's name — it can be a bit fiddly to select; just persevere) onto the box on the scene.
Desktop mouse and keyboard controls - Game development
note: the captain rogers: battle at andromeda is built with phaser and managing the controls is phaser-based, but it could also be done in pure javascript.
Implementing game control mechanisms - Game development
case study we'll be using the captain rogers: battle at andromeda demo as an example.
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 little 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 little 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 little 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 little 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 little offset from the bottom.
Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms
however, the concept can be a little confusing at first.
Latency - MDN Web Docs Glossary: Definitions of Web-related terms
low latency is good, meaning there is little or no delay.
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.
Synthetic monitoring - MDN Web Docs Glossary: Definitions of Web-related terms
combined with other tools, such as network throttling, can provide excellent insight into potential problem areas.
Backgrounds and borders - Learn web development
if you discover a complex background property in a stylesheet, it might seem a little hard to understand as so many values can be passed in at once.
Debugging CSS - Learn web development
click on the little arrow to expand the view, showing the different longhand properties and their values.
Images, media, and form elements - Learn web development
images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.
Pseudo-classes and pseudo-elements - Learn web development
a more valid use of these pseudo-elements is to insert an icon, for example the little 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.
CSS building blocks - Learn web development
images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.
Positioning - Learn web development
if you save and refresh now, you'll see a fun little effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it.
Responsive design - Learn web development
users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.
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 little 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 little extra work it becomes possible to create a more natural geometry by using pseudo-element and the transform property.
Fundamental text and font styling - Learn web development
this is a little bit more complex, and we will be discussing this in a separate article later on in the module.
What text editors are available? - Learn web development
obviously, that matters too, but a product's cost has little connection with its quality or capability.
How can we design for all types of users? - Learn web development
the reader's eyes act like a shuttle going from line to line.
What are browser developer tools? - Learn web development
click the little arrow next to each shorthand property to show the property's longhand equivalents.
What software do I need to build a website? - Learn web development
once you settle on which provider to use, the provider will email you the access information, usually in the form of an sftp url, username, password, and other information needed to connect to their server.
How to structure a web form - Learn web development
here is a little 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...
Other form controls - Learn web development
this leads to some uses of it that might seem a little non-obvious.
Sending form data - Learn web development
the post method the post method is a little different.
Styling web forms - Learn web development
if you want to keep the native look and feel of the widgets, you'll face a little difficulty if you want to give them a consistent size.
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 little 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 little 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.
Publishing your website - Learn web development
this article explains how to get your simple sample code online with little effort.
Tips for authoring fast-loading HTML pages - Learn web development
so, in particular, for pages which are generated dynamically, a little research on this subject is beneficial.
Advanced text formatting - Learn web development
n't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</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 little 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 battle, 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.
Assessment: Structuring planet data - Learn web development
saturn) are a little tricky to sort out — you need to make sure each one spans the correct number of rows and columns.
HTML Tables - Learn web development
LearnHTMLTables
coupled with a little 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.
Introducing asynchronous JavaScript - Learn web development
in essence, it's the browser's way of saying "i promise to get back to you with the answer as soon as i can," hence the name "promise." this concept can take practice to get used to; it feels a little like schrödinger's cat in action.
Introduction to events - Learn web development
these are a little out of scope for this article, but if you want to read them, visit the addeventlistener() and removeeventlistener() reference pages.
Function return values - Learn web development
this little page will allow you to enter a number into the text box, and display different numbers related to it in the paragraph below.
Drawing graphics - Learn web development
this will make him move a little bit to the right the next time we draw him.
Handling text — strings in JavaScript - Learn web development
both of the following will work okay: let sgl = 'single quotes.'; let dbl = "double quotes"; sgl; dbl; there is very little difference between the two, and which you use is down to personal preference.
Storing the information you need — Variables - Learn web development
you can think of them being like little cardboard boxes that you can store things in.
Adding features to our bouncing balls demo - Learn web development
project brief our bouncy ball demo is fun, but now we want to make it a little bit more interactive by adding a user-controlled evil circle, which will eat the balls if it catches them.
JavaScript object basics - Learn web development
this contains very little — a <script> element for us to write our source code into.
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 little catch.
Object prototypes - Learn web development
this section is intentionally simplified to make these concepts a little easier to understand when you first meet them.
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 bottleneck 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 battlestation “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 little 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.
Starting our Svelte Todo list app - Learn web development
styling our markup let's make the todo list look a little better.
TypeScript support in Svelte - Learn web development
this can be a little tricky because updatedtodo contains only the attributes of the todo that have been updated.
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 little more than 3kb, which includes the "svelte runtime" (just 300 lines of javascript code) and the app.svelte compiled component.
Using Vue computed properties - Learn web development
summary in this article we've used a computed property to add a nice little feature to our app.
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 little 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 little 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.
Focus management with Vue refs - Learn web development
in order to set focus, we need to understand a little bit more about how vue works internally.
Rendering a list of Vue components - Learn web development
chance for a slight refactor there's one little bit of refactoring we can do here.
Handling common accessibility problems - Learn web development
bootstrap looks to be fairly good for accessibility, for example, although making bootstrap a little more accessible by rhiana heath explores some of its issues (mainly related to color contrast), and looks at some solutions.
Implementing feature detection - Learn web development
for browsers that don't, we could use a floated layout that works ok, although it is slightly more brittle and hacky, and not as cool-looking.
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-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-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-battle-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...
Handling common JavaScript problems - Learn web development
this settles it — our xmlhttprequest call is returning the json as text, not json.
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 little 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.
Setting up your own test automation environment - Learn web development
you want to make your tests as non-brittle as possible, i.e.
Git and GitHub - Learn web development
git handbook (from github) this git handbook goes into a little 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 little 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 little 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.
Embedding API for Accessibility
this is a ui issue we'll need to settle before we know where to go with the embedding accessibility interface.
Software accessibility: Where are we today?
if you take a little time to learn them, they will become an unconscious improvement to your design and engineering technique.
Mozilla’s UAAG evaluation report
there is still very little end-user documentation for editing profiles by hand.
What to do and what not to do in Bugzilla
note: because of how duplicate detection works in bugzilla, you should try not to verify bugs immediately after they're marked fixed; instead, let a little time pass first.
Creating JavaScript callbacks in components
well, it actually is a little magical.
Debugging on Mac OS X
debugging e10s child processes using xcode to debug child processes created by an e10s-enabled browser is a little trickier than debugging a single-process browser, but it can be done.
Makefiles - Best practices and suggestions
code as little platform specific logic within a makefile as possible, a conditional and compiler flags at most should be needed.
The Firefox codebase: CSS Guidelines
the chrome area of firefox uses colors as authored, which is why using pre-defined variables, currentcolor or inheritance is useful to integrate with the system theme with little hassle.
Commenting IDL for better documentation
*/ [noscript] void sayyummy(in astring language); }; in conclusion with just a little extra help from you, the intrepid developer, the documentation team can crank out full, formatted documentation for your interface much more quickly and accurately.
Experimental features in Firefox
the current implementation is a little inelegant but is basically functional.
Multiple Firefox profiles
it takes little time to set up a new profile, and once it is complete, all of your firefox versions will update separately and can be run simultaneously.
OS.File for the main thread
performing this operation is a little slower but also a little safer.
Sqlite.jsm
objects/named parameters are a little safer because changes in the order of parameters in the statement won't change how values are bound to those parameters.
Index
pontoon is a very simple and intuitive tool that requires little to no technical skill to use in the l10n workflow.
Patching a Localization
now let's get a little more detailed.
Initial setup
web-based l10n tools we'll talk about these in a little bit.
MathML In Action
or what about those things that just seem itchy, and that you wish could be done just a little better?
Mozilla Style System
the style system actually has relatively little 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 little 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 little 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 little trickier when inheritance is involved.
Power profiling overview
first of all, all measurements are best done on a quiet machine that is running little other than the program of interest.
Refcount tracing and balancing
what this little tree is telling you is that you leak one refcount overall on object 0x00253ab0.
Scroll-linked effects
this means that the effects implemented will lag a little bit behind what the user sees the scroll position to be.
NSS FAQ
MozillaProjectsNSSFAQ
however, there is little or no documentation currently available for the rest of the nss api.
NSS 3.17.1 release notes
added support for linux on little-endian powerpc64.
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 bottlenecks.
Overview of NSS
like nss, nspr has been battle-tested in multiple products.
Scripting Java
in practice there's little 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 little constant data can be depended upon.
Statistics API
a little bit of gc work is done in each slice.
SpiderMonkey Internals: Thread Safety
*/ js_endrequest(cx); js_clearcontextthread(cx); it isn't a bottleneck; 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 little modification to the source, at run time.
Web Replay
this feature has had little testing or polishing and there is not yet a good definition of 'reasonably similar'.
WebReplayRoadmap
if js performance is a bottleneck, recordings can be analyzed for code regions that are both very hot and have inconsistent types.
Exploitable crashes
there is little 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 little 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.
Using XPCOM Utilities to Make Things Easier
to write a different component library, you could copy the listing at the end of the chapter, change very little, and paste it into a new project.
Introduction to XPCOM for the DOM
there are other ways that are a little more complicated, not worth detailing here.
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 little-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 little 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 little-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 little-endian platforms.
nsIExternalProtocolService
return value this code makes little sense and needs to be cleaned up.
nsIInstallLocation
offsetting can be brittle 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 throttling the refresh driver.
Xptcall Porting Guide
i ended up with larger stubs than i would have preferred rather than battle 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 little 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, starttls and encrypted passwords (cram-md5).
Filelink Providers
some providers require thunderbird to do very little in order to connect a user to their account.
Mail client architecture overview
most of these modules have little 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 little 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 little 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.Object - Firefox Developer Tools
once a promise is settled, it will generally notify its dependent promises and forget about them, so this is most useful on pending promises.
Debugger - Firefox Developer Tools
onpromisesettled(promise) a promise object, referenced by the debugger.object instance promise that was allocated within a debuggee scope, has settled (either fulfilled or rejected).
Index - Firefox Developer Tools
53 throttling 110n:priority, debugging, dev tools, firefox, guide, networking, tools the network monitor allows you to throttle 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 throttling ...
Network monitor recording - Firefox Developer Tools
network monitor features the following articles cover different aspects of using the network monitor: toolbar network request list network request details performance analysis throttling ...
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 throttling ...
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 throttling ...
Sorting algorithms comparison - Firefox Developer Tools
of course, you can generate your own profile, too, but the numbers will be a little different.
Flame Chart - Firefox Developer Tools
the screenshot above covers the period from 1435ms to a little past 1465ms.
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 bottlenecks in your code.
Performance - Firefox Developer Tools
call tree find bottlenecks in your site's javascript.
Cache.addAll() - Web APIs
WebAPICacheaddAll
', 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/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specifications specification status comment service workersthe definition of 'cache: addall' in that specification.
Cache.put() - Web APIs
WebAPICacheput
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/mylittlevader.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/mylittlevader.jpg'); }); } })); }); specifications specification status comment service workersthe definition of 'cachestorage: match' in that specification.
CacheStorage.open() - Web APIs
WebAPICacheStorageopen
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/mylittlevader.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 little experiment.
Drawing shapes with canvas - Web APIs
the following example is a little more complex than the ones we've seen above.
Transformations - Web APIs
this makes it a little easier to understand and use.
Using images - Web APIs
art gallery example in the final example of this chapter, we'll build a little art gallery.
Console API - Web APIs
the console api spec was created to define consistent behavior, and all modern browsers eventually settled on implementing this behavior — although some implementations still have their own additional proprietary functions.
DOMImplementation.hasFeature() - Web APIs
the latest version of the spec settled to force this method to always return true, where the functionality was accurate and in use.
Document.open() - Web APIs
WebAPIDocumentopen
three-argument document.open() there is a lesser-known and little-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 little something about the actual interfaces in the dom specification and how they are made available.
Element.animate() - Web APIs
WebAPIElementanimate
accumulate is similar but a little smarter: blur(2) and blur(5) become blur(7), not blur(2) blur(5).
Element.computedStyleMap() - Web APIs
<p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a little 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
WebAPIElementscrollTop
if set to a value greater than the maximum available for the element, scrolltop settles 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 little 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 little bit of time into the future is available (in other words, at least two frames of video, for example).
In depth: Microtasks and the JavaScript runtime environment - Web APIs
a well-designed web site or app uses workers to perform any complex or lengthy operations, leaving the main thread to do as little work as possible beyond updating, laying out, and rendering the web page.
Basic concepts - Web APIs
this sounds a little complicated at first, but there are sanity measures baked in.
Checking when a deadline is due - Web APIs
on browsers that support type="number", you get a nice little up and down arrow number picker.
Intersection Observer API - Web APIs
the author of the web site may not even realize this is happening, since they may know very little about the inner workings of the two libraries they are using.
KeyframeEffectOptions - Web APIs
accumulate is similar but a little smarter: blur(2) and blur(5) become blur(7), not blur(2) blur(5).
MediaStreamTrack.applyConstraints() - Web APIs
for example, you may prefer high-density video but require that the frame rate be a little low to help keep the data rate low enough not overtax the network.
MediaStreamTrack.getConstraints() - Web APIs
for example, you may prefer high definition video but require that the frame rate be a little low to help keep the data rate low enough not overtax the network.
Recording a media element - Web APIs
there's a little more than this, but it's just informational rather than being part of the core operation of the app.
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 little 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?
Capabilities, constraints, and settings - Web APIs
the browser should do its best to match these settings but will settle for anything it considers a close match.
NavigatorID.userAgent - Web APIs
the specification asks browsers to provide as little information via this field as possible.
Using Performance Timeline - Web APIs
together, these interfaces can be used to help identify an application's performance bottlenecks.
Web Push API Notifications best practices - Web APIs
this is where it gets a little tricky.
RTCIceCandidateStats.networkType - Web APIs
for example, if the networktype is wifi but the user is connected using a cellular hotspot, the connection will be bottlenecked 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 bottlenecked 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 brittle.
Using the Resource Timing API - Web APIs
this timing data provides a detailed profile of the resource loading phases and this data can be used to help identify performance bottlenecks.
Resource Timing API - Web APIs
however, note that some properties have little 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/mylittlevader.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/mylittlevader.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 bottleneck anywhere.
WebGLRenderingContext.vertexAttribPointer() - Web APIs
note the use of true because webgl expects our data to be in little-endian.
Matrix math for the web - Web APIs
rotation matrices look a little bit more complicated than scaling and transform matrices.
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
keeping latency to a minimum is especially important for webrtc, since face-to-face communication needs to be performed with as little latency as possible.
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 little 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 little bit difficult to understand.
Fundamentals of WebXR - Web APIs
we do not yet include documentation for it here on mdn, but it will come as soon as the module's specification settles down.
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 unsettling visual effect.
Web Audio API best practices - Web APIs
loading sounds/files there are four main ways to load sound with the web audio api and it can be a little confusing as to which one you should use.
Background audio processing using AudioWorklet - Web APIs
the input and output lists the lists of inputs and outputs can be a little confusing at first, even though they're actually very simple once you realize what's going on.
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 little sound visualization to create is one of those winamp-style frequency bar graphs.
Web Workers API - Web APIs
they are a little more complex than dedicated workers — scripts must communicate via an active port.
Window.openDialog() - Web APIs
WebAPIWindowopenDialog
it behaves the same, except that it can optionally take one or more parameters past windowfeatures, and windowfeatures itself is treated a little 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/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specifications specification status comment service workersthe definition of 'caches' in that specification.
Using XMLHttpRequest - Web APIs
a little vanilla framework all these effects are done automatically by the web browser whenever you submit a <form>.
XRSession.visibilityState - Web APIs
in order to optimize resource utilization, the user agent may be handling the session's requestanimationframe() callbacks at a throttled rate.
XRVisibilityState - Web APIs
in order to optimize resource utilization, the user agent may be handling the session's requestanimationframe() callbacks at a throttled rate.
XSL Transformations in Mozilla FAQ - Web APIs
but mixing parsing with xslt is brittle and we rather not support d-o-e than either crash or be even slower.
How to file ARIA-related bugs - Accessibility
if you notice an implementation issue, please take a little time and let the developers know.
Basic form hints - Accessibility
<form> <ul> <li> <input id="wine-1" type="checkbox" value="riesling"/> <label for="wine-1">berg rottland 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...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
don't use accessible description unless you really do have a long description for the object you need to expose -- most assistive technology makes little use of it.
Accessibility documentation index - Accessibility
if you notice an implementation issue, please take a little time and let the developers know.
Web accessibility for seizures and physical reactions - Accessibility
"static or moving patterns of discernable light and dark stripes have the same effect as flashing lights because of the alternation of dark and bright areas." the epilepsy foundation of america working group is able to "quantify" the problem a little.
Handling content breaks in multicol - CSS: Cascading Style Sheets
in addition to the above, browser support for these properties is a little patchy.
Styling Columns - CSS: Cascading Style Sheets
as column boxes created inside multicol containers are anonymous boxes, there is little we can do to style them.
Using feature queries - CSS: Cascading Style Sheets
this may mean you have a little more code but comes with the benefit of being able to test the fallback by misspelling the property or value name.
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
while this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis.
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
with all the flex tools at your disposal you will find that most tasks can be achieved, although it might take a little bit of experimentation at first.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
the stretchy input field now has a little less space to play with but it uses the space left after the two items are accounted for.
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
for this guide, we will look at this feature of grid and other modern layout methods, learning a little about writing modes and logical vs.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
those of us who have been doing web development for more years than we care to remember might consider that css grid is a little bit like using “tables for layout”.
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 little strange, it is the opposite of the direction in which we specify margins and padding as a shorthand for example.
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
i can then tidy up the internals of the boxes using a little touch of flexbox.
Privacy and the :visited selector - CSS: Cascading Style Sheets
little 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 little nicer */ th, p, td { background-color: #eeeeee; margin: 0px; padding: 6px; font-family: sans-serif; text-align: left; } result specifications specification status comment css transforms level 2the definition of 'backface-visibility' in that specification.
grid-column - CSS: Cascading Style Sheets
one can use a little javascript to enable automatic annotation: source repository.
grid-row - CSS: Cascading Style Sheets
WebCSSgrid-row
one can use a little javascript to enable automatic annotation: source repository.
inherit - CSS: Cascading Style Sheets
WebCSSinherit
for non-inherited properties, this specifies a behavior that typically makes relatively little sense and you may consider using initial instead, or unset on the all property.
orphans - CSS: Cascading Style Sheets
WebCSSorphans
it has a little 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 little 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 little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result specifications specification status comment css transforms level 2the definition of 'perspective-origin' in that specification.
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 little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result specifications specification status comment css transforms level 2the definition of 'perspective' in that specification.
widows - CSS: Cascading Style Sheets
WebCSSwidows
it has a little 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.
will-change - CSS: Cascading Style Sheets
if your page is performing well, don't add the will-change property to elements just to wring out a little more speed.
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 little 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 little 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...
Writing Web Audio API code that works in every browser - Developer guides
this little library will "normalise" the interfaces for you and make it look as if your code is running in a standards compliant browser, by aliasing prefixed names to the unprefixed versions.
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 little 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 little bit of javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontex...
Audio and video manipulation - Developer guides
source.connect(convolver); convolver.connect(context.destination); see this codepen for an applied (but very, very silly; like, little kids will giggle kind of silly) example.
XHTML - Developer guides
WebGuideHTMLXHTML
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 little secret by mark pilgrim xhtml - what's the point?
<aside>: The Aside element - HTML: Hypertext Markup Language
WebHTMLElementaside
the paragraph is only indirectly related to the main article content: <article> <p> the disney movie <cite>the little mermaid</cite> was first released to theatres in 1989.
<br>: The Line Break element - HTML: Hypertext Markup Language
WebHTMLElementbr
as such, it has no dimensions or visual output of its own, and there is very little you can do to style it.
<input type="color"> - HTML: Hypertext Markup Language
WebHTMLElementinputcolor
example let's create an example which does a little more with the color input by tracking the change and input events to take the new color and apply it to every <p> element in the document.
<input type="datetime-local"> - HTML: Hypertext Markup Language
after the year 10,000, those numbers will just be a little bit bigger than before, so many servers will not see issues with forms submitted after the year 10,000.
<input type="hidden"> - HTML: Hypertext Markup Language
WebHTMLElementinputhidden
the edit form's html might look a little 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="radio"> - HTML: Hypertext Markup Language
WebHTMLElementinputradio
let's add a little bit of code to our example so we can examine the data generated by this form.
<input type="time"> - HTML: Hypertext Markup Language
WebHTMLElementinputtime
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 little arrow widgets).
<mark>: The Mark Text element - HTML: Hypertext Markup Language
WebHTMLElementmark
during the battle, <mark>rebel spies managed to steal secret plans</mark> to the empire’s ultimate weapon, the death star, an armored space station with enough power to destroy an entire planet.
<style>: The Style Information element - HTML: Hypertext Markup Language
WebHTMLElementstyle
note: there is very little reason to include this attribute in modern web documents.
<tr>: The Table Row element - HTML: Hypertext Markup Language
WebHTMLElementtr
this can take a little practice to get right when building your tables.
Browser detection using the user agent - HTTP
however, internet explorer was such a special little 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 little 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 unthrottled 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 unthrottled timers are only available if your document has a coop header with the value same-origin value set.
JavaScript modules - JavaScript
creating a module object the above method works ok, but it's a little messy and longwinded.
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead - JavaScript
the conditional compilation comment in ie is a little known feature, but it broke source maps with jquery and other libraries.
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 little 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)); // little 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 "settled".
Promise.all() - JavaScript
in comparison, the promise returned by promise.allsettled() will wait for all input promises to complete, regardless of whether or not one rejects.
Property accessors - JavaScript
however, the property/method distinction is little more than a convention.
await - JavaScript
description the await expression causes async function execution to pause until a promise is settled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment.
this - JavaScript
a function's this keyword behaves a little differently in javascript compared to other languages.
Strict mode - JavaScript
still, this hiding makes little 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) { // !!!
JavaScript typed arrays - JavaScript
it is big-endian by default and can be set to little-endian in the getter/setter methods.
Web video codec guide - Web media technologies
the best you can do is to select a high-quality codec that uses lossy compression and configure it to perform as little compression as possible.
Animation performance and frame rate - Web Performance
using these tools you can measure an application's animation frame rate, and diagnose performance bottlenecks if any are found.
CSS and JavaScript animation performance - Web Performance
now you will be able to see three little purple boxes at the upper left corner of the firefox window.
Critical rendering path - Web Performance
layout can become a bottleneck, leading to jank if required during scrolling or other animations.
Populating the page: how browsers work - Web Performance
though the browser's preload scanner hastens this process, excessive scripts can still be a significant bottleneck.
Navigation and resource timings - Web Performance
with the metrics above, and a little bit of math, we can calculate many important metrics like time to first byte, page load time, dns lookup, and whether the connection is secure.
Optimizing startup performance - Web Performance
however, even code like that can be made asynchronous, with a little work.
Progressive web app structure - Progressive web apps (PWAs)
with a little help from service workers, streams can greatly improve the way we parse content.
Installing and uninstalling web apps - Progressive web apps (PWAs)
safari on ios is a little different.
Structural overview of progressive web apps - Progressive web apps (PWAs)
with a little help from service workers, streams can greatly improve the way we parse content.
Linking - SVG: Scalable Vector Graphics
WebSVGLinking
to get around this, requires a little 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.
Basic shapes - SVG: Scalable Vector Graphics
note: a rectangle is a type of polygon, so a polygon can be used to create a <rect/> element in cases where you need a little more flexibility.
Clipping and masking - SVG: Scalable Vector Graphics
it is therefore little surprise, that it was decided to take this css property into svg as well, together with visibility and clip as defined by css 2.
Paths - SVG: Scalable Vector Graphics
WebSVGTutorialPaths
<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 little bit by using the "close path" command, called with z.
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
create and remove a bogus file association this solution should work for mimetypes.rdf corruption, and requires little technical knowledge.
SVG: Scalable Vector Graphics
WebSVG
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 little svg can go a long way to enhanced web content, here are some examples of heavy svg usage.
Using templates and slots - Web Components
a more involved example to finish off the article, let's look at something a little less trivial.
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="seattle" 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.
WebAssembly Concepts - WebAssembly
mobile and other resource-constrained platforms can further amplify these performance bottlenecks.
Exported WebAssembly functions - WebAssembly
this article describes what they are in a little more detail.
Compiling from Rust to WebAssembly - WebAssembly
it's only a little bit complex, and shows a realistic use-case.
Converting WebAssembly text format to wasm - WebAssembly
this article explains a little bit about how it works, and how to use available tools to convert text format files to the .wasm assembly format.
Using the WebAssembly JavaScript API - WebAssembly
note: this is a convoluted, longwinded example that achieves very little, but it does serve to illustrate what is possible — using webassembly code alongside javascript in your web applications.