Would be glad to see what u could make with it!

Capture a dom node as a screenshot in dev tools

an example of the generated screenshot.

Web Dev tip 🔥

Did you know you can get a png of any DOM Node by simply right clicking on the markup in the dev tools and selecting 'capture node screenshot'? 📸

Here is an example of some of my new followers as a png.

Really handy for all sorts of things! 🙂

Turned my ASCII text scramble hover effect into a full-screen playground. Radial waves expand from the cursor, with a GUI to tweak everything live. Probably useless. Fun to play with though. Bonus: you get to read some Lovecraft.

Codepen: codepen.io/erevan/full/qEaYQPw

View Transitions Toolkit A collection of utility functions to more easily work with View Transitions.

So, I’ve written a bunch of things on how to do certain things with View Transitions, such as optimizing the keyframes or driving a VT by scroll.

I noticed I repeat a lot of code throughout those experiments … so I bundled that all up in a package for you.

👉 chrome.dev/view-transit...

What's the best way to showcase modern CSS features? By making games!

This time it's the Dino Game 🦖 by @developer.chrome.com

css-tip.com/dino-game/

100% CSS magic playable with the keyboard. Yes, you can jump and crouch with the arrow keys! 👀

Don't search for the JS, there is none.

The clearest deep-dive on signals I've come across. The push-pull algorithm finally makes sense. This is exactly the kind of work the frontend community needs more of. Congrats @willybrauner.com 🙌

Collectif Parcelles | Pour un web créatif, éco-responsable et accessible Parcelles, collectif d’artisan·es du web, crée des sites créatifs, éco-responsables et accessibles pour un avenir numérique plus désirable.

That's it. Turns out creative + responsible + accessible is doable. Just takes the right constraints from day one.
→ collectifparcelles.com

Also open for freelance from April : Performance, accessibility, creative web. 👋

#WebGL #a11y #Vuejs #sustainableWeb

[9/9]

Screenshot of the accessible display panel on collectifparcelles.com. A toggle button in the top-right corner shows the accessibility icon with a notification dot. The open panel displays "Affichage accessible" with three options listed: Animations réduites, Espacements ajustables, Compatible zoom +200%.

Animations designed to be accessible from the start, not patched after.
Result: 90%+ on the accessibility audit with the full animated site.
prefers-reduced-motion in CSS alone isn't enough. There's also an "accessible display" mode: reduced motion, adjustable spacing, works at any zoom level

[8/9]

The custom cursor is a Voronoi diagram in SVG.
Cursor is the central seed. Background cells precomputed once as static SVG paths. Only the cursor cell recomputes every frame.
Great intro here if you're new to voronoi :
gorillasun.de/blog/delauna...

[7/9]

WebGL only makes sense if you size it to the device. At startup I score the device (RAM, CPU cores, MAX_TEXTURE_SIZE, GPU renderer, network type, device type). Quality and effects scale accordingly. On low-end: static image fallback. Zero GPU get burned!

[6/9]

The hero: a GPGPU sim with a ping-pong framebuffer. Voronoi-based displacement encoded in a single RGBA texture: displacement UV, highlights, reveal mask.
A gaussian ring propagates from the center, each cell gets revealed as it passes through.

[5/9]

GitHub - oframe/ogl: Minimal WebGL Library Minimal WebGL Library. Contribute to oframe/ogl development by creating an account on GitHub.

Wanted to go raw WebGL, but OGL is just too good especially for GPGPU.
Much closer to native WebGL than Three.js, and much lighter.
github.com/oframe/ogl

[4/9]

Code snippet showing a custom Timeline API built on top of WAAPI. A timeline instance is created, timeScale is set to 0.5, then four elements are added with keyframes and relative time offsets like "+=500" and "-=500". The last element animates x from -100% to 0 with a 1000ms ease-in-out duration. The timeline ends with timeline.play().

No animation library here. I wrote a ~4kB wrapper around the native Web Animations API (WAAPI). Too used to GSAP syntax so the API stays close: offsets, timeScale(), progress() for scroll scrubbing. WAAPI runs on the compositor thread: less risk of jank🎉
I also load polyfills only if needed

[3/9]

Vite bundle analyzer treemap showing the full JS output of collectifparcelles.com, split across chunks: ogl/src (WebGL core), lib/homeHeroGL with gpgpu.ts and shaders, app/lib/animation with scroll-timeline polyfill, VoronoiCursor, SiteHeader, ScrollDrivenSlides, and the Nuxt entry bundle. No single dependency dominates the treemap.

