Lightnews — Scholar-powered news

MDN Web Docs @developer.mozilla.org · 5d

Thank you so much! 🙌

MDN Web Docs @developer.mozilla.org · 5d

Help us make MDN even better for you! 📣

We’re running a short survey to understand how developers use MDN in their day-to-day work and learning.

⏱️ Takes ~10 minutes
✅ All questions optional
🔒 Responses are anonymous

Take the survey 📝
survey.alchemer.com/s3/8409929/...

survey.alchemer.com

1 4 5

MDN Web Docs @developer.mozilla.org · 6d

📷 Ever wonder what’s really happening behind your web images?

From pixels to formats to compression, you should use:
- JPEG for details
- PNG for transparency
- WebP & AVIF for web-performance
- SVG for resolution-independent graphics

Read more 👇
developer.mozilla.org/en-US/blog/...

Pixel data from encoders to decoders | MDN Blog

From individual pixels to fully decoded images on your screen, raw pixel data gets transformed, compressed, and efficiently delivered. Learn about the techniques and optimizations that shrink image information without any perceivable loss in quality.

developer.mozilla.org

2 14

MDN Web Docs @developer.mozilla.org · 9d

Margin? Border? Padding? Content? 💅

The CSS box model is the foundation of layout, and MDN’s interactive exercises help you truly understand how it all fits together.

💡 Practice live in your browser
developer.mozilla.org/en-US/docs/...

Test your skills: The box model - Learn web development | MDN

The aim of this skill test is to help you assess whether you understand the CSS box model.

developer.mozilla.org

6

MDN Web Docs @developer.mozilla.org · 11d

🕵️‍♂️ The User-Agent HTTP header tells the server what client is making the request, like browser, OS, and rendering engine.

It helps servers:
✅ Serve browser-specific content
✅ Log usage patterns
❌ But can also be a source of fingerprinting

Read more 👇
developer.mozilla.org/en-US/docs/...

User-Agent header - HTTP | MDN

The HTTP User-Agent request header is a characteristic string that lets servers and network peers identify the application, operating system, vendor, and/or version of the requesting user agent.

developer.mozilla.org

6

MDN Web Docs @developer.mozilla.org · 16d

Style text selections with ::highlight!

The ::highlight pseudo-element lets you customize how text highlights appear. Not just for user selection (::selection), but also for custom highlights created via the Highlight API

Learn more 👇
developer.mozilla.org/en-US/docs/...

1 5

MDN Web Docs @developer.mozilla.org · 17d

Tired of long-running scripts blocking the UI?

The Web Workers API lets you run JS in the background, keeping your app responsive and smooth.
✅ Offload heavy tasks
✅ Keep the main thread free
✅ Great for data crunching, parsing, and more

Read how 👇
developer.mozilla.org/en-US/docs/...

Using Web Workers - Web APIs | MDN

Web Workers are a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. In addition, they can make network requests using the fetch() or XMLHttpRequest APIs. Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa).

developer.mozilla.org

1 16

MDN Web Docs @developer.mozilla.org · 18d

🕵️‍♂️ The User-Agent HTTP header tells the server what client is making the request, like browser, OS, and rendering engine.

It helps servers:
✅ Serve browser-specific content
✅ Log usage patterns
❌ But can also be a source of fingerprinting

Read more 👇
developer.mozilla.org/en-US/docs/...

User-Agent header - HTTP | MDN

The HTTP User-Agent request header is a characteristic string that lets servers and network peers identify the application, operating system, vendor, and/or version of the requesting user agent.

developer.mozilla.org

1 8

MDN Web Docs @developer.mozilla.org · 19d

What does the k1 attribute do in SVG? 🌀

The k1 attribute is used with the filter element in SVG to apply convolution effects. It’s part of the kernel matrix that defines how pixels are transformed.

Learn more 👇
developer.mozilla.org/en-US/docs/...

k1 - SVG | MDN

The k1 attribute defines one of the values to be used within the arithmetic operation of the <feComposite> filter primitive.

developer.mozilla.org

1

MDN Web Docs @developer.mozilla.org · 20d

🧪 Thinking of using fetch() streams to track upload/download progress?

@jakearchibald.com shares more, and how could limit future browser optimizations.

✅ Streams = Great for parallel processing
❌ Streams ≠ Reliable for measuring up/down %

Read more 👇
jakearchibald.com/2025/fetch-...

Fetch streams are great, but not for measuring upload/download progress

They're inaccurate, and there are better ways.

jakearchibald.com

1 4 33

Reposted by MDN Web Docs

Firefox Nightly @firefoxnightly.bsky.social · 20d

[Nightly Blog] Webcam previews and more! – These Weeks in Firefox: Issue 187 blog.nightly.mozilla.org/2025/09/12/w...

Webcam previews and more! – These Weeks in Firefox: Issue 187 – Firefox Nightly News

Highlights Nicolas Chevobbe added presentational hints in the Inspector's rule-view (#1212289)

blog.nightly.mozilla.org

2 11

MDN Web Docs @developer.mozilla.org · 20d

Guide assistive tech with aria-orientation 🧭

The aria-orientation attribute helps screen readers and other assistive tech understand how a UI component is laid out, horizontal or vertical, with widgets like
↕️ Sliders
↔️ Tabs
🔼 Treeviews

Read more 👇
developer.mozilla.org/en-US/docs/...

ARIA: aria-orientation attribute - ARIA | MDN

The aria-orientation attribute indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

developer.mozilla.org

2 15

MDN Web Docs @developer.mozilla.org · 23d

Tired of hacking together deep copies with JSON.parse(JSON.stringify(...))? 🔁

The structuredClone() method lets you safely clone complex JavaScript objects.
No data loss. No surprises. Just clean, reliable cloning.

