Canvas 实现位图转像素画

C

2016 年快结束了,最后一天总要留下点什么。

阅读全文

实现footer在页面底部

突然发现自己写的hexo模板有点问题,当页面主体高度不够的时候,footer页脚也跟着往上移,不在整个页面的底部了,很不协调,看着也不舒服。于是问题就来了,如何解决。

在footer使用负的margin-top

思路:将页面主体部分的min-height设为100%,于是页面就可以充满整个浏览器窗口了,footer就不会低于页面高度了,然后footer部分再使用负的margin-top来使footer往上移,这样就刚好置于页面底部。但这时候需要一个空的标签来保持主体部分距离底部的高度等于footer高度,防止文字覆盖在footer上面。

<body>
    <div class="content">
         主体正文
        <div class="fix"></div>
    </div>
    <footer class="footer">
        底栏固定
    </footer>
    </body>
</body>

阅读全文

程序员与画家

最近又在折腾另一款绘图app,dotpict,瞬间中了像素风的毒,这 style 好赞。
于是我尝试着点几下,来画个人类。
把几个小色块愉快地堆在一起,两个小人就出来了。

感觉开始画上瘾了。
于是我又在 dotpict 上一口气画了6只愤怒的小鸟,不停地点点点,过了一把瘾。
有点丑,喜欢绘画又不太会画,就只能长这个拙样子了。
最后一只好像被打了一拳的样子,怎都改不好。

阅读全文

移动 webapp 开发相关要点

最近接触了移动端开发,将开发中遇到的一些相关知识点记下来。

viewport,页面比例初始化,禁止页面的缩放行为

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

页面宽度为设备宽度,高度为设备高度,初始缩放1倍,最大缩放1倍,最小缩放1倍, 禁止用户缩放行为
user-scalable=no也可以写成user-scalable=0


禁止iPhone浏览器下电话号码可以点击拨号

阅读全文

如何快速搭建静态资源服务器

前端开发中,经常遇到有些场景需要用到服务器环境,例如AngularJS中的路由,或者是模拟ajax获取数据等需求时,这个时候并不需要考虑到服务端逻辑,只是搭建简单的静态资源服务,因此解决方法有很多,下面介绍几种简单快捷的常用方式:

使用browser-sync

browser-sync,非常棒的工具,最吸引人的是它的监控和同步功能,体验非常好,可以不用一直f5刷新浏览器即可实时看到修改了的变化。只要在同个局域网,还可以在手机上也同步看到变化,不需要手动刷新,非常适合移动端调试,很推荐使用。
安装:

npm install -g browser-sync

阅读全文

来些CSS技巧

积少成多的感觉。

  1. 一个很常见的问题,列表横向排列的时候,我们需要给每个列表设置右边距,通常最后一个是不必要设置的,如果网站需要兼容到IE8等不支持:last-child之类的选择器时,其实可以这样解决:ul列表可以设置宽度长一点,然后给ul的父元素设置overflow:hidden,这样每个li设置margin:right超出也无所谓,就不要再给最后一个li设置右边距为0

  2. box-shadow画边框
    边框毫无疑问用border来实现就行,如果需要再加一层呢?对的,用box-shadowbox-shadow第四个参数可以让阴影的半径增大或减小,可以将前三个参数设为0,就不会呈现出阴影效果而是边框效果

    See the Pen GNBLWo by lonica (@lonica) on CodePen.



    不过需要注意的是,box-shadow第四个参数长度是从边框外开始计算的,如果是两层box-shadow的话,第二层的值必须大于第一层才能看的到。并且,它不是边框,只是个看起来像边框的阴影。所以相邻的元素会被box-shadow部分遮挡住。

    阅读全文

解决MySQL因max_allowed_packet的值设置过小而查询失败的问题

在MySQL中,Client和Server通信时可接收数据包的大小是受限制的,这个限制值为max_allowed_packet,通信的最小单位就是packet,当Server接收的数据包大小超过了MySQL配置文件中max_allowed_packet的限制值时,对数据库的读写操作则会失败。

那么如何修改这个值的大小。首先,我们可以通过这个命令先查看当前max_allowed_packet值的大小:

SHOW VARIABLES LIKE '%max_allowed_packet%';

阅读全文

解决HTTPS方式下GIT推送到远程分支每次都要重新输入用户名密码

最近因换了硬盘,重新克隆Git项目到本地,因为使用的是HTTPS方式克隆的,在每次推送代码到Coding上时发现都要输入username和password,除非改成SSH方式,不然很不方便。

经过一番尝试,找到了解决方法:

  1. 在克隆项目时加上用户名和密码信息,这样以后这个项目的推送就不需要再输用户名密码:
    git clone https://username:password@git.coding.net/username/Demo.git
    

阅读全文

AngularJS 什么时候用$apply

A

写AngularJS代码时会时常发现,有时候明明数据模型更新了但是页面视图层并没有更新,然后只要在代码里加上一句$scope.$apply(),视图就更新了。以前总是不清楚什么时候该用,现在清晰了,记录一下。

其实总结一句就是:DOM监听事件处理程序中的代码,外部的回调函数(例如setTimeout(),setInterval())中的代码等不在Angular执行上下文中的代码,如果有修改到Angular数据模型时,则必须由我们手动调用$apply()来获得视图层的更新。$apply方法将会调用一个digest循环来更新整个视图层。

阅读全文

理解浏览器同源策略与跨域的解决方案

开发中涉及到一些跨域问题,从而对同源策略有更深的理解,同源策略是保证Web浏览器安全中最基本的安全功能,无论是前端还是后端,如果对同源策略不了解很容易导致一些开发上的难题。

同源策略

对Javascript来说,满足同源策略可以简单理解为下面的三项必须完全相同:

阅读全文

TOP