&p&每个人对优雅的定义不一样，我心目中满意的状态是自己觉得舒服，带一点轻微的矫情，把小小的仪式感融入生活本身，把未独自生活前设想过的那些小念头，慢慢实现了试试。&/p&&p&&br&&/p&&p&一个人生活最宝贵的就是自由了，很难得，从每天晨起开始。&/p&&p&&br&&/p&&p&很多人都知道，起床后简单拉伸下，对身体极有好处，但铺个瑜伽垫搞运动拉伸那一套很麻烦，整HIIT又总是被环境限制，我习惯起床了乱蹦一会儿，当做晨练，跳节奏好一点儿的音乐做BGM，随意跳，反正自己一个人，怎么丑都不会出洋相。&/p&&p&&br&&/p&&p&可别小瞧了这一点，它直接能影响一天的精神状态。我领导中年危机，每次到武汉来工作聊不来几句，总是抱怨他活不下去了。&/p&&p&&br&&/p&&p&我就建议他出差的时候试试这个，早上跳两首歌，晚上洗澡再跳两首歌，可比广场舞要优雅的多。我领导蛮听劝，真试过几回，他后来给我讲，亲自试过才能体会到有一种卸下伪装的感觉。&/p&&p&&br&&/p&&p&身边的朋友有抱怨心情不好的时候，我就建议他们自己在家跳跳舞，一开始放不开，搞点小酒带带节奏，真的很舒服的。&br&&/p&&a class=&video-box& href=&///?target=https%3A///video/655488& target=&_blank& data-video-id=&& data-video-playable=&true& data-name=&& data-poster=&/v2-ae333d82def1ae9c5e399b76c2b2cd0d.jpg& data-lens-id=&655488&&
&img class=&thumbnail& src=&/v2-ae333d82def1ae9c5e399b76c2b2cd0d.jpg&&&span class=&content&&
&span class=&title&&&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/span&
&span class=&url&&&span class=&z-ico-video&&&/span&/video/655488&/span&
&/a&&p&（这是临时为了写答案拍的，可不是我的真实水平，像被Joey的舞步洗脑了，其实，这是自由拉伸＋Zumba，目的只是简单运动）&/p&&p&&br&&/p&&p&这就是一个人生活最大的好处，能想方设法的让自己快乐，不担心打扰他人，也不怕被人打扰。&br&&/p&&p&家里可以买一个加湿器，用精油，偶尔下班了决定晚上再也不出去的时候，洗完澡滴一滴精油给加湿器，在家舒舒服服的追追剧，读读书，很安逸。&/p&&figure&&img data-rawheight=&1280& src=&/v2-0f2fd77ff801de567c6aeb7be5e86e3f_b.jpg& data-size=&normal& data-rawwidth=&1280& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/v2-0f2fd77ff801de567c6aeb7be5e86e3f_r.jpg&&&/figure&&p&&br&&/p&&figure&&img data-rawheight=&1600& src=&/v2-cb6cfc7f946d4c4b28d6_b.jpg& data-size=&normal& data-rawwidth=&1280& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/v2-cb6cfc7f946d4c4b28d6_r.jpg&&&figcaption&废物利用&/figcaption&&/figure&&p&可以收集一些装饰，我有次吃日料，碰到他们桌上的酒瓶装塑料花蛮有创意的，就问服务员要了一个，买束塑料花，放客厅的桌子上，它不止好看，算粗糙的手工；我以前有找星巴克的服务员要了一个杯子，用笔抄上大《大学》，当作花瓶，既好看，又能拿来读，得意了好一阵。&/p&&figure&&img data-rawheight=&1280& src=&/v2-0344aecbdd4770619eca99a_b.jpg& data-size=&normal& data-rawwidth=&1280& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/v2-0344aecbdd4770619eca99a_r.jpg&&&figcaption&变废为宝&/figcaption&&/figure&&p&&br&&/p&&p&满足自己的小爱好，我喜欢茶跟咖啡，日常是用水杯泡茶直接喝，可好一点儿的茶叶，还是用茶具多喝几泡，不需要公道杯，就茶壶配个杯子就行了。像我恩施人，冬天烤火烤习惯了，只要入冬，就喜欢搞个小电炉围着，最适合喝茶了。&/p&&figure&&img data-rawheight=&1280& src=&/v2-798f569e7e3b791b8eed58ae1c9874c1_b.jpg& data-size=&normal& data-rawwidth=&1280& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/v2-798f569e7e3b791b8eed58ae1c9874c1_r.jpg&&&/figure&&p&&br&&/p&&p&买自己喜欢的物件，偶尔打手游，买个懒人沙发在家，窝进去开战打几局，蛮有状态的；喜欢买本子跟笔，但写完的少，大都是浪费，满足下买东西的爽，上次在Muji遇到一个本子，85块钱，很喜欢，刚好可以放荷包，遇到喜欢的句子就抄写进去，出去喝东西拿出来翻着读一读，感觉自己好多年没做摘抄了，这因为这样一个本子，为了物有所值，捡起抄美句的习惯了。&/p&&figure&&img data-rawheight=&1280& src=&/v2-0c6bda71a9ebab74e8cd67911edc2308_b.jpg& data-size=&normal& data-rawwidth=&1280& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/v2-0c6bda71a9ebab74e8cd67911edc2308_r.jpg&&&/figure&&p&&br&&/p&&figure&&img data-rawheight=&1280& src=&/v2-dbf26e6ffd_b.jpg& data-size=&normal& data-rawwidth=&1280& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/v2-dbf26e6ffd_r.jpg&&&/figure&&p&&br&&/p&&p&要有固定能打发时间的场子，我喜欢咖啡，就固定有几个咖啡馆是经常可以磨时间。其中有一个氛围最好，是在大学里，每次来这边整个人的心态会变得不一样，特别安静，看着身边的人在认真学习，瞬间从工作中那个不要脸的状态中解脱出来，极为难得。&/p&&figure&&img data-rawheight=&1600& src=&/v2-95b358b048b8a9dbbff96_b.jpg& data-size=&normal& data-rawwidth=&1280& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/v2-95b358b048b8a9dbbff96_r.jpg&&&figcaption&咖啡难喝，但环境卓越&/figcaption&&/figure&&figure&&img data-rawheight=&1280& src=&/v2-ed61d6e11f9f653ca23ee_b.jpg& data-size=&normal& data-rawwidth=&1280& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/v2-ed61d6e11f9f653ca23ee_r.jpg&&&figcaption&这个咖啡馆环境差，但咖啡好喝&/figcaption&&/figure&&p&一个人生活，跟周围的陌生人，慢慢保持一点儿联系，我小区的保安大哥经常帮我收包裹，我偶尔就买点小礼物他，网上买东西收包裹剩下的纸盒、喝水的瓶子，会顺手丢到他用来回收的一个篮子里；去固定的地方理发，我的理发师都给我剪了三四年了，他现在是总监+首席，给别人剪头是98，但给我还是68原价同时会员卡6折，每次他让我充值多少我就充值多少；我们门口卖杂粮饼的阿姨，每次买她的饼都顺便聊几句，无论我给5块还是6块，到我手里永远是7块的饼，害我明明不想吃肉馅，也每次只能买7块的。门口35块钱的按脚店，有时候碰到他们开饭，还会问我吃了没，邀请我吃饭，虽然只是礼貌问候，但日常叔叔阿姨叫着还蛮踏实的。&br&&/p&&p&&br&&/p&&p&周末带块毯子去湖边小憩下，或者找个地方钓鱼，要有类似的爱好。偶尔得闲，约朋友一起，做一桌菜招待下大家，玩玩你画我猜的游戏。&br&&/p&&p&&br&&/p&&p&坦白说，我非常擅长一个人生活，并且过得很满意，但慢慢觉得过的越好越可悲，其实自己蛮期待跟人一起生活的。所以分享这点感受：&b&如果能遇到可以将就的人，一定要抓住，起码得给自己机会试试，一个人最多快乐，要幸福的话，还是得加个人的。&/b& &/p&&p&&br&&/p&&p&一个人可以打心底里认为自己优雅且有品位，但同样要面临空虚、寂寞，是选择吧。要追求自由，就得面临孤寂，从我个人的感受，我觉得能不选一个人的话，尽量早点结束一个人的生活。&br&&/p&&p&&br&&/p&&p&至于跟我类似，确认了暂时只愿意一个人生活的话，就不妨像我讲的那样，最大化的让自己开心，不要管旁人的眼光。&/p&&p&&br&&/p&&p&拓展阅读：&/p&&ol&&li&&a href=&/question//answer/& class=&internal&&姜小白：有什么可以保持每天好心情的方法？&/a&&/li&&li&&a href=&/question//answer/& class=&internal&&姜小白：一个人太孤单，养点什么比较合适？&/a&&/li&&li&&a href=&/question//answer/& class=&internal&&姜小白：年轻人如何在独居时有效地保持自律？&/a&&/li&&/ol&&p&&br&&/p&&p&看见有四个邀请了，打算好好写个答案，结果一边编辑一边丢失，反复几次，要疯了。&/p&&p&个人公众号：sparetime2017&/p&
每个人对优雅的定义不一样，我心目中满意的状态是自己觉得舒服，带一点轻微的矫情，把小小的仪式感融入生活本身，把未独自生活前设想过的那些小念头，慢慢实现了试试。 一个人生活最宝贵的就是自由了，很难得，从每天晨起开始。 很多人都知道，起床后简单拉…
&figure&&img src=&/v2-e064cfb40dc2158a0ffc_b.jpg& data-rawwidth=&800& data-rawheight=&533& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/v2-e064cfb40dc2158a0ffc_r.jpg&&&/figure&&blockquote&&p&原文链接：&a href=&/?target=https%3A///%40sgarcia.dev/my-journey-to-becoming-a-web-developer-from-scratch-without-a-cs-degree-2-years-later-and-what-i-4a7fd2ff5503& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&My journey to becoming a web developer from scratch without a CS degree, 2 years later (and what I learned from it)&i class=&icon-external&&&/i&&/a&&/p&&p&作者：&a href=&/?target=https%3A///%40sgarcia.dev& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sergei Garcia&i class=&icon-external&&&/i&&/a&&/p&&/blockquote&&p&首先请允许我自我介绍一下，我的名字叫 Sergei Garcia，我是一名拥有两年工作经验的全职前端开发工程师，之前在福布斯500强咨询公司和小公司都工作过。这对大多数人来说可能没什么，但对我意味着职业生涯上的里程碑。我两年之前除了在网上学过一点点C#和Java以外，没有任何的编程经验，没读过计算机专业的学位，并且也没有去过培训班。&/p&&p&之前我在许多网络社区里汲取了很多营养，获得了很多帮助。现在也该是我写一些东西分享给大家的时候了。虽然我并不是什么大神，但我想通过了解我的这些经历，至少能帮你少走一些弯路。&/p&&p&如果你比较着急，想要快速了解如何从零开始成为一名前端工程师的话，也可以跳过只看：&strong&最佳捷径&/strong& 这个章节。&/p&&p&废话不多说，进入正题：&/p&&h2&掌握基础&/h2&&p&在我刚打算开始学习前端开发时，想到的第一个问题就是“我到底该学些什么？”。在网上搜了搜，我发现大部分初学者都在关注以下几个知识点：&/p&&ul&&li&JavaScript&/li&&li&HTML & CSS&/li&&li&CSS 预处理器(Less & Sass)&/li&&li&响应式设计&/li&&li&JS框架&/li&&li&设计模式&/li&&li&Git&/li&&li&NodeJS&/li&&li&自动化构建工具&/li&&/ul&&h3&JavaScript&/h3&&p&我是在&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CodeSchool&i class=&icon-external&&&/i&&/a&（付费）和&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Codecademy&i class=&icon-external&&&/i&&/a&（免费）上开始学习JavaScript的。有人可能不了解这两个网站，他们都属于交互式学习的平台，可以一边看视频一边读教程，然后在浏览器就可以编写代码通过测验。我觉得对初学者来说这是最友好的学习方式。&/p&&p&在我掌握了一些基础之后，就开始阅读&a href=&/?target=http%3A//eloquentjavascript.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&& Eloquent Javascript: A Modern Introduction to Programming&i class=&icon-external&&&/i&&/a&这本书（你可以点击链接获取免费的在线英文版，也可以在&a href=&/?target=https%3A///subject//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JavaScript编程精解&i class=&icon-external&&&/i&&/a&找到中文版）。网上很多人向我推荐这本教程，最早学习阅读它的时候是很痛苦的，不过我很庆幸我坚持了下来。这本书很棒，因为它涵盖了JS的方方面面。&/p&&p&假如你对jQuery感兴趣也可以去学学，不过我推荐先放到之后再说。&/p&&h3&HTML&CSS&/h3&&p&之后我按照CodeSchool的&a href=&/?target=https%3A///learn/html-css& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML&CSS 学习路径&i class=&icon-external&&&/i&&/a&学习了HTML&CSS的基础知识。同样值得推荐的还有Codecademy的&a href=&/?target=https%3A///learn/web& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML&CSS&i class=&icon-external&&&/i&&/a&课程，另外Udacity的&a href=&/?target=https%3A///course/intro-to-html-and-css--ud304& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML和CSS简介&i class=&icon-external&&&/i&&/a&可能相对更深入一些。&/p&&p&&strong&P.S.&/strong& Jon Duckett 所著的 &a href=&/?target=https%3A///subject//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML & CSS设计与构建网站&i class=&icon-external&&&/i&&/a&也是学习入门HTML/CSS的一本非常棒的高分热销书。&/p&&h3&LESS/SASS&/h3&&p&Less & Sass 一类的CSS预处理器在CSS之上添加许多有用的特性，你可以通过这些预处理器使用CSS原生不支持的高级功能，然后再将它们编译成为CSS。&/p&&p&目前主流的CSS预处理器有Less & Sass两种。Sass可能更受欢迎一些，Less也挺好用的，它上手需要安装的依赖更少一些。你也可以先直接体验一下：在&a href=&/?target=http%3A//winless.org/online-less-compiler& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WinLess’s Online Less Compiler&i class=&icon-external&&&/i&&/a&你可以在线编写Less代码，并且有一些示例供你参考；在&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SassMeister&i class=&icon-external&&&/i&&/a&你可在线体验Sass.&/p&&p&Less或者Sass你想先学哪个都可以，它们都有很多相似之处。想了解更多可以查看&a href=&/?target=http%3A///blog/%3Fpost%3Dcomparison-between-less-and-sass& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Comparison between LESS & SASS&i class=&icon-external&&&/i&&/a&&/p&&h3&响应式设计&/h3&&p&关于学习响应式设计，Udacity的&a href=&/?target=https%3A///course/responsive-web-design-fundamentals--ud893& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Responsive Web Design Fundamentals&i class=&icon-external&&&/i&&/a&课程非常不错。&/p&&p&假如你还能学习了解一下&b&Bootstrap&/b&的话，上手响应式设计应该会更快一些，它的&a href=&/?target=http%3A///css/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&官方文档&i class=&icon-external&&&/i&&/a&就是一个很好的开始的地方。&/p&&h3&AngularJS&/h3&&p&如果你想要了解AngularJS到底是什么，可以观看Google开发者的视频&a href=&/?target=https%3A///watch%3Fv%3DHCR7i5F5L8c& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Design Decisions in AngularJS&i class=&icon-external&&&/i&&/a&.&/p&&p&刚开始学习Angular的时候我就打算在它的官网读读文档，可惜那文档写的一点都不友好，晦涩难懂。Codeschool上有关AngularJS的课程也不怎么样，内容设置勉强合理，但代码答题的环节有很多Bug，我明明写对的答案就是无法通过测验。&/p&&p&最后我终于找到了一个很棒的网站&a href=&/?target=https%3A//egghead.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Egghead.io&i class=&icon-external&&&/i&&/a&，它的课程把Angular拆分成一个个小的知识点，每个2-5分钟就可以学完。（网站同样提供React/Node等JS相关教程）&/p&&h3&设计模式&/h3&&p&事实上设计模式就是一些在编程开发中解决共性问题的经验总结。这方面的知识在所有编程语言之间是通用的，同样也有助于让你写出别人更易读懂的代码，你也能更好地理解别人。&/p&&p&我找到了两个比较好的教程&a href=&/?target=https%3A//s.codepen.io/discountry/fullpage/JavaScript%2520Design%2520Patterns& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JavaScript Design Patterns&i class=&icon-external&&&/i&&/a&和&a href=&/?target=https%3A///resources/essentialjsdesignpatterns/book/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Learning JavaScript Design Patterns&i class=&icon-external&&&/i&&/a&.&/p&&p&这里有中文版的&a href=&/?target=https%3A///subject//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JavaScript设计模式&i class=&icon-external&&&/i&&/a&，只可惜普遍评价翻译的奇烂无比，要是你对英文不自信，那就只好忍耐一下了。&/p&&h3&Chrome开发者工具&/h3&&p&这应该是对前端开发者最有用的工具之一了，掌握学习它非常有必要。你可以在Codeschool的&a href=&/?target=http%3A//discover-/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Explore and Master Chrome DevTools&i class=&icon-external&&&/i&&/a&课程学习。&/p&&h3&Git（版本控制系统）&/h3&&p&最早我不了解Git的时候以为根本没有学它的必要。Git可以记录你对代码的每一次改动，要是你有什么地方写错了，也可以很方便地退回到任意一个版本（其实版本控制对所有人都非常有用，试想你在改稿改到第十版的时候，老板说他突然觉得还是第一版最好，结果你只保存了最后一版的心情吧）。&a href=&/?target=https%3A//try.github.io/levels/1/challenges/1& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Try Github&i class=&icon-external&&&/i&&/a&是一个了解Git非常好的教程，&a href=&/?target=https%3A///git/tutorials/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Atlassian’s Git training&i class=&icon-external&&&/i&&/a&可以让你对Git有更深入的了解。最后Codeschool的&a href=&/?target=https%3A///learn/git& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Git Learning Path&i class=&icon-external&&&/i&&/a&也是学习Git非常不错的参考。&/p&&h3&NodeJS&/h3&&p&掌握NodeJS对一名前端开发者来讲非常有帮助。&a href=&/?target=http%3A//nodeschool.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&NodeSchool.io&i class=&icon-external&&&/i&&/a&是一个学习Node非常好的地方。&/p&&h3&自动化构建工具(Grunt&Gulp)&/h3&&p&我自己从来都想不到还有像Grunt和Gulp这样神奇的工具。简单来讲，这些自动化构建工具可以通过脚本自动完成一些任务。例如将Less/Sass编译成为CSS形式。而且你可以设置构建工具监听你对代码的修改，每次修改完成后自动编译，你直接就可以在浏览器里看到实时的效果。这节约了大量的开发时间。&/p&&p&学习使用Grunt和Gulp都需要你了解NodeJS的相关知识，相比Grunt来讲，Gulp更容易配置一些，我也推荐你学习Gulp，当然这全在于你的个人喜好。&/p&&p&你可以在&a href=&/?target=http%3A//Scotch.io& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&Scotch.io&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&上学习&a href=&/?target=https%3A//scotch.io/tutorials/a-simple-guide-to-getting-started-with-grunt& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Grunt&i class=&icon-external&&&/i&&/a&和&a href=&/?target=https%3A//scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Gulp&i class=&icon-external&&&/i&&/a&.&/p&&h2&我在第一份工作中遇到的困难和挑战&/h2&&p&在我掌握了这些前端开发的基础之后，我已经有了应聘前端初级岗位的能力。全靠我扎实的JavaScript基础，我才找到了第一份工作。在接下来的一年里，我仍然在继续努力提升自己。&/p&&p&我的第一个项目就需要开发可复用的Web组件，这令我感到很紧张。我当时犯过的错误主要有两个：&/p&&p&1.&strong&害怕失败&/strong&。因为我只是个新人，我很怕自己的代码写错或写的太烂，所以我浪费很多时间重复地检查，确保自己没有犯错并使用了最佳实践。这也导致我固步自封，没办法掌握新的东西或创造性地实现需求。&/p&&p&2.&strong&盲目效仿&/strong&。我当时经常会盲目效仿那些比我有经验的人。也不去思考别人为什么那么做，代码为什么那么写。我也效仿相同的做法是因为我觉得他们都比我有经验，而不去了解这些最佳实践背后的意义和原因。&/p&&p&感谢我的项目主管最终帮我克服了这些。他不断地鼓励我尝试新的东西，即使有时候会出错；也鼓励我多思考多质疑。最后我学到了很多东西，也明白了这些最佳实践是怎么总结出来的。&/p&&p&在项目中应用AngularJS对我来说也是一大挑战，因为很多东西我都只是会用而已，AngularJS就是这么神奇，无法解释其背后的原理。我几次也都想要了解其背后的工作原理，可是那些文档实在是太难懂。直到我后来找到了一本非常棒的书&a href=&/?target=http%3A///build-your-own-angular/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Build Your Own AngularJS&i class=&icon-external&&&/i&&/a&.我只是读了Scopes和Watchers章节，就让我很好地了解了angular的工作机制。&/p&&p&一年之后我遇到的挑战是Web开发的迅猛发展。我正在沾沾自喜掌握了AngularJS和Grunt，Gulp和ReactJS就火了起来。等我又花了一年功夫学习之后，Webpack又开始流行。自己掌握的知识过气并不是一件令人舒服的事情。后来，我的一位同事的观点改变了我的看法：&/p&&blockquote&&p&框架和库也许会过时，但是它们背后的原理和概念会经受住时间的考验。&/p&&/blockquote&&p&完全正确。AngularJS也许有些过时了，可是理解它例如Directives背后的原理也有助于理解React的组件。&/p&&p&除此之外，我在随后的项目中没有遇到过太大的困难。在我学习前端开发这两年里，最重要的一点是保持热情不断学习新的东西。前端的发展变化实在是太快了。&/p&&p&另外一方面，明白有些东西可以不去学对于一名前端开发者的成长也非常重要。很多人都抱怨前端技术的革新异常迅猛，几乎每天都有新的JS框架和库推出。最后我也终于明白：&/p&&blockquote&&p&你并不需要学习和掌握所有的框架和库。&/p&&/blockquote&&p&也许你可以尝试每个框架的Hello wrold示例，但通常你只需要专注于最好和最适用于你自己的，或者手头的项目需要的就好。在层出不穷的框架中间抉择真的不是易事，好在我们能够在网上找到相当多的这类讨论。&/p&&h2&进阶提高&/h2&&p&再然后，我又通过下面这些方法继续学习和提升：&/p&&h3&JavaScript&/h3&&p&读完Eloquent JavaScript之后，你以为你掌握了JavaScript，但是&a href=&/?target=https%3A///getify/You-Dont-Know-JS& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&You Don’t Know JS&i class=&icon-external&&&/i&&/a&这套书会摧毁你的这种自信。我的资深前端同事向我推荐了好几次这套书，直到我真的一页页翻开了这套书，我才了解到JS究竟有多复杂，还有许多没有彻底了解JS时会踩的坑。&/p&&p&阅读这套书确实开启了我的思路，我同样也推荐给那些自以为很了解JS的人读一读。随后，这里还有两个很棒的学习资料：&/p&&ul&&li&&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JavaScript, The Better Parts&i class=&icon-external&&&/i&&/a&: 来自D. Crockford 的演讲，主要涵盖了JS最大的缺点，优点，以及如何利用它们。&/li&&li&&a href=&/?target=https%3A///javascript-scene/the-two-pillars-of-javascript-ee6f%23.91eor7lrd& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&The Two Pillars of JavaScript&i class=&icon-external&&&/i&&/a&: 来自 Eric Eliott的一篇文章，主要讲解了JS的两大要点——原型继承和函数式编程。&/li&&/ul&&p&在你对JS有了一个深刻的认识之后，尝试着学习JS的最新标准ECMASCript 2015 (a.k.a. ES6)吧。这有一篇非常棒的介绍ES6的文章&a href=&/?target=https%3A///2015/10/es6-whats-new-next-version-javascript/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ECMAScript 6 (ES6): What’s New In The Next Version Of JavaScript&i class=&icon-external&&&/i&&/a&，你也可以直接在浏览器里尝试一下ES6语法&a href=&/?target=https%3A//babeljs.io/repl/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Babel’s online transpiler&i class=&icon-external&&&/i&&/a&.&/p&&h3&CSS&/h3&&p&CSS的代码很容易就会变得非常凌乱。想要写出条理清晰的CSS有很多种解决方案，我在这里强烈推荐两种比较好的：&/p&&ul&&li&&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SMACSS&i class=&icon-external&&&/i&&/a&: CSS的可扩展模块化架构。适用于各种大小级别的站点。&/li&&li&&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&BEM&i class=&icon-external&&&/i&&/a&: 一种实现前端模块代码复用的标准方案。&/li&&/ul&&p&我个人比较喜欢SMACSS，因为它看起来更清晰一点，但也有很多公司在实践中使用BEM标准。&/p&&p&同样，你也需要开始关注CSS的性能了，这有两篇文章： &a href=&/?target=https%3A///2016/03/managing-mobile-performance-optimization/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Managing Mobile Performance Optimization&i class=&icon-external&&&/i&&/a&和 &a href=&/?target=http%3A///en/tutorials/speed/high-performance-animations/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&High Performance Animation&i class=&icon-external&&&/i&&/a& 都可以帮助你理解入门。&/p&&h3&JavaScript构建工具&/h3&&p&到这一步你应该以及很熟悉Grunt/Gulp了，接下来就需要把JS的构建工具加入到你的自动化构建工具中，以此来更好地管理组织你的JS代码。目前最流行的两个是：&/p&&ul&&li&&a href=&/?target=http%3A//browserify.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Browserify&i class=&icon-external&&&/i&&/a&: 打包你JS的模块化代码使其得以在浏览器中运行。&/li&&li&&a href=&/?target=https%3A//webpack.github.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Webpack&i class=&icon-external&&&/i&&/a&: 这是一个更高级的构建工具，除了JS以外还能管理构建CSS代码甚至是图片一类的静态资源，就是配置起来比较复杂。&/li&&/ul&&p&&a href=&/?target=http%3A//Scotch.io& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&Scotch.io&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&上的一个小教程&a href=&/?target=https%3A//scotch.io/tutorials/getting-started-with-browserify& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Getting Started with Browserify&i class=&icon-external&&&/i&&/a&可以让你快速入门Browserify，&a href=&/?target=https%3A///%40dtothefp/why-can-t-anyone-write-a-simple-webpack-tutorial-d0b075db35ed%23.dv2lqnxl9& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Why Can’t Anyone Write a Simple Webpack Tutorial&i class=&icon-external&&&/i&&/a&是入门Webpack的一个非常棒的教程。我自己并不经常使用Webpack，它虽然配置复杂，但用起来还是非常爽的。最新的流行趋势就是Webpack.&/p&&h3&ReactJS&/h3&&p&ReactJS越来越受欢迎，而且火得一发不可收拾。甚至有人开始讨论“React要灭掉Angular了吗？”。&a href=&/?target=http%3A//Scotch.io& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&Scotch.io&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&上的教程&a href=&/?target=https%3A//scotch.io/tutorials/learning-react-getting-started-and-concepts& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Learning React.js: Getting Started and Concepts&i class=&icon-external&&&/i&&/a&可以让你对React有一个完整直观的印象。之后你可以跟着&a href=&/?target=https%3A//egghead.io/courses/react-fundamentals& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React Fundamentals&i class=&icon-external&&&/i&&/a&教程试着开发一个React的App，当然你也可以查阅&a href=&/?target=https%3A//facebook.github.io/react/docs/getting-started.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React官方文档&i class=&icon-external&&&/i&&/a&。&/p&&p&由于React只注重于视图的实现，同时我也推荐你学习Redux，大多数的Redux教程都比较复杂，&a href=&/?target=https%3A///learning-react-redux/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CSS Tricks Leveling Up with React: Redux&i class=&icon-external&&&/i&&/a&这一篇还算深入浅出地讲解了Redux。当然你也可能听说过Flux，要是你很难在它们之间抉择的话可以查看这一篇讨论&a href=&/?target=http%3A///questions//why-use-redux-over-facebook-flux& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Why use Redux over Facebook Flux&i class=&icon-external&&&/i&&/a&.&/p&&blockquote&&p&&strong&P.S&/strong& 当然还有别的流行框架可以学习： Vue刚刚发布了2.0版本，学习Vue可以查看作者本人的&a href=&/p/& class=&internal&&新手向：Vue 2.0 的建议学习顺序&/a&。 学习React可以从&a href=&/?target=http%3A///react/docs/getting-started-zh-CN.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&中文文档&i class=&icon-external&&&/i&&/a&开始。&/p&&/blockquote&&h2&回顾我所犯的错及从中总结的经验&/h2&&p&在学习前端开发的两年里我犯了许多错，最严重地一点是，在我基础还不扎实地时候就开始使用框架和库了。我想这种情况应该在学习任何语言时都可能会遇到，不过对于JS尤其突出。因为JS真的是一个充满了坑地语言。&/p&&p&在我学习AngularJS地时候曾经遇到了一个有关$scope的Bug，我用了3天都没搞明白怎么回事。最后才发现了并不是Angular的毛病，而是因为我对JS本身的this原理理解不够导致的。&/p&&h3&代码工整&/h3&&p&我很少看到有关这个话题的讨论，刚开始的时候我并不在意自己的代码是否工整。大多数人都是在抱怨自己之前写的代码有多脏多烂。那么为什么就没人讲讲他们之前写得干净工整的代码呢？&/p&&p&我希望这种情况能够得到改善，这需要我们每个人的努力。努力写出含义明确的变量名，即使你需要多打几个字母。否则你只能在之后加上注释来解释清楚，而到了最后别人甚至你自己都很难读懂那些代码是什么意思。所以从现在开始改变吧。&/p&&p&写出干净工整的代码也能够让你的同事更愿意与你合作，也会让你在工作生活中更顺心一些。&/p&&h3&jQuery&/h3&&p&有人可能注意到了，我没怎么提到jQuery.因为在我的实际经验中，jQuery对我的害处更大一些，你可能不太理解，请听我解释：在我刚开始学习的时候，我感觉jQuery可以被应用在任何地方，解决任何问题。所以我几乎在所有地方都是用jQuery，一旦遇到了任何问题，就去寻找使用jQuery的解决办法。不要误解我的意思，jQuery确实很棒，实在好用的有些过分，所以也就让我忽视了，在我写的jQuery代码中有90%其实可以用很简单的原生JS实现。&/p&&p&你现在可能会想：jQuery也不是什么重量级框架，而其你可以用比原生JS少很多的代码实现一些功能，用它到底有什么不对呢？确实，使用jQuery而不是原生代码并不是主要的问题。而是我在实现一些功能时必须依赖jQuery才能想到解决方法。而这在我接手一些不使用jQuery的项目中当然就成为了很严重的问题。使用jQuery让我对它产生了严重的依赖，也让我几乎了解不到一些JS的原生功能。我掌握的这些方法脱离了jQuery根本就无法使用。&/p&&p&在那以后，我就强迫自己尽量不去使用jQuery，除非是在一些需要大量操作DOM的情况下。再强调一遍，我不是说jQuery不好，但假若我有一次从头再来的机会的话，我一定会先学习如何脱离jQuery来开发，而不是依赖于它。要是你现在也遇到相同的麻烦，可以看这篇&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&You Might Not Need jQuery&i class=&icon-external&&&/i&&/a&.&/p&&h3&教程资源&/h3&&ul&&li&&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CodeSchool&i class=&icon-external&&&/i&&/a&&ul&&li&HTML/CSS一类的基础教程很不错。&/li&&/ul&&/li&&li&&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Team Treehouse&i class=&icon-external&&&/i&&/a&&/li&&ul&&li&教程的质量相当不错，你可以免费试用，不过试用期后每月是30刀袄。&/li&&/ul&&li&&a href=&/?target=https%3A//egghead.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&egghead.io - Learn professional JavaScript tools with Tutorial Videos & Training&i class=&icon-external&&&/i&&/a&&br&&/li&&/ul&&p&&strong&关于付费教程&/strong&&/p&&p&确实，有些人不花一分钱学习编程可以得到那些花了钱的人一样的学习效果。我在前面列出的学习资源里大部分是免费的当然也有付费的。有些东西确实还是在视频里有人手把手教你好理解一些。&/p&&p&没错，很多付费的教程的确也非常糟糕，我之前就买到过。但像Egghead.io, CodeSchool, Team Treehouse这些网站上的教程非常棒，通过这些系统的教程学习1-2个月，比起你在良莠不齐博客和文章里学习效率要高太多。&/p&&p&付费教程并不是必须的，但我想你只要是没穷到那份儿上，选择一些优质的付费教程还是对你非常有帮助的。&/p&&h3&成功秘笈&/h3&&p&在过去两年里，我见过许多的开发者。但是很少遇到比较杰出的，让他人仰慕的开发者。我总觉出这类人都有一些通共的特点，这也是成为一名成功的前端开发者的秘籍：&/p&&ul&&li&&strong&热爱你的工作。&/strong&这是最重要的一点特质。要是你根本不喜欢写代码，代码也不会喜欢你。在一个领域杰出的人往往是对其所在充满热情的人。&/li&&li&&strong&大方地分享你的知识。&/strong&你也许很想把自己解决一些问题的代码保密，但请别这么做。乐于分享他知识的人往往是最有价值的人，因为他们可以进入任何一个团队并带领团队进步。&/li&&li&&strong&跟紧潮流趋势。&/strong&不管是阅读博客，还是参与编程问题的讨论，甚至是在休息时谈论前端开发的话题，跟紧潮流趋势也会让你保持领先的位置。&/li&&/ul&&h2&最佳捷径&/h2&&p&也许你对我的经历和碎碎念并不感兴趣，所以我在这里提供了这个学习资源的列表：&/p&&p&&strong&Javascript&/strong&&/p&&ol&&li&&a href=&/?target=https%3A///learn/javascript& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CodeSchool&i class=&icon-external&&&/i&&/a& 或 &a href=&/?target=https%3A///tracks/full-stack-javascript& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Treehouse’s&i class=&icon-external&&&/i&&/a& Javascript learning path (付费) 或 &a href=&/?target=https%3A///learn/javascript& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Codecademy’s Javascript course&i class=&icon-external&&&/i&&/a&.&/li&&li&&a href=&/?target=http%3A//eloquentjavascript.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Eloquent JavaScript&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A///getify/You-Dont-Know-JS& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&You Don’t Know JS&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A//jstherightway.org/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JS: The Right Way&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A//egghead.io/courses/learn-es6-ecmascript-2015& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Learn ES6&i class=&icon-external&&&/i&&/a& by Egghead.io&/li&&/ol&&p&&strong&HTML & CSS&/strong&&/p&&ol&&li&&a href=&/?target=https%3A///learn/html-css& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CodeSchool&i class=&icon-external&&&/i&&/a& 或 &a href=&/?target=https%3A///tracks& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Treehouse’s&i class=&icon-external&&&/i&&/a& HTML & CSS learning path(付费) 或 &a href=&/?target=https%3A///HTML-CSS-Design-Build-Websites/dp//ref%3Dsr_1_3%3Fie%3DUTF8%26qid%3D%26sr%3D8-3%26keywords%3Djon%2Bducket& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML and CSS: Design and Build Websites&i class=&icon-external&&&/i&&/a& by John Ducket 或 &a href=&/?target=https%3A///learn/web& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Codecademy’s HTML & CSS course&i class=&icon-external&&&/i&&/a&.&/li&&li&&a href=&/?target=https%3A///specifics-on-css-specificity/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Specifics on CSS Specifity&i class=&icon-external&&&/i&&/a& by CSS Tricks&/li&&li&&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Learn CSS Layout&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SMACSS&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///9-basic-principles-of-responsive-web-design/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&9 basic principles of responsive web design&i class=&icon-external&&&/i&&/a& by Froont&/li&&li&&a href=&/?target=https%3A///course/responsive-web-design-fundamentals--ud893& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Responsive Web Design Fundamentals&i class=&icon-external&&&/i&&/a& by Google on Udacity (如果你没看过 CodeSchool 或 Treehouse learning path)&/li&&li&&a href=&/?target=https%3A///2016/03/managing-mobile-performance-optimization/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Managing Mobile Performance Optimization&i class=&icon-external&&&/i&&/a& by Smashing Magazine 或 &a href=&/?target=https%3A///course/browser-rendering-optimization--ud860& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Browser Rendering Optimization&i class=&icon-external&&&/i&&/a& 以及 &a href=&/?target=https%3A///course/website-performance-optimization--ud884& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Website Performance Optimization&i class=&icon-external&&&/i&&/a& by Google on Udacity.&/li&&li&&a href=&/?target=https%3A///web/fundamentals/%3Fhl%3Den& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Web fundamentals&i class=&icon-external&&&/i&&/a& by Google&/li&&/ol&&p&&strong&Developer Tools&/strong&&/p&&ol&&li&&a href=&/?target=http%3A//discover-/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Explore and Master DevTools&i class=&icon-external&&&/i&&/a& by CodeSchool&/li&&li&&a href=&/?target=https%3A///learn/learn-git& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Learn Git&i class=&icon-external&&&/i&&/a& by Codecademy 和 &a href=&/?target=https%3A//try.github.io/levels/1/challenges/1& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Try Github&i class=&icon-external&&&/i&&/a& by Codeschool&/li&&li&&a href=&/?target=https%3A///2012/01/introduction-to-linux-commands/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Introduction to Linux Commands&i class=&icon-external&&&/i&&/a& by Smashing Magazine&/li&&li&&a href=&/?target=https%3A//scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Automate Your Tasks Easily with Gulp.js&i class=&icon-external&&&/i&&/a& by Scotch.io&/li&&/ol&&p&&strong&AngularJS&/strong&&/p&&ol&&li&&a href=&/?target=https%3A///watch%3Fv%3DHCR7i5F5L8c& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Design Decisions in AngularJS&i class=&icon-external&&&/i&&/a& by Google Developers (介绍 AngularJS)&/li&&li&&a href=&/?target=https%3A//egghead.io/courses/angularjs-app-from-scratch-getting-started& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&AngularJS fundamentals&i class=&icon-external&&&/i&&/a& by Egghead.io&/li&&li&&a href=&/?target=https%3A///johnpapa/angular-styleguide/blob/master/a1/README.md& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&John Papa’s Angular Styleguide&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A//scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Creating a Single Page Todo App with Node and Angular&i class=&icon-external&&&/i&&/a& (MEAN) by Scotch.io&/li&&li&&a href=&/?target=https%3A//egghead.io/courses/angularjs-application-architecture& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&AngularJS application structure&i class=&icon-external&&&/i&&/a& by Egghead.io (Paid) OR Scotch.io’s &a href=&/?target=https%3A//scotch.io/tag/angular-js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Angular Courses&i class=&icon-external&&&/i&&/a&&/li&&/ol&&p&&strong&ReactJS&/strong&&/p&&ol&&li&&a href=&/?target=https%3A//scotch.io/tutorials/learning-react-getting-started-and-concepts& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Learning React.js: Getting Started and Concepts&i class=&icon-external&&&/i&&/a& by Scotch.io&/li&&li&&a href=&/?target=https%3A//egghead.io/lessons/javascript-intro-to-webpack& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Intro to webpack&i class=&icon-external&&&/i&&/a& by Egghead.io&/li&&li&&a href=&/?target=https%3A//egghead.io/courses/react-fundamentals& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React Fundamentals&i class=&icon-external&&&/i&&/a& by Egghead.io&/li&&li&&a href=&/?target=https%3A///learning-react-redux/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Leveling Up with React: Redux&i class=&icon-external&&&/i&&/a& by CSS Tricks&/li&&/ol&&p&&strong&Back End&/strong&&/p&&ol&&li&&a href=&/?target=http%3A//nodeschool.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&NodeJS tutorials by NodeSchool.io&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=http%3A///source/view/2284& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&How I explained REST to my Wife&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A//scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Creating a Single Page Todo App with Node and Angular&i class=&icon-external&&&/i&&/a& by Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)&/li&&/ol&&p&&strong&推荐文章&/strong&&/p&&p&这是我自己喜欢的一些资源和文章，仅做推荐。（所以就不翻译啦，因为文章也是英文）&/p&&ul&&li&&a href=&/?target=http%3A///web-design-in-4-minutes/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Web Design in 4 minutes&i class=&icon-external&&&/i&&/a&. A very creative and original interactive tutorial that teaches you the fundamentals of web design.&/li&&li&&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Awwards&i class=&icon-external&&&/i&&/a&. Looking for web design inspiration? Look no further.&/li&&li&&a href=&/?target=https%3A///javascript-scene/why-hiring-is-so-hard-in-tech-c462c3230017& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Why Hiring is so hard in tech&i class=&icon-external&&&/i&&/a& by Eric Eliott. Here Eric is does an amazing job at summarizing how it’s surprisingly hard to find great developers, and how to become one.&/li&&li&&a href=&/?target=http%3A//kristof%2520kovacs%2520software%2520architect%252C%2520consultant/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&NoSQL database systems mega comparison&i class=&icon-external&&&/i&&/a& by Kristof Kovacs. This is a superb comparison between the most popular NoSQL database systems out there. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, they and more are all here.&/li&&li&&a href=&/?target=https%3A//xss-/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&XSS Game&i class=&icon-external&&&/i&&/a&. Cross-site scripting (XSS) bugs are one of the most common and dangerous types of vulnerabilities in Web applications. Using this awesome resource you can learn how to find and exploit XSS bugs, and how to prevent them from happening to your web application.&/li&&li&&a href=&/?target=https%3A///Droogans/unmaintainable-code& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&How To Write Unmaintainable Code&i class=&icon-external&&&/i&&/a&. Hilarious article on how to &strong&NOT&/strong& write maintainable, clean code.&/li&&/ul&&p&&strong&推荐工具软件&/strong&&/p&&p&推荐一些对我自己很有帮助的工具软件。&/p&&ul&&li&&a href=&/?target=https%3A///webstorm/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Jetbrains Webstorm&i class=&icon-external&&&/i&&/a&: 超强前端IDE，学生可以免费使用。&/li&&li&&a href=&/?target=https%3A//atom.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Atom.io&i class=&icon-external&&&/i&&/a&: Github出品的免费开源的代码编辑器。&/li&&li&&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sublime Text&i class=&icon-external&&&/i&&/a&: 号称最性感的编辑器。&/li&&li&&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&&i class=&icon-external&&&/i&&/a&: 查询浏览器的兼容性，非常好用。&/li&&li&&a href=&/?target=https%3A//c9.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Cloud 9&i class=&icon-external&&&/i&&/a&: 提供一个在线的Linux虚拟环境，你可以在上面使用Git，Node，部署演示项目等等。&/li&&li&&a href=&/?target=https%3A//codepen.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CodePen&i class=&icon-external&&&/i&&/a&, &a href=&/?target=http%3A//plnkr.co/edit& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Plunker&i class=&icon-external&&&/i&&/a& and &a href=&/?target=https%3A//jsfiddle.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JSFiddle&i class=&icon-external&&&/i&&/a&: 在线写前端代码的地方，可以实时预览，也方便分享给别人。&/li&&li&&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Vanilla List&i class=&icon-external&&&/i&&/a&: 一个收集只使用原生JS的库（不依赖jQuery）的列表。&/li&&li&&a href=&/?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&You Might Not Need jQuery&i class=&icon-external&&&/i&&/a&&/li&&li&&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&PublicAPIs&i class=&icon-external&&&/i&&/a&: 所有开放的公共API&/li&&li&&a href=&/?target=https%3A//www.gravit.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Gravit.io&i class=&icon-external&&&/i&&/a&: 在线设计Web原型，免费袄。&/li&&li&&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Adobe Kuler&i class=&icon-external&&&/i&&/a&:Adobe家推出的工具，用来给网站配色。&/li&&li&&a href=&/?target=http%3A//chir.ag/projects/name-that-color& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Name that color&i class=&icon-external&&&/i&&/a&:不知道CSS某个颜色类该怎么命名？到这里来查询吧。&/li&&/ul&&h2&译者的话&/h2&&p&原文提供的大部分资源都是英文的（其实全部是英文的，好在有些网站有中文版，我也把一些书籍替换成了中文版）。我也推荐呼吁大家使用英文资源学习。&/p&&p&国内的在线学习资源普遍质量实在太差，另外一定不要去培训班，或者什么付费培训群，99.999%都是骗钱的。我在这里点到为止。&/p&&p&如果你英文基础实在太差，请移步&a href=&/p/& class=&internal&&从零学习前端开发·目录&/a&，这里有我搜集的很多免费的在线中文学习资源。&/p&&p&如果你是初学者或零基础，也推荐阅读&a href=&/p/& class=&internal&&如何在一年之内通过自学找到Web开发工作&/a&。&/p&&p&虽然没人给我广告费，还是要再推荐一遍&b&全世界学习Web开发最好的地方FreeCodeCamp&/b&，&b&完全公益免费&/b&，提供安排非常详细，设计非常合理的Web开发学习路径：&/p&&ul&&li&官网：&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&FreeCodeCamp&i class=&icon-external&&&/i&&/a&&/li&&li&中文网：&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&FreeCodeCampChina&i class=&icon-external&&&/i&&/a&&/li&&/ul&&p&有任何疑问或建议，好的学习资源分享，自己的学习经验体会等等，欢迎在评论区参与讨论。&/p&
原文链接：作者：首先请允许我自我介绍一下，我的名字叫 Sergei Garcia，我是一名拥有两年工作经验的全职前端开发工程…
&p&谢邀 &a class=&member_mention& href=&///people/f0ddad9ed24ad92e60077d7& data-hash=&f0ddad9ed24ad92e60077d7& data-hovercard=&p$b$f0ddad9ed24ad92e60077d7&&@GarryTonon&/a&&/p&&p&很多人训练非常积极，但却不注意饮食这个环节，所以总是减肥不成功。俗话说「三分练，七分吃」，无论你的目的是减肥，还是为了保持健康，饮食都是不可忽视的一个环节。&/p&&p&&br&&/p&&figure&&img src=&/v2-0c7907097eba79ff06701_b.jpg& data-rawwidth=&1024& data-rawheight=&750& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&/v2-0c7907097eba79ff06701_r.jpg&&&/figure&&p&&br&&/p&&p&下面将从&b&饮食结构、饮食习惯、一周推荐食谱&/b&三个方面介绍健康减肥到底该怎么吃。&/p&&p&鉴于篇幅较长，先列个目录提纲&/p&&p&&br&&/p&&blockquote&&b&一、饮食结构&/b&&br&1. 不要节食&br&2. 控制好主食，最好粗细搭配&br&3. 蔬菜多多益善&br&4. 增加瘦肉摄入&br&5. 水果要适量&br&6. 多喝水&br&&br&&b&二、饮食习惯&/b&&br&1. 少油少盐&br&2. 少糖&br&3. 少食多餐&br&4. 细嚼慢咽&br&5. 记得吃早餐&br&6. 美食也可以吃&br&&br&&b&三、一周减肥食谱推荐&/b&&/blockquote&&p&&br&&/p&&p&————正文开始分界线————&/p&&p&&br&&/p&&h2&&b&一、饮食结构&/b&&/h2&&p&基础饮食结构，参照《2016 年中国居民膳食指南》推荐的膳食餐盘，比较合理的饮食结构是：&b&谷薯类+鱼肉蛋豆类+水果类+蔬菜类+奶制品&/b&&/p&&p&&br&&/p&&figure&&img src=&/v2-038adce4676edd4af7419d1b_b.png& data-rawwidth=&731& data-rawheight=&505& class=&origin_image zh-lightbox-thumb& width=&731& data-original=&/v2-038adce4676edd4af7419d1b_r.png&&&/figure&&p&&br&&/p&&ul&&li&&b&不要节食&/b&&/li&&/ul&&p&节食减肥属于典型的破坏饮食结构（如晚餐只吃一点水果），会造成营养不良，除了长时间的饥饿以外还可能出现面黄肌瘦、脱发、记忆力变差、注意力无法集中、焦虑、皮肤变差、女性月经减少甚至绝经等症状。&/p&&p&盲目的节食会让身体调低基础代谢率，结果虽然吃得少了，但是身体消耗得更少，非常容易进入平台期。一旦恢复正常饮食，体重就立刻反弹，甚至比节食之前更严重，反复的节食还容易引发暴食症。&/p&&p&&br&&/p&&figure&&img src=&/v2-be8cd5ebfc_b.jpg& data-rawwidth=&600& data-rawheight=&399& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&/v2-be8cd5ebfc_r.jpg&&&/figure&&p&&br&&/p&&ul&&li&&b&控制主食，最好粗细搭配&/b&&/li&&/ul&&p&主食（谷薯类）是身体主要的能量来源，也是多种微量营养素和膳食纤维的重要来源，不吃主食的危害包括但不限于：虚弱无力、脱发、注意力无法集中、皮肤变差、女性月经减少甚至绝经等，减肥期间一定要保证主食的摄入。&/p&&p&&br&&/p&&figure&&img src=&/v2-24d198f87b15df790778_b.jpg& data-rawwidth=&1000& data-rawheight=&664& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&/v2-24d198f87b15df790778_r.jpg&&&/figure&&p&&br&&/p&&p&主食（谷薯类）应该占到每餐的
1/4 ～ 1/3
左右，减肥人群可以适当降低这个比例，按照
的比例进食主食。&/p&&p&食材选择方面，减少精米细面（四白：白面包、白面条、白米饭、白馒头）在主食中的比例，精米细面属于高 GI 食物，缺乏膳食纤维，饱腹感差，和摄入等量的粗粮相比，饿的更快。减肥期间建议粗粮和精粮各占主食的一半。&/p&&p&&br&&/p&&figure&&img src=&/v2-8c2d28d9ca_b.jpg& data-rawwidth=&600& data-rawheight=&400& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&/v2-8c2d28d9ca_r.jpg&&&/figure&&p&&br&&/p&&ul&&li&&b&蔬菜多多益善&/b&&/li&&/ul&&p&蔬菜是膳食指南鼓励多摄入的食物，是最主要的微量营养素和膳食纤维的来源，而且蔬菜的热量非常低，蔬菜摄入量应该占到每餐的
左右，每天的总量最好达到 500g 以上。&/p&&p&&br&&/p&&figure&&img src=&/v2-1ecf31e2790_b.jpg& data-rawwidth=&620& data-rawheight=&348& class=&origin_image zh-lightbox-thumb& width=&620& data-original=&/v2-1ecf31e2790_r.jpg&&&/figure&&p&&br&&/p&&p&深色蔬菜（深绿色、深黄色、紫色、红色）一般富含维生素、植物化学物和膳食纤维，比如西兰花、卷心菜、胡萝卜、辣椒、菠菜、芹菜等，推荐深色蔬菜占总体蔬菜摄入量的
以上。&/p&&p&&br&&/p&&ul&&li&&b&增加瘦肉摄入&/b&&/li&&/ul&&p&很多人觉得吃肉会变胖，所以减肥期间就不吃肉或者少吃肉了，吃肉变胖是因为吃了肥肉（大量脂肪）或者烹饪的时候用了大量油（大量脂肪），科学吃肉不仅不会胖，还有利于瘦。&/p&&p&&br&&/p&&figure&&img src=&/v2-6bb0ec65595dec1bdd96f1_b.jpg& data-rawwidth=&551& data-rawheight=&352& class=&origin_image zh-lightbox-thumb& width=&551& data-original=&/v2-6bb0ec65595dec1bdd96f1_r.jpg&&&/figure&&p&&br&&/p&&p&膳食指南推荐瘦肉类（主要蛋白质来源）摄入量为每餐的
左右，蛋白质可以增加饱腹感（饿的更慢）；身体消化蛋白质需要消耗更多热量（食物热效应，提高新陈代谢）；减脂期间保证蛋白质摄入可以有效减少肌肉的流失（维持基础代谢），所以减脂过程中我们可以提高瘦肉类的摄入量达到每餐的
1/4 ～ 1/3
左右。&/p&&p&&br&&/p&&ul&&li&&b&水果要适量&/b&&/li&&/ul&&p&水果和蔬菜一样，是微量营养素和膳食纤维的重要来源，但水果普遍含有较高的糖分，特别是一些较甜的水果，如芒果、荔枝、枣等，果糖也是糖，而糖是导致发胖的重要原因。&/p&&p&&br&&/p&&p&减肥期间推荐每日水果的摄入量不超过 200g ，200g 是多少？大概是一个中等大小的苹果加一根中等大小的香蕉。&/p&&p&&br&&/p&&figure&&img src=&/v2-264c317a3a2b4875a0fac1a82c429f33_b.jpg& data-rawwidth=&1500& data-rawheight=&1004& class=&origin_image zh-lightbox-thumb& width=&1500& data-original=&/v2-264c317a3a2b4875a0fac1a82c429f33_r.jpg&&&/figure&&p&&br&&/p&&p&推荐直接吃水果，不建议喝果汁（即使是鲜榨的），大部分果汁去除了水果的果肉（膳食纤维）部分，剩下的部分不仅含糖量高（热量高），而且不容易产生饱腹感（缺乏膳食纤维），不知不觉间很可能摄入了多余的热量导致发胖。&/p&&p&&br&&/p&&ul&&li&&b&多喝水&/b&&/li&&/ul&&p&减肥期间每天至少饮水 ml（约 7～8杯）。&/p&&p&&br&&/p&&figure&&img src=&/v2-6e25dc4b8c6df_b.jpg& data-rawwidth=&1500& data-rawheight=&998& class=&origin_image zh-lightbox-thumb& width=&1500& data-original=&/v2-6e25dc4b8c6df_r.jpg&&&/figure&&p&&br&&/p&&h2&&b&二、饮食习惯&/b& &/h2&&ul&&li&&b&少油少盐&/b&&/li&&/ul&&p&尽量少吃油炸油煎食物（如炸鸡、薯片、膨化食品等垃圾食品），炒菜少放油，烹饪方法建议以蒸、煮、煎为主，不吃肥肉。&/p&&p&&br&&/p&&figure&&img src=&/v2-a2f0a5401d9aaf37d8fd0dd9_b.jpg& data-rawwidth=&910& data-rawheight=&475& class=&origin_image zh-lightbox-thumb& width=&910& data-original=&/v2-a2f0a5401d9aaf37d8fd0dd9_r.jpg&&&/figure&&p&&br&&/p&&p&我国居民食盐用量普遍偏高，推荐食盐摄入量为每天 6g，大概是一小勺，而很多人一顿的食盐摄入量就不止 6g 了，盐与高血压关系密切，还可能会引发水肿让你看起来「胖」。&/p&&p&&br&&/p&&ul&&li&&b&少糖&/b&&/li&&/ul&&p&谁都知道减肥期间要少吃糖果甜食，因为里面含有大量的「添加糖」，这些「添加糖」会让你发胖，但你知道「添加糖」其实普遍存在于各种加工食品中吗？&/p&&p&&br&&/p&&figure&&img src=&/v2-eb33b2f0b9edb7ff41a7d9_b.jpg& data-rawwidth=&889& data-rawheight=&507& class=&origin_image zh-lightbox-thumb& width=&889& data-original=&/v2-eb33b2f0b9edb7ff41a7d9_r.jpg&&&/figure&&p&&br&&/p&&p&比如可乐、雪碧等碳酸饮料，比如打着各类「茶」、「果汁」旗号的含糖饮料。一瓶不起眼的可乐就有 215 千卡的热量，要消耗这 215 千卡热量需要慢跑 27 分钟，换句话说，假如你慢跑半小时后喝了一瓶可乐，这半小时就白跑了。&/p&&p&&br&&/p&&figure&&img src=&/v2-13df0ff7664ade5bd4e1b0ae6bcec4c3_b.jpg& data-rawwidth=&416& data-rawheight=&418& class=&content_image& width=&416&&&/figure&&p&&br&&/p&&p&再比如各种面包、饼干，打着「低脂」旗号的酸奶，以及加了奶和糖的咖啡。&/p&&p&&br&&/p&&figure&&img src=&/v2-82d4e255ac13fc4e7d5aff_b.jpg& data-rawwidth=&947& data-rawheight=&547& class=&origin_image zh-lightbox-thumb& width=&947& data-original=&/v2-82d4e255ac13fc4e7d5aff_r.jpg&&&/figure&&p&&br&&/p&&p&甚至你爱的辣条、各种酱料、果脯等都含有大量添加糖。&/p&&p&这些糖会被身体快速吸收，且具有成瘾性，是肥胖和很多疾病的元凶。要避免糖摄入过量，请远离精加工食品，尽量吃天然食物，喝饮用水（少喝饮料）。&/p&&p&&br&&/p&&ul&&li&&b&不要吃撑，少食多餐合理加餐&/b&&/li&&/ul&&p&很多肥胖的人喜欢从吃撑中获取满足感，吃撑是一种非常不好的信号，很容易导致热量摄入超标，每餐只吃八分饱，三餐之外建议进行合理加餐，合理加餐可以维持饱腹感防止正餐时因为太饿而无法控制食量。&/p&&p&&br&&/p&&figure&&img src=&/v2-d679225fedabdaec0dd15e_b.jpg& data-rawwidth=&1280& data-rawheight=&861& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&/v2-d679225fedabdaec0dd15e_r.jpg&&&/figure&&p&&br&&/p&&p&加餐时间可以选在三餐之间，如上午十点下午三点，加餐食物推荐水果、牛奶、酸奶、坚果等。&/p&&p&&br&&/p&&ul&&li&&b&细嚼慢咽&/b&&/li&&/ul&&p&同样是吃到七八分饱，吃的快相比吃的慢普遍会摄入更多的热量。&/p&&p&&br&&/p&&ul&&li&&b&记得吃早餐&/b&&/li&&/ul&&p&早餐是每天的启动能量，是很重要的一餐，一觉醒来体内的能量消耗殆尽，需要及时补充。很多人为了减肥不吃早餐或者把吃早餐的时间省下来多睡一会，其实是得不偿失的。&/p&&p&&br&&/p&&figure&&img src=&/v2-503fe2fab0f938_b.jpg& data-rawwidth=&1000& data-rawheight=&667& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&/v2-503fe2fab0f938_r.jpg&&&/figure&&p&&br&&/p&&p&不吃早餐，能量无法及时补充，人体会感到疲倦，影响工作学习效率；不吃早餐导致饥饿感增加，这可能会让你在中午吃的更多，甚至偏向于吃一些油腻的食物来满足饥饿感，这样反而不利于减肥。&/p&&p&&br&&/p&&ul&&li&&b&美食可以吃，适当安排「欺骗餐」&/b&&/li&&/ul&&p&长期的低能量饮食，身体会认为可能进入了「饥荒」，会适当降低我们的基础代谢（和节食的时候身体降低基础代谢原理相似，但降低幅度较小没有节食降低的那么剧烈），容易影响减肥效果甚至进入平台期。&/p&&p&&br&&/p&&p&这时候合理安排「欺骗餐」，抛开条条框框按照自己的喜好饱餐一顿，比如一周吃一次自己喜欢的火锅，身体就会认为没有「饥荒」，不用降低基础代谢，可以继续减肥；另外「欺骗餐」也能从心理层面满足我们对美食的渴望。&/p&&p&&br&&/p&&figure&&img src=&/v2-8a13ef58a554d185b96884_b.jpg& data-rawwidth=&1200& data-rawheight=&826& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&/v2-8a13ef58a554d185b96884_r.jpg&&&/figure&&p&&br&&/p&&p&周期性的安排欺骗餐，既能享受美食，又不会对身材造成太大影响，何乐而不为？吃甜食火锅很快乐，好身材也能让我们快乐，这两种快乐是可以兼得的，只是需要稍加控制。当然，也不能打着「欺骗餐」的旗号三天两头「欺骗」自己。&/p&&p&&br&&/p&&h2&三、&b&饮食方案推荐&/b& &/h2&&p&&b&食谱说明：&/b&&/p&&ul&&li&本食谱热量值约为
大卡，适合大部分减肥人群，如不适合，可参照比例适当减量或增量。&/li&&li&本食谱中的菜肴仅为推荐菜肴，实践过程中可根据自己的实际情况进行替换，蛋白质类比较推荐的有：瘦猪肉、牛肉、鸡肉、鱼肉、鸡蛋、牛奶等，蔬菜类推荐绿叶蔬菜，主食类推荐各类粗粮，食材可替换，注意烹饪方式低油低盐低糖。&/li&&li&瘦肉米饭蔬菜重量皆为熟制。&/li&&li&适当加餐，拒绝零食。&/li&&li&每天至少摄入
毫升饮用水（约 7～8 杯）。&/li&&/ul&&p&&br&&/p&&figure&&img src=&/v2-64cfd705404dbde46a0f05f774e43437_b.jpg& data-rawwidth=&850& data-rawheight=&566& class=&origin_image zh-lightbox-thumb& width=&850& data-original=&/v2-64cfd705404dbde46a0f05f774e43437_r.jpg&&&/figure&&p&&br&&/p&&ul&&li&&b&周一&/b& &/li&&/ul&&p&&b&早餐：&/b&&/p&&blockquote&白水煮鸡蛋：1 个&br&全麦面包：1 片 （可用杂粮馒头 1 个替代）&br&牛奶：1 杯约 250ml
（全脂脱脂均可）&br&西红柿：1 个（或等量其它蔬菜）&/blockquote&&p&&br&&/p&&p&&b&上午加餐：&/b&&/p&&blockquote&苹果：1 个（可用其它水果或酸奶替代）&/blockquote&&p&&br&&/p&&p&&b&午餐：&/b&&/p&&blockquote&煎鸡胸：1 块约 150g（或等量其它瘦肉类菜肴）&br&蒜蓉西兰花：1 个约 200g（或等量其它蔬菜）&br&米饭：1 碗约 100g（或等量馒头、面条）&/blockquote&&p&&br&&/p&&p&&b&下午加餐：&/b&&/p&&blockquote&酸奶：1 杯约 100ml&br&坚果：1 小把&/blockquote&&p&&br&&/p&&p&&b&晚餐：&/b&&/p&&blockquote&卤牛肉：1 份约 100g（或其它瘦肉类菜肴替代）&br&香菇油菜：1 份约 200g（或等量其它蔬菜）&br&红薯或紫薯：1 块约 100g（或等量其它粗粮） &/blockquote&&p&&br&&/p&&figure&&img src=&/v2-7ab2679d4fbfa177390abd3_b.jpg& data-rawwidth=&768& data-rawheight=&514& class=&origin_image zh-lightbox-thumb& width=&768& data-original=&/v2-7ab2679d4fbfa177390abd3_r.jpg&&&/figure&&p&&br&&/p&&ul&&li&&b&周二&/b& &/li&&/ul&&p&&b&早餐：&/b&&/p&&blockquote&白水煮鸡蛋：1 个&br&玉米：1 根&br&牛奶：1 杯约 250ml
（全脂脱脂均可）&br&坚果：1 小把&/blockquote&&p&&br&&/p&&p&&b&上午加餐：&/b&&/p&&blockquote&橙子：1 个&/blockquote&&p&&br&&/p&&figure&&img src=&/v2-b43ced6da5eefd_b.jpg& data-rawwidth=&460& data-rawheight=&360& class=&origin_image zh-lightbox-thumb& width=&460& data-original=&/v2-b43ced6da5eefd_r.jpg&&&/figure&&p&&br&&/p&&p&&b&午餐：&/b&&/p&&blockquote&鸡腿：2 根（鸡腿去皮，或等量其它瘦肉 ）&br&爆炒圆白菜：1 份约 200g（或等量其它蔬菜）&br&馒头：1 个&/blockquote&&p&&br&&/p&&p&&b&下午加餐：&/b&&/p&&blockquote&酸奶：1 杯约 100ml&/blockquote&&p&&br&&/p&&p&&b&晚餐：&/b&&/p&&blockquote&清炒虾仁：1 份约 100g（或等量其它瘦肉）&br&拍黄瓜：1 份约 200g（或等量其它蔬菜）&br&粗粮米饭：1 碗约 50g&/blockquote&&p&&br&&/p&&ul&&li&&b&周三&/b& &/li&&/ul&&p&&b&早餐：&/b&&/p&&blockquote&茶叶蛋：1 个&br&苹果：1 个&br&牛奶：1 杯约 250ml
（全脂脱脂均可）&br&小米粥：1 碗&/blockquote&&p&&br&&/p&&figure&&img src=&/v2-7cc939c0dbacd_b.jpg& data-rawwidth=&1024& data-rawheight=&683& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&/v2-7cc939c0dbacd_r.jpg&&&/figure&&p&&br&&/p&&p&&b&上午加餐：&/b&&/p&&blockquote&苹果：1 个&/blockquote&&p&&br&&/p&&p&&b&午餐：&/b&&/p&&blockquote&凉拌鸡胸丝：1 块约 150g（或等量其它瘦肉）&br&西红柿炒鸡蛋：1 份约 200g（或等量其它蔬菜）&br&米饭：1 碗约 100g&/blockquote&&p&&br&&/p&&p&&b&下午加餐：&/b&&/p&&blockquote&酸奶：1 杯约 100ml（低糖）&/blockquote&&p&&br&&/p&&p&&b&晚餐欺骗餐：&/b&&/p&&blockquote&火锅、汉堡、猪蹄、披萨、甜食……，这顿可以吃自己喜欢的食物，不要暴饮暴食即可。&/blockquote&&p&&br&&/p&&ul&&li&&b&周四&/b&&/li&&/ul&&p&&b&早餐：&/b&&/p&&blockquote&白水煮鸡蛋：1 个&br&全麦面包：1 片 （可用杂粮馒头 1 个替代）&br&牛奶：1 杯约 250ml
（全脂脱脂均可）&br&西红柿：1 个（或等量其它蔬菜）&/blockquote&&p&&br&&/p&&p&&b&上午加餐：&/b&&/p&&blockquote&苹果：1 个（可用其它水果或酸奶替代）&/blockquote&&p&&br&&/p&&p&&b&午餐：&/b&&/p&&blockquote&煎鸡胸：1 块约 150g（或等量其它瘦肉类菜肴）&br&蒜蓉西兰花：1 个约 200g（或等量其它蔬菜）&br&米饭：1 碗约 100g（或等量馒头、面条）&/blockquote&&p&&br&&/p&&p&&b&下午加餐：&/b&&/p&&blockquote&酸奶：1 杯约 100ml&br&坚果：1 小把&/blockquote&&p&&br&&/p&&figure&&img src=&/v2-55a1a8d20def_b.jpg& data-rawwidth=&640& data-rawheight=&400& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/v2-55a1a8d20def_r.jpg&&&/figure&&p&&br&&/p&&p&&b&晚餐：&/b&&/p&&blockquote&煎牛排：1 份约 100g（或其它瘦肉类菜肴替代）&br&炒菠菜：1 份约 200g（或等量其它蔬菜）&br&红薯或紫薯：1 块约 100g（或等量其它粗粮）
&/blockquote&&p&&br&&/p&&ul&&li&&b&周五&/b& &/li&&/ul&&p&&b&早餐：&/b&&/p&&blockquote&白水煮鸡蛋：1 个&br&玉米：1 根&br&牛奶：1 杯约 250ml
（全脂脱脂均可）&br&坚果：1 小把&/blockquote&&p&&br&&/p&&p&&b&上午加餐：&/b&&/p&&blockquote&橙子：1 个&/blockquote&&p&&br&&/p&&p&&b&午餐：&/b&&/p&&blockquote&鸡腿：2 根（鸡腿去皮，或等量其它瘦肉 ）&br&爆炒圆白菜：1 份约 200g（或等量其它蔬菜）&br&馒头：1 个&/blockquote&&p&&br&&/p&&figure&&img src=&/v2-7b18b3dffcb0bf42825bdc_b.jpg& data-rawwidth=&600& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&/v2-7b18b3dffcb0bf42825bdc_r.jpg&&&/figure&&p&&br&&/p&&p&&b&下午加餐：&/b&&/p&&blockquote&酸奶：1 杯约 100ml（低糖）&/blockquote&&p&&br&&/p&&p&&b&晚餐：&/b&&/p&&blockquote&清炒虾仁：1 份约 100g（或等量其它瘦肉）&br&拍黄瓜：1 份约 200g（或等量其它蔬菜）&br&粗粮米饭：1 碗约 50g&/blockquote&&p&&br&&/p&&ul&&li&&b&周六&/b& &/li&&/ul&&p&&b&早餐：&/b&&/p&&blockquote&茶叶蛋：1 个&br&苹果：1 个&br&牛奶：1 杯约 250ml
（全脂脱脂均可）&br&小米粥：1 碗&/blockquote&&p&&br&&/p&&p&&b&上午加餐：&/b&&/p&&blockquote&苹果：1 个&/blockquote&&p&&br&&/p&&p&&b&午餐：&/b&&/p&&blockquote&凉拌鸡胸丝：1 块约 150g（或等量其它瘦肉）&br&西红柿炒鸡蛋：1 份约 200g（或等量其它蔬菜）&br&米饭：1 碗约 100g&/blockquote&&p&&br&&/p&&p&&b&下午加餐：&/b&&/p&&blockquote&酸奶：1 杯约 100ml（低糖）&/blockquote&&p&&br&&/p&&p&&b&晚餐欺骗餐：&/b&&/p&&blockquote&火锅、汉堡、猪蹄、披萨、甜食……，这顿可以吃自己喜欢的食物，不要暴饮暴食即可。&/blockquote&&p&&br&&/p&&figure&&img src=&/v2-bf646b0fb55fc6dfe772d43eae3422a1_b.jpg& data-rawwidth=&500& data-rawheight=&332& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&/v2-bf646b0fb55fc6dfe772d43eae3422a1_r.jpg&&&/figure&&p&&br&&/p&&ul&&li&&b&周日&/b& &/li&&/ul&&p&&b&早餐：&/b&&/p&&blockquote&煎鸡蛋：1 个&br&草莓：5 个&br&牛奶：1 杯约 250ml
（全脂脱脂均可）&br&小米粥：1 碗&/blockquote&&p&&br&&/p&&p&&b&上午加餐：&/b&&/p&&blockquote&苹果：1 个&/blockquote&&p&&br&&/p&&p&&b&午餐：&/b&&/p&&blockquote&彩椒炒鸡胸：鸡胸 1 块约 100g，彩椒 1 个&br&凉拌西兰花：1 个约 150g（或等量其它蔬菜）&br&米饭：1 碗约 100g&/blockquote&&p&&br&&/p&&figure&&img src=&/v2-6fcda0a0bcce202cea8e_b.jpg& data-rawwidth=&640& data-rawheight=&492& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/v2-6fcda0a0bcce202cea8e_r.jpg&&&/figure&&p&&br&&/p&&p&&b&下午加餐：&/b&&/p&&blockquote&酸奶：1 杯约 100ml（低糖）&/blockquote&&p&&br&&/p&&p&&b&晚餐：&/b&&/p&&blockquote&小炒牛肉：1 份约 100g（或等量其它瘦肉）&br&凉拌木耳：1 份约 150g（或等量其它蔬菜）&br&红薯或紫薯：1 块约 50g（或等量其它粗粮）&/blockquote&
谢邀 很多人训练非常积极，但却不注意饮食这个环节，所以总是减肥不成功。俗话说「三分练，七分吃」，无论你的目的是减肥，还是为了保持健康，饮食都是不可忽视的一个环节。 下面将从饮食结构、饮食习惯、一周推荐食谱三个方面介绍健康减肥到底…
&figure&&img src=&/v2-30ba947ea2bfc4da110dde35a6b108e4_b.jpg& data-rawwidth=&900& data-rawheight=&500& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&/v2-30ba947ea2bfc4da110dde35a6b108e4_r.jpg&&&/figure&&p&后台收到这样一条粉丝留言：“我从小到大都特别善于察觉别人情绪的变化，不管是家人，朋友，老师还是领导，只要他们情绪有一点点反常，我就能捕捉到，即使周围其他人都没有察觉出异样。而且，我不仅能感受到他们的情绪，还会深受这些情绪的影响。这是为什么呢？”&/p&&p&想对这位粉丝说，其实我周围也有朋友，甚至包括我自己，有着和她一样的困扰。对于这些人而言，生活中仿佛不仅需要承担自己的情绪，还需要额外肩负一份别人的情绪，有时想要视而不见，却关不上自己异常敏锐的“雷达”。今天，就想和大家聊聊这个话题——为什么他人的情绪对我们的影响如此之深。&/p&&p&&br&&/p&&h2&&b&对他人情绪极其敏感的人是什么样的？&/b&&/h2&&p&&br&&/p&&p&1. 你对细节敏锐度很高，&b&并且会不受控制地对它们加以解读&/b&&/p&&p&在人际交往中，你总是能够注意到很多他人注意不到的细枝末节。比如，在向他人求助、邀约时，对方哪怕迟疑了一瞬间，也会被你捕捉到，然后你会紧接着开始在脑中对对方的迟疑作出种种解读——Ta是不愿意吗？Ta勉强答应我的吗？Ta是在想怎么拒绝我吗？&/p&&p&一群人在一起时，你也能够发现他人之间微妙的气氛或细微的互动。我一个深受他人情绪影响的朋友就曾对我说过，如果她的朋友中，或是班级里有两个人突然在一起了的话，那她一定是很早就看出他们之间的端倪了的。&/p&&p&&br&&/p&&p&2. 你通常能够迅速察觉出他人情绪的变化&/p&&p&他人的情绪变化在你眼中就像是被放大了的一样，你仿佛能感受到某种“情绪的磁场”。一旦周遭的人情绪有丝毫的不对，你都能够迅速察觉到，尤其是像悲伤、愤怒、失望这样的负面情绪。即使对方表面上无波无澜，嘴上说着“我没事”，你也能感觉到他们平静表象下暗自汹涌的情绪。&/p&&p&&br&&/p&&p&3. 你在和他人相处时表现得小心翼翼，常常会不自觉地扮演一个老好人的角色&/p&&p&由于你对他人的情绪太过敏感，并且自己也深受这些情绪的影响，因此你总是试图确保周围每个人都开心。为此，你会不自觉地取悦他人，甚至会牺牲自己的利益，只是为了安抚他人的负面情绪。有时，你可能自己都分不清是出于对他人的关心，还是因为他人的情绪对你影响太大。&/p&&p&&br&&/p&&p&4. 你常常觉得自己“共情能力过强”&/p&&p&当身边的人陷入负面情绪之中时，你常常觉得自己的情绪比他们还要强烈，宛如那已经成为了你的情绪一样。在观看、阅读影视或文学作品时，你也总是“入戏太深”，久久不能从别人的故事和情感中脱离出来。看到他人受苦，你总想伸出援手，觉得自己得做些什么，即使别人并没有向你求助。&/p&&p&&br&&/p&&figure&&img src=&/v2-431ea2de4c9c5e33e4eaf08_b.jpg& data-rawwidth=&500& data-rawheight=&333& class=&origin_image zh-lightbox-thumb& width=&500& data-original=&/v2-431ea2de4c9c5e33e4eaf08_r.jpg&&&/figure&&p&&br&&/p&&h2&&b&我为什么对他人的情绪这么敏感？&/b&&/h2&&p&&br&&/p&&p&ElaineAron是最早对高敏感人群（Highly Sensitive Person, HSP）进行研究的心理学家，她的研究指出，&b&人群中有约20%的人有着异常敏感的大脑，&/b&这些人在面对他人情绪时表现出更强的生理反应。研究表明，除了情绪以外，高敏感人群对包括声音，气味等任何细微的外部刺激都有着超高的意识，他们在处理外部信息时会更加彻底，面对正面或负面的刺激时都有会产生强烈的反应。&/p&&p&Melchers及其同事的研究结果表明，影响一个人情绪共情能力（affective empathy）高低的变量中有52-57%都可以被遗传基因解释。在另一项研究中，研究者们发现那些情绪共情能力格外强的人大脑的脑岛附近相较常人有更多的灰质（Tomoda et al., 2012）。&/p&&p&也就是说，异常敏感和过度共情可能是天生的。&b&但是，除此之外，这种对他人情绪过于敏感的特质，更多是在成长过程中被“培育”出来的。&/b&而有两种类型的家庭环境，与情绪敏感密不可分：&/p&&p&&br&&/p&&p&&b&* 危险性环境&/b&&/p&&p&在这样的家庭环境中，&b&照料者的情绪是极不稳定且难以预测的。&/b&他们会将一些强烈的情绪发泄到孩子或其他家庭成员身上，很大可能会演化为言语或肢体暴力。一部分情绪不稳定的家长可能还患有边缘型，自恋型或表演型人格障碍。&/p&&p&&b&因此，孩子在这样的环境中会常常处于一种持续的惊恐，焦虑或害怕的状态，他们不知道接下来可能会发生什么，所以他们只能小心翼翼，如履薄冰。&/b&他们不仅无法从这样不会管理和控制自己情绪的父母身上得到稳定的支持和照料，有时还不得不充当起照料父母的角色。&/p&&p&于是，&b&觉得时时刻刻自己处于危险之中的孩子，会被迫学会对他人的情绪保持高度的敏感，因为情绪的变化在他们看来是一个危险信号。&/b&在这种环境下习得的“过强的共情能力”并非出于对他人的关怀，而是对自身安全的担忧 ，是一种保护机制。他们必须第一时间觉察到他人情绪细微的变化，从而在第一时间做好应对的准备——这样他们才有更大的概率减少受到的伤害。&/p&&p&同时，与其说他们强烈的反应是在“为他人的痛而痛“，那更像是一种面对他人激动情绪时条件反射式的不安与焦灼。因为别人的痛苦让他们本能地感到危险。他们对他人情绪的敏感，是一种消除自己不安和恐惧的方法——看到他人开心，平静时，他们才感到自己是安全的。&/p&&p&&br&&/p&&p&&b&* 批评性环境&/b&&/p&&p&顾名思义，在这种环境中，照料者对孩子往往过于严厉，苛刻，并以极高的、甚至不切实际的标准要求他们。孩子会因为做错了事或是没有达到父母的期望而受到批评和惩罚，却很少在表现出色时得到应有的鼓励和赞许。&/p&&p&常见的批评方式除了口头上的指责与外在的惩罚之外，更多的是使用情绪暴力。比如，父母可能会在孩子未能达到自己要求之后表现得极其烦躁和郁闷，不断地叹气或者干脆不跟孩子说话，借此来向孩子表达：“你很糟糕，我很失望”。事实上，将批评化作无声的情绪会比直接的责骂更加让人喘不过气。&/p&&p&临床心理学家Greg Hajcak Proudfit和他的团队研究发现，以批评为主的教养方式会对孩子造成十分深远的影响，因为它会把孩子的大脑训练成一种“过度强调过失”的模式。这一方面使得孩子逐渐内化了父母对自己的苛责，认为那就是一种对自己客观的反馈，相信自己正如他们评价中的那样一无是处。另一方面，&b&他们会把别人的情绪解读为对自己的负面评价&/b&——“Ta好像生气了，是不是因为我刚才太蠢了？”，“Ta看起来心情不好，是不是因为觉得我这个人太无趣了？”长大后