碎碎念

一直想写几篇文章,不知从何下手,说一下最近的一些琐事吧。

工作:

导师换部门,本来就我们两个前端的小组现在残忍的就我一个了,两个产品(百度乐播)和百度音乐pc客户端都只有我一个了,我只能说我还是一个孩子。

导师走后乐播做整站重构,我一个人。主要是全局播放器,看起来很好玩挑战很大,但真实情况很累,没有人带,没人一起讨论,只能自己到处请教。从bigpipefis,到最后还是决定iframe,这几天真的是(阿西巴),调研后,真心对优秀工程师致敬,像Facebook之类的,技术真心赞。

一天时间帮隔壁小组做了一个webapp,邓丽君20周年的宣传专题(据说是百度首发),做的过程中,遇到各种问题,虽然误了给妹子过生日的火车,但在其他同事的帮助下最终还是完成了,但也深刻认识到了自己的不足。

技术:

做了两个demo,一个是用node socket写的弹幕,一个是jquery插件,但最后懒得整理,就没有去写到这里。

生活:

一个字—–宅

两个字—–颓废

总结:

成功真的需要努力,一切皆有可能,未来很美好。

 

web动画–requestAnimationFrame

在很久很久以前我们页面动画是这个样子的

 

但是这样做有几个问题,就是

  • setTimeout效率并不是那么高
  • 大多数浏览器的是已16ms为一帧,但是如果你设置不对,就会出现跳帧现象

于是乎作为现代人的我们,有了新的解决方法就是利用 requestAnimationFrame

直接上代码:

 

针对不同浏览器做了兼容,可以说从IE6开始支持,那么requestAnimationFrame有什么好处呢,

  • 根据不同浏览器提供的帧去运动
  • setTimeout本身机制并没有requestAnimationFrame效率高(具体原因待考察)
  • 运行会更流畅,由其本身决定
  • 相对css3来说,绘制更高级,css3有很多效果达不到
  • 当当前页面不显示是,动画停止,节省cpu和电池热量

上面demo针对不同浏览器做了兼容,同时也写了取消事件。其实主要就这两个属性,很容易掌握。

ps: 其实开始研究的时候有个疑惑的地方,requestAnimationFrame 他没有时间这个参数,如果想要达到越来越快的效果怎么办。其实很简单,换个角度,以运动距离为参考,不断加大运动间距就ok啦。

参考:

MDN文档 

CSS3动画那么强,requestAnimationFrame还有毛线用?

Vim再学习00

接触Vim差不多也有一年多了,期间各种原因用或不用,现在也基本把Vim当做了日常编辑器来使用,但有个问题就是,虽然可以熟练使用,但更多的知识去使用它,而不是去了解他,去懂他。Vim并不是一般的编辑器。

这次重新下载的vim,没有配置任何东西,从零开始,去了解他,不会故意去了解,更多的是在使用过程中,去了解,不过由于原来就比较熟练了,所以很多东西跳跃比较大,也算是总结吧对以前的使用。

可能主要分为:

  • 基本使用
  • 配置文件
  • 常用插件
  • 进阶使用

Vim 真的很好用

利用github/bitbucket hooks 自动部署项目

以github为例:

原理很简单,其实就是就是调用github的webhooks API,配置服务器地址,当你每次push项目到github上面去的时候,就会自动触发githb的hooks,发送命令到你的服务器接受端(填写的url),然后你配置你的服务器接受程序,每次接到github的post数据后执行程序(git pull)。

准备工作:

服务器(S)配置git,  生成key传到你的github上,配置配置你的hooks的key(下面会提到)并上传

  1. 在github上你的项目地方开启hooks
  2. webhooks 继续阅读

最近好懒

一直要总结一些东西,总是没有去整理总结,把这一段时间做的东西整理列出来,需要过段时间,一点点整理。

  1. canvas画图    主要技术事件监听、碰撞检测、边缘检测 演示地址                                                     (PS:除了效果和ys大神的一样,其他的每一个代码都是自己思路写的,一直想去对比,最近太懒啦 o(╯□╰)o);
  2. chrome显示豆瓣歌词插件 源码
  3. shareMe(hoho)     主要技术  angular + Express + mysql (路由及层次逻辑)  、socket  demo
  4. jsonp跨域、js事件机制
  5. promise规范、requireJs、hybrid开发,angularJs总结

