Sign in Subscribe

Emi's Life

Thoughts, stories and ideas.

SEO实战密码学习总结

为什么要做SEO SEO：Search Engine Optimization，搜索引擎优化 了解搜索引擎 概览 做seo是为了尽量减少搜索引擎的工作量、降低搜索引擎的工作难度，使其能更轻松、快速的收录网站页面，更准确的提取页面内容。搜索引擎指的是由蜘蛛程序沿着链接爬行和抓取的大量页面，存进数据库，经过处理，用户在搜索框输入关键词后，搜索引擎排序程序从数据库中挑选出符合搜索关键词要求的页面。搜索结果中包含页面标题（来自HTML代码中的标题标签title），页面说明（来自HTML中的说明标签description） 缩进列表，当排行靠前的来自同一个网站的不同页面，搜索结果会把两个结果连在一起排在高位那个页面附近，并把第二个页面向右缩进三个字的空间。 全站链接，对于一些权重高的网站，除了正常的结果列表外，还会显示最多四行、两列共8个内页链接，称为全站链接。如果是一行4个链接则为迷你全站链接。 One-box，直接在搜索结果页面上显示相关信息，不用点击到其他网站上查看的结果。 富摘要某些使用了RDFa或Microdata格式标签的页面，搜索引擎可能还会在标题下面以灰色文字加一行富摘要。
7 min read

Ubuntu实用小工具

