kidsamong

kidsamong 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

进击的程序猿

个人动态

kidsamong 赞了文章 · 2015-03-12

Web开发利器推荐(二)

看到一个很棒的系列,介绍了很多对web开发很有帮助的利器,解决了很多开发中遇到的繁琐事,翻译来分享一下:

Webflow

clipboard.png

通过这些服务,一个没有HTML/CSS知识的人,就能在55分钟内搭建一个跨浏览器的页面。 这是为网页设计师准备的完美解决方案,已经有超过26 000人在使用Webflow。 只能免费创建两个项目,想要创建更多项目的收费也很合理。 这个工具真的很酷。

如果你和我一样是个不喜欢GUI的前端,就可以在Webflow上导出几个免费的响应式布局模板。 我还想推荐responsive layout generator 和 Responsive Patterns

Parallax.js

clipboard.png

功能强大、使用简单的视差效果库。

可以给所有的元素应用视觉差效果,通过设置data-depth控制速度。 Parallax.js有一系列的参数:

<ul id="scene"
  data-calibrate-x="false" 
  data-calibrate-y="true"  
  data-invert-x="false"     
  data-invert-y="true"  
  data-limit-x="false"
  data-limit-y="10"
  data-scalar-x="2"
  data-scalar-y="8"
  data-friction-x="0.2"
  data-friction-y="0.8"> 
  <li class="layer" data-depth="0.00"><img data-original="layer6.png"></li>
  <li class="layer" data-depth="0.20"><img data-original="layer5.png"></li>
  <li class="layer" data-depth="0.40"><img data-original="layer4.png"></li>
  <li class="layer" data-depth="0.60"><img data-original="layer3.png"></li>
  <li class="layer" data-depth="0.80"><img data-original="layer2.png"></li>
  <li class="layer" data-depth="1.00"><img data-original="layer1.png"></li>
</ul>

传递父元素:

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

Intention.js

很小,但很有用的库,简化了创建完全自适应布局的开发过程。 用起来很简单。 操作原理如图所示:

clipboard.png

Device.js

clipboard.png

该脚本类似Modernizr,包含了 ios/android/windows/blackberry phone/tablet landscape/portrait 的 HTML 类。

谈到跨设备开发,我想提及 Risizer -响应设计测试的工具。 有很多类似的服务,但是我认为这种方法是最方便的。

GistBox

GistBox能同步你的Github 的 Gist。 可以通过标签排序,管理方便,随时查看。 它是一个Chrome扩展。

clipboard.png

CSS Modal

clipboard.png

起初,该项目是由一个团队成员创建的HTML5样板。 CSS Modal-轻松让网站能自适应窗口变化。 首先要添加此代码:

<section class="semantic-content" id="modal-text" tabindex="-1"
        role="dialog" aria-labelledby="modal-label" aria-hidden="true">

    <div class="modal-inner">
        <header id="modal-label"><!-- Header --></header>
        <div class="modal-content"><!-- The modals content --></div>
        <footer><!-- Footer --></footer>
    </div>

    <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
        data-dismiss="modal">×</a>
</section>

然后在body的结束标记之前添加modal.js。 这是完成了!

Dotdotdot.js, Uikit, HTML2PDF

最近,我需要用省略号来表明有更多的文字。 但标准文本溢出只能在一句中。 我发现一个好脚本dotdotdot.js,它完美地解决了这个问题。

clipboard.png

UIKit——轻量级的web开发框架。

clipboard.png

HTML2PDF——基于phantom.js。 还可以在线把HTML转换成PDF。

clipboard.png


英文原文:Awesomeness & Usefulness for Web Developers #2
SegmentFault整理编译

查看原文

赞 1 收藏 32 评论 0

kidsamong 发布了文章 · 2015-02-09

JavaScript中的各种宽高以及位置总结

在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间

实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结。

第一部分:DOM对象

1.1只读属性

所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下:

1)clientWidth和clientHeight

该属性指的是元素的可视部分宽度和高度,即padding+content,如果没有滚动条,即为元素设定的高度和宽度,如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高

css:

    <style>
        .one{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid #000000;
            overflow: auto;
        }
    </style>

HTML

