如何在 Codespaces 中运行前端研讨会 修复损坏的时钟 - Codespace 研讨会

2025-05-27

如何在 Codespaces 中运行前端研讨会

修理坏掉的钟——Codespace 工作坊

使用 Codespaces 向初级开发人员教授 HTML、CSS 和 JavaScript

自2018年以来，我一直为15到25人的小班教授Web开发入门课程。这对我来说是一段非常宝贵的经历。有趣的是：我的父母都是老师，而且他们确实在我所在的小学任教，这让我发誓永远不做老师。讽刺的是，我的职业核心就是教人们技术。

我的经验告诉我，如果没有合适的技术，老师和学生都会感到沮丧。例如，当我教学生HTML、CSS和JavaScript时，我们总是在每节课的前15分钟确保所有学员都能访问入门代码，能够在本地运行代码，并且能够跟进学习。

进一步复杂化的是，这些学习者是远程的并且从未编写过代码，因此很难判断每个人是否正确克隆了存储库并使用了正确的文件。

有时，我会告诉他们只需从起始代码中复制粘贴每个文件的内容，但这也会带来问题。学习者会把内容放错文件，或者没有使用正确的扩展名。这真是一团糟，但可以理解！我刚开始学习编程的时候也有过类似的经历。我会参加各种研讨会，花大量时间尝试搭建自己的环境。与此同时，我周围的人都在创作杰作。

我终于找到了解决研讨会和培训初级开发人员编写代码的混乱局面的办法——GitHub Codespaces。

为什么 Codespaces 是最佳解决方案

在 Codespaces 中举办研讨会，为所有参与者带来更佳体验。初学者开发者无需费心学习如何克隆代码库并使用模板，而是可以打开 Codespace，在我创建的开发环境中工作。现在，我可以安心地确保每个人都拥有与我相同的环境，并且可以轻松地跟进。这大大减少了时间、压力和混乱。作为一名研讨会参与者，在研讨会中难以跟进有时会让我感到自尊心受挫或失去兴趣。有了 Codespaces，参与者可以自信地跟进并高效地学习。

每位研讨会参与者的体验

我为每个参与者创造的体验类似于以下内容：

  • 参与者打开 Codespace，它会立即加载我需要的扩展：
    • ESLint - 帮助学习者快速识别并减少代码中的任何问题
    • Prettier - 帮助学习者以易于阅读和理解的方式格式化他们的代码
    • 实时共享- 学习者可以使用它来相互协作和配对程序。
    • 部署到 GitHub Pages - 这是我开发的一款扩展，旨在帮助用户快速将静态网站部署到 GitHub Pages。这款扩展减少了我指导学习者配置 GitHub Pages 所需的额外步骤。现在，他们只需点击几下按钮，就可以在 IDE 中使用。阅读这篇博文了解如何使用这款扩展，并查看这篇博文了解我是如何创建这款扩展的。
    • Panda 主题- 虽然没有必要，但初学者开发者往往注重准确性。他们想要记住每一种方法，而且当他们所参加的课程的语法高亮颜色不同时，他们有时会感到不确定。很多时候，学习者都担心自己可能输入错误，因为我的变量是粉色的，而他们的变量是蓝色的。为了解决这个问题，我安排大家在研讨会上使用和我相同的主题。
    • CodeSwing - 这款扩展是由 GitHub 一位我非常敬佩的优秀软件工程师 Jonathan Carter 开发的。它能为你的 IDE 带来类似 Codepen 的视图。这对学习者非常有利，因为他们可以实时看到自己所做的更改，并且更容易区分 HTML、CSS 和 JavaScript 代码。
    • 代码之旅- Jonathan Carter 也开发了这款扩展程序，在代码库中提供引导式学习。我使用这款扩展程序来确保学习者能够跟上进度，并使远程教学更加轻松。
    • 代码拼写检查器- 这可以帮助学习者发现代码中的拼写错误！
  • 扩展加载后，学习者可以立即通过 CodeSwing 看到其网站的实时预览以及 HTML、CSS 和 JavaScript 的三个存储桶。
  • 接下来，学习者会收到来自 CodeTour 的提示，要求他们更新代码行并与代码库进行交互。
  • 在确保他们的代码库和网站符合要求后，他们可以使用部署到 GitHub Pages 扩展来发布他们的网站。

