#design

Subscribe
Design is the process of creating a plan or solution to a problem. It involves breaking down a complex system into smaller components and then finding ways to combine those components in order to achieve a desired outcome. In the context of JavaScript, design is about understanding how to structure code in order to create a robust, efficient, and maintainable application. Designing for JavaScript requires an understanding of the language’s syntax, data structures, algorithms, and other core concepts. Additionally, it involves making decisions about how to organize code, utilize libraries and frameworks, and structure the application architecture.
AI + UX: Product Design for Intelligent Experiences
C3 Dev Festival 2024C3 Dev Festival 2024
28 min
AI + UX: Product Design for Intelligent Experiences
AI design challenges include bias, safety, and security. Trust and transparency are important in AI. Design principles for AI include user control, fighting bias, and promoting good decision-making. AI can enable the design process and investors expect to see it included in products. AI empowers individuals to create and share ideas, but managing expectations is crucial.
The Whimsical Potential of JavaScript Frameworks
React Summit US 2023React Summit US 2023
28 min
The Whimsical Potential of JavaScript Frameworks
Top Content
Watch video: The Whimsical Potential of JavaScript Frameworks
The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.
Make Real: tldraw's AI Adventure
React Advanced 2024React Advanced 2024
28 min
Make Real: tldraw's AI Adventure
Tealdraw is a canvas and a whiteboard SDK that can be integrated into React apps. It allows for high-performance rendering using the DOM and React. Tealdraw's canvas is powerful and can be enhanced with Vision models for image creation and AI utilization. It enables easy iteration and updating of designs based on annotations. Tealdraw can be used to create UIs, complex applications, interactive things, calculators, ASCII art, and more. It explores the use of AI on the canvas and can generate images, code, flowcharts, and content. Tealdraw focuses on performance optimization, AI model exploration, security, usability, and accessibility. The Talk also discusses the business model, future plans, and the vision of building a plugin community for the canvas.
Measuring Coverage of React Design System
React Summit US 2023React Summit US 2023
19 min
Measuring Coverage of React Design System
Watch video: Measuring Coverage of React Design System
The Talk discusses the majoring coverage of the Reduzon system and the journey of migrating from design-system-3.0 to design-system-4.0. It introduces React scanner, a tool that statically analyzes code and extracts React component and prop usage. The Talk explores the options and custom functions in React scanner, as well as the processors and AST used by the tool. It also discusses exploring AST using astexplorer.net and showcases the usage of react-scanner. Finally, it mentions the importance of component restructure and introduces Omelet, a tool for component analytics.
Defeat Decision Paralysis: Building a Killer Design System in Isolation
React Summit US 2023React Summit US 2023
12 min
Defeat Decision Paralysis: Building a Killer Design System in Isolation
Watch video: Defeat Decision Paralysis: Building a Killer Design System in Isolation
Defeating decision paralysis when building design systems by letting tools make some decisions. Using design tokens to express design decisions as data, including colors and typography. Alias colors to give them more specific names and define typography with a type scale. Use existing spacing scales and build components in isolation to test different states. Start with the basics, use existing tools, and have fun with it.
Figma to React With AI, Are We There Yet?
React Advanced 2023React Advanced 2023
21 min
Figma to React With AI, Are We There Yet?
Watch video: Figma to React With AI, Are We There Yet?
Today's Talk explores how AI can empower developers to write better React code and automate the process of converting Figma designs into code. It discusses the use of heuristics to convert Figma designs into working HTML code and the potential of AI in generating better CSS class names. The Talk also highlights the importance of generating code that follows team conventions and automating design and code updates. Finally, it emphasizes the benefits of using large language models to automate tasks and improve developer productivity.
The Secret to Good Game Iteration
JS GameDev Summit 2023JS GameDev Summit 2023
21 min
The Secret to Good Game Iteration
This talk explores game design, iteration, and prototyping, emphasizing the importance of playtesting with non-developers and smooth prototype testing. Observing playtesters carefully and gathering their feedback is crucial for understanding their thoughts and feelings. Playtesters are essential during the design process to ensure a cohesive and enjoyable game. The speaker shares a personal example of solving multiple problems with a single solution in the game Beast of Colchis. The talk concludes with a reminder to prototype, be nice to playtesters, and focus on making gameplay fun.
Domain Driven Design with Vue Applications
Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Top Content
Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
Proven Pinia Patterns
Vue.js London 2023Vue.js London 2023
20 min
Proven Pinia Patterns
Top Content
Pinnia is a lighter, more modular state management solution for Vue apps, offering consistent patterns, TypeScript support, and an intuitive developer experience. PINIA encourages splitting state into manageable domains, improving code splitting, type inferences, team collaboration, and debugging clarity. Pinia provides flexibility in accessing and mutating state, with different approaches for option and setup stores. It also offers features like patch, reset, and onAction methods. Vue Mastery offers comprehensive Pinnia courses and resources for fast learning.
Component Design Patterns
Vue.js London 2023Vue.js London 2023
18 min
Component Design Patterns
The Talk covers clean components and when to create new components, as well as patterns for writing cleaner components and the benefits of VIP patterns. Refactoring and separating code into separate components can make it shorter and easier to read, reducing complexity. The importance of not repeating oneself and the benefits of using smaller components for performance and developer experience are discussed. Composables can help extract logic in large and complex components, and patterns can be incorporated into component libraries and design systems.
Consistent UX at Scale: Lessons Learned When I Wore the DesignOps Hat
React Day Berlin 2022React Day Berlin 2022
31 min
Consistent UX at Scale: Lessons Learned When I Wore the DesignOps Hat
Today's Talk covers the challenges of implementing accessibility in design systems and the importance of using existing libraries. It also emphasizes the use of design tokens and code generation to ensure consistency across different code bases. The Talk explores automation, webhooks, and type safety in design systems, as well as the importance of measuring adoption and building accessibility. Finally, it suggests establishing a DesignOps team to encourage collaboration between designers and developers.
Building Figma’s Widget Code Generator
React Advanced 2022React Advanced 2022
19 min
Building Figma’s Widget Code Generator
This Talk introduces Figma's Widget Code Generator and demonstrates how to build a FigJam widget using it. The speaker discusses the implementation of voting functionality, avatar functionality, and remove vote functionality. They also explain how the Widget Code Generator plugin works and how to access properties and modify names using the Figma plugin API.
Panel Discussion: UX and the Design/Dev Overlap
React Advanced 2022React Advanced 2022
28 min
Panel Discussion: UX and the Design/Dev Overlap
Anjana Vakil
Maggie Appleton
Steve Ruiz
3 authors
The panel discusses the overlap between UX and developers, emphasizing the importance of collaboration and learning about design. The lack of decent developer and designer tooling is a big issue, and there is a need for a tool that bridges the gap between design and development. Understanding the promise and challenges of design systems and improving developer experiences requires a focus on UX and design as a discipline. Developers skilled in design can improve DX tooling, and getting involved in the design process and user testing is crucial. The language of React can help bridge the gap between developers and designers through conceptual modeling and object-oriented UX.
So You Want to be an Indie Game Developer?
JS GameDev Summit 2022JS GameDev Summit 2022
30 min
So You Want to be an Indie Game Developer?
This talk provides insights and advice for aspiring indie game developers. It emphasizes the importance of game design and marketing, as well as the need to stand out in a crowded market. The speaker shares their experience with YouTube and experimenting with startups. Starting as an indie game developer requires self-motivation and a focus on strengths. The talk also highlights the challenges and opportunities in the indie game development industry, and encourages support for Ukrainian game developers.
JSX for Designers
React Finland 2021React Finland 2021
21 min
JSX for Designers
Even today, with advanced tooling and frameworks, the gap between design and development still exists. This talk will examine how we can eliminate handoff between design and development teams using JSX as a shared source of truth across any platform.
Designing with Code in Mind
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
Designing with Code in Mind
Welcome to Designing with Coding Minds. Having a designer who codes in your team can help work faster and bridge the gap between developers and designers. Designers who can code can improve design systems and create components for design tools. GitHub is used at Elastic for collaboration between designers and developers. At Elastic, the code is prioritized over the final design, allowing the code to go live first.