预览模式: 普通 | 列表

参加W3CTECH长沙技术交流会

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

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

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

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

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

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

 近日工作需要,每天要将一个目录下编辑过的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 | 查看次数: 1714

牛肉粉与编程

 早起写程序。

 
写半道被一个问题卡住了:
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 | 查看次数: 703

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

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

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

老刘求职记

老刘,吾前同事,.NET资深程序员。欲应聘某电商公司。老高,电商团队技术总监,年少成名,面试老刘。
 
二人会议室探讨技术良久,出。老高坦言老刘技术尚有缺陷,如“缓存穿越”、“缓存雪崩”云云。临行叮嘱,好好补习,假以时日,则心理价位可达,更高薪可期。老刘诺诺而退。
 
越两日,老刘于另一公司入职,薪水如其所期。老高闻之,笑而不语。 

 

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

用到和准备学习的一些新工具

  • - 装一个json序列化插件--https://chrome.google.com/webstore/category/apps?hl=zh-cn
  • - 总监推荐使用的github管理工具:sourceTree,官网可直接安装中文版,接下来学习使用
  • - 总监推荐使用的leanCloud,可用于生成后端API接口数据,已经注册帐号,准备试用
  • - 2016年刚推出的微信开发者工具---已经安装,但发现做CSS调试真机时,还是手续比较麻烦,因此对于普通的调试,还是用.css?id=***的老方法,只有一些实在需要精确调试,一定要看到CSS代码对应效果的地方,再使用这个。http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 766

 以下代码实测无用。可能是针对比较老版本的微信浏览器而言的。

 

XML/HTML代码
  1. <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
  2. <meta http-equiv="Pragma" content="no-cache" />  
  3. <meta http-equiv="Expires" content="0" />  

 

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

ajax多信号逻辑的promise写法实现

ajax的这种多信号量情况经常遇上。比如:先从服务器得到一个信号变量A,如果A为真,再从服务器获取信号B,B为真,再......如果用传统的回调方式写,Ajax就是一大堆的callback堆叠,看得头疼,而且不好一层层用函数分开。

 解决这个问题,用到jQuery的deferred对象(参见阮一峰原文):$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。

 我写了个简化后的例子: 

Javascript代码
  1. $.ajax("/api-a")  
  2.      .done(function(data){  
  3.           console.log("第1步完成");  
  4.   
  5.           // 如果第1步数据中的result允许,则第2步  
  6.           if(data.result){fun2(); }  
  7.      })  
  8.      .fail(function(){ console.log("第1步失败") });  
  9.   
  10. //第2步操作可以放到一个函数中,这样看起来代码更清晰  
  11. function fun2() {  
  12.      $.ajax("/api-b" )  
  13.           .done(function(data){  
  14.                console.log("第2步完成");  
  15.                console.log(data);  
  16.           })  
  17.           .fail(function(){ console.log("第2步失败") });  
  18. }  

 

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

2015全年总结---电商前端探索

昨天,我所在的电商项目组已经放了假,今天正式开始休息。 我放年假后第一要事,是写总结。 如果对一年的成绩还算满意,此事则令人喜悦--保有初心,不在于走了多远,而要时刻明白自己身在何方。

经历:

1、2015年仍然做了不少大企业网站(PC端),值得一提的是博深集团、株洲轨道交通

2、跟共成团队合作了“云峰湖”、“拾得大地”两个较复杂的单页应用站(PC/移动端/响应式)

3、长沙银行新版改造

4、在YC电商团队短期工作,电商前端初探。

5、以顾问方式,参与ERP/XYG两个软件项目的界面改造(bootstrap/jquery)。

6、年末时,加入WK电商团队,电商前端再战 。

 

技术:

7、学习MVC/MVVM前端模式,项目中使用过avalon及vue.js

8、具体使用:mui框架,json解析,underscore,localstorage读写,前端的HTTP与缓存体系,iconfont(@font-face)

9、了解:gulp,webpack,requirejs,node.js

10、bootstrap+jquery插件

 

工具:

