168 - What is a design system?

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 JavaScript arrays ➡️ Learn PHP arrays ➡️ Learn Python ✉️ Get my weekly newsletter ⏰ My current live coding schedule (Times are BST) Tuesdays 18:00 - Live coding on YouTube Sundays 15:00 - Live coding on Twitch