yshunda / notes Goto Github PK

title: 自建SSR服务器教程 (以Vultr为例)
date: 2017-09-20 20:41:13

前言:每次有时候在论坛里分享SS/SSR账号的后,用过一段时间后不能用了就会有人又找我求账号,我的信箱也因此经常爆满;So,授人以鱼不如授人以"渔",这篇帖子我们以Vultr为例。(也建议:自己学习一下,求人不如求已,这样你也多了一项技能、对吧！？文章适合小白，希望你能看完)

文章概述:

• 第一节:一些概念和原理
• 第二节:购买VPS服务器
• 第三节:连接部署VPS服务器
• 第四节:加速VPS服务器（谷歌BBR加速，推荐）
• 第五节:全平台翻墙指南

第一节:一些概念和原理

Shadowsocks(SS)是什么?

Shadowsocks是由若干人因为兴趣而制作的一个项目，主要开发者和领导者是@clowwindy其作用是加密传输资料。但是也正因为它加密传输资料的特性，使得 GFW 无法精准识别，经由它传输的资料和其它普通资料的区别（如上图）。但是在2015年下半年 被“相关部门”约谈喝茶，于是被迫删除Github的源码及相关文档。

但Shadowsocks属于开源项目，所以删除前已经有人备份，同时由另一批志愿者跟进维护原版 Shadowsocks 客户端，而由此衍生的基于Shadowsocks项目的第三方项目有：ShadowsocksR、Shadowsocks-qt5、ShadowsocksCap等。

ShadowsocksR(SSR)是什么?

Shadowsocks RSS,也叫SSR,是由破娃酱开发的加强版的Shadowsocks(SS)。它增加了混淆和协议两个主要功能来达到防止某墙的重放攻击和躲避QoS。虽然某墙在检测Shadowsocks(SS)流量时并不一定能认出这个到底是属于什么类型的流量，从而有可能被QoS。

补充:QoS (Quality of Service)，原本用于路由器上对某种类型的网络流量进行权重分配从而达到较好的网络使用情况。打个比方，在家里，网络电话以及游戏流量的权重较高，如果QoS分配给他们的宽带有一定高权重的情况下，即使还有一个人疯狂下载，也能保证网络电话和游戏这俩Services的流畅性（通过牺牲部分下载速度）。此处，某墙可能在部分封锁严重的地区会对SS流量进行QoS限速，但不是出于保障其他流量流畅性的目的。但如果在无QoS监视地区使用SSR，则有可能会造成访问速度上的下降。

什么是 VPS 和 Vultr?

虚拟专用伺服务器(英语:Virtual private server,缩写为 VPS),是将一台服务器分割成多个虚拟专享服务器的一项技术。实现vps的技术分为容器技术和虚拟化技术。在容器或虚拟机中，每一个vps都可以分配独立公网IP地址、独立的操作系统、实现不同不同vps之间磁盘空间/内存/CPU资源/进程和系统配置的隔离,从而为用户和应用程序模拟出"独享"使用计算机资源的体验。也就是说每个VPS可以像独立服务器一样，重装操作系统，安装程序，单独重启服务器。

Vultr是一家国际知名的的VPS租赁服务商,也是现在使用人数较多的VPS服务商之一,关于其优劣可查阅此篇文章"vultr vps服务器存在的7个优势及选择原因";与之相媲美的是搬瓦工,之前推出的$3.99美元一年的套餐,现已成为了"传家宝"。

什么是 Linux 和 SSH?

Linux是一套开源的类似Unix操作的,支持多用户/多任务/多线程和多CPU的免费开源操作系统。它被世界上大半多服务器所采用,有大量优秀的开源软件可以安装。但是Linux没有像window一样有图形化用户界面(GUI),想要操作Linux系统需要学习一些常用的命令行(CLI命令),想深入学习Linux系统的小伙伴推荐这个网站(我也在这个上面学习中....)鳥哥的Linux私房菜,这里列举一些常用操作：

pwd 打印当前文件夹的路径
cd  改变目录, 相当于 windows 下的打开文件夹
ls  展示当前目录下的所有文件内容
mkdir 创建目录, 创建文件夹
rmdir 删除文件夹
touch 创建文件
rm 删除文件
cat 原意是指将文件与终端输出流连接, 通俗的说输出文件内容
less 或 more( Unix ) 命令可以分页的打开文件, 注意使用 q 退出
echo 命令 打印
> 重定向, 如果文件存在, 则将文件截断, 并重新输入.
>>  重定向. 不截断重定向
ipconfig/all  查看ip信息
ping IP地址    查看是否连接成功
tips:
注意: 换行问题:在 linux 中使用 \n 表示换行;在 windows 中使用 \r\n 表示换行
注意:文件截断是指将文件的所有内容删除, 但是文件的创建时间等信息不更改

