Vanessa Otto

My husband though is at the conference and enjoyed your talk a lot!! And welcome back from parental leave, Emma! ❤️

State of CSS 2025 Take the State of CSS survey

Just took the #StateOfCSS 2025 survey and was asked to share it with more women in tech.

If you’re a woman or identify as one and work with CSS, please take part!
👉 survey.devographics.com/survey/state...

Designing the Next-Gen Rich Text Editor: Requirements, Challenges, and a Developer-First Approach Defining what a modern, extensible rich text editor should offer from backend-compatible output to a Notion-like UX and developer-first features.

Building a modern text editor today is wild: JSON, Notion-style UX, AI integration, collab, Markdown, Vue support... the list goes on.

I wrote a post on how I approached this:
blog.vannsl.io/blog/designi...

@tiptap.dev came out on top after comparing CKEditor, Slate, Quill & more.

Part 1 of 4 🔧

The Surprisingly Weird World of Favicons (And How to Survive It) A practical guide to implementing favicons in 2025, covering modern formats like SVG, the role of web manifests, dark mode support, and cross-browser quirks.

Another Monday, another article: "The Surprisingly Weird World of Favicons"

→ blog.vannsl.io/blog/the-sur...

What seems like a simple browser icon turns out to be a surprisingly complex topic - with quirks, outdated formats, and platform-specific behavior that developers still wrestle with today.

Light & Dark Mode Favicons on Space Jelly Read Light & Dark Mode Favicons at Space Jelly.

Special thanks to @colbyfayock.com

> ... sizes and type attributes defined here, as they’re important in making sure the browsers properly pick these up. Setting sizes="48x48" for our .ico file is playing on a browser quirk, where Chrome isn’t going to look...

spacejelly.dev/posts/light-...

