预览模式: 普通 | 列表

2017年VUE2.0试手项目--奔奔算术

利用春节假期,系统的学习了VUE2.0/组件/webpack/SPA技术。正好儿子每天要做口算题,就利用这些新学的知识,花2天时间,为他写了一个移动端的小型出题软件。

 
 
 
 
功能点:
  • 随机出题,加减均可;
  • 可进行一些基础模式的配置,
  • 对加减法做了一些优化,避免出现太简单的题目;
  • 练习模式下,可进行计时、自统计错题功能
  • 一些动画效果用GSAP实现
 
技术点:
  • vue2.0组件
  • vue-cli2.0+webpack生成单页应用
  • sass、flex布局
  • localStorage读写
分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 684

2016年终总结

 经历:

1、2016年,网站业务量减少,最大型的企业网站项目为云龙集团网站项目。
2、以顾问方式,为两家大型软件公司提供界面服务。
3、以顾问方式参与了WK及美一点移动端APP项目。更深刻的了解了创业型项目的甘苦。
4、使用d3.js技术框架,黄花机场触摸屏项目 。
 
技术:
2015年主要是把前端新概念进行了蜻蜓点水式的了解。2016年则是以VUE为突破口,完整的了解了MVVM体系的方方面面。过年前这个月,利用VUE1.0体系,重写了一个袖珍的SPA网站。然后购买了慕课网的【Vue.js高仿饿了么外卖App】的收费课程。两个项目互相印证。之前一直对VUE的组件、路由体系不太了解,此次无法回避,把这些知识点翻来覆去的看了个遍。也在segmentfault.com上提了不少问题,上面的网友很热情。
 
另外熟练了git命令行方式,熟练使用github.com。
通过优特项目,更加熟悉前后端配合/mock测试方式。
 
工具:
使用了更多基于nodejs的工具软件。对于Webpack这个大坑有了更多了解(不懂的也仍然很多)。
 
合作与分享:
继续以顾问方式参与项目。也带了几个前端学生。在知乎上回答了一定数量的问题,得到了一些关注。
 
生活:
搬家到河西,重新构建自己的工作圈。花了很多精力在孩子的学业上。
坚持跑步,完成了第二届长马(半马)完赛。与儿子一起踢足球、打乒乓。
 
2017愿景:
使用VUE构建具体的组件化项目。
学习小程序或是react native,打通APP开发通路。
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 698

不知道咋的备案就失效了。好容易恢复了。备案号不在的这段半个月,学到了不少的新知识:

  • * 完整的学习了git命令行,用命令行管理自己的仓库https://github.com/csdudu,并上传了几个小片段。建立gh-pages分支。以后需要演示的片段,全部都使用这个方法进行演示了。
  • * 完整的了解了npm包管理的机制,编辑package.json,更多的npm语法。并且通过实战,了解到npm的一些坑:比如node版本的影响、cnpm的优缺点。
  • * 基本搞懂了Webpack的运行机制,编辑webpack.config.js,常用loader。日常使用webpack-dev-server --inline --content-base .方式进行热更新。
  • * 基于Webpack搞清了es6的import/require语法,投入使用。用loader方式打包vue工程。
  • * 基本搞懂vue-router路由系统,开始制作一个SPA的demo,以用于以后PC端的仿FLASH类网站。
  • * 恶补了许多vue组件的知识。
  • * vue自定义指令的写法。
  • * 了解了前端AJAX模拟的一些知识,比如mock server的工具、搭建方式。顺便学习了LeanCloud这种把数据库抽象为API的工具的基本用法。
 
接下来,要向VUE组件化开发、ES6语法,甚至React native的方向进军。微信小程序有时间也想试试。

Tags: 学习新知识

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

 演示:http://contactu.cn/2016/round/round.html

 
分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 700

达内前端培训的真实个案

 我现任技术顾问的单位,有两个妹子前端人员,我现在进阶培训她们。小A,昨天跟她聊天得知,是不久前从达内培训出来的。她自述,在达内培训4个月,前端制作方向(另一个方向是前端设计),费用一万七。每天学习、作业安排得非常紧,以下是她给我的部分课程和习作目录,可以说,跟前端沾边、隔得远的,都学了:

但她求职效果不太理想,实际工作能力被主管评价“一般”,目前仅拿该岗位起薪。(这样说小A,有点让她难堪,但实际情况如此,我也希望她迎头赶上)。
 
此培训机构课程安排确实太杂。这种大而全的设置,某种程度上,更好迎合市场,让课程表华丽。刚入门的学生,并非学得多就能嚼得烂。即使我们知道任何培训机构,学员都有 先后之分,但这个学费也确实太贵了,性价比低。何况小A看上去,并不是那种不努力、不思考的学生。这点血汗钱,花得有得冤。
----------------------------
对比:我另一个女学生,自学四个月,在我这里听了几堂课,目前待遇比A要好。
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 713

经老同事推荐,昨日在优特咨询,与该公司技术人员进行了为期一天的前端技术交流与培训。

我介绍了目前我所了解的前端技术的大致形式。然后为大家重点分享了iconfont、bootstrap、vue.js、gulp工作流的内容。
 
