De retour de Hambourg, avec le teint hâlé qui va bien. Le port est magnifique et le Fishmarkt est plein de surprises !
Joined November 2011
- Tweets11.5K
- Following202
- Followers101
- Likes3.2K
Stéphane ✨ retweeted
You can do much more than just simply react to one event with Angular event listener syntax
And it also works in `host` metadata
Here is how you can let users save their progress with a familiar "Ctrl + S" key combination:
![Angular code in editor.ts. A component with selector 'app-editor', imports: [DatePipe], and host: { '(document:keydown.control.s)': 'save($event)', '(document:keydown.meta.s)': 'save($event)' }. The template: <textarea #area [value]="draft()" (input)="draft.set(area.value)"></textarea>, then @if (savedAt(); as time) { <small>Saved at {{ time | date: 'shortTime' }}</small> }. In class Editor: readonly draft = signal(localStorage.getItem('draft') ?? ''); readonly savedAt = signal<Date | null>(null). The method save(event: Event) calls event.preventDefault(), localStorage.setItem('draft', this.draft()) and this.savedAt.set(new Date()). The two host listener lines are highlighted.](https://pbs.twimg.com/media/HWb1rJ6W4AA3daC.jpg?name=orig)
ALT Angular code in editor.ts. A component with selector 'app-editor', imports: [DatePipe], and host: { '(document:keydown.control.s)': 'save($event)', '(document:keydown.meta.s)': 'save($event)' }. The template: <textarea #area [value]="draft()" (input)="draft.set(area.value)"></textarea>, then @if (savedAt(); as time) { <small>Saved at {{ time | date: 'shortTime' }}</small> }. In class Editor: readonly draft = signal(localStorage.getItem('draft') ?? ''); readonly savedAt = signal<Date | null>(null). The method save(event: Event) calls event.preventDefault(), localStorage.setItem('draft', this.draft()) and this.savedAt.set(new Date()). The two host listener lines are highlighted.
Stéphane ✨ retweeted
CSS tip: ever positioned a tooltip using 𝚐𝚎𝚝𝙱𝚘𝚞𝚗𝚍𝚒𝚗𝚐𝙲𝚕𝚒𝚎𝚗𝚝𝚁𝚎𝚌𝚝() just to keep it aligned with a button?
CSS anchor positioning can handle this 🖱️
.𝚝𝚛𝚒𝚐𝚐𝚎𝚛 {
𝚊𝚗𝚌𝚑𝚘𝚛-𝚗𝚊𝚖𝚎: --𝚝𝚛𝚒𝚐𝚐𝚎𝚛;
}
.𝚝𝚘𝚘𝚕𝚝𝚒𝚙 {
𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚊𝚋𝚜𝚘𝚕𝚞𝚝𝚎;
𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗-𝚊𝚗𝚌𝚑𝚘𝚛: --𝚝𝚛𝚒𝚐𝚐𝚎𝚛;
𝚝𝚘𝚙: 𝚊𝚗𝚌𝚑𝚘𝚛(𝚋𝚘𝚝𝚝𝚘𝚖);
𝚕𝚎𝚏𝚝: 𝚊𝚗𝚌𝚑𝚘𝚛(𝚌𝚎𝚗𝚝𝚎𝚛);
𝚝𝚛𝚊𝚗𝚜𝚕𝚊𝚝𝚎: -𝟻𝟶% 𝟾𝚙𝚡;
}
The 𝚊𝚗𝚌𝚑𝚘𝚛() function lets you reference an element's position directly in CSS.
Pretty useful for tooltips, popovers and contextual menus.
Less coordinate math in JavaScript, more layout handled by CSS.
Stéphane ✨ retweeted
‼️WARNING - OpenSSH issues emergency fix for a critical SSH authentication bypass on Alpine Linux.
A password longer than 256 bytes can unlock key-only accounts on affected servers, without knowing the actual credentials.
Here's how it works ↓ thehackernews.com/2026/11/op…
Stéphane ✨ retweeted
‼️ Microsoft Paint RCE fix is now available, but Windows Update won't deliver it.
CVE-2026-83844 could allow unauthenticated remote code execution.
The fix requires a Microsoft Store app update, and older Paint copies may remain installed.
Read → thehackernews.com/2026/11/mi…
Stéphane ✨ retweeted
STUDIO MAPPA is reportedly in talks to acquire the rights to ‘TOKYO GHOUL’, with plans to completely reboot the franchise from the ground up.
The project would reportedly scrap all non-canon elements from previous seasons, giving the series a full, uncensored adaptation faithful to Sui Ishida’s original dark fantasy manga.
Stéphane ✨ retweeted
Spring Tip! 🚀
@DynamicPropertySource
Override configuration properties dynamically in integration tests without modifying application.yml
Stéphane ✨ retweeted
css tip: 𝚝𝚎𝚡𝚝-𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠 takes any string, not just an ellipsis.
.𝚝𝚒𝚝𝚕𝚎 {
𝚠𝚑𝚒𝚝𝚎-𝚜𝚙𝚊𝚌𝚎: 𝚗𝚘𝚠𝚛𝚊𝚙;
𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠: 𝚑𝚒𝚍𝚍𝚎𝚗;
𝚝𝚎𝚡𝚝-𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠: 𝚎𝚕𝚕𝚒𝚙𝚜𝚒𝚜;
𝚝𝚎𝚡𝚝-𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠: " (𝚖𝚘𝚛𝚎)";
}
the browser cuts the title and draws your string right after the last letter that fits. browsers without it drop the last line and keep the ellipsis.
Stéphane ✨ retweeted
Symbol.iterator is an amazing thing. You can turn anything into something you can loop over, and you can make it *recursive*
Here is an example of a primitive file system based on nothing but plain JS classes:
![JavaScript code in folder.js. A class Folder has a constructor(name, children = []) that stores this.name and this.children. It has a generator method *[Symbol.iterator]() (highlighted) that does yield this; then, for (const child of this.children), yield* child. Usage: const src = new Folder('src', [new Folder('app', [new Folder('pages')]), new Folder('assets')]). Then [...src].map((folder) => folder.name) gives ['src', 'app', 'pages', 'assets'].](https://pbs.twimg.com/media/HWR4fanWcAA5L0P.jpg?name=orig)
ALT JavaScript code in folder.js. A class Folder has a constructor(name, children = []) that stores this.name and this.children. It has a generator method *[Symbol.iterator]() (highlighted) that does yield this; then, for (const child of this.children), yield* child. Usage: const src = new Folder('src', [new Folder('app', [new Folder('pages')]), new Folder('assets')]). Then [...src].map((folder) => folder.name) gives ['src', 'app', 'pages', 'assets'].
Stéphane ✨ retweeted
jotter is a TUI that edits and runs Jupyter notebooks in your terminal.
It quickly renders LaTeX, runs code blocks, previews matplotlib plots, autosaves edits with unsaved file recovery and more.
Samuel Recker made jotter using @ratatui_rs & is Terminal Tool of the Week! ⭐️
Stéphane ✨ retweeted
css tip: 𝚊𝚝𝚊𝚗𝟸() is a pretty interesting CSS function.
It calculates the angle between two coordinates 📐
You can use it to make an element point towards the cursor without manually calculating angles in JavaScript.
.𝚊𝚛𝚛𝚘𝚠 {
𝚛𝚘𝚝𝚊𝚝𝚎: 𝚊𝚝𝚊𝚗𝟸(𝚟𝚊𝚛(--𝚍𝚢), 𝚟𝚊𝚛(--𝚍𝚡));
}
Here, --𝚍𝚡 and --𝚍𝚢 represent the cursor's offset from the element.
Update those values as the cursor moves, and the arrow follows its direction.
Pretty neat for directional interactions, cursor-following elements and radial interfaces.
Stéphane ✨ retweeted
Introducing Skullet 💀
Loading states without hand-drawn placeholders or layout shift. Skullet measures your components and draws their skeletons for you.
Wrap your component with <Skeleton> and you're done.
Happy Halloween! 🎃
→ skullet.lochie.me
Stéphane ✨ retweeted
small animation detail ✏️:
instead of scaling directly from 0 → 1, add a tiny overshoot.
@𝚔𝚎𝚢𝚏𝚛𝚊𝚖𝚎𝚜 𝚙𝚘𝚙 {
𝟶% { 𝚝𝚛𝚊𝚗𝚜𝚏𝚘𝚛𝚖: 𝚜𝚌𝚊𝚕𝚎(𝟶); }
𝟽𝟶% { 𝚝𝚛𝚊𝚗𝚜𝚏𝚘𝚛𝚖: 𝚜𝚌𝚊𝚕𝚎(𝟷.𝟶𝟾); }
𝟷𝟶𝟶% { 𝚝𝚛𝚊𝚗𝚜𝚏𝚘𝚛𝚖: 𝚜𝚌𝚊𝚕𝚎(𝟷); }
}
that extra 1.08 gives the interaction a bit of weight instead of just appearing.
works really well for reactions, checkmarks, badges and small confirmation states.
Stéphane ✨ retweeted
💡 Need a tiny LRU cache without an extra library? You can use LinkedHashMap.
✅ accessOrder=true moves entries to the end on each get
✅ Override removeEldestEntry to drop the oldest when full
Stéphane ✨ retweeted
⚡ GitHub introduces a new npm package firewall to block malicious packages before installation.
Now in public preview for Enterprise Cloud, it checks malware advisories, vulnerabilities, risky install scripts, and package age before allowing downloads.
How it works ↓ thehackernews.com/2026/10/gi…
Stéphane ✨ retweeted
Scroll-driven animations are newly available in all major engines! Here's how they work:
Stéphane ✨ retweeted
css tip: stop trying to animate height to auto.
the browser can't animate to height: auto, so the panel just jumps open.
animate grid-template-rows from 0fr to 1fr instead. the row grows to the real height of the content, whatever it is.
.panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 300ms ease-out;
}
.panel.open {
grid-template-rows: 1fr;
}
.panel > div {
overflow: hidden;
}
Stéphane ✨ retweeted
tsrs : un port de TypeScript en Rust qui accélère la vérification de types de votre code, jusqu'à 8x plus vite que TypeScript 7.0 avec 70 % de mémoire en moins.
Ce n'est pas un fork, le travail se fait avec l'équipe TypeScript.
Version expérimentale installable via npm. ⬇️
Stéphane ✨ retweeted
small CSS tip:
we've all done weird workarounds to animate height: 0 → height: auto.
there's a cleaner way now:
:𝚛𝚘𝚘𝚝 {
𝚒𝚗𝚝𝚎𝚛𝚙𝚘𝚕𝚊𝚝𝚎-𝚜𝚒𝚣𝚎: 𝚊𝚕𝚕𝚘𝚠-𝚔𝚎𝚢𝚠𝚘𝚛𝚍𝚜;
}
.𝚙𝚊𝚗𝚎𝚕 {
𝚑𝚎𝚒𝚐𝚑𝚝: 𝟶;
𝚘𝚟𝚎𝚛𝚏𝚕𝚘𝚠: 𝚑𝚒𝚍𝚍𝚎𝚗;
𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗: 𝚑𝚎𝚒𝚐𝚑𝚝 𝟹𝟶𝟶𝚖𝚜 𝚎𝚊𝚜𝚎;
}
.𝚙𝚊𝚗𝚎𝚕.𝚘𝚙𝚎𝚗 {
𝚑𝚎𝚒𝚐𝚑𝚝: 𝚊𝚞𝚝𝚘;
}
interpolate-size lets the browser animate between numeric sizes and intrinsic values like auto.
accordions just got a lot less annoying.
Stéphane ✨ retweeted
🚨 UPDATE: The Brotli flaw (CVE-2026-111497) goes beyond Node.js and web traffic.
• .NET: patched by Microsoft
• FFmpeg: hit via a crafted JPEG XL image
• ClickHouse: one request crashes it, fix not yet released
• Apache Arrow: no fix yet
Details ↓ thehackernews.com/2026/10/br…
