默认分类
只是一个默认分类

关于vps

这个站目前是放在阿里云虚拟主机上运行的,虚拟主机说是方便,但是只能跑php,而且要是国内的话备案还要花不少功夫。所以一直有换成vps的打算,而且最近一直在用的ss越来越慢了,终于下决心还是自己租个vps,自己搭建ss,毕竟自己的就是放心,还能强迫自己学习Linux。租个vps要是只用来科学上网,那就太浪费了,作为原生前端当然不能满足于现在的php博客系统,node才是真爱。
所以,开始进阶学习Linux和node。我立志不让我的vps白租,一定要花完所有流量!
给大家分享一下我是如何搭建ss的吧。
如果你是windows用户,首先安装ssh命令,其是很多教程里用putty这个工具,但是据说这个中文版还存在后门,所以两种选择安装ssh或者使用putty英文版。
链接到服务器后,我用的是一键安装包,注意一行一行的执行哦

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

这个是来自秋水溢冰,具体可以去看他的博客,此外还用其他版本的ss供你选择。

另外还可以安装锐速对你的vps加速,在执行下代码过程之前还要先去官网注册一个账号。

wget http://my.serverspeeder.com/d/ls/serverSpeederInstaller.tar.gz
tar xzvf serverSpeederInstaller.tar.gz
bash serverSpeederInstaller.sh 

然后一路回车,是否全选是,就安装完成了。
很简单吧~

HTML5语义化

啥叫语义化,就是别全用div,一按F12一片div,头都晕了好吗~

html5.png

一、header

header,其中一般包括标题,介绍文本,和导航栏。注意不要和head标签混淆。

二、nav

块级元素nav用来表示页面中导航类链接组,比如全局导航,面包屑导航,上一页/下一页。

<nav>
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</nav>

三、article

块级元素article非常类似于div或者section。看看w3c上怎么说的吧:article标签定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。

四、section

section元素表示文档中的一个区域(或节),section元素恰当的用途是将页面分割成有层级的块,元素内部通常会有一个对应层级的标题(h1到h6)。
看看MDN的使用提醒:
1.如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。
2.不要把 <section> 元素作为一个普通的容器来使用;这种情况是 <div> 的适用范围,特别是当它的目标只是美化样式的情况。 通常来说一个 <section> 应该出现在文档的框架中。

五、aside

还是参考MDN中的介绍:<aside> 元素中连接到页面中其他部分的内容,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者被插入在该内容里。他们通常包含在工具条,例如来自词汇表的定义。也可能有其他类型的信息,例如相关的广告、web 应用程序、个人资料信息,或在博客上的相关链接。

六、footer

与header元素类似,footer用于表示页面的底部。

sass与compass

之前总是想找到一个能自动完成浏览器兼容的工具,今天终于发现了这个compass工具。
如果你有sass基础,再学会了compass,你的开发效率会有一个极大的提升!
关于compass的使用,官网上讲的非常详细也很简单,可以去看看哦~
而且,有国人开发了一个叫Koala的可视化编译工具,作为小白的我们最喜欢这种了,是不是~

记不住这些命令啊,只好在这里把几个常用命令手打一遍:
创建项目文件:compass create myproject
编译:compass compile
监视文件变化自动编译:compass watch
编译压缩版本:compass compile --output-style compressed

compass分为五个模块
reset:重置默认样式
css3:这里就是完成厂商前缀的模块
layout:布局模块(比如页脚)
typography:版式模块(比如链接、文字等)
utilities:(不属于以上模块的功能)
其中还有特殊的browser support模块是,顾名思义这是浏览器支持模块,其中最常用估计也就这一个了$browser-minimum-versions:('ie','8'),表示对浏览器支持到哪个版本。
其中css3模块不用说肯定是最常用了,去官网看看都有什么吧~

伪元素

所有伪元素

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
  • ::backdrop

伪元素的作用就是能允许在不添加额外声明的情况下为文档的某些部分添加样式。

一开始上来就想原理啊,文档啊,什么都先摆上,但是都不如来几个例子看着舒服。

<p data-height="250" data-theme-id="0" data-slug-hash="GpVbzR" data-default-tab="result" data-user="zhangchen915" class='codepen'>See the Pen 伪类 by zhangchen (@zhangchen915) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

上面的效果是不是很有意思,其是这个方括号就是用伪元素加上的,最后为伪元素加上了一些渐变效果。看完这个例子你就应该大致了解了伪元素的作用,就是利用它来装饰真正的元素 (无论是装饰图片还是其他一些效果) 而不需要更改 HTML 的内容。

此外以往我们在清除 float 的时候,会使用"div style="clear: both">或是br clear="all",但是会产生过多无意义的容器,为了避免这种情况,我们可以使用::before以及::after来优雅地清除float。

开始写博客

其实前几个月就已经用wordpress建了这个博客,但是一直没有写几篇,都是图方便用oneNote在写东西,最近看到Typecho这个轻量级的博客系统,终于要决定要好好开始写博客了,作为一个前端学习者,专业的博文产量不会很高,但是我绝不会去抄袭或者仅仅复制转载,做人做技术一定要有所追求,要创造一些价值,我想我可以作为学习者这个天然优势写一些文章为后来者铺路、填坑,也是我这个博客的意义所在吧。background-Weather.jpg