预览模式: 普通 | 列表

后生可畏--跟17岁的程序员聊天

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

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

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

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

 

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

 

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

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

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 860

近一个月来我知道前端招聘事宜

 2015/12/22 11:14

 
我一朋友招大咖,侯家塘,爱私厨~~ 招前端工程师 待遇:1W + 双休。上不封顶,根据个人能力往上翻!
岗位要求 :
1.HTML5
2.javascript、通过ajax获取服务端数据,会jquery或者zepto这两种库类的一种
3.有微信公众号轻应用经验
4.webapp经验
 
有意请联系,18707496023黄总

 
我一多年好友公司招 前端:
湖南五方科技有限公司, 保利国际广场(南湖路隧道口,交通方便)。 薪酬7k起,挖人你懂的--可以谈。
要求:电商方向,移动端熟练,HTML5+CSS3+JQUERY,公司稳定。
嘟哥我本人不接待咨询,其它具体情况请找联系人咨询。联系电话13975113466,QQ:34228910

河西大学城天马小区 ,移动运营商支系的APP团队,招C#程序员(APP项目 )2人,全职,10K以上,电脑设备可按员工要求采购。有意者请Q:1373326356高总,手机18711168102

我朋友某APP团队,招一产品经理,工作地点在河西大学城天马小区,待遇8-15K,其它面谈。有意者请Q:1373326356高总,手机18711168102
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 721

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

 
  • 在调试器的network面板中,能看到本页面内所有的js外部引用,但仅为“引用”,这些js不一定被实际调用了。
  • 如果是查找一个dom对象的行为,比如click,可以直接在event listeners中查到js调用。
  • 注意这里有两个重要选项:
    Events Listeners的具体使用:
    ancestors(祖先元素)这个选项,是列出所有上级元素的事件,可以用来区别,是本身触发,还是父级元素触发
    framework listeners(框架事件),是选择,是否列出调用的js框架,如果未选中,会显示jquery.js为最终框架(一般我们不需要显示这个)
  • 最复杂的情况,如果与行为无关,本页中只有一个函数钩子(比如查找上图中的aaa()定义部分 ),咱们需要查找“在其它模块的函数定义”时,则需要一步步的摸着石头过河:
1、设置断点,使用source面板中的断点调试功能。
 
  • 当知道函数调用关系,可以设置断点时,使用f8为直接运行下一个断点。f10为从下一个断点处单步运行。
  • 当不知道调用关系,只能步进调试---找到函数入口,然后用f11单步运行,shift+f11为越过当前函数(当前函数仍会执行);
2、还要注意用"blackbox script"功能,把jquery等库文件“放入黑盒”,否则执行会在这些庞大的库文件中跑很久。

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3101

 

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

查看更多...

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1617

idangerous.swiper.js相关的学习笔记

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

查看更多...

Tags: swiper

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1895

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

红线标记处均为字体,可选中,交互起来,比图片方便太多了。
解决思路就是将体积巨大的中文字库,取子集,只包涵要使用的那部分文字,因此体积就很小了(包含100字左右的中文字,也只有50K左右,如下图:)。英文字库因为本身就小,就没必要再这么做了。
 
为了实现以上“取子集”的目标,实际要解决的问题:
1、把字库由TTF格式自动转化为woff、eot、svg等兼容格式,并放到相应路径下。
2、自动分析并提取网站中用到特殊字体的文字-----这一点很重要,否则每次还要去人工整理,很麻烦。
 
以上是理论解释,解决方式主要有两条途径:
1、通过网站,国内目前只有:http://www.youziku.com/这一个站。我之前转化成功过,但前阵子出现问题,目前正在恢复中。上传个性化字体,要提请站长人工审核。站长服务意识不错,就是很忙。
2、本地用软件转化。我找到了一个很好用的软件:font-spider(字蛛)
 
使用方法网上有详细介绍。需要用node.js的npm方式安装。安装成功后,转化就很方便了,基本步骤是:
1、原始字库文件,必须是ttf格式的,如果没有ttf,要自己想办法转化好。
2、写好html+Css---举例:h2{font-family: 'xzst';}注意尽量把font-family写在最前面
3、一句代码就转化成功,太方便了!转化过程如图:
从此再也不用图片去实现个性字体了!
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 973