SSH是一种网络协议,主要用于计算机之间的加密登录。例如：如果一个用户从本地计算机，使用SSH协议登录另一台远程计算机，我们就可以认为，这种登录时安全的，即使被中途截获密码也不会被泄露。所以，你购买了一台VPS服务器为它安装了Linux系统后，只要借助一些工具，就可以用 SSH 在你自己的 Mac/Windows电脑上(Xshell)远程登录该 VPS 了。

第二节:购买VPS服务器

点击注册Vultr注册后,确认邮件激活账号，充值后即可购买服务器。充值方式是paypal或支付宝(2017年8月30日Vutrl支持支付宝付款，最低充值10美元即70元左右），使用paypal有信用卡即可。paypal注册地址：https://www.paypal.com （paypal是国际知名的第三方支付服务商，相当于国内的支付宝。注册一下账号，绑定信用卡即可购买国外商品）。注册并充值完，在左边选择"Server"标签，点击右边的"加号"部署新的服务器

购买vps服务器时，服务器地址优先选择：美国硅谷（Silicon Valley）、美国达拉斯(Dallas)其次是美国洛杉矶(Los Angeles)和日本(Tokyo)的服务器

系统类型选择CentOS6X64位的系统(系统版本不要选的太高，不要选centos7！centos7默认的防火墙可能会干扰SSR的正常连接！)

根据自己的需求付款就好了,如果只供个人科学上网用的话，$5 绰绰有余。(如果你还想干其它的,那就高配置)

剩下都可以使用默认值。最后一项你可以根据自身需求来自定义服务器的名字和标签，以方便区分。

第三节:连接部署VPS服务器

连接服务器

接下来部署服务器需要一个"SSH客户端",上文我们在介绍SSH有提到过,如果你是Mac OS X系统请阁下自行搜索连接远程VPS的"SSH客户端" Xshell windows版下载地址：百度软件中心Xshell

接下来连接服务器:依次点击"文件"→"新建"

软件会先后提醒你输入用户名和密码，linux系统用户名默认都是root，密码是购买服务器后的cent系统的密码

出现如下图即表示链接成功了

部署服务器(脚本一)

脚本一:

yum -y install wget
wget --no-check-certificate https://raw.githubusercontent.com/teddysun/shadowsocks_install/master/shadowsocksR.sh
chmod +x shadowsocksR.sh
./shadowsocksR.sh 2>&1 | tee shadowsocksR.log

复制上面的代码,粘贴进Xshell后按回车,会依次出现如下界面:

一路按"回车"后,出现如下界面即表示部署成功:

脚本一是无法修改密码/端口的,倘若要执意修改需要重新部署一遍,显得稍有些繁琐,若有此需求的小伙伴可以用脚本二方便以后想修改密码、端口什么的，而且功能更多

部署服务器(脚本二)

脚本二:

CentOS/Debian/Ubuntu ShadowsocksR单/多端口一键管理脚本：
yum -y install wget
wget -N --no-check-certificate https://softs.fun/Bash/ssr.sh && chmod +x ssr.sh && bash ssr.sh

备用地址:

yum -y install wget
wget -N --no-check-certificate https://raw.githubusercontent.com/ToyoDAdoubi/doubi/master/ssr.sh && chmod +x ssr.sh && bash ssr.sh

复制以上代码,粘贴进Xshell(如果你之前有安装过,请先执行"3",将其卸载,再执行"1")

之后跟脚本一的设置基本是一样,就不一一截图赘述,出现下图即成功了:

第四节:加速VPS服务器(谷歌BBR加速，推荐)

服务器搭好了,使用过程中可能会出现不稳定的情况,同时加速后一般速度也会有明显的提升,建议部署加速脚本。Vultr采用的框架可以装BBR加速,我们来部署谷歌BBR加速脚本：，将下面脚本复制进Xshell

yum -y install wget
wget --no-check-certificate https://github.com/teddysun/across/raw/master/bbr.sh
chmod +x bbr.sh
./bbr.sh

一路按回车后，出现如下界面："输入y"

至此加速完毕!

第五节:全平台翻墙指南(SSR)

window SSR客户端 下载地址

Mac OS X SSR客户端 下载地址

Android SSR客户端 下载地址

IOS SSR客户端 推荐使用Shadowrocket俗称"小火箭" 但是其虽然在国区appstore下架,但是作者@Shadowrocket 在其推特上发布了TestFlight申请,如果名额已满的话(当时我申请时名额未满),就只有去美区购买吧

持续更新补充中.......

title:什么是"类Unix"操作系统以及它为什么这么重要?
date: 2017-10-22 19:25:22

前言

实际上大多数操作系统可以被划分为两类:一类是,微软的基于Dos的Windows NT系统;而另一类则是,“类Unix”操作系统。这其中包括了BSD Linux，Mac OS X，Android，iOS，Chrome OS，PlayStaion 4上运行的Orbis OS，以及运行在路由器上的各种固件，这些操作系统通常都被称为“类Unix”操作系统，也就是派生自Unix系统。

UNIX家族起源及类UNIX系统

1969年，在AT&T的Bell Labs，Ken Thompson和Dennis Ritchie（他们曾是大型操作系统Multics的两名开发者，Multics太庞大了最终没有成功）为了一项名为太空旅游的实验计划，需要一个操作系统。他们找了一台闲置的PDP-7机器，在上面写了个Multics的改编版，1971年正式发布。这个东东就是后来名扬天下的UNIX了。Multics——UNIX，大家看出了点什么吗？

1973年，Dennis Ritchie用他自己开发的C语言重写了一遍UNIX，奠定了UNIX普及化的基础。1976年他们首次将第六版的UNIX流传到AT&T以外的地方。 UC Berkeley的人以UNIX 7.0为基础，发表了称作BSD的系统，并且开发到1992年的4.4版；而AT&T也不断改进他们的系统，发表了商业化的System Ⅲ直到System Ⅴ。以后UNIX的发展都是围绕这两大主流展开的。

UNIX的设计目标是小而美：希望能在任何小系统上执行，而核心只提供必不可少的一些功能，其他的则根据需要加上去。这已经成为操作系统的一种设计哲学。现在许多公司有了自己的UNIX版本，但它们基本特性是一致的：开放性、多用户、多任务、功能强、实现高效、网络功能丰富。为了克服UNIX版本差异对可移植性的损害，1990年ISO制定了ISO/IEC 9945-1-1990标准，这是整个可移植操作系统界面（POSIX）的第一部分；系统应用程序界面即POSIX.1。这就是常说的UNIX操作系统的界面标准。

那些从Unix派生出的系统

为了简单，我们把Unix的派生系统大致分成两组。

• 一组Unix派生系统是学术界开发的:

首 先是BSD（伯克利软件发布版），一个开源的类Unix操作系统。BSD如今还存在于FreeBSD，NetBSD和OpenBSD等系统中。 NeXTStep基于最初版的BSD开发，苹果的Mac OS X基于NeXTStep，iOS基于Mac OS X。许多其他操作系统，包括运行在PlayStation 4上的Orbis OS，也源于各种BSD操作系统。

Richard Stallman建立GNU项目的目的是为了反对AT&T的Unix软件协议条款日渐严格的限制。MINIX是一个类Unix操作系统，为教育目的而实现的，而Linux则是受到了MINIX的启发。我们今天所熟悉的Linux其实应该叫GNU/Linux， 因为它是由Linux内核和大量GNU应用组成的。GNU/Linux不是直接从BSD继承下来的，但是它继承了Unix的设计而且根植于学术界。如今许 多操作系统，包括Android，Chrome OS，Steam OS，以及数量巨大的在各种设备上使用的嵌入式操作系统，都基于Linux。

• 另一组是商用的Unix操作系统:

AT&T UNIX，SCO UnixWare，Sun Microsystem Solaris，HP-UX，IBM AIX，SGI IRIX－许多大型企业都希望建立并授权自己版本的Unix。它们如今并不常见，但其中一些仍然存在。

DOS和Windows NT的崛起

DOS，是磁盘操作系统（英文：Disk Operating System）的缩写，是个人计算机上的一类操作系统。从1981年直到1995年的15年间，DOS在IBM PC兼容机市场中占有举足轻重的地位。而且，若是把部分以DOS为基础的Microsoft Windows版本，如Windows 95、98和Me等都算进去的话，那么其商业寿命至少可以算到2000年。(本段摘自"维基百科DOS词条")

微软的DOS也成为众多DOS系统中最成功的一个。DOS完全没有参照Unix，这也是为什么Windows使用反斜杠划分文件路径，而其他所有系统都使用正斜杠。这个决定是在早期的DOS系统中做出的，而之后的Windows版本继承了这一设定，就像BSD，Linux，Mac OS X，和其他类Unix操作系统继承了许多Unix设计因素一样。

Windows 3.1，Windows 95，Windows 98，和 Windows ME都是建立在DOS的基础上。当时微软已经在开发一个更现代更稳定的操作系统，叫做Windows NT－意思是“Windows新技术”。Windows NT最终通过Windows XP应用到普通计算机用户中，但是之前它都只用于针对企业用户的Windows 2000和Windows NT。

如今所有微软的操作系统 都基于Windows NT内核。Windows 7，Windows 8，Windows RT，Windows Phone 8，Windows Server，以及Xbox One上的操作系统都在使用Windows NT内核。不像其他大多数操作系统那样，Windows NT没有被开发成一个类Unix操作系统。

当然，微软也不是完全从零开始的。为了维护DOS和旧版本Windows软件的兼容性，Windows NT继承了许多DOS里的设定，比如磁盘盘符，反斜杠区分文件路径，正斜杠作为命令行参数开关。

结束语

不知道你有没有用过Mac OS X终端或是文件系统，有没有注意到它们和Linux是如此相似，而又和Windows是如此不同？原因是－Mac OS X和Linux两个都是类Unix操作系统。

了解了这点历史，就可以帮助你理解什么是“类Unix”操作系统，以及为什么这么多操作系统看起来都差不多，而Windows却那么与众不同。这也可以解释为什么Linux极客对Mac OS X上的终端会感觉如此熟悉，而Windows 7上的Command Prompt和PowerShell相对于其他命令行环境显得格格不入。

这只是一点快速掠过的历史，我认为作为一个合格的前端er,你除了要会HTML/CSS/JS外,对于计算机体系.操作系统.数据结构和算法,也要了解吧?!此篇文章只是介绍是如何发展到今天的，请千万不要陷入到细节中。祝愿每一位热爱走在这条路上的人都能越行越远!

title:OSI七层模型和TCP/IP四层模型概述
date:2017/11/26 12:31:26

前言:

本文分别介绍 TCP/IP四层模型和OSI七层模型的概念,对应关系,每层含义以及两者的区别。在了解两者相关概念前，先看看两者之间的对应关系，如下图所示：

OSI七层模型

OSI模型，即开放式通信系统互联参考模型(Open System Interconnection,OSI/RM,Open Systems Interconnection Reference Model)，是国际标准化组织(ISO)提出的一个试图使各种计算机在世界范围内互连为网络的标准框架，简称OSI。

在制定计算机网络标准方面，起着重大作用的两大国际组织是：国际电信联盟电信标准化部门（CCITT），与国际标准组织（ISO），虽然它们工作领域不同，但随着科学技术的发展，通信与信息处理之间的界限开始变得比较模糊，这也成了CCITT和ISO共同关心的领域。1983年，ISO发布了著名的ISO/IEC 7498标准，它定义了网络互联的7层框架，也就是开放式系统互联参考模型。

应用层

应用层（Application Layer）提供为应用软件而设的界面，以设置与另一应用软件之间的通信。例如: HTTP，HTTPS，FTP，TELNET，SSH，SMTP，POP3等。

表示层

表示层（Presentation Layer）把数据转换为能与接收者的系统格式兼容并适合传输的格式。

会话层

会话层（Session Layer）负责在数据传输中设置和维护电脑网络中两台电脑之间的通信连接。

传输层

传输层（Transport Layer）把传输表头（TH）加至数据以形成数据包。传输表头包含了所使用的协议等发送信息。例如:传输控制协议（TCP）等。

网络层

网络层（Network Layer）决定数据的路径选择和转寄，将网络表头（NH）加至数据包，以形成分组。网络表头包含了网络数据。例如:互联网协议（IP）等。

数据链层

数据链路层（Data Link Layer）负责网络寻址、错误侦测和改错。当表头和表尾被加至数据包时，会形成帧。数据链表头（DLH）是包含了物理地址和错误侦测及改错的方法。数据链表尾（DLT）是一串指示数据包末端的字符串。例如以太网、无线局域网（Wi-Fi）和通用分组无线服务（GPRS）等。
分为两个子层：逻辑链路控制（logic link control，LLC）子层和介质访问控制（media access control，MAC）子层。

物理层

物理层（Physical Layer）在局部局域网上传送帧，它负责管理电脑通信设备和网络媒体之间的互通。包括了针脚、电压、线缆规范、集线器、中继器、网卡、主机适配器等

TCP/IP四层模型

互联网协议族（英语：Internet Protocol Suite，缩写IPS）是一个网络通信模型，以及一整个网络传输协议家族，为互联网的基础通信架构。它常被通称为TCP/IP协议族（英语：TCP/IP Protocol Suite，或TCP/IP Protocols），简称TCP/IP。TCP（传输控制协议）和IP（网际协议），为该家族中最早通过的标准。
TCP/IP提供点对点的链接机制，将数据应该如何封装、定址、传输、路由以及在目的地如何接收，都加以标准化。它将软件通信过程抽象化为四个抽象层，采取协议堆栈的方式，分别实现出不同通信协议。协议族下的各种协议，依其功能不同，被分别归属到这四个层次结构之中，常被视为是简化的七层OSI模型。TCP/IP模型各个层次的功能和协议如下：

TCP/IP四层模型和OSI七层模型区别:

共同点：

（1）OSI 参考模型和 TCP/IP 参考模型都采用了层次结构的概念。
（2）都能够提供面向连接和无连接两种通信服务机制。

异同点：

（1）OSI 采用的七层模型，而 TCP/IP 是四层结构。
（2）TCP/IP 参考模型的网络接口层实际上并没有真正的定义，只是一些概念性的描述。而 OSI 参考模型不仅分了两层，而且每一层的功能都很详尽，甚至在数据链路层又分出一个介质访问子层，专门解决局域网的共享介质问题。
（3）OSI 模型是在协议开发前设计的，具有通用性。TCP/IP 是先有协议集然后建立模型，不适用于非 TCP/IP 网络。
（4）实际应用不同，OSI 模型只是理论上的模型，并没有成熟的产品；而 TCP/IP 已经成为国际上的标准。

title: 自建V2Ray服务器教程 (以Vultr为例)
date: 2017-10-20 19:54:33

前言

无论是建SSR或是V2Ray服务器,过程都是大同小异,望你能请耐心读完。不能评判是SSR好还是V2Ray好,这要取决你自自己的"人品"?!有的Vultr上SSR没事儿,V2Ray却挂掉了,但是这两项技能你都拥有,就不怕另一个挂掉了,对吧?关于Mac上步骤也一样的,只不过是换了个客户端而已,不要死记这些过程,灵活运用一下~

文章概述:

• 第一节:V2Ray介绍
• [第二节:配置V2Ray服务器]
• [第三节:各平台客户端配置]

第一节:V2Ray介绍

什么是 V2Ray？

V2Ray 是一个模块化的代理软件包，它的目标是提供常用的代理软件模块，简化网络代理软件的开发。听起来有点绕口的，简单来说，它就是一个代理，可以用来科学上网。

V2Ray 跟 ShadowsocksR 有什么区别？

区别就是，ShadowsocksR 只是一个简单的代理工具，而 V2Ray作者将V2Ray 位为一个平台，任何开发者都可以利用 V2Ray提供的模块开发出新的代理软件。(具体怎么开发我也不知道,若有兴趣的学习不妨一试)Telegram开发群链接：https://t.me/projectv2ray

第二节:配置V2Ray服务器

关于购买Vultr服务器(注:本篇文章,我购买的是Vultr的,NJDebian8x64 位的操作系统),以及如何连接vps服务器,我就不赘述了,上一篇文都已经写明了,如果还不会,请把教程看一万遍吧,截图各个标的很明白了

首先:

打开Xshell,连接好之后,输入如下代码:(此脚本不支持 CentOS 6.x，请升级到 CentOS 7，或使用 Debian / Ubuntu等Linux发型版本,推荐使用Debian 8)

wget -N --no-check-certificate https://raw.githubusercontent.com/FunctionClub/v2ray.fun/master/install.sh && bash install.sh

接下来:

依次更改"主端口"、"加密方式"、"传输方式",依次更改后,记得重启服务器,至此部署完毕.

最后再次选择4"下载客户端文件",下载下来的是一个json配置文件.放在桌面上,稍后会用到.

第三节:各平台客户端配置

windows v2ray客户端 下载地址

接下来打开下载好的json文件,用编辑器打开,将"socks"更改为"http",因为IE代理默认是"http"代理

修改完毕后,将json文件把下载下来的客户端文件夹中的文件替换掉

title:"写给想成为前端工程师的同学们"，转载自十年踪迹的博客
date:2017-10-31 19:11:23

前言

    这篇文章是我在一篇博客上看到的,让我体会很深刻.
    这篇作者在文章中提出的两个观点：
    "站在前端之外看前端"以及"一个优秀的Web前端工程师前提首先要有软件工程师的基础知识"，
    对我这样的小白，有很大的指导意见，希望对于看文章的你也有帮助吧！？
    下面是正文：

前端工程师是做什么的？

前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。2005年的时候大多数网页长这样：

现在的网页一般是这样的：

前端工程师的发展之路和前景是怎么样的？

前端是一个相对比较新的行业，互联网发展早期（1995年~2005年）是没有专业的前端工程师的。随着互联网的发展，大约从2005年开始，正式的前端工程师角色被行业认可，到了2010年，互联网开始全面进入移动时代，前端工程师的地位越来越重要，前端领域的技术发展也越来越快，各种新的**、设计模式、工具和平台都快速发展，对前端工程师的技能要求也越来越高。
有一些数据可以说明前端行业的发展迅速。

• 在2010年之后最流行的新编程语言中有相当部分和前端有关，比如 Dart、Clojure、CoffeeScript 和 TypeScript。
• 作为前端最重要的编程语言 JavaScript，在最近几年里不论是代码量还是关注数都稳居 Github 平台热门编程语言榜。
• 行业对前端需求量持续增加，前端程序员薪水在行业里面处于较领先的位置。

近年来最流行的编程语言很多都是JavaScript替代语言

JavaScript在最热编程语言 TOP10

近几年互联网公司前端团队每年扩张一倍

JavaScript工程师平均薪水排名在程序语言工程师收入前10

前端工程师需要什么样的知识和技能？

有人说前端工程师的技术栈是这样的：

还有人说是这样的：

实际上前端工程师最核心的技能还是：

在一个典型的互联网公司的产品研发流程中，前端工程师和其他角色的关系大致上是这样的：

前端是最接近产品和设计的工程师，起到衔接产品和技术的作用，前端为用户可以看到的部分负责，所以也是最接近用户的工程师。
在多终端的时代，如果一个产品同时支持PC、移动端，前端工程师还需要和更多的角色打交道：

JavaScript 对于前端是最重要的技能，所以优秀的前端工程师要有扎实的JavaScript基本功。而JavaScript这门编程语言也是目前程序设计领域炙手可热的宠儿，如今的它不仅仅只是用来开发Web，还可以用在各个方面。

JavaScript 可以用在“树莓派”这类智能硬件芯片开发

前端工程师也是软件工程师，所以软件工程师的基础知识也是非常重要的，这些基础知识包括：

• 数学
• 计算机体系
• 操作系统
• 数据结构和算法
• 编译原理

HTML和CSS也是前端工程师非常重要的基本功，很多同学，尤其是喜欢写代码的同学容易忽视 Markup Language，实际上 ML 也是 UI 相关的领域里面很重要的内容，不应该被忽视。

• HTML:The Living Standard
• HTML & CSS

有同学问说：“前端工作需求很多，老是改来改去，实际的技术点并没有多少，产品决定业务逻辑，从事底层基础服务会不会更有挑战和职业未来？”

的确，越贴近业务和产品层面上的工作，需求差异性越大，可能改动越频繁。不仅仅是前端改来改去，PHP服务端做业务的同学也面临这样的问题，业务逻辑改来改去。越底层通用性越强，改动相对较少。

不过事情都是有两面性的，首先可以这么想想，是底层基础服务的市场大还是互联网业务和产品的市场大。其次，基础服务的通用性很容易达成，而产品层面上如何通用化，如何在业务驱动的产品研发中利用工程化和工具化提升开发效率，这其实是一个很难的问题。丰富的互联网产品已改变和正在改变着我们的生活，然而作为产品的创造者，工程师们怎样让自己过得更好，这个领域值得研究。

另外，不要觉得实际的技术点没有多少，举几个例子：实现曲线和曲面动画，计算地图的最短路径，让png静态图片类似于gif图一样做局部的运动，抽奖游戏，物理效果的HTML5游戏，3D图表，增强现实的WebGL视频流处理等等，这些都是在前端领域中遇到的实际问题。

就 JavaScript 来说，在实际项目中设计最合适的模型高效率解决现实问题本身就很有挑战。作为一种典型的新生代编程语言，JavaScript 特性丰富，使用灵活，性能优良。面向对象、函数式编程、各种设计模式、MVC 和 MVVM，这些本身就有足够的吸引力。

前端要解决界面和交互问题，实际上UI层面上的问题一直是软件工程方面的一个难题，因为UI不停地在变化。浏览器各个版本的兼容性、Web 标准、移动设备、多终端适配，给了前端工程师很大的挑战，对前端工程师的能力也有很高的要求。许多UI问题有不只一种解决方法，许多问题有非常巧妙的思路和精彩的解决办法，前端在工程师群体里是属于非常有创造力的一个群体，因为这个行业需要丰富的创造力和想象力。

前端工程师还是Web标准的制定者、实践者和推动者，而现在的W3C标准不仅仅局限于浏览器，还包括各种手持智能设备，车载设备、智能家居等等。在未来万物互联的时代，前端将不仅仅是网页上的工程师，而是所有人机交互领域的工程师。

前端工程师的学习和成长

前端领域发展很快，各种新技术新**不断涌现，这是一个好现象。但是前端发展太快也带来一些问题，比如有同学就问到我究竟应该学些什么，Angular.js、React、Node.js、ES6、ES7、CoffeeScript、TypeScript……似乎永远有太多东西需要学习，有些东西好像还没学明白就被另一些新的技术取代而“过时了”。

其实还是那句话，前端工程师首先是软件工程师，基础是最重要的，如果基础不扎实，一切应用技能就都是“浮云”。前端的基础是什么？HTML、CSS、JavaScript基本功，数学、算法、数据结构、操作系统、编译原理基本功。

一个优秀的前端工程师必须要有自己擅长的领域，并且钻研得足够深入，同时要有眼界，能“跨界”。可以以前端作为职业，但千万不要把自己的技能限制在前端领域，因为有很多东西，只有站在前端之外，才能看得更清晰，更透彻。

学东西千万别盲目跟风，大家都在谈AngularJS就立即跑去学习，过几天大家都谈React了，就又放下AngularJS去学习React。前端领域知识点很多，值得学的东西也很多，聪明的同学懂得花时间学习成体系的知识并且研究得足够深入，因为只有这样才能从中总结出规律，形成方法论，这样才能最大化学习的价值。

知识的正确用法 —— 一个领域里面的大师永远不会是另一个类似领域的菜鸟

这次前端星计划布置的一个实现带有农历和节气的万年历，有些同学卡在农历计算上，大约70%的同学懂得去网上找代码，但只有不到1%的同学真正弄明白农历计算的原理。

在面试的时候，面试官问到如何做前端性能优化，有的同学能够拿雅虎的性能优化军规回答得头头是道，反复强调使用工具压缩静态资源，但是自己搭建的博客的nginx服务却没有开启gzip。都知道说要合并静态资源，要减少HTTP请求，然而为什么要减少HTTP请求，减少请求之后预计能改善多少性能，获得多少收益呢？需要弄明白这些问题，也需要深入了解HTTP协议本身。

还有一个更有趣的问题，大家都说写HTML的关键是语义化，那么到底什么是语义化呢？这个问题难住了不少同学。标签要符合语义，这个答案看似简单标准，但什么样的标签才是符合语义？强调用 strong 不用 b？那如果有个外星文明，它们的语言里 strong 相当于地球的 bold，bold 相当于地球的 strong，那么它们究竟该用 strong 还是用 b？我们说 i 标签是斜体的意思，那为什么 fontawesome.io 拿它做 icon font 的标签，这是不是“反语义”的？

过去很多地方农村有一种民间的染坊，制作染布的染料。这种染房里面有一口很大的铁缸，通常都要有一个身体非常强壮的工人拿一根很长的铁棒在染缸里面用力地敲击，敲得越响，制作出来的染料颜色越鲜艳。 为什么越用力敲打铁缸染料就越好？染坊的人说这是祖祖辈辈传下来的经验，而事实上也是如此，真的染料的颜色和敲打用力有很大关系。直到有一天，一位从村里走出去学化学的大学生，弄明白了原来只需要在染料中加适当比例的铁屑，就能让染料和含铁元素氧化物产生化学反应而变得更鲜艳。原来祖祖辈辈传下来的“仪式”实际上在真实原理面前只是一种信仰和宗教。同样，如果我们不去了解技术的本质而止步于应用，那么我们就只是技术宗教的信徒。所以在周爱民老师的《JavaScript 语言精髓与编程实践》中说，计算机语言如同祭司手中的神杖，神杖换了，祭司还是祭司，世人还是会把头叩得山响。祭司掌握了与神交流的方法，而世人只看见了神杖。

由兴趣选择前端

在我学程序设计的最初，我学习的是C语言，然而整整一本书除了教我如何在黑洞洞的控制台上输出 Hello World 和各种其他字符或者用键盘输入一些什么然后依然是字符输出外，就没有什么其他的内容了。学习了一段时间之后，我的内心一度是崩溃的，因为我觉得这和我想得不一样，学了那么多知识，我都不知道自己究竟算不算是“学会”了C语言，因为在我看来，那些丰富多彩的操作系统和各种应用软件和黑洞洞的控制台之间明显还有着非常巨大的鸿沟。

事后回想起来，当时的想法当然是幼稚可笑的，那时候的我并不知道程序语言和运行环境之间的区别，对操作系统、用户API、硬件接口、网络服务等等都完全不了解。然而这并不能怪我，因为C语言的教程并没有任何一言半语来告诉我这一点，我也不知道学习了C语言的语法之后接下来还应该学习些什么。

相对来说，Web开发更吸引我，因为不需要安装任何环境，只需要在文本编辑器里面输入一些字符，保存后打开浏览器，马上就能看到丰富的视觉效果，这就是前端的优势，你所做的努力立即就能看得见。

相对于死板的输入输出，Web开发在界面可见的一层要丰富多彩得多，这一点吸引了我，如果这一点也能吸引你，让你着迷，那么你就适合学习前端。

在选择前端作为职业之前，要明确判断自己对前端开发的确感兴趣，选择做前端，应该是确认自己喜欢和适合做前端，而不是为了一份看起来体面而且薪水不菲的工作。如果你对构建丰富多彩的界面、处理各种交互逻辑不感兴趣，甚至厌烦，那么最明智的选择是放弃成为前端工程师的想法 —— 因为选择一个自己不喜欢的职业，为之忍受数十年直到退休，实在是一件很悲催的事情。

对在校学生，我们看重哪方面能力？

有同学问，360前端是否一定要求实际经验的学生，在这里我可以回答：否。
对于学生，我们比较关心的是：

• 基础：包括数学、算法、数据结构、计算机相关基础的掌握。
• 学习能力和学习方法：如何学的前端，学了多久，学到什么程度，遇到过什么问题，是如何尝试解决这些问题。
• 兴趣：对前端的兴趣如何，这一点可以体现在很多细节上。有一个反面的例子比较常见，一般来说我会问学生最近在关注什么前端新知识，有的学生会说我关注某某某，但当我再问他究竟关注到什么程度，会发现他实际上根本没有在这项新知识上花费多少时间。如果你对感兴趣的问题都不花费时间，如何证明你自己对前端的“兴趣”呢。
• 解决问题的能力：遇到难题如何解决的，遇到没接触过的问题是如何思考和最终解决的。从这里可以判断出同学有没有前端思维，这些问题没有标准答案，我们不追求某些“官方思路”，看重过程而不是结果。

关于简历，有同学提到说现在似乎很多公司都希望学生会点 Node.js，会点 React，我自己不会该怎么办。

我想说的是，我们并不要求学生必须会这些。相反，我个人更鼓励学生利用时间打好基础。简历上写自己真正擅长的内容即可，我们不会因为在你的简历上看不到 Node.js 或者 React 就忽略你。只要你真心热爱前端并用心学了，你应该明白如何用前端基础来打动我。有的学生喜欢在简历上堆砌词汇，实际上这一点不见得好，因为如果你写了一个你自己一知半解的东西，最后在面试中被面到了，一定会得负分的。

技术本身是有深度的，A 同学说“我知道React但没用它做过东西”， B 同学说“我用AngularJS写过一些个人的小项目”， C 同学说“我上个月使用弹性布局的思路来写我的博客，结果在Android系统4.1版本的Webkit浏览器下出现了一个显示bug，最后我是这样这样解决的”。你们说 A、B、C 三个同学我们会选择哪个同学？

面试是一个彼此交流的过程，我们希望看到大家在前端领域的能力和潜力，“知道”一件事，并不是一种有价值的能力，尤其是在知识廉价的互联网时代。我们的同学千万不要像背书一样去死记硬背一样东西，而应该真正用心去学。我们的高等学校不仅仅教授大家知识，还有如何真正学习和做研究，不是吗？

如果你对前端真的感兴趣并有潜力，花点小心思，你该知道如何学习它。

最后，祝愿大家都能成为优秀的前端工程师。
本文链接：https://www.h5jun.com/post/to-be-a-good-frontend-engineer?from=timeline&isappinstalled=0

Slideout.js – 触摸滑出式 Web App 导航菜单

简介

Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单。它没有依赖，自由搭配简单的标记，支持原生的滚动，您可以轻松地定制它。它支持不同的 CSS3 转换和过渡。最重要的是，它只是4KB 。Star:6734

安装

npm i slideout

使用

NpmJS官网地址:https://www.npmjs.com/package/slideout

预览