macOS 下安装 Sass 失败

某日在使用 Koala 编译时 Sass 报错,之前一直正常使用,回忆起前两天系统更新到 macOS High Sierra 猜测症结在此。为了解决这个问题花了我一个多小时,甚至差点耽误项目上线,实在可恶,在此记录一下。
macOS High Sierra

Read More »

Web Storage Learning

Cookies 作为客户端与服务器交互的通道,保持客户端状态,本来就不是设计同来做前端本地存储的,所以其用于做前端本地存储本身缺陷挺多的:

  1. Cookie 会被附加在每个 HTTP 请求中,所以无形中增加了流量。
  2. 由于在 HTTP 请求中的 Cookie 是明文传递的,所以安全性成问题,除非用 HTTPS。
  3. Cookie 的大小限制在 4KB 左右,对于复杂的存储需求来说是不够用的。

WebStorage 是 HTML5 新增的本地存储解决方案之一,其分为 localStorage 和 sessionStorage,结合当前的浏览器份额来看,兼容性问题已经很小了。

Read More »

Yarn Learning

感谢前端造轮子的能力,npm 已经是世界上最大的软件注册表,不过其也有遭人诟病的缺陷,针对这些缺陷,yarn 便出现了。

yarn 是 Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具,其具有如下优势:
Read More »

前端获取referrer可行性

referrer 定义

HTTP来源地址(referer,或HTTP referer)是HTTP表头的一个字段,用来表示从哪儿链接到目前的网页,采用的格式是URL。换句话说,借着HTTP来源地址,目前的网页可以检查访客从哪里而来,这也常被用来对付伪造的跨网站请求。via Wiki

Read More »

Media Query 学习笔记

Media Query 简介

Media Query 即媒体查询,借助其可实现响应式设计。Meidia Queries,该网站收集了很多优秀的 RWD(Responsive web design) 的网站。

在 HTML4 和 CSS2 只支持对于不同的媒体类型来设置样式,而 Media Query 扩充了 Media Type 的功能,并且使我们能够更精准的应用样式表。

Read More »

前端学习资料

编码规范

HTML && CSS

  1. CSS Guide Lines
  2. 编码规范

在线教程

CSS

  1. 学习CSS布局
  2. CSS参考手册

JavaScript

  1. JavaScript 标准参考教程(alpha) – 阮一峰的JavaScript 标准参考教程
  2. JavaScript 秘密花园
  3. ECMAScript 6 入门 – 阮一峰的《ECMAScript 6 入门》在线版

Node.js

  1. Node入门 – 一本 Node.js 入门书

综合类

工具

正则工具

兼容性查询

  1. Can I Use – 兼容性查询
  2. Browserhacks
  3. W3 Help – 兼容性问题比较权威的查询

浏览器份额统计

  1. 百度统计

测试工具

  1. JSON 2 HTML – 将JSON转化为可视的HTML嵌套展示
  2. jsPerf – JavaScript性能测试

标准校验

  1. https://validator.w3.org/
  2. https://validator.ampproject.org/

性能优化

  1. How to lose weight (in the browser)

图书资源