Gå offline med appen Player FM !
168 - What is a design system?
Manage episode 336718922 series 2674787
Changelog
- I've created a playground in the mono-repo for ReactJS experiments
- I have started working on a very lightweight design system
- I am giving a talk to PHP Minds next Thursday. The talk is called Code with Confidence with PHPCS
- PHP UK has announced their CFP and released early bird tickets. I have tickets.
- This weekend I am off to see England versus Scotland in the Common wealth boxing
News/Articles
How to call rest APIs using React
https://www.smashingmagazine.com/2020/06/rest-api-react-fetch-axios/
How to use the React Router to create an image link
https://bobbyhadz.com/blog/react-image-link
React higher order components
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
Concretely, a higher-order component is a function that takes a component and returns a new component.
https://reactjs.org/docs/higher-order-components.html
What is a Design system
- A collection of reusable components
- A place for collaboration amongst designers and developers
- A set of standards that must be adhered too
- A set of guidelines and principles that are relevant to the business
Not just a component library
A component library is a library of reusable components that other designers and developers can use.
A design system also sets out a series of rules and standards for the components and surrounding design. These include but are not limited to
- Typography
- Spacing
- Branding
- User experience
- Language
- Voice and tone
- Colours
- Patten
Often, a design system will explain what is allowed and what is not allowed.
Examples of design systems
- IBM https://carbondesignsystem.com/
- Shopify https://polaris.shopify.com/
- Material design https://material.io/design
- UK Gov https://design-system.service.gov.uk/
You can get in touch with me here: https://howtocodewell.fm/contact
My web development courses
➡️ Learn How to build a JavaScript Tip Calculator
➡️ Learn Python
⏰ My current live coding schedule (Times are BST)
Tuesdays 18:00 - Live coding on YouTube
Sundays 15:00 - Live coding on Twitch
203 episoder
Manage episode 336718922 series 2674787
Changelog
- I've created a playground in the mono-repo for ReactJS experiments
- I have started working on a very lightweight design system
- I am giving a talk to PHP Minds next Thursday. The talk is called Code with Confidence with PHPCS
- PHP UK has announced their CFP and released early bird tickets. I have tickets.
- This weekend I am off to see England versus Scotland in the Common wealth boxing
News/Articles
How to call rest APIs using React
https://www.smashingmagazine.com/2020/06/rest-api-react-fetch-axios/
How to use the React Router to create an image link
https://bobbyhadz.com/blog/react-image-link
React higher order components
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
Concretely, a higher-order component is a function that takes a component and returns a new component.
https://reactjs.org/docs/higher-order-components.html
What is a Design system
- A collection of reusable components
- A place for collaboration amongst designers and developers
- A set of standards that must be adhered too
- A set of guidelines and principles that are relevant to the business
Not just a component library
A component library is a library of reusable components that other designers and developers can use.
A design system also sets out a series of rules and standards for the components and surrounding design. These include but are not limited to
- Typography
- Spacing
- Branding
- User experience
- Language
- Voice and tone
- Colours
- Patten
Often, a design system will explain what is allowed and what is not allowed.
Examples of design systems
- IBM https://carbondesignsystem.com/
- Shopify https://polaris.shopify.com/
- Material design https://material.io/design
- UK Gov https://design-system.service.gov.uk/
You can get in touch with me here: https://howtocodewell.fm/contact
My web development courses
➡️ Learn How to build a JavaScript Tip Calculator
➡️ Learn Python
⏰ My current live coding schedule (Times are BST)
Tuesdays 18:00 - Live coding on YouTube
Sundays 15:00 - Live coding on Twitch
203 episoder
Усі епізоди
×Välkommen till Player FM
Player FM scannar webben för högkvalitativa podcasts för dig att njuta av nu direkt. Den är den bästa podcast-appen och den fungerar med Android, Iphone och webben. Bli medlem för att synka prenumerationer mellan enheter.