如果您想了解前端周刊第48期：VueConf2017+ProgressiveWEBAPP的相关知识，那么本文是一篇不可错过的文章，我们将对前端的vue进行全面详尽的解释，并且为您提供关于(转)PWA（

如果您想了解前端周刊第48期：Vue Conf 2017 + Progressive WEB APP的相关知识，那么本文是一篇不可错过的文章，我们将对前端的vue进行全面详尽的解释，并且为您提供关于(转)PWA（Progressive Web App）渐进式Web应用程序、2018-ECCV-Progressive Neural Architecture Search-论文阅读、2019-ICCV-Progressive Differentiable Architecture Search Bridging the Depth Gap Between Search an...、ActionController :: RoutingError没有路由与[GET]“ / vendor / assets / stylesheets / bootstrap.min.css”匹配 app / assets / stylesheets / application.css： app / assets / javascript / application.js： app / views / layout / application.html.erb： app / j的有价值的信息。

• 前端周刊第48期：Vue Conf 2017 + Progressive WEB APP（前端的vue）
• (转)PWA（Progressive Web App）渐进式Web应用程序
• 2018-ECCV-Progressive Neural Architecture Search-论文阅读
• 2019-ICCV-Progressive Differentiable Architecture Search Bridging the Depth Gap Between Search an...
• ActionController :: RoutingError没有路由与[GET]“ / vendor / assets / stylesheets / bootstrap.min.css”匹配 app / assets / stylesheets / application.css： app / assets / javascript / application.js： app / views / layout / application.html.erb： app / j

前端周刊第48期：Vue Conf 2017 + Progressive WEB APP（前端的vue）

共 2615 字，读完需 5 分钟，速读需 2 分钟，首发知乎专栏前端周刊。根据前端趋势观察，本期收录的内容有两个重点：Vue.js 周边，包括各种脚手架、工具库、技术交流大会；PWA（Progressive Web App） 周边，包括视频、开发工具、应用示例。以下是具体内容内容，请享用！

技术动态

VueConf 全球技术大会将于 5 月 20 在北京举办

全球首届 VueConf 将于 5 月 20 日在北京举办，目前正在筹备过程中，近期会发布更多购票相关细节，感兴趣的小伙伴请保持关注了。同时，他们也在寻找讲师和赞助商。有兴趣有实力的公司或者朋友可以开始去原文联系举办方了。

nginScript：在 Nginx 中使用 Javascript

Javascript 的使用范围真是越来越广，我们都知道 Nginx 脚本语言中 Lua 始终是不二之选，本周 Nginx 官方推出了 Javascript 支持，虽然和 Node.js 有区别，但是可以用 Javascript 在 Nginx 中干很多事情，比如请求处理、日志处理。

npm 新功能：支持免费的机构账号

npm 本周宣布支持免费的机构账号，能省去不少自己造轮子搭建私有 npm registry
的麻烦，免费机构账号的限制就是所有的仓库必须是开源的，免费版机构账号支持部分收费版的功能，比如组员管理。需要提醒的是这个就像是域名。

Chrome 58 Beta 版发布：支持 PWA 全屏

Google 本周发布了 Chrome 58 Beta 版，其中包含了多个更新，如 IndexedDB 2.0、Iframe 导航的改进，亮点是支持 PWA 应用全屏。在我看来，PWA 跟微信的小程序是有异曲同工之妙，大的互联网公司都在布局，聪明的开发者该怎么做呢？

文章教程

PWA 在饿了么的实践经验

本篇旨在和大家分享「饿了么 M 站」在 PWA 改造中的实践经验。涉及到的方面有：PWA 线上部署的准备工作、多页应用的 prerender 优化、实践过程中踩到的（和推进解决的）坑。而关于 PWA 的一些基础资料，可以看本周刊收录的其他资料。

浅谈前端状态管理

近两年前端技术的发展如火如荼，大量的前端项目都在使用或转向 Vue 和 React 的阵营，由前端渲染页面的单页应用占比也越来越高，这就代表前端工作的复杂度也在直线上升，前端页面上展示的信息越来越多也越来越复杂，任何状态都需要进行管理，这篇文章聊的就是前端状态管理，分上下两篇，下篇自己找。

开发工具

TestCafe：现代 WEB 应用自动化测试利器

TestCafe 是纯 Node.js 编写的现代 Web 应用自动化测试工具，专用来进行 E2E 测试，不需要安装任何依赖就能自己启动浏览器、运行测试、收集测试结果，不需要任何插件就能支持各种现代浏览器，有人专门写了文章用它来测试 Vue.js 应用。

