Web TechnologiesCourse and practice

Following the work

How a team records every change, prepares it away from the live site, lets you try it on a preview before visitors do, and goes back when an update breaks something.

6 parts · about 9 min

Present Cheat sheet

A history of every change

In class, an AI agent builds the first version of your portfolio, and you are the client. Then the changes come, week after week: a new project, a shorter "About" text, a bug fixed in the contact form. Following the work means three things. At any moment, you can see what changed. You can try a change before visitors see it. And you can undo it.

It starts with a history. Developers record their work with a version control tool, almost always Git. Each time a change works, they save it as a commit. A commit records what changed, who made the change and when, with a short message that says why. Together, the commits form the project's history, back to the first day. GitHub is a website that keeps this history online, where the whole team can read it. The lesson Working with an agent shows how to ask the agent for a commit after each step.

A history is not a backup. A backup is a copy of the whole site on one day. If something breaks on the 20th, the backup from the 1st brings back the site of the 1st, and you lose three weeks of work. A history shows the one change that caused the problem, so you can undo only that change.

The example below shows the same five commits of a portfolio, twice. On the left, every message says "update", so the history tells you nothing. In six months, nobody will remember why a change was made, not even the person who made it. That's exactly when you'll need to know. On the right, each message says what changed and why. Ask for one change per commit, with a message like these.

Every message says "update"

Code
The project's history
14 Oct, by you
update

12 Oct, by the agent
update

10 Oct, by the agent
fix

9 Oct, by the agent
update

8 Oct, by the agent
update

Each message says what changed and why

Code
The project's history
14 Oct, by you
Shortens the About text, which was cut off on phones

12 Oct, by the agent
Fixes the contact form, which sent nothing

10 Oct, by the agent
Puts the CV link in the header, where recruiters look

9 Oct, by the agent
Adds the drone project, with its video

8 Oct, by the agent
Creates the home page from the brief
Example 1Two histories of the same portfolio, newest change first

Cheat sheet

Version controlgestion de versions
a way to record every change to a project's files, so that each change can be found and undone.
GitGit
the most common version control tool, which saves each change to a project as a commit.
GitHubGitHub
a website that keeps a project and its history online, where a whole team can read and discuss them.
Commitcommit
a saved version of the project, with a short message that says what changed and why.
Commit messagemessage de commit
the short text saved with each commit, which says what changed and why.
Historyhistorique
the list of every commit in a project, with what changed, why, who made it and when.
Backupsauvegarde
a copy of a site's data kept in a safe place, to recover it after a loss or an error.

From a branch to the live site

The live site, also called production, is the version of the site that visitors see. Nobody should change it directly. A change made on the live site reaches visitors with all its mistakes, perhaps while a recruiter is reading your portfolio.

So a change goes through several copies of the site, called environments. The first one is the builder's computer. There, the dev server shows the site at a localhost address that only the builder can open. Next comes a test copy that works like the live site, where the team tries each change. Teams call it staging. The live site comes last.

In the project, each change is prepared on a branch. A branch is a separate line of work, where a change is made and saved without touching the main branch, the version that the live site is built from. Your agent can work for a whole day on a branch called "drone-project", and your live portfolio doesn't change. When the change is ready, it's proposed for review in a pull request, the subject of the next part.

Many hosts, such as Netlify, Vercel or Firebase Hosting, make a preview link for each pull request. It's a private address where you can try that one change, on your phone too. Once someone approves the change, the branch is merged into the main branch, and the change is deployed to the live site. The previous version is kept, so you can return to it.

Ask for small changes, one at a time. Nobody can try two months of work in one afternoon. And if something breaks, nobody knows which of a hundred changes caused it.

Following a change: a branch, a pull request, a preview, a review, the live site, and the way back1. A branch 2. Pull request 3. Preview link 4. Review 5. Live site 6. Undo the change 6. Previous version6Undo the changeA branchA separate copy forone changePull requestThe change, listedfor reviewPreview linkA private link to trythe changeReviewSomeone checks andapproves itLive siteThe change is nowonlinePrevious versionYou can return to itin minutes

Swipe sideways to see the whole figure.

Figure 1

Cheat sheet