<body>
<div class="one">
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
</div>
</body>

js

<script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName('div')[0];
        console.log(oDiv.clientWidth+":"+oDiv.clientHeight);
    }
</script>

结果:

clipboard.png

元素本来设定为宽高都是200,即可视部分宽高都是200,但是由于出现了垂直方向的滚动条,占据了可视部分的宽度,所以clientWidth变成了183,而clientHeight依然是200.

2)offsetWidth和offsetHeight

这一对属性指的是元素的border+padding+content的宽度和高度,该属性和其内部的内容是否超出元素大小无关,只和本来设定的border以及width和height有关

css和HTML部分同上,js部分如下:

 <script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName('div')[0];
        console.log(oDiv.offsetWidth+":"+oDiv.offsetHeight);
    }
</script>

最终结果:

可以看到该属性和clientWidth以及clientHeight相比,多了设定的边框border的宽度和高度。

3)clientTop和clientLeft

这一对属性是用来读取元素的border的宽度和高度的。

css

<style>
    body{
        border: 2px solid #000000;
    }
    .one{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>

html

<body>
<div class="one">
</div>
</body>

js

<script>
    var oDiv=document.getElementsByClassName('one')[0];
    console.log(oDiv.clientLeft+":"+oDiv.clientTop);
</script>

最终结果:

clipboard.png

 可以看到div的border被设定了1px的宽,这里显示的就是它的宽度

4)offsetLeft和offsetTop

说到这对属性就需要说下offsetParent,所谓offsetParent指的是当前元素的离自己最近的具有定位的(position:absolute或者position:relative)父级元素(不仅仅指的是直接父级元素,只要是它的父元素都可以),该父级元素就是当前元素的offsetParent,如果从该元素向上寻找,找不到这样一个父级元素,那么当前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是当前元素,相对于其offsetParent左边距离和上边距离,即当前元素的border到包含它的offsetParent的border的距离如下所示:

css

<style>
    .two{
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px solid green;
    }
    .one {
        width: 100px;
        height: 100px;
        background: red;
        margin: 20px;
        border: 1px solid #000000;
        position: absolute;
        top:20px;
    }

</style>

HTML

<body>
<div class="two">
<div class="one">
</div>
</div>
</body>

js

<script>
    var oDiv=document.querySelector('.one');
    console.log(oDiv.offsetTop+":"+oDiv.offsetLeft);
</script>

最终结果:

clipboard.png

 这里让div.two相对定位,让div.one绝对定位,所以div.two是one的offsetParent,同时,又给div.one加了一个margin为20px,所以这里它的offsetTop为40,offsetLeft 本来为0,但是加上margin为20之后就变成了20.

5)scrollHeight和scrollWidth

顾名思义,这两个属性指的是当元素内部的内容超出其宽度和高度的时候,元素内部内容的实际宽度和高度,需要注意的是,当元素其中内容没有超过其高度或者宽度的时候,该属性是取不到的。

css

<style>
    .one{
        width: 100px;
        height: 100px;
        overflow: auto;
    }
</style>

HTML

<body>
<div class="one">
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
</div>
</body>

js

<script>
    var oDiv=document.querySelector('.one');
    oDiv.onscroll=function(){
        console.log(this.scrollHeight+":"+this.scrollWidth);
    }
</script>

最终结果

clipboard.png

 尽管该div的宽高都是100,但是其scrollheight为234显示的是其中内容的实际高度,scrollWidth为83(由于滚动条占据了宽度)

1.2可读可写属性

所谓的可读可写属性指的是不仅能通过js获取该属性的值,还能够通过js为该属性赋值。

1)scrollTop和scrollLeft

这对属性是可读写的,指的是当元素其中的内容超出其宽高的时候,元素被卷起的高度和宽度。

css和html部分同上,js部分如下:

<script>
    var oDiv=document.querySelector('.one');
    oDiv.onscroll=function(){
        console.log(this.scrollTop+":"+this.scrollLeft);
    }
</script>

最终结果:

clipboard.png

由于拖动了滚动条,scrollTop的属性值一直在增大,而水平方向没有滚动条,所以scrollLeft一直为0.

该属性还可以通过赋值内容自动滚动到某个位置,js如下:

<script>
    var oDiv=document.querySelector('.one');
    oDiv.scrollTop=20;
    oDiv.onscroll=function(){
        console.log(this.scrollTop+":"+this.scrollLeft);
    }
</script>

结果如下:

clipboard.png

通过直接设定div的scrollTop,让它直接显示在滚动条在20垂直方向上20的位置。

2)obj.style.*属性

对于一个dom元素,它的style属性返回的是一个对象,这个对象中的任意一个属性是可读写的。如obj.style.top,obj.style.wdith等,在读的时候,他们返回的值常常是带有单位的(如px),同时,对于这种方式,

它只能够获取到该元素的行内样式,而并不能获取到该元素最终计算好的样式,这就是在读取属性值得时候和以上只读属性的区别,要获取计算好的样式,请使用obj.currentstyle(IE)和getComputedStyle(IE之外的浏览器)。另一方面,这些属性能够被赋值,js运动的原理就是通过不断修改这些属性的值而达到其位置改变的,需要注意的是,给这些属性赋值的时候需要带单位的要带上单位,否则不生效。

第二部分 Event对象

在js中,对于元素的运动的操作通常都会涉及到event对象,而event对象也存在很多位置属性,且由于浏览器兼容性问题会导致这些属性间相互混淆,这里一一讲解。

1)clientX和clientY,这对属性是当事件发生时,鼠标点击位置相对于浏览器(可视区)的坐标,即浏览器左上角坐标的(0,0),该属性以浏览器左上角坐标为原点,计算鼠标点击位置距离其左上角的位置,

不管浏览器窗口大小如何变化,都不会影响点击位置的坐标。

js

<script> var oDiv=document.querySelector('.one'); oDiv.onclick=function(ev){ var evt=ev||event; console.log(evt.clientX+":"+evt.clientY); } </script>

结果:

clipboard.png

2)screenX和screenY是事件发生时鼠标相对于屏幕的坐标,以设备屏幕的左上角为原点,事件发生时鼠标点击的地方即为该点的screenX和screenY值,如下所示:

clipboard.png

可以看到尽管浏览器窗口被缩到很小,但是坐标值却很大,因为是相对于屏幕坐标而不是浏览器的坐标。

3)offsetX和offsetY

这一对属性是指当事件发生时,鼠标点击位置相对于该事件源的位置,即点击该div,以该div左上角为原点来计算鼠标点击位置的坐标,如下所示:

clipboard.png

可以看到,点击该div的靠近左上角处,它的offsetX和offsetY为1,0,需要注意的是,IE,chrome,opera都支持该属性,唯独Firefox不支持该属性,Firefox中与此属性相对应的概念是,event.layerX和event.layerY,所以需要兼容浏览器时,获取鼠标点击位置相对于事件源的坐标的兼容写法为var disX=event.offsetX||event.layerX.

4)pageX和pageY

顾名思义,该属性是事件发生时鼠标点击位置相对于页面的位置,通常浏览器窗口没有出现滚动条时,该属性和event.clientX及event.clientY是等价的,但是当浏览器出现滚动条的时候,pageX通常会大于clientX,因为页面还存在被卷起来的部分的宽度和高度,如下所示:

clipboard.png

由于浏览器出现了垂直和水平的滚动条,所以pageX和pageY大于clientX和clientY。

当浏览器的滚动条没有被拖动或者浏览器没有滚动条的时候,两者是相等的。

clipboard.png

文章转自js中的各种宽高以及位置总结

查看原文

赞 32 收藏 136 评论 10

kidsamong 赞了文章 · 2015-02-08

Docker学习之路(四)守护式容器

windows 7, docker 1.3.2,当前使用的容器名为aoct,ID为614122c0aabb。

开启已经停止的容器

可以start + 容器名

$ sudo docker start aoct

start + 容器ID

$ sudo docker start 614122c0aabb

clipboard.png

查看现在正在运行的容器:

$ sudo docker ps

clipboard.png

还可以用docker restart重启。

附到容器上

Docker容器重新启动时,会沿用docker run命令指定的参数来运行,所以重新启动后会运行一个交互式会话shell。也可以用docker attach命令重新附到该容器的会话上:

