Hike News

start-Ubuntu

因为做lab需要Linux环境而不是Unix,所以找奔腾袁大佬装了个VirtualBox,千千作为萌新刚入门,也就暂时将就着使用Ubuntu吧,以后会尝试其他发行版的~

装了Ubuntu,需要配置一些什么呢?为了尽量贴近日用的效果,我也下载了一点点,所以写blog记下来作为第一次接触比较纯种Linux的start~

在这之前,要知道 apt-get 。Advanced Package Tool 是 Debian 及其派生发行版的软件包管理器(就像npm,yarn),软件包管理系统是在电脑中自动安装、配制、卸载和升级软件包的工具组合。就比如:在终端机里输入 apt-get install ,这样系统会自动下载以及所有的依存包,同时进行包的安装。

vim

万万没想到前端也有碰 vim 的一天呢,记了一些快捷键试敲感觉 exciting!

1
sudo apt-get install vim-gtk

git

其实,16.04特性apt install包名 替代apt-get install 包名

1
sudo apt install git

git clone 一个,正常推的时候记得

1
2
git config --global user.email" xxx "
git config --global user.name " xxx "

push 的时候输入用户名密码就可以了。

编码

1
2
3
4
5
6
7
8
9
sudo vim /etc/default/locale
LANG="en_US.UTF-8"
LANGUAGE="en_US:en"
locale -a //查看更改后的系统语言变量,如果没安装en_US的local
sudo locale-gen en_US.UTF-8
locale

ss

PPA,表示 Personal Package Archives,也就是个人软件包集。有很多软件因为种种原因,不能进入官方的 Ubuntu 软件仓库。 为了方便 Ubuntu 用户使用,launchpad.net 提供了 ppa,允许用户建立自己的软件仓库, 自由的上传软件。PPA 也被用来对一些打算进入 Ubuntu 官方仓库的软件,或者某些软件的新版本进行测试。

PPA 上的软件极其丰富,如果 Ubuntu 官方仓库中缺少您需要的某款软件,可以去 PPA 上找找看。比如zz的我在终端搞不好 ss,只好使用图形界面来科学上网。

1
2
3
sudo add-apt-repository ppa:hzwhuang/ss-qt5
sudo apt-get update
sudo apt-get install shadowsocks-qt5

在图形界面里配置已有ss账户,紧接着 Ubuntu 的网代 network proxy 也要我们手动图形界面设置。manual,8080,127.0.0.1,1080。

输入下面执行开机启动

1
gnome-session-properties

点击添加,在command那一行输入

1
/usr/bin/ss-qt5

这样 chrome 可以放心享用啦 【参考http://www.jianshu.com/p/867b5b4451e4

chrome

【警告⚠️,接下来的这个将是反面教材】

1
2
3
4
5
6
7
8
9
10
我用了一个危险的下载源
sudo wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/
导入 Google 软件公钥
wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
把可用列表进行更新
sudo apt-get update
安装 chrome
sudo apt-get install google-chrome-stable
启动 chrome
/usr/bin/google-chrome-stable

telegram

没有 tg 不能活,赶紧下载 tg,这里还是 ppa 源

1
2
3
sudo add-apt-repository ppa:atareao/telegram
sudo apt-get update
sudo apt-get install telegram

图形界面启动 telegram,需要配置。setting 里面 connection type选第三个(TCP with custom socks5-proxy)。hostname 是127.0.0.1,Port 是1080,用户名密码不用管。我 Mac Unix 里面其实选第一个(Auto TCP if available or http)。踩坑了。

ssh

