Storybook, the best friend we all need

•

0 gostou•37 visualizações

A presentation about a frontend workshop for building UI components that solves day to day frontend developer problems as well as for designers. In this presentation you will find real life examples of what problems has Storybook solved for me as well as three different types of testing that you can do using this library!

Tecnologia

STORYBOOK, THE
BEST FRIEND WE
ALL NEED
Anna Sala · JSDay Canarias 2023
CSS

ANNA SALA
Frontend Developer
/anna-sala
@annasala_

WHY THIS TALK?
@annasala_
🔘 Someone said ”I dare you to
become a developer”
🔘 I love rubber ducks
🔘 It is the easiest way to get
myself a Tesla
🔘 Someone said ”I dare you to
speak at a conference”

TABLE OF CONTENTS
WHAT IS STORYBOOK?
TESTING
PROBLEMS & SOLUTIONS
@annasala_

WHAT IS STORYBOOK?
Building UI components in isolation
@annasala_

WHAT IS STORYBOOK?
Building UI components in isolation
For Developers & Designers
@annasala_

WHAT IS STORYBOOK?
Building UI components in isolation
For Developers & Designers
Documenting components
@annasala_

WHAT IS STORYBOOK?
Building UI components in isolation
For Developers & Designers
Documenting components
Testing components
@annasala_

PROBLEM
@annasala_
Before, we had…
🔘 Files with too many imports
🔘 Too many lines of code
🔘 Hard to find components

PROBLEM
@annasala_
🔘 Components in one page
🔘 No margins or organization
🔘 Hard to find components
🔘 Non sense examples

SOLUTION
@annasala_
Storybook’s…
🔘 Organization
🔘 Clean UI
🔘 Easy UX

PROBLEM
@annasala_
We used to…
🔘 Control states hard-coding
🔘 Import same component
multiple times

SOLUTION
@annasala_
Storybook’s…
🔘 State control
🔘 Stories’ default states
🔘 Easy to reach components

INTERACTION TESTS
@annasala_
Can be done with Test Runner
🔘 Test in isolation
🔘 With play function
🔘 Without play function

ACCESSIBILITY
@annasala_
Can be done with a11y addon
🔘 Test accessibility errors
🔘 Catches up to
57% of WCAG issues
🔘 Easy to set up

VISUAL TESTS
@annasala_
Can be done with Chromatic
🔘 Regression tests
🔘 Zero configuration
🔘 Compare your visual changes
🔘 Easy to share with team

CONCLUSION
@annasala_
Storybook will…
… make your life easier!

THANKS!
Does anyone have
any question?
@annasala_
Source
- https://storybook.js.org/docs/react/get-started/install

Mais conteúdo relacionado

Semelhante a Storybook, the best friend we all need

.NET Development for SQL Server Developer

Marco Parenzan

This is a longer version of my presentation "Responsible Design: Accountable Accessibility" but with a catchier name :) This talk tells my story of how I went from front end developer who knew nothing about accessibility to an accessibility advocate. Included in this talk are my "10 Tips" that any developer can use on day one without any experience authoring accessible HTML. This talk was originally presented at the Accessibility Conference in Guelph, Ontario, Canada on May 29, 2013.

How Accessibility Made Me a Better Developer

Billy Gregory

Fringe IA (InfoCamp Seattle 2013)

Michael Adcock

.NET Development for SQL Server Developer - Sql Saturday #264 Ancona

Marco Parenzan

Atomic Design - An Event Apart San Diego

Brad Frost

Sea 2011 presentation

Hasanga Abeyaratne

Semelhante a Storybook, the best friend we all need (6)

.NET Development for SQL Server Developer

How Accessibility Made Me a Better Developer

Fringe IA (InfoCamp Seattle 2013)

.NET Development for SQL Server Developer - Sql Saturday #264 Ancona

Atomic Design - An Event Apart San Diego

Sea 2011 presentation

Último

[BuildWithAI] Introduction to Gemini.pdf

Sandro Moreira

Retrieval augmented generation (RAG) is the most popular style of large language model application to emerge from 2023. The most basic style of RAG works by vectorizing your data and injecting it into a vector database like Milvus for retrieval to augment the text output generated by an LLM. This is just the beginning. One of the ways that we can extend RAG, and extend AI, is through multilingual use cases. Typical RAG is done in English using embedding models that are trained in English. In this talk, we’ll explore how RAG could work in languages other than English. We’ll explore French, Chinese, and Polish.

Introduction to Multilingual Retrieval Augmented Generation (RAG)

Zilliz

DBX First Quarter 2024 Investor Presentation

Dropbox

Architecting Cloud Native Applications

WSO2

Following the popularity of “Cloud Revolution: Exploring the New Wave of Serverless Spatial Data,” we’re thrilled to announce this much-anticipated encore webinar. In this sequel, we’ll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you’re building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