pm86：生产环境的 Node.js 服务管理工具

pm86 基于 pm2，类似于美团的 pm2.5，都是用来管理 Node.js 服务的工具，在命令行工具的基础上，提供了监控仪表盘，可以私有化部署，并且仪表盘使用 Vue.js 开发，如果你想定制也很容易。

Eagle.js：基于 Vue.js 的 PPT 编写演示工具

Eagle.js 是一款基于 Vue.js 的 PPT 编写和演示工具，支持动画、自定义主题、可交互组件（非常适合在技术交流会上做 Demo 演示），并且能非常容易的实现组件、Slide、样式的重用。是个新轮子，并且还不是前端做的。

代码框架

unvue：简单好用的 Vue.js 同构应用脚手架

支持服务端渲染的 Vue.js 同构应用脚手架，架构在具有强大的 SSR 能力的 Vue Router 之上。同时支持代码分割、Webpack 配置自定义、以及类似于 Next.js 的 插件机制。

Vue.js 2 + Webpack 2 + TypeScript 2 应用脚手架

如果你想用非常前沿的前端技术来开发 WEB 应用，这会是非常值得考虑的种子项目，内含 Vue.js 2.2、Webpack 2、TypeScript 2，支持热更新，工程化方面支持单元测试、覆盖率报告、静态资源编译和打包优化。

PWA 版本的 CNode 社区

CNode PWA 是使用 React、React Router 和 Redux 构建的 Progressive Web App，基于 CNode 社区提供的 API 开发，对于在学习 PWA 的同学是个非常不错的学习材料。GitHub 首页支持扫码直接预览，可以直接安装到桌面，体验流畅。

视频演讲

学习 PWA 的 10 段最佳视频

渐进式 WEB 应用，或者 Progressive Web App，亦被简称为 PWA，正被越来越多的开发者和互联网公司关注和讨论，因其基于现代的 WEB 技术，能够提供离线优先的、可以媲美原生的、轻量级 APP 体验。诸如 Google、Microsoft、Twitter 等大的互联网公司都在跟进。那么究竟什么是 PWA？开发 PWA 使用了哪些技术？需要借助什么工具？如果你想学，这 10 段视频就是为你准备的。

像擎天柱变身那样转换代码：AST 入门指南

有没有好奇 babel、less、sass、postcss 这些代码转换工具是怎么工作的？他们都有的一个机理就是 AST（Abstract Syntax Tree，抽象语法树），AST 是啥？有什么用？看看这段 48 分钟的视频，你就能理解清楚。需翻墙。

One More Thing

本文作者王仕军，商业转载请联系作者获得授权，非商业转载请注明出处。如果你觉得本文对你有帮助，请点赞！如果对文中的内容有任何疑问，欢迎留言讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：《前端周刊：让你在前端领域跟上时代的脚步》。

Happy Hacking

(转)PWA（Progressive Web App）渐进式Web应用程序

PWA

  编辑  讨论

https://baike.baidu.com/item/PWA/22378897?fr=aladdin

http://tech.it168.com/a2017/1113/3179/000003179550.shtml

3分钟告诉你什么是渐进式Web应用程序！

2018-ECCV-Progressive Neural Architecture Search-论文阅读

PNAS

2018-ECCV-Progressive Neural Architecture Search

• Johns Hopkins University(霍普金斯大学) && Google AI && Stanford
• GitHub：300+ stars
• Citation：504

Motivation

current techniques usually fall into one of two categories: evolutionary algorithms(EA) or reinforcement learning(RL).

Although both EA and RL methods have been able to learn network structures that outperform manually designed architectures, they require significant computational resources.

目前的两种nas方法，EA和RL，存在计算代价高昂的问题

Contribution

we describe a method that requiring 5 times fewer model evaluations during the architecture search.

只需要评估1/5的模型。

We propose to use heuristic search to search the space of cell structures, starting with simple (shallow) models and progressing to complex ones, pruning out unpromising structures as we go.

渐进式的搜索，从浅层网络开始，逐步搜索复杂网络。

Since this process is expensive, we also learn a model or surrogate function(替代函数) which can predict the performance of a structure without needing to training it.

提出一种近似评估模型好坏的评估函数（预测器），直接预测模型性能，而不是从头训练候选网络。

Several advantages：

First, the simple structures train faster, so we get some initial results to train the surrogate quickly.

代理网络比较小，训练速度快（代价可以忽略不计）。

Second, we only ask the surrogate to predict the quality of structures that are slightly different (larger) from the ones it has seen