Hard budget from the start: <500kB total. JS, CSS, fonts, images, everything.
Fonts subsetted with glyphhanger (Really nice tool from @zachleat.com) + @nuxt.com/fontaine for fallback metrics so the layout doesn't shift while fonts load. Tracked automatically at every build. [2/9]

I thought I'd do a little technical breakdown of this one.

Creative experience with WebGL, scroll animations and custom interactions, built under hard accessibility and performance constraints from day one. 🧵

#FrontEnd #Javascript

[1/9] 👇

Coloring for Colorblindness This interactive visual tool lets you see how accessible your color palettes are to viewers who are colorblind.

Coloring for Colorblindness : tester l'accessibilité de vos palettes de couleurs

New collab with Collectif Parcelles - pushing creative, accessible & sustainable web.

Interactive site with WebGL shaders + scroll animations, RGAA/RGESN(a11y/sustainability) compliant.

Tech: Vue/Nuxt, Vanilla JS, WAAPI, OGL, <500kB total.

Immersive ≠ heavy

→ collectifparcelles.fr

#a11y #webgl

Not sure what it is, but it is....
My new Portfolio! (best on desktop/laptop)
neuroproductions.be

Tami Lam - Netflix | LinkedIn Producer-shaped person doing the video games thing for 20 years. Nominated for an… · Experience: Netflix · Education: AnimSchool · Location: Irvine · 500+ connections on LinkedIn. View Tami Lam’s prof...

Hey folks so I’m not good at this but, I’m a Sr. Producer seeking work!

💼 20 years of game production XP across Netflix Games/Spry Fox, Bungie, Blizzard, Zynga, Riot Games, and more
⭐️ indie, AAA, PC/console/mobile, 8-400 person teams, internal and ex-dev

www.linkedin.com/in/cuppycake...

@kyndinfo.bsky.social's articles are always invaluable resources for understanding complex concepts. Highly recommend!

Such a cool idea, it looks so good!

Head of CNC (part of french ministry of culture in charge of cinema & game industries) raises a warning on private school selling expensive dreams (30 to 50k€) to wannabe gamedevs
www.linkedin.com/posts/gaetan...

(ping @erwancario.bsky.social)

Hey Bluesky

I've updated my portfolio

I'm currently looking for projects, so if you like my work, I'm available!
(Full version in comment)

#indiegame #indiedev #composer #vgm #videogamemusic #Portfolio #videogame #freelance #gamedev

Sharing the ASCII link hover ripple from my tiny folio. Plain JS, minimal CSS, layout‑safe for long labels.

Demo: codepen.io/erevan/pen/M...

Relief visualization in perspective style showing elevation data from Montée du Puits at coordinates 43.2135, 5.4418 with elevation range from -1m to 538m. This location was requested by @navalu.bsky.social.

//\ Relief #159

Location: Montée du Puits, Provence-Alpes-Côte d'Azur, France
Coordinates: 43.2135, 5.4418
Elevation Range: -1m to 538m
Terrain type: low-hilly

Requested by @navalu.bsky.social

#ReliefOfTheDay #DataViz #Geography

Messenger It's a small planet, but someone's gotta make the deliveries.

Hey, ça fait un petit moment que je travaille avec Abeto sur un projet de petit jeu jouable sur navigateur et c'est sorti hier !
C'est gratuit et ça dure 10/15 minutes.

N'hésitez pas à aller essayer : messenger.abeto.co
(en plus c'est multi, vous pouvez le faire à plusieurs)
#indiegame #ost

image d'une main qui tient un coca cola

Pou le plaisir, un clin d'oeil à mon collègue japonais Akiyoshi Kitoaka, de l'université Ritsumeikan de Kyoto, qui met tout son matos en ligne, comme cette magnifique canette, qui n'est rouge que parce que notre cerveau nous la fait voir rouge, alors qu'elle n'est faite que de blanc, noir et cyan
👇

Haha thanks ! And sorry for the pressure 😅

Bastien Cornier | Creative Developer based in Lyon, France Creative developer based in Lyon, France. Creating innovative web experiences & digital installations. 7+ years expertise in crafting high-end web experiences and immersive storytelling.

Since I'm now freelancing full-time, I made a new tiny portfolio: bastiencornier.com.
Tiny because I wanted it to be minimalist, and I set a strict budget of 10kB, including the WebGL frame. Everything fits!