前端进阶不可错过的10个Github仓库；让网页提前预加载；优化滚动；CI/CD 平台迁移实践；
编辑 ：袁钰涵 来源 ：SegmentFault
1、前端进阶不可错过的 10 个 Github 仓库
build-your-own-x
🤓 Build your own (insert technology here) https://github.com/danistefanovic/build-your-own-x
JavaScript Algorithms
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings https://github.com/trekhleb/javascript-algorithms
30 Seconds of Code
Short JavaScript code snippets for all your development needs https://github.com/30-seconds/30-seconds-o
const listenOnce = (el, evt, fn) => {
let fired = false;
el.addEventListener(evt, (e) => {
if (!fired) fn(e);
fired = true;
});
};
listenOnce(
document.getElementById('my-btn'),
'click',
() => console.log('Hello!')
); // 'Hello!' will only be logged on the first click
Node Best Practices
✅ The Node.js best practices list https://github.com/goldbergyoni/nodebestpractices
RealWorld example apps
"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅 https://github.com/gothinkster/realworld
clean-code-javascript
🛁 Clean Code concepts adapted for JavaScript https://github.com/ryanmcdermott/clean-code-javascript
// 86400000 的用途是什么？
setTimeout(blastOff, 86400000);
// 使用通俗易懂的常量来描述该值
const MILLISECONDS_IN_A_DAY = 60 * 60 * 24 * 1000; //86400000;
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);
javascript-questions
A long list of (advanced) JavaScript questions, and their explanations ✨ https://github.com/lydiahallie/javascript-questions
awesome-design-patterns
A curated list of software and architecture related design patterns. https://github.com/DovAmir/awesome-design-patterns
developer-roadmap
Roadmap to becoming a web developer in 2021 https://github.com/kamranahmedse/developer-roadmap
Free Programming Books
📚 Freely available programming books https://github.com/EbookFoundation/free-programming-books
代码
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>无刷新预加载页面</title>
<script src="instantclick.min.js"></script>
<style type="text/css">
#instantclick-bar {
display: none;
}
</style>
</head>
<body>
<div>
<h2><a href="page.php?url=baidu">百度一下，你就知道</a></h2>
<h2><a href="page.php?url=taobao">淘宝，让天下没有难做的生意</a></h2>
<h2><a href="page.php?url=qq">腾讯游戏，毁我青春</a></h2>
</div>
<script data-no-instant>InstantClick.init();</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body style="margin:0;">
<?php
header("Content-type:text/html;charset=utf-8");
if ($_GET["url"] == 'baidu') {
echo "<title>百度</title>";
// echo "<h1>你好，我是李彦宏</h1>";
echo "<iframe src='http://www.baidu.com' style='width:100%;height:100%;position:fixed;' frameborder='0'></iframe>";
}else if ($_GET["url"] == 'taobao') {
echo "<title>淘宝</title>";
// echo "<h1>你好，我是马云</h1>";
echo "<iframe src='http://www.taobao.com' style='width:100%;height:100%;position:fixed;' frameborder='0'></iframe>";
}else if ($_GET["url"] == 'qq') {
echo "<title>腾讯</title>";
// echo "<h1>你好，我是马化腾</h1>";
echo "<iframe src='http://www.qq.com' style='width:100%;height:100%;position:fixed;' frameborder='0'></iframe>";
}else{
echo "<h1>别乱来...</h1>";
}
?>
</body>
</html>
如何使用
<script src="instantclick.min.js"></script>
<script data-no-instant>InstantClick.init();</script>
官网
link: http://instantclick.io/
3、使用 CSS Scroll Snap 优化滚动，提升用户体验！
为什么要使用 CSS Scroll Snap
4、CI/CD 平台迁移实践：从 Travis-CI 转移到 Github Action
项目介绍
迁移思路
改造实践
1. 分析之前的 CI 流程
-
命令区：说明了安装阶段和执行阶段的操作有哪些 -
条件区：指定了这个配置文件在哪些条件下会生效 -
部署区：写明了构建产物如何进行部署
2. 直接套用配置文件
3. 恢复 Travis CI 的环境变量
- name: Set ENV variables
run: |
echo "::set-env name=TRAVIS_BRANCH::${TRAVIS_BRANCH:-$(echo $GITHUB_REF | awk 'BEGIN { FS = "/" } ; { print $3 }')}"
echo "::set-env name=TRAVIS_EVENT_TYPE::$(if [ "schedule" == "${{ github.event_name }}" ]; then echo "cron"; else echo "${{ github.event_name }}"; fi)"
jobs:
build:
runs-on: ubuntu-latest
env:
ACTIONS_ALLOW_UNSECURE_COMMANDS: true
4. 拆分配置文件
-
生成 badge 文件，应当跟随每一次提交进行 -
生成 status 文件，执行时间较长，可以定期执行 -
根据拉取请求内容进行整理，做核验
5. 测试 CI 的运行情况
6. 移除 Travis-CI
7. 替换环境变量
8. 修改 GitHub 的分支保护条件
一些注意事项
1. 环境变量不同
2. Action 运行依赖要注意安全
3. 如何触发 CI 的 Pull Request 检查？
总结
推荐阅读
• • •