关于github:前端进阶不可错过的10个Github仓库CICD-平台迁移实践让网页提前预加载优化滚动提升用户体验丨思否技术周刊

值班编辑：袁钰涵

???? Build your own (insert technology here)

https://github.com/danistefan…

该仓库波及了 27 个畛域的内容，每个畛域会应用特定的语言来实现某个性能。下图是与前端畛域相干的内容：

???? Algorithms and data structures implemented in JavaScript with explanations and links to further readings

https://github.com/trekhleb/j…

该仓库蕴含了多种基于 JavaScript 的算法与数据结构。每种算法和数据结构都有本人的 README，蕴含相干阐明和链接，以便进一步浏览 (还有相干的视频)。

Short JavaScript code snippets for all your development needs

https://github.com/30-seconds…

该仓库蕴含了泛滥能满足你开发需要，简洁的 JavaScript 代码片段。比方以下的 listenOnce 函数，能够保障事件处理器只执行一次。

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

✅ The Node.js best practices list

https://github.com/goldbergyo…

该仓库介绍了 Node.js 利用的最佳实际，蕴含以下的内容：

“The mother of all demo apps” — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more ????

https://github.com/gothinkste…

对于大多数的“Todo”示例来说，它们只是简略介绍了框架的性能，并没有残缺介绍应用该框架和相干技术栈，构建真正应用程序所须要的常识和视角。

RealWorld 解决了这个问题，它容许你抉择任意前端框架（React，Vue 或 Angular 等）和任意后端框架（Node，Go，Spring 等）来驱动一个实在的、设计精美的全栈应用程序“Conduit“。下图是目前已反对的前端框架（内容较多，只截取局部内容）：

???? Clean Code concepts adapted for JavaScript

https://github.com/ryanmcderm…

该仓库介绍了如何写出整洁的 JavaScript 代码，比方作者倡议应用可检索的名称：

不好的

// 86400000 的用处是什么？setTimeout(blastOff, 86400000);

好的

// 应用通俗易懂的常量来形容该值
const MILLISECONDS_IN_A_DAY = 60 * 60 * 24 * 1000; //86400000;
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

该仓库蕴含了 11 个方面的内容，具体的目录如下图所示：

A long list of (advanced) JavaScript questions, and their explanations ✨

https://github.com/lydiahalli…

该仓库蕴含了从根底到进阶的 JavaScript 常识，利用该仓库你能够测试你对 JavaScript 常识的把握水平，也能够帮忙你筹备面试。

A curated list of software and architecture related design patterns.

https://github.com/DovAmir/aw…

该仓库蕴含了软件与架构相干的设计模式的精选列表。在软件工程中，设计模式（Design Pattern）是对软件设计中普遍存在（重复呈现）的各种问题，所提出的解决方案。这个术语是由埃里希·伽玛（Erich Gamma）等人在 1990 年代从建筑设计畛域引入到计算机科学的。

Roadmap to becoming a web developer in 2021

https://github.com/kamranahme…

该仓库蕴含一组图表，这些图表展现了成为一个 Web 开发者的学习路线图。该仓库含有前端、后端和 DevOps 的学习路线图，这里咱们只介绍前端的学习路线图（原图是长图，这里只截取局部区域）：

???? Freely available programming books

https://github.com/EbookFound…

该仓库蕴含了多种语言的收费学习资源列表，下图是中文免费资源列表（内容较多，只截取局部内容）：

——作者：阿宝哥

代码

index.htm

<!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>

page.php

<!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>

如何应用

其实很简略的，只须要将插件的 js 引入页面，而后初始化即可，上面是咱们要引入的文件。

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

而后，在网站 </body> 标签之前退出这句

<script data-no-instant>InstantClick.init();</script>

这样，你的网站也能疾速接入无刷新的感觉的预加载技术！

官网

间接去官网下载生产版本的 js 插件吧！

link: http://instantclick.io/

——作者：THANKING

github 地址：https://github.com/qq44924588…

