自2018年以来，我为15-25人的班级教授网络开发入门课程。这对我来说是一个有益的经验。有趣的是：我的父母都是教师，实际上是在我的小学教书，这让我发誓永远不会成为一名教师。具有讽刺意味的是，我的职业是以教人们学习技术为中心。
我的经验告诉我，当你没有正确的技术时，教师和学习者的挫折感就会积累起来。例如，当我教大家HTML、CSS和JavaScript时，我们总是在每节课的前15分钟确保所有与会者都能接触到启动代码，能够在本地运行代码，并且能够跟随。
更加复杂的是，这些学习者都是远程的，从来没有写过代码，所以很难说每个人是否正确地克隆了资源库，使用了正确的文件。
有时，我会告诉他们只是复制和粘贴启动代码中每个文件的内容，但这也会出现问题。学员们会把它们放在错误的文件里，或者没有使用正确的扩展名。这是一个烂摊子，但可以理解！当我第一次学习代码时，我也有类似的经历。我参加研讨会，花了整整一天的时间试图建立我的环境。与此同时，我周围的人却在创造杰作。
我终于找到了解决研讨会和培训初级开发人员编码的混乱局面的办法–GitHub Codespaces。
为什么Codespaces是一个最佳解决方案
在Codespaces中运行一个研讨会，为所有参与者创造了更好的体验。与其期望初级开发人员了解如何克隆仓库以使用模板，他们可以打开一个Codespace，在我创建的开发环境中工作。现在，我可以放心了，每个人都有和我一样的环境，可以轻松地跟上。这减少了大量的时间、压力和混乱。作为一个研讨会的参与者，在研讨会上挣扎着跟上，有时会让我的自尊心破裂，或者让我失去兴趣。有了Codespaces，参与者可以自信地跟上，并富有成效地学习。
每个讲习班参与者的经验
我为每个参与者创建的体验类似于以下内容：
- 学员打开一个Codespace，它立即加载了我要求的扩展：
- ESLint – 这有助于学习者快速识别并减少他们代码中的任何问题
- Prettier – 这可以帮助学习者将他们的代码格式化，使之易于阅读和遵循。
- Live Share – 学习者可以用它来相互协作和配对编程。
- Deploy to GitHub Pages – 这是我开发的一个扩展，帮助人们快速地将他们的静态网站部署到GitHub页面。这个扩展减少了我需要指导学员配置GitHub页面的额外步骤。取而代之的是，只需点击几个按钮，他们就可以留在自己的IDE里。阅读这篇博文，了解如何使用该扩展，并查看这篇博文，了解我是如何创建该扩展的。
- Panda Theme – 虽然这是不必要的，但初级开发者往往注重准确性。他们想记住每一个方法，而当他们所跟随的会话有不同颜色的语法高亮时，他们有时会感到不确定。多次，学习者表示担心他们可能打错了什么，因为我的变量是粉红色的，而他们的变量是蓝色的。为了解决这个问题，我设置大家在研讨会上使用与我相同的主题。
- CodeSwing – 我在GitHub欣赏的杰出软件工程师Jonathan Carter创造了这个扩展。这将一个类似于Codepen的视图带入你的IDE。这对学习者有好处，因为他们可以实时看到他们所做的视觉变化，而且他们更容易区分HTML、CSS和JavaScript代码。
- Code Tour – Jonathan Carter也开发了这个扩展，在代码库中提供指导性的走访。我使用这个扩展来保持学习者的进度，并使远程指导更容易。
- Code Spell Checker – 这可以帮助学习者在他们的代码中抓出错别字！
- 在扩展程序加载后，学习者会立即看到他们网站的实时预览，并通过CodeSwing看到HTML、CSS和JavaScript的三个桶。
- 接下来，学习者会收到来自CodeTour的提示，要求他们更新代码行并与代码库互动。
- 在确保他们的代码库和网站符合要求后，他们可以使用部署到GitHub Pages扩展来发布他们的网站。
这就是了！通过利用Codespaces，我创造了一个顺利的研讨会经验，向人们介绍HTML、CSS和JavaScript，并将网站部署到GitHub Pages。
如何为前端研讨会配置一个Codespace
创建Codespace
下面的图片举例说明了如何在你的仓库中创建一个新的codespace。如果你有更多关于创建和配置代码空间的问题，请查阅GitHub官方文档。
添加你的前端启动代码
在这个例子中，我使用了HTML、CSS和JavaScript。请注意，每个文件都包含一些小错误，我在挑战研讨会参与者的解决能力。如果你想跟着这篇博文学习如何设置Codespace，你可以创建以下文件：
index.html
style.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;
}
script.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();
自动加载扩展
在你的项目的根部，创建一个 .devcontainer 文件夹，并在该文件夹内存储一个 devcontainer.json 文件。你可以通过创建 devcontainer.json 预先定义特定的扩展，以便在有人打开 Codespace 的时候加载。在 devcontainer.json 里面，你可以提供VS Code扩展ID的值。下面是我的 devcontainer.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"
]
}
添加扩展到 devcontainer.json 的另一种方法
你可以点击 add to devcontainer.json 将它们添加到你的 devcontainer.json 中，而不是搜索每个VS Code扩展的ID，如下图：
设置CodeSwing
由于CodeSwing已经安装在你的IDE中，你可以通过创建一个CodeSwing清单来定制CodeSwing体验。我使用清单来定制我的布局。我喜欢HTML、CSS和JavaScript的大块内容堆积在编辑器的右侧，所以我在项目的根部创建了一个 codeswing.json，内容如下：
{
"scripts": [],
"styles": [],
"layout": "splitRight"
}
没有看到任何改变？
如果你在你的Codespace中没有看到任何变化，你可能需要重建你的容器，或者关闭你当前的Codespace，并启动一个新的Codespace来重新加载你的环境。
要重建你的环境，访问你的命令面板并选择 Codespaces: Rebuild Container。如果你不确定如何访问它，请查看指南。
创建Code Tour
通过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 `<h1 id='six'>?</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 `<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."
}
]
}
这个code tour看起来应该类似于下面的截图：
提交和推送更改
即使是最有经验的工程师也会为版本控制而挣扎，所以我并不期望初级开发者在研讨会上写git命令。幸运的是，Codespaces和VS Code有一个源代码控制的用户界面。我使用这个用户界面来帮助与会者阶段性地提交和推送他们的修改。
上线!
有两件事我认识到新的开发者喜欢：
- 当他们修改一个本地托管的网站时，他们会立即得到满足感
- 向朋友和家人展示自己的第一个网站
我鼓励研讨会的参与者在GitHub Pages上部署他们的网站，这样他们就可以向朋友和家人炫耀他们的第一个网站。对于初级开发者来说，部署到GitHub Pages上可能会感觉比较困难，因为这需要对GitHub Actions和GitHub UI进行修补。相反，我让他们使用一个叫做Deploy to GitHub Pages的扩展，它允许参与者不离开他们的IDE就能部署网站。这篇简短的博文概述了如何使用这个扩展。这个演示的真实网站在这里。
让研讨会在VS Code中可用
如果有人喜欢使用VS Code而不是Codespaces来关注你的工作，你仍然可以定义为该项目安装的推荐扩展。在你的项目根部创建一个 .vscode文 件夹，里面有一个 extensions.json 文件。你可以使用我的 extensions.json 文件的内容作为参考。
extensions.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"
],
}
这个方法适用于任何前端框架!
虽然我在例子中使用了HTML、CSS和JavaScript，但你可以对任何前端框架使用这种方法。我计划在以后的博文中解释如何使用Codespaces来运行其他技术的研讨会，但现在，我希望这是一个很好的起点!
这是什么？
这是一个用于向人们介绍HTML、CSS和JavaScript的研讨会。该程序特意有以下错误：
- 在数字6应该呈现的地方，时钟上有一个问号
- 时针走得太快了!
在这个工作坊中，参与者要挑战的是如何解决和修复这些问题。下面的扩展程序为与会者创造了一个自我指导的体验：
- CodeSwing
- CodeTour
这是为展示在Codespaces中运行研讨会的价值而制作的。
使用说明
任何人都可以在协议下使用它或对它进行调整。
资源和链接
演示：https://blackgirlbytes.github.io/clock-codespace-workshop/
源码：View on GitHub
附注
不要把Codespaces和GitHub.dev混为一谈，后者是一个轻量级的浏览器编辑器，如果你在任何仓库中按下“.”键就会显示出来。许多人告诉我他们喜欢Codespaces，并给我看GitHub.dev。虽然我喜欢GitHub.dev，因为它使我更容易快速编辑和格式化文件，但它与Codespaces不同。Codespaces是GitHub.dev的类固醇。
关于Codespaces，你还想了解什么？请在下面评论，这样我就可以创建更多的内容来教育你如何针对你的使用情况优化Codespace！（via Rizèl Scarlett）
原文地址：https://www.wbolt.com/codespaces-frontend-workshop.html