Live site or productionproduction, prod
the version of a site that visitors see.
Environmentenvironnement
one copy of a site in one place, such as the builder's computer, the test copy or the live site.
Stagingpréproduction, recette
a test copy of a site that works like the live site, where changes are tried before they go live.
Branchbranche
a separate line of work in a project, where a change is prepared without touching the live site.
Main branchbranche principale
the version of the project that the live site is built from.
Preview linklien de prévisualisation
a private address where you can try one change before it goes live.
Mergefusionner, merger
to add the changes of a branch to the main branch, once they're approved.
Deploydéployer, mettre en prod
to publish a new version of a site, so that visitors see the changes.

Approving a pull request

A pull request is a change proposed for review before it joins the live site. Some tools call it a merge request. Its page, on GitHub for example, gives a description of what changed and why, the list of the files that changed, and often a preview link. When the developer asks "Can you approve it?", saying yes means accepting every change in it. Approving is not a formality.

As the client, or as the product owner, the person who decides what the product must do, you don't read the code. Another developer checks the code: this is code review. Your job is to check the result. First, does what changed match what you asked for? A good pull request says which request it answers, so you can compare the two. Then open the preview link and use the change as a visitor would, on a computer and on a phone. Follow the whole path, not only the page that changed. For a new price, go to the basket and the payment page too. For your portfolio, open the new project from the home page, and play its video on your phone.

If something is wrong, write it on the pull request itself, not in a separate email. Say what you did, on which device, what you saw and what you expected, as in a bug report. For example: "On my phone, the video doesn't start. On my laptop, it plays." Approve only once the problem is fixed and you've tried the preview again.

The example below shows two pull requests. Nobody can review the one on the left: 96 files, a month of work, no description and no preview. Ask for small pull requests instead, each with a description and a preview link. The one on the right says what changed, why, and how to check it.

A pull request that nobody can review

Code
The pull request
# Changes
Files changed: 96
Description: none
Preview link: none

The developer's comment:
"It's everything since the start of the month."

A pull request you can check

Code
The pull request
# Adds the drone project
Files changed: 4
Answers the request "Show my drone project"

## What changed, and why
- A page for the drone project, with my role in it.
- A card on the home page that opens this page.

## How to check it
- Preview link: portfolio--pr-12.web.app
- Open the project from the home page.
- Play the video on a phone.
Example 2Two pull requests: one that nobody can review, and one you can check

Cheat sheet

Pull requestpull request, demande de fusion
a change proposed for review before it joins the live site, with the list of what changed.
Approveapprouver
to accept a pull request, which means accepting every change in it.
Reviewerrelecteur, reviewer
a person who checks a pull request, then approves it or asks for changes.
Code reviewrevue de code
a check of a change's code by another developer, before the change is merged.
Product ownerproduct owner, responsable produit
the person who decides what a product must do, and who accepts or refuses the work.
Bug reportrapport de bug
a message about a bug, with what you did, what you expected, what you saw and the exact error message.

Undo or fix

One day, an update will break something on the live site. Teams call this an incident. Then you must decide: undo the update, or fix it?

When each update goes live as a saved version, and the previous version is kept, going back takes minutes. This is called a rollback. Hosts such as Netlify, Vercel or Firebase Hosting keep every version that went live, and they can put an earlier one back online with one button. Then the developer fixes the problem calmly, tries the fix on the test copy, and deploys it again. A fix made in a hurry on the live site, while visitors see the problem, often brings a second bug.

But a rollback undoes the whole update, including the parts that work. So compare the harm with what you would lose. Take your student association's site, which sells the tickets for the gala. If nobody has been able to pay since this morning's update, roll back now, because every hour costs ticket sales. If the same update opened the ticket sales but has a typo in a heading, don't roll back. Fix the typo with a small change, through the usual path: a branch, a pull request and a preview.

A rollback needs a way back. If the developer copied the new files over the old ones and kept no version, there's nothing to return to. The only option left is a hotfix on the live site, as fast as possible. Then insist that every update keeps the previous version.

After a rollback or a fix, run a smoke test: try the paths that matter yourself, such as browsing, the basket and payment, on a phone. If payments failed, check whether anyone paid without getting a ticket. Then ask why the problem wasn't caught before it went live, and what will catch it next time, such as a test purchase on staging. And put updates live when someone can watch what happens next, not on a Friday evening.

