Email or username:

Password:

Forgot your password?
13 posts total
Stefan Judis

With the upcoming Firefox 133 release `fetch` gets a new baseline-supported parameter β€” `keepalive`.

Requests with the set `keepalive` option won't be canceled when the page unloads or is closed. πŸ’ͺ

stefanjudis.com/today-i-learne

await fetch(`${root}/api/collect`, {
  method: 'POST',
  body: data,
  // keep request alive if the page is unloaded
  // before the request is complete
  keepalive: true,
});
Sebbe

@stefan very nice. And about time FF got this in.

Alex Wilson

@stefan Interesting - is there a limit to the # of connections that can be kept alive?

micha

@stefan @rauschma so ohne can get tracked, even when the page/tab is closed? πŸ€”

Stefan Judis

πŸ’‘ TIL β€” the new `node --run` flag doesn't run life cycle scripts.

Node.js v23 was released last week and ships a new and stable `node --run` flag. The flag allows running `package.json` scripts without npm. It's slightly faster than `npm run` (we're talking a couple of hundred ms) but doesn't run life cycle scripts (e.g. `prestart`).

So `node --run` is not an `npm run` replacement.

Will you use it? I'd rather stick with `npm run` in this case... πŸ€”

Examples showing that `node --run` is slightly faster than `npm run` but also doesn't execute npm life cycle scripts.
Show previous comments
Pascal Duez

@stefan For what it's worth, yarn removed lifecycle scripts support quite some time ago, pnpm support them but under a flag or config option.
Not trying to weigh against them actually, just pointing out that they did not reached consensus.

Thomas Hunter II

@stefan I like that it doesn't print all of the npm bs when an error occurs

Stefan Judis

The new Web Weekly Newsletter is out and it's been very busy in the browser world.πŸ₯‚

This time:

βœ… A new HTTP method β€” QUERY
βœ… Chromium-only: transitioning from and to `auto`
βœ… A peek into the CSS future: more powerful `attr()`, `sibling-count()` and `random()`
βœ… Simple cross-origin requests to avoid OPTIONS requests
βž• New tools & more platform updates.

stefanjudis.com/blog/web-weekl

The new Web Weekly Newsletter is out and it's been very busy in the browser world.πŸ₯‚

This time:

βœ… A new HTTP method β€” QUERY
βœ… Chromium-only: transitioning from and to `auto`
βœ… A peek into the CSS future: more powerful `attr()`, `sibling-count()` and `random()`
βœ… Simple cross-origin requests to avoid OPTIONS requests
βž• New tools & more platform updates.

Web Weekly β€” Your friendly web dev newsletter.
Stefan Judis

The new Web Weekly Newsletter is out.πŸ₯‚ This time:

βœ… What makes good forms?
βœ… Accessible name computation
βœ… `display: contents`
βœ… Why not only `p` elements are paragraphs in HTML as 😱
βœ… Styleable selects in Chrome Canary
βž• New tools & more platform updates.

Enjoy!πŸ‘‡

stefanjudis.com/blog/web-weekl

Web Weekly β€” Your friendly web dev newsletter
Stefan Judis

Quick reminder: if your browser support allows it, `align-content: center` works on block layout elements these days. πŸ’ͺ πŸ‘‡

caniuse.com/mdn-css_properties

CSS by T. Afif :verified:

@stefan if you are testing with an emoji you will not get a perfect centering due to the baseline alignment.

It's one (hidden) gotcha for this new alignment: css-tip.com/align-content-cent

Stefan Judis

It's probably too early to use alternative text for generated CSS content in prod and without proper fallback, but since Safari 17.4 and Firefox 128, the `/` syntax entered the baseline. πŸ’ͺ

If you want to learn more, I discovered it 4y ago... πŸ‘‡

stefanjudis.com/today-i-learne

.new-item::before {   /* "black star" and element content is read out */   content: "β˜…";      /* "Highlighted item" and element content is read out */   content: "β˜…" / "Highlighted item";      /* Generated content is ignored and only element content is read out */   content: "β˜…" / ""; }
Stefan Judis

✍️ For the tech writers: Google Docs now comes with more Markdown options. ✨

Now you can:

- Format a doc with MD syntax (I do that all the time)
- Convert MD to Docs content on paste
- Copy Docs content as MD
- Export a Doc as MD
- Import MD as a Doc

workspaceupdates.googleblog.co

Google Docs Download dialog including a "Markdown (.md)" option
Andrico (semi-hardcore)

@stefan MD formatting is table stakes for me. Glad to see these changes in Google docs!

Stefan Judis

Firefox 128 shipped last week and with it, two new CSS features entered the baseline. @​property and relative color syntax. πŸŽ‰

And while you probably want to wait until you use these new features because they're hard to polyfill, now's the time to start looking into them. πŸ‘‡

Graphic showing that with Firefox 128 @property and relative color syntax are cross-browser supported.
Stefan Judis

After all these years, I just discovered that Firefox has a color picker right there in there inspector. 🀯

Firefox devtools with the highlighted color picker in the top right corner.
Stefan Judis

There are some web dev myths that just live on and on β€” one of them: you should set `rel=noopener` on `target=_blank` links to null `window.opener`.

Browsers have done this automatically for four years. πŸ˜‰

HTML example showing that a link without `rel=noopener` is that same as a link without it. This implicit behavior is support since Chrome 88, Firefox 79 and Safari 12.1.
Emma (has_many_books of old)

@stefan I guess they live on because of the commercial need to support impossibly old browser versions...

Stefan Judis

Haha! Apparently, some people celebrate a new "web day" β€” JS Naked Day.

It's 4/24 and this is heck smart. πŸ˜‚ πŸ‘‡

js-naked-day.org


Why April 24?

In some countries, β€œApril 24” can be written as β€œ4/24” β€” which is also the HTTP error code for a failed dependency. JS Naked Day promotes the fact that websites should work without a dependency on JavaScript.
Andreas Steinkellner

@stefan I think it's an awesome idea that urges people to think about creating awesome pages without heavily relying on JavaScript.

If it's not an actual web app, JavaScript should only ever be progressive enhancement for an existing page.

Stefan Judis

CSS quick tip: if you're adding quotation characters use `open-quote` and `close-quote` as content because they consider the document language. πŸ’ͺ

stefanjudis.com/today-i-learne

Code example showing that `content: open-quote` and `content: close-quote` are localized.
Stefan Judis

New on the blog. 🫣

I wanted to see how well oklch() treats hue changes in terms of lightnessπŸ‘‡

stefanjudis.com/today-i-learne

Go Up