预测器只需要预测稍微不同的网络。

Third, we factorize(分解) the search space into a product(乘积) of smaller search spaces, allowing us to potentially search models with many more blocks.

将大的搜索空间分解为小的搜索空间的乘积。

we show that our approach is 5 times more efficient than the RL method of [41] in terms of number of models evaluated, and 8 times faster in terms of total compute.

效率相比RL方法提高5倍，总计算量快了8倍。

Method

Search Space

we first learn a cell structure, and then stack this cell a desired number of times, in order to create the final CNN.

先学习cell结构，再堆叠cell到目标层数。

一个cell接收HxWxF的tensor，如果cell的stride=1，输出HxWxF的tensor，如果stride=2，输出H/2 x W/2 x 2F的tensor。

一个cell由B个block组成，每个block有2个input和1个output，每个block可以用一个五元组表示\(\left(I_{1}, I_{2}, O_{1}, O_{2}, C\right)\)，第c个cell的输出表示为\(H^c\)，第c个cell的第b个block的输出表示为\(H^c_b\)。

每个block的输入为当前cell中，在 {此block之前所有block的输出} 和 {上一个cell的输出，上上个cell的输出} 的集合。

Operator的选择空间有8种操作。

we stack a predefined number of copies of the basic cell (with the same structure, but untied weights 不继承权重 ), using either stride 1 or stride 2, as shown in Figure 1 (right).

找到最佳cell结构后，堆叠预定义的层数，构成右边的完整网络，不继承权重（重新训练）。

The number of stride-1 cells between stride-2 cells is then adjusted accordingly with up to N number of repeats.

Normal cell（stride=1）的数量，取决于N（超参）。

we only use one cell type (we do not distinguish between Normal and Reduction cells, but instead emulate a Reduction cell by using a Normal cell with stride 2),

我们没有区分normal cell 和Reduction cell，仅将Normal cell的stride设置为2作为Reduction cell。

Progressive Neural Architecture Search

Many previous approaches directly search in the space of full cells, or worse, full CNNs.

之前的方法直接搜索完整的cell结构，更糟糕的是整个cnn。

While this is a more direct approach, we argue that it is difficult to directly navigate in an exponentially large search space, especially at the beginning where there is no knowledge of what makes a good model.

尽管这种方式很直接，但搜索空间太大，而且一开始我们没有任何先验知识指导我们在巨大的搜索空间往哪个方向搜索。

从每个cell含有1个block开始搜索。训练所有可能的\(B_1\)，用\(B_1\)训练预测器，然后将\(B_1\)展开为\(B_2\)。

训练所有可能的\(B_2\)代价太大，我们使用预测器来评估所有\(B_2\)-cell的性能并选出最佳的K个\(B_2\)-cell，重复此过程（用选出来K个\(B_2\)-cell训练预测器，将选出的K个\(B_2\)-cell展开为\(B_3\)，再用预测器选出最佳的K个...）。

Performance Prediction with Surrogate Model

Requirement of Predictor：

• Handle variable-sized inputs（接受可变输入）
• Correlated with true performance（预测值与真实值得相关性）
• Sample efficiency（简单高效）
• The requirement that the predictor be able to handle variable-sized strings immediately suggests the use of an RNN.

Two Predictor method

RNN and MLP（多层感知机）

However, since the sample size is very small, we fit an ensemble of 5 predictors, We observed empirically that this reduced the variance of the predictions.

由于样本很简单，因此集成5个预测器（RNN-ensemble，MLP-ensemble），可以减少方差。

Experiments

Performance of the Surrogate Predictors

we train the predictor on the observed performance of cells with up to b blocks, but we apply it to cells with b+1 blocks.

在{B=b}上训练，在{B=b+1}的集合上预测。

We therefore consider predictive accuracy both for cells with sizes that have been seen before (but which have not been trained on), and for cells which are one block larger than the training data.
同时考虑在{B=b}的未训练的cell集合上的预测准确率，和{B=b+1}的cell集合上的预测准确率。

在所有{B=b}的cell集合中随机选择10k个作为数据集\(U_{b,1 :R}\)，训练20个epochs。

randomly select K = 256 models (each of size b) from \(U_{b,1 :R}\)to generate a training set \(S_{b,t,1:K}\);

从数据集U中随机选择256个作为每轮的训练集S。

一共会训练20*256=5120个数据点。

We now use this random dataset to evaluate the performance of the predictors using the pseudocode(伪代码) in Algorithm 2, where A(H) returns the true validation set accuracies of the models in some set H.