Undo or fix: when an update breaks the live site, the harm it does decides whether you roll back1. Serious harm, such as no payments 1. Roll back 2. Fix it calmly 3. Small harm, such as a typo 3. A small fix1Serious harm, such as no payments3Small harm, such as a typoA broken updateVisitors see theproblem right nowRoll backThe previous version isonline again in minutesFix it calmlyTry the fix on the testcopy, then deploy itA small fixThe rest of the updatestays online

Swipe sideways to see the whole figure.

Figure 2

Cheat sheet

Incidentincident
a problem on the live site that harms visitors, such as a payment page that fails.
Rollbackretour arrière, rollback
putting the previous version of a site back online, which undoes the whole last update.
Hotfixcorrectif urgent, hotfix
a small, urgent fix to a problem on the live site, which goes live as soon as it's checked.
Smoke testtest de fumée, smoke test
a quick check of a site's main paths right after an update, such as browsing, the basket and payment.
Stagingpréproduction, recette
a test copy of a site that works like the live site, where changes are tried before they go live.

Requests, bugs and who owns what

Over a whole season, a site gets dozens of requests and bugs. In a long email thread, they get lost. Is the video bug fixed? Who was supposed to send the photos? Nobody knows.

So teams use an issue tracker: a shared list with one item for each request or bug. GitHub Issues, Jira and Trello are common ones. Each item, called an issue or a ticket, has a title, an owner (most tools call this person the assignee) and a status, such as "to do", "in progress" or "done". When you ask for a change during the work, your change request becomes an issue. A bug becomes an issue too, written as a bug report. For your portfolio, the issue "The contact form sends nothing on Safari" can go to the agent, and the issue "Send the drone video" goes to you.

Then everything is linked. Each pull request says which issue it answers, and each commit message says what changed and why. Months later, anyone can follow a change from the request to the code, and back again.

Last, check whose name is on all of this. The history on GitHub, the hosting and the domain name should belong to you, or to the client, not only to the freelancer who built the site. When the freelancer leaves, the client keeps the history and the accounts. The lesson What keeps running lists what to collect at handover.

Cheat sheet

Issue trackeroutil de suivi des tickets
a shared list of requests and bugs, with one item for each, such as GitHub Issues, Jira or Trello.
Issue or ticketticket
one request or one bug in an issue tracker, with a title, an assignee and a status.
Assigneeresponsable, assigné
the person in charge of one issue, who does the work or finds who will do it.
Statusstatut
where an issue stands, such as "to do", "in progress" or "done".
Change requestdemande de modification
a change to the brief, asked for during the work, which may cost time and money.
Handoverpassation
the moment when the builders give the site, its accounts and its documents to the client.

What to ask

Ask these questions at the first meeting with a freelancer, an agency or an agent. Then ask them again before every update, all season.

At the first meeting, ask how changes are recorded and how they go live. You want each change saved as a commit with a clear message, prepared on a branch, shown to you on a preview link, and put live in a way that keeps the previous version. If the answer is "I change the live site directly", or "I'll put everything online in one go at the end", ask for small changes, prepared on a copy. Ask also where the history and the accounts are kept, and in whose name.

Before each update goes live, ask what changed since last time. Some teams keep a changelog that answers this question for you. Ask how the update would be undone if it goes wrong, and how long that would take: this is the rollback plan. Ask who checked it. A second person should check every change, even one that is "only prices", because small changes are the ones that nobody checks twice. Teams call this rule the four-eyes principle. And agree in advance on which problems mean "roll back first", such as failed payments. Then nobody has to debate it while customers wait.

Ask your agent the same questions. Did it work on a branch? Which issue does this pull request answer? Where is the preview link? Then try the change yourself, as the lesson Working with an agent explains.

Cheat sheet

Changelogjournal des modifications
a list, written for people rather than developers, of what changed in each update.
Rollback planplan de retour arrière
what the team will do to undo an update if it goes wrong, and how long it will take.
Four-eyes principleprincipe des quatre yeux
the rule that no change goes live until a second person has checked it.
Pull requestpull request, demande de fusion
a change proposed for review before it joins the live site, with the list of what changed.

Practise this strand

These questions put you in the situations this lesson describes. You answer in your own words, and you get a level, feedback and a full answer.