From 8d6d3ea73ff8357727dccc383992c8113059811b Mon Sep 17 00:00:00 2001 From: Alex Patterson Date: Fri, 24 Nov 2023 05:45:46 -0500 Subject: [PATCH 01/16] podcast brad frost --- apps/codingcatdev/src/lib/types/index.ts | 1 + .../(non-course)/Author.svelte | 11 ++ .../(non-course)/guest/brad-frost/+page.md | 24 ++++ .../podcast/_design-harmony/+page.md | 126 ++++++++++++++++++ 4 files changed, 162 insertions(+) create mode 100644 apps/codingcatdev/src/routes/(content-single)/(non-course)/guest/brad-frost/+page.md create mode 100644 apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md diff --git a/apps/codingcatdev/src/lib/types/index.ts b/apps/codingcatdev/src/lib/types/index.ts index eb5bbe408..cf01da610 100644 --- a/apps/codingcatdev/src/lib/types/index.ts +++ b/apps/codingcatdev/src/lib/types/index.ts @@ -90,6 +90,7 @@ export interface Socials { facebook?: string; github?: string; instagram?: string; + lastfm?: string; linkedin?: string; email?: string; mastodon?: string; diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/Author.svelte b/apps/codingcatdev/src/routes/(content-single)/(non-course)/Author.svelte index 37556f867..e16e38a22 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/Author.svelte +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/Author.svelte @@ -13,6 +13,7 @@ Github, Instagram, Linkedin, + Lastdotfm, Mastodon, Medium, Polywork, @@ -108,6 +109,16 @@ {/if} + {#if data.content?.socials?.lastfm} + + + + {/if} {#if data.content?.socials?.linkedin} Date: Fri, 24 Nov 2023 05:46:14 -0500 Subject: [PATCH 02/16] update title --- .../(non-course)/podcast/_design-harmony/+page.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md index c3936854c..7d0037b93 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md @@ -25,7 +25,7 @@ sponsors: - storyblok spotify: start: Jan 1, 2024 -title: +title: 'Design Harmony: Navigating the Art and Science of Successful Design Systems' youtube: --- From f15bc534b5d07b7924212e26603a12745acd5a35 Mon Sep 17 00:00:00 2001 From: brittneypostma Date: Mon, 8 Jan 2024 08:18:18 -0500 Subject: [PATCH 03/16] added more questions and talking points --- .../podcast/_design-harmony/+page.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md index 7d0037b93..ba485f6a9 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md @@ -76,6 +76,13 @@ In the fast-paced world of design, creating a seamless and efficient user experi - Design systems as a tool for scalability. - How efficient design systems streamline workflows and save time. +- How do design systems scale to meet the needs of a growing organization while balancing fast product roadmaps? + - [Ship faster by building design systems slower](https://bigmedium.com/ideas/design-system-pace-layers-slow-fast.html) + +### The Layer Cake Approach + +- What are the layers of a design system and how do they build upon each other? + - [The design system ecosystem](https://bigmedium.com/ideas/design-system-ecosystem.html) ## 4. Implementing Design Harmony @@ -84,6 +91,16 @@ In the fast-paced world of design, creating a seamless and efficient user experi - Step-by-step guide to initiating a design system. - Key considerations and best practices. +#### Design System Tools + +- How do you decide which tools to use for your design system? + - Documentation + - Design Tokens - source of truth + - Component Libraries + - Playground/Storybook +- Web components and their role in the future of design systems. +- Is there a place for no-code tools in design systems? + ### Case Studies - Real-world examples of successful design system implementations. From d86f4788414044b8ad5f0bd8b65db58391ffe96b Mon Sep 17 00:00:00 2001 From: brittneypostma Date: Mon, 8 Jan 2024 08:21:23 -0500 Subject: [PATCH 04/16] purrfect pick --- .../(non-course)/podcast/_design-harmony/+page.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md index ba485f6a9..32ab95351 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md @@ -18,7 +18,10 @@ hashnode: picks: [ { author: 'brad-frost', name: 'example', site: 'example.com' }, - { author: 'alex-patterson', name: 'example', site: 'example.com' } + { author: 'alex-patterson', name: 'example', site: 'example.com' }, + { + author: 'brittney-postma', name: 'Repo of awesome design systems', site: 'https://github.com/alexpate/awesome-design-systems' + } ] slug: _design-harmony sponsors: From dd22891d650d4d1904873948536f8dab0cb38ee1 Mon Sep 17 00:00:00 2001 From: brittneypostma Date: Tue, 9 Jan 2024 10:46:15 -0500 Subject: [PATCH 05/16] updated notes with a global design system section --- .vscode/settings.json | 5 ++ .../podcast/_design-harmony/+page.md | 53 +++++++++++++++++-- 2 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..014185acd --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "cSpell.words": [ + "themeable" + ] +} \ No newline at end of file diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md index 32ab95351..35f32ed50 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md @@ -87,7 +87,52 @@ In the fast-paced world of design, creating a seamless and efficient user experi - What are the layers of a design system and how do they build upon each other? - [The design system ecosystem](https://bigmedium.com/ideas/design-system-ecosystem.html) -## 4. Implementing Design Harmony +## 4. A Global Design System + +| A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential. - Brad Frost, [A Global Design System](https://bradfrost.com/blog/post/a-global-design-system/) + +### The Problem + +We made the case for design systems and many organizations now depend on many of them to create their products. However, there are many design systems out there and they are not all compatible with each other. This creates a lot of friction for designers and developers who have to learn and use multiple systems to create their products. There is room to improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective potential. + +### The Proposal + +Band together to create a global design system that can be used by the majority of the world's designers and developers to free up their time to focus on solving more complex problems. Make the system open source and strictly governed by a community of designers and developers. Dramatically improve the quality and accessibility and usability of the world’s web experiences. There is an opportunity to make the web a better place for everyone and show what true worldwide collaboration can accomplish. + +- Centralize common UI components +- Layer on top of HTML +- Accessible and front-end best practices baked in +- Unstyled and easily themeable +- Intuitive and easy to use +- Interoperable with other systems +- Internationalized and localized +- Composable and extensible + +#### Where +- A code repository +- Code packages +- Design library +- Documentation, reference site + +#### How + +- Have conversations +- Create a working group +- Do research +- Lay out a plan of attack +- Design and build +- Release +- Iterate +- Govern +- Maintain and support integration into HTML spec + +#### Who +- You, I, and everyone who can contribute! Not owned by a specific company or organization, but sponsored by them and supported by the community. +- [Open UI](https://open-ui.org/) +- [W3C](https://www.w3.org/) +- [Design Tokens Community Group](https://tr.designtokens.org/) + +## 5. Implementing Design Harmony ### Building a Design System from Scratch @@ -109,7 +154,7 @@ In the fast-paced world of design, creating a seamless and efficient user experi - Real-world examples of successful design system implementations. - Learnings from prominent companies and their design journeys. -## 5. Challenges and Solutions +## 6. Challenges and Solutions ### Common Pitfalls @@ -121,7 +166,7 @@ In the fast-paced world of design, creating a seamless and efficient user experi - Adapting design systems to changing requirements. - Strategies for continuous improvement. -## 6. Future Trends in Design Harmony +## 7. Future Trends in Design Harmony ### AI and Automation @@ -133,7 +178,7 @@ In the fast-paced world of design, creating a seamless and efficient user experi - Navigating design harmony across various platforms. - Strategies for maintaining consistency in a multi-platform world. -## 7. Conclusion +## 8. Conclusion ### Recap of Design Harmony Principles From cc18afcec4612f154c20ceb49bb2691dd2230712 Mon Sep 17 00:00:00 2001 From: brittneypostma Date: Wed, 10 Jan 2024 13:21:25 -0500 Subject: [PATCH 06/16] updated title, slug, added purrfect picks, and edited post. --- .../podcast/_design-harmony/+page.md | 191 ------------------ .../podcast/_design-systems/+page.md | 122 +++++++++++ 2 files changed, 122 insertions(+), 191 deletions(-) delete mode 100644 apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md create mode 100644 apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-systems/+page.md diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md deleted file mode 100644 index 35f32ed50..000000000 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-harmony/+page.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -type: podcast -authors: - - alex-patterson -episode: -recording_date: Jan 10, 2024 9:00 AM -season: 3 -published: published -podcast: CodingCat.dev -chapters_done: false -cloudinary_convert: false -cover: https://media.codingcat.dev/image/upload/v1700822445/main-codingcatdev-photo/3_design-harmony.png -devto: -excerpt: 'Dive into the world of "Design Harmony" where we explore the art and science of creating and maintaining successful design systems' -guests: - - brad-frost -hashnode: -picks: - [ - { author: 'brad-frost', name: 'example', site: 'example.com' }, - { author: 'alex-patterson', name: 'example', site: 'example.com' }, - { - author: 'brittney-postma', name: 'Repo of awesome design systems', site: 'https://github.com/alexpate/awesome-design-systems' - } - ] -slug: _design-harmony -sponsors: - - storyblok -spotify: -start: Jan 1, 2024 -title: 'Design Harmony: Navigating the Art and Science of Successful Design Systems' -youtube: ---- - -In the fast-paced world of design, creating a seamless and efficient user experience is crucial. Design systems have emerged as a powerful solution, marrying art and science to ensure consistency and cohesiveness. In this exploration of "Design Harmony," we delve into the intricacies of successful design systems and how they bridge the gap between creativity and functionality. - -## 1. Understanding Design Systems - -### Definition and Purpose - -- Defining design systems and their role in the design process. -- The overarching purpose: streamlining and unifying design elements. - -### The Evolution of Design Systems - -- Historical perspective on the development of design systems. -- How design systems have adapted to meet the changing needs of the industry. - -## 2. The Art of Design Harmony - -### Aesthetics and Branding - -- The role of aesthetics in design systems. -- Maintaining brand consistency through harmonious visual elements. - -### User-Centric Design - -- How design systems prioritize the user experience. -- Balancing aesthetics with user needs for optimal functionality. - -### Creativity within Constraints - -- The paradox of creativity and constraints in design. -- Examples of innovative design within the framework of a system. - -## 3. The Science Behind Design Systems - -### Consistency and Standardization - -- The importance of consistency in user interfaces. -- Standardizing components for a unified look and feel. - -### Collaboration and Communication - -- Bridging the gap between design and development teams. -- Effective communication for successful implementation. - -### Scalability and Efficiency - -- Design systems as a tool for scalability. -- How efficient design systems streamline workflows and save time. -- How do design systems scale to meet the needs of a growing organization while balancing fast product roadmaps? - - [Ship faster by building design systems slower](https://bigmedium.com/ideas/design-system-pace-layers-slow-fast.html) - -### The Layer Cake Approach - -- What are the layers of a design system and how do they build upon each other? - - [The design system ecosystem](https://bigmedium.com/ideas/design-system-ecosystem.html) - -## 4. A Global Design System - -| A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential. - Brad Frost, [A Global Design System](https://bradfrost.com/blog/post/a-global-design-system/) - -### The Problem - -We made the case for design systems and many organizations now depend on many of them to create their products. However, there are many design systems out there and they are not all compatible with each other. This creates a lot of friction for designers and developers who have to learn and use multiple systems to create their products. There is room to improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective potential. - -### The Proposal - -Band together to create a global design system that can be used by the majority of the world's designers and developers to free up their time to focus on solving more complex problems. Make the system open source and strictly governed by a community of designers and developers. Dramatically improve the quality and accessibility and usability of the world’s web experiences. There is an opportunity to make the web a better place for everyone and show what true worldwide collaboration can accomplish. - -- Centralize common UI components -- Layer on top of HTML -- Accessible and front-end best practices baked in -- Unstyled and easily themeable -- Intuitive and easy to use -- Interoperable with other systems -- Internationalized and localized -- Composable and extensible - -#### Where -- A code repository -- Code packages -- Design library -- Documentation, reference site - -#### How - -- Have conversations -- Create a working group -- Do research -- Lay out a plan of attack -- Design and build -- Release -- Iterate -- Govern -- Maintain and support integration into HTML spec - -#### Who -- You, I, and everyone who can contribute! Not owned by a specific company or organization, but sponsored by them and supported by the community. -- [Open UI](https://open-ui.org/) -- [W3C](https://www.w3.org/) -- [Design Tokens Community Group](https://tr.designtokens.org/) - -## 5. Implementing Design Harmony - -### Building a Design System from Scratch - -- Step-by-step guide to initiating a design system. -- Key considerations and best practices. - -#### Design System Tools - -- How do you decide which tools to use for your design system? - - Documentation - - Design Tokens - source of truth - - Component Libraries - - Playground/Storybook -- Web components and their role in the future of design systems. -- Is there a place for no-code tools in design systems? - -### Case Studies - -- Real-world examples of successful design system implementations. -- Learnings from prominent companies and their design journeys. - -## 6. Challenges and Solutions - -### Common Pitfalls - -- Recognizing challenges in design system development. -- Strategies for overcoming obstacles. - -### Evolving Design Systems - -- Adapting design systems to changing requirements. -- Strategies for continuous improvement. - -## 7. Future Trends in Design Harmony - -### AI and Automation - -- The role of artificial intelligence in design systems. -- Automation trends shaping the future of design. - -### Cross-Platform Integration - -- Navigating design harmony across various platforms. -- Strategies for maintaining consistency in a multi-platform world. - -## 8. Conclusion - -### Recap of Design Harmony Principles - -- Summarizing the key principles for creating successful design systems. -- The ongoing importance of balancing the art and science of design. - -### Looking Ahead - -- Final thoughts on the future of design systems. -- Encouragement for designers to embrace the journey towards design harmony. diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-systems/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-systems/+page.md new file mode 100644 index 000000000..5a7ad2579 --- /dev/null +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-systems/+page.md @@ -0,0 +1,122 @@ +--- +type: podcast +authors: + - alex-patterson +episode: +recording_date: Jan 10, 2024 9:00 AM +season: 3 +published: published +podcast: CodingCat.dev +chapters_done: false +cloudinary_convert: false +cover: https://media.codingcat.dev/image/upload/v1700822445/main-codingcatdev-photo/3_design-harmony.png +devto: +excerpt: 'Dive into the world of creating and maintaining successful design systems, unpack the layer cake approach, and explore the potential future of a global design system.' +guests: + - brad-frost +hashnode: +picks: + [ + { author: 'brad-frost', name: 'Frostapalooza', site: 'https://frostapalooza.bradfrost.com/' }, + { author: 'alex-patterson', name: 'Aquaman and the Lost Kingdom', site: 'https://www.imdb.com/title/tt9663764/' }, + { + author: 'brittney-postma', name: 'Repo of awesome design systems', site: 'https://github.com/alexpate/awesome-design-systems' + } + ] +slug: _design-systems +sponsors: + - storyblok +spotify: +start: Jan 1, 2024 +title: 'Design Systems: From Atomic Design to a Global Solution' +youtube: +--- + +In the fast-paced world of design, creating a seamless and efficient user experience is crucial. Design systems have emerged as a powerful solution, marrying art and science to ensure consistency and cohesiveness. In this episode, we explore the complexities of successful design systems and how they bridge the gap between product and consistency. + +## 1. Atomic Design + +[Atomic design](https://atomicdesign.bradfrost.com/chapter-2/) is a methodology with a corresponding book created by our guest, Brad Frost. It involves breaking down user interfaces into fundamental building blocks, enabling the creation of more complex components. Serving as a mental modal for crafting The five hierarchical levels of atomic design — atoms, molecules, organisms, templates, and pages — build upon each other, enabling the formation of more sophisticated elements. By adopting this methodology, organizations can seamlessly scale their products while ensuring a consistent approach throughout the development process. As the importance of implementing design systems becomes increasingly recognized, additional complexities emerge for organizations to navigate. + +## 2. Design System Complexities + +As organizations grasp the importance of design systems, new complexities surface. The challenges of maintaining consistency and scalability are often underestimated. The conventional perspective on a design system oversimplifies the connection between the design system and the product or products it impacts. The digital product landscape has evolved significantly and as organizations scale, the complexity of design systems increases. + +### Consistency and Standardization + +The significance of maintaining consistency within user interfaces cannot be overstated. This involves adhering to a set of design principles and visual elements to ensure a cohesive and intuitive user experience. Additionally, standardizing components is essential for achieving a unified look and feel across different aspects of a product or platform. + +### Collaboration and Communication + +Efficient collaboration and communication between design and development teams are crucial for successful product implementations. Bridging the gap between these disciplines enhances understanding, fostering a streamlined development process. + +### Scalability and Efficiency + +Design systems serve as powerful tools for scalability in product development. Implementing efficient design systems streamlines workflows, saving time and resources. Balancing the challenge of scaling design systems to meet a growing organization's needs is critical for long-term success. Successful design systems deliberately move at a slower pace than the products they support, acknowledging that quality cannot be rushed. Build only what is needed and avoid complexity for the sake of complexity. While products often prioritize speed to meet business goals, design systems, as critical infrastructure, require a more deliberate and thoughtful approach to design and technical aspects. + + - [Ship faster by building design systems slower](https://bigmedium.com/ideas/design-system-pace-layers-slow-fast.html) + +### Unpacking Complexity + +Navigating these intricate challenges, organizations witness the expansion of design systems' responsibilities, tooling matures, processes and organizational structures evolve. A design system ecosystem can become a complex web of dependencies within a modern organization. + +## 3. The Layer Cake Approach + +The layer cake approach is a more accurate representation of the relationship between design systems and products. The design system ecosystem is a complex web of dependencies within a modern organization. Unpacking the layers of this ecosystem is essential for understanding the intricacies of design systems. + + - [The design system ecosystem](https://bigmedium.com/ideas/design-system-ecosystem.html) + + - Core Design System: + At the foundation lies the core design system—a comprehensive set of design principles, guidelines, and components. This serves as the bedrock, providing a standardized framework for the entire organization. + + - Technology-Specific Implementation: + Building on the core, this layer involves the translation of design principles into technology-specific implementations. It encompasses the adaptation of design components to fit the technological landscape, ensuring seamless integration. + + - Recipes: + Recipes represent predefined solutions or patterns that encapsulate best practices. These are ready-made solutions derived from the core design system, offering efficiency and consistency in design and development. + + - Smart Components: + Smart components are dynamic elements that intelligently adapt to different contexts within products. They leverage the design system's principles and technology-specific implementations to enhance flexibility and responsiveness. + + - Product: + At the top layer sits the product—the tangible manifestation of the design system in action. Products draw from the layers below, incorporating design principles, technology-specific implementations, recipes, and smart components. + +It's crucial to note that these layers are not universally applicable to every organization. Instead, this visual representation illustrates a mature enterprise design system, influenced by real-world experiences with some of the world's largest companies. Each layer adds depth, and organizations may find value in implementing only a fraction of the depicted layers. Flexibility is key, allowing organizations to tailor their design system to their specific needs and growth trajectories. + +## 4. Looking Ahead to a global Design System + +| A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential. - Brad Frost, [A Global Design System](https://bradfrost.com/blog/post/a-global-design-system/) +Addressing the existing problem of incompatible design systems, a global design system is proposed as a solution. The aim is to improve the quality and accessibility of web experiences, save time for designers and developers, and harness collective human potential. The proposal involves creating an open-source system governed by a community of designers and developers, emphasizing collaboration on a global scale. + +### The Problem + +Despite the widespread adoption of design systems, compatibility issues persist, creating friction for designers and developers. The proposal advocates for the creation of a global design system to enhance the quality, accessibility, and usability of web experiences. + +### The Proposal + +Advocating for a united effort to create a global design system, the proposal suggests making the system open source and governed by a community of designers and developers. The goal is to dramatically improve the quality and accessibility of web experiences, showcasing the potential of worldwide collaboration. + +- Centralize common UI components +- Layer on top of HTML +- Accessible and front-end best practices baked in +- Unstyled and easily themeable +- Intuitive and easy to use +- Interoperable with other systems +- Internationalized and localized +- Composable and extensible + +#### Where + +Establishing the infrastructure for the global design system involves elements such as a code repository, code packages, a design library, and comprehensive documentation on a reference site. + +#### How + +The process of building a global design system includes initiating conversations, forming a working group, conducting research, planning the implementation, designing and building, releasing, iterating based on feedback, governing the system, and maintaining support for integration into the HTML specification. + +#### Who + +The initiative is open for contributions from individuals and is not owned by a specific company or organization. It is sponsored by various entities and supported by the community, including organizations like [Open UI](https://open-ui.org/), [W3C](https://www.w3.org/), and the [Design Tokens Community Group](https://tr.designtokens.org/). + +## 5. Conclusion + +Design systems are powerful tools for achieving consistency and scalability in product development. As organizations grow, the complexities of design systems increase, and the challenges of maintaining consistency and scalability are often underestimated. The layer cake approach provides a more accurate representation of the relationship between design systems and products, illustrating the intricate web of dependencies within a modern organization. A good baseline is to start with a solid foundation, using the layer cake approach, and scaling a design system as an organization grows. Start small and only add in complexity when needed. The proposal for a global design system aims to address the existing problem of incompatible design systems, advocating for a united effort to create a global design system. The goal is to dramatically improve the quality and accessibility of web experiences, showcasing the potential of worldwide collaboration. \ No newline at end of file From 251260204a1657f14be9ec908bf650e2f4aab534 Mon Sep 17 00:00:00 2001 From: Alex Patterson Date: Thu, 8 Feb 2024 15:12:38 -0500 Subject: [PATCH 07/16] wait for devto to finish before hashnode starts --- .github/workflows/syndicate.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/syndicate.yml b/.github/workflows/syndicate.yml index 7855b6681..fad60862e 100644 --- a/.github/workflows/syndicate.yml +++ b/.github/workflows/syndicate.yml @@ -53,6 +53,7 @@ jobs: commit_message: dev-devto updates branch: dev hashnode: + needs: dev-to environment: main runs-on: ubuntu-latest steps: From 3871375b1a61c623090cac0d1d2472d975cc91a1 Mon Sep 17 00:00:00 2001 From: Alex Patterson Date: Thu, 8 Feb 2024 19:50:44 -0500 Subject: [PATCH 08/16] update devto for starlight post --- .../cwcc-1-building-docs-with-starlight-and-astro/+page.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-building-docs-with-starlight-and-astro/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-building-docs-with-starlight-and-astro/+page.md index 3bf066aaf..e88e0f591 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-building-docs-with-starlight-and-astro/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-building-docs-with-starlight-and-astro/+page.md @@ -11,7 +11,7 @@ chapters_done: false cloudinary_convert: false cover: >- https://media.codingcat.dev/image/upload/v1707261042/main-codingcatdev-photo/2024-2-07-starlight.png -devto: null +devto: https://dev.to/codingcatdev/building-docs-with-starlight-and-astro-310d excerpt: Chris teaches Alex how to use Starlight for docs. guests: - chris-swithinbank From 51004db452e590ee5fcb49d4eeaddf220413e1d6 Mon Sep 17 00:00:00 2001 From: codercatdev Date: Tue, 13 Feb 2024 22:30:55 +0000 Subject: [PATCH 09/16] main-devto updates --- .../+page.md | 46 +++++++++---------- 1 file changed, 21 insertions(+), 25 deletions(-) diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-6-supabase-release-week-x-new-features/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-6-supabase-release-week-x-new-features/+page.md index 3a5653527..7e7eb1d8a 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-6-supabase-release-week-x-new-features/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-6-supabase-release-week-x-new-features/+page.md @@ -3,43 +3,39 @@ type: podcast authors: - alex-patterson episode: 6 -recording_date: Dec 19, 2023 5:00 PM +recording_date: 'Dec 19, 2023 5:00 PM' season: 4 published: published podcast: CodingCat.dev chapters_done: false cloudinary_convert: false -cover: https://media.codingcat.dev/image/upload/v1707860877/main-codingcatdev-photo/4-supabase-release-week-x.png -devto: -excerpt: Supabase dropped a lot of new features during their X launch, I review these with Jon. +cover: >- + https://media.codingcat.dev/image/upload/v1707860877/main-codingcatdev-photo/4-supabase-release-week-x.png +devto: 'https://dev.to/codingcatdev/supabase-new-release-33fe' +excerpt: >- + Supabase dropped a lot of new features during their X launch, I review these + with Jon. guests: - jon-meyers -hashnode: +hashnode: null picks: - [ - { - author: 'jon-meyers', - name: 'Little Bits Synth Kit', - site: 'https://reverb.com/p/korg-little-bits-synth-kit' - }, - { - author: 'alex-patterson', - name: 'Roll Your Own SaaS with Vue, Algolia, and Cloudinary', - site: 'https://codingcat.dev/podcast/cwcc-2023-12-20-building-your-own-sass' - }, - { - author: 'alex-patterson', - name: 'CodingCat.dev on Apple Podcast', - site: 'https://podcasts.apple.com/us/podcast/codingcat-dev-podcast/id1491655542' - } - ] + - author: jon-meyers + name: Little Bits Synth Kit + site: 'https://reverb.com/p/korg-little-bits-synth-kit' + - author: alex-patterson + name: 'Roll Your Own SaaS with Vue, Algolia, and Cloudinary' + site: 'https://codingcat.dev/podcast/cwcc-2023-12-20-building-your-own-sass' + - author: alex-patterson + name: CodingCat.dev on Apple Podcast + site: 'https://podcasts.apple.com/us/podcast/codingcat-dev-podcast/id1491655542' slug: 4-6-supabase-release-week-x-new-features sponsors: - cloudinary -spotify: https://open.spotify.com/episode/4FchOc10UBalWYNoR9tdwK?si=QnsbrwA_ROKWRmc5CRlkFQ -start: Feb 13, 2024 +spotify: >- + https://open.spotify.com/episode/4FchOc10UBalWYNoR9tdwK?si=QnsbrwA_ROKWRmc5CRlkFQ +start: 'Feb 13, 2024' title: Supabase New Release -youtube: https://youtu.be/Ym8YqeDJE5g +youtube: 'https://youtu.be/Ym8YqeDJE5g' --- **Top 10 Launches** From 1ca29ed74f90d57c6e95ffa8565523d33e4d16b4 Mon Sep 17 00:00:00 2001 From: codercatdev Date: Tue, 13 Feb 2024 22:32:52 +0000 Subject: [PATCH 10/16] main-devto updates --- .../podcast/4-6-supabase-release-week-x-new-features/+page.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-6-supabase-release-week-x-new-features/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-6-supabase-release-week-x-new-features/+page.md index 7e7eb1d8a..e60dbfbc3 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-6-supabase-release-week-x-new-features/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-6-supabase-release-week-x-new-features/+page.md @@ -17,7 +17,7 @@ excerpt: >- with Jon. guests: - jon-meyers -hashnode: null +hashnode: podcast-4-6-supabase-release-week-x-new-features-1 picks: - author: jon-meyers name: Little Bits Synth Kit From 261a5d3645296a4d43a0057954a64506a515e6fc Mon Sep 17 00:00:00 2001 From: codercatdev Date: Wed, 21 Feb 2024 19:16:54 +0000 Subject: [PATCH 11/16] main-devto updates --- .../+page.md | 39 +++++++++++-------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md index 9749de837..7a2938716 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md @@ -3,35 +3,40 @@ type: podcast authors: - alex-patterson episode: 7 -recording_date: Dec 29, 2023 2:00 PM +recording_date: 'Dec 29, 2023 2:00 PM' season: 4 published: published podcast: CodingCat.dev chapters_done: false cloudinary_convert: false -cover: https://media.codingcat.dev/image/upload/v1702529964/main-codingcatdev-photo/4_LocalStack.png -devto: -excerpt: 'Effortlessly Develop AWS Applications Offline with LocalStack: Your Ultimate Guide!' +cover: >- + https://media.codingcat.dev/image/upload/v1702529964/main-codingcatdev-photo/4_LocalStack.png +devto: >- + https://dev.to/codingcatdev/master-offline-aws-development-harness-the-power-of-localstack-50cn +excerpt: >- + Effortlessly Develop AWS Applications Offline with LocalStack: Your Ultimate + Guide! guests: - waldemar-hummer -hashnode: +hashnode: null picks: - [ - { author: 'waldemar-hummer', name: 'SuikaGame', site: 'https://suikagame.com/' }, - { author: 'alex-patterson', name: 'Kaiber', site: 'https://kaiber.ai/' }, - { - author: 'alex-patterson', - name: 'CodingCat.dev Holiday Songs', - site: 'https://www.youtube.com/watch?v=HBzX8cDbxns' - } - ] + - author: waldemar-hummer + name: SuikaGame + site: 'https://suikagame.com/' + - author: alex-patterson + name: Kaiber + site: 'https://kaiber.ai/' + - author: alex-patterson + name: CodingCat.dev Holiday Songs + site: 'https://www.youtube.com/watch?v=HBzX8cDbxns' slug: 4-7-harness-the-power-of-localstack sponsors: - cloudinary -spotify: https://open.spotify.com/episode/7C44Xjrx6mRR1ZOo6vq4gl?si=Pz7fsA7xTjyTgzRXM1ylUw -start: Feb 20, 2024 +spotify: >- + https://open.spotify.com/episode/7C44Xjrx6mRR1ZOo6vq4gl?si=Pz7fsA7xTjyTgzRXM1ylUw +start: 'Feb 20, 2024' title: 'Master Offline AWS Development: Harness the Power of LocalStack!' -youtube: https://youtu.be/2AWmuA7ADNI +youtube: 'https://youtu.be/2AWmuA7ADNI' --- LocalStack provides a comprehensive platform for developing and testing AWS applications locally, offering a significant reduction in development time and AWS costs. It emulates over 80 AWS services, allowing developers to work efficiently without internet access or AWS cloud resources. The tool is designed for seamless integration into existing workflows, supporting favorite cloud development tools and enabling faster deployment and testing. It's widely appreciated in the developer community for enhancing productivity and simplifying cloud application development. For more detailed information, please visit [LocalStack's website](https://www.localstack.cloud/). From a1aa19d3f13adcb8797fc0e6f16888b925fbebdf Mon Sep 17 00:00:00 2001 From: codercatdev Date: Wed, 21 Feb 2024 19:18:51 +0000 Subject: [PATCH 12/16] main-devto updates --- .../podcast/4-7-harness-the-power-of-localstack/+page.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md index 7a2938716..2ac1a9c89 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md @@ -18,7 +18,7 @@ excerpt: >- Guide! guests: - waldemar-hummer -hashnode: null +hashnode: podcast-4-7-harness-the-power-of-localstack-1 picks: - author: waldemar-hummer name: SuikaGame From bc093347ab83e972cb7004c8238c3be30f9f5faa Mon Sep 17 00:00:00 2001 From: Alex Patterson Date: Wed, 21 Feb 2024 14:38:30 -0500 Subject: [PATCH 13/16] add localstack slide images --- .../+page.md | 73 ++++--------------- 1 file changed, 15 insertions(+), 58 deletions(-) diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md index 9749de837..c24dc91db 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md @@ -36,61 +36,18 @@ youtube: https://youtu.be/2AWmuA7ADNI LocalStack provides a comprehensive platform for developing and testing AWS applications locally, offering a significant reduction in development time and AWS costs. It emulates over 80 AWS services, allowing developers to work efficiently without internet access or AWS cloud resources. The tool is designed for seamless integration into existing workflows, supporting favorite cloud development tools and enabling faster deployment and testing. It's widely appreciated in the developer community for enhancing productivity and simplifying cloud application development. For more detailed information, please visit [LocalStack's website](https://www.localstack.cloud/). -![](https://media.codingcat.dev/image/upload/v1703881364/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_19.png) - -## Introduction - -- Brief overview of cloud computing and AWS. -- Introduction to LocalStack. -- Importance of local development environments. - -## Section 1: Understanding LocalStack - -- Detailed explanation of LocalStack. -- Overview of the AWS services it emulates. -- The technology behind LocalStack. - -## Section 2: Benefits of Using LocalStack - -- Cost savings by reducing reliance on actual AWS services. -- Improved development efficiency by allowing offline work. -- Examples of scenarios where LocalStack is particularly beneficial. - -## Section 3: Integration and Compatibility - -- How LocalStack integrates into existing development workflows. -- Compatibility with popular cloud development tools. -- Step-by-step guide to setting up LocalStack in a typical development environment. - -## Section 4: LocalStack in Action - -- Case studies or examples of projects using LocalStack. -- Testimonials from developers or companies. -- Comparison with other local AWS emulation tools. - -## Section 5: Challenges and Limitations - -- Discussion of any limitations or challenges in using LocalStack. -- How the developer community is addressing these challenges. - -## Section 6: LocalStack’s Role in Enhancing Productivity - -- Analysis of how LocalStack improves development productivity. -- Insights from industry experts or surveys. -- Future predictions for tools like LocalStack in cloud development. - -## Section 7: Community and Support - -- Overview of the LocalStack community. -- Resources available for new users. -- How to contribute to the LocalStack project. - -## Conclusion - -- Recap of the key points. -- Final thoughts on the future of LocalStack and its impact on cloud development. - -## Additional Resources - -- Links to LocalStack documentation, forums, and user guides. -- Related readings or courses for interested readers. +![Demo Slide](https://media.codingcat.dev/image/upload/v1703881358/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_1.png) +![Context](https://media.codingcat.dev/image/upload/v1703881359/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_2.png) +![1000 foot view of localstack](https://media.codingcat.dev/image/upload/v1703881359/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_3.png) +![comparison localstack to aws](https://media.codingcat.dev/image/upload/v1703881360/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_4.png) +![growing ecosystem of integrations](https://media.codingcat.dev/image/upload/v1703881360/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_5.png) +![s3 bucket notifications](https://media.codingcat.dev/image/upload/v1703881359/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_6.png) +![web app](https://media.codingcat.dev/image/upload/v1703881361/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_7.png) +![cloud pods](https://media.codingcat.dev/image/upload/v1703881361/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_8.png) +![iam live policy generation](https://media.codingcat.dev/image/upload/v1703881362/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_9.png) +![fault injection and simulation](https://media.codingcat.dev/image/upload/v1703881362/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_10.png) +![localstack extensions](https://media.codingcat.dev/image/upload/v1703881362/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_11.png) +![stack insights](https://media.codingcat.dev/image/upload/v1703881363/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_12.png) +![debugging your ci builds](https://media.codingcat.dev/image/upload/v1703881363/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_13.png) +![previews / ephemeral instances](https://media.codingcat.dev/image/upload/v1703881364/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_14.png) +![our story](https://media.codingcat.dev/image/upload/v1703881364/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_19.png) From 2b40b959d3f90b2705d9ce9ca67eb60801b3d69e Mon Sep 17 00:00:00 2001 From: Alex Patterson Date: Wed, 21 Feb 2024 14:40:06 -0500 Subject: [PATCH 14/16] space images --- .../4-7-harness-the-power-of-localstack/+page.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md index 6c0592dbf..6ade7c6ab 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-7-harness-the-power-of-localstack/+page.md @@ -42,17 +42,31 @@ youtube: 'https://youtu.be/2AWmuA7ADNI' LocalStack provides a comprehensive platform for developing and testing AWS applications locally, offering a significant reduction in development time and AWS costs. It emulates over 80 AWS services, allowing developers to work efficiently without internet access or AWS cloud resources. The tool is designed for seamless integration into existing workflows, supporting favorite cloud development tools and enabling faster deployment and testing. It's widely appreciated in the developer community for enhancing productivity and simplifying cloud application development. For more detailed information, please visit [LocalStack's website](https://www.localstack.cloud/). ![Demo Slide](https://media.codingcat.dev/image/upload/v1703881358/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_1.png) + ![Context](https://media.codingcat.dev/image/upload/v1703881359/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_2.png) + ![1000 foot view of localstack](https://media.codingcat.dev/image/upload/v1703881359/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_3.png) + ![comparison localstack to aws](https://media.codingcat.dev/image/upload/v1703881360/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_4.png) + ![growing ecosystem of integrations](https://media.codingcat.dev/image/upload/v1703881360/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_5.png) + ![s3 bucket notifications](https://media.codingcat.dev/image/upload/v1703881359/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_6.png) + ![web app](https://media.codingcat.dev/image/upload/v1703881361/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_7.png) + ![cloud pods](https://media.codingcat.dev/image/upload/v1703881361/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_8.png) + ![iam live policy generation](https://media.codingcat.dev/image/upload/v1703881362/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_9.png) + ![fault injection and simulation](https://media.codingcat.dev/image/upload/v1703881362/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_10.png) + ![localstack extensions](https://media.codingcat.dev/image/upload/v1703881362/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_11.png) + ![stack insights](https://media.codingcat.dev/image/upload/v1703881363/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_12.png) + ![debugging your ci builds](https://media.codingcat.dev/image/upload/v1703881363/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_13.png) + ![previews / ephemeral instances](https://media.codingcat.dev/image/upload/v1703881364/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_14.png) + ![our story](https://media.codingcat.dev/image/upload/v1703881364/main-codingcatdev-photo/1703881295934-4625cb52-38c9-4efb-a96e-2c020774be72_19.png) From 2f8d02fa4fba5c59d310bedf3e6f72d773c461d3 Mon Sep 17 00:00:00 2001 From: Alex Patterson Date: Wed, 21 Feb 2024 15:00:16 -0500 Subject: [PATCH 15/16] update github links --- .../podcast/cwcc-1-2-meltui/+page.md | 6 +- .../cwcc-1-3-svelte-view-transitions/+page.md | 75 ++++++++++++++++++- .../+page.md | 6 ++ 3 files changed, 83 insertions(+), 4 deletions(-) diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-2-meltui/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-2-meltui/+page.md index 8184946ae..7d235be5f 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-2-meltui/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-2-meltui/+page.md @@ -27,7 +27,11 @@ title: 'Open Source Svelte Magic: Melting Minds through Melt UI!' youtube: 'https://youtube.com/live/Crlo-Qfu6qs?feature=share' --- -[GitHub Repo of Example](https://github.com/CodingCatDev/code-with-codingcat-meltui) + + + Melt UI is an open-source collection of component builders designed for creating user interfaces with the Svelte framework. It stands out for its accessibility and customization features, enabling developers to build user interfaces that are both accessible and uniquely styled. Here are some key aspects of Melt UI: diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-3-svelte-view-transitions/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-3-svelte-view-transitions/+page.md index 4b2855979..ab9b7e2f3 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-3-svelte-view-transitions/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-3-svelte-view-transitions/+page.md @@ -28,8 +28,77 @@ title: Simplyfing SvelteKit View Transitions with Paolo Ricciuti youtube: 'https://youtube.com/live/A6WwrGFMQio?feature=share' --- -# View Transitions + -Repo: https://github.com/CodingCatDev/svelte-view-transitions-pokemon + -Library: https://github.com/paoloricciuti/sveltekit-view-transition +**SvelteKit View Transitions: A Guide to Enhancing User Experience** + +[SvelteKit View transitions](https://github.com/paoloricciuti/sveltekit-view-transition) are a powerful tool that can be used to improve the user experience of your SvelteKit applications. They can make your app feel more polished and professional, and they can also help to guide users through your app's content. + +This blog post will discuss what view transitions are, how they can be used, and how to set up and use the sveltekit-view-transition library. + +**What are view transitions?** + +View transitions are animations that occur when a user navigates between different views in your app. They can be simple fades or more complex animations that involve multiple elements. + +**Why use view transitions?** + +There are several reasons why you might want to use view transitions in your SvelteKit app: + +- **Improve the user experience:** View transitions can make your app feel more polished and professional. They can also help to guide users through your app's content by making it clear when a new view is loading. +- **Reduce perceived load times:** By using view transitions, you can mask the loading time of new views, making your app feel faster and more responsive. +- **Create a more engaging experience:** View transitions can add a touch of personality to your app and make it more engaging for users. + +**How to use view transitions in SvelteKit** + +There are two main ways to use view transitions in SvelteKit: + +1. **Using the sveltekit-view-transition library:** The sveltekit-view-transition library is a popular library that makes it easy to add view transitions to your SvelteKit app. The library provides a number of pre-built transitions, and you can also create your own custom transitions. +2. **Using Svelte's built-in transition API:** Svelte also has a built-in transition API that you can use to create view transitions. The transition API is more flexible than the sveltekit-view-transition library, but it also requires more code. + +**Setting up the sveltekit-view-transition library** + +To set up the sveltekit-view-transition library, you can add the following to your `package.json` file: + +```json +"dependencies": { + "sveltekit-view-transition": "^1.0.0" +} +``` + +Once you have installed the library, you can import it into your `app.js` file: + +```javascript +import ViewTransition from 'sveltekit-view-transition'; + +export default { + extensions: [ViewTransition] +}; +``` + +**Using view transitions in your components** + +You can use view transitions in your Svelte components by using the `` component. The `` component takes a number of props, including: + +- `mode`: The type of transition to use. The sveltekit-view-transition library provides a number of pre-built transitions, such as `fade`, `slide`, and `zoom`. +- `duration`: The duration of the transition in milliseconds. +- `easing`: The easing function to use for the transition. + +Here is an example of how to use the `` component: + +```html + + + +``` + +This code will fade in the `MyComponent` component when it is mounted. + +**Conclusion** + +View transitions can be a powerful tool for improving the user experience of your SvelteKit applications. By using view transitions, you can make your app feel more polished, professional, and engaging. + +I hope this blog post has given you a good introduction to view transitions in SvelteKit. If you have any questions, please feel free to leave a comment below. diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-building-docs-with-starlight-and-astro/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-building-docs-with-starlight-and-astro/+page.md index e88e0f591..2c79a57bb 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-building-docs-with-starlight-and-astro/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/cwcc-1-building-docs-with-starlight-and-astro/+page.md @@ -25,6 +25,12 @@ title: Building docs with Starlight and Astro youtube: 'https://youtube.com/live/sF6UcV3moZg?feature=share' --- + + + + Starlight, a documentation theme from [Astro](https://astro.build/), simplifies creating accessible, high-performance websites. Key features include: 1. **Content Support**: Starlight is compatible with Markdown, MDX, or Markdoc formats, facilitating quick website creation. From 6873e9a6967f3b89deaceab6f2c3267277afd055 Mon Sep 17 00:00:00 2001 From: Alex Patterson Date: Fri, 1 Mar 2024 12:42:29 -0500 Subject: [PATCH 16/16] brad frost podcast updats --- .../+page.md | 47 +++++++++++-------- 1 file changed, 27 insertions(+), 20 deletions(-) rename apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/{_design-systems => 4-8-design-systems-brad-frost}/+page.md (80%) diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-systems/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-8-design-systems-brad-frost/+page.md similarity index 80% rename from apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-systems/+page.md rename to apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-8-design-systems-brad-frost/+page.md index 5a7ad2579..793979472 100644 --- a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/_design-systems/+page.md +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/4-8-design-systems-brad-frost/+page.md @@ -2,9 +2,10 @@ type: podcast authors: - alex-patterson -episode: + - brittney-postma +episode: 8 recording_date: Jan 10, 2024 9:00 AM -season: 3 +season: 4 published: published podcast: CodingCat.dev chapters_done: false @@ -18,18 +19,24 @@ hashnode: picks: [ { author: 'brad-frost', name: 'Frostapalooza', site: 'https://frostapalooza.bradfrost.com/' }, - { author: 'alex-patterson', name: 'Aquaman and the Lost Kingdom', site: 'https://www.imdb.com/title/tt9663764/' }, { - author: 'brittney-postma', name: 'Repo of awesome design systems', site: 'https://github.com/alexpate/awesome-design-systems' + author: 'alex-patterson', + name: 'Aquaman and the Lost Kingdom', + site: 'https://www.imdb.com/title/tt9663764/' + }, + { + author: 'brittney-postma', + name: 'Repo of awesome design systems', + site: 'https://github.com/alexpate/awesome-design-systems' } ] -slug: _design-systems +slug: 4-8-design-systems-brad-frost sponsors: - - storyblok -spotify: + - cloudinary +spotify: https://open.spotify.com/episode/7jbeqkUHJsKGdNJIqSpEXE?si=VheIc2fOQMWT-ldoo0Gvrg start: Jan 1, 2024 title: 'Design Systems: From Atomic Design to a Global Solution' -youtube: +youtube: https://youtu.be/WiryDTsHDec --- In the fast-paced world of design, creating a seamless and efficient user experience is crucial. Design systems have emerged as a powerful solution, marrying art and science to ensure consistency and cohesiveness. In this episode, we explore the complexities of successful design systems and how they bridge the gap between product and consistency. @@ -40,7 +47,7 @@ In the fast-paced world of design, creating a seamless and efficient user experi ## 2. Design System Complexities -As organizations grasp the importance of design systems, new complexities surface. The challenges of maintaining consistency and scalability are often underestimated. The conventional perspective on a design system oversimplifies the connection between the design system and the product or products it impacts. The digital product landscape has evolved significantly and as organizations scale, the complexity of design systems increases. +As organizations grasp the importance of design systems, new complexities surface. The challenges of maintaining consistency and scalability are often underestimated. The conventional perspective on a design system oversimplifies the connection between the design system and the product or products it impacts. The digital product landscape has evolved significantly and as organizations scale, the complexity of design systems increases. ### Consistency and Standardization @@ -52,40 +59,40 @@ Efficient collaboration and communication between design and development teams a ### Scalability and Efficiency -Design systems serve as powerful tools for scalability in product development. Implementing efficient design systems streamlines workflows, saving time and resources. Balancing the challenge of scaling design systems to meet a growing organization's needs is critical for long-term success. Successful design systems deliberately move at a slower pace than the products they support, acknowledging that quality cannot be rushed. Build only what is needed and avoid complexity for the sake of complexity. While products often prioritize speed to meet business goals, design systems, as critical infrastructure, require a more deliberate and thoughtful approach to design and technical aspects. +Design systems serve as powerful tools for scalability in product development. Implementing efficient design systems streamlines workflows, saving time and resources. Balancing the challenge of scaling design systems to meet a growing organization's needs is critical for long-term success. Successful design systems deliberately move at a slower pace than the products they support, acknowledging that quality cannot be rushed. Build only what is needed and avoid complexity for the sake of complexity. While products often prioritize speed to meet business goals, design systems, as critical infrastructure, require a more deliberate and thoughtful approach to design and technical aspects. - - [Ship faster by building design systems slower](https://bigmedium.com/ideas/design-system-pace-layers-slow-fast.html) +- [Ship faster by building design systems slower](https://bigmedium.com/ideas/design-system-pace-layers-slow-fast.html) ### Unpacking Complexity -Navigating these intricate challenges, organizations witness the expansion of design systems' responsibilities, tooling matures, processes and organizational structures evolve. A design system ecosystem can become a complex web of dependencies within a modern organization. +Navigating these intricate challenges, organizations witness the expansion of design systems' responsibilities, tooling matures, processes and organizational structures evolve. A design system ecosystem can become a complex web of dependencies within a modern organization. ## 3. The Layer Cake Approach The layer cake approach is a more accurate representation of the relationship between design systems and products. The design system ecosystem is a complex web of dependencies within a modern organization. Unpacking the layers of this ecosystem is essential for understanding the intricacies of design systems. - - [The design system ecosystem](https://bigmedium.com/ideas/design-system-ecosystem.html) +- [The design system ecosystem](https://bigmedium.com/ideas/design-system-ecosystem.html) - - Core Design System: + - Core Design System: At the foundation lies the core design system—a comprehensive set of design principles, guidelines, and components. This serves as the bedrock, providing a standardized framework for the entire organization. - - Technology-Specific Implementation: + - Technology-Specific Implementation: Building on the core, this layer involves the translation of design principles into technology-specific implementations. It encompasses the adaptation of design components to fit the technological landscape, ensuring seamless integration. - - Recipes: + - Recipes: Recipes represent predefined solutions or patterns that encapsulate best practices. These are ready-made solutions derived from the core design system, offering efficiency and consistency in design and development. - - Smart Components: + - Smart Components: Smart components are dynamic elements that intelligently adapt to different contexts within products. They leverage the design system's principles and technology-specific implementations to enhance flexibility and responsiveness. - - Product: + - Product: At the top layer sits the product—the tangible manifestation of the design system in action. Products draw from the layers below, incorporating design principles, technology-specific implementations, recipes, and smart components. It's crucial to note that these layers are not universally applicable to every organization. Instead, this visual representation illustrates a mature enterprise design system, influenced by real-world experiences with some of the world's largest companies. Each layer adds depth, and organizations may find value in implementing only a fraction of the depicted layers. Flexibility is key, allowing organizations to tailor their design system to their specific needs and growth trajectories. ## 4. Looking Ahead to a global Design System -| A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential. - Brad Frost, [A Global Design System](https://bradfrost.com/blog/post/a-global-design-system/) +A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential. - Brad Frost, [A Global Design System](https://bradfrost.com/blog/post/a-global-design-system/) Addressing the existing problem of incompatible design systems, a global design system is proposed as a solution. The aim is to improve the quality and accessibility of web experiences, save time for designers and developers, and harness collective human potential. The proposal involves creating an open-source system governed by a community of designers and developers, emphasizing collaboration on a global scale. ### The Problem @@ -119,4 +126,4 @@ The initiative is open for contributions from individuals and is not owned by a ## 5. Conclusion -Design systems are powerful tools for achieving consistency and scalability in product development. As organizations grow, the complexities of design systems increase, and the challenges of maintaining consistency and scalability are often underestimated. The layer cake approach provides a more accurate representation of the relationship between design systems and products, illustrating the intricate web of dependencies within a modern organization. A good baseline is to start with a solid foundation, using the layer cake approach, and scaling a design system as an organization grows. Start small and only add in complexity when needed. The proposal for a global design system aims to address the existing problem of incompatible design systems, advocating for a united effort to create a global design system. The goal is to dramatically improve the quality and accessibility of web experiences, showcasing the potential of worldwide collaboration. \ No newline at end of file +Design systems are powerful tools for achieving consistency and scalability in product development. As organizations grow, the complexities of design systems increase, and the challenges of maintaining consistency and scalability are often underestimated. The layer cake approach provides a more accurate representation of the relationship between design systems and products, illustrating the intricate web of dependencies within a modern organization. A good baseline is to start with a solid foundation, using the layer cake approach, and scaling a design system as an organization grows. Start small and only add in complexity when needed. The proposal for a global design system aims to address the existing problem of incompatible design systems, advocating for a united effort to create a global design system. The goal is to dramatically improve the quality and accessibility of web experiences, showcasing the potential of worldwide collaboration.