{"action":"created","issue":{"url":"https://api.github.com/repos/linggan100/notebook/issues/8","labels_url":"https://api.github.com/repos/linggan100/notebook/issues/8/labels{/name}","comments_url":"https://api.github.com/repos/linggan100/notebook/issues/8/comments","events_url":"https://api.github.com/repos/linggan100/notebook/issues/8/events","html_url":"https://github.com/linggan100/notebook/issues/8","id":106198060,"number":8,"title":"醉牛前端诞生记","user":{"login":"linggan100","id":9244771,"avatar_url":"https://avatars.githubusercontent.com/u/9244771?v=3","gravatar_id":"","url":"https://api.github.com/users/linggan100","html_url":"https://github.com/linggan100","followers_url":"https://api.github.com/users/linggan100/followers","following_url":"https://api.github.com/users/linggan100/following{/other_user}","gists_url":"https://api.github.com/users/linggan100/gists{/gist_id}","starred_url":"https://api.github.com/users/linggan100/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/linggan100/subscriptions","organizations_url":"https://api.github.com/users/linggan100/orgs","repos_url":"https://api.github.com/users/linggan100/repos","events_url":"https://api.github.com/users/linggan100/events{/privacy}","received_events_url":"https://api.github.com/users/linggan100/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-09-13T04:13:33Z","updated_at":"2015-11-27T06:37:33Z","closed_at":null,"body":"## 起源\r\n\r\n大概两年多以前，和前端结缘，做技术这行的，不管是有项目练手，还是有人带，最主要依然靠自己。现在是信息时代，找资料很方便，当时的我像现在很多新手一样，如饥似渴的在网上找着各种指南，好的学习资料，教程，博客，word、pdf、txt、video，也加各种群求经。逐渐的就找到了很多好的资料。我看着那么多好东西，心想肯定还有其他很多人在找他们，那么为什么还要让他们跟我一样到处找，走那么多没必要的路呢？\r\n\r\n于是在我出来工作之后不久，就拾起了在校时就建立却好久没顾上打理的QQ群，10个人不到，改名叫“web前端~美是编出来的”，这个名字起初是有人质疑的，觉得有点复杂，也有点奇怪。我为什么没改呢，因为它就是我想传达出来的信息，为什么我会做这个并喜欢上它，就是认为它很有趣，很神奇，像魔法一样能做出具有美感的页面。对，就是这样。群里从0到50的人基本都是我出去发广告拉来的，在我去宣传的过程中，在贴吧里看到有一个提供两本书的帖子下面有超过2000条回帖求书，当时我就震惊了，两本书需求就这么大，我有那么多…这更坚定了我把它们分享出去的想法。后来群里的人越来越多，我就没再刻意的去推广过，只是在群里给大家提供一些力所能及的帮助，比如：上传最新最好的资料，发布一些靠谱的职位信息和好文、教程链接等。\r\n\r\n说了这么多似乎和醉牛前端还是没扯上关系，其实不是，都是有因果的，虽然组了QQ群，虽然分享了那么多资源，甚至我在各个社区都开了专栏，也写自己的博客，但逐渐的会觉得仍然有些无力感，因为互联网很大，信息很多，需要帮助的人很多，而它们都太有限了，谁也不能一对一手把手，或者24小时全天候去提供帮助、解决问题。（虽然也没人有义务这么做，谁让我那么爱提别人操心呢~）。所以，效率很低，复用率极低，成本很高。很多东西可能这次你找到了，看过了，下次又找不到了，大家都不是机器，不可能把所有东西记脑子里，也不是所有人都会动手去做一个整理和组织（真的挺繁琐）。于是后来想做一个学习的平台，还想到做几个W作为主干，what、why、how，是什么、为什么、怎么用，然后再进行其他分类，想想真的挺赞。说干就干呗，于是我又到群里去发广告拉人了，拉了总共十几个人，还分成了设计和开发组，跟他们说了要做什么，想做成什么样，还向他们保证了这个项目不会死，我趁着周末把项目策划书都写出来了，他们也提了不少看法和意见。说到现在你可能有疑问，那么它就是醉牛前端吗？不像啊。是的，我保证了它不会死，可到目前为止它还是没有开始做，原因我在第一次发醉牛前端上线公告的那条微博里有说到“想法太多、太大，执行很不够”。\r\n\r\n## 原型怎么来的\r\n\r\n在很多次思考和否定之前的想法之后，我就想，太大或者太复杂的东西暂时做不了，那么可以做什么呢？\r\n\r\n我们很多人都有自己的网址收藏夹，我看过最恐怖的把整个电脑屏幕都铺满了，都是title，随着时间的推移，不断往里面加的话，都会变得很多，而且没有分类，前提那是你自己的电脑，换了电脑可能就丢了（如果不知道导出或忘记导出）。正是我自己为其所累，就又想了其他的对策。那就是很多人都吐槽却一直在用着的百度，忘了从什么时候起，百度首页不再只是简单的一个搜索框，而是有了一个导航，先给大家看张图，我自己在用的（已经是不完全版，更多的加在了站上）\r\n \r\n是的，这个导航你可以自定义的添加分类、网址和描述。\r\n\r\n用了一段时间之后分类越来越多，觉得可收藏的东西越来越多。我保证了不死的那个项目其实一直没有忘，既然那样的做不了，我又实在不想什么都不做，那就把自己的想法“简单、再简单”，不要把一件事想太复杂，也不要那也想做这也想做，你会发现到最后你把自己“想”死了。所以，就不贪心，不管是歪瓜裂枣还是烂葫芦，先做出来一个东西，没做出来的再漂亮也是空谈。\r\n那么做什么内容呢？教程肯定不行，最基本一点，我也没教程资源啊~手册？有人做得挺好了。又想想自己在工作和学习过程中找到过、用到过哪些东西？哪些很好、很常用的东西？为什么不提供一个平台把它们汇集到一起给大家呢？有些方面是很容易就想到的，比如博客/社区、手册/工具和一些常用的组件和库、书籍、教程。于是我就开始干了。\r\n\r\n## 怎么生出来的\r\n\r\n参照自己在使用百度导航的一些经验就开始做了起来，最开始的UI肯定不是现在的样子，就不给大家看了~做得过程中其实又有了新的一轮梳理，哪些东西应该分到哪一类，哪些应该再进一步的细分，哪些应该再加进来。好的，跟着自己的感觉折腾了几天之后，最开始的样子出来了，就在github上面新建了项目叫notebook（手册），就是想它像一个手册一样方便，大家想用马上拿来用。上传了文件，然后结合gh-pages，就出来了最初的样子。\r\n\r\n## 破茧到1.0版本\r\n\r\n最初的样子出来后，肯定想找同行朋友看看，因为我自己也不是太满意，内容不够，外观也有些别扭，在听取了一些建议之后，开始第一轮的优化，可以说是脱胎换骨的，找不到一点原先的样子了，当然，也参考了其他的网站。\r\n\r\n只从样子上去改肯定不够，还有几个问题：\r\n\r\n### 叫什么？\r\n这个其实是快要上线的时候才想起来的，当时只用了英文的名字，就是现在的域名，中文名还没加上，“醉牛前端”是早前曾经出现过脑海的名字，又想起它来，也没别的更好的想法（取名字向来都是头疼的事情~），于是就用它了，跟“最牛”同音，当然，就是个说法，可能也利于传播把，但没有最牛这回事。\r\n\r\n### 网站是干什么的呢？\r\n\r\n我要把最主要的目的以最直接明了的方式告诉大家，于是，就出现了右上角那两行字“做专业的前端平台，提供你需要的东西 解放你的收藏夹，让它们只做最主要的事情”\r\n\r\n### Logo\r\n\r\n作为一个网站，只有颜色和文字，显然有些单调，起码logo是应该有的，可是，哪里有现成的适合网站的logo呢？于是我开始了新一轮的寻找，看着图标找感觉，找了几个站，也看了很多图标，看着看着，就看到了有一个很多小人的图标集，觉得，既然是做给前端人的，那么，这些没有身份的小人应该能够有一定的寓意，代表整个前端群体，但选哪个都不合适，于是，想选几个，几个呢？logo不能太大，三人成群，那就三个吧，挑什么颜色的呢？我又想到了前端最常用到的三原色“RGB”,“红、绿、蓝”，好的！就这么愉快的决定了。那选择了它们三个，以怎样的形式呈现出来？最初的想法是一个在上面，两个在下面，就是现在大家看到的样子，就用ps组合了一下，放了上去，但是…我还是不满足，就这样而已吗？这里其实是受到鬼哥的影响，他博客头部的“css”图，鼠标悬停是有动效的，所以，我也想做，显然一张图做动效会受到限制，所以，logo1.0废弃，三个图标单独放上去，就有了现在的logo，不复杂，却增添了一点点趣味性。（不要告诉我很多人在看到这篇文的时候才知道logo会动啊？~）\r\n\r\n### 域名\r\n\r\n既然是网站，就要有个独立域名，才像模像样，用什么呢？试过f2er-club.com，貌似已经被用过，f2er.com，呵呵，当然也被用，然后，我就试探性的打开了后缀列表，看到了.club，然后尝试了一些f2er.club，欧耶，perfect！~虽然出来之后也有人表示过质疑，但我相信它还是比较容易被f2er们接受的，是吧？\r\n\r\n## 用户体验\r\n\r\n网站做出来了，就是给人用的，虽然我认为它是个“内容”为主的站，但如果只是内容做好体验不好，岂不是很不搭，于是，从背景、边框线条、边距到区域动效、到点击导航不能返回顶部，到考虑到哪个使用的频率应该是最高的来调整侧边导航的排序、到大屏幕下内容不够不能撑满屏幕下部大块留白，到移动端适配。有些是上线之前就做了的，有些是上线后听取同行的意见进行的修改。\r\n当然，没有最好只有更好，它还会变得更好。\r\n\r\n## 总结\r\n\r\n网站上线后，得到了同行们的好评，很是欣慰，虽然它就只是link的大汇集，有人说我肯定花了很多的心思，这一点我不否认，不花心思真的不行，各种方法、各个角落，一个个的去找，分类、弄好了之后链接再检查，断断续续做了两个多月，甚至我都很多次几乎做不下去要放弃，因为也要做别的事，也要学习，差点就搁下了。但又不甘心，为了逼自己，在1.0还没出的时候，我就把域名注册下来了，抗战纪念日的假期三天，集中精力弄了两天半，虽然假期也没怎么休息，没出去玩儿，觉得还是蛮有意义。它本身没有一点技术难度，就是为了做一个这样的东西出来给大家，也是给自己，提供一些便利。我相信它~\r\n\r\nTips：网站会不定期更新内容，我会在[微博](http://weibo.com/ideazhao)上面发消息通知大家，大家有建议或想法，最好是github上面提issue，当然，如果你没有github账号，或者不方便，那么微博留言也行，如果微博也不玩儿，可以邮件420750281@qq.com或者Q我，如果没有Q…\r\n"},"comment":{"url":"https://api.github.com/repos/linggan100/notebook/issues/comments/160052916","html_url":"https://github.com/linggan100/notebook/issues/8#issuecomment-160052916","issue_url":"https://api.github.com/repos/linggan100/notebook/issues/8","id":160052916,"user":{"login":"HuoTeng","id":9995379,"avatar_url":"https://avatars.githubusercontent.com/u/9995379?v=3","gravatar_id":"","url":"https://api.github.com/users/HuoTeng","html_url":"https://github.com/HuoTeng","followers_url":"https://api.github.com/users/HuoTeng/followers","following_url":"https://api.github.com/users/HuoTeng/following{/other_user}","gists_url":"https://api.github.com/users/HuoTeng/gists{/gist_id}","starred_url":"https://api.github.com/users/HuoTeng/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HuoTeng/subscriptions","organizations_url":"https://api.github.com/users/HuoTeng/orgs","repos_url":"https://api.github.com/users/HuoTeng/repos","events_url":"https://api.github.com/users/HuoTeng/events{/privacy}","received_events_url":"https://api.github.com/users/HuoTeng/received_events","type":"User","site_admin":false},"created_at":"2015-11-27T06:37:33Z","updated_at":"2015-11-27T06:37:33Z","body":"首先，谢谢分享。\r\n感觉UI还可以再设计一下，倒不是说非得多炫酷。\r\n简洁大方，方便使用就好，现在的这个UI感觉很业余，但是正常使用倒也足够了。\r\n小弟愚见，不到之处，还望见谅~"}}