$ sudo docker attach aoct

clipboard.png

现在就重新回到容器的巴士提示符。

也可以用容器ID:

$ sudo docker attach 614122c0aabb

创建守护式容器

除了这些交互式运行的容器(interactive container),也可以创建长期运行的容器。守护式容器(daemonized container)没有交互式会话,适合运行应用程序和服务。大多数时候是需要以守护式来运行容器。

可以通过添加 -d 参数来实现,创建一个叫aofo的容器:

sudo docker run --name aofo -d ubuntu:14.04 /bin/sh -c "while true; do echo hello world; sleep 1; done"

clipboard.png

上面的命令会让容器在后台运行。使用了一个while循环,改循环会一直打印hello world,知道容器或其进程停止运行。

与之前创建的容器相比,没有返回shell会话,只是返回了一个容器ID。

查看现在正在运行的容器:

$ sudo docker ps

clipboard.png

容器内部在干些什么

上面创建了一个在后台运行while循环的守护型容器,可以用docker logs查看容器日志:

$ sudo docker logs aofo

clipboard.png

可以在命令后使用-f参数来健康Docker日志,这与tail -f非常相似:

$ sudo docker logs -f aofo

然后就会看到一直输出hello world。可以通过ctrl+c来退出监控个。

查看容器内的进程

$ sudo docker top aofo

可以看到容器内的所有进程(主要是while循环)、运行进程的用户、进程ID:

clipboard.png

在容器内部运行进程

Docker 1.3 之后可以通过docker exec命令在容器内部额外启动新进程。可以在容器内运行两种进程:后台任务、交互式任务。后台任务在容器内运行且没有交互需求,交互式二年五则保持在前台运行。对于需要早容器内部贷款shell的任务,用交互式任务.

后台任务例子:

$ sudo docker exec -d daemon aofo touch /etc/new_config_file

clipboard.png

代码解释:
-d标志标明要运行一个后台进程,后面指定要在内部执行这个命令的容器名,我用的是aofo。整句命令在aofo容器内创建了一个空文件夹new_config_file

交互式任务例子:

$ sudo docker exec -t -i aofo /bin/bash

代码解释:
和运行交互容器一一,这里-t-i标志位指明创建TTY并捕捉STDIN。后面指定要在内部执行这个命令的容器名,我用的是aofo。整句命令在aofo容器内创建新的bash对话,就可以在该容器运行其他命令了。

docker exec命令是在 Docker 1.3 引入的,之前版本不支持。可用nsenter命令

停止守护式容器

docker stop命令:

$ sudo docker stop aofo

clipboard.png

也可以用容器ID只带容器名称:

$ sudo docker stop ddd958443007

如果想快速停止容器,还可以用docker kill命令:

$ sudo docker kill aofo

可以用docker ps命令产科当前运行的容器。也可以用docker ps -n x,该命令会显示最后x个容器,不论这些容器是运行还是停止的。

$ sudo docker ps -n 2

clipboard.png

深入容器

docker inspect获取更多的容器信息:

$ sudo docker inspect aofo

clipboard.png

可以用-f或者--format标志来选定查看结果。

查看容器运行状态:

$ sudo docker inspect --format='{{ .State.Running }}' aofo

clipboard.png

查看容器IP地址:

docker@boot2docker:~$ sudo docker inspect --format='{{ .NetworkSettings.IPAddress }}' aofo

我没有设置,所以返回空:

clipboard.png

-f--format标志支持完整的GO语言模板。用它进程查询时,可以重复利用GO语言米板的优势。

可以同时制定多个容器,并显示每个容器的结果:

$ sudo docker inspect --format='{{ .State.Running }}' aofo aoct

clipboard.png

除了查看容器,还可以浏览/var/lob/docker目录了解Docker的工作原理,该目录存放着Docker镜像、容器、容器配置。所有容器都保存在/var/lib/docker/containers目录下。

删除容器

运行中的容器无法删除,必须先停止。使用docker rm

$ sudo docker rm 容器ID

一次性删除所有容器:

$ sudo docker rm `docker ps -a -q`

