2014年从2月11号就开始了年后的工作之旅，这个时间点对我而言最多只能算是一个前端（切图仔）新手吧。不过坦诚的说，我入前端的时间也确实不长，跨专业，然后最早的接触是因为学校学生会网络部，接着13年下半年小做了一段时间设计+切图的工作。
在2014年大部分的时间里，其实几乎都是处于忙碌或者加班状态的（年初的二月三月以及年末2015春节前最后两三个月相对清闲了）。因为公司是创业型公司（我是从另一家公司（同个老板）转岗到这公司的），所以之前没有任何可用的产品，一切的页面和功能都是从零开始的。
这里抛开公司管理、文化和工作流程等其他因素，单纯的说说过去一年切图中遇到的问题吧（公司目前就我一个前端，中途有来一个，后来又撤了）。
四月份最开始的页面其实真的很简单，只要PC端（之后也开始PC+Mobile两种版本），然后没涉及到太多的布局和js效果（实际上是jQuery/zepto，最初简单的几版还会考虑到IE6，之后就只到IE8了，下同）。早期可能是过去切图不算多和不熟练的原因，所以拿到一个PSD稿后，似乎也还是要花上个一天的时候。不过随着熟练，后面就快速多了。使用的编辑工具是Sublime text3以及四月底借了点钱下单了一台中配的RMBP。2014年中的时候开始改用sass和grunt自动化工具，之后又改用gulp并一直用到现在。
以上的其实都是扯蛋，那么接下去的才是正文。
一、前端开发遇到的第一个问题，就是布局的选择了。
固定宽度还是自适应还是响应式？理论上，网页能自动根据页面大小而适配那是最好的，但是这背后也要包含时间和开发以及测试成本和产品本身生命周期的问题。然后，最后还是选择了一个动态范围：一开始的主题内容是1280px～1000px，到后面就变成了1200px～960px。
关于这个问题，刚开始也有看过一些其他电商网站或者兄弟公司的网站，发现这个问题是没有标准答案的。然后会分成固定宽度和非固定宽度两大阵营，而非固定宽度也只是一个大概的范围。
那么在非固定宽度的网页制作中，根据个人实际工作的反馈，发现比较不好适配的就是首页内容要铺满整屏的这种。因为这个其实跟设计本身也有很大的关系，而且浏览器内容展示窗口的大小和比例还真是挺多的。所以网页内容的显示也只能说是照顾绝大部分的人而不是照顾所有的人。额外吐槽下，关于自适应页面，产品设计还有我大家都没什么经验，所以这个导致了曾经有一段比较苦逼的岁月。
网页内容要怎么自适应？自适应的分段点？适配的主要分辨率？怎么考虑显示和隐藏内容的切换或者变动，浏览器本身有一些什么限制（比如webkit内核浏览器的最小字体限制了12px）么等等，这些都是需要UEDer考虑的问题。
二、低版本浏览器的适配问题。
似乎曾经有一个传统的想法是：所有浏览器中展示的内容效果必须是一致的？然后前端开发人员就开始了各种苦逼的适配、cssHack、js兼容等等。
然后问题就来了？为什么所有的浏览器上内容效果一定要是一样的呢？
最后，大部分人出于性能、成本和维护等方面的考虑，开始出现了“优雅降级”“渐进增强”等的术语。宗旨是让现代浏览器获得最完美的体验，而那些老旧的浏览器则适当的忽略一些效果。这样的话就不要一堆额外的css或者js来适配那些老旧的浏览器，而加快开发速度和把时间花到正常功能的开发及维护上。
就个人而言，我觉得普通企业适配到IE8就足矣了（传统的大型国企及事业单位则看具体情况吧）。
三、产品迭代、模块化的问题。
产品迭代这个是肯定是，但是产品策划营运人员如何和设计以及开发人员沟通协调，如果处理得不好这的确会是一个很大的问题。关于这个，其实有太多的吐槽了，不过当自己都经历过了一遍后，很多问题也就知道了。
通常而言，从长远来看，对于一个常规（除非是只有几个页面）的网站，都应该走模块化。html模块化、css模块化、js模块化，所以如果可以的话我们可以提取出近似或者可以不断复用的东西，然后再个性化的使用。
模块化或者按功能或者按类别或者按使用频率来划分吧，然后结合sass/less或者requierjs/seajs等模块加载器来加载。当然划分中的细分程度，这个取决于当前网站规模和个人对规划的理解吧，好像是没有具体的参考标准的。
四、手机端要注意的问题。
手机端要注意的问题，似乎相对的ios端的好像会多些，因为ios端的浏览器被预置的效果会多一些，比如圆形按钮、数字电话号码等。
这里有个专门收集移动端开发信息相关的github，资料还是非常多的：https://github.com/jtyjty99999/mobileTech
五、回到代码本身，就是css和js本身的兼容性以及属性问题了。
其实这个就可以说是所谓的经验问题了，前端很容易入门，但是深入还是非易事的。对于css部分，感觉本身谈不上什么难度，也没涉及到什么逻辑问题，但是就是多，各种小问题不少。比如：你知道html、body本身是没有高度的么，所以你要用css实现首页铺满整个高度则需要：html,body{ height: 100%;}。你知道margin/padding等的百分百单位是以什么为参考对象的么？（都是基于宽度）你知道图片下方为什么会和容器有一定间隙么？（默认的baseline对齐问题）你知道经典的inline-block问题么？等等
css这方面，张鑫旭、一丝一丝、飘零雾雨等还是比较厉害也写过一些文章的。比如：
JS的话，说实话相对的是我的短板。现在可以用jQuery实现常规的效果，也可以原生js实现一些简单的效果。在过去的一年也算翻阅了不少资料，也懂得了一些东西，比如那些经典的闭包、作用域什么的。不过去年一年在重构上所花的时间会比较多，而2015年的重点很自然就是js本身了。
最后，作为一个几乎都在以自学为主的前端er，其实很需要找一些大牛并与之学习和交流，从而希望可以加快前进的步伐。那么作为自己个人接下去对JS的学习会采取思考和结合思维导图的方式进行，会尝试着站在架构语言的角度上去学习。
PS:
JS学习还未完成，因为中途被环境以及一些事情给中断了。2016年继续～
Renewed @201601
