2016,一生想做浪漫极客

2016,一生想做浪漫极客

他们说程序员这辈子最烦恼的事情,就是给变量取名。所以,在给这篇文章取名时,思考了很久。最后还是选定了专栏的名字,一生想做浪漫极客。
在看了黄玄学长的“年终总结“后,总觉得自己也该写点什么来纪念2015年,这最勇敢也是最折腾的一年。
最勇敢是自己终于做出了想要的选择,转行学编程。最折腾是自己在自学的过程中,一路跌过无数的坑。感觉只要是新手自学会踩的坑,我全都踩了一遍。但是却一次又一次,乐此不疲。

选择HR

时间倒流回2014年的夏天,高考后面临着选专业的情况。当时因为自己作为文科生,可选择的专业不多,又不愿意去凑经济类的热闹,就选择了人力资源管理这个专业,于是理想便是大学四年出去后,成为一名优秀的HRBP。然后大一上学期也过得极为平淡,参加社团活动,写写工作简报或者做做海报或视频。
本以为会向学院中的大多数一样,平静的读四年书,然后或工作或读研,又或是考公务员。
但网易云课堂中一节课的出现让我的生活泛起了波澜。
那是翁恺老师讲的《C语言程序设计》,从这门课开始,人生变得不一样。

遇见C语言

看见翁恺老师那门课的时候,已经是快放假了。当时自己用的又是台式电脑,过年不能带回家。于是各处去搜索能在安卓上运行C语言的软件。最后还真让我找到了来着。软件的名字叫C4Droid。运行界面是这样的:
c4droid
然后当时的我,在寒假一个月的时间内。开始了每天听课,思考。然后把代码输进手机慢慢运行的过程。当时最开心的就是图片的这一段代码,一次性编译运行通过。
在学习过程中,也去百度了各种编程的学习路径。于是决定把C语言作为编程基础,寒假后再学一门Java语言。这便又是另外一个故事。

Java与工作室

学Java时候,去图书馆借了一本《疯狂Java讲义》,自己又买了一本《Head First Java》,并且不断的为此而纠结。我到底学哪本书好呢?哪本书才真正的适合新手呢?好不容易确定了学《疯狂Java讲义》,又开始纠结哪个IDE更好,Sublime text还是Notepad++还是Eclipse?选定了Eclipse后,又在纠结Eclipse的代码补全功能怎么不自动出现而要自己按快捷键?现在想想,真是啼笑皆非。
在学习一段时间后,机缘巧合下,认识了学校家园网工作室的一位同学。他叫kk,家园网工作室是个社团,简单的来说就是负责学校网站建设和学生工作宣传的。当初开学九月社团招新时,因为已经加入了一个社团。所以就没有去工作室那儿投简历,过了之后还是有些懊恼的。
然后在三月份时候,刚学完Java的面向对象基础知识。便被kk邀请去听他的安卓分享讲座,地点就在工作室内。
当时兴冲冲的就去了,去了之后才发现,里面有一个开发部门,里面大概二十多号人。各个都算是志趣相投然后加入的。当时对Java的多态和继承不太了解,在那儿也问了问开发部的部长。一番交流下来,感觉到十分满意和憧憬,于是暗暗的下了决心,那就是自己一定要加入这个工作室。
回去的当天晚上,向kk要了部长的QQ号,于是开始向部长申请,希望能加入家园工作室。
意外的是,我过了。人生在悄然之间开始了转折。

工作室与语法糖

