Hike News

ninja2

ninja 是?

  • Ninja是一款用于前后端分离开发的本地开发服务器,也被称为是前端容器。是老板、刘指导他们写的一个好用的团队工具。仓库传送门—https://github.com/Muxi-Studio/ninja
  • Check this blog post for more info about the development of Ninja.http://zxc0328.github.io/2016/07/05/ninja/
  • 现在用的是 ninja2,有一键配环境功能,和 ninja1 完全不同。

ninja2 的使用

  • 更新 node 和 npm, -v 检查之后我的 npm 是 5.3.0;node 是 v8.0.0。
1
2
sudo npm install -g n
sudo n stable

四五天前,npm 的 5.2.0 自带 npx 详见这篇

  • git clone 目标仓库,以及 ninja 仓库。

  • 在目标仓库里

1
sudo npm install -g ninja_cli
  • 并 vim 编辑新 touch 的
1
touch ninja.conf.js
  • 使得里面内容保持
1
2
3
4
5
6
7
8
9
10
11
module.exports = {
template: "swig", // whatever template engine you like
mock: "/mock/mock.json", // dir for mock data
webpack: true, // flag for using webpack or not
// proxy: {
// route: "/api",
// origin: "http://xueer.muxixyz.com"
// },
staticDir: "/static",
templateDir: "/",
}
  • 之后在 ninja 里面
1
npm link
  • 回到项目中去
1
ninja2 init <repo name> webpack-vue
  • 关代理,进入小的嵌套项目里面并执行
1
ninja2 start
  • 把嵌套的项目拿到外面,只保留大的同名文件就 ok

此文章借鉴茹芸基友在 Tower 里写的经验)☆⌒(^-^)v THX!!

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/

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等等