【翻译】Preload: What Is It Good For?
translate

【翻译】Preload: What Is It Good For?

原链接:https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/作者:Yoav WeissPreload 是新推出的一个 web 标准,其目的主要是用来优化 Web 性能,并且给 Web 开发者提供更强大的网络加载控制权。它为 Web 开发者提供了自定义页面资源加载逻辑的能力,使得可以免于遭受类似脚本资源加载器所碰到的性能问题。几周前,我在 Chrome Canary 上发布了 Preload 的功能支持,如无意外 bug

  • serenader
    serenader
16 min read
Synology NAS: 备份功能
article

Synology NAS: 备份功能

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

  • serenader
    serenader
15 min read
利用 Synology NAS 打造私人全能服务器
article

利用 Synology NAS 打造私人全能服务器

手头的群晖 DS918+ 买回来几个月了,这段时间使用起来非常稳定好用,DSM 系统简单易用,但是功能非常强大,真心觉得这钱花得值,尽管群晖的 NAS 一直以来都被人吐槽是买软件送硬件。因为其实买这台 NAS 的钱都够我去配置一台中等配置的电脑了。但是无奈人家软件就是做得好,这点是不可置疑的。其实这不是我第一次使用群晖的 DSM 系统。在一两年前我就用 ESXi 在虚拟机里面运行过 DSM ,俗称黑群晖。使用黑群晖的体验其实跟正版的群晖没什么本质上的区别,只是数据没有保障。第一次体验 DSM,真心被它的各种套件给震惊到,我的大部分需求都能够通过 DSM 系统外加一些套件来实现。但是无奈于担心黑群晖稳定性以及数据安全性的问题,

  • serenader
    serenader
2 min read
【翻译】Headless Chrome: an answer to server-side rendering JS sites
ssr

【翻译】Headless Chrome: an answer to server-side rendering JS sites

原文:https://developers.google.com/web/tools/puppeteer/articles/ssr#inline TL;DR: 无头模式的 Chrome(Headless Chrome) 可以成为将动态 JS 站点转化成为静态 HTML 页面的入门工具。在 Web 服务器上运行它能够让你预渲染任何具备任何现代 JS 特性的页面,使得页面内容加载更快而且可以被爬虫工具索引到。 这篇文章的技术方案为大家展示了如何使用 Puppeteer 的 API 来为一个

  • serenader
    serenader
22 min read
JavaScript 中的 HTTP 跨域请求
http

JavaScript 中的 HTTP 跨域请求

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

  • serenader
    serenader
17 min read
记一次网件 R6300V2 路由器救砖经历
r6300v2

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

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

  • serenader
    serenader
15 min read
个性化定制 Sublime Text 3
sublimetext

个性化定制 Sublime Text 3

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

  • serenader
    serenader
18 min read
CSS3 中的 Flexbox 详解
css

CSS3 中的 Flexbox 详解

什么是 Flexbox ? Flexbox 是指 CSS 中将元素的 display 规则设置为 flex 或者 inline-flex 时所展示出来的布局模式。 主要为了解决什么问题? 高效灵活地布局,对齐。 在 Flexbox 尚未出现之前,页面的布局通常都是用浮动或者绝对定位和相对定位来实现。布局方式不多,但是也勉强可用。但是到后来,随着前端技术的快速发展以及页面布局需求的快速迭代,传统的布局方式在越来越酷炫和高大上的设计稿前面,就显得表现力不足以及布局变得麻烦而且不够灵活。特别是对于元素的对齐,往往得花费一定的精力使用各种技巧才能实现。Flexbox 这一布局方式的出现则可以看做是为了解决布局和对齐这个问题的一种尝试。 解决移动端上页面布局的难题。 如今的智能设备越来越多,设备的尺寸也越来越多。很明显,

  • serenader
    serenader
10 min read
JavaScript Promises 初探
javascript

JavaScript Promises 初探

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

  • serenader
    serenader
19 min read
合理利用闲置的安卓设备
闲置

合理利用闲置的安卓设备

不得不承认,近几年,电子产品的迭代可真的是非常快。就拿手机来说,每隔半年就有一款新的旗舰机型。安卓手机(平板)的更新换代非常快,常常是今年买的最新旗舰手机(平板)过了一年之后就变成老爷机了。所以,可以预料到的是,每次手机的更新换代之后都会有大量的闲置手机出现。那么要怎么处置这些闲置的手机呢?丢了又舍不得,卖了又没人要。放着吃灰又觉得好浪费。 其实,对于闲置手机(平板)来说,还是有发挥余温的机会的。接下来我会讲讲自己折腾过的几种方案,就当作一个记录。 1. 翻墙 使用 fqrouter2 进行翻墙 fqrouter2 是一个可以实现将手机作为一个翻墙路由器供其他设备上网用的软件。 使用

  • serenader
    serenader
10 min read
CSS Specificity 以及 CSS 规则优先级详解
css

CSS Specificity 以及 CSS 规则优先级详解

也许你也有经历过这样的情况:明明自己已经为某个元素指定了一条 CSS 规则了,怎么在浏览器中显示出来的却跟期望的相差很多呢?你是否有仔细研究过这里面的问题?你是否有了解到 CSS 样式的优先级算法?如果没有,那么可以请接下来看看我对 CSS 优先级算法的一个讲解吧。 在开始之前: 我们先来了解一下 CSS 选择器都有哪些: 通配选择符: * { SRule } ,如: * { font-size: 14px; } 类型选择符: element { sRule } ,如: div { background: #000000; } 属性选择符: element[attr] { sRule

  • serenader
    serenader
6 min read
JavaScript 中的 this 用法以及 call(apply) 的理解
javascript

JavaScript 中的 this 用法以及 call(apply) 的理解

想要深入了解 JavaScript 这门语言,一个必须掌握的知识点就是对 `this` 的理解。其中, `call` 和 `apply` 又与 `this` 有着密切的联系。趁现在有空,在网上看了一些教程之后,自己根据印象将其整理在这篇博文中。 this 是什么 this 是 JavaScript 中的一个关键字。它用在对象的方法中。 this 总是指向调用该方法的对象。举个最简单的例子: 当 this 在对象的方法中 var obj = { name : 'object',

  • serenader
    serenader
6 min read

Subscribe to Serenader