👣 Steps

If you haven’t done so already, choose someone (volunteer or trainee) to be the facilitator for this morning orientation block. Choose another to be the timekeeper.

Activity

In your professional life, you will often be asked to introduce yourself. It is a good idea to have an elevator pitch ready, a brief (30 seconds) way of introducing yourself, getting across a key point or two, and making a connection with someone.

Today we will be going around the room and introducing ourselves! `

Facilitator(s) start by sharing your elevator pitch and then popcorn around the room.

Inspector Gadget

Prep

For this workshop you will need:

• Chrome with Devtools
• This Devtools Workshop page
• Someone to keep track of the timer for each activity

You’ve already used a little bit of Devtools in ITD when you used Lighthouse to audit your code. But there’s much much more! Devtools is an entire IDE (Integrated Development Environment) running inside your browser and it has hundreds of ways to inspect, test, and develop your code.

Inspect the DOM

• Inspect the DOM
• Identify the values of design tokens in the CSS
• Alter the values of the CSS Variables using DevTools

So we’ve seen that fonts, colours, and spacing are often stored as CSS Variables, or custom properties. This allows them to be easily changed throughout a project by simply altering one value. Let’s experiment with this.

Grid Inspector

• Select the Grid Badge in the Elements panel
• Use the Grid Editor to change layout

Next, let’s see how the page layout is handled. Modern websites use the CSS Grid for layout and you can manipulate grids with Devtools.

Lighthouse

• Run a Lighthouse audit
• Identify and resolve the reported issues

It’s important that software works and that people can use it. Lighthouse can help you write code correctly by pointing out your errors. But even better, it can teach you to fix the errors.

Hover for more

• Find the MDN docs links in the Styles panel

In fact Devtools is a great teacher. In the Styles panel, hover over any CSS property to get a quick definition of that property. Click ‘Learn More’ to go straight to the MDN page for that property.

If the explanation doesn’t make sense to you, have a discussion within your group and experiment changing it to figure out what it means.

Reflect

Many ways of examining the same thing

• Find a different API using the same code
• Inspect the Accessibility Tree and compare it to the DOM

So we’ve explored the Elements panel, the Styles panel, and the Lighthouse panel. There are many many more panels, and they all expose a different way of interpreting, interacting with, or understanding the same code. Computer systems frequently do this. It’s a mistake to think that the way you use a website is the only way it can be used. Bots, crawlers, screen-readers, integrations… there are many and various consumers of your code, so it’s important to make sure you construct it properly.

For example, you have just looked in the Elements panel. This is not really your HTML, this is the DOM, an API the browser builds using your HTML. An example of how the DOM is different from HTML is that JavaScript can change what’s in the page - this changes the DOM, but doesn’t change the actual HTML. The DOM isn’t the only API it builds. Let’s look at another one right now!

Reflect

And that’s it for today! We have covered a lot, but remember, as developers, we are lifelong learners. Always be curious and don’t be afraid to explore new tools and concepts. Soon we’ll dive even deeper into Devtools, so make sure to keep exploring.

More

1. Inspect web pages as you use the internet. Do this all the time! What font does YouTube use? What about CSS Tricks? Hackernews is still using tables - what’s wrong with this?

2. Try changing the style and content of some websites. Make your favourite website bright pink. Try adding a contenteditable attribute to an element and see what changes. Send a screenshot of something cool you changed to your cohort’s Slack channel.

3. There are crash courses in Devtools all over YouTube and Udemy. Find a useful tip and share it in your class channel.

A quick break so we can all concentrate on the next piece of work.

Open this Clean Code workshop presentation. Work through the whole thing together as a group.

The “Gilded Rose” Kata is not required to be done in class, but in SDC we recommend you try it on your own after class if you didn’t get to it.

For each “Better or worse?” question, every member of the class should move to one side of the room or the other to vote for which piece of code they prefer.

People who voted each way should share with the class why they prefer the code they voted for.

Every Saturday, we eat together. We share our food and our stories. We learn about each other and the world. We build community.

This is everyone’s responsibility, so let’s work together. These are the roles we need help with.

• Food shopping: ensure enough food is available for all courses running in your region, respecting the dietary requirements and the budget (you might not be the one buying the food, but you should ensure whoever buys or cooks the food knows what should be bought)
• Setting up the table: organise the food so that everyone has access to it and invite people to join lunch
• Washing up & tidying: your location should be as clean as it was before you all arrived in the morning. This can include washing up, taking the litter outside, hoovering, etc.

You can do something different every week or every two weeks. You shouldn’t have to be constantly responsible for the same task. Agree as a cohort on how you will manage this.

Questions you can use to help this organisation:

1. How long should each person (group of people) be responsible for each goal? 1 week? 2 weeks?
2. How will we communicate to our community who is the person responsible right now?
3. Is there any role missing?

It’s time to stand up. Split into groups of no more than 6 people.

Stand in a circle and share for no more than 60 seconds each:

• 📛 your name
• 💪🏽 What you worked on yesterday
• 🛟 What issues are blocking you / What problems you encountered
• 👷🏾 What you will work on today

After everyone has given an update, reflect on next steps together. Can you team up on shared blockers? Is someone working on something interesting that you want to know more about?

Trainees

This is time for you to get help with whatever you need help with.

If you didn’t understand something in the prep, ask about it.

If you were struggling with a backlog exercise, get help with it.

If you weren’t quite sure of something in a workshop, discuss it.

If you don’t have any problems, keep working through the backlog until you need help.

It can be useful to get into groups with others facing the same problem, or working on the same backlog item.

Volunteers

Don’t be scared to approach people and ask what they’re working on - see if you can help them out, or stretch their understanding.

If lots of people have the same problems, maybe you can put together a demonstration or a workshop to help them understand.

If absolutely no one needs help, consider reviewing some PRs using the process and guidelines in the #cyf-code-review-volunteer-team Slack channel canvas.

Breaks

No one can work solidly forever! Make sure to take breaks when you need.

Finished everything?

If you have finished everything in the backlog you can use this time to practice some other skills which will be useful in your future careers. We have some suggestions below: