MAC上SSH使用PEM文件登录的方法

假设你已经得到pem文件。

一、直接登录

1
ssh -i key.pem root@IP

如果出现报错,说明这个问题是文件的权限太大,执行下面的设置:

1
sudo chmod 600 key.pem

然后再执行上面的连接操作就可以。

二、添加pem文件

可以使用ssh-add添加pem文件,如下:

1
ssh-add -k key.pem

添加成功后,即可直接登录:

1
ssh root@IP

但是在电脑重启后,需要重新添加pem文件。

More...

初识 CSS Grid

一、关于页面布局

在最开始,网页基本都是通过table、float浮动或者position定位进行布局,那是比较单调的年代。随着技术的发展,单调的布局方式已经满足不了需求。接着就有了flexbox,一个专门为响应式页面而设计的布局模式。Flexbox可以很容易地对元素或内容进行排版,并获各大主流浏览器支持,可以说是目前页面布局的首选。

但是,Flexbox还不算是最好的响应式布局方式,它更多的只适合于一维的页面布局,某些布局还需依赖外围元素,下面的例子会说到。而这次说要讲的CSS Grid,将会是最好的响应式布局方式。栅格系统相信很多人都知道,但是它的实现方式,基本都是通过上面所提到的布局方式来生成,而CSS Grid作为原生能力,虽同叫栅格,却又大不相同,它可以轻松应对各种复杂的二维页面布局,用法简单,功能强大。

二、先来一个小例子

有了CSS Grid,我们在开发网页时,页面就像是一块带网格的木板,我们可以随意地在板上贴上模块,并且模块位置可以随意调整,不受元素结构影响。下面将用一个小例子来演示一下。

如下图:

More...

Axios-源码分析

Axios 可以说是当前 Github 上最受关注的 HTTP 库,目前已经有超过 25k 的 star 数。作为 vue.js 官方推荐的 HTTP 库,必然有着过人之处。

Axios 的主要特性包括:

  • 基于 Promise
  • 支持浏览器和 node.js
  • 可添加拦截器和转换请求和响应数据
  • 请求可以取消
  • 自动转换 JSON 数据
  • 客户端支持防范 XSRF
  • 支持各主流浏览器及 IE8+

对比于 fetch,除了同样支持 Promise API 外,aixos 的确拥有更加丰富的功能,而这次的源码分析也主要是针对‘拦截器’和‘请求取消’。

More...

vi常用命令

一、命令模式和编辑模式切换

进入vi之后默认是命令模式,按i或者insert以及其他编辑键进入编辑模式,按esc或者crtl+c退出编辑模式。

二、保存命令

按ESC键 跳到命令模式,然后:

  • :w 保存文件但不退出vi
  • :x 保存文件并退出vi
  • :w file 将修改另外保存到file中,不退出vi
  • :w! 强制保存,不退出vi
  • :wq 保存文件并退出vi
  • :wq! 强制保存文件,并退出vi
  • :q 不保存文件,退出vi
  • :q! 不保存文件,强制退出vi
  • :e! 放弃所有修改,从上次保存文件开始再编辑

如何编写高效的 CSS 选择符

大部分人看到下面的这一小段 CSS 代码:

1
#menus > li { font-size: 14px; }

可能都会猜想浏览器会使从左到右匹配上面的规则,我们会想象浏览器先找到唯一的 id 为 menus 的元素,然后把样式应用到其直系子元素 li 元素上。这看起来好像还挺高效的。

但是,事实上,CSS 选择符是从右到左进行匹配的。所以,上面的这条规则并不高效,浏览器必需遍历页面上的每个 li 元素并确定其父元素的 id 是否为 menus。

样式系统从最右边的选择符开始向左匹配规则。只有当前选择符的左边还有其他的选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出。 —- 《在 Mozilla UI 中编写高效的 CSS》 David Hyatt

More...

Github上前端项目常见的dot文件

.gitignore

这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。

在实际项目中,往往会有很多文件不需要进行版本管理,例如这几个常见的:

1
2
3
.DS_Store
node_modules/
dist/

.gitattributes

这个文件的作用是可以对项目中的个别文件或目录定义不同的合并策略,让Git知道怎样比较非文本文件,在你提交或签出前让 Git 过滤内容。

但是在Github上却有别的用处。在Github的仓库上,咱们都可以看到项目的描述下方会有一条颜色的粗线,不同的颜色代表不同的语言,例如黄色代表javascript。然后在搜索的时候,所显示的项目类型是由占比例最多的文件来决定,这样偶尔会出现JS的项目类型却是HTML,就只因为HTML的文件比JS的多。

More...

迁移到webpack2

最近前端聊得最多的莫过于某某某2.0发布了,作为前端狗即感兴奋又觉苦逼。然而,webpack也不例外,一个东西的新版发布,文档什么的都得跟上,然而现在好像资料并不多,官方的说法是,webpack1和2在使用上并没有太大的区别。 好吧,那就折腾折腾webpack2吧.

原文地址 http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/

Install Webpack 2

第一步,当然是安装最新版本的webpack2,不过因为还没正式发布,所以咱们就指定一个版本。

1
npm install --save-dev webpack@2.1.0-beta.25

如果你还用到其他的webpack插件(这假设简直是多余),那很可能就需要升级到2.0。

例如extract-text-webpack-plugin,同样也在2.0的路上

1
npm install --save-dev extract-text-webpack-plugin@2.0.0-beta.4

More...

javascript面向对象精要[摘]

0.数据类型

javaScript 有两种数据类型: 原始类型和引用类型。原始类型保存为简单类型。引用类型则保存为对象,其本质是指向内存位置的引用。

javaScript共有5种原始类型:boolean、number、string、null、undefined.

typeof null 的值为 ‘obejct’, 逻辑上可以认为null是一个空的对象指针(设计错误),判断是否为空类型的最佳方法是直接和null比较,使用 ‘===’。

javaScript提供3种原始封装类型:String、Number、Boolean。javaScript会在背后创建这些对象,使得能够像普通对象那样使用原始值,但这些临时对象在使用它们的语句结束时就会被立即销毁。

More...

关于移动hybrid开发中H5页面的字体应与系统保持一致的问题

0、问题来源

在移动hybrid开发,也就是说,部分页面会使用html+css+javascript技术来制作,例如个人中心,收藏页面等。一般来说,移动端都会将字体设置为system系统默认类型。起初,愚钝的我认为,只要在css里不设置任何字体,将会默认使用系统默认字体。然而结果并未如我所想,页面出来后,中文、英文和数字几乎是3种不同的字体,而且没有一类是和移动端的字体相同。

1、浏览器默认字体

基于上述的问题,我google了一下iOS和Android的默认字体。找到了一篇大概如下:

1.1、iOS系统(感觉很正确)
  • 默认中文字体是Heiti SC
  • 默认英文字体是Helvetica
  • 默认数字字体是HelveticaNeue
  • 无微软雅黑字体
1.2、Android系统
  • 默认中文字体是Droidsansfallback
  • 默认英文和数字字体是Droid Sans
  • 无微软雅黑字体

More...