serenader 站点

最新文章

A Notion Blog site

Blog post

Preload: What Is It Good For?

Preload 是新推出的一个 web 标准，其目的主要是用来优化 Web 性能，并且给 Web 开发者提供更强大的网络加载控制权。它为 Web 开发者提供了自定义页面资源加载逻辑的能力，使得可以免于遭受类似脚本资源加载器所碰到的性能问题。

Mr.serenader

resource hint前端javascripthtml翻译

Synology NAS: 备份功能

NAS 首当其冲的作用就是备份。对我来说，我需要进行备份的数据有个人的相片、工作的一些文件以及自己的一些私人文件，还有手机、电脑重要文件的备份。 Time Machine 备份对于 MacOS 系统来说，最简单的备份方式是使用 Time Machine 进行备份。Time Machine 是系统级别的备份，会为你整个 macOS 系统硬盘进行增量备份。Time Machine 一般是搭配移动硬盘来进行系统的备份，但是 DSM 也可以开启 Time Machine

Mr.serenader

nas群晖硬件折腾备份time machine

Headless Chrome: an answer to server-side rendering JS sites

原文：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 特性的页面，使得

Mr.serenader

前端headless chromejavascript翻译

JavaScript's Cross-Origin Request

自从我接触前端以来，接手的项目里面很大部分都是前后端分离的，后端只提供接口，前端根据后端接口渲染出实际页面。个人觉得这是一个挺好的模式，前后端各自负责各自的模块，分工明确，而且也给前端更大的发挥空间。 与以前套模板的模式不同，前后端分离以后，前端跟后端的沟通绝大部分都是通过前端主动向后端发起请求来完成的。而前端的请求又绝大部分是由 Ajax 构成的，Ajax 是一种非常方便的获取数据的方式。但是，一旦 Ajax 碰上跨域，那么问题就会麻烦很多。这篇文章主要梳理了我在项目开发里面碰到的一些关于跨域请求的问题，当然也会有一些关于跨域请求的一些背景知识。PS：文末有个小彩蛋哦😄 --------

Mr.serenader

前端javascriptcors跨域

记一次网件 R6300V2 路由器救砖经历

今年三月在张大妈的诱惑之下，我终于剁手了传说中的电磁炉——网件 R6300V2 路由器，开始了我的路由器折腾之路。其实一开始我的想法是想买一个可以刷 OpenWRT 固件的路由器，然后在路由器运行 Shadowsocks ，实现网络的自动代理功能。其实满足这个需求的路由器实在是太多了，一百来块的路由器就能实现这个目的。但是在张大妈逛得越久心里就越不踏实，想着要不一步到位，干脆买个双频的，性能强悍一些的，顺便还能够挂载移动硬盘的，当个迷你 NAS ，想想都觉得很美好。于是乎，R6300V2 就成了不二之选。

Mr.serenader

r6300v2硬件折腾路由器

Customize Your Sublime Text

说起来也挺惊讶的，自己在前端这条路上已经走了三年多了。三年多的时间积累，让我这个『自学成柴』的小伙子多多少少也有了一些经验。经验告诉我，一个顺手高效的编辑器能够让你的开发效率得到很大的提高。印象中我从一开始就一直使用 Sublime Text 3 作为我的编辑器，期间从未改变过。 当然这并不是说我没有尝试过其他编辑器或者 IDE ，事实是我试过 Brackets，Atom， VS Code， 以及 JetBrains 的 Webstorm ，这几款编辑器/IDE 都挺优秀的。但是感觉都不太适合我。我还是钟爱

Mr.serenader

sublime text编辑器

JavaScript 去重

故事的起因来自牛客网的一个测试 [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; } }); }; 写完之

Mr.serenader

== VS === ? The Evil or the Angel ?

如果你是一个前端开发人员的话，那么难免会遇上这样的情况 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 的开发者也许会问：== 为啥既然有了 == 了，还要 === 干啥？这两者有什么区别？== --

Mr.serenader

javascript前端

使用 CSS 实现 Material Design 的 Ripple Click Effect

什么是 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

Mr.serenader

cssmaterial design

JavaScript Promise 初探

在 PROMISE 产生之前的 JAVASCRIPT 一说起 JavaScript，给人印象最深的，应该是活在浏览器里面的各种各样的脚本了。但是如今 Node.js 发展非常迅速，npm 社区也非常活跃，因此也越来越多人关注后端的 JavaScript 。 不得不说，在 JavaScript 里面，事件绑定以及事件处理是一个非常重要的部分。 ---------------------------------------- 前端部分，诸如鼠标点击事件的绑定，以及键盘按键的绑定，以及和后台打交道的 Ajax 等，都使用到了事件机制。最简单的一个点击事件如下： var target = do

Mr.serenader

javascript前端promise