会谈中大家多次发生热烈的讨论,主要讨论点包括:
如何前后端分离--vue(mvvm)模式的优缺点
切换体积较大的页面时,如何保证切换更流畅---讨论了浏览器缓存、SPA+AJAX+require等技术方式;
 
交流很愉快--对于后期技术合作,项目组领导也对我提出了诚意的邀请。
以己微薄之技,为更多的技术团队提供服务。
 
 
 
 
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 701

我学生求职成功

我一个前端学生,女,非计算机专业,2016年6月毕业后,毅然放弃原专业,入前端大坑。自学四个月,在我这听了5次课,共10小时 

上周,在长沙,求职前端成功,薪水
4500+双休。

世上无难事,只怕有心人。
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 657

 

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

熟悉GIT命令行

花了两天时间学习vue.cli+github,命令行方式基本搞熟了,顺便给自己搞了个响应式简历:

 http://csdudu.github.io/

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

试用了一下微信小程序开发工具

结果发现,没有appid,无法上传,也就无法在手机上预览。

微信要求升到6.3.27,这个版本不是一个正式版本,因此只能从官网下载后安装,无法直接从手机上升级。

详细的API,现在也没心情看,只期待微信尽快开放正式的开发权限。听说玩过VUE的人,用这个应该比较好上手,这真是一个好消息 。

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

代我一好友,承接微信开发,有意向者请洽本人QQ:258754

H5游戏开发,flash小游戏开发。h5游戏白鹭引擎开发,兼容安卓和苹果所有手机,适配所有屏幕,最终生成原生js代码,手机浏览器运行,兼容性高。

资深工程师做h5游戏已经接近三年,团队由资深设计师,前端,后台组成,靠谱,下面是部分案例....

 

查看更多...

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 918
小H大学刚毕业,已经跟我学习了二个月左右。本周她决定试着求职,结果狗血事一堆...

查看更多...

Tags: 长沙前端求职 找工作 面试

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

 此次我帮老朋友做个小项目,升级黄花机场触摸屏软件(长沙的兄弟以后有机会可以到机场大厅试用)。

 应大家要求放个图:

老程序的实现方式,是HTML+FLASH+一个exe应用程序调用IE浏览器。分工是,activeX生成EXE程序,调用IE浏览器实现全屏。所有HTML文件都部署在本机,由FLASH来实现一些复杂交互,比如“大厅地图的放大缩小与拖动”。这个方案的不便之处显而易见:

1、必须使用一个加壳的exe程序,依赖IE6浏览器。

2、FLASH没有源文件提供无法升级。

 

因此,此次升级,准备采用以下方式:

1、在网上查到,chrome可以使用快捷方式直接全屏启动,这样写:

Javascript代码
  1. "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --kiosk ‪ http://localhost:88/index.html

此快捷方式要自动打开index.html,必须使用虚拟站点--kiosk这种方式简直就是为触摸屏量身定制的,已经屏蔽了右键!甚至光用鼠标都无法关闭,只能用键盘方式才能切出来。

 

2、用HTML5+CSS3+JS方式完全替代FLASH。采用强大的d3.js内核实现地图功能,具体方式我在另一篇文章中有演示

3、kiosk全屏方式只支持虚拟站点(比如localhost),我还必须在本机架设一个虚拟站点。我用node.js小程序实现了,不使用重量级的iis--当然,在这种单纯环境下,两者区别不大。

 另外,强大的node.js可以提供直接调用chrome启动的功能,写法如下:

Javascript代码
  1. // 调用chrome全屏方式  
  2. var childProcess = require('child_process');   
  3. childProcess.exec('start chrome --kiosk http://localhost:'+PORT+'/index.html');  

原来实现全部功能,需要点击2次,一次打开node.js的虚拟站点支持,一次打开chrome全屏方式,有了上面这个调用方式,只需要一次点击,就能完成全过程。我把这一次点击做成了一个windows的bat文件,并且采用开机自启动。

这样,每次一开机,就自动进入到chrome全屏状态,并且切换到index.html页面!全自动化!

chrome全屏启动方式参考:http://www.cnblogs.com/abel/p/3235839.html

分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1006

 按到朋友的一个项目,制作黄花机场的位置示意图,原来是几年前用Flash制作的。到现在就存在一些问题了,比如说代码不透明,不好进行编辑等。于是我直接用H5+Jquery+d3.js进行了一下重构。

 
制作过程有点小曲折。问题的核心当然是这个放大缩小拖动的程序。我用百度在国内范围找了半天,都没有很合适的。找到的几个都功能点小缺陷。不得已动用翻墙工具,用google搜索了一下,找到了一个:https://bl.ocks.org/mbostock/6123708
此程序核心用的是svg模型,用的是著名的d3.js框架。本来我想用纯DOM结构解决问题,可是实在没找到更好的,加上之前对SVG又有点研究,于是决定使用这个。找这个东西就花了几小时。
 
之后总体没碰到大的问题。对SVG的结构又有了更深的理解。
另外,对于d3 zoom的初始值的设定,默认情况老是从1开始,但是要求是从我设定的值开始。花了2小时用google查资料,最后发现了:
Javascript代码
  1. zoom.scale(ratio_init);  
  2. zoom.event(_svg.transition().duration(200));  
 
搞定了这个问题。
 
此次的最大收获就是:
国外好东西真多,google+英文关键词搜索才是王道。
分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3084