Learn more 👇
developer.mozilla.org/en-US/docs/...

Window: structuredClone() method - Web APIs | MDN

The structuredClone() method of the Window interface creates a deep clone of a given value using the structured clone algorithm.

developer.mozilla.org

3 3 35

MDN Web Docs @developer.mozilla.org · 23d

We’d love your feedback! 📣

Take our quick 1–2 minute survey on using ReadableStream as a request body with the Fetch API.

Your input helps shape browser support and prioritize real-world use cases.

Share your thoughts 📝
survey.alchemer.com/s3/8460326/...

survey.alchemer.com

1 13

Reposted by MDN Web Docs

Mozilla @mozilla.org · Sep 12

🚨 Schedule drop 🚨
Mozilla Festival 2025 is live: 240+ sessions, film fest, youth-led forums, tech + art.
📅 Nov 7–9 | Barcelona
Join us: bit.ly/3K6gmqx
#MozFest

2 2 13

Reposted by MDN Web Docs

Jake Archibald @jakearchibald.com · 27d

📝 Fetch streams are great, but contrary to popular belief, they're not good for measuring upload/downloading progress.

⬇️ Here's why, and how to avoid the gotchas ⬇️

jakearchibald.com/2025/fetch-s...

Fetch streams are great, but not for measuring upload/downloading progress

They're inaccurate, and there are better ways.

jakearchibald.com

4 17 150

Reposted by MDN Web Docs

Firefox Nightly @firefoxnightly.bsky.social · 26d

Mozilla - Ask a Fox event
community.mozilla.org/campaigns/as...

Mozilla - Ask a Fox event - Mozilla Community Portal

The Mozilla Support platform (a.k.a. SUMO) receives over 20 million visits each month. It’s the go-to place for Firefox users to

community.mozilla.org

1 6

Reposted by MDN Web Docs

Pranshu Khanna @pran.sh · 26d

Have thoughts on using ReadableStream as a request body in fetch()?

We're running a quick survey (1–2 mins) to gauge interest, it'll help shape what browser folks prioritize next.

If you care about streaming uploads or fetch, this is for you 👇
survey.alchemer.com/s3/8460326/...

survey.alchemer.com

1 3

Reposted by MDN Web Docs

mozilla.ai @mozilla.ai · 25d

We're excited to announce that our ML Systems Engineer Raz Besaleli, and Head of AI Engineering Irina Vidal Migallón will speak at the DataFest Tbilisi (Nov 27–29)!

Raz on lessons from systems engineering for resilient AI, and Irina on key risks when working with AI.

More info: www.datafest.ge

DataFest Tbilisi 2025

www.datafest.ge

1 3

Reposted by MDN Web Docs

Firefox @firefox.com · 25d

Firefox 143 is here, check out what's new:

✔️ Drag tabs to pin them. Simple, effective.
✔️ Camera preview in permission dialog. No more guesswork.
✔️ Stronger Fingerprinting Protection.
✔️ Smarter Private Browsing downloads (decide to keep or auto-delete).

www.firefox.com/en-US/firefo...

Firefox 143.0, See All New Features, Updates and Fixes

www.firefox.com

11 29 190

Reposted by MDN Web Docs

Mozilla @mozilla.org · 24d

Last chance to apply ⚡

Mozilla @mozilla.org · Sep 11

Applications are now open for our Creative Futures Counterstructures Residency✨

This 10-week cultural residency is for artists + technologists looking to re-imagine and prototype the possibilities of ethical AI systems.

San Francisco📍
Apply by Sept 17✨
www.mozillafoundation.org/en/creative-...

Creative Futures Counterstructures | Mozilla Foundation

Creative Futures Counterstructures (CFC) is Mozilla Foundation’s 10-week cultural R&D residency where creative technologists and communities come together to imagine, test, and build alternative tech ...

www.mozillafoundation.org

2 12

MDN Web Docs @developer.mozilla.org · 24d

Need your numbers to line up? Or prefer old-school serif-style numerals?

CSS has a property for that: font-variant-numeric
// font-variant-numeric: tabular-nums;

✅ Tabular vs proportional
✅ Lining vs oldstyle
✅ Even supports slashed zero

Read more 👇
developer.mozilla.org/en-US/docs/...

font-variant-numeric - CSS | MDN

The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.

developer.mozilla.org

15

MDN Web Docs @developer.mozilla.org · 25d

Need to watch for DOM changes without running expensive polling logic?

Use a MutationObserver, it tracks changes to elements in real time.
✅ Efficient
✅ Native
✅ Great for components that react to dynamic content

How it works + what to observe 👇
developer.mozilla.org/en-US/docs/...

MutationObserver - Web APIs | MDN

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.

developer.mozilla.org

10

MDN Web Docs @developer.mozilla.org · 26d

Simple, native, reliable. 📌

Relative URLs can be weird, but the URL API makes resolving them super clean.
🚫 Not string concat
✅ Real path resolution
📎 new URL() throws on bad input
📎 URL.parse() returns null instead

Here's a breakdown 👇
developer.mozilla.org/en-US/docs/...

Resolving relative references to a URL - Web APIs | MDN

The URL() constructor or the URL.parse() static method of the URL API can be used to resolve a relative reference and a base URL to an absolute URL.

developer.mozilla.org

11

MDN Web Docs @developer.mozilla.org · 27d

Did you share your opinion yet? 🤔

We're running a short survey (1–2 min) to understand interest in using ReadableStream as a request body in the Fetch API.

Help us guide implementation priorities.

Fill up the survey! 👇
survey.alchemer.com/s3/8460326/...

Code snippet showing how to use a ReadableStream as a request body with the Fetch API. The code example sends a POST request to the /upload endpoint using fetch(), with a readableStream as the body and duplex: 'half' included in the options to enable streaming.

4