这不是常规命令,只是小技巧。docker ps列出所有现有的容器,-a标志列出所有(all)容器,-q返回容器ID。这样就得到了容器ID列表,并传给docker rm命令,从而达到删除所有容器的目的。

【本人的学习笔记,主要是对《我的第一本Docker书》、《Docker —— 从入门到实践》的学习记录,并结合其他各种资源的学习。】

查看原文

赞 11 收藏 25 评论 2

kidsamong 发布了文章 · 2015-01-28

数据结构学习笔记(五)双链表、循环链表的算法操作

双链表

双链表定义

clipboard.png
双链表就是在单链表结点上增添了一个指针域,指向当前结点的前驱。这样就可以方便的由其后继来找到其前驱,而实现输出终端结点到开始结点的数据序列。

同样,双链表也分为带头结点的双链表和不带头结点的双链表,情况类似于单链表。带头结点的双链表 head->next 为null的时候链表为空。不带头结点的双链表head为null的时候链表为空。

1.采用尾插法建立双链表

void CreateDlistR (DLNode *&L, int a[], int n){ 
    DLNode*s,*r;
    inti;
    L = (DLNode*)malloc(sizeof(DLNode));
    L->next = NULL;

    //和单链表一样r始终指向终端结点,开始头结点也是尾结点
    r = L;

    for(i = 1; i< = n; i++){ 
        //创建新结点s->data = a[i];
        s = (DLNode*)malloc(sizeof(DLNode));

        /*下边3句将s插入在L的尾部并且r指向s,s->prior = r;这一句是和建立单链表不同的地方。 */
        r->next = s;
        s->prior = r;
        r = s;
    }
    r->next = NULL;
}

2.查找结点的算法

在双链表中查找第一个结点值为x的结点。从第一个结点开始,边扫描边比较,若找到这样的结点,则返回结点指针,否则返回NULL。算法代码如下:

DLNode* Finfnode(DLNode *C, int x){ 
    DLNode *p = C->next;

    while(p != NULL){ 
        if(p->data == x) {
            break;
        }
        p = p->next;
    } 
    return p;
    //如果找到则p中内容是结点地址(循环因break结束),
    //没找到 p中内容是NULL(循环因p等于NULL而结束)
    //因此这一句可以将题干中要求的两种返回值的种情况统一。 
}

3.插入结点的算法

假设在双链表中p所指的结点之后插入一个结点s,其操作语句描述为:

s->next = p->next;
s->prior = p;
p->next = s;
s->next->prior = s;

指针变化过程如图:

clipboard.png

如果按照上面的顺序来插入,可以看成是一个万能的插入方式。先将要插入的结点两边链接好,可以保证不会发生链断之后找不到结点的情况。

4.删除结点的算法

设要删除双链表中p结点的后继结点,其操作的语句为:

q= p->next;
p->next= q->next;
q->next->prior= p;
free(q);

指针变化过程如图所示:

clipboard.png

循环链表

循环单链表

clipboard.png

只要将单链表的最后一个指针域(空指针)指向链表中第一个结点即可(这里之所以说第一个结点而不说是头结点是因为,如果循环单链表是带头结点的则最后一个结点的指针域要指向头结点;如果循环单链表不带头结点,则最后一个指针域要指向开始结点)。

带头结点的循环单链表当head等于head->next时链表为空;
不带头结点的循环单链表当head等于null时链表为空。

循环双链表

clipboard.png
循环双链表的构造源自双链表,即将终端结点的nnext指针指向链表中第一个结点,将链表中第一个结点的prior指针指向终端结点。

带头结点的循环双链表当head->next和heaad->prior两个指针都等于head时链表为空。
不带头结点的循环双链表当head等于null的时候为空。

循环链表的算法操作

循环单链表和循环双链表由对应的单链表和双链表改造而来,只需在终端结点和头结点间建立联系即可。

循环单链表终端结点的next结点指针指向表头结点;循环双链表终端结点的next指针指向表头结点,头结点的prior指针指向表尾结点。

如果p指针沿着循环链表行走,判断p走到表尾结点的条件是p->next == head。循环链表的各种操作均与非循环链表类似。

查看原文

赞 3 收藏 25 评论 2

认证与成就

  • 获得 216 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2014-12-11
个人主页被 1.4k 人浏览