在工作室的前两个月,其实压力是挺大的。自己刚进去,自然是兴冲冲的想做点事情出来。仔细一想却发现,自己Java还只是半吊子,然后C语言也只是打了个基础。于是开始在网络上疯狂的寻找能让自己做出东西来的语言。当时的成果就是:
“会用20门语言输出Hello World!”
“Python在Sublime下的Snnipets要好于Pycharm.”
“PHP不用学习都可以用Wordpress建站。“
这也算是新手经常犯的一个毛病,掉进语法糖里却无法深入的学习一门语言。总想着速成点什么东西。
就现在回想,那两个月可谓是极尽折腾。基本上市面上有的IDE,我电脑里都装了一个。还有各种各样插件与运行环境,甚至听说Mac开发比较好,还给自己的电脑折腾上了黑苹果。(到现在还留着,因为字体渲染漂亮和不能玩我的游戏,所以常用于看小说和期末复习。)
不过好处的话也有。至少对各门语言的优缺点,各个IDE的长短处有了林林总总的认识,踩过的坑足够多了,也积累了一些经验。
工作室在那两个月,没有给我安排任务,让我自由发展。然后在四月末尾时候,我提出了自己的问题,当时一位学长便自告奋勇的说带我一把。

导师与前端之路

说是学长,很多时候我更愿意称呼为导师。其实那时候的我。已经有些撑不下去了,学习编程四个月,却发现什么都做不了。然后尝试各类语言,发现不管哪一门,好像自己学不会。当时就是在那种情景下,学长出现了。
学长大二,物理专业。在工作室内担任前端。是个温文尔雅且极其细心的理科生。
在工作室内学习开发,有两种方向,第一是前端,第二是后台。但无论是前端还是后台,都得学习前端的基础。当时因为我加入时,前端与后台的培训已经结束了,所以跳过了这个步骤。
学长先是很耐心的听我讲完自己的问题,然后给我详细分析了一下。最后决定先带我学前端。当时是先给我介绍了下前端的知识,然后发给我一个资料包和一个W3SCHOOL的链接。告诉我先去看HTML,再去看CSS。看完之后去资料包里看那些HTML命名规范和细节的文件。(新手的话,学HTML还是推荐W3SCHOOL,很多HTML书太厚了,看着就没有欲望。而且W3SCHOOL可以在线调试)
w3school
大概花了四天。把HTML+CSS+JavaScript的内容看了一遍。然后联系学长。
学长看了看我的进度,觉得挺满意的。(毕竟学过用20门语言输出Hello World,入门还是挺快的。)然后让我着手开始仿写网页,第一个仿写的页面,是Baidu。
在仿写页面的三天内,发现自己很多的不足。之前在W3SCHOOL上学的好好的浮动,位置,CSS盒模型等知识。组合在一起就全乱了。然后就是不断地查资料,看W3SCHOOL。
那三天也是废寝忘食的三天。基本上每天一下课就冲回寝室,去写自己的页面。偶尔也会对着写了一半的页面,傻傻的欣赏着。又或是为了1px的视觉效果,反复的调整CSS。
三天之后,把仿写的百度网页提交给了学长。当时做的,属于放在那儿不动还好,一旦变换浏览器窗口,定位就全乱了。学长在工作室内看了我的网页,然后从源代码那儿,一行一行的去Review。告诉我哪里写的不好,出了什么问题,为什么会这样。然后叫我回去修改。
大概反复几次后,仿写的百度首页也算是终于过关了。(下图是最后的作品)
baidu
学长很高兴的交给我第二个任务,仿写Google首页。
在仿写Google首页时,明显能感觉到自己进行页面布局时比之前要流畅很多。但是也遇到了很多新问题,比如说固定在窗口底部的底栏,当时就是怎么样也写不出来了。后面查找资料时才知道,position属性还有相对于浏览器进行定位的fixed参数。

这是仿写的谷歌首页图:
google
仿写完Google和Baidu首页图后。学长让我开始仿写工作室的产品:跳蚤市场。跳蚤市场对于当时的我来说,是个很大的挑战。页面结构可谓是极其复杂(对于当时的我来说)。
最后花了一个礼拜,算是使出了浑身解数,才算是完成了这次作业。最后的页面的动画效果用了jQuery来实现,也算是第一段真正实用的JS代码,想想还有点小激动呢。
跳蚤市场
仿写完这个页面的时候,已经是六月份,工作室也暂时停止了工作,全员开始备战期末考试。

暑期与《JavaScript高级程序设计》

暑期因为第三学期的缘故,所以留校和老师做了一个月的项目,负责的教材编订。七月就这样过去了。编纂的教材,也在十二月末尾时递交给出版社了。
八月份时过得算是充实,买了一大堆的企业管理的书籍和一本《JavaScript高级程序设计》,白天对着JS高程敲代码,晚上就看看企业管理的书籍。感觉不亦乐乎。
看《JavaScript高级程序设计》到对象原型,继承部分,就感觉云里雾里了。一方面是自己没有实战经验,另一方面是自己一直只是看书,虽然偶尔也切图做网页来练练手感,但JS部分没有实践,所以晕头了。
到暑假结束的时候,自己已经能做出静态网页了,但是因为没有和后台合作过。所以对服务端交互是一无所知。
顺带一提的是,我在六月选课时候,选择了《计算机网络》作为大二上学期的选修课。只是没想到,这门课正好是前端的必修课。算是机缘巧合。
幸运十月与第一个项目
还记得上文提到的kk了么?他在工作室内负责做后台。工作室是有淘汰机制的,每个学期末,不能做项目的会被清退。当时的我算是会被清退的那一批(只会写写静态页面,不懂动态交互)。
kk是来通知我可能会被清退的。听到他说的,我仿佛身处寒冬。但接下来的一句话,却让我欣喜若狂。我到现在还记得这一句话:
“我想写个博客,我当后台,你来做前端吧?“
当时的我欣然应允。

第一次Ajax与蜕变

十月一号,正式开始写页面。那同学把后台程序打包发给了我,让我在本地运行且进行调试。过了两天,页面首页写出来了。但因为不懂Ajax,所有东西都是静态网页中写死的。
递交首页给kk的那一天,他很奇怪的问我为什么不用Ajax去调用Api。当时的我腆着脸说我不会Ajax。于是在他和另一端学前端的同学的帮助下,我完成了人生中第一次Ajax调用。看到xhr对象出现在Chrome控制台的时候,我坐在椅子上长吁了一口气。
我知道我自己突破了,开始变得不一样了,不再是只会做做静态页面的切图仔,不再对自己是个文科生,能不能学好编程产生怀疑。Ajax像条线一般,链接着前端与后台的同时,也链接了自己与整个编程世界。在那几分钟内想通了很多事情,感受到了编程世界的无边绚丽。在那一刻,我下定决心:
“我要一直学下去,永不放弃。“
在写kk的博客时,前端的学习开始踏上正轨。边做边学的过程中,学到了非常非常多。包括各种各样的布局知识,JS技巧等。
从一个写完代码,用压缩软件打包放在U盘里到熟练使用Git来管理代码。
从一个写代码时候,只知Node大名而从未用过的人,到熟练使用Node和Npm来管理项目依赖和加速开发。(不得不说前端发展太快,第一次接触bower时,还没用几天。Bower的作者就宣布不再维护了。)
从用jQuery拼接字符串来进行列表渲染到使用Angular,Vue等MVVM框架进行开发。
…………
这样的学习和经历太多,几乎每一个都让我有发现新天地的感觉。
kkblog的github地址

新项目与团队合作

完成博客项目后,工作室让我去做内网重构的工作(终于来了~)。

在这个项目中,学习的不仅是技术,还有更为重要的团队合作。整个开发过程中,既和设计探讨过某个效果在网页上的具体实现,也向后台报告过BUG,还有被项目追在屁股后头,问页面什么时候能写好的,当然,也少不了产品对我说:
“这个地方有个功能我们觉得不好,所以改了改设计图,你回头改一下吧~”。
然后整个页面的一半都被重写了。
做的过程中,有遇到BUG,一个礼拜都没解决,吃饭睡觉都在想的。也有莫名其妙的报错的,还有因为自己代码不够规范,专门去看《编写可维护的JavaScript》的时候。
在开发中的感觉,用俩字来形容。是幸福。因为自己真真切切的做着自己喜欢的事情。

独立开发之路

十二月份时候,看了余果大大的《Web全栈工程师的自我修养》,里面有关于“野生程序员”的描述和对技术学习的指引。于是开通了技术博客Lxxyx的前端乐园,准备慢慢积累。
同时一直觉得自己学院的官网不够好看,于是自己就决定从前端到后台,全部自己重写一遍。功能很简单,用了个爬虫抓取数据,以JSON格式储存在本地的JSON文件内,访问时候通过Ajax。前端再进行处理就行。具体的在我知乎中的提问中有涉及。(前端学习中一直用框架是不是走偏了?)
然后同时在圣诞节当天,开始第二次看《JavaScript高级程序设计》,这次看感觉大部分都能理解了。之前看的云里雾里的地方,这次却看的无比顺畅。我知道我的前端之路,踏上正轨了。
学校的图书馆也给了我极大的惊喜。基本最新的JS图书,图书馆都会第一时间购入。简直大爱图书馆。
下面图片就是我借的书,有些书已经看了一半,或者第二遍了。
JS图书

回顾与展望

回首2015年,或许前期跌跌撞撞的编程学习让人感觉可笑,但对我来说,那是最宝贵的财富。虽然可能绕了最远的圈子、掉了最多的坑。学习中有迷惑、有痛苦、有绝望也有狂喜等各式各样的情绪。但现在我依然还在写代码,还在做自己喜欢的事情。
展望2016年,年度计划是打好基础,学好规范。基础包括计算机组成与运行、算法、数据结构、操作系统、原生JavaScript、Linux的操作等。
曾经有人和我说过,前端要学什么算法和数据结构?但是我并不认为前端不需要算法导论之类的知识,在我看来前端具备坚实的计算机基础,对自身发展是极其有利的。
规范则是代码的规范性。希望在工作中,能写一手缩进有序,注释完善的代码。(有代码洁癖来着)。
我想做程序员。而不是一辈子的初级前端和码农。
同时非常感谢那些在我学习编程路上,支持和鼓励我的人。正是因为你们,我才有机会去选择自己真正想要的生活。
最后贴一句自己很喜欢的话,作为自己2016年的寄语。

“苦练七十二变,才能笑对八十一难。演戏如此,人生亦如是。”

我的Github
我的博客(希望以后能与大家多多交流!~)


如果你觉得我的文章对你有帮助,请支持我。让我写出更好的文章。

支付宝付款 微信付款

JS获取输入框的值,替代jQuery val()

场景重现

项目中需要一个发表公告的框,于是就写了一个。
两个输入组件的代码如下。
一个是input,一个是textarea。

1
2
3
<input type="text" id="noticeTitle" />
<textarea id="noticeContent" placeholder="请输入公告内容">
</textarea>

实际样子

公告框

然后需要在点击发布时,把输入的内容通过ajax传送给后台。
之前习惯了jQuery,直接使用val()函数。

1
2
3
4
var title = $("#noticeTitle").val();
var content = $("noticeContent").val();
$.ajax…………

但是项目中用到jQuery的地方的屈指可数,于是准备使用原生重写。

JS重写

之前以为很困难来着,结果没想到这么简单。
通过javascript的value属性,就可以直接获得输入框的值。

1
2
var title = document.getElementById("noticeTitle").value;
var content = document.getElementById("noticeContent").value;

于是完美解决。项目中也减少了jQuery的80k宝贵空间。

感想

关于jQuery,之前是用的很开心的。
这次的项目也有好几个地方,使用了jQuery。
但是总觉得有点臃肿和浪费,于是尝试着把jQuery慢慢替换掉。

