原文：https://developers.google.com/web/tools/puppeteer/articles/ssr#inline [https://developers.google.com/web/tools/puppeteer/articles/ssr#inline] TL;DR: 无头模式的 Chrome（Headless Chrome） 可以成为将动态 JS 站点转化成为静态 HTML 页面的入门工具。在 Web 服务器上运行它能够让你预渲染任何具备任何现代 JS 特性的页面，使得页面内容加载更快而且可以被爬虫工具索引到。 这篇文章的技术方案为大家展示了如何使用 ... read more
自从我接触前端以来，接手的项目里面很大部分都是前后端分离的，后端只提供接口，前端根据后端接口渲染出实际页面。个人觉得这是一个挺好的模式，前后端各自负责各自的模块，分工明确，而且也给前端更大的发挥空间。与以前套模板的模式不同，前后端分离以后，前端跟后端的沟通绝大部分都是通过前端主动向后端发起请求来完成的。而前端的请求又绝大部分是由 Ajax 构成的，Ajax 是一种非常方便的获取数据的方式。但是，一旦 Ajax 碰上跨域，那么问题就会麻烦很多。这篇文章主要梳理了我在项目开发里面碰到的一些关于跨域请求的问题，当然也会有一些关于跨域请求的一些背景知识。PS：文末有个小彩蛋哦😄 严格来说，跨域请 ... read more
今年三月在张大妈的诱惑之下，我终于剁手了传说中的电磁炉——网件 R6300V2 路由器，开始了我的路由器折腾之路。其实一开始我的想法是想买一个可以刷 OpenWRT 固件的路由器，然后在路由器运行 Shadowsocks ，实现网络的自动代理功能。其实满足这个需求的路由器实在是太多了，一百来块的路由器就能实现这个目的。但是在张大妈逛得越久心里就越不踏实，想着要不一步到位，干脆买个双频的，性能强悍一些的，顺便还能够挂载移动硬盘的，当个迷你 NAS ，想想都觉得很美好。于是乎，R6300V2 就成了不二之选。 ... read more
说起来也挺惊讶的，自己在前端这条路上已经走了三年多了。三年多的时间积累，让我这个『自学成柴』的小伙子多多少少也有了一些经验。经验告诉我，一个顺手高效的编辑器能够让你的开发效率得到很大的提高。印象中我从一开始就一直使用 Sublime Text 3 作为我的编辑器，期间从未改变过。 当然这并不是说我没有尝试过其他编辑器或者 IDE ，事实是我试过 Brackets，Atom， VS Code， 以及 JetBrains 的 Webstorm ，这几款编辑器/IDE 都挺优秀的。但是感觉都不太适合我。我还是钟爱 ... read more
什么是 FLEXBOX ? Flexbox 是指 CSS 中将元素的display规则设置为flex或者inline-flex时所展示出来的布局模式。主要为了解决什么问题？ 1. 高效灵活地布局，对齐。在 Flexbox 尚未出现之前，页面的布局通常都是用浮动或者绝对定位和相对定位来实现。布局方式不多，但是也勉强可用。但是到后来，随着前端技术的快速发展以及页面布局需求的快速迭代，传统的布局方式在越来越酷炫和高大上的设计稿前面，就显得表现力不足以及布局变得麻烦而且不够灵活。特别是对于元素的对齐，往往得花费一定的精力使用各种技巧才能实现。Flexbox 这一布局方式的出现则可以看做是为了解决布局 ... read more
故事的起因来自牛客网的一个测试 [http://www.nowcoder.com/ta/front-end]，里面有一道数组去重的题，题目如下：之前刚好碰到过数组的去重这个问题，于是按照之前的印象，想都没想就写下：Array.prototype.uniq = function () { var map = {}; return this.filter(function (item) { if (map[item]) { return false; } else { map[item] = true; return true; } }); }; 写完之后鸡冻 ... read more
如果你是一个前端开发人员的话，那么难免会遇上这样的情况console.log(0 == false); // true console.log('' == false); // true console.log([] == false); // true console.log(0 === false); //false console.log('' === false); //false console.log([] === false); // false 不熟悉 JavaScript 的开发者也许会问：== 为啥既然有了==了，还要===干啥？这两者有什么区别？== ==顾名思义， ... read more
什么是 GOOGLE MATERIAL DESIGN ? Click to run embed content: https://www.youtube.com/embed/Q8TXgCzxEnw?feature=oembed * Google Material Design [http://www.google.com/design/] * Material design Introduction [http://www.google.com/design/spec/material-design/introduction.html] RIPPLE CLICK EFFECT IN WEB ... read more
在 PROMISE 产生之前的 JAVASCRIPT 一说起 JavaScript，给人印象最深的，应该是活在浏览器里面的各种各样的脚本了。但是如今 Node.js 发展非常迅速，npm 社区也非常活跃，因此也越来越多人关注后端的 JavaScript 。不得不说，在 JavaScript 里面，事件绑定以及事件处理是一个非常重要的部分。 前端部分，诸如鼠标点击事件的绑定，以及键盘按键的绑定，以及和后台打交道的 Ajax 等，都使用到了事件机制。最简单的一个点击事件如下：var target = document.getElementById('target'); target.addEv ... read more
也许你也有经历过这样的情况：明明自己已经为某个元素指定了一条 CSS 规则了，怎么在浏览器中显示出来的却跟期望的相差很多呢？你是否有仔细研究过这里面的问题？你是否有了解到 CSS 样式的优先级算法？如果没有，那么可以请接下来看看我对 CSS 优先级算法的一个讲解吧。 在开始之前： 我们先来了解一下 CSS 选择器都有哪些： * 通配选择符：* { SRule }，如： * { font-size: 14px; } * 类型选择符：element { sRule }，如： div { background: #000000; } * 属性选择符：element[attr ... read more