The microservices honeymoon is over. When starting a new project or revamping a legacy monolith, teams started looking for alternatives to microservices. The Modular Monolith, or 'Modulith', is an architecture that reaps the benefits of (vertical) functional decoupling without the high costs associated with separate deployments. This talk will delve into the advantages and challenges of this progressive architecture, beginning with exploring the concept of a 'module', its internal structure, public API, and inter-module communication patterns. Supported by spring-modulith, the talk provides practical guidance on addressing the main challenges of a Modultith Architecture: finding and guarding module boundaries, data decoupling, and integration module-testing. You should not miss this talk if you are a software architect or tech lead seeking practical, scalable solutions. About the author With two decades of experience, Victor is a Java Champion working as a trainer for top companies in Europe. Five thousands developers in 120 companies attended his workshops, so he gets to debate every week the challenges that various projects struggle with. In return, Victor summarizes key points from these workshops in conference talks and online meetups for the European Software Crafters, the world’s largest developer community around architecture, refactoring, and testing. Discover how Victor can help you on victorrentea.ro : company training catalog, consultancy and YouTube playlists.

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

Victor Rentea

Artificial Intelligence Chap.5 : Uncertainty

Khushali Kathiriya

Accelerating FinTech Innovation: Unleashing API Economy and GenAI Vasa Krishnan, Chief Technology Officer - FinResults Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...

apidays

The value of a flexible API Management solution for Open Banking Steve Melan, Manager for IT Innovation and Architecture - State's and Saving's Bank of Luxembourg Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The value of a flexible API Management solution for O...

apidays

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

Elevate Developer Efficiency & build GenAI Application with Amazon Q

Bhuvaneswari Subramani

Exploring Multimodal Embeddings with Milvus

Zilliz