这是最后一处了。(之前处理了四到五处,一个jQuery的插件也转成了原生javascript版)

总而言之,用原生写JS,也没有自己想的那么难。


如果你觉得我的文章对你有帮助,请支持我。让我写出更好的文章。

支付宝付款 微信付款

position absolute下的特定居中法--挤!

场景重现

使用了Vue+Vue-loader+Webpack,所以是组件化开发的网页。
其中,网页需要实现的效果是点击按钮,弹出照片墙这个div和遮罩。

1
2
3
4
5
6
7
8
9
10
<template>
<div class="photowall">
<pmask></pmask>
<div class="pcontainer">
<pheader></pheader>
<pmain></pmain>
<pfooter></pfooter>
</div>
</div>
</template>

遮罩组件的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<div class="pmask"></div>
</template>
<style type="text/css">
.pmask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.7;
z-index: 10;
}
</style>

照片墙主体的代码如下:

1
2
3
4
5
.pcontainer {
width: 1080px;
min-height: 768px;
margin: 0 auto;
}

为了覆盖,所以才用了position:absolute的方式。
于是很高兴的保存,合并,编译。

但是编译完成后,一点开照片墙,傻眼了。
所有东西都被mask遮罩给覆盖了。
仔细想想,是因为没有设置z-index的缘故。

于是高兴的加上了z-index.

1
2
3
4
5
6
.pcontainer {
width: 1080px;
min-height: 768px;
margin: 0 auto;
z-index: 999;
}

但是发现z-index无效,于是想起来

定义的CSS中有position属性值为absolute、relative或fixed,z-index属性才起作用。

于是修改后

1
2
3
4
5
6
7
.pcontainer {
width: 1080px;
min-height: 768px;
margin: 0 auto;
z-index: 999;
position:absolute;
}

继续查看修改后的效果。

嗯,整个照片墙显示正常了,但是居中却不起作用了。原因是设置position:absolute后,margin的值就不起作用了。

但是项目要求我们要居中。

解决方法

一开始想了一回儿,决定用一个方法,把position:absolute挤到中间去。
因为定位为absolute的元素,会根据最近的父级元素定位。

于是我们在外面套上一个div photomain。

1
2
3
4
5
6
7
8
9
10
11
12
<template>
<div class="photowall">
<pmask></pmask>
<div class="photomain">
<div class="pcontainer">
<pheader></pheader>
<pmain></pmain>
<pfooter></pfooter>
</div>
</div>
</div>
</template>

给photomain加上position:relative,使其成为pcontainer的父元素。

1
2
3
.photomain {
position: relative;
}

同时,给photomain设定和pcontainer一样的宽度,再加上margin:0 auto。

1
2
3
4
5
.photomain {
position: relative;
width: 1080px;
margin: 0 auto;
}

那么,最后的效果是。pcontainer完美居中。

原因是因为pcontainer跟着photomain一块移动,且宽度一致。

所以相当于photomain的位置就是pcontainer的位置。这样既能达到居中的效果,也能设定z-index值。

结语

这应该算小弟的第一篇技术文章,起因是今天下午项目中遇到的BUG,居中的方法也是自己摸索出来的。所以并不清楚这算不算好方法。

不过还是很开心,第一次自己不看百度解决CSS的BUG。


如果你觉得我的文章对你有帮助,请支持我。让我写出更好的文章。

支付宝付款 微信付款

莫名其妙出现的jQuery与报错--一次奇妙的Debug旅程

场景重现

项目是一个SPA,使用了Vue+Vue-Router+Webpack+jQuery。
报错的场景如下:
报错

为何称之为莫名其妙?

项目虽然作为一个SPA,也引用了jQuery。
但是!!!我所有的JS文件全部用Webpack打包了呀!
不应该会有单独的jQuery文件啊……
把报错内容上百度一搜索,发现完全不搭架。
于是开始了苦思冥想和Debug。