就这样！通过利用 Codespaces，我创建了一个流畅的研讨会体验，向大家介绍了 HTML、CSS 和 JavaScript，并将网站部署到 GitHub Pages。

如何为前端工作室配置 Codespace

创建 Codespace

下图演示了如何在你的仓库中创建新的 Codespace。如果你对创建和配置 Codespace 还有其他疑问，请查看GitHub 官方文档。

在您的代码库中，绿色的“代码”按钮下方有两个选项卡：本地和 Codespaces。选择 Codespaces，然后选择在主目录中创建。此操作仅在您拥有 Codespaces 访问权限的情况下有效。

添加您的前端启动代码

在这个例子中，我使用了 HTML、CSS 和 JavaScript。请注意，每个文件都包含一些小错误，我会挑战研讨会的参与者来解决。如果您想按照这篇博文学习如何设置 Codespace，您可以创建以下文件：

索引.html


<DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>What Time is It?</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="clock">

      <h1 id="twelve">12</h1>

      <div class="clock-face">

        <div class="hand hour-hand"></div>

        <div class="hand min-hand"></div>

        <div class="hand second-hand"></div>

      </div>

      <!-- update the question mark to the number 6 -->

      <h1 id="six">?</h1>

    </div>

    <script src="script.js"></script>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

样式.css


html {

      background-size:cover;

      font-family:'helvetica neue';

      text-align: center;

      font-size: 10px;

    }

  h1{

    color: #FFC312;

    text-shadow: 2px 2px 4px #000000;

  }

    body {

      /*change the background color to a gradient of your choice*/

      background: linear-gradient(to bottom right, #47D457, #0F1CCD);

      margin: 0;

      font-size: 2rem;

      display:flex;

      flex:1;

      min-height: 100vh;

      align-items: center;

    }

    .clock {

      width: 50rem;

      height: 50rem;

      border:20px solid white;

      border-radius:50%;

      margin:50px auto;

      position: relative;

      padding:2rem;

      box-shadow:

        0 0 0 4px rgba(0,0,0,0.1),

        inset 0 0 0 3px #EFEFEF,

        inset 0 0 10px black,

        0 0 10px rgba(0,0,0,0.2);

    }

    .clock-face {

      position: relative;

      width: 100%;

      height: 100%;

      transform: translateY(-3px); /* account for the height of the clock hands */

    }

    .hand {

      width:50%;

      height:6px;

      background:lightgrey;

      position: absolute;

      top:30%;

      transform-origin: 100%;

      transform: rotate(90deg);

      transition: all 0.05s;

      transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);

      box-shadow:

        0 0 0 4px rgba(0,0,0,0.1),

        inset 0 0 0 3px #EFEFEF,

        inset 0 0 10px black,

        0 0 10px rgba(0,0,0,0.2);

    }

    #six{
      margin-top:-150px;
    }
Enter fullscreen mode Exit fullscreen mode

脚本.js


const secondHand = document.querySelector('.second-hand');

  const minsHand = document.querySelector('.min-hand');

  const hourHand = document.querySelector('.hour-hand');

  function setDate() {

    const now = new Date();

    const seconds = now.getSeconds();

    const secondsDegrees = ((seconds / 60) * 360) + 90;

    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

    const mins = now.getMinutes();

    const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;

    minsHand.style.transform = `rotate(${minsDegrees}deg)`;

    const hour = now.getHours();

    // change seconds to hours on the line below

    const hourDegrees = ((seconds / 12) * 360) + ((mins/60)*30) + 90;

    hourHand.style.transform = `rotate(${hourDegrees}deg)`;

  }

  setInterval(setDate, 1000);

  setDate();
Enter fullscreen mode Exit fullscreen mode

自动加载扩展

在项目根目录下创建一个文件夹，并在其中.devcontainer存储一个文件。您可以通过创建一个 来预定义特定的扩展程序，以便在有人打开 Codespace 时加载。在 中，您可以提供 VS Code 扩展程序 ID 的值。以下是我的 devcontainer.json 示例：devcontainer.jsondevcontainer.jsondevcontainer.json

