🧑🏾‍💻 prep

Decompose interfaces into components; recognise patterns

🔖
  1. Spaced Repetition
  2. What are Components?
  3. Understand SMART goals
  4. Backlog

Spaced Repetition

What are we doing now?

You’re going to use this prep time to answer some questions and schedule in times to review your understanding. In your planner or calendar, schedule a short (10 minute) review of your answers:

💡 tip

  • One week from today
  • One month from today
  • Three months from today
  • Six months from today
  • One year from today

Do this now. Then move forward to working through as many of these questions as you can. (You may not complete them all, and that is ok.)

Write down your answers first and then update them after looking at the sample answers, if it’s useful to do so. Use all available tools to help you answer, and remember:

the point is not to complete the exercises
the point is for you to secure your own understanding

Examples of tools you might use

What are components?

Learning Objectives

question

What are components?

A component is a reusable, self-contained piece of code. Components are like lego blocks you can build websites with. Most websites are made by “composing” components in this way.

But... practically speaking, what are components? Name at least five.

Examples of UI components: header, nav, hero, card, breadcrumbs, toast, chip, carousel, rating. There are so many more.

How am I going to remember all that?!

It clearly doesn’t make sense to try to memorise oodles of components in zillions of libraries. Instead, we should spend our time more wisely:

  • identifying common patterns
  • breaking down designs into these common patterns
  • finding and reading documentation so we can use components in any library or design system
Why do we build with components?

♻️ Re-use

Instead of writing out all the HTML and CSS each time, we can save our decision about how a card should work, or how a button should look, in a component and re-use it over and over. If we want to change the rules, we can change them in just one place, our component, instead of over many files or pages.

👩🏽‍👩🏽 Consistency

If we call a header component, we know that all our headers will match on our site, because they all use the same shared rules.

🍱 Composition

We can build bigger components out of smaller components and compose them onto pages to make views. This is how we build complicated interfaces quickly.

🚅 Efficiency

We can split up the tasks and work in parallel. One person can work on the button component, another on the card component. When a new developer joins the team, they can make changes to a limited part of the codebase, rather than having to understand the whole thing first.

How do we split up HTML and CSS into composable pieces?

So, we actually can’t yet, not really! We are only beginning our journey with components now. (If you are here from a scheduled review, update your answer.)

To compose pages from many small reusable pieces stored in separate files, we need a third programming language. We are going to learn JavaScript to help us do this. We could use other languages (this curriculum is written in Go), but we will start with JavaScript.

We will keep meeting this idea of small reusable pieces and composition throughout the course. Keep an eye out for it!

Prep for SMART Goals

Learning Objectives

Preparation

Have access to internet

Introduction

Setting SMART goals keeps the projects moving forward and helps with accountability and timing. It helps to break down goals and achieve them.

What are SMART goals?

🎯 Goal: Be able to explain what a SMART goal is (15 minutes)

Watch this video on SMART Goals and if needed make some notes.

Backlog

Learning Objectives

In software development, we break down complex projects into smaller, manageable parts, which we work on for a week or two. These periods are called “sprints.”

A sprint backlog is like a to-do list. It lists what the team has decided to work on this sprint. It’s chosen from a larger list, usually called the “product backlog,” which holds the entire project to-do list.

The backlog is a set of work designed to build understanding beyond the concepts introduced in the course prep. For your course, we have prepared a backlog of mandatory work for each sprint. You will copy these tasks into your own backlog. You can also add any other tickets you want to work on to your backlog, and schedule all of the tasks according to your own goals and capacity. Use your planning board to do this.

You will find the backlog in the Backlog view on every sprint.

Copy the tickets you are working on to your own backlog. Organise your tickets on your board and move them to the right column as you work through them. Here’s a flowchart showing the stages a ticket goes through:

flowchart LR Backlog --> Ready Ready --> in_progress in_progress[In Progress] --> in_review in_review[In Review] --> Done

activity

  1. Find the sprint backlog
  2. Copy your tickets to your own backlog
  3. Organise your tickets on your board