20180504 前端开发日报-前端开发博客

如何在疲劳的JS世界中持续学习；JavaScript 正则表达式进阶指南；CSS网格布局（Grid）完全教程；JavaScript 是如何工作的：Service Workers, 它们的生命周期和使用案例；CSS Grid重构Medium的文章布局；Graph 数据可视化：JS 自动布局有向无环图；Webpack(含 4)配置详解——从 0 配置一套开发模板；腾讯 Web 前端实习面经

如何在疲劳的JS世界中持续学习作者简介 cnfi 蚂蚁金服·数据体验技术团队本文翻译自《Stay updated in JS fatigue universe》，并对内容有所补充和修改。部分内容参考《HOW TO KEEP UP TO DATE ON  
JavaScript 正则表达式进阶指南摘要：正则表达式是程序员的必备技能，想不想多学几招呢？本文用JavaScript的exec方法来测试正则表达式。例如，正则表达式/F.*g/会匹配“以F开头，以g结尾的字符串”，因此可以匹配”Hello, Fundebug!”中的Fundebug，exec方法会返回一个数组，其第一个元素为所匹配的子字符串。 /F.*g/.exec(“Hello,…
CSS网格布局（Grid）完全教程 CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。创建本教程的目的是为了帮助您更好地理解和学习网格布局（Grid）。目录网格容器显示网格轨道的最小
JavaScript 是如何工作的：Service Workers, 它们的生命周期和使用案例原文：How JavaScript works: Service Workers, their lifecycle and use cases 译者：neal1991 welcome to star my articles-translator , providing you advanced articles translation. Any suggestion, please issue or contact me LICENSE: MIT 这是专门探索 JavaScript …
CSS Grid重构Medium的文章布局欢迎关注富途web开发团队，缺人从众好像有段时间没有发文了。最近一直在改博客，因为hexo博客的SEO并不太友好，文章页面权重太低。为了提高文章在搜索引擎中的权重，小编可需要花大把时间去整整了。现在已经去掉了博客的tags，但是作者页面依然高于文章的权重
Graph 数据可视化：JS 自动布局有向无环图有向无环图（DAG）布局有向无环图及其布局算法有向无环图（directed acyclic graph，以下简称 DAG）是一种常见的图形，其具体定义为一种由有限个顶点和有限条带有方向的边组成的图，并且其中任意一个顶点都不能沿着边再次指向自己。 DAG 可以用于模型化许多不同种类的信息，因此将一个 DAG 数据结构可视化的需求…
Webpack(含 4)配置详解——从 0 配置一套开发模板前言源代码熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置，但是为了满足我们的项目需求还是要自己进行配置，不过我们可以使用一些 webpack 的预设值。同时 webpack 也拆成了两部分，webpack 和 webpack-cli，都需要本地安装。我们通过实现一个 vue 的开…
腾讯 Web 前端实习面经一面（4.16 下午，电话，40 min）通知说 4 月 16 号下午的电面，上午面试官还专门打电话来问下午的时间是否合适，感觉人很不错。下午面试官准时打来电话，是个很 hice 的小哥哥，广州 WXG 的，上来主动活跃气氛~ 长时间聊项目（面试官：试图打动我）项目中生成 PDF 的会占用 CPU 很多吧，…
四月前端知识集锦（每月不可错过的文章集锦）目前自己组建的一个团队正在写一份面试图谱，将会在七月中旬开源。内容十分丰富，第一版会开源前端方面知识和程序员必备知识，后期会逐步写入后端方面知识。因为工程所涉及内容太多（目前已经写了一个半月），并且还需翻译成英文，所以所需时间较长。本篇的一些知识点也取自面试图
前端代码质量进阶：自定义 eslint 规则校验业务逻辑自定义 eslint 规则校验代码业务逻辑 eslint 是 JavaScript 社区中主流的 lint 工具，提供的大量规则有效的保障了许多项目的代码质量。本文将介绍如何通过自定义 eslint 检查规则，校验项目中特有的一些业务逻辑，如 i18n、特殊作用域、特殊 API 使用规范性等。代码静态分析与 eslint 代码静态分意指是不需要实际…
GitHub Pages 对自定义域名支持 HTTPS 如果移动端访问不佳，请使用 ==> Github Pages 版。 GitHub Pages Blog 原文：Custom domains on GitHub Pages gain support for HTTPS 在 2018-05-
快速定位线上 Node.js 内存泄漏问题
Webpack中publicPath详解最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。 output outpu
手把手教你写vue裁切预览组件 vue版本裁切工具，包含预览功能最终效果： qiuyaofan.github.io/vue-crop-de… 源码地址： github.com/qiuyaofan/v… 第一步：先用vue-cli安装脚手架（不会安装的看 vue-cli官网） // 初始化
那些好玩却尚未被 ECMAScript 2017 采纳的提案原文地址：Interesting ECMAScript 2017 proposals that weren’t adopted 原文作者：Kaelan Cooter 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译者：C
致敬 React: 为 Vue 引入容器组件和展示组件如果你使用过 Redux 开发 React，你一定听过容器组件（Smart/Container Components）或展示组件（Dumb/Presentational Components），这样划分有什么样的好处，我们能否能借鉴这种划分方式来编写 V
如何基于 Weex 实现创新交互体验？手淘开源技术 BindingX 案例解析阿里妹导读：随着手淘流量红利时代的结束，如何通过精细化运营、不断提升App用户体验，成了我们新的目标。手淘技术团队童鞋在有限的条件下，巧妙利用Weex，实现了以往用纯native才能实现的卡片式交互形态，给用户创造了小惊喜（该技术已开源）。下面让我们一起来深入了解。文章一开始，我们先来看两张效果图…
使用 Nginx 编译 Sass 和 Scss 前端的小伙伴对于 Sass 或 Scss（以下统称 Sass）应该并不陌生，他是一种 CSS 预处理语言，使用 Sass 可以极大简化 CSS 代码的编写和维护。通常情况下，我们在开发环境下使用 Sass 是在 webpack dev server 或者 Gulp 环境下，通过监听文件修改来实时编译 Sass 并输出 CSS 到浏览器。接下来，我想给大家介…
Proton Native | 基于 React 技术栈实现桌面应用 Logo by @elisiri Create native desktop applications through a React syntax, on a
【20180503 前端开发日报】如何阅读大型前端开源项目的源码；从JS垃圾回收机制和词源来透视闭包；异步多图加载这件小事儿（Promise与async)；给 JavaScript 开发者讲讲函数式编程；CSS页面渲染优化属性will-change；《HelloGitHub》第 25 期；we…详情→
从零开始创建一个React应用我的同事 – 罗伯特 – 为前端迷们制作了一个超级简单的本地API服务器。您可以使用单个命令将其启动，并通过使用它们构建应用程序来使用它来学习客户端框架。该服务器有几个端点，认证和一个文档页面，让你真正专注于客户端。我决定为这个API