devcontainer.json


{

    "extensions": [

        "dbaeumer.vscode-eslint",

        "esbenp.prettier-vscode",

        "ms-vsliveshare.vsliveshare",

        "blackgirlbytes.deploy-to-github-pages",

        "tinkertrain.theme-panda",

        "codespaces-contrib.codeswing",

        "vsls-contrib.codetour",

        "streetsidesoftware.code-spell-checker"

    ]

}
Enter fullscreen mode Exit fullscreen mode

另一种方法是将扩展添加到您的devcontainer.json

您无需搜索每个 VS Code 扩展的 ID，只需devcontainer.json单击即可将它们添加到您的扩展中add to devcontainer.json，如下图所示：

名为“代码拼写检查器”的扩展程序。点击齿轮图标，会出现一个选项，提示“添加到 devcontainer.json”。

设置 CodeSwing

由于 CodeSwing 已安装在您的 IDE 中，您可以通过创建 CodeSwing 清单来自定义 CodeSwing 体验。我使用清单自定义了布局。我更喜欢将 HTML、CSS 和 JavaScript 代码块堆叠在编辑器的右侧，因此我在项目根目录下创建了一个 codeswing.json 文件，其中包含以下内容：


{

    "scripts": [],

    "styles": [],

    "layout": "splitRight"

}
Enter fullscreen mode Exit fullscreen mode

没有看到任何变化？

如果您没有看到 Codespace 中的任何变化，您可能需要重建容器或关闭当前的 Codespace 并启动新的 Codespace 来重新加载您的环境。

