前端开发,技术培训,动效研究,求职信息

 今天一小伙在我群里散简历找工作。我要了一份简历看了看，又跟他聊了聊。

他最大的特点就是年轻，17岁，工作经历开始于今年。技能：网站div+DEDE+photoshop，传统意义上的前后端通吃。太熟悉了，因为我当年也是这样的岗位，只是我一点后端程序也不会。

他开的薪水要求不高，4K以内，很合理。对于不能配齐"整条战线"的单位来说，这简直就是理想的全能战士。不过，这种岗位也是最磨人的。啥都会，杂事多，意味着你不能专精一点。职业生涯的前两年，这是历练，时间长了，反而不如专精一个方向更好。

我也给他举了例子，就是PHP和设计都不会，只要专精bootstrap+少量jquery，也能有较高薪水。

我看了一下他做的单位的移动端页面。基本上就是典型的PC页改了一下文件头meta。无法体现复杂度。我建议他，如果要求职加分，最好是准备一个比较复杂的页面（比如电商类的购物车） ，把所有前端逻辑都用前端程序写一下，比如：手势、组件、加入购物车的前端数据交互、列表排序这些。---壹年前，这曾是我的短板，让我夜不能寐的短板。难题一旦越过，回望便平淡无奇。

这样的年轮人--年轻力壮，视野更宽。 如果学习得当，会让无数的“老师傅”背后发凉。

我要跟年轻人赛跑，也乐意给超越者指路。

 2015/12/22 11:14

 我当前面临的问题是，当一个页面，引用了几十个外部的插件库时，有时候仅凭插件名称，并不知道页面中的一个函数调用，是引用的哪一个库文件。因此要借助一些调试手段，chrome调试器有如下一些手段：

• 在调试器的network面板中，能看到本页面内所有的js外部引用，但仅为“引用”，这些js不一定被实际调用了。
• 如果是查找一个dom对象的行为，比如click，可以直接在event listeners中查到js调用。
• 注意这里有两个重要选项：
  
  Events Listeners的具体使用：
  ancestors（祖先元素）这个选项，是列出所有上级元素的事件，可以用来区别，是本身触发，还是父级元素触发
  framework listeners(框架事件），是选择，是否列出调用的js框架，如果未选中，会显示jquery.js为最终框架（一般我们不需要显示这个）

• 最复杂的情况，如果与行为无关，本页中只有一个函数钩子（比如查找上图中的aaa()定义部分 ），咱们需要查找“在其它模块的函数定义”时，则需要一步步的摸着石头过河：

• 当知道函数调用关系，可以设置断点时，使用f8为直接运行下一个断点。f10为从下一个断点处单步运行。
• 当不知道调用关系，只能步进调试---找到函数入口，然后用f11单步运行，shift+f11为越过当前函数（当前函数仍会执行）；

• 详细学习了avalon，兼顾读了下vue.js，此两类均为MVVM方式框架。目前avalon已经基本熟悉了双向绑定、路由体系。avalon跟jquery没有任何冲突，可以同时使用。
• 把css的display:flex布局方式熟练使用，以后此类多列布局，都不再使用旧方式。-----为了更好的兼容微信浏览器（X5内核），将Flexbox内容加进emmet，以方便自己快速使用，如下：

查看更多...

前阵子几个项目都用到了swiper，使用过程中遇到的一些小问题，汇总下来供大家参考：

查看更多...

Tags: swiperswiper

 最近的项目有用到特别中文字体，最终效果如下图：

 

 据我了解，长沙很多前端团队还没有使用图标字体（font-face）。

逐帧动画在FLASH中是很好实现的。但在HTML世界中，并没有一个很正统的方法。前两天看scrollmagic的示例文件，意外发现他用tweenMax实现的一个逐帧动画，把代码提炼出来做了以下这个DEMO：

 http://blog.258754.cn/2015/test_frame/

知道了这个思路，那么就可以用其它的方法，比如setinterval等函数来实现了。

用timelineMax之类的强大工具，更可以实现各种播放控制，比如正反放、快进等。还可以用来做那种“拖动控制轴来转动物体”等控制动画。

---总之，只要能实现“时间线与图像”的结合，接下来如何控制时间线，就是tween类框架的强项了。

谢谢谢佳浩同学用css的方式实现了这个效果，使逐帧的方式更加丰富，主要代码如下。

点评：js优势是可以自由控制时间线，比如各种播放控制、事件响应等。css方式优点是渲染快，简便，css定义方便。

原来要在手机上测试刚做好的页面，都是丢到服务器上去，然后用网址访问。改一次就要传一次，效率低下。

 今天跟牛人学了一小手，直接把本地电脑定义为服务器，使用node.js。总之结果就是，操作很傻瓜（几分钟搞定），要访问的网页想定在哪个目录都可以。具体操作方法见下文：http://www.cnblogs.com/wangfupeng1988/p/4143996.html

Node.js下载地址：https://nodejs.org/#download

-------------------------------------------

然后手机接入局域网wifi，用浏览器，用IP地址访问电脑IP地址即可，比如：http://172.16.6.218:8081/demo.html

 从朋友那里得到的一套微信游戏资源包，需要者请往我支付宝上打50元并留言或写邮件给我（支付宝帐号258754@qq.com，杜**)，我即告知网盘分享方式。

查看更多...

Tags: 微信游戏微信游戏

 测试页地址：http://blog.258754.cn/2015/flower/trf.html

效果比较简单，一般基础都能写出。主要是考虑此类效果比较常用，我自己做了一下思路整理，以便于工作中快速调用。

首先是把transition提炼成一个单独的class，这样调用时只要这样写就行了：

接下是熟悉transform的emmet速写，不熟悉emmet的朋友请自行百度

在WIN7中，按win+pringscreen键，是可以出现选择框的，但在WIN8中，简单的拷全屏。此问题我向印象笔记的帮助中心提交了问题，答案是“修改快捷键即可”。

我照做成功了---我估计可能是win8中把pringscreen键做了特定功能，不允许其它软件程序调用。

另外说一句，印象笔记的帮助中心服务还是不错的，虽然排队用了三四天时间，但每次都正确的解决了问题，反馈表单和邮件格式的设计，也都很科学高效---证明印象产品是一个强大的体系。

 基于bs版本： v3.3.4我做了一下定制，主要选择项如下：

定制后，主文件bootstrap.css由139K减少到102K

最后我决定所有的JS文件都不要了，连那仅有的三个勾都没选。

定制地址：http://v3.bootcss.com/customize/

 用于某广告公司的内页导航，在网上搜索了一下，好象没有类似的六边形导航，就自己做了一个。

最关键就是搞清六边形的坐标关系，用一张简图表述：

具体代码请移步此页面：http://blog.258754.cn/2015/flower/