Vanessa Otto
@vannsl.bsky.social
Staff Frontend Engineer - GitLab, Public speaker, Podcast Co-Host Working Draft, Podcast Host expect(Exception), prev. Head of Frontend - Zavvy by Deel
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...
If you’re a woman or identify as one and work with CSS, please take part!
👉 survey.devographics.com/survey/state...
State of CSS 2025
Take the State of CSS survey
survey.devographics.com
June 17, 2025 at 2:51 PM
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...
If you’re a woman or identify as one and work with CSS, please take part!
👉 survey.devographics.com/survey/state...
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 🔧
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 🔧
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.
blog.vannsl.io
May 29, 2025 at 11:13 AM
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 🔧
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 🔧
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.
→ 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.
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.
blog.vannsl.io
April 14, 2025 at 6:04 PM
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.
→ 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.
Reposted by Vanessa Otto
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
📦 www.npmjs.com/package/@sir...
💾 github.com/SirPepe/dark...
#webdev #webcomponents
@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...
www.npmjs.com
April 9, 2025 at 2:02 PM
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
📦 www.npmjs.com/package/@sir...
💾 github.com/SirPepe/dark...
#webdev #webcomponents
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 ?
April 10, 2025 at 6:36 AM
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 ?
Reposted by Vanessa Otto
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.
April 7, 2025 at 3:32 PM
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.
Reposted by Vanessa Otto
Revision 656: State of JS 2024 – Teil 3/4 workingdraft.de/656/
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...
workingdraft.de
April 8, 2025 at 6:09 AM
Revision 656: State of JS 2024 – Teil 3/4 workingdraft.de/656/
Reposted by Vanessa Otto
🎙️ 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/
In dieser Episode von Working Draft diskutieren wir unter anderem die Notwendigkeit von Lodash im modernen Webentwicklungsprozess.
workingdraft.de/653/
March 28, 2025 at 8:48 AM
🎙️ 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/
In dieser Episode von Working Draft diskutieren wir unter anderem die Notwendigkeit von Lodash im modernen Webentwicklungsprozess.
workingdraft.de/653/
Reposted by Vanessa Otto
Revision 655: State of JS 2024 – Teil 2 workingdraft.de/655/
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...
workingdraft.de
April 1, 2025 at 8:19 AM
Revision 655: State of JS 2024 – Teil 2 workingdraft.de/655/
Reposted by Vanessa Otto
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/
🎧 workingdraft.de/655/
April 1, 2025 at 9:47 AM
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/
🎧 workingdraft.de/655/
🖼️ 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-...
📉 It also covers how to convert images with tools like ffmpeg and Sharp.
📖 blog.vannsl.io/blog/modern-...
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.
blog.vannsl.io
April 7, 2025 at 2:45 PM
🖼️ 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-...
📉 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...
The post covers some of the decisions I had to make, like decision-making, domain & hosting, and tool selection
blog.vannsl.io/blog/between...
Between Diapers and Development – How My Blog Came to Life with Eleventy
This is a post about creating this blog.
blog.vannsl.io
March 30, 2025 at 5:48 PM
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...
The post covers some of the decisions I had to make, like decision-making, domain & hosting, and tool selection
blog.vannsl.io/blog/between...
🇩🇪 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.
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.
Zwischen Wickeln und Entwickeln - Wie mein Blog mit Eleventy entstand
This is a post about creating this blog.
blog.vannsl.io
March 26, 2025 at 1:28 PM
🇩🇪 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.
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.
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. 🤩
👩💻 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.
With a baby, my requirements have changed: it needs to be quick and easy. Focus on writing the articles, not coding.
March 13, 2025 at 5:38 PM
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. 🤩
👩💻 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.
With a baby, my requirements have changed: it needs to be quick and easy. Focus on writing the articles, not coding.
March 10, 2025 at 1:51 PM
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.
With a baby, my requirements have changed: it needs to be quick and easy. Focus on writing the articles, not coding.
Reposted by Vanessa Otto
🎧 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?
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?
February 21, 2025 at 11:25 AM
🎧 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?
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?
Reposted by Vanessa Otto
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! 😊
Habt ihr Wünsche oder Kritik am Podcast? Dann antwortet hier, schreibt 'ne DM, E-Mail oder auf Slack draft.community! 😊
February 19, 2025 at 3:26 PM
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! 😊
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...
If you work in web development, UX, or accessibility, this is a must-read!
🔗 Read the article: schepp.dev/posts/rethin...
February 17, 2025 at 3:17 PM
@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...
If you work in web development, UX, or accessibility, this is a must-read!
🔗 Read the article: schepp.dev/posts/rethin...
Reposted by Vanessa Otto
Revision 648: Personal Web Sites workingdraft.de/648/ mit @matthiasott.com
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…
workingdraft.de
February 11, 2025 at 7:50 AM
Revision 648: Personal Web Sites workingdraft.de/648/ mit @matthiasott.com
Reposted by Vanessa Otto
Not OP, but here's what my colleague @vannsl.bsky.social found when they investigated it gitlab.com/gitlab-org/g...
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...
gitlab.com
December 19, 2024 at 5:41 PM
Not OP, but here's what my colleague @vannsl.bsky.social found when they investigated it gitlab.com/gitlab-org/g...
🚀 I'll be giving the talk "Unleashing the Power of AI: Write Your Own AI Extension for Tiptap" at frontendnation.com
🗓️ Thursday, 7:35pm CEST. I'll present a demo project, discuss prompt engineering, UX decisions, and token limits.
🗓️ Thursday, 7:35pm CEST. I'll present a demo project, discuss prompt engineering, UX decisions, and token limits.
Frontend Nation | The largest event for frontend developers
Get your free ticket to the largest online gathering of frontend devs in the world. Get the latest from industry experts for Vue.js, React, Angular & many more.
frontendnation.com
June 5, 2024 at 12:42 PM
🚀 I'll be giving the talk "Unleashing the Power of AI: Write Your Own AI Extension for Tiptap" at frontendnation.com
🗓️ Thursday, 7:35pm CEST. I'll present a demo project, discuss prompt engineering, UX decisions, and token limits.
🗓️ Thursday, 7:35pm CEST. I'll present a demo project, discuss prompt engineering, UX decisions, and token limits.
I'm delighted to share that I recently had the honour of serving on the Vue.js Germany conference jury! conf.vuejs.de/
Let me tell you, the talent on display was jaw-dropping! We come up with a solution to add more talks! 🎉
@martinakraus11.bsky.social @webdave.bsky.social 💚
Let me tell you, the talent on display was jaw-dropping! We come up with a solution to add more talks! 🎉
@martinakraus11.bsky.social @webdave.bsky.social 💚
vuejs.de Conf 2024
vuejs.de Conf is the first community-driven Vue conference in Germany. 8.10. - 9.10.2024 at Maritim Hotel, Bonn.
conf.vuejs.de
May 6, 2024 at 4:59 PM
I'm delighted to share that I recently had the honour of serving on the Vue.js Germany conference jury! conf.vuejs.de/
Let me tell you, the talent on display was jaw-dropping! We come up with a solution to add more talks! 🎉
@martinakraus11.bsky.social @webdave.bsky.social 💚
Let me tell you, the talent on display was jaw-dropping! We come up with a solution to add more talks! 🎉
@martinakraus11.bsky.social @webdave.bsky.social 💚
I had a blast sharing the power of AI-powered actions using
Tiptap at the #vuejsamsterdam!
Imagine a Rich Text Editor that magically translates, adapts your ton, automates edits.
I showed how to implement it, displayed examples of prompt engineering, discussed token limits and prompt injections!
Tiptap at the #vuejsamsterdam!
Imagine a Rich Text Editor that magically translates, adapts your ton, automates edits.
I showed how to implement it, displayed examples of prompt engineering, discussed token limits and prompt injections!
April 25, 2024 at 9:19 AM
I had a blast sharing the power of AI-powered actions using
Tiptap at the #vuejsamsterdam!
Imagine a Rich Text Editor that magically translates, adapts your ton, automates edits.
I showed how to implement it, displayed examples of prompt engineering, discussed token limits and prompt injections!
Tiptap at the #vuejsamsterdam!
Imagine a Rich Text Editor that magically translates, adapts your ton, automates edits.
I showed how to implement it, displayed examples of prompt engineering, discussed token limits and prompt injections!