168 - What is a design system?

How To Code Well

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