Posts List

菜鸟程序员成长史 --记 Github 1000+ contributions

其实一直以来想写一篇文章总结这几年的技术学习,刚好趁着自己的第一次github contribution 达到1000+,写篇文章总结以下。本文篇幅较长,我会分为几个章节来分别阐述。 博客篇 为什么我要把博客放在第一位呢?因为我认为博客是developer学习技术的平台,也是developer分享知识的平台,博客差不多也就相当于是developer的名片。现如今,博客平台形形色色,有老牌的博客园,CSDN,也有现在比较新潮的SegmentFault,掘金,开发者头条,知乎等等。现在博客的形式已经发展得多种多样,现如今新潮的犹如各种各样的专栏等等。当然,在这么多博文中,有很多质量很高的文章,也有很多滥竽充数的垃圾文章。下面,我就就我个人的了解探探我接触的这些博客平台,仅是个人观点。 Github 哈哈。我为什么把Github列到博客篇呢?其实现在Github几乎已经成为了我生命中不可或缺的一部分,每天打开电脑的一件事,基本就是打开Github看看。作为世界上最大的同性交友网站,Github对于程序猿来说绝对是生命中不可或缺的部分。在此,我主要说说Github作为博客方面的内容。 很多人认为Github只不过是一个代码托管的地方,为什么会和博客有关系呢?其实,现在很多人都是在Github的issue里面开博客,因为issue里面方便作者和读者的沟通,而且支持markdown格式,各种功能也是很丰富。对于比较关注的博客,你可以设置watch,这样你就可以了解issue里面的每一次变化,并且还会有相应的邮件通知。在此,给出几个我关注的几个人的Github博客: iCSS:讲解CSS的,有的还是蛮有趣的。 梁少峰的个人博客:讲解vue讲解的很透彻,百度大牛,我觉得有些博文挺值得看,而且值得多看几遍,不过我好像都没看完。他的博文还是需要深度挖掘的。 ccforward/cc:应该是当初关注他的一个知乎爬虫,他的博客内容我没有看太多,但是内容貌似还不错。 underscore-analysis:解析underscroe源代码的,挺不错的,我看过一两篇,值得多读几篇,我自己也该去读了。 Front-end-tutorial:内容很多,我没有过多了解,可以了解一下。 以上就是我了解的一些在Github上面的博客,因为在Github我没有特别关注这方面,所以还不是特别多,当然Github也不是我主要逛博客的地方。 CSDN CSDN是我开启个人技术博客的地方,感兴趣的地方去我的博客逛逛http://blog.csdn.net/neal1991 。我应该是从2015年4月份开始写博客的,博客的内容主要有我研究生期间一开始做的道路识别的一些研究的论文,虽然这个方向没搞下去,这个方向的确很有前景,只能说老板很有眼光,但我没能力,没能搞下去。其它的也包括一些开发过程遇到的坑之内的,面试经历,技术文章翻译。老实说,CSDN现在的确不是一个很好的平台,因为本身它就偏老,在markdown的显示不是很完美,在移动端显示不是很好,还有一点很重要,广告特别多,还是莫名其妙的,看起来很讨厌。其实我一直都想弃坑,奈何就是github国内访问速度不稳定,还有毕竟在这边维护这么久了,所以还是一直维护着。在CSDN上,我基本上都是去写博客,基本不会在它上面浏览技术博客,因为它的浏览界面实在是太杂乱了,没有重点。这可能也是老牌博客的一个缺点,可能一时半会也没办法改过来。下面我主要讲一些我自己的一些比较稍微有用的博客内容: combox系列问题集:当初做winform开发遇到的问题,记得当初最坑爹的是调试combox的时候,visual studio老是崩溃,后来发觉居然是有道翻译的锅,也是醉了。。。 独立成分分析:这个应该是当初一个讨论班里面要做的一个presentation,我把内容整理出来写了这篇博文,阅读量快2000了,好像是我博客里面阅读次数最多的了。 如何查找django安装路径:非常简单的一个问题,但是当初搜遍了,没找到解决方法。 mongoose对象无法新增删除属性:当初在处理mongo遇到的一个问题,是个坑。 第一个chrome extension:第一次写chrome extension,没有想象中的那么复杂,不过还是有一些方法的,貌似360有翻译过谷歌相关的文档。老实说,谷歌真的很良心,现在很多开发者文档都已经是中文的了。 第一个pwa:第一次写progressive web application,其实写pwa和写其它单页面应用没有特别大的区别。pwa也是我非常看到的技术栈,我觉得这个比小程序好上一百倍,只不过现在在国内还是不温不火,但是我觉得很肯能哪一天就星星之火,可以燎原了。 鉴于CSDN平台的种种,我的确越来越不太愿意在这上面写文章。而且我最近的文章一向是以翻译国外技术文章为主,毕竟还是菜,所以只能靠英语吃饭啦。 掘金 老实说,掘金应该是同类这种网站访问量比较大的。的确,里面有不少的精品内容,当然也会参杂很多乱七八糟的东西。其实,现在一般的原创博主都不会只在一个平台发文章,所以基本上你这个平台看得到的,在其它平台也差不多都能看到。只不过我现在基本不看掘金了,因为他们的编辑对新人极度不友善,极度不友好。 众成翻译 360的一个专门翻译技术博客为主的平台,目前应该还是比较小众。360的前端其实还是蛮不错的,尤其是他们的齐舞团队,里面也有很多大牛。这个平台里面的文章一半质量还是比较高的,而且这个平台翻译操作也是蛮舒适的,感兴趣的非常值得试一试。而且他们的群沟通都很流畅,不像掘金那帮人。。。无力吐槽。 知乎 我本身一向是很排斥知乎的。讲心里话,知乎里面百分之八十的人都是在写故事,骗关注的,我也不明白知乎为什么充斥了这么多天天无事可做的人。当然,不可否认的是,知乎里面还是存在百分之二十的精品内容的,这也是让我能够忍受那剩余的百分之八十垃圾的原因。知乎里面那些回答我觉得没有太大的意义,看了也就是笑一笑,一般都是用来刷新三观用的,在此,我仅说一些技术专栏: 饿了么前端:饿了么现在前端的确搞得风生水起,尤其是pwa,感觉他们是这方面搞得国内最为成熟的一家。可能并不是,但他们肯定是分享这方面内容最多的公司。感觉饿了么前端蛮多大牛,不过感觉他们都喜欢混国外圈,黄玄基本都是在medium发文章的。。。 某熊的全栈之路:这个应该是infoq的专栏,这个编辑每个礼拜会发一个国内外最新技术的文章集合,基本是前端为主。内容比较新颖,基本上最时髦的都在这里面。 Think In Vue:意如其名,现在vue在国内真的很火。火到我觉得用react的撕逼应该撕不过vue,vue的作者尤雨溪在知乎也是很活跃的,经常手撕任何喷vue的人,还有看他阮一峰每日一喷很有意思。阮老师也是个很有意思的人,感觉天天都有人喷他,但是阮老师的心态丝毫不受影响,剖有大师风范。不过值得一提的是,阮老师博客的广告位可价值不菲哦~~ 美团点评技术博客:算得上是大厂,值得一看。 知乎乱,前端乱,如何乱中取胜,就是要保持一颗平常心。 开发者头条 不温不火的平台,文章质量还行。我一般发文章这个里面也会发一份。感觉里面的内容偏机器学习以及架构方面,而且这发文章可以攒IO币,可以换书哟。 Medium 国外的一个博客平台,访问需要翻墙。这是国外一个专门写story的地方,样式很好看,应该算得上是国外非常知名的一个博客平台了。当然了,里面的内容也是多姿多彩的,同时里面的技术文章质量也有很多很高的文章。现在国内技术圈翻译的大多数文章基本都是来自于这个平台。 Quora 国外一个和知乎一样的网站。不过知乎由于国内人数优势,火爆异常。Quora则是不温不火,而且上面还有不少华人。我关注过一段时间,但貌似都没什么特别的内容。 以上基本就是我所有的对于一些博客平台的了解,可能不包含所有,但基本都是我自己的个人的亲身经历。可能部分言辞颇为激烈,但也都是我的肺腑之言。 微信公众号 微信公众号作为一种特殊的平台,现在也成为一种传播渠道,有点类似于报看订阅的形式。但这不一定是一种非常有效的传播方式,感觉深度还是不够的,我比较喜欢在电脑上看文章,因为在手机上看文章难以持续地专注于一篇有内容的文章,一般就只能浅尝则止。所以我一般都是把链接转到我的微信PC版,然后再用浏览器打开,下面介绍一些我关注的一些技术类公众号: 前端之巅:我之前提过的,应该是infoQ的平台,其实和之前的知乎专栏应该是重叠的。 奇舞周刊:360奇舞团队,前面也介绍过了,国内的知名的前端团队,会有一些比较有价值的文章。 前端早读课:每天早上都会发送推文,但是文章质量嘛,参差不齐,基本上都是别人的文章。 FEX:百度FEX团队,收集最新技术文章,但是排版比较差,比较原始。 神秘的程序员们:里面会有一些脑洞大开的漫画,而且会有程序猿和产品经理以及架构师撕逼的故事,很有趣。 Github 为什么我要把Github单独作为一章节来讲呢?因为它实在太重要了!!!以至于我除了它,根本不想去尝试其它类似的平台。关于Github可以讲的东西太多太多,它带给程序员的则是无穷的魅力。在此,我也仅就几个方面谈谈我的个人理解: star篇 Star是衡量一个开源项目是否受欢迎的重要标准之一(当然也有很多是骗star的)。其实,现在很多人看到一个项目都会去star,但是后续是否会关注,当然也就不一定了。曾经有一段时间,我对star深深着迷(其实现在还是很着迷),我每天都希望有人能给我的项目star,看着别人上千的star我都会超级羡慕。但我其实也能够深深体会到做一个开源项目的不容易,开发者有一个idea往往很简单,但是要去实现它,推广它,完善它。这真的很难很难,而且还会有各种各样形形色色的人问你各种问题,给你提出各种要求,这些都是很痛苦的。但是我依然希望自己有一天还是能够成为一名出色的开源项目的开发者。下面我就挑一些我star的项目来讲一讲: prepack:前几天,前端圈最火的技术,编译优化,facebook总是走在潮流之端。