要重建你的环境，请访问你的命令面板并选择Codespaces: Rebuild Container。如果你不确定如何访问，请查看本指南 ( https://docs.github.com/en/codespaces/codespaces-reference/using-the-vs-code-command-palette-in-codespaces )。

输入“Codespaces: Re”后，命令面板会显示几个选项。第一个显示的选项是“Codespaces: Rebuild Container”。这就是你想要选择的选项。

创建代码之旅

借助 CodeTour 扩展程序的额外帮助，指导您的研讨会参与者完成整个研讨会。就我而言，我的代码中有两个错误需要研讨会参与者解决：

  • 我在时钟上数字 6 的位置放了一个问号
  • 背景颜色很好，但我建议学生使用他们选择的调色板
  • 我让时针和分针一样快地走

为了鼓励学生改正错误，我使用 CodeTour 在每个文件的特定行添加了指导信息。在项目的根目录下，我创建了一个名为 的文件main.tour。在main.tour文件中，我添加了以下说明：


{

  "$schema": "https://aka.ms/codetour-schema",

  "title": "Fix The Broken Clock",

  "steps": [

    {

      "file": "index.html",

      "line": 2,

      "description": "Hey! 👋 Welcome to the Fix The Broken Clock workshop. Something is very wrong with this clock, and we need your help to fix it. Use this tour to guide you through the app, and learn how to interact with its live coding environment. Try changing their text content and watch it take effect immediately!\n\nClick the `Next` link below to keep learning 👇"

    },

    {

      "file": "index.html",

      "line": 22,

      "description": "Our clock has a question mark instead of the number 6. Update the `&lt;h1 id='six'>?&lt;/h1>` to render the number 6!"

    },

    {

      "file": "style.css",

      "line": 13,

      "description": "Great job at fixing the numbers over the clock. Check out background colors for the clock. Hover over the `&lt;hex>` color to choose the background color of your choice."

    },

    {

      "file": "script.js",

      "line": 14,

      "description": "The hour hand is moving just as fast as the second hand. Let’s fix this by changing the word `seconds` on line 14 to `hours`."

    },

    {

      "file": "script.js",

      "line": 18,

      "description": "Mission complete! Thank you for completing this workshop."

    }

  ]

}
Enter fullscreen mode Exit fullscreen mode

此代码之旅应类似于以下屏幕截图：

第一个代码导览提示出现在 index.html 文件的第 2 行。它显示：

代码之旅第 2 步（共 5 步）

代码之旅第 3 步（共 5 步）

代码之旅第 4 步（共 5 步）

代码之旅第 5 步（共 5 步）

提交并推送更改

即使是最有经验的工程师也很难掌握版本控制，所以我并不指望新手开发者在研讨会期间编写 git 命令。幸运的是，Codespaces 和 VS Code 都提供了源代码控制 UI。我使用这个 UI 来帮助与会者暂存、提交和推送他们的更改。

源控制面板

开始直播吧！

我认识到新开发人员喜欢两件事：

  1. 他们在修改本地托管网站时获得的即时满足感

  2. 向亲朋好友展示他们的第一个网站

我鼓励研讨会参与者将他们的网站部署到 GitHub Pages 上，这样他们就可以向亲朋好友展示他们的第一个网站。对于初学者来说，部署到 GitHub Pages 可能会感觉比较困难，因为这需要修改 GitHub Actions 和 GitHub UI。因此，我建议他们使用一个名为“部署到 GitHub Pages”的扩展，它允许参与者在不离开 IDE 的情况下部署网站。这篇简短的博客文章概述了如何使用该扩展。此演示的实时网站位于此处。

在命令面板中部署到 GitHub Pages 扩展

使研讨会在 VS Code 中可用

如果有人更喜欢使用 VS Code 而不是 Codespaces 来跟踪你的工作，你仍然可以定义该项目推荐安装的扩展。.vscode在项目根目录创建一个文件夹，extensions.json其中包含一个文件。你可以参考我的文件内容extensions.json。

扩展.json


{

    "recommendations": [

        "dbaeumer.vscode-eslint",

        "esbenp.prettier-vscode",

        "ms-vsliveshare.vsliveshare",

        "blackgirlbytes.deploy-to-github-pages",

        "tinkertrain.theme-panda",

        "codespaces-contrib.codeswing",

        "vsls-contrib.codetour",

        "streetsidesoftware.code-spell-checker"

    ],

}
Enter fullscreen mode Exit fullscreen mode

这适用于任何前端框架！

虽然我在示例中使用了 HTML、CSS 和 JavaScript，但您可以将此方法用于任何前端框架。我计划在未来撰写博客文章，解释如何使用 Codespaces 举办其他技术的研讨会，但就目前而言，我希望这是一个很好的起点！

查看我的示例 repo

GitHub 徽标 blackgirlbytes / clock-codespace-workshop

关于在 Codespaces 中运行前端研讨会的研讨会

修理坏掉的钟——Codespace 工作坊

具有蓝绿色渐变背景的模拟时钟

这是什么？

这是一个向大家介绍 HTML、CSS 和 JavaScript 的研讨会。程序故意出现了以下错误：

  • 时钟上应该显示数字 6 的地方出现了一个问号
  • 時针走得太快了！

在本次研讨会上，参与者将面临解决并修复这些问题的挑战。以下扩展程序将为参与者提供自主体验：

  • CodeSwing
  • 代码之旅

这是为了展示在 Codespaces 中举办研讨会的价值。

现场直播

该网站现已上线：https://blackgirlbytes.github.io/clock-codespace-workshop/

谁可以使用它？

任何人都可以使用或修改它。它的许可证号为https://github.com/blackgirlbytes/clock-codespace-workshop/blob/main/LICENSE。

资源和链接

我关于研讨会的博客文章在这里：




在 GitHub 上查看


旁注

不要将 Codespaces 与 GitHub.dev 混淆，后者是一款轻量级的浏览器内置编辑器，在任何代码库中按下“.”键即可显示。许多人告诉我他们喜欢 Codespaces，并向我展示了 GitHub.dev。虽然我喜欢 GitHub.dev，因为它让我能够更轻松地快速编辑和格式化文件，但它与 Codespaces 并不相同。Codespaces 是 GitHub.dev 的升级版。

您还想了解 Codespaces 的哪些方面？请在下方评论，以便我创建更多内容，指导您根据自己的使用场景优化 Codespace！

文章来源：https://dev.to/github/how-to-run-a-frontend-workshop-in-codespaces-2ede
Devto 翻译
PREV
Why are people developing inside containers?
NEXT
如何在使用 Git 时无需输入密码