你是否常常心愿有一个 CSS 个性能够轻松创立一个可滚动的容器? CSS scroll snap 能够做到这一点。在晚期的前端开发中，我依附 JS 插件来创立滑块组件。有时，咱们须要一种简略的办法来疾速将元素制作成可滚动的容器。当初，多亏了 CSSS scroll snap，咱们能够简略做到这一点。

随着挪动设施和平板设施的衰亡，咱们须要设计和构建能够轻触的组件。以图库组件为例。用户能够轻松地向左或向右滑动以查看更多图像，而不是分层构造。

依据 CSS 标准，为开发者提供良好管制的滚动体验是引入 CSS scroll snap 的次要起因之一。它加强了用户体验，并使其更容易实现滚动体验。

——作者：Ahmad | 译者：前端小智

最近，因为 TravisCI 每每部署出错，而咱们的账户因为应用的较多，曾经超出了收费应用的限度，以此为契机，将 CI 从 Travis CI 迁徙到 GitHub Action。

Translate Project 是 LCTT 翻译组的次要合作我的项目，几百位译者通过 GitHub 进行围绕开源、Linux、软件工程等畛域的文章翻译，从 2013 年来，累计了大量的提交，以致我的项目下有十分多的文件。

Translate Project 借助于 CI 帮忙译者对根本的文章格局和拉取申请进行查看；并定时执行命令，以进行所有的申请查看，对于超时未实现翻译的工作进行回收；对于文章的状态进行标记，生成相应的徽章。

Travis CI 和 Github Action 在应用方面，其实总体差别不会太大，都是基于 YAML 文件格式来编写配置文件。不过，和 Travis CI 不同的是，Github Action 反对多个不同的配置文件，因而，你能够依据不同的场景，设定不同的配置文件，升高单个配置的文件的复杂度。

此外，因为咱们的脚本中依赖了一些 Travis CI 的环境变量，也须要将其替换为 Github Action 中的相应环境变量，从而确保脚本能够运行。

咱们在 TravisCI 上的 CI 配置文件如图

总体能够分为三块：

命令区：阐明了装置阶段和执行阶段的操作有哪些
条件区：指定了这个配置文件在哪些条件下会失效
部署区：写明了构建产物如何进行部署

在命令区中，有预置的装置过程和后续的执行过程。在装置过程中，装置了一些依赖，并将以后的 pages 资源克隆到本地，以继承上一次构建生成的材料。

在条件区则指明了仅作用于 master 分支

在部署区便是将后面命令区的执行后果进行部署。

在理论的执行过程中，还会依据环境变量不同，决定是否要执行特定的命令，这部分在后续的革新过程中，就能够调整部署，拆分到不同的文件中。

在实现了根本的剖析后，就能够建设新的 Action 配置文件了。因为根本的语法很相似，对于其中的不少内容能够进行间接套用。

比方，咱们的配置文件在间接套用后，后果如下

间接套用的文件曾经能够间接运行，不过，这里有很多不满足需要的中央，所以须要做一些批改。

因为咱们应用的 Badge 等生成脚本并非我所编写，所以在这一次的迁徙中，并不打算对齐进行调整，以避免出现故障。而脚本中依赖了一些变量，须要将其从新设置进去。

Github Action 提供了一些办法，能够让你手动设置环境变量。你能够在你的构建的步骤中，退出如下代码，从而在构建环境中设定 TRAVIS_BRANCH 和 TRAVIS_EVENT_TYPE 环境变量，确保你能够应用这个环境变量。

`- 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)”`

此外，因为 set-env 这个办法绝对比拟危险，你还须要在环境变量中，开启危险函数的执行。

`jobs:
  build:
    runs-on: ubuntu-latest
    env:
      ACTIONS_ALLOW_UNSECURE_COMMANDS: true
`

Github Action 和 TravisCI 不同的一点是你能够将你的 CI 文件拆分成多个文件，从而升高每一个独自的配置文件的复杂度。

依据后面对于流程的剖析，能够将咱们的 CI 流程拆分成三个局部：

生成 badge 文件，该当追随每一次提交进行
生成 status 文件，执行工夫较长，能够定期执行
依据拉取申请内容进行整顿，做核验