大公司里怎样开发和部署前端代码?

这是一篇来自知乎@张云龙前百度工程师,曾负责百度 前端集成解决方案 的核心设计与开发工作的回答,原文请见大公司里怎样开发和部署前端代码?  和他私聊了一会感觉很热心的回答了我很多小白问题,而且答案真的很有帮助,是他所说的“细思极恐”。

下面是原文:

我现在称这个领域为【前端工程】。没错,这是我最爱唠叨的问题域。
这是一个非常有趣的 非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中。 继续阅读

2014·秋·大三 (下)

其实最近和比特的小伙伴一起玩,经常会思考一个问题,每天这么忙,这样的生活有意思吗?每天写代码有意思吗?我没究竟是为了什么而奋斗者,为了什么而活着,为什么要让自己这么累呢。其实吧,答案嘛我也不知道,但是我知道现在必须这么做,不做你可能要思考的问题比这个要多的多,或许现在的我们没有资本去想其他的那些吧。对于写代码有没有意义,但是你不写代码你有能做什么呢,如果你现在没有更好的选择就把手中的事情做到极致再说吧,这个这是你实现梦想的一种方式吧。
既然决定做了就要做到最好,做到极致,这段时间自己也在反思这些个问题,将自己的以后的计划写在这里也算是一中监督吧对自己。
1. 首先对自己的要求:完美主义者,极简主义者
2. 对待生活做到: 开心每一天。 (或许听起来有点幼稚)
3. 做事情做到: 专注
4. 珍惜时间,珍惜身边的朋友
5. 做事情要: 踏实,静下心来
6. 每周至少四次锻炼

最后是对自己技术上的一些要求:
0. 每周总结三篇技术文章
1. github 至少坚持100天
1. 做技术要有一种专注,要了解本质,不可以只是表面的知道要从深层次的去了解他,去深处的去了解,而不是看一眼标题,或者只是放到收藏夹就算了,要去思考,去弄懂他,去研究,去学习,去总结。只有这样才能提高,而不是只是表面上看起来知道的很多。

就说这么多吗,可能有点啰嗦,希望自己这次可以坚持下来。

2014·秋·大三 (上)

拖了两个月还是决定写了,本来想着暑假实习完之后写呢,就一直拖到现在,或许也不知道写些什么东西吧,但最近感觉真的应该好好整理一下了,也算是对自己的一个交代吧。

先从两个月前的暑假暑期吧,感觉自己还算幸运,大二暑假就找到了一个实习,公司和老板都很好,覃总也很照顾我经常会顺道送我会学校,也学到了好多东西。也算是体会到了真正的社会生活,每天过着挤公交的生活,那是真叫一个挤呀,只是听说过没有站的地方,这次是真的经历了,别说没有站的了,能够挤上车就算是幸运的了。每天早上起床在路上吃饭,不想转车还有再步行30分钟走到公交站然后再挤上至今记忆深刻的738到公司,打开电脑开始工作,解决各种bug,然后中午的时候伴随公司的12点的歌声,终于可以休息一会去吃个午饭,然后回来一般逛会无聊网站,然后会会休息一会或者继续工作了。然后下午下班后一般会再做半小时有时候会稍微长一点,因为一般跟覃总车回来,和他一起。

回来后再外面随便吃点,回宿舍收拾一下,玩会,如果白天的工作还有bug一般还会调一会bug,覃总一般也会再11点的时候发信息给我。这就是工作的时候出了上班,周末一般一般什么都不会做,可能是工作有点累吧,周末一般比较放纵自己。这就是实习的生活每天比较单调也比较累,唯一可能会变化的就是每天的bug和有时候起晚之后思考去打的还是转车做公交,打的的话,一般今天的工资也就不怎么有了其实。最后实习结束了,覃总告诉我开学之后还可以继续来。不过最近实在太忙了,一直没怎么联系过他。