Debug

在Debug过程中,发现

1.jQuery的报错是在SPA中两个页面的无刷切换中出现的。
2.出错次数会不断叠加,但对页面任何功能都无影响。

于是尝试中从切换中去寻找答案。
后来发现页面切换部分的代码并没有任何问题。
于是开始思考,Webpack的锅?

仔细想了想后否定了,Webpack会把我用的所有JS文件全打包成一份。不应该有单独的jQuery文件出来。
于是想看看这个jQuery是存放在哪儿的。

把报错的jQuery文件在新页面打开。看向网址
网址

等等!
网址的前缀是”chrome-extension://“,这个是谷歌浏览器插件的前缀。

难不成,这个jQuery文件是谷歌浏览器插件的?

于是看向了”chrome-extension://ikhdkkncnoglghljlkmcimlnlhkeamad/js/lib/jquery.js”中间的那一串神秘字符串。那是谷歌浏览器插件的“身份证”。

于是在插件管理页面寻找。
寻找结果

然后把插件禁用后, 再也没报错。

感受

Debug完成后,感觉松了一口气的同时,也十分开心。因为开发中总会有各种各样的BUG,像这种莫名其妙的BUG,网上是没有解决方法的。于是只能自己一点一点去推断,去解决。

自己推断的过程,真的好爽~~~(来自文科生的感慨,逃)


如果你觉得我的文章对你有帮助,请支持我。让我写出更好的文章。

支付宝付款 微信付款

博客更新记录

各个标题上的时间代表博客的修改与变化时间

Hexo

折腾了许久。第一个Github的Blog搭建起来了。之前也有折腾过阿里云,用过wordpress,但总感觉有点繁琐。而且服务器价格有那么高,所以用了一个月就放弃了。
总而言之,今天开始写博客~把经验都分享出来。

域名 2015.12.6

花了半天时间,把之前购买的域名ncuhr.win,绑定到了博客上。
很高兴的是CloudXNS一秒钟就生效了。

七牛

在此不得不提的是七牛,因为github是国外网站。因此访问还是有点慢,所以把所有图片的图床换成了七牛,也把js的源替换成了百度的静态资源。

Gitcafe 2015.12.11

虽然域名绑定好了,但是Github毕竟还是在国外,访问速度还是会受到影响。
百度了一下,发现了Gitcafe这个网站。服务器在国内。于是就把博客迁移到了Gitcafe上。(具体开通教程这儿不再赘述了。)
之前以为很麻烦的,结果Hexo只要在部署选项中加入Gitcafe就行。
有兴趣的可以点击链接

Gitcafe
GitCafe Pages Wiki

部署两个网站

然后就是轻车熟路的Hexo g和Hexo d。
最后再去域名服务商那儿,把DNS地址改为指向Gitcafe的Pages服务即可。

感觉速度快了很多。在也不担心国内网络环境差了。

更换域名 201512.27

给博客更换了域名,之前的域名是ncuhr.win,属于给自己大学专业购买的域名。
之前一直没派上用场,所以用做了博客。
最近那个域名派上了用场,所以新注册了个lxxyx.win的域名,也就是自己博客的名称。

加入评论 2016.1.5

申请多说,给博客加入了评论功能。

加入RSS 2016.1.11

看到有人在文章评论,怎么没有RSS,于是给博客加上了RSS.

hexo博客加入rss功能的教程

博客迁移至Coding.net 2016.2.* (具体日期不记得了)

GitCafe被Coding.net,故博客迁移至Coding.net。
Coding.net的速度还是很快的。

购买iPic,专门用于写博客。2016.07.26

博客程序搬迁至Coding.net 2016.07.30

虽然在北京这儿,但是连接Github的速度太慢了。
所以决定把博客程序也搬迁至Coding.net


如果你觉得我的文章对你有帮助,请支持我。让我写出更好的文章。

支付宝付款 微信付款