var_ya - Network

A Storybook quiz! 😊 A Docs page lists input stories, one with `autofocus`. Stories aren't in iframes (let's keep it that way)....

A Storybook quiz! 😊 A Docs page lists input stories, one with `autofocus`. Stories aren't in iframes (let's keep it that way). The last input gets focus, page scrolls down.

How would you prevent this? I have a solution but will share it later. Any better ideas?

I prepared a demo:
- Deployed Storybook: https://varya.me/storybook-input-autofocus/
- Repository: https://github.com/varya/storybook-input-autofocus

Our updated website's Storybook is live! 🎉 It’s much smaller than the systems we build for clients, but it still features status...

Our updated website's Storybook is live! 🎉 It’s much smaller than the systems we build for clients, but it still features status indicators, a custom Docs page, a compact story grid, and in-page navigation. This time, I kept it simple by holding the design system in the same repo as the site. Explore it here: https://design-system.bridge-the-gap.dev/

Proud of myself: I made a lot of progress with our team website update. Hopefully launching this week! Key achievements:- Built with...

Proud of myself: I made a lot of progress with our team website update. Hopefully launching this week! Key achievements:

- Built with "Design System (and Storybook) first" approach
- Generated most code using AI
- Everything fully typed
- Zero-compromise architecture

My team is wrapping up our current project and will be available for new challenges! We're a 100% remote crew (gets reflected on our...

My team is wrapping up our current project and will be available for new challenges!

We're a 100% remote crew (gets reflected on our team photo 😉) specializing in #designsystems, and we can jump in starting January 2025, or earlier if needed.

Design system architecture, component development, or workshops—we've got you covered.

Here are the case studies https://bridge-the-gap.dev/case-studies/

Drop me a line if you'd like to chat about our team's availability!​​​​​​​​​​​​​​​​

Finally wrapped up a late-night project: generating color swatches in Storybook directly from our CSS variables! 💃 💃 💃 No need for...

Finally wrapped up a late-night project: generating color swatches in Storybook directly from our CSS variables! 💃 💃 💃

No need for token transformations or extra steps—just a simple script that pulls in the existing CSS properties and displays them as swatches.

Should the details of that be in my next blog post? Definitely should 💡

Playing around with AIs... This is a "color scheme" and a "design" by Claude 🤣🤣🤣

Playing around with AIs... This is a "color scheme" and a "design" by Claude 🤣🤣🤣

Let me share the article: Web Components in Action — How to Build a Design SystemThis is about building a library of components using Web...

Let me share the article: Web Components in Action — How to Build a Design System

This is about building a library of components using Web Components and Lit. It has insights on Storybook and shares a basic setup for similar libraries.

Please let me know what you think of it 🙂

https://medium.com/@varyastepanova/web-components-in-action-how-to-build-a-design-system-ef7d94a7c798

Designing and developing User Interfaces in 2024!This is my lecture for computer science students I'll be giving on Wednesday....

Designing and developing User Interfaces in 2024!

This is my lecture for computer science students I'll be giving on Wednesday. Exclusively pre-published on Mastodon ☺️. The lecture tries to explain component driven development and design systems from problem to solution. Speaker notes are in HTML comments.
How does it sounds? Any critical thing to change before the "release"?

https://varya.me/design-and-develop-ui-2024/

Things are getting real - I WILL try nomad life on the south of Spain in winter 2024-2025 🎉But there is a question! Where is best to go...

Things are getting real - I WILL try nomad life on the south of Spain in winter 2024-2025 🎉
But there is a question! Where is best to go for Christmas and New Year? Not necessarily around Malaga, I can travel with car. But not too distant please as we are with cats 🐈🐈‍⬛

I experimented with Gamma.app to create a presentation for my upcoming lecture on #designsystems and web component development. While not a...

I experimented with Gamma.app to create a presentation for my upcoming lecture on #designsystems and web component development. While not a perfect match for my final talk, it offers a solid structure on key topics like component-driven development, bridging design and development, and scaling web applications. A great starting point for discussing the importance of robust design systems in web development.

https://gamma.app/docs/Design-Systems-A-Guide-to-Building-Scalable-Web-Applications-3cdu56gxvkublad

Updating my website with the photos my friend made this spring...

Updating my website with the photos my friend made this spring...

It allowed us to effectively showcase the options for the features our blended team (consultants and the client's developers/designers)...

It allowed us to effectively showcase the options for the features our blended team (consultants and the client's developers/designers) was seeking.
And of course, the Miro board is available for you to explore as well. Here it is: https://miro.com/app/board/uXjVPXCoofw=/

Feel free to explore and let me know if this approach or a similar one was helpful for your work as well.

The board has become a useful tool in our work at Bridge The Gap. We constantly refer to it when discussing design system requirements with...

The board has become a useful tool in our work at Bridge The Gap. We constantly refer to it when discussing design system requirements with clients. The visual representation and wealth of examples help us communicate effectively and pinpoint crucial features.

The topic poppped up because it recently resurfaced in one of our current projects. We just had a discussion on the features needed for the design system documentation website, and this Miro board proved invaluable once again.

One key challenge is to find the right standard to benchmark against. With so many diverse design systems, it is overwhelming to pick the...

One key challenge is to find the right standard to benchmark against. With so many diverse design systems, it is overwhelming to pick the baseline. To address this, I conducted a comprehensive study, analyzing dozens of systems and their features.
The goal was to develop a structured approach to industry research, empowering teams to make informed strategic decisions and find implementation strategies. The result was a Miro board - a curated collection of design system examples.

A couple of years ago, at #React Finland 2022, I shared insights on a topic close to my heart - benchmarking for #designsystems. As a design...

A couple of years ago, at #React Finland 2022, I shared insights on a topic close to my heart - benchmarking for #designsystems. As a design system consultant, I often advise clients on best practices. If you're interested, here's the full video of the talk: https://www.youtube.com/watch?v=oFj2aLxDaTs

At Bridge The Gap, we've mastered remote work, completing 5 large #designsystems remotely. Our keys to success: clear communication...

At Bridge The Gap, we've mastered remote work, completing 5 large #designsystems remotely. Our keys to success: clear communication channels keep everyone in sync, streamlined review processes (both design and tech) boost efficiency, and comprehensive yet concise documentation. These strategies transform remote work from "meh" to "wow." Check our blog for practical tips based on real-world experience. What are your thoughts on remote vs. office work?

https://bridge-the-gap.dev/blog/remote-collaboration

Bridging design and development is tough. Large companies may have separate design systems for des and devs. And it's unclear which...

Bridging design and development is tough. Large companies may have separate design systems for des and devs. And it's unclear which department should manage or finance the syncing efforts, relying instead on enthusiastic individuals. Documentation adds to the complexity, with designers their own tools, and developers preferring code-based documentation. How do other companies handle these challenges and streamline collaboration between design and development?

Garden gate's finishing touch!

Garden gate's finishing touch!

I’m not tracking how many visitors my blog has. Nor I write there very often. But that’s the thing - people do refer to older posts from...

I’m not tracking how many visitors my blog has. Nor I write there very often. But that’s the thing - people do refer to older posts from time to time. So, there is value, and that drives me.

https://varya.me/blog/

From: @seaotta
https://toot.cafe/@seaotta/112888081203020483

In a local shop, they give customers Fuengirola.fi newspaper. Is it the sign?

In a local shop, they give customers Fuengirola.fi newspaper. Is it the sign?