Powerful New Additions to the CSS Grid Inspector in Firefox Nightly

CSS Grid is revolutionizing web design. It’s a flexible, simple design standard that can be used across all browsers and devices. That’s why we built CSS Grid Inspector. We’ve been working hard on the Firefox Developer Tools Layout panel, adding powerful new features to the Grid Inspector and Box Model. The latest enhancements are now available in Firefox Nightly.

Link: https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/

Designing for performance: A data-informed approach for Quantum development

When we announced Project Quantum last October, we talked about how users would benefit from our focus on “performance gains…that will be so noticeable that your entire web experience will feel different.” We shipped the first significant part of this in Firefox 53, and continue to work on the engineering side. Now let’s dive into […]

Link: https://hacks.mozilla.org/2017/06/designing-for-performance-a-data-informed-approach-for-quantum-development/

Firefox 54: E10S-Multi, WebExtension APIs, CSS clip-path

The release of Firefox 54 completes the transformation of Firefox into a fully multi-process browser, running many simultaneous content processes in addition to a UI process and, on Windows, a special GPU process. This design makes it easier to utilize all of the cores available on modern processors and, in the future, to securely sandbox web content. This release also offers new support for the CSS clip-path property, and updates to the WebExtensions APIs.

Link: https://hacks.mozilla.org/2017/06/firefox-54-e10s-webextension-apis-css-clip-path/

CSS Shapes, clipping and masking – and how to use them

The general release of Firefox 54 is just around the corner and it will introduce new features into an already cool CSS property: clip-path, a property that allows us to clip (i.e., cut away) parts of an element. With Firefox 54, you will be able to use CSS shapes as well: insets, circles, ellipses and polygons. In this demo-rich post, we’ll explore the features of clipping and masking and how they are used.

Link: https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/

Introducing FilterBubbler: A WebExtension built using React/Redux

We’re building a text analysis toolkit with the new WebExtensions API. This toolkit will let you monitor various browser activities and resources (history, bookmarks, etc.) and then let you use text analysis modules to discover patterns in your own browsing history. The idea was to turn the tables on the kinds of sophisticated analysis that advertisers do with the everyday browsing activities we take for granted. We’re building this project using React/Redux tooling, and in this post we walk you through some of our design challenges and the decisions we made.

Link: https://hacks.mozilla.org/2017/06/introducing-filterbubbler-a-webextension-built-using-reactredux/