休息了一周多之后算是开学了,感觉自己可以有更多的时间去学习了,但是我发现我想多了,开学第一件事情就是社团招新以及各种琐事开始了,一直到现在都没有处理太好呢,其实从一开始我可能对社团的管理方式都不对,无论大事小事都会亲自带他们13级的去做,怕他们做不好,导致到现在很多事情都不敢放手交给他们去做了,其实这样他们学的会很慢的,自己早晚也要走的。为了社团真的忙了好长时间,但却是也挺开心的还他们在一起,真的是一个大家庭。

然后就是最不想提的感情问题,还是一如既往的经常吵架,我也不知道为什么,我也不愿,只是想两个人好好的为什么会吵架呢。终于有一次她提出了要静一静,其实说实话我听到这句话的时候并不没有太过难过,而是一种如释重负的轻松感,难道这是我心里真是的想法吗? 当然第二天就和好了。

然后回到自己的地位,其几天学长推荐的百度实习,当时投了简历,不知道怎么回事,15号的面试电话一直没有打过来,后来知道是统计漏了,要等到下批招实习了,其实当时准备15号面试的时候自己心里还是挺担心的,也挺激动的,一天都不离手机怕漏掉电话,但最后还是没有来,准备面试的那段时间也没有做什么事情,现在看来其实应该保持一颗平常心,平时的积淀,等到机会来的时候,自然就会扎住了。

最近有好多人在准备考研,其实自己也动摇过,很多人考研可能为了那一个证书或者感觉自己找不到工作,当然我这只是一个方面而已,但其实我是想着去深入的研究一些东西,更多的是为了知识吧,但最后还是放弃了这个想法,原因好多就不描述了。

这些就是这两个月的大概,当然还有各种事情,一个比一个坑的项目。

写这篇文章的目的也就是整理一下自己,现在整理完了以前的生活,那么就来计划下一步的生活

mysql数据库备份mysqldump操作

最近接手社团之后,有几次同学要代码,包括我自己也是,代码直接从服务器上拷下来就行了,但是有个问题数据这方面的,如果直接在phpmyadmin上节目也很容易就可以操作了,但是还是比较喜欢用命令,主要是服务器并没有装phpmyadmin。总结了一些mysql数据库备份的命令:

基本使用

1. 导出整个数据库,包括数据

2. 只导出结构不导出数据

3. 只导出数据,不导出结构(感觉这个用处不多)

4. 导出特定的表

5.最后导出之后就是导入

需要注意的是,mysqldump命令是不进入mysql中的,而导入source要进入mysql中才可以

web前端开发兼容问题(一)

文档模式

自从html5之后文档模式一般都会是<!DOCTYPE html>可是有时候会有很多问题,在低版本的兼容方面,主要区别就是不同的模式会渲染不同的css,最明显的一个地方就是IE的盒子模型。

怪异模式

听名字就知道了,其实就是一种比较怪的模式,在IE6及以下,如果不声明或者声明方式不对都会默认使用盒子模型。而且可能还会用其他问题。在IE6中我们可以使用document声明来避免标准模式。

标准模式

使用中w3c的规范的模式,符合正常的使用规范。

近标准模式

又称严格(strick)模式,按照标准模式进行渲染,只有在一种情况下不同就是,表单元格内部图片的布局采用和“quirks”模式相同的方式被处理,而不是按照标准模式。

所以说如果网站对向下兼容要求比较高的话,尽量一律按照标准模式写文档声明,如果对于现代浏览器来说,完全可以写<!DOCTYPE HTML>。主要还是根据需求决定。

<meta>标签

可以使用<meta http-equiv="X-UA-Compatible" content="IE=Edge">来保持对IE的兼容性。Edge表示采用系统内的IE的最高版本。另外还有:

  • “IE=edge”
  • “IE=10”
  • “IE=EmulateIE10”
  • “IE=9”
  • “IE=EmulateIE9
  • “IE=8”
  • “IE=EmulateIE8”
  • “IE=7”
  • “IE=EmulateIE7”
  • “IE=5”

对于有些现在有些浏览器的版本是双核
可以使用<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">来默认打开谷歌内核。
参考:stackoverflow