xiaoping 发布于 11月22, 2016

JS数组求并集,交集和差集

需求场景

最近,自己项目中有一些数组操作,涉及到一些数学集的运算,趁着完成后总结一下。

简化问题之后,现有两数组a = [1, 2, 3]b = [2, 4, 5],求a,b数组的并集,交集和差集。

方法选择

JS在ES6,ES7之后,新增了一些数组方法,如果能够使用,那是极好的,毕竟自己写封装函数还是比较辛苦的。

阅读全文 »

xiaoping 发布于 11月22, 2016

从去除百度云大文件下载限制到js的对象监听

引子

前几天,一个朋友在微信上问我,Chrome浏览器审查元素,添加如下代码

Object.defineProperty(this, "navigator", {value: { platform: "" }});

效果是去除百度云大文件下载的限制,原因是什么?

那么,我们就要来看一看Object.defineProperty这个函数了。

Object.defineProperty(obj, prop, descriptor)

阅读全文 »

xiaoping 发布于 11月22, 2016

用nw.js制作一个自己的markdown app

1. 什么是nw.js

nw.js,前身nodeWebkit,顾名思义,是基于node+webkit运行的。加上支持各类npm包,可以让前端很容易通过HTML和JavaScript制作属于自己的客户端app。

2. 开始使用nw.js

首先,你需要下载nw.js。一般来说,开发app的时候需要下载sdk版本,集成了devtool,方便调试。而生产环境则应该使用normal版本,因为它更小巧灵活。

以我使用的v0.17.4(Mac版本为例,下同)为例,将你下载的放入你的开发目录,如nwjs目录下。新建一个package.json,熟悉npm的应该都知道,这是一个配置json文件,而nw.js需要这个文件提供必要的信息。以下是我的markdown编辑器(LittleMD,以下用LittleMD作指代)的配置信息。

阅读全文 »

xiaoping 发布于 11月22, 2016

CSS学习笔记(3) - 字体效果

CSS字体效果应用场景

在前端开发过程中,我们可能会遇到页面需要特殊的字体效果的情况。字体的实现效果有多种方法,最常见的无异于两种:图片和CSS实现。

1.图片实现特殊字体

图片实现的字体效果肯定是最符合视觉效果的,不过这种方法的实现缺点也很多,比如资源消耗大,增加请求导致效率低下等等。不过最致命的还是:可塑性太差,一旦需要改动,则需要推倒重来。

阅读全文 »

xiaoping 发布于 11月22, 2016

CSS学习笔记(2) - 边框渐变和字体渐变

扩展渐变

有了线性渐变和径向渐变作用于背景的相关基础,有助于我们理解边框渐变和字体渐变。

边框渐变

要实现边框渐变,我们需要借助border-image这个css属性。

.box {
  width: 100px;
  height: 100px;
  border: 3px solid transparent;
  border-image-source: linear-gradient(red, blue);
  border-image-slice: 1;
  border-image-width: 1;
}

阅读全文 »

xiaoping 发布于 11月22, 2016

CSS学习笔记(1) - 背景渐变

css渐变类型

在css3标准之后,css主要有以下的渐变类型,线性渐变(linear-gradient),径向渐变(radial-gradient),重复渐变(repeating-linear/radial-gradient)。

其中,重复渐变可以认为是线性渐变和径向渐变的一种扩展。

线性渐变

线性渐变的基本语法如下:

linear-gradient(direction/angle, color-stop1, color-stop2, ...);

阅读全文 »

xiaoping 发布于 11月22, 2016

持续集成+覆盖率测试 Travis CI和Overalls使用心得

什么是Travis CI

Travis CI是在软件开发领域中的一个在线的,分布式的持续集成服务,用来构建及测试在GitHub托管的代码。这个软件的代码同时也是开源的,可以在GitHub上下载到,尽管开发者当前并不推荐在闭源项目中单独使用它。

Travis CI可以设置github托管的项目在push或者pull等时机触发构建与测试,进行持续集成,简单说,是一个基于Github的免费持续集成服务。

阅读全文 »

xiaoping 发布于 11月22, 2016

知乎日报Web版 - 我的第一个Chrome插件

前言

抱着用Mac也要看知乎日报的崇高想法,偶然间看到izzyleung总结的知乎api,萌生了自己做一个Chrome插件版的知乎日报。

Chrome插件入门

Chrome插件只需要基础前端就可以入门,当然部分高阶api还是需要研究研究的,好在知乎日报Web版涉及的不多,下面对主要涉及部分做一个简单的介绍。

阅读全文 »

xiaoping 发布于 11月22, 2016

简单SEO - Meta标签优化

初衷

搭建了ghost博客之后,发现他的meta标签还有不少可以优化的地方,于是花时间整理了一下。 本文主要讲解的是meta标签的一些简单优化。

什么是meta标签

根据w3c定义,meta元素是可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 meta标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。 简单来说,meta标签是给搜索引擎看的标签,对于seo有着举足轻重的作用。

阅读全文 »

xiaoping 发布于 11月22, 2016

nginx升级mainline+网站部署http/2

nginx版本

nginx共有3个版本。

Mainline version: 最新的开发版

Stable version: 最新的稳定版本

Legacy version: 历史遗留版本

大部分人(我之前)都是使用stable的版本的,最近看到一篇文章发现nginx在1.9.5之后开始支持http/2了,于是尝试给自己网站部署http/2。

不过目前stable版本是1.8.1,只有mainline版本是1.9.5+(目前是1.9.11),所以需要手动升级nginx为mainline版本。

阅读全文 »