预览模式: 普通 | 列表

长沙前端培训求职最值钱的5大必杀技

长沙前端培训求职最值钱的5大必杀技昨天有个商学院刚毕业找工作的妹子,请我参考个简历(前端),里面列举了node.js/vuejs/reactjs等各种高大上技术词汇。看完后,我第一时间说出我的观感:“你做的页面呢?PC端或是移动端页面呢?页面呢呢呢呢呢呢 ....”
 
没错,在长沙混IT,以橘子洲为界,湘江以西的开发团队,他们不需要组件化、模块化、自动化流、不需要node中间层,你就算天开眼搞个MVVM,技术总监他不敢用!----而湘江以东呢?他们压根就不知道有这些技术!
小团队需要前端做的,很简单,就是切图!排页面!再切!再排!5大黄金必杀技,按重要度排名如下:
 
一.移动端布局、定位
----不管好不好,好歹你要把页面排出来! 排出来! 排出来! 语义化再烂也行,嵌套再深也行,CSS再乱也行!inline-block/float/absolute分不清也行!因为这些技能,后端永远只会比你更烂!
 
二.移动端响应式方案
---页面都排出来了,要适合不同的屏幕吧?花半天时间学一下lib-flexible方法最佳,最不济你也得懂媒体查询(CSS堆不死你!)
 
三.手脚要快!
---快切图!快出页面!快速修改!上线前不修改100遍你都不叫做IT!cutterMan/EMMET/sublime/各种快捷键就是你每天不断重复的生活!如果你还说你会gulp+sass+browserSync那前面的当我没说!
 
四.使用iconfont图标
---如果你上游负责出设计的美工还只知道sprite,就不要让她知道还有iconfont这件事,否则小命难保---如果美工/前端都是你一个人,那么当我没说,反正是自己害自己。
 
五.一点点的jquery总要会吧?
---滑个图、弹个窗、切个框,这些总麻烦后端哥哥也不好意思。至于更麻烦的表单、控件、动效啥的,你不会,老板也不敢开你!当然,如果你是男性,开了就开了,你怕个啥?
 
本来写到这里就完了。结果我群里男同胞加了一句:“高颜值妹陀,夏不用管!摆看就要得!长沙欢迎你!”
 
 
 
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1293

 很多前端小菜鸟们,还不知道啥是自动工作流。说白了,就是搭建一套自动机制,让前端码农变成无脑的流水线工人,摆脱琐碎的人工劳动。从此,你在开发环境做的东西,会自动的传送到生产环境....

查看更多...

Tags: gulp

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

 

我打算做一个GSAP动画库的技术培训,有这方面需要的朋友,可以Q我:258754 。

培训这套神器的入门知识。并可长期在群里咨询问题。人均200元以内,限15人,半天或1天时间 ,大家能接受否?场地我尽量找赞助,其它费用自理。 时间暂未定,集中大家意见。

简介:
GSAP是前端动画领域的最强神器!早在FLASH时期,就已经是AS编程首选的动作库。进入H5时代以来,它全面转型,为HTML页面提供JS动画的强劲支持---用大白话讲,就是用它可以搞定一切HTML动画,可完整替代FLASH。做为世界级成熟产品,他各项性能指标完美,教程齐备。具体数据可以查看它的官网:http://greensock.com。里面提供了它与各种原生动画、JQUERY等主流动画库的比较数据。
 
培训必要性:
GSAP只有英文教程!因此很多朋友觉得有语言门槛。
另外因为它的产品体系太大(不同的产品、插件、函数、参数),很多人搞不清具体的对应关系。
一些复杂度较高用法,必须要积累一点的实战经验。
 
关于我:
我从FLASH时代起,就开始学习这个库,并翻译多篇文字及教程,发表在天地会及个人博客上。
我购买了官方99美元的年度会员,因此拥有所有收费插件。
站内所有例子,基本上我都有过研究,并在多个项目中使用。
 
我预想的课程体系
 