💉💊+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHABI}}+971581248768 +971581248768 Mtp-Kit (500MG) Prices » Dubai [(+971581248768**)] Abortion Pills For Sale In Dubai, UAE, Mifepristone and Misoprostol Tablets Available In Dubai, UAE CONTACT DR.Maya Whatsapp +971581248768 We Have Abortion Pills / Cytotec Tablets /Mifegest Kit Available in Dubai, Sharjah, Abudhabi, Ajman, Alain, Fujairah, Ras Al Khaimah, Umm Al Quwain, UAE, Buy cytotec in Dubai +971581248768''''Abortion Pills near me DUBAI | ABU DHABI|UAE. Price of Misoprostol, Cytotec” +971581248768' Dr.DEEM ''BUY ABORTION PILLS MIFEGEST KIT, MISOPROTONE, CYTOTEC PILLS IN DUBAI, ABU DHABI,UAE'' Contact me now via What's App…… abortion Pills Cytotec also available Oman Qatar Doha Saudi Arabia Bahrain Above all, Cytotec Abortion Pills are Available In Dubai / UAE, you will be very happy to do abortion in Dubai we are providing cytotec 200mg abortion pill in Dubai, UAE. Medication abortion offers an alternative to Surgical Abortion for women in the early weeks of pregnancy. We only offer abortion pills from 1 week-6 Months. We then advise you to use surgery if its beyond 6 months. Our Abu Dhabi, Ajman, Al Ain, Dubai, Fujairah, Ras Al Khaimah (RAK), Sharjah, Umm Al Quwain (UAQ) United Arab Emirates Abortion Clinic provides the safest and most advanced techniques for providing non-surgical, medical and surgical abortion methods for early through late second trimester, including the Abortion By Pill Procedure (RU 486, Mifeprex, Mifepristone, early options French Abortion Pill), Tamoxifen, Methotrexate and Cytotec (Misoprostol). The Abu Dhabi, United Arab Emirates Abortion Clinic performs Same Day Abortion Procedure using medications that are taken on the first day of the office visit and will cause the abortion to occur generally within 4 to 6 hours (as early as 30 minutes) for patients who are 3 to 12 weeks pregnant. When Mifepristone and Misoprostol are used, 50% of patients complete in 4 to 6 hours; 75% to 80% in 12 hours; and 90% in 24 hours. We use a regimen that allows for completion without the need for surgery 99% of the time. All advanced second trimester and late term pregnancies at our Tampa clinic (17 to 24 weeks or greater) can be completed within 24 hours or less 99% of the time without the need surgery. The procedure is completed with minimal to no complications. Our Women's Health Center located in Abu Dhabi, United Arab Emirates, uses the latest medications for medical abortions (RU-486, Mifeprex, Mifegyne, Mifepristone, early options French abortion pill), Methotrexate and Cytotec (Misoprostol). The safety standards of our Abu Dhabi, United Arab Emirates Abortion Doctors remain unparalleled. They consistently maintain the lowest complication rates throughout the nation. Our Physicians and staff are always available to answer questions and care for women in one of the most difficult times in their lives. The decision to have an abortion at the Abortion Cl

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

In this keynote, Asanka Abeysinghe, CTO,WSO2 will explore the shift towards platformless technology ecosystems and their importance in driving digital adaptability and innovation. We will discuss strategies for leveraging decentralized architectures and integrating diverse technologies, with a focus on building resilient, flexible, and future-ready IT infrastructures. We will also highlight WSO2's roadmap, emphasizing our commitment to supporting this transformative journey with our evolving product suite.

Platformless Horizons for Digital Adaptability

WSO2

ICT role in 21st century education and its challenges

rafiqahmad00786416

Strategies for Landing an Oracle DBA Job as a Fresher

Remote DBA Services

Webinar Recording: https://www.panagenda.com/webinars/why-teams-call-analytics-is-critical-to-your-entire-business Nothing is as frustrating and noticeable as being in an important call and being unable to see or hear the other person. Not surprising then, that issues with Teams calls are among the most common problems users call their helpdesk for. Having in depth insight into everything relevant going on at the user’s device, local network, ISP and Microsoft itself during the call is crucial for good Microsoft Teams Call quality support. To ensure a quick and adequate solution and to ensure your users get the most out of their Microsoft 365. But did you know that ‘bad calls’ are also an excellent indicator of other problems arising? Precisely because it is so noticeable!? Like the canary in the mine, bad calls can be early indicators of problems. Problems that might otherwise not have been noticed for a while but can have a big impact on productivity and satisfaction. Join this session by Christoph Adler to learn how true Microsoft Teams call quality analytics helped other organizations troubleshoot bad calls and identify and fix problems that impacted Teams calls or the use of Microsoft365 in general. See what it can do to keep your users happy and productive! In this session we will cover - Why CQD data alone is not enough to troubleshoot call problems - The importance of attributing call problems to the right call participant - What call quality analytics can do to help you quickly find, fix-, and prevent problems - Why having retrospective detailed insights matters - Real life examples of how others have used Microsoft Teams call quality monitoring to problem shoot problems with their ISP, network, device health and more.

Why Teams call analytics are critical to your entire business

panagenda

CNIC Information System with Pakdata Cf In Pakistan

danishmna97

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Juan lago vázquez

Following the popularity of "Cloud Revolution: Exploring the New Wave of Serverless Spatial Data," we're thrilled to announce this much-anticipated encore webinar. In this sequel, we'll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you're building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

Storybook, the best friend we all need

1. STORYBOOK, THE BEST FRIEND WE ALL NEED Anna Sala · JSDay Canarias 2023 CSS

2. ANNA SALA Frontend Developer /anna-sala @annasala_

3. WHY THIS TALK? @annasala_ 🔘 Someone said ”I dare you to become a developer” 🔘 I love rubber ducks 🔘 It is the easiest way to get myself a Tesla 🔘 Someone said ”I dare you to speak at a conference”

4. TABLE OF CONTENTS WHAT IS STORYBOOK? TESTING PROBLEMS & SOLUTIONS @annasala_

5. WHAT IS STORYBOOK? Building UI components in isolation @annasala_

6. WHAT IS STORYBOOK? Building UI components in isolation For Developers & Designers @annasala_

7. WHAT IS STORYBOOK? Building UI components in isolation For Developers & Designers Documenting components @annasala_

8. WHAT IS STORYBOOK? Building UI components in isolation For Developers & Designers Documenting components Testing components @annasala_

9. PROBLEM @annasala_ Before, we had… 🔘 Files with too many imports 🔘 Too many lines of code 🔘 Hard to find components

10. PROBLEM @annasala_ 🔘 Components in one page 🔘 No margins or organization 🔘 Hard to find components 🔘 Non sense examples

11. SOLUTION @annasala_ Storybook’s… 🔘 Organization 🔘 Clean UI 🔘 Easy UX

12. PROBLEM @annasala_ We used to… 🔘 Control states hard-coding 🔘 Import same component multiple times

13. SOLUTION @annasala_ Storybook’s… 🔘 State control 🔘 Stories’ default states 🔘 Easy to reach components

14. SOLUTION @annasala_

15. TESTING @annasala_

16. INTERACTION TESTS @annasala_ Can be done with Test Runner 🔘 Test in isolation 🔘 With play function 🔘 Without play function

17.

18.

19. ACCESSIBILITY @annasala_ Can be done with a11y addon 🔘 Test accessibility errors 🔘 Catches up to 57% of WCAG issues 🔘 Easy to set up

20. VISUAL TESTS @annasala_ Can be done with Chromatic 🔘 Regression tests 🔘 Zero configuration 🔘 Compare your visual changes 🔘 Easy to share with team

21. CONCLUSION @annasala_ Storybook will… … make your life easier!

22. THANKS! Does anyone have any question? @annasala_ Source - https://storybook.js.org/docs/react/get-started/install

Storybook, the best friend we all need

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Storybook, the best friend we all need

Semelhante a Storybook, the best friend we all need (6)

Último

Último (20)

Storybook, the best friend we all need