#Firefox 83 is upon us - Mozilla Hacks - the Web developer blog
▻https://hacks.mozilla.org/2020/11/firefox-83-is-upon-us
#DevTools : In the HTML Pane, scrollable elements have a “scroll” badge next to them, which you can now toggle to highlight elements causing an overflow (expanding nodes as needed to make them visible):
You will also see an “overflow” badge next to the node causing the overflow.
Merci qui ? Merci Firefox :)
I built something with #A-Frame in 2 days (and you can too) - Mozilla Hacks - the Web developer blog
▻https://hacks.mozilla.org/2017/09/i-built-something-with-a-frame-in-2-days-and-you-can-too
►https://aframe.io
▻https://github.com/donmccurdy/aframe-extras
#3D
je me suis lancé dans AFrame il y a quelques jours et en effet c’est aussi chouette que le HTML et le SVG, voire plus encore car on n’a pas à gérer le z-index ou l’ordre des objets pour qu’ils se mettent bien dans l’image. Donc on crée sa scène, on rajoute des bidules, et voilà on a une planète qui tourne sur fond de voie lactée avec des tuyaux qui sortent et tout.
Ça me rappelle quand on s’amusait en VRML avec le plugin blaxxun :-)
Pyodide: Bringing the scientific #Python stack to the browser - Mozilla Hacks - the Web developer blog
▻https://hacks.mozilla.org/2019/04/pyodide-bringing-the-scientific-python-stack-to-the-browser
Pyodide is an experimental project from Mozilla to create a full Python data science stack that runs entirely in the browser.
HTML5 Pre-resize images before uploading - Stack Overflow
▻https://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading
Exemple de manipulation d’image par le navigateur (redimensionnement) avant son POST vers un serveur
Le billet original sur mozilla-dev : ►https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader
La doc de l’API File de HTML5 : ▻https://developer.mozilla.org/fr/docs/Web/API/File/Using_files_from_web_applications
Dweb: Serving the Web from the Browser with Beaker – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/08/dweb-serving-the-web-from-the-browser-with-beaker
Imagine what an entire browser experience would be like if the web was distributed… Beaker browser does exactly this! Beaker is a big vision from a team who are proving out the distributed web from top to bottom.
Traduit en français par ici ▻https://seenthis.net/messages/754339 :)
Content Security Policy CSP Reference & Examples
▻https://content-security-policy.com
Site de référence pour les HTTP Headers « Content Security Policy » (CSP)
Voir aussi :
– des explications plus complètes : ▻https://www.html5rocks.com/en/tutorials/security/content-security-policy
– un outil de test : ▻https://observatory.mozilla.org
– un autre outil de test (permet de choisir la version de CSP) : ▻https://csp-evaluator.withgoogle.com
– un exemple commenté : ▻https://hacks.mozilla.org/2016/02/implementing-content-security-policy
Déja sur seenthis :
– ▻https://seenthis.net/messages/522624#message523937
– ►https://seenthis.net/messages/523919
#Firefox 60 – Modules and More ▻https://hacks.mozilla.org/2018/05/fi...
▻https://diasp.eu/p/7161681
#Firefox 60 – Modules and More ▻https://hacks.mozilla.org/2018/05/firefox-60-modules-and-more
CSS Grid for UI Layouts – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/02/css-grid-for-ui-layouts
The fundamental problem with Flexbox is that it is one dimensional. This makes Flexbox great for one dimensional uses, like toolbars and navbars, but it begins to fail when I need to align content both horizontally and vertically at the same time. Instead I need real two dimensional layout, which is why I need CSS Grid. Fundamentally Grid is 2D.
À la fin il donne le lien vers une super chaine pédago de Jen Simmons
▻https://seenthis.net/messages/670758
j’ai eut ça dans la news « css layout news » (du site du même nom), très bien fait cet article y’avait aussi un post de Jen Simmons « Whitespace on The Web ! — with CSS Grid »… c’est pas toujours le cas mais la y’avait des choses vraiment intéressantes.
New #flexbox guides on MDN – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/01/new-flexbox-guides-on-mdn
Et tout est déjà traduit en français.
Les concepts de base des boîtes flexibles
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox
Les liens entre flexbox et les autres méthodes de disposition
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions
L’alignement des éléments au sein d’un conteneur flexible
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible
Ordonner les éléments flexibles
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordonner_%C3%A9l%C3%A9ments_flexibles
Contrôler les proportions des éléments flexibles le long de l’axe principal
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contr%C3%B4ler_les_proportions_des_bo%C3%AEtes_flexibles_le_long_
Maîtriser le passage à la ligne des éléments flexibles
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_fle
Les cas d’utilisation classiques des boîtes flexibles
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox
La rétrocompatibilité de flexbox
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/R%C3%A9trocompatibilite_de_flexbox
#intégration #web #HTML #CSS #grid #documentation
Saying Goodbye to Firebug ★ Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug
The story of Firefox and Firebug is synonymous with the rise of the web.
So long Firebug, and thanx for all the fish :)
Intersection Observer comes to Firefox
▻https://hacks.mozilla.org/2017/08/intersection-observer-comes-to-firefox
Knowing whether or not an element is #visible has traditionally been difficult on the Web. Most solutions listen for scroll and resize events, then use #DOM #APIs like getBoundingClientRect() to manually calculate where elements are relative to the #viewport. This usually works, but it’s inefficient and doesn’t take into account other ways in which an element’s visibility can change, such as a large image finally loading higher up on the page, which pushes everything else downward.
These techniques kill performance, drain batteries, and would be completely unnecessary if the browser could just notify us whenever an element’s visibility changed.
At its most basic, the #IntersectionObserver API looks something like:
let observer = new IntersectionObserver(handler);
observer.observe(target); // <-- Element to watch
IntersectionObserver is available by default in Edge 15, Chrome 51, and Firefox 55, which is due for release next week.A polyfill is available which works effectively everywhere, albeit without the performance benefits of native implementations.
▻https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill
Fathom: a framework for understanding web pages
▻https://hacks.mozilla.org/2017/04/fathom-a-framework-for-understanding-web-pages
#Readability, the basis of Safari and Firefox’s reader modes, is 1,800 lines of #JavaScript and was recently shut down. Chrome’s DOM Distiller is 23,000 lines of Java.But what if understanders were cheap to write? What if Readability could be implemented in just 4 simple rules?That scores within 7% of Readability’s output on a selection of its own test cases, measured by Levenshtein distance1. The framework enabling this is Fathom, and it drives the cost of writing understanders through the floor.Fathom is a mini-language for writing semantic extractors. The sets of rules that make up its programs are embedded in JavaScript, so you can use it client- or server-side as privacy dictates.
const rules = ruleset(
rule(dom('p,div,li,code,blockquote,pre,h1,h2,h3,h4,h5,h6'),
props(scoreByLength).type('paragraphish')),
rule(type('paragraphish'),
score(fnode => (1 - linkDensity(fnode,
fnode.noteFor('paragraphish')
.inlineLength))
* 1.5)),
rule(dom('p'),
score(4.5).type('paragraphish')),
rule(type('paragraphish')
.bestCluster({splittingDistance: 3,
differentDepthCost: 6.5,
differentTagCost: 2,
sameTagCost: 0.5,
strideCost: 0}),
out('content').allThrough(domSort))
); Fathom is a JavaScript framework for #extracting meaning from web pages, identifying parts like Previous/Next buttons, address forms, and the main textual content—or classifying a page as a whole. Essentially, it scores #DOM nodes and extracts them based on conditions you specify. A Prolog-inspired system of types and annotations expresses dependencies between scoring steps and keeps state under control. It also provides the freedom to extend existing sets of scoring rules without editing them directly, so multiple third-party refinements can be mixed together.
Firefox 52 est le premier navigateur à adopter les grilles CSS
▻https://www.macg.co/logiciels/2017/03/firefox-52-est-le-premier-navigateur-adopter-les-grilles-css-97683
Using #Feature_Queries in #CSS ★ Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2016/08/using-feature-queries-in-css
There’s a tool in CSS that you might not have heard of yet. It’s powerful. It’s been there for a while. And it’ll likely become one of your favorite new things about CSS.
Behold, the #@supports rule. Also known as Feature Queries.
With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer.
Using the Web Animations API - Web APIs | MDN
▻https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
The Web Animations API lets us construct animations and control their playback with JavaScript. This article will start you off in the right direction with fun demos and tutorials featuring Alice in Wonderland.
The Web Animations API opens the browser’s animation engine to developers and manipulation by JavaScript. This API was designed to underlie implementations of both CSS Animations and CSS Transitions, and leaves the door open to future animation effects. It is one of the most performant ways to animate on the Web where supported, letting the browser make its own internal optimizations without hacks, coercion, or Window.requestAnimationFrame().
With the Web Animations API, we can move interactive animations from stylesheets to JavaScript, separating presentation from behavior. We no longer need to rely on DOM-heavy techniques like writing CSS properties and scoping classes onto elements to control playback direction. And unlike pure, declarative CSS, JavaScript also lets us dynamically set values from properties to durations. For building custom animation libraries and creating interactive animations, the Web Animations API might be the perfect tool for the job.
Pour la mise au point/débogage de ces animations, la version de firebug fusionnée avec Firefox DevTools (à partir de Firefox 49, cf ▻https://blog.getfirebug.com/2016/06/07/unifying-firebug-firefox-devtools) propose « Animation Inspector », une console spécifique : cf ▻https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations
Pour aller plus loin : ▻https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate
Pour la compatibilité avec les navigateurs ne supportant pas l’API Web Animations (Internet Explorer et Safari actuellement) : ▻https://github.com/web-animations/web-animations-js
Do not let your CDN betray you : Use Subresource Integrity
▻https://hacks.mozilla.org/2015/09/subresource-integrity-in-firefox-43
Je rejoins ++ le commentaire #comment-18850 sur le fait que ça permettrait d’introduire un peu d’adressage par le contenu (notamment pour les polices, le jquery etc).
Developer Edition 41: View source in a tab, screenshot elements, HAR files, and more
▻https://hacks.mozilla.org/2015/07/developer-edition-41-view-source-in-a-tab-screenshot-elements-har-fil
Dans #firefox 41 il va y avoir quelques nouveautés plutôt sympa (déjà disponible sur le canal Beta)
Notamment la possibilité de prendre un screenshot d’un élément particulier depuis l’outil de développement. Pour éviter d’avoir à capturer toute la page puis de devoir la retailler sous Gimp.(Permalink)
Introducing the #javascript Internationalization API ✩ Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api
Firefox 29 issued half a year ago, so this post is long overdue. Nevertheless I wanted to pause for a second to discuss the Internationalization API first shipped on desktop in that release. ping @ybon
#i18n
#firefox Add-on Enables Web Development Across Browsers and Devices ✩ Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2014/09/firefox-tools-adapter
Enter an experimental Firefox add-on called the Firefox Tools Adaptor that connects the Firefox Developer Tools to other major browser engines. This add-on is taking the awesome tools we’ve built to #debug Firefox OS and Firefox on Android to the other major mobile browsers starting with Chrome on Android and Safari on iOS. So far these tools include our Inspector, Debugger and Console. This add-on allows you to use your desktop environment to work on several small screen devices without using up precious screen space.
#dev
Malheureusement pas prévu pour marcher avec Firefox Gaia (la version mobile). Comme si les équipes ne se connaissent même pas.
#déception