课程 描述 时间
GSAP产品体系
这个工具是做什么用的
如何查阅官网学习
整个体系概述,产品、插件、函数、参数的关系--快速串讲
如何部署
40分钟
TweenMax/lite系列 较易掌握的单线动画体系,基本能实现常用动画功能---相当于一个或数个演员 60分钟
TimelineMax/lite系列 复杂动画、多时间线---相当于很多演员的整剧  60分钟
SVG插件
概述众多插件功能
SVG基础知识、遮罩
详讲MorphSVGPlugin(相当于FLASH形变动画)、DrawSVGPlugin(相当于描线动画)、BezierPlugin(相当于FLASH引导线路径动画)
60分钟
其它有价值的工具 Draggable、SplitText等 20分钟
集中答疑 学习者讲出自己心目中的动画形式,老师拆分为公式,并讲解动画思路 60分钟
 
总时间:5小时
 
培训方式:
我来现场集中培训半天左右,可掌握这个库的最基础用法,并可长期在群里咨询问题。
分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1004

以下 GSAP官网上的示例动画集,经过学习,我也能制作这些SVG的遮罩、形变、路径类的动画,以设计师的创作提供更大的想象空间。

MorphSVGPlugin Examples

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

 演示文件:http://contactu.cn/2016/svg/test_svg2.html

注意看运动轨迹与“老鹰”的交汇处的表现。


 演示文件2:http://contactu.cn/2016/svg/test_svg3.html

主要看形变动画。


我的目标就是用Svg来替代以前的FLASH,那么遮罩、矢量路径动画、形变动画这几大要素,是不可缺的。在这个演示中,可以看到前两者的解决方法。

1、遮罩就用SVG自带的clipPath标签解决。(半透明遮罩没找到办法)

2、矢量路径动画相当于FLASH的引导线动画,我用了GSAP的pathDataToBezier插件将线条变为路径 ,然后用tweenMax来实现bezier路径运动。

3、至于形变动画,用了GSAP的morphSVG,见演示2的那个音乐线条的变化 。

 

至此,几个FLASH的重点功能,都已经由SVG完美实现。

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

未特别标记的,是基础要求,打了红色标记的是加分项。

 http://naotu.baidu.com/file/f1b1b650accd2fe18959f96fbb59ce80

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

 我刚花646元人民币(99美元)购买了一个greesnsock(绿袜子) ShockinglyGreen帐号,得到MorphSVGPlugin等收费SVG插件包。------别找了,网上没有免费的。GSAP(HTML)以及AS3版本的所有收费插件,均包含在内。

 
很方便制作:矢量路径动画(沿复杂曲线开动的火车)、矢量变形动画(猫头 秒变 狗头)、旗帜飘扬、复杂的飞字等,
详细演示地址:http://greensock.com/club/(可能要翻墙)
 
以上动画都是完全基于HTML/svg/tweenmax,效果流畅,类似FLASH。
我是greensock(GSAP/TweenMax/TweenLite)的资深用户,也是天地会的老会员,目前GS平台产品的中文资料,很多都是来自我的推荐和翻译(天地会、本人博客contactu.cn)。
 
有需要分享的朋友,我开价200元人民币每套。技术方面问题,欢迎咨询本人。本人QQ 258754,接受QQ或邮件咨询。
 
分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 965

参加W3CTECH长沙技术交流会

交流会到会人数不是很多,个人介绍时,感觉大家讲得太简略(内向?谦虚?),除了多数参加工作的,到会还有三个商学院的没毕业的学生妹子。

德龙和志刚两位老师主讲,前者讲了一下node.js在前端的应用,后者描述芒果TV前端团队的一些架构和工具情况。总体感觉还是高冷,毕竟一般中小团队还没那么完整的建制和积累。中间请“没用过node”的同学举一下手,哗啦啦举起一大片。我自己也只用过node的极少数功能,比如建个本地袖珍服务器,以及使用gulp和compass的一些小流程工具,但好歹也算用过,厚着脸皮没举手,装有识之士。
从头到尾,除了三位老师在台前发言,听者中有三四个人(包括我)问了一些问题,但怎么也谈不上气氛热烈。我觉得懂多懂少,好歹也算是来了一趟,至少也混个脸熟不。但多数说是“来学习”的朋友,最终都没有问问题,也没有分享困惑。
其实我本人,倒是更关注小团队的架构,希望更多听到前端应用中,一些刀刀见血的问题。比如我终于在现场获知,如何用chrome进行跨域数据测试-----就这么一句设置,就值得这一下午的时间支出。
分类:培训与招聘 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 2349

