How To Code Well

168 - What is a design system?

Listen Later

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

          ...more
          View all episodesView all episodes
          Download on the App Store
          How To Code WellBy Peter Fisher
          • 5
          • 5
          • 5
          • 5
          • 5

          5

          11 ratings