@sirpepe/dark-mode-toggle A web component for switching between light and dark modes. Latest version: 0.1.1, last published: 3 hours ago. Start using @sirpepe/dark-mode-toggle in your project by running `npm i @sirpepe/dark-mo...

Circumstances have conspired to make me build and release a flexible web component to toggle dark/light mode:

📦 www.npmjs.com/package/@sir...
💾 github.com/SirPepe/dark...

#webdev #webcomponents

Digging a bit deeper: when providing an .ico fallback, I need to add the `sizes` attribute for Chrome to actually use the SVG:

<link rel="icon" href="./favicon.ico" sizes="48x48" />
<link rel="icon" href="./favicon.svg" sizes="any" type="image/svg+xml" />

That makes sense but can be overlooked.

Or I have a problem with my eyes :)

I got it working, but with a browser tab refresh in between (in Chrome)

SVG Favicons can be made adaptive to use different colors in dark mode. This works in Firefox. It should work in Chrome... but does not anymore? I couldn't find out why. Any idea - maybe @nerdy.dev ?

Peters Plädoyer im bald erscheinenden nächsten Teil unserer Besprechung zum "State of JS 2024": Lasst uns den Hype um Meta-Frameworks beenden! Kompetenz und kluge Entscheidungen sind hier der wahre Schlüssel, nicht die gewählten Tools.

Revision 656: State of JS 2024 – Teil 3/4 | Working Draft Peter, Stefan und Vanessa besprechen auch diese Woche wieder die Ergebnisse des State of JS 2024. In Teil 1 stürzten sich die Hosts vor allem auf die neuen JavaScript Features, in Teil 2 besprachen si...

Revision 656: State of JS 2024 – Teil 3/4 workingdraft.de/656/

🎙️ Revision 653: State of JS 2024 – Teil 1

In dieser Episode von Working Draft diskutieren wir unter anderem die Notwendigkeit von Lodash im modernen Webentwicklungsprozess.

workingdraft.de/653/

Revision 655: State of JS 2024 – Teil 2 | Working Draft Peter, Stefan und Vanessa besprechen weiterhin die Ergebnisse des State of JS 2024, so wie in der Vergangenheit auch bereits der State of CSS (Revision 633-635) besprochen wurden. In Teil 1 stürzten s...

Revision 655: State of JS 2024 – Teil 2 workingdraft.de/655/

In unserer neusten Episode geht es unter anderem um die Herausforderungen des asynchronen Programmierens. Gerade für Entwickler:innen, die nicht mit Promises vertraut sind, ergeben sich hier oft Verständnislücken. Mit den entsprechenden Konsequenzen.

🎧 workingdraft.de/655/

GitHub - KiwiKilian/eleventy-plugin-og-image: Create Open Graph images in Eleventy using your templates, data and CSS. Fast and reproducible, without a headless browser. Create Open Graph images in Eleventy using your templates, data and CSS. Fast and reproducible, without a headless browser. - KiwiKilian/eleventy-plugin-og-image

@matthiasott.com I've added OG Images now :)

Dynamically generated png file using an HTML/CSS template with a placeholder for the title. Credits to github.com/KiwiKilian/e...

Modern Image Formats on the Web: WebP and AVIF Without the Headache Learn how to easily implement modern image formats like WebP and AVIF on your website using HTML, CSS, and tools like ffmpeg and Sharp for image conversion.

🖼️ Tired of reading "Serve images in next-gen formats" in Google Lighthouse? I published a new blog post on how to use modern image formats like WebP & AVIF with JPG/PNG fallbacks in HTML/CSS.

📉 It also covers how to convert images with tools like ffmpeg and Sharp.

📖 blog.vannsl.io/blog/modern-...

I recently wrote about my experience building a tech blog during parental leave: Between Diapers and Development – How My Blog Came to Life with Eleventy.

The post covers some of the decisions I had to make, like decision-making, domain & hosting, and tool selection

blog.vannsl.io/blog/between...

„Dinge, die man weder im Studium noch Bootcamp lernt. Sondern nur im echten Leben“ 😅

Perfekt! 😃 Ich habe auch weiterhin ein Keystone Projekt, das mit Node 0.10 läuft keine Package Lock hat. Ich bringe Updstes auf die Seite, in dem ich den Code direkt in den Build Files von HTML und CSS Code anpasse und sie per FTP rüberschicke, und dann den Server neu starte 😅

🇩🇪 Ich habe einen neuen Blogartikel geschrieben: "Zwischen Wickeln und Entwickeln": blog.vannsl.io/blog/zwische...

Darin erzähle ich, wie ich den Alltag zwischen Windeln wechseln und Code schreiben meistere – und warum ich mich für Eleventy als Blog-Framework entschieden habe.

Revision 648: Personal Web Sites | Working Draft Mit Matthias Ott (Web, Mastodon, Newsletter) quatschen Schepp und Peter über das Indie Web im Allgemeinen und persönliche Websites im Besonderen. SCHAUNOTIZEN [00:01:01] PERSONAL WEB SITES Matthia…

On Tuesday, while I was out with the stroller, I listened to the @workingdraft.de podcast episode with you about personal websites. workingdraft.de/648/

You shared great insights, and made me laugh a couple of times. See ?! I don't have OG images and stuff yet :D

It took 3 days while being a fulltime mum to set up a blog with 11ty, move articles from devto to the project and deploy it!

👩‍💻 blog.vannsl.io 👩‍💻

Next step: Create new content. 🤩

In the past, I kept failing to set up my blog. I couldn't decide on a framework. I wanted to try out multiple options, evaluate the pros&cons, then make the "right" choice.

With a baby, my requirements have changed: it needs to be quick and easy. Focus on writing the articles, not coding.

🎧 Sneak Peek!

Am Dienstag erscheint unsere neue Folge – mit einer großartigen Gästin: Sandy Dähnert! Wir haben über Sustainable Web Design gesprochen – also wie das Web nachhaltiger wird. 🌱

Habt ihr euch schon mal damit beschäftigt? Oder setzt ihr sogar schon konkrete Maßnahmen um?

@deadparrot.dev bitte Raum erklären. Und wenn du schon dabei bist, auch die Mütze 😃

@sirpepe.bsky.social zeigt uns sein Webdev OOTD. Das ein wenig so aussieht wie ein geheimer QR Code. Wir haben versucht den Code zu fotografieren.

Screenshot von allen 5 Working Draft Hosts im Videocall

Unsere Hosts @schepp.dev, @deadparrot.dev, Hans, Peter und @vannsl.bsky.social, haben sich zusammengesetzt, gebrainstormt und an neuen, spannenden Ideen gefeilt. 💡

Habt ihr Wünsche oder Kritik am Podcast? Dann antwortet hier, schreibt 'ne DM, E-Mail oder auf Slack draft.community! 😊

@schepp.dev, my dear @workingdraft.de co-host, has written a great article on how to find invisible texts on websites.

If you work in web development, UX, or accessibility, this is a must-read!

🔗 Read the article: schepp.dev/posts/rethin...

Revision 648: Personal Web Sites | Working Draft Mit Matthias Ott (Web, Mastodon, Newsletter) quatschen Schepp und Peter über das Indie Web im Allgemeinen und persönliche Websites im Besonderen. SCHAUNOTIZEN [00:01:01] PERSONAL WEB SITES Matthia…

Revision 648: Personal Web Sites workingdraft.de/648/ mit @matthiasott.com

Investigate performance impact of many CSS variables (#2826) · Issues · GitLab.org / gitlab-ui · GitLab As our usage of design tokens expands, particularly within components like buttons, badges, and broadcast banners, we are increasingly populating the :root with numerous CSS custom properties. This...

Not OP, but here's what my colleague @vannsl.bsky.social found when they investigated it gitlab.com/gitlab-org/g...