在服务器安装 Node.js

发表于 2018-05-03 | 分类于菜鸟成长记

字数统计: 718 | 阅读时长 ≈ 3

在腾讯云服务器安装 Node.js 环境

之前在狼叔的live群众，看到腾讯云有个活动，价格优惠果断入手了一台来玩玩，但是一直没有时间，今天就从安装开始吧！ 🤔🤔🤔

使用 ssh 远程连接服务器

因为本人是使用 Windows 系统，所以需要下载一些终端工具（没有钱买MAC ☹️）。这样的工具挺多的，像 MobaXterm 和 Xshell
个人比较喜欢 MobaXterm 看起来比较舒服。
新建一个对话（session），填入你的服务器的 IP 地址和端口号，连接成功之后输入密码就可以了。

通过 shell 安装 Node.js

# 使用 wget 安装方式
wget https://npm.taobao.org/mirrors/node/v8.11.1/node-v8.11.1-linux-x64.tar.xz
# 解压
xz -d node-v8.11.1-linux-x64.tar.xz
tar -xvf node-v8.11.1-linux-x64.tar
# 建立软连接
ln -s /node-v8.11.1-linux-x64/bin/node /usr/local/bin
ln -s /node-v8.11.1-linux-x64/bin/npm /usr/local/bin

阅读全文 »

Win10 使用多桌面提升开发效率

发表于 2018-05-01 | 分类于折腾记，工具技巧

字数统计: 275 | 阅读时长 ≈ 1

巧用 Win10 分屏功能

一般我会新建三个桌面，一个看文档，一个写代码，另一个看调试结果。虽然可以在一个桌面中直接使用 ALT + TAB 组合键来进行切换，但是软件多起来就会发现很乱。使用分屏会更加简洁方便。
在切换桌面可以使用 WGestures 软件，通过鼠标触碰桌面的左上角和右上角来进行切换上下桌面。安装后可以设置一下快捷键，当然也可以直接通过Win+Ctrl+Left/Right组合键来切换。如图：

阅读全文 »

Flex 布局（二）

发表于 2018-04-04 | 分类于 Web ， Flexbox

字数统计: 253 | 阅读时长 ≈ 1

Flex 属性

Flex 容器属性

容器属性	描述
`flex-direction`	决定主轴的方向（即项目的排列方向）
`flex-warp`	定义是否新行显示，以及新行的排列方向
`flex-flow`	是 `flex-direction` 和 `flex-wrap` 的简写方式
`justify-content`	定义了项目在主轴上的对齐方式
`align-items`	定义弹性项目在侧轴上的对齐方式
`align-content`	定义多行在侧轴的对齐方式，当只有一行时，不起作用

Flex 项目属性

项目属性	描述
`order`	数字，定义弹性项目的显示顺序，数字越小越靠前
`flex-grow`	数字，定义弹性项目的放大比例，默认 0
`flex-shrink`	数字，定义弹性项目的缩小比例，默认 1，值 0 表示不缩小
`flex-basis`	数字，定义弹性项目的默认尺寸
`flex`	`flex-grow` `flex-shrink` `f`lex-basis` 的缩写，默认值为 0 1 auto
`align-self`	定义此弹性项目本身的对齐方式，会覆盖弹性容器`align-items` 定义的对齐方

Flex 布局（一）

发表于 2018-03-09 | 分类于 Web ， Flexbox

字数统计: 899 | 阅读时长 ≈ 3

认识 Flex

背景

目前主要的前端布局方案主要有三种：

传统布局方案（通过浮动、定位等方式实现）
Flex 布局方案
Grid 布局方案

传统的布局方案，需要熟练掌握元素的分类及布局特性、浮动原理和定位原理等基础知识，学习成本较大，实现的复杂度也比较高。
Flex 布局方案，真是为了解决传统布局方案的不变，而提出的一种新型布局方案，只需要简单通过对父元素和子元素相关规则配置就能实现效果。
Flex 布局的主要思想是使父元素能够调节子元素的高度、宽度和排布的顺序，从而能够最好地适应可用布局空间（能够适应不同的设备和不同大小的屏幕）。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。与传统布局中块状元素按照垂直方向摆放，行内元素按照水平方向摆放相比，Flex 布局是无方向的,传统布局在应对大型复杂的布局时缺乏灵活性，特别是在改变方向、改变大小、伸展、收缩等等方面。
Flex 布局适合小规模的布局方案，而 Grid 布局方案适合大规模的布局方案。
Flex 布局的兼容性：
支持的浏览器
总的来说，Flex 布局方案是未来的首选布局方案。