rmate 简述 TextMate 2添加了一个很棒的特性，既使用帮助脚本能够通过一个远程服务器来编辑文件。TM2提供的原始帮助脚本都是用ruby实现的。在这里尝试使用shell 脚本代替ruby脚本，因为在一些案例中，如果仅仅是想要编辑远程文件，ruby脚本的安装有点过头了。这个脚本可以和一些编辑器（vscode，sublime text等）的插件一起使用。如果你想要远程编辑文件，shell脚本需要拷贝到服务器上。然后，需要把你的编辑器和rmate建立通信。在这里，使用的是rmate bash [https://github.com/aurora/rmate]版本，编辑器用的是vscode。 安装 sudo wget -O /usr/local/bin/rmate https://raw.githubusercontent.com/aurora/rmate/master/rmate sudo chmod a+x
3 min read

使用 Nginx 部署 Nuxt.js 应用

Nuxt.js项目 Nuxt.js是一个基于 Vue.js 的服务端渲染应用框架，我在这里用它是为了解决 SEO 问题。详细的介绍参见Nuxt.js官网 [https://zh.nuxtjs.org]。 服务器与域名 1. 在阿里云购买服务器与域名（服务器至少1GB，构建过程需要较大内存） 2. 备案网站（过程较慢） 3. 在管理控制台中云解析DNS（把网站域名或应用资源转化为数字IP地址） Nginx 安装之前，需要 $ apt update，在所购买的服务器中安装 [http://nginx.org/en/linux_packages.html#Ubuntu]好Nginx并完成 nginx.conf 的配置，Nginx起步 参见 [https://emi.life/
2 min read

Nginx 起步

原文地址：http://nginx.org/en/docs/beginners_guide.html#control 本指南给出了Nginx的基础介绍并且描述了几个用Nginx能解决的简单任务。这里假设读者已经在自己机器上安装好了Nginx，如果没有，请移步安装Nginx [http://nginx.org/en/docs/install.html] 页。本指南描述了如何启动和终止Nginx，如何重载它的配置，配置文件的结构，如何建立Nginx来分发静态内容，如何把Nginx配置为代理服务器以及如何与FastCGI应用建立连接。 Nginx拥有一个主进程和几个工作进程。主进程的主要目的是读取和评估配置以及维护工作进程。而工作进程则才是真正做请求的处理。Nginx基于事件模型和OS依赖机制来有效地在工作进程之间分发请求。工作进程的数量定义在配置文件中，并且，可能是由配置文件给定的数量也可能是由CPU核自动调整分配的数量（查看 worker_processes [http://nginx.org/en/docs/ngx_core_module.html#worker_processes
10 min read

webpack配置学习(一)

demo: webpack-config-demo [https://github.com/shiqiwang/webpack-demo] webpack webpack是一个JavaScript应用程序模块打包工具, 它从配置的入口文件开始, 构建一个依赖关系图, 其中包括应用程序需要的每个模块, 然后把这些模块打包输入到配置的出口文件. 基础配置 webpack最基础的配置有四项: entry 入口文件是webpack寻找依赖关系的入口, 它从入口文件开始, 找到全部的直接或间接被入口文件依赖的文件和模块. 入口文件可以是一个或多个, 单文件应用一般是一个(不考虑第三方库). 多页面应用可以考虑一个页面一个入口. 最好能使用CommonsChunkPlugin为多入口多页面应用抽象出共享的 bundle以达到复用的目的. module.exports = { entry: { app: './src/main.js', vendors: './src/vendors.js' } } output 告诉webpack在哪个路
2 min read

HOSTS配置

为什么需要配置hosts？ hosts文件用于将某个域名解析到特定的ip上。多数时候访问一个域名时解析工作都是由网络接入商的域名解析DNS服务器负责。在本地电脑上的hosts文件也是用于域名解析，从而跳过电信域名解析服务器。本地解析可以加快网站域名解析，方便局域网用户，屏蔽网站等。一般来说网站未上架在开发机上做测试或者重定向含病毒的网站域名都需要配置hosts。 配置方法 1. 用管理员权限打来记事本 2. 用打开的记事本打开c:\Windows\System32\drivers\etc\hosts 3. 在文件默认一对一的写入IP域名映射关系，例如：127.0.0.1 xxx.xxx ipconfig hello ping ping命令主要用于检测网络质量， 在配置完hosts以后可以在cmd中ping IP以检测配置是否成功。 如：ping baidu.com
1 min read

JavaScript内存管理与垃圾回收机制

字和字节 * 位(bit): 一个二进制数码0或1, 是计算机存储处理信息最基本和最小的数据单位. * 字节(byte): 一个字节由8个位组成, 是计算机存储信息的基本单位, 也是计算机存储空间大小的最基本单位. * 1TB = 2^10GB = 2^20MB = 2^30KB = 2^40B = 2^50b * 字(word): 若干个字节组成字, 16个位为一个字, 32位为一个双字, 64位是两个双字, 它代表计算机处理指令或数据的二进制数位数, 是计算机进行数据存储和数据处理的运算单位. * 字长: CPU内每个字可以包含的二进制的长度称为字长(word size), 如32位(四个字节)表示CPU一次能处理四个字节. 内存 内存是一种用半导体技术做成的电子设备, 用于存储数据, 电子电路的数据是以二进制的方式存储, 存储器的每一个存储单元称为记忆元. 内存分为易失性的和非易失性的存储器, 但是一般我们说的内存指的是易失性的, 而非易失性的存储器我们称为磁盘. 内存主要是进程,文件加载,系统运行等高速缓存的临时运行存储空间. 内存速
5 min read

ES6特性 Default Rest Spread Let Const

Default 函数默认参数也可以和解构结合使用. 注意第一种解构是在为整个函数参数赋值默认参数, 第二种是为每个变量赋值默认参数, 所以会造成不传递参数时得不同结果. Rest rest会影响函数的length属性, 且rest后不能再有其他参数. Spread rest和spread是一组相反的操作, 一个是把参数变成数组便于定义函数, 一个是把数组变成连续的参数便于调用. Let + Const let和const都具有块级作用域,const定义的是常量, 不能被改写.
1 min read

ES6特性 解构

解构 解构允许用模板匹配来绑定值，解构支持数组和对象的匹配。解构会弱化失效，类似对象的查找标准foo["bar"]，当未找到时会返回undefined。 //数组匹配 var [a, ,b] = [1,2,3]; //对象匹配 var {op: a, lhs: {op: b}, rhs: c} = getASTNode() //对象匹配缩写模式 //在作用域内绑定`op`,`lhs`和`rhs` var {op, lhs, rhs} = getASTNode() //也可以用于参数 function g({name: x}) { console.log(x); } g({name: 5}) //解构弱化失效 var [a] = [] a
2 min read

ES6特性 字符串,正则,数值,函数,数组,对象的扩展

字符串扩展 模板字符串 模板字符串提供了结构化字符串的语法糖。这和Perl，Python等语言的字符串插值相似。允许添加一个可选的标签来初始化字符串结构，但是要避免注入攻击，也要避免插入高级的数据结构。 //创建字符串模板最基本的语法结构 `In JavaScript '\n' is a line-feed.` //多行字符串 `In JavaScript this is not legal.` //字符串插值 var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?` //构造一个HTTP请求前缀就常常需要插入替换变量组合的模式 POST`http://foo.org/bar?a=${a}&b=${b} Content-Type: application/json X-Credentials: ${credentials}
10 min read

ES6特性 Class

Class关键字介绍 ES6 class关键字是一个基于原型链面向对象编程模式的语法糖. 有单一快捷的声明形式使"类"模式的使用变得容易, 并且也鼓励互用性. "类"支持基于原型的继承, 超级回调, 实例和静态方法以及构造函数. class SkinnedMesh extends THREE.Mesh { constructor(geometry, materials) { super(geometry, materials); this.idMatrix = SkinnedMesh.defaultMatrix(); this.bones = []; this.boneMatrices = []; //... } updata(camera) { //... super.updata(); } get boneCount() { return this.bones.length; } set matri
6 min read

Vue.js

概念 官方说法是, Vue.js是一套构建用户界面的渐进式框架,和同类型的框架相较而言它更轻量级. 通过大概一个月的学习和实践我觉得它最重要的特点是响应式渲染DOM数据以及组件化. 再结合Vuex形成一套单向的数据流向系统. 响应式的数据渲染 {{count}} let demo = new Vue ({ el: '#demo', data: { count: 0, timer: undefined }, computed: { message: function () { return this.count; } }, mounted: function () { this.timer = setInterval(() => this.count++, 1000); }, watch: { count: function () {
2 min read

{less}概览

less less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合(mixin)、函数等功能，降低了CSS的维护成本。 应用方式 less可以直接在客户端使用，也可以在服务器端。这里使用node.js的包管理工具npm安装在服务器端使用。 $ npm install -g less 安装好后调用以下命令调用less编译器并输出到指定的文件： $ lessc xxx.less > xxx.css 相关HTML文件把xxx.css链入即可使用>.< 如果报错：'lessc' is not recognized as an internal or external command, operable program or batch file.可能是未全局安装，或未设置环境变量。我遇到这个错误了>.<相关解决方法地址 [http://stackoverflow.com/questions/23122849/
3 min read

Socket.IO Client API

原文链接：https://github.com/socketio/socket.io-client/blob/master/docs/API.md 仅用于学习参考，欢迎指出翻译错位Q^Q IO 由io命名空间暴露在独立架构中，或者说是调用require("socket.io-client")的结果。 io.protocol * (数字) 协议版本号 io(url[, options]) * url(字符串) * options(对象) * ReturnsSocket 为给予的URL创建一个新的Manager，并尝试重利用已存在的Manager管理回调函数，除非multiplex选项传入的值为false。该参数选项等同于 'force new connection': true或forceNew: true。 一个新的Socket会被返回至命名空间中URL指定的路径名下，默认为/。例如，如果URL是http://loccalhost/users ，那么一个传输连接将建立至http://localhost并且一个Sokcet.
5 min read

Socket.IO Server API

原文链接：https://github.com/socketio/socket.io/blob/master/docs/API.md 仅用于学习参考，欢迎指出翻译错误Q^Q Server require("socket.io")暴露的接口。 new Server(httpServer[, options]) * httpServer(http.Server)服务器绑定的http协议 * options(对象) * path(字符串)：捕获的路径名称(/socket.io) * serveClient(布尔值)：是否向提供客户端文件(true) * adapter(适配器)：使用适配器。默认为socket.io自带的基于内存的Adapter实例。详情见socket.io-adapter [https://github.com/socketio/
13 min read

socket.io/get started

原文链接:https://socket.io/get-started/chat/ 仅用于学习参考，欢迎指出翻译错误Q^Q 开始：聊天应用 我们将在这个指导手册中创建一个简单的聊天应用。使用这个手册，你几乎不需要有任何有关于Node.JS或者Socket.IO的知识，所以，这个手册适合任何知识层级的人使用。 简介 用当下流行的web技术栈比如LAMP(PHP)写一个聊天应用是非常困难的。它需要不断的轮询服务器以期做出改变，也需要持续跟踪时间戳，而且这比期望的慢。 Sockets是传统意义上的聊天系统架构的解决方案，它为服务器和客户端提供了双向的通信渠道。 网页框架 第一个任务就是建立一个能向服务器端发送消息的包含一个表单和列表的的简易HTML页面。为了达到目的，我们需要用Node.JS的一个web框架，express。确保安装了 Node.JS [https://nodejs.org/en/]。 首先创建一个描述我们项目的package.json文件。我建议你把它放在一个空目录下(我的叫做chat-example)。 { "name": "socket-chat-exa
7 min read

Ajax

基本概念 Asynchronous JavaScript and XML, 所用到的技术有DHTML、JavaScript、DOM和HTML。 * XMLHttpRequest对象 var xhr = new XMLHttpRequest();//创建一个新实例 * open方法 xhr.open("get", "url?dataName1=" + encodeURIComponent(value1) + "&dataName2=" + encodeURIComponent(value2), true); open方法可以接收三个参数，第一个是表示要发送的请求类型(可以是get或post)，第二个是请求的URL(和后台函数对接的凭据，如果是get方法，传送的数据跟在URL后)，第三个是表示是否异步发送请求的布尔值。 * send方法 xhr.open("post", url, true); //... var str = "hello, world!"; xhr.setRequestHeader("Content-Type", "text/plain"); se
1 min read

JSON

概念 JSON是一种表示结构化数据的格式，它不局限也JavaScript的范畴，很多编程语言都有针对JSON的解析器和序列化器。 语法 JSON可以表示三种类型的值： * 简单值：使用与Javascript相同的语法表示字符串、数值、布尔值和null，JSON不支持Javascript中的u ndefined。同时，字符串必须使用双引号，单引号会导致语法错误。 * 对象：与Javascript的对象字面量相比，JSON对象没有变量声明、没有末尾的分号、对象的属性必须加双引号。每个键值对的值可以是简单值，也可以是复杂数据类型的值。 * 数组：JSON数组采用的就是Javascript中数组字面量形式，但是JSON数组也没有变量和分号。 各种类型值举例 * 数字：5 * 字符串："Hello world!" * 布尔值：true * null：null * 对象：{ "name": "emi", "age": 21 } * 数组：["emi", 21, "student", true] 解析与序列化 ECMAScript5定义了全局对象JSON，它有两个方法
2 min read

HTML/CSS

最近报了一个学习前端的网上学院，百度ife。这段时间没有更新博客也是因为做任务加上找实习很忙，囧。近期做的小任务都是基础的HTML/CSS页面，没有涉及到JS。但是其实一些细节还是有难度的。通过这次学习还是了解到了很多新的东西。虽然截至日期过了还没有写完所有任务，但是后面的也会补上后上传到GitHub。 布局 用CSS布局的方法很多，比如float/position/flexbox等，以前只知道用前两种方法，这次的任务中有专门学习flexbox的部分。 * float：用float布局要注意父元素使用clear/overflow等来消除浮动对其他元素的影响 * position：absolute/relative/static/fixed * flexbox：主轴侧轴的选择，是否多行，排列顺序的设置等。 插入水平（垂直）线 除了
标签，其实可以利用盒模型的border来插入水平（垂直）线，同时可以利用padding来调节线与盒子内容的距离等。 inline-*元素间的缝隙问题 * 最简单粗暴的方法是去掉所写的HTML中相邻inline-*元素间的空格 * 使
1 min read

order-system

概述 不会做设计，所以界面是模仿美团外卖做的，当然，代码是原滋原味自己写的。哎...就在刚刚，汉子居然跟我视频的同时，发了视频给其他妹子，是不是该分手了[此处应有doge脸]。 代码也不想贴了，最近会持续更新，menu里面有github的链接，要是有大神想给意见，热烈欢迎~[鼓掌] 2/27/2016 今天点餐部分的代码大大的弄了一下，主要是把一个方法里面的杂七杂八的功能都提出来了。主要原因是，前面杂在一起，当我要添加新的功能的时候就变得很麻烦了。提出来以后，就只有动一小部分了，离写出优雅的代码还有好长的路要走呀~加油~ 3/4/2016 到昨天，order-system的前端部分差不多就写完了。后面要开始写后台了，但是我还不懂数据库的部分，所以暂时可能要等一段时间了，囧~
1 min read

简单的任务管理系统（三）

概况 这个任务也做了好久了，最近把重构版本的代码基本写好了，这次重构的目的主要是想减少重复的代码。在这方面个人感觉还算良好，Js代码减少了100行左右。但是重复代码减少的同时，又暴露出了新的弊端。就是出现了很多交叉的代码，大大说代码的结构理想状态下是树状的只有很少的一部分是交叉的，而我的代码现在是网状的。大大说我没有利用好回调函数，以后要加大这方面的练习。 主要的代码 //判断对象是否为空对象 function isNotEmpty(obj) { for (var prop in obj) { if (obj.hasOwnProperty(prop)) return true; } return false; } var FLAG_FOLDER = 0; var FLAG_TASK = 1; //flag用于标记是是哪种调用 不过当flag实参不传递时 flag的值是undefined function xhrFunc(url, flag) { var xhr = new XMLHttpRequest(
4 min read

简单的个人任务管理系统

概况 这个任务是百度ife学院 (https://github.com/baidu-ife) 春季任务的task3，是一个综合型的任务。现在只是把前端的部分完成了。代码很渣，这也是可以预见的，啊哈哈~ 我认为主要要用到以下知识点： * HTML CSS JavaScript * Ajax * Node.js 现在只是完成了基础的部分，包括页面的整体布局、JS操作DOM、事件的监听、和用户(我自己)的交互等，所以只用到了HTML CSS 和 JS部分的知识点。接下来会做后台部分，实现文件夹和文件的关联、数据的本地存储、数据的获取等。 页面分析 页面的设计稿是百度ife学院提供的(感谢~)，页面总体是自适应的，有最小高宽。然后总体分为三栏：文件夹栏、文件栏、以及文件内容栏。点击添加按钮可以分别添加文件夹和文件(文件只能添加在某个打卡开的文件夹中)。点击编辑可以编辑问价内容。文件夹或文件在打开的状态下会显示删除按钮，此时可以选择删除。目前还只是前端的效果。后台还没弄
2 min read

QQ登录面板

最近在慕课网 [http://www.imooc.com/learn/138] 学习DOM事件的基础知识，有个任务是让实现QQ面板拖拽效果，于是想先自己先写写再去看老师的代码。发现，其实自己一步一步写会收获很大。以下是QQ登录面板的具体实现(图片是下载老师现成的，haha，不过代码都是自己的，自学的初级阶段，有错请多多指教)。 效果图 具体要求 * 看着老师的效果自己揣测的→_→* * 用HTML/CSS实现基本的布局和样式，JS实现简单的交互 * 点击关闭按钮，关闭QQ登录面板 * 可以切换登陆时的状态 * 当mousedown在 QQ logo 区域并移动时，面板随鼠标移动 实现 * HTML部分
6 min read