阿里图标库iconfont的一个协作功能Bug

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

但我已经在两个移动端项目中使用了,好处很多--比如图标都是矢量的,大小、颜色、效果都可以任意控制。相比之下,使用图片缺点就太多了:比如变个颜色都要准备2张图,做响应式设计还要准备大小各一套等。图标字体的查询和管理,国内可能使用这个阿里的网站www.iconfont.cn。国外有一个名声很大的www.icomoon.io,我还没有仔细研究过。
iconfont提供了简单实用的协作功能,常用图标你可以考虑到这里找现成的。个性图标,可以自己做成SVG格式上传。团队成员可以互相使用、管理图标。比如可以由设计师专门负责查找、绘制、命名、上传图标,其它前端组成员,只需要使用即可。图标全部有名称、有简图,可以分项目管理,很是方便。在没有这种协作之前,开发组内部成员要共享图标,就必须由设计师提供图稿,很不方便,还要绞尽脑汁给图标命名。
 
这里要说的是,我发现了几个不太好用、或者说是BUG的地方:
1、登录很奇怪,目前只能使用新浪微博的帐号登录(想不通为什么阿里的项目不用自己的帐号体系)。
2、网站有时很慢,但是一翻墙就快了。(难道在国外)?
3、最大的问题,是我使用chrome时,发现“协作成员”那里,无法添加成功---可以添加、搜索到其它成员的帐号(新浪微博帐号),但是选中后再点“保存修改”,浏览器无反应。只到后来,我换了一个傲游浏览器试了下,才成功了。
 
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3619

HTML中实现逐帧动画的思路-用tweenMax

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

 http://contactu.cn/2015/test_frame/

 

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

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

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


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

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

XML/HTML代码
  1. .box{ width: 286px; height:222px; margin: 100px auto 0 ; animation: demo 1s infinite;}  
  2. @keyframes demo{  
  3.     0%{ background: url(img/1.png) center center no-repeat;}  
  4.     20%{ background: url(img/2.png) center center no-repeat;}  
  5.     40%{ background: url(img/3.png) center center no-repeat;}  
  6.     60%{ background: url(img/4.png) center center no-repeat;}  
  7.     80%{ background: url(img/5.png) center center no-repeat;}  
  8.     100%{ background: url(img/6.png) center center no-repeat;}  
  9. }  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2333

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

 今天跟牛人学了一小手,直接把本地电脑定义为服务器,使用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

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1077

微信游戏300多套集合包-有偿分享

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

现在很多企业需要一些小游戏来丰富自己的微信平台,这套小游戏包,是非常超值的。
另外,我简单测试了一下,游戏基本可玩,但有些需要修改一下图片、资源路径等,对我来说不是啥大问题,有需要者也可以找我有偿修改..........

查看更多...

Tags: 微信游戏

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1460

简单css3-transform鼠标效果

 测试页地址:http://contactu.cn/2015/flower/trf.html

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

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

XML/HTML代码
  1. .trans  {transition: all 0.5s ease-in-out;}  
  2. .trans03{transition: all 0.3s ease-in-out;}  
  3. .trans08{transition: all 0.8s ease-in-out;}  
  4.   
  5. //调用时这样写  
  6. <div class="tit trans">变化稍慢<br />Y轴转动</div>  

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

XML/HTML代码
  1. trf  transform:;  
  2. trf:r  transform: rotate(angle);  
  3. trf:rx  transform: rotateX(angle);  
  4. trf:ry  transform: rotateY(angle);  
  5. trf:rz  transform: rotateZ(angle);  
  6. trf:sc  transform: scale(x, y);  
  7. trf:sc3  transform: scale3d(x, y, z);  
  8. trf:scx  transform: scaleX(x);  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1209

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

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

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

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1410

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

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

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

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

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1509

六边形-蜂巢形-花瓣形导航菜单

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

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

具体代码请移步此页面:http://www.contactu.cn/2015/flower/

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1247