1
2
3
4
5
6
7
8
9
ssh-keygen -t rsa -C "wwyqianqian1@gmails.com" 一路回车
vim ../home/wwy/.ssh/id_rsa.pub. 把公钥存 github 里面
ssh -T git@github.com 验证成功(Hi xxx! You've successfully authenticated, but GitHub does not provide shell access)与否,可惜报错,那么
git remote -v 一下就行。
之后克隆以这种格式:
git clone git@github.com:wwyqianqian/myctask.git
修改https,变成 ssh:
git remote set-url origin git@github.com:wwyqianqian/myctask.git

好啦,以后免去一次次地输入用户名密码的麻烦啦!

screenfetch

超级喜欢在终端展示 linux 发行版 logo 神器—> screenfetch!

1
2
3
4
sudo apt-add-repository ppa:djcj/screenfetch
sudo apt-get update
sudo apt-get install screenfetch
screenfetch

开终端自动启动:

1
2
vim ~/.bashrc
screenfetch //加在最末尾

千千的Ubuntu-screenfetch

Screenshot(自带)

有基友跟我说 Ubuntu 没有截图软件,其实自带了Screenshot呀,支持三种截屏(全屏,窗口,自定义)。

小结

配置这些,应该可以达到日用了呢,用什么 qq 嘛,咱用telegram 扯淡、做表情包、开车、绑机器人、绑 ifttt、开 channel、聊技术、传文件大法好(跑掉······


2017-05-09 千千填坑结束

Learn Linux

这几天看木犀的lab需要学一点点汇编,也需要装个虚拟机,于是就想顺便学学vim和Linux,开启新的技术栈。之前说过再打开实验楼就剁手,哎呀这次手怎么就这么欠呢qwq~~

注意!因为千千是在实验楼虚拟机上跑的Linux,所以本文大量!!超大量引用了实验楼本课程的原文!!!不过这些都是浅尝辄止,以后看完那本《Unix&Linux大学教程》会往里面补qwq

简介
  • Linux 本身只是操作系统的内核。内核是使其它程序能够运行的基础。它实现了多任务和硬件管理,用户或者系统管理员交互运行的所有程序实际上都运行在内核之上。其中有些程序是必需的,比如说,命令行解释器(shell),它用于用户交互和编写 shell 脚本。 Linux 没有自己去开发这些应用程序,而是使用已有的自由软件。这减少了搭建开发环境所需花费的工作量。实际上,他经常改写内核,使得那些程序能够更容易地在 Linux 上运行。许多重要的软件,包括 C 编译器,都来自于自由软件基金 GNU 项目。GNU 项目开始于 1984 年,目的是为了开发一个完全类似于 UNIX 的免费操作系统。为了表扬 GNU 对 Linux 的贡献,许多人把 Linux 称为 GNU/Linux(GNU 有自己的内核)。实际上二者不一样啵qwq~

  • 之前还纠结 Linux 发行版来着(Ubuntu,CentOS,Fedora,OpenSUSE,Debian,Mint 等等),也问了许多朋友这些的区别。大佬都说滚Arch大法好呀,不兹磁Ubuntu呀,Gentoo不对新人友好呀,红帽业界标杆呀,centOS学校都用做服务器稳呀···萌新瑟瑟发抖,还是先好好学Linux再折腾吧w

  • important person:

    1. Ken Thompson:C 语言之父和 UNIX 之父
    2. Dennis Ritchie:C 语言之父和 UNIX 之父
    3. Stallman:著名黑客,GNU 创始人,开发了 Emacs、gcc、bash shell。(RMS的sticker好多啊!)
基本概念及操作
  • 有多种客户端功能的桌面环境 KDE,GNOME,XFCE,LXDE ···这也意味着在 Linux 上你可以自己选择安装不同的桌面环境,甚至可以定制自己的专属桌面。(前几天Ubuntu & Unity分手了呢)(安同 AOSC 他们,好像图形用户界面是 GNOME 惹)

  • Linux 提供了做终端模拟器的程序(Terminal),下面是几个比较常见的终端模拟器: gnome-terminal,kconsole,xterm,rxvt,kvt,nxterm 和 eterm 。

  • UNIX/Linux 操作系统下的 Shell 既是用户交互的界面,也是控制系统的脚本语言。在 UNIX/Linux 中比较流行的常见的 Shell 有 bash、zsh、ksh、csh 等等。

  • 一些常用可有时记不住的命令:

    1
    2
    3
    4
    5
    6
    7
    Ctrl+d------键盘输入结束或退出终端
    Ctrl+s------暂停当前程序,暂停后按下任意键恢复运行
    Ctrl+z------将当前程序放到后台运行,恢复到前台为命令fg
    Ctrl+k------删除从光标所在位置到行末
    Alt+Backspace------向前删除一个单词
    man 1 ls------被分为8个区段 (Manual pages的缩写)
    $ man <command_name>
  • Shell一些通配符:

    1
    2
    3
    4
    5
    6
    7
    *------匹配 0 或多个字符
    ?------匹配任意一个字符
    [list]------匹配 list 中的任意单一字符
    [!list]------匹配 除list 中的任意单一字符以外的字符
    [c1-c2]------匹配 c1-c2 中的任意单一字符 如:[0-9] [a-z]
    {string1,string2,...}------匹配 string1 或 string2 (或更多)其一字符串
    {c1..c2}------匹配 c1-c2 中全部字符 如{1..10}

未完待续

css-layout

推荐的CSS布局方案

提示:CSS的作用就是控制页面的样式,样式中最关键的就是布局。CSS中有着各种各样的属性,看似很复杂,但如果我们把这些CSS的技术,比如浮动,inline-block等等,按布局的需要来看,会发现问题很简单。CSS中我们要解决的问题无非就是实现各种水平布局,以及居中。把纷繁复杂的CSS知识按布局的需求来划分,就可以很好的来组织这些知识。在使用的时候,可以选择最合适的技术。我们关注的应该是应用的布局方案,而不是纠结于记忆具体的CSS知识。 这篇文章主要就是按以下的大纲来写作。具体的布局代码,在写作时可以放Codepen的demo来说明。在写作时要注意写清楚先行知识。


先行知识:BFC和IFC

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的是BFC & IFC。

  • BFC:块格式化上下文(block formatting context)它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
  • IFC:行内格式化上下文(inline formatting context)。IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)

  • block-level box : 由display 属性为 block, list-item, table 的块级元素参与。

  • inline-level box : 由display 属性为 inline, inline-block, inline-table 的行内元素参与。

  • 如何产生BFC

    • 根元素或其它包含它的元素
    • 浮动 (元素的 float 不是 none)
    • 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
    • 内联块 inline-blocks (元素具有 display: inline-block)
    • 表格单元格 (元素具有 display: table-cell,HTML表格单元格默认属性)
    • 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
    • 块元素 (元素具有 overflow 值不是 visible)
    • display: flow-root
  • BFC布局规则

    • 内部的 Box 会在垂直方向,一个接一个地放置。
    • Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
    • 每个元素的 margin box 的左边,与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
    • BFC 的区域不会与 float box 重叠。
    • BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
    • 计算 BFC 的高度时,浮动元素也参与计算
  • IFC布局规则

    • 在垂直方向上,这些框可能会以不同形式来对齐:它们可能会把底部或顶部对齐,也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域,被称为该行的行框。
      水平的 margin、padding、border 有效,垂直无效。不能指定宽高。
    • 行框的宽度是由包含块和存在的浮动来决定。
    • line box 的高度足够包含他内部的容器,当他包含的内部容器的高度小于 line box 的高度的时候,内部容器的垂直位置由 vertical 来确定。让line box的高度是包含块的高度的100%,让line box内部的元素使用vertical-align:middle,就可以实现垂直居中。
    • 如果一个 line box 里的内联元素们的宽度总和小于这个 line box 的宽度,那么他们在这个 line box 里的水平方向的排布方式由 text-align这个属性来决定,如果这个属性被设置成了“justify”,可以使这些盒子在剩余空间内拉伸(除inline-table 和 inline-block的元素)。
    • line box 的生存条件是在IFC中并且包含 inline-level 元素,如果 line box 里没有文本,空白,换行符,内联元素,也没有其他的存在IFC环境中的元素,(如inline-block,inline- table,images等),将会被视为零高度,也将会被视为没有意义。
    • 强行加入block-level元素的破坏性:如果将block-level元素插入到IFC中,那么此IFC将会被破坏掉, 而block-level元素前的元素和block-level元素后的元素将会各自自动产生一个匿名容器其包围,这个匿名的容器内部环境将是一个新的 IFC。

常用的水平布局(多栏水平排布)方案

Float布局
inline-block布局
flex布局

常用的居中布局方案

水平居中
垂直居中

绝对定位


不定宽布局方案

两边定宽,中间自适应
两边自适应,中间定宽

mini-project-2017

昨晚开了前端分享会,学姐和boss为我们答疑,记录下来备忘

  • MVC:Model-View-Controller(一种很好的抽象)。

    • 视图(View):用户界面
    • 控制器(Controller):业务逻辑
    • 模型(Model):数据保存
      1. 用户可以向 View 发送指令(DOM 事件),再由 View 直接要求 Model 改变状态。
      2. 用户也可以直接向 Controller 发送指令(改变 URL 触发 hashChange 事件),再由 Controller 发送给 View。
      3. Controller 非常薄,只起到路由的作用,而 View 非常厚,业务逻辑都部署在 View。所以,Backbone 索性取消了 Controller,只保留一个 Router(路由器) 。//参考http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
      4. M&V通过C通信,V串联DOM与M,由于解耦 MV换掉也没关系?
  • 同步异步:

    • 同步:服务端,有模板,发一个请求,马上回来个html
    • 异步:客户端,无模板只有数据,返回来json数据交换

  • 怎么写同步路由文档:有几个页面,(URL,描述,参数,模板的)表格。
  • 怎么用ninja mock一下数据:mock.json & home.html
  • 把大致的结构写出来是什么意思: 不管UI,分组件,建号文件夹目录树,html写好,(图片上传,列表)
  • 怎么分组件: 功能分,例如文章内容+评论是两个; 例如整页列表+某项列表是两个。
  • 下一步具体做什么:看backbone.js http://backbonejs.org/ 文档;
    看PDF书的两章,做TODO:https://addyosmani.com/backbone-fundamentals/

2016-yearEnd-personalSummary

2016-10

2016-11

2016-12

  • 浅尝辄止地点水js
  • 命令行的问题尽量自己解决,前端问题找导师
  • 蜜汁期末到了开始方

little contributions

个人存在的问题与不足

  • 由于是多线程的学习,从萌新小白到–有编码有c有html有css有js有熟悉git有Unix有task等新人任务,我就异常混乱,把握不好他们的关系和时间分配的问题。作为导火索导致了后面两个问题。这个问题直到2017还没有解决orz
  • 平时学业与木犀的任务还可以更好的去平衡。
  • 题几乎没刷,是个切图仔。

寒假计划&2017的期待

js-DOM

五个常用DOM

  • getElementById
  • getElementsByTagName
  • getElementsByClassName
  • getAttribute
  • setAttribute

DOM

document-object-model

  • 把编写的网页文档转化为文档对象
  • 对象的三种类型:
    • 用户定义对象 user-definded object :程序员自行创建的对象
    • 内建对象 native object : 内建在js语言里的对象Array、Math、Date
    • 宿主对象 host object : 由浏览器提供的对象。
  • DOM树
    • parent
    • child
    • sibling
  • 节点node
    • 元素节点:body p ul
    • 文本节点: 一般包含在元素节点内部、可以不存在
    • 属性节点:title id等等