使用js实现图片轮滑效果

经常在购物网站,看到那种图片轮滑的效果,所以看到有人实现了,所以我也就学习下了。 首先贴出html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="javascript.js"></script> </head> <body> <div id="flash"> <ul id="pic"> <li style="display:block"><img src=""></li> <li><img src="" ></li> <li><img src=""></li> <li><img src=""></li> <li><img src=""></li> <li><img src=""></li> </ul> <ol id="num"> <li class="activate">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ol> <a href="javascript:;" class="arrow" id="left">&lt;</a> <a href="javascript:;" class="arrow" id="right">&gt;</a> </div> </body> </html> 图像的原路径我就不制定了,css文件 * { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; color: #fff; } #flash { width: 730px; height: 454px; margin: 100px auto; position: relative; cursor: pointer; } #pic li { position: absolute; top: 0; left: 0; z-index: 1; display: none; } #num { position: absolute; left: 40%; bottom: 10px; z-index: 2; cursor:default; } #num li { float: left; width: 20px; height: 20px; border-radius: 50%; background: #666; margin: 3px; line-height: 20px; text-align: center; color: #fff; cursor: pointer; } #num li.

css样式表的引入方式

一般来说,css 有两种样式表的引入方式,在这里我记录一下,比较这两种引入方式的区别: <link rel="stylesheet" type="text/css" href="css文件"> @import "css文件" 显然第一种方式似乎是更常见的。事实上,使用这两种方式引入css文件的效果都是一致的,区别在于是html标记,而@import是css语法。标记有rel,type和href属性,可以制定css样式表的名称,这样可以利用javascript的语法来控制。举例来说,我们可以在一个网页中链接多个css样式文件,在利用javascript语法控制不同情况下显示的样式文件,例如让用户在点击某个按钮之后更换网页的背景颜色,或者随着时间来更换网页的背景颜色,正因为link方式的弹性更大,这也是为什么这种方式更为常见的原因。