A(H) 返回cell的集合H训练后真实的准确率。

当B=b时，训练集为所有{B=b}的cell的一个子集，第一行为在所有{B=b}的cell的训练集(256*20=5120)上的预测结果和真实结果的相关性，
第二行为在所有{B=b+1}的cell的数据集(10k)上的预测结果和真实结果的相关性。

We see that the predictor performs well on models from the training set, but not so well when predicting larger models. However, performance does increase as the predictor is trained on more (and larger) cells.

预测器在训练集{B=b}上表现良好，但在较大的数据集{B=b+1}上表现不够好，但随着b的增加，越来越好。

We see that for predicting the training set, the RNN does better than the MLP, but for predicting the performance on unseen larger models (which is the setting we care about in practice), the MLP seems to do slightly better.

RNN方法的预测器在训练集{B=b}上表现更好，MLP在较大的数据集{B=b+1}上表现更好(我们关心的)

Conclusion

The main contribution of this work is to show how we can accelerate the search for good CNN structures by using progressive search through the space of increasingly complex graphs

使用渐进式（cell的深度逐渐增加）的搜索加速NAS

combined with a learned prediction function to efficiently identify the most promising models to explore.

使用可学习的预测器来识别潜在的最优网络。（引入P网络来搜索目标网络的最佳结构。eg. 用C网络来搜索B网络的最佳结构，而B网络又是来搜索A网络的最佳结构，套娃）

The resulting models achieve the same level of performance as previous work but with a fraction of the computational cost.

用小代价达到了了SOTA

Appendix

2019-ICCV-Progressive Differentiable Architecture Search Bridging the Depth Gap Between Search an...

P-DARTS

2019-ICCV-Progressive Differentiable Architecture Search Bridging the Depth Gap Between Search and Evaluation

• Tongji University && Huawei
• GitHub： 200+ stars
• Citation：49

Motivation

Question：

• DARTS has to search the architecture in a shallow network while evaluate in a deeper one.
• DARTS在浅层网络上搜索，在深层网络上评估（cifar search in 8-depth， eval in 20-depth）。
• This brings an issue named the depth gap (see Figure 1(a)), which means that the search stage finds some operations that work well in a shallow architecture, but the evaluation stage actually prefers other operations that fit a deep architecture better.
• 
• Such gap hinders these approaches in their application to more complex visual recognition tasks.

Contribution

• propose Progressive DARTS (P-DARTS), a novel and efficient algorithm to bridge the depth gap.

Bring two questions：

Q1： While a deeper architecture requires heavier computational overhead

• we propose search space approximation which, as the depth increases, reduces the number of candidates (operations) according to their scores in the elapsed search process.

Q2：Another issue, lack of stability, emerges with searching over a deep architecture, in which the algorithm can be biased heavily towards skip-connect as it often leads to rapidest error decay during optimization, but, actually, a better option often resides in learnable operations such as convolution.

• we propose search space regularization, which (i) introduces operation-level Dropout [25] to alleviate the dominance of skip-connect during training, and (ii) controls the appearance of skip-connect during evaluation.

Method

search space approximation

在初始阶段，搜索网络相对较浅，但是cell中每条边上的候选操作最多（所有操作）。在阶段 \(S_{k-1}\)中，根据学习到的网络结构参数（权值）来排序并筛选出权值（重要性）较高的 \(O_k\) 个操作，并由此搭建一个拥有 \(L_k\) 个cell的搜索网络用于下一阶段的搜索，其中， \(L_k > L_{k-1} , O_k < O_{k-1}\) .

这个过程可以渐进而持续地增加搜索网络的深度，直到足够接近测试网络深度。

search space regularization

we observe that information prefers to flow through skip-connect instead of convolution or pooling, which is arguably due to the reason that skip-connect often leads to rapid gradient descent.

实验结果表明在本文采用的框架下，信息往往倾向于通过skip-connect流动，而不是卷积。这是因为skip-connect通常处在梯度下降最速的路径上。

the search process tends to generate architectures with many skip-connect operations, which limits the number of learnable parameters and thus produces unsatisfying performance at the evaluation stage.

在这种情况下，最终搜索得到的结构往往包含大量的skip-connect操作，可训练参数较少，从而使得性能下降。

We address this problem by search space regularization, which consists of two parts.

First, we insert operation-level Dropout [25] after each skip-connect operation, so as to partially ‘cut off’ the straightforward path through skip-connect, and facilitate the algorithm to explore other operations.

However, if we constantly block the path through skip-connect, the algorithm will drop them by assigning low weights to them, which is harmful to the final performance.

