Julien Roche
@rochejul.bsky.social
JavaScript / NodeJs, Web & Java engineer / trainer. Interrested on JavaScript / Web - Web Mobile possibilities and capabilities
#nodejs #javascript
Twitter account: @rochejul
#nodejs #javascript
Twitter account: @rochejul
Reposted by Julien Roche
I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
November 14, 2025 at 4:22 PM
I think `animation-composition: accumulate` is gonna see more action with `random()`, as it's like "take what you already got as a value and augment it rather than replace it".
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Here's a parallax thing where randomly-fixed-positioned stars are moved different amounts (with a scroll-driven animation)
Reposted by Julien Roche
inherit() is going to be absolutely huge for working with CSS custom properties. Two big things it'll enable:
Nested indentation:
--indent: calc(inherit(--indent, 0) + 1);
Overridable design token defaults:
--primary-color: inherit(--primary-color, blue);
Nested indentation:
--indent: calc(inherit(--indent, 0) + 1);
Overridable design token defaults:
--primary-color: inherit(--primary-color, blue);
Blink: Intent to Prototype: The inherit() CSS function
Blink: Intent to Prototype: The inherit() CSS function
Blink: Intent to Prototype: The inherit() CSS function
groups.google.com
October 14, 2025 at 2:23 PM
inherit() is going to be absolutely huge for working with CSS custom properties. Two big things it'll enable:
Nested indentation:
--indent: calc(inherit(--indent, 0) + 1);
Overridable design token defaults:
--primary-color: inherit(--primary-color, blue);
Nested indentation:
--indent: calc(inherit(--indent, 0) + 1);
Overridable design token defaults:
--primary-color: inherit(--primary-color, blue);
Go take the State of JavaScript 2025 survey if you have a minute! survey.devographics.com/survey/state...
State of JavaScript 2025
Take the State of JavaScript survey
survey.devographics.com
September 29, 2025 at 4:56 PM
Go take the State of JavaScript 2025 survey if you have a minute! survey.devographics.com/survey/state...
Reposted by Julien Roche
✍️ How modern browsers work addyo.substack.com/p/how-modern... - my write-up on browser internals for web developers
How modern browsers work
A web developers guide to browser internals
addyo.substack.com
September 13, 2025 at 7:05 PM
✍️ How modern browsers work addyo.substack.com/p/how-modern... - my write-up on browser internals for web developers
Reposted by Julien Roche
Transformers Laid Out by Pramod Goyal
- Give an intuition of how transformers work
- Explain what each section of the paper means and how you can understand and implement it
- Code it down using PyTorch from a beginners perspective
goyalpramod.github.io/blogs/Transf...
- Give an intuition of how transformers work
- Explain what each section of the paper means and how you can understand and implement it
- Code it down using PyTorch from a beginners perspective
goyalpramod.github.io/blogs/Transf...
January 11, 2025 at 9:51 PM
Transformers Laid Out by Pramod Goyal
- Give an intuition of how transformers work
- Explain what each section of the paper means and how you can understand and implement it
- Code it down using PyTorch from a beginners perspective
goyalpramod.github.io/blogs/Transf...
- Give an intuition of how transformers work
- Explain what each section of the paper means and how you can understand and implement it
- Code it down using PyTorch from a beginners perspective
goyalpramod.github.io/blogs/Transf...
Reposted by Julien Roche
GCC, la suite de compilation du projet GNU, est disponible en versio 15.2. C'est principalement une version de maintenance, corrigeant au passage 123 bugs divers ⬇️
gcc.gnu.org/pipermail/gc...
gcc.gnu.org/pipermail/gc...
August 9, 2025 at 10:29 AM
GCC, la suite de compilation du projet GNU, est disponible en versio 15.2. C'est principalement une version de maintenance, corrigeant au passage 123 bugs divers ⬇️
gcc.gnu.org/pipermail/gc...
gcc.gnu.org/pipermail/gc...
Reposted by Julien Roche
Reposted by Julien Roche
Firefox shipping scheduler.postTask() and scheduler.yield() for all your long task-avoiding scheduling needs!!
Gecko: Intent to ship: Prioritized Scheduling API
Gecko: Intent to ship: Prioritized Scheduling API
Gecko: Intent to ship: Prioritized Scheduling API
groups.google.com
June 27, 2025 at 5:01 PM
Firefox shipping scheduler.postTask() and scheduler.yield() for all your long task-avoiding scheduling needs!!
Reposted by Julien Roche
Reposted by Julien Roche
🤯
Ooh what?!
I honestly had no idea about that!
And it works like a charm! ✨
Chrome 139.0.7244.0 canary with "Experimental Web Platform features" enabled.
vtbag.dev/basics/hide-...
View transitions clipped at their container!
Ooh what?!
I honestly had no idea about that!
And it works like a charm! ✨
Chrome 139.0.7244.0 canary with "Experimental Web Platform features" enabled.
vtbag.dev/basics/hide-...
View transitions clipped at their container!
June 17, 2025 at 12:32 PM
🤯
Ooh what?!
I honestly had no idea about that!
And it works like a charm! ✨
Chrome 139.0.7244.0 canary with "Experimental Web Platform features" enabled.
vtbag.dev/basics/hide-...
View transitions clipped at their container!
Ooh what?!
I honestly had no idea about that!
And it works like a charm! ✨
Chrome 139.0.7244.0 canary with "Experimental Web Platform features" enabled.
vtbag.dev/basics/hide-...
View transitions clipped at their container!
Reposted by Julien Roche
"Samuel" french animated series by Emilie Tronche is coming to Netflix (worldwide) :-]
variety.com/2025/tv/glob...
variety.com/2025/tv/glob...
June 16, 2025 at 11:06 AM
"Samuel" french animated series by Emilie Tronche is coming to Netflix (worldwide) :-]
variety.com/2025/tv/glob...
variety.com/2025/tv/glob...
Reposted by Julien Roche
From today, all new submissions to Nature that are published will be accompanied by referees’ reports and author responses — to illuminate the process of producing rigorous science
https://go.nature.com/4kIRR01
https://go.nature.com/4kIRR01
Transparent peer review to be extended to all of Nature’s research papers
From today, all new submissions to Nature that are published will be accompanied by referees’ reports and author responses — to illuminate the process of producing rigorous science.
go.nature.com
June 16, 2025 at 4:44 PM
From today, all new submissions to Nature that are published will be accompanied by referees’ reports and author responses — to illuminate the process of producing rigorous science
https://go.nature.com/4kIRR01
https://go.nature.com/4kIRR01
Reposted by Julien Roche
(comic) AI Chronicles: Vibe code
June 16, 2025 at 4:23 PM
(comic) AI Chronicles: Vibe code
Reposted by Julien Roche
I'm happy because this change means TypeScript defaults and Node defaults are converging 👍
Node does not support Import Elision which means it's important to enable "verbatimModuleSyntax"
vMS means the developer knows if an import statement/binding will be deleted - all via the `type` keyword.
Node does not support Import Elision which means it's important to enable "verbatimModuleSyntax"
vMS means the developer knows if an import statement/binding will be deleted - all via the `type` keyword.
TypeScript excitement 😉
Congrats to @searyanc.dev on landing big updates to the default tsconfig settings used by `tsc --init` 🎉
Defaults matter - and in TS 5.9 they embrace simplicity 💙
🔷 ESM (was CommonJS)
🔷 No down-leveling (was ES2016)
🔷 verbatimModuleSyntax: true
github.com/microsoft/Ty...
Congrats to @searyanc.dev on landing big updates to the default tsconfig settings used by `tsc --init` 🎉
Defaults matter - and in TS 5.9 they embrace simplicity 💙
🔷 ESM (was CommonJS)
🔷 No down-leveling (was ES2016)
🔷 verbatimModuleSyntax: true
github.com/microsoft/Ty...
tsc --init update by RyanCavanaugh · Pull Request #61813 · microsoft/TypeScript
Fixes #58420
Sample outputs
tsc --init
{
// Visit https://aka.ms/tsconfig to read more about this file
"compilerOptions": {
// File Layout
// "rootDir": "./sr...
github.com
June 7, 2025 at 10:44 AM
I'm happy because this change means TypeScript defaults and Node defaults are converging 👍
Node does not support Import Elision which means it's important to enable "verbatimModuleSyntax"
vMS means the developer knows if an import statement/binding will be deleted - all via the `type` keyword.
Node does not support Import Elision which means it's important to enable "verbatimModuleSyntax"
vMS means the developer knows if an import statement/binding will be deleted - all via the `type` keyword.
Reposted by Julien Roche
C'est encore plus terrifiant sous cet angle
May 29, 2025 at 6:58 AM
C'est encore plus terrifiant sous cet angle
Reposted by Julien Roche
Mastering Modern Monorepo Development with pnpm, Workspaces jsdev.space/complete-mon... #javascript #nodejs #monorepo
Complete Monorepo Guide: pnpm + Workspace + Changesets (2025)
Learn how to build scalable monorepo projects using pnpm workspace and changesets. Complete guide with code examples, best practices, and version management strategies for modern JavaScript developmen...
jsdev.space
May 29, 2025 at 7:40 AM
Mastering Modern Monorepo Development with pnpm, Workspaces jsdev.space/complete-mon... #javascript #nodejs #monorepo
Reposted by Julien Roche
ECMAScript excitement 😉
Firefox 139 ships the TC39 Stage 3 Temporal proposal 🎉
It's about time.
Congrats to those who worked on the implementation including Andre Bargull & Dan Minor 👍
developer.mozilla.org/en-US/docs/M...
Firefox 139 ships the TC39 Stage 3 Temporal proposal 🎉
It's about time.
Congrats to those who worked on the implementation including Andre Bargull & Dan Minor 👍
developer.mozilla.org/en-US/docs/M...
Firefox 139 for developers - Mozilla | MDN
This article provides information about the changes in Firefox 139 that affect developers. Firefox 139 is the current Beta version of Firefox and ships on May 27, 2025.
developer.mozilla.org
May 28, 2025 at 6:03 AM
ECMAScript excitement 😉
Firefox 139 ships the TC39 Stage 3 Temporal proposal 🎉
It's about time.
Congrats to those who worked on the implementation including Andre Bargull & Dan Minor 👍
developer.mozilla.org/en-US/docs/M...
Firefox 139 ships the TC39 Stage 3 Temporal proposal 🎉
It's about time.
Congrats to those who worked on the implementation including Andre Bargull & Dan Minor 👍
developer.mozilla.org/en-US/docs/M...
Reposted by Julien Roche
Notre projet de long métrage en animation « Le Chevalier Englouti » est dans la sélection officielle des pitchs MIFA 2025 Annecy Festival !
Toute l’équipe sera sur pkace pour présenter le projet, le mercredi 11 juin à 10h45 !
Toute l’équipe sera sur pkace pour présenter le projet, le mercredi 11 juin à 10h45 !
May 27, 2025 at 9:36 AM
Notre projet de long métrage en animation « Le Chevalier Englouti » est dans la sélection officielle des pitchs MIFA 2025 Annecy Festival !
Toute l’équipe sera sur pkace pour présenter le projet, le mercredi 11 juin à 10h45 !
Toute l’équipe sera sur pkace pour présenter le projet, le mercredi 11 juin à 10h45 !
Are you familiar with Browser FingerPrint?
medium.com/@rochejul/ar...
medium.com/@rochejul/ar...
Are you familiar with Browser FingerPrint?
We, user, have got some naive behavior.
medium.com
May 26, 2025 at 7:25 PM
Are you familiar with Browser FingerPrint?
medium.com/@rochejul/ar...
medium.com/@rochejul/ar...
Reposted by Julien Roche
I turn 13 on @codepen.io in June, so here are my 13 most hearted demos:
1️⃣ 1092 ♥️ #CSS infinite #scroll gallery codepen.io/thebabydino/... my only one to ever get to 1K ♥️ without being in most hearted of the year
mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)
1️⃣ 1092 ♥️ #CSS infinite #scroll gallery codepen.io/thebabydino/... my only one to ever get to 1K ♥️ without being in most hearted of the year
mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)
May 13, 2025 at 7:05 AM
I turn 13 on @codepen.io in June, so here are my 13 most hearted demos:
1️⃣ 1092 ♥️ #CSS infinite #scroll gallery codepen.io/thebabydino/... my only one to ever get to 1K ♥️ without being in most hearted of the year
mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)
1️⃣ 1092 ♥️ #CSS infinite #scroll gallery codepen.io/thebabydino/... my only one to ever get to 1K ♥️ without being in most hearted of the year
mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)
Reposted by Julien Roche
If you know one square number, you can mentally calculate the next square number! Here's how:
May 24, 2025 at 3:37 PM
If you know one square number, you can mentally calculate the next square number! Here's how:
A model set of guidelines for RESTful APIs and Events, created by Zalando: opensource.zalando.com/restful-api-...
Zalando RESTful API and Event Guidelines
opensource.zalando.com
May 24, 2025 at 6:23 PM
A model set of guidelines for RESTful APIs and Events, created by Zalando: opensource.zalando.com/restful-api-...
Reposted by Julien Roche
5️⃣ 850 ♥️ No SVG, no image fluid slider codepen.io/thebabydino/...
JS used only for
a) feature support detection
b) updating slider value in --val
Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler
One of my best sliders on @codepen.io.
#CSS
JS used only for
a) feature support detection
b) updating slider value in --val
Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler
One of my best sliders on @codepen.io.
#CSS
May 23, 2025 at 4:35 PM
5️⃣ 850 ♥️ No SVG, no image fluid slider codepen.io/thebabydino/...
JS used only for
a) feature support detection
b) updating slider value in --val
Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler
One of my best sliders on @codepen.io.
#CSS
JS used only for
a) feature support detection
b) updating slider value in --val
Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler
One of my best sliders on @codepen.io.
#CSS
Reposted by Julien Roche
A cool thing I made on #CodePen: interactive demo illustrating how to use #SVG `feColorMatrix` to swap 2 channels of its input.
codepen.io/thebabydino/...
Viewport adaptive. Heavily commented code if you want to check how the demo works in the back. Makes use of modern #CSS features.
Made with ❤️.
codepen.io/thebabydino/...
Viewport adaptive. Heavily commented code if you want to check how the demo works in the back. Makes use of modern #CSS features.
Made with ❤️.
feColorMatrix: swap channels ☆ interactive demo, adaptive layout
Interactive demo to illustrate swapping two RGB channels via the SVG `feColorMatrix`. The idea is simple: if a pixel in the image is `rgb(35, 79, 185)...
codepen.io
April 9, 2024 at 6:30 PM
A cool thing I made on #CodePen: interactive demo illustrating how to use #SVG `feColorMatrix` to swap 2 channels of its input.
codepen.io/thebabydino/...
Viewport adaptive. Heavily commented code if you want to check how the demo works in the back. Makes use of modern #CSS features.
Made with ❤️.
codepen.io/thebabydino/...
Viewport adaptive. Heavily commented code if you want to check how the demo works in the back. Makes use of modern #CSS features.
Made with ❤️.
A custom element that uses the CSS Custom Highlight API for syntax highlighting
Link: andreruffert.github.io/syntax-highl...
<syntax-highlight> element - Web Component
A <syntax-highlight> web component that uses the CSS Custom Highlight API.
andreruffert.github.io
April 29, 2025 at 7:21 PM
A custom element that uses the CSS Custom Highlight API for syntax highlighting
Link: andreruffert.github.io/syntax-highl...