则将咱们的配置文件拆分成三个不同的文件：

也得益于拆离开，则在 checker 中就能够免于装置一些必要的依赖，从而精简 CI 流程，晋升 CI 的执行工夫。

在实现了配置文件的编写和拆分后，就能够进行本地的执行测试。Github Action 写完了，不免要执行一下，确保整个流程是失常的。

这个时候你能够装置工具（https://github.com/nektos/act），来在本地执行 Action，从而确认你的代码执行是正确的。

如果你是 macOS，只须要执行 brew install act 就能够装置 act 工具，来实现 act 的装置。

装置实现 act，就能够通过执行 act 命令来在本地执行 Action，比方，执行 act pull_request 来触发 GitHub 的拉取申请事件

通过本地测试后，再将你的配置文件推送到 GitHub 上，进行生产环境的测试即可。

通过上述的一些步骤，咱们实现了从 Travis CI 到 GitHub Action 的迁徙，此时，就能够移除我的项目根目录中的 .travis.yml 文件，彻底敞开 Travis CI。

在实现了根本的迁徙后，须要对代码中的一些历史问题进行修复。在第三步中，咱们对于 Travis-CI 的环境变量进行替换，但长期保护的我的项目该当尽量将这些未标注上下文的信息替换为有文档标注的，因而，咱们须要将其替换。

替换环境变量次要依赖 Github 官网的环境变量阐明，你能够参考官网文档。

简化后，配置文件从之前的 27 行，缩小至 17 行，变得更加的精简、易懂。

为了确保批改符合标准，咱们限度了新的拉取申请必须通过 CI 查看，能力合并进入 master 分支，因而，也须要批改相应的分支爱护规定，确保设定相应的爱护。

如果你依赖了环境变量，则须要进行相应的批改。或者能够像我一样，先通过 set-env 来让本地领有长期的环境变量，后续再逐渐进行迁徙。

Action 执行过程中会有两个局部。Action 自身流程依赖于 master 分支，但执行过程中调用的脚本是依据源决定的，因而，从平安角度来看，你该当尽可能将所有的流程放在 Action 中，而不是放在你的源码目录中。

在进行 Pull Request 测试的时候，须要一直触发不同的 Commit，你能够通过执行 git commit –allow-empty -m “Trigger notification” && git push 来触发一个空白的 commit，推送到 Github 后，就能够再次触发 pull request 的构建，晋升构建的效率。

通过对 TravisCI 的流程整顿、代码批改等流程，咱们将之前的 Travis-CI 迁徙至速度更快、性能更好的 GitHub Action，一方面能够优化咱们的工作流，另一方面，也让咱们的代码更加简洁明了。

对于还在应用 Travis CI 的我的项目来说，也能够思考迁徙到 GitHub Action 中，来优化本人的工作流。

——作者：白宦成

关于github:前端进阶不可错过的10个Github仓库CICD-平台迁移实践让网页提前预加载优化滚动提升用户体验丨思否技术周刊

1、前端进阶不可错过的 10 个 Github 仓库

build-your-own-x

JavaScript Algorithms

30 Seconds of Code

Node Best Practices

RealWorld example apps

clean-code-javascript

javascript-questions

awesome-design-patterns

developer-roadmap

Free Programming Books

2、InstantClick.js 插件，让网页提前预加载，网站无刷新跳转页面 **

3、应用 CSS Scroll Snap 优化滚动，晋升用户体验！

为什么要应用 CSS Scroll Snap

4、CI/CD 平台迁徙实际：从 Travis-CI 转移到 Github Action

我的项目介绍

迁徙思路

革新实际

1. 剖析之前的 CI 流程

2. 间接套用配置文件

3. 复原 Travis CI 的环境变量

4. 拆分配置文件

5. 测试 CI 的运行状况

6. 移除 Travis-CI

7. 替换环境变量

8. 批改 GitHub 的分支爱护条件

一些注意事项

1. 环境变量不同

2. Action 运行依赖要注意安全

3. 如何触发 CI 的 Pull Request 查看？

总结