Hot For Coding

纯CSS样式解决相册横向完美排布

很久没有研究CSS了,成天用各种框架也基本都不需要自己写,最近要做一个相册页面,碰到的第一个问题就是如何排布。先给出设计稿,然后再说说样式如何写

full

分析一下,有一个容器,容器有padding,每一行的每一个item之间又有margin,首先想到的是这样

.container {
  padding: 10px;
}
 
.container .item {
  float: left;
  width: 24%;
  margin-left: 1%;
  border: 1px solid #CCC;
}

...

READ ALL

Angular ng-repeat 数组有重复值

默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的。如

$scope.items = [
  'red',
  'blue',
  'yellow',
  'white',
  'blue'
];

这个数组blue就重复了,遍历它

<li ng-repeat="item in items">{{ item }}</li>

控制台就会抛出一个错误:

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in items, Duplicate key: string:blue, Duplicate value: blue

...

READ ALL

前端独立开发部署模式

在开始讨论这个话题之前我们先来认识一下传统的开发模式

传统开发模式

相信很多做过Web开发的程序员应该都会经历这样一种开发模式,利用服务器端程序提供的HTML模版引擎编写HTML页面,比如

  • PHP 开发有Smarty模板引擎
  • Java Web工程有jsp页面
  • Python 如Django自带的template
  • NodeJS Express自带的模板

都有一个共同的特点,服务器端渲染HTML返回浏览器。

Ajax过渡

Ajax是把服务器端渲染剥离的推进者,当时网页局部更新就是未来的趋势,那什么是前端独立开发模式呢?简单来说就是前端开发阶段使用开发WebServer做服务,使用类似http-proxy之类的包做API代理转发,完全与服务器工程剥离,服务器端只管暴露各种API接口提供数据的增删改查,不负责渲染HTML页面,前端有一套自己的规则去渲染HTML。

...

READ ALL

CoffeeScript使用体会

如今,越来越多的预处理语言在开发阶段代替了传统的Web三大语言,分别是jade/hbs对应html,Sass/Less对应css,TypeScript/CoffeeScript对应JavaScript,当然,实际上能够对号入座的远不止以上列出的,以上列出的应该算是有点名气的。

但凡是革新的东西应该都有它的优势所在,CoffeeScript也如此,这门语言的目的就是针对JavaScript的臃肿,毕竟JavaScript问世的时候不没有想到会有今天的成绩,然而JavaScript在TOIBE排行到了前所未有的高度,当下JavaScript开发成为Web领域最急缺的技术人才。CoffeeScript也因JavaScript受关注的同时步入大家的视野。下面聊聊用了CofffeeScript做几个项目后的真实体会,仅仅是体会。

...

READ ALL

Gitlab升级到7.9后出现500/502错误的解决方法

Gitlab_500

有两台服务器都装了Gitlab,第一台服务器在升级到Gitlab后出现500/502错误,在重装重导入数据都没有办法解决的情况下,只好作罢全新重新安装了一次,中间备份恢复数据过程苦不堪言。今天再次对另外一台服务器做升级的居然也出现了同样的问题,在正常的rpm Uvn gitlab.rpm reconfigure/restart过程都没有任何问题的情况,居然也出现了500/502错误,感觉应该是Gitlab出现Bug了,于是Gitlab tail下监控发现错误如下

...

READ ALL

php-fpm以root身份启动

为了安全php-fpm默认是以apache用户启动的

[root@chaoge ~]# ps -aux | grep php-fpm
Warning: bad syntax, perhaps a bogus '-'? See /usr/share/doc/procps-3.2.8/FAQ
root      4539  0.0  0.0 205552  3716 ?        Ss   10:22   0:00 php-fpm: master process (/etc/php-fpm.conf)
apache    4540  0.0  0.0 205552  3332 ?        S    10:22   0:00 php-fpm: pool www
apache    4541  0.0  0.0 205552  3332 ?        S    10:22   0:00 php-fpm: pool www
apache    4542  0.0  0.0 205552  3332 ?        S    10:22   0:00 php-fpm: pool www
apache    4543  0.0  0.0 205552  3332 ?        S    10:22   0:00 php-fpm: pool www
apache    4544  0.0  0.0 205552  3332 ?        S    10:22   0:00 php-fpm: pool www
root      4556  0.0  0.0 103248   888 pts/1    S+   10:22   0:00 grep php-fpm

...

READ ALL

NodeJS http-proxy一个小问题

关于http-proxy

使用npm构建前端项目的话应该很熟悉http-proxy这个模块了,它能代理HTTP请求,有了它我们真正实现前后端开发完全分离,甚至部分资源也能代理到相应资源。

full

如果用过VPN的童鞋就更容易理解了,有时候要看点朝内看不到的内容就得先把请求发到朝外某台代理服务器上,然后那代理服务器再请求相应的资源并把获取到的请求结果返回给客户端。

http-proxy的使用非常简单,https://www.npmjs.com/package/http-proxy 详细用法看这里

...

READ ALL

寻找JavaScript码农

老板: 请问您要点什么?
我: JavaScript码农给我来一打
老板: ...

开个玩笑,首先声明,我不是老板,我也是一个打工仔,只是目前在负责前端开发,现在急缺前端开发人员

这是一家充满热血激情的小团队,办公地点。。。有点阴森。一楼是洗车的、三楼是洗脚的、二楼是我们公司

full

外表虽然阴森,但内在还是很宽敞的

full

公司主要做3D机房起家,所以是一家企业IT公司,后来扩展出了2DIT业务, 目前在五百平的空间里有六十多人办公,其中研发将近四十多人,属于技术型公司

...

READ ALL

WebGL解决中文字体载入的问题

WebGL

从写代码开始,中文导致的问题不计其数,本次也不例外。

WebGL里要显示中文有两种方式:

  • 2D效果 新建一个Canvas写上中文,然后再添加到WebGL里,优点是不用额外加载特定字体,网页能用什么字体它就能用什么字体,而且只要使用普通DOM API刷新内容,WebGL里render后就能渲染最新。使用DOM方便调试维护。缺点是这种方式还是2D的方式,没有完全发挥3D的效果。
  • 3D效果 每一个字体都是一个3D模型,优点是完全发挥3D效果可以配合3D实现原理能做出很炫的效果,缺点是这种方式需要额外准备字体模型库,然后还要载入页面中。

...

READ ALL

HTML5 Web Worker是利器还是摆设

关于Web Worker

HTML5几个优势特性里,就包括了Web Worker,这货可以了解为多线程,正常形况下,浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态,而HTML5的Web Worker就是为了解决这个问题。

所以我理解它能解决两个问题:

  • 解决程序阻塞问题
  • 提升效率

例子

通常测试效率最常用的无非就是fibonacci了,我们也来个fibonacci性能测试

var start = (new Date()).getTime();
var fibonacci = function (n) {
  return n < 2 ? n : arguments.callee(n - 1) + arguments.callee(n - 2);
};

fibonacci(38);
console.log((new Date()).getTime() - start);

...

READ ALL