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
article

Synology NAS: 备份功能

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

  • serenader
    serenader
15 min read
article

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

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

  • serenader
    serenader
2 min read
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
http

JavaScript 中的 HTTP 跨域请求

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

  • serenader
    serenader
17 min read
r6300v2

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

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

  • serenader
    serenader
15 min read
sublimetext

个性化定制 Sublime Text 3

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

  • serenader
    serenader
18 min read
css

CSS3 中的 Flexbox 详解

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

  • serenader
    serenader
10 min read
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

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

JavaScript Trick (1)

1. 立即执行匿名函数 !function () { // code goes here }(); +function () { // code goes here }(); ~function () { // code goes here }(); 分析 以上代码作用都是声明一个匿名函数,并且立即执行。最常见的立即执行匿名函数的写法是: (function () { // code goes here })(); 先来解释一下这个常见的立即执行匿名函数的原理。 整个代码块其实可以这样分析: ( function () { } )() 其实就是看成是两对括号,然后一个匿名函数放在第一对括号里面。当 JavaScript 解释器遇到一对括号 () 的时候会把里面的内容解释成一个表达式。于是乎,括号内的匿名函数就先被执行了。

  • serenader
    serenader
3 min read
生活

A brand new day

A brand new day has come... A brand new day 是一首我挺喜欢的歌曲。虽然这首歌表达的意思并不是我现在想说的,但是我只想借用它的这句话, A brand new day 来形容现在的生活。 来到这里已经快一个星期了。明天算起的话就是正式第一周了。从刚来的第一天到现在,心路历程还是蛮复杂的。 想起上个星期五,在宿舍整夜无眠,睡不着总是打开手机屏幕看着时间一点一点的走过。 其实那个时候真的是很焦虑。因为那两天忙着面试忙着体检忙着找房子。乱七八糟的行程以及乱七八糟的心情。 本来找到了实习我应该挺开心的。这也是意料之外的事情了。但是没想到的是,由于实习地点的问题,引出了这么多麻烦的事情。

  • serenader
    serenader
16 min read
vps

在 Linux 服务器中创建属于自己的私人 Cloud

写了好长的文章结果一死机毛都没了。尼玛又得重新来过。Ghost 没有实时保存的功能真的很烂!!!! 这次不那么啰嗦了。 利用 ownCloud 可以在我们自己的服务器上面创建私人的 Cloud ,相当于私人网盘。因为 ownCloud 客户端比较全,所以打算试试。 服务器环境选择 CentOS, Web Server 组合使用 Lnmp。因为 Lnmp 占用的资源比较少,且用的人也多。不过就是配置相对麻烦一些。下面开始讲过程。 第一步 配置网络服务器 yum install php php-mysql php-dom

  • serenader
    serenader
6 min read
javascript

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

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

  • serenader
    serenader
6 min read
centos

在 Linux 系统下多线程下载网盘文件

其实这个东西很早以前就知道了,只是像这种需求不是很大的事情很容易就被自己忘记了。忘记了之后又要重新去找,麻烦。所以索性自己写一篇文章保存下来,方便自己查阅。 有玩 VPS 的人相信大多数 VPS 都是美国的,因为种类多而且便宜,性价比高。但是有时候又需要使用到 VPS 下载国内的一些资源。国内的资源现在来说大部分都可以在百度网盘里面找到。 百度网盘可以说算是比较稳定而且空间又大的网盘了。在以前我用的是 115 网盘,不过自从 115 关闭了大众分享之后,就很少使用了。要下载网盘的文件的话,如果是 Windows 操作系统的话可以很方便的下载。前提是网速还可以。但是在那些内存偏小装不起 GUI 操作界面的

  • serenader
    serenader
4 min read
javascript

(function(window, undefined){})(window)这种写法的原理

在看一些 jQuery 插件的时候经常会看到这样的写法: (function(window, undefined){ ... //code goes here })(window) 或者这样的: (function($, window, undefined){ ... //code goes here })(jQuery, window) 其实上面两个例子从根本上讲是一样的。 为何要在匿名函数中传入 $ 和 window 和undefined 形参呢? 先来说说前两个形参。 JavaScript 的解析器解析代码其实是从里到外解析的,也就是说,解析器会先解析函数内部的代码,然后再解析函数外部的代码。这样的话,如果我们在函数内部引用了

  • serenader
    serenader
5 min read
javascript

<script> 标签应该放在 HTML 页面中的哪里?

首先说说浏览器在下载 JS 文件时情况是怎样的。 在低版本浏览器中,当页面载入时,浏览器解析到 JavaScript 标签时,如果是外链 JS 文件的话,则会开始下载 JS 文件,并且会阻塞其他文件的下载,比如排在这个 JS 文件后面的 JS 文件或者图片等。 在 IE 8, Firefox 3.5, Safari 4, Chrome 2 等高版本浏览器中是允许并行下载 JS 文件的。

  • serenader
    serenader
2 min read
object

在 JavaScript 中创建Object

JavaScript 是一门强类型的面向对象语言,实质是 Prototype-based Language ,语言本身没有 类 的概念。在 JavaScript 一切都是以对象的形式存在,包括 Function , Array , Object , String 等。接下来谈谈如何创建 Object 。 创建对象 1. 工厂模式 工厂模式是以一个函数封装一系列属性和方法的形式创建对象。下面是例子: function createPerson(name,age,job){ var o = new Object(

  • serenader
    serenader
14 min read

Subscribe to Serenader