11、熟练sublime txt3+emmet

12、nodejs快速搭建本地环境

13、熟练chrome调试器

 

合作与分享:

14、实践了以顾问方式参与外包项目,日志计算工作量/取酬

15、与很多新老朋友,巩固联系、开始合作:老董、老高、草帽团队兄弟们、军亮、慧琼等

16、持续更新博客,分享进展,帮助同行

 

运动:

17、坚持跑步,完成了2个在线半程马拉松,10月长马(半马)完赛并创个人最好成绩。

18、参加HBD篮球队每周定期比赛。

 

2016愿景:

19、明年争取进入知乎/github,更多分享

20、完善整个电商前端技术线,以高效开发方式,做出1款较成熟产品

21、想在长沙组织一个持续前端交流的小圈子

22、官网改版

23、搬家到河西,离产业圈更近,运动环境更好。

写完。

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

 我来说一下长沙前端开发岗位2016年的最新情况。我今年经历的几个长沙的电商公司,2015年上半年招前端的价码基本是5-8K。下半年,已经坐地向上翻了2K。2016年初,新的电商公司招熟练工的价格是8-13K,前端组长15K以下,游戏方向可能会稍高一些,万达写字楼那边有家游戏公司专门用“白鹭”引擎的。。

另外一个事实,我朋友深圳的开发团队(水平跟我还有较大差距),普通前端工资13K以上,还基本上留不住人。但我在长沙绝对拿不到13K这个数。这说明长沙的工资水平还是偏低的。当然,要看市场上有没有人可招。出10K在长沙招前端,已经很动听了,但有价无市。

主要技能还是html5+css3+jquery,一般都要求PC+移动端经验。以下是加分项:CSS类框架任选一(比如bootstrap),MVVM框架任选一(比如angular)、AJAX、HTTP、页面优化、加载优化、自动化工作流管理、各种CSS/js动画。游戏开发类,一些传统软件公司需要bootstrap类的界面前端开发,但此类人也比较少。

长沙一些中小团队,招人很难,尽管条件开得比较好(工资、奖金、休假、下午茶、环境)等,还是招不到牛人。或者换句话说,长沙市面上,根本没有散养的牛人。

坊内传闻,步步高云猴是长沙技术储备最丰富的公司。

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

[转自知乎]前后端程序员的差别

 著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。
作者:匿名用户
链接:https://www.zhihu.com/question/39659771/answer/82457812
来源:知乎
 
我还要提醒大家别过分解读node,java语言为什么没有一个对应的名词呢?而Javascript有一个呢。所以别拿node跟人家装逼,本质就是Javascript语言,不过是插了翅膀。说白了,你用node那玩意,就好像一个穷逼(做的是事件驱动、异步编程、非阻塞IO小买卖赚的钱)进入了上层社会,那个装逼的过程。而当了好多年上层人士的java和C++,python等觉得你是个后进入圈子的暴发户。你们前端走的路,包括es6(国外有些大神对es6也有反对态度)、包管理器、加载器、打包工具、测试框架、QA 工具、MVC 框架和库、基于 Node 的 CMS 框架、模板引擎等。都是人家十几年前玩剩下的。而前端最值得装逼的本钱,那种java、C++等望而却步,就是你觉得很土逼的css、html,那个你觉得毫无高大上感觉的结构层和表现层,还有操作DOM、BOM的能力。后台开发永远会觉得你很牛逼,看看他们那无比崇拜你的小眼神,尤其看到你分析页面渲染过程,使用PS过程,切出页面效果,还有兼容问题处理。而当你跟人家谈论管理包、打包工具、测试工具、MVC,人家只能呵呵。看看前端MVC多么的挫,本来仅仅是整个网站架构的view层,自己居然分化出了所谓的MVC。你以为只有node下用gulp和grunt能开发出牛逼的自动化工具?人家java等是二货?只不过前端熟悉Javascript,自己的工具用自己的环境造罢了。我这么说不是要灭自己威风,助他人气势。我只不过要提醒大家我们的核心价值所在。
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1701