然而，持续地阻断这些路径的话会导致在最终生成结构的时候skip-connect操作仍然受到抑制，可能会影响最终性能。

we gradually decay the Dropout rate during the training process in each search stage, thus the straightforward path through skip-connect is blocked at the beginning and treated equally afterward when parameters of other operations are well learned, leaving the algorithm itself to make the decision.

因此，作者在训练的过程中逐渐地衰减Dropout的概率，在训练初期施加较强的Dropout，在训练后期将其衰减到很轻微的程度，使其不影响最终的网络结构参数的学习。

Despite the use of Dropout, we still observe that skip-connect, as a special kind of operation, has a significant impact on recognition accuracy at the evaluation stage.

另一方面，尽管使用了Operations层面的Dropout，作者依然观察到了skip-connect操作对实验性能的强烈影响。

This motivates us to design the second regularization rule, architecture refinement, which simply controls the number of preserved skip-connects, after the final search stage, to be a constant M.

因此，作者提出第二个搜索空间正则方法，即在最终生成的网络结构中，保留固定数量的skip-connect操作。具体的，作者根据最终阶段的结构参数，只保留权值最大的M个skip-connect操作，这一正则方法保证了搜索过程的稳定性。在本文中， M=2 .

We emphasize that the second regularization technique must be applied on top of the first one, otherwise, in the situations without operation-level Dropout, the search process is producing low-qualityarchitectureweights, basedon which we could not build up a powerful architecture even with a fixed number of skip-connects.

需要强调的是，第二种搜索空间正则是建立在第一种搜索空间正则的基础上的。在没有执行第一种正则的情况下，即使执行第二种正则，算法依旧会生成低质量的网络结构。

Experiments

Cell arch in different Search Stage

cifar10

ImageNet

·

Conclusion

• we propose a progressive version of differentiable architecture search to bridge the depth gap between search and evaluation scenarios.

• The core idea is to gradually increase the depth of candidate architectures during the search process.

• 2Q: computational overhead and instability

• Search space approximate and Search space regularize

• Our research defends the importance of depth in differentiable architecture search， depth is still the dominant factor in exploring the architecture space.

ActionController :: RoutingError没有路由与[GET]“ / vendor / assets / stylesheets / bootstrap.min.css”匹配 app / assets / stylesheets / application.css： app / assets / javascript / application.js： app / views / layout / application.html.erb： app / j

如何解决ActionController :: RoutingError没有路由与[GET]“ / vendor / assets / stylesheets / bootstrap.min.css”匹配 app / assets / stylesheets / application.css： app / assets / javascript / application.js： app / views / layout / application.html.erb： app / j

我正在Rails上执行此应用程序，页面加载正常，但在控制台中显示：

Started GET "/vendor/assets/stylesheets/bootstrap.min.css" for ::1 at 2020-08-17 09:09:51 -0500

Started GET "/vendor/assets/javascripts/bootstrap.min.js" for ::1 at 2020-08-17 09:09:51 -0500
ActionController::RoutingError (No route matches [GET] 
"/vendor/assets/stylesheets/bootstrap.min.css"):
ActionController::RoutingError (No route matches [GET] 
"/vendor/assets/javascripts/bootstrap.min.js"):

在我的供应商文件夹中，我同时拥有文件夹，javascript和样式表，并分别位于各自的bootsrtrap.min中。 即使在application.html.erb中，我也有以下内容：

  <link href="vendor/assets/stylesheets/bootstrap.min.css" rel="stylesheet">
  <%= csrf_Meta_tags %>
  <%= stylesheet_link_tag    ''application'',media: ''all'',''data-turbolinks-track'': ''reload'' %>
  <%= javascript_include_tag ''application'',''data-turbolinks-track'': ''reload'' %>

</head>
<body>

  <!-- Navigation -->
  <nav>
    <div>
      <ahref="#">Instagram Clone</a>
      <buttontype="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
      </button>
      <divid="navbarResponsive">
        <ul>
          <li>
            <ahref="#">Home
              <span>(current)</span>
            </a>
          </li>
          <li>
            <ahref="#">About</a>
          </li>
          <li>
            <ahref="#">Services</a>
          </li>
          <li>
            <ahref="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Content -->
  <div>
    <div>
      <div>
        <%= yield %>
      </div>
    </div>
  </div>

  <!-- Bootstrap core JavaScript -->
  <!--<script src="vendor/jquery/jquery.slim.min.js"></script>-->
  <script src="vendor/assets/javascripts/bootstrap.min.js"></script>
    
</body>
</html>