纯CSS实现的菱形(斜方块)列表

DEMO地址:http://contactu.cn/2016/grid/

完全CSS3实现, 理所当然的用到了transform: rotate效果,但是真没有那么简单。

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

 近日工作需要,每天要将一个目录下编辑过的html文件,拷贝到另一个路径下。用win自带的拷贝功能,太麻烦了,而且每次要去清点哪些文件变动了-----不如搞个小程序,自动实现。

gulp就是实现这一功能的利器,它的安装过程网上很多,就不再赘述。

gulpfile.js工作代码如下:
 
Javascript代码
  1. var gulp = require('gulp');  
  2.   
  3. // 依赖gulp-changed插件  
  4. var changed = require('gulp-changed');  
  5.   
  6. // 起始目录和目标目录,据说只支持相对路径,不过也够用了 
  7. var SRC = '*.html';  
  8. var DEST = 'dist';  
  9.   
  10. gulp.task('t'function () {  
  11.     return gulp.src(SRC)  
  12.               .pipe(changed(DEST))  
  13.               .pipe(gulp.dest(DEST));  
  14. });  
 
 
编辑完后,在当前目录下的cmd命令行模式下,运行 gulp t,即可完成拷贝过程。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2115

牛肉粉与编程

 早起写程序。

 
写半道被一个问题卡住了:
vue写法:<button class="aaa" disabled>请问这个disabled属性如何动态绑定?
 
试了几种方法不得正解,提问到QQ群,无人解,郁闷中,肚子都气饿了,下楼吃碗津市牛肉粉先。何以解忧,唯有牛肉...
没想到在粉馆有奇遇,技术问题被解决了,往下拉看答案:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
QQ群里的大BOSS起床了,一句话解决了问题。
http://www.html-js.com/article/Vuejs-Chinese-introductory-tutorial-Vuejs-2-Directives-instruction
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 874

首先声明:嘟站长前端水平不高,会的东西统共就那么几样,在这个技术博客上都有罗列。大牛们请直接无视我的存在 。

长沙前端总体水平不高,不少高水平的人,都跑去北上广挣大钱去了。留下的很多前端人员都是从旧式“切图仔”转来的(我也一样),这些“留守”的人,正是目前的主要技术力量。
在长沙招聘前端不易,因此我一般建议朋友们自力更生,招聘加培训。 我在长沙工作了多年,同行熟,朋友多,有一定项目经验,时间也比较自由--因此我来帮团队带新人,是比较合适的。
 
我自己提供的服务,包括几个层次:
培训:适合自有前端但水平欠缺的团队,可以选择让我进行短线培训,讲解一些重要的技术点。
支持:团队碰到解决不了的前端技术问题,由我帮助解决。一般是远程帮忙。
参与:直接做页面、做活儿。
 
以上三种方式,都按小时计酬,成本由低至高。有需要的朋友,可以跟我联系。 QQ 258754
 
分类:服务报价 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 892

用Rxjs改写的的ajax函数--返回promise对象

代码如下:

Javascript代码
  1. function aj(url , type="GET" , data="json"){  
  2.     var final = Rx.Observable.fromPromise(  
  3.         $.ajax({  
  4.         type: type,  
  5.         url: url,  
  6.         dataType: data  
  7.         })  
  8.         .promise()  
  9.     );  
  10.     return final;  
  11. var aaa = aj("shopData/test.json");//把ajax结果赋给aaa,并做下一步处理 

这段代码使用了rx.js及jquery3的库,目前为止,似乎还只有jquery支持在ajax返回promise对象,我到mui论坛提了问,答复mui.ajax暂不支持promise对象。可见promise对象还未普遍使用

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2097
改编自淘宝的lib-flexible,页面宽度任意变化。这种方式的优点是适合于团队协作,量出尺寸就可以做绝对定位。请点击:http://contactu.cn/2016/lib-flexible/
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 974