▶ Watch on YouTube & Subscribe to CodingCat.dev
Coding Together: Improving DX and Accessibility with Svelte and Storyblock
Welcome back to another episode of CodingCat Dev, where we discuss the latest and greatest in web development! Today we have two special guests - Josephine from Storyblock and Alex from VueDos. This episode is brought to you by Storyblock, the flexible headless CMS that gives developers and content creators the freedom to build anything.
But first, a quick word from our sponsor Storyblock:
We know that creating content can be a tedious balancing act. Developers want flexibility to make seamless digital experiences, while content teams need the tools to work independently and make changes without everything falling apart. We met our limits using plugin after plugin and waiting weeks for edits – all for this. We knew it was time to rebuild the blocks.
Storyblock gives marketers creative control to visually edit content and developers are no longer restrained to a set of technologies. Storyblock makes it simple for teams to work together with localization and personalization tools, and allows you to publish on all channels and devices.
The truth is, we all want the same thing - to deliver the right information to the right destination at the right time. Come try Storyblock at jamstack.com
And don't forget to grab your tickets for Jamstack Conf in San Francisco November 6-7 at jamstack.org/conf!
Alright, let's dive into today's topic - how Svelte and Storyblock can improve developer experience (DX) and accessibility.
Brittany: Thanks for joining us Josephine and Alex! Why don't you both introduce yourselves quickly?
Josephine: Hi everyone! I'm Josephine and I'm based in Germany. I'm on the developer relations team at Storyblock working together with Alex.
Alex: Same here, I'm on the developer relations team at Storyblock. I'm Alex and you may know me from VueDos, where I share Vue tips and tricks. I'm joining you today from Brussels since we have a conference here tomorrow.
Brittany: Awesome to have you both on the show today! We were originally thinking of focusing just on Svelte and accessibility, since Josephine and I have chatted about it before. But I think we can tie in Storyblock really nicely as we discuss how these technologies can improve DX and accessibility.
So let's start with the basics - why are accessibility and DX important to each of you? Josephine, do you want to go first?
Josephine: Of course! I think accessibility and DX really go hand in hand in a lot of ways. When I first started in web development coming from a very different background, accessibility wasn't something I thought much about. But I quickly realized that our goal as developers should be to make our content and apps as inclusive as possible. Accessibility is key for allowing as many people as possible to interact with our content.
And DX is like the flip side of that same coin - we want to make it as easy as possible for developers to create accessible and inclusive experiences. DX is about streamlining the process so developers can make the right choices.
Brittany: Love that perspective! Accessibility is not just about the end product, but also the tools and systems behind it. Alex, what are your thoughts on dev experience and accessibility?
Alex: Great point. I like to think of DX as UX for developers - it's about making difficult things easy through better tooling and systems. Svelte is a great example of prioritizing DX - it removes a lot of the complexity so you can focus on building accessible apps.
Brittany: Awesome. So how does Svelte play into accessibility and improving DX?
Josephine: When I first learned about Svelte, I was drawn in by its tagline "Accessibility First". It makes accessibility considerations easy to implement upfront. For example, I get compiler warnings if I forget an alt attribute on an image. Having accessibility built into the framework means I spend less time worrying about it later.
It's all about putting the tools in the developer's toolbox from the start. And that frees up mental space to think about even more ways to improve accessibility.
Alex: I don't have as much experience with Svelte specifically, but it seems like a great example of how frameworks can enhance DX around accessibility versus having to bolt it on later. The compiler can catch issues that otherwise would fall through the cracks.
Brittany: Definitely! I think Svelte and Storyblock could make a great team for improving DX and accessibility. How do they complement each other?
Josephine: In theory they are made for each other! Both prioritize performance, accessibility, and thinking in components. Once we get over some of the rough patches integrating them, it will be a power couple!
Brittany: Let's see it in action! How about we do a quick code demo to show how Storyblock and SvelteKit could work together?
The group then walks through creating a new SvelteKit project connected to a Storyblock space, running into a few hiccups with package versions along the way. They show how to call the Storyblock API to pull in content blocks and how to connect it to real-time editing in Storyblock.
Josephine: So in summary, there are three key steps to integrate Storyblock into a Svelte project:
- Install the Storyblock SDK
- Initialize in
main.jswith your access token - Use the Storyblock utilities like
useStoryblockanduseBridgeto connect your components
The magic happens when you can edit live in Storyblock and see the changes reflected immediately in your Svelte components.
Alex: A few bumps there, but it shows the potential! I'm looking forward to seeing how the integrations mature over time.
Brittany: Me too! I think Storyblock solves a lot of content problems for JAMstack sites and Svelte is a great fit.
But we're running short on time - let's wrap up with some perfect picks!
Each person shares a favorite productivity tool, TV show, game, or other recommendation
Brittany: Thanks again Josephine and Alex for joining us today! Excited to see you both at upcoming conferences.
Josephine & Alex: Thank you, this was great!
Brittany: And don't forget to check out Storyblock's revamped ambassador program - it's a great way to get involved in the community and learn more about JAMstack and headless CMS.
That's a wrap for this episode of CodingCat Dev. Stay tuned for more chats at the intersection of web development, creativity, and community!
Links
Video Chapters & Timestamps
Jump directly to any segment of Storyblok and achieving better Accessibility from Developer Experience on YouTube using the timestamped chapters below:
- 00:00: PM
Resources, Links & Official Documentation
- *Watch on YouTube: *Storyblok and achieving better Accessibility from Developer Experience Full Video (plus Subscribe to CodingCat.dev)
- *storyblok.com: *https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast
- *ntl.fyi/3RTy1Qq: *https://ntl.fyi/3RTy1Qq
- *Show Pick: *The Boolean Game (picked by Alex Patterson)
- *Show Pick: *VSCode Pets (picked by Alex Patterson)
- *Show Pick: *House of the Dragon (picked by Brittney Postma)
- *Show Pick: *Gitako (picked by Brittney Postma)
- *Show Pick: *Tekken Bloodline (picked by Alex Jover Morales)
- *Show Pick: *What Font (picked by Josefine Schaefer)
- *Show Pick: *Soudns Like a Cult (picked by Josefine Schaefer)
- Josefine Schaefer Guest Profile & Episodes on CodingCat.dev
- Alex Jover Morales Guest Profile & Episodes on CodingCat.dev
- Alex Jover Morales on GitHub
- Episode Sponsor: JamstackConf
- Episode Sponsor: Storyblok
- W3C WAI Accessibility Fundamentals: WCAG compliance, ARIA patterns, and inclusive web engineering
- Storyblok Headless CMS Documentation: Component-based headless CMS and visual editor APIs
- Svelte & SvelteKit Documentation: Runes, compiler internals, and full-stack SvelteKit routing
Related CodingCat.dev Tutorials & Podcast Episodes
- Open Source Svelte Magic: Melting Minds through Melt UI!: Thomas teaches Brittney and Alex how to use Melt and how Runes can be used to improve builders.
- A11y with Ben Myers: Ben guides us through how A11y is hard to understand if you don’t use it everyday. He also shows us many tools that we can use to help make more accessibility c...
- Organizing your content for the world with Storyblok: We sit down with Facundo Giuliani to talk all about Storyblok and how it differs form other Content Management System.
Frequently Asked Questions (FAQ)
What are the main takeaways from Storyblok and achieving better Accessibility from Developer Experience?
All about Storyblok and how achieving better A11y can be done through developer experience. 2.44 - Storyblok and achieving better Accessibility from Developer Experience: All about Storyblok and how achieving better A11y can be done through developer experience. https://codingcat.dev/podcast/2-44-Storyblok-and-achieving-better-Accessibility-from-Developer-Experience Sponsors: Storyblok
Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 Throughout this podcast, Josefine Schaefer and Alex Jover Morales breaks down real-world implementation details for Accessibility, Storyblok, Svelte so developers can apply these patterns directly in production.
How do you implement Accessibility best practices in production?
When adopting Accessibility and Storyblok in a production stack, start by validating your configuration against the W3C WAI Accessibility Fundamentals (WCAG compliance, ARIA patterns, and inclusive web engineering). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.
Where can I watch the full Storyblok and achieving better Accessibility from Developer Experience walkthrough and find related code resources?
You can watch the complete video session for Storyblok and achieving better Accessibility from Developer Experience on the CodingCat.dev YouTube channel. For a deeper dive into Accessibility, check out our related guide: Open Source Svelte Magic: Melting Minds through Melt UI!.
Top comments (0)