mirror of
https://github.com/LCTT/TranslateProject.git
synced 2025-01-25 23:11:02 +08:00
[Translated] 2017 is the year that front-end developers should go back and master the basics
This commit is contained in:
GHLandy
parent
d22aa06e76
commit
03ae3eee8f
@ -1,148 +0,0 @@
|
||||
GHLandy Translating
|
||||
|
||||
2017 is the year that front-end developers should go back and master the basics
|
||||
============================================================
|
||||
|
||||
|
||||
|
||||
In our fast-paced ecosystem, we tend to spend our time trying out the latest inventions, then arguing about them on the internet.
|
||||
|
||||
I’m not saying we shouldn’t do that. But we should probably slow down a bit and take a look at the things that don’t change all that much. Not only will this improve the quality of our work and the value we deliver — it will actually help us learn these new tools faster.
|
||||
|
||||
This post is a mix of my experience and my wishes for the New Year. And I want to hear your suggestions in the comments just as much as I want to share my own.
|
||||
|
||||
### Learn how to write readable code
|
||||
|
||||
Most of our work lies not in writing new code, but maintaining existing code. That means you end up reading code much more often then writing it, so you need to optimize your code for _the next programmer_, not for the interpreter.
|
||||
|
||||
I recommend reading these three amazing books — in this order, from shortest to longest:
|
||||
|
||||
* [The Art of Readable Code][1] by Dustin Boswell
|
||||
* [Clean Code: A Handbook of Agile Software Craftsmanship][2] by Robert C. Martin
|
||||
* [Code Complete: A Practical Handbook of Software Construction][3] by Steve McConnell
|
||||
|
||||
|
||||
|
||||
### Learn JavaScript deeper
|
||||
|
||||
When every week we have a new JavaScript framework that’s better than any older framework, it’s easy to spend most of your time learning frameworks rather than the language itself. If you’re using a framework but don’t understand how it works, _stop and start learning the language until you understand how the tools you use work_.
|
||||
|
||||
* A great start is [Kyle][4] Simpson’s book series [You Don’t Know JavaScript][5], which you can read online for free.
|
||||
* [Eric Elliott][6] has a huge list of [JavaScript topics to learn in 2017][7].
|
||||
* [Henrique Alves][8] has a list of [things you should know before using React][9](actually any framework).
|
||||
* [JavaScript Developers: Watch Your Language][10] by Mike Pennisi — understand TC-39 process for new ECMAScript features.
|
||||
|
||||
### Learn functional programming
|
||||
|
||||
For years we wanted classes in JavaScript. Now we finally have them but don’t want to use them anymore. Functions are all we want! We even write HTML using functions (JSX).
|
||||
|
||||
* [Functional-Light JavaScript][11] by Kyle Simpson.
|
||||
* Professor Frisby’s [Mostly adequate guide to functional programming ebook][12] and [his free course][13].
|
||||
|
||||
|
||||
|
||||
### Learn design basics
|
||||
|
||||
As front-end developers, we’re closer to users than anybody else on the team — maybe even closer than designers. And if designers have to verify every pixel you put on screen, you’re doing something wrong.
|
||||
|
||||
* Design for Hackers: [a book][14] and [a free course][15] by [David Kadavy][16].
|
||||
* [Design for Non-Designers][17] talk by [Tracy Osborn][18].
|
||||
* [Design of Web Applications][19] by [Nathan Barry][20].
|
||||
* [On Web Typography][21] by [Jason Santa Maria][22].
|
||||
* [The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity][23] by Alan Cooper.
|
||||
* A few articles on animation in UI: [How to Use Animation to Improve UX][24], [Transitional Interfaces][25].
|
||||
|
||||
### Learn how to work with humans
|
||||
|
||||
Some of us come to programming because we prefer to interact with computers more than with humans. Unfortunately, that’s not how it works.
|
||||
|
||||
We rarely work in isolation: we have to talk to other developers, designers, managers — and sometimes even users. That’s hard. But it’s important if you want to really understand what you’re doing and why, because that’s where the value in what we do lies.
|
||||
|
||||
* [Soft Skills: The software developer’s life manual][26] by [John Sonmez][27].
|
||||
* [The Clean Coder: A Code of Conduct for Professional Programmers][28] by Robert C. Martin.
|
||||
* [Start with No: The Negotiating Tools that the Pros Don’t Want You to Know][29] by Jim Camp.
|
||||
|
||||
|
||||
|
||||
### Learn how to write for humans
|
||||
|
||||
A big portion of communication with our colleagues and other people are textual: task descriptions and comments, code comments, Git commits, chat messages, emails, tweets, blog posts, etc.
|
||||
|
||||
Imagine how much time people spend reading and understanding all that. If you can reduce this time by writing more clearly and concisely, the world will be a better place to work.
|
||||
|
||||
* [On Writing Well: The Classic Guide to Writing Nonfiction][30] by William Zinsser.
|
||||
* [The Elements of Style][31] by William Strunk and E. B. White.
|
||||
* [Orwell’s rules on writing][32].
|
||||
* In Russian: awesome [Glavred course][33].
|
||||
|
||||
### Learn the old computer science wisdom
|
||||
|
||||
Front-end development isn’t just animated dropdown menus any more. It’s more complicated than ever before. Part of that notorious “JavaScript fatigue” stems from the increased complexity of the tasks we have to solve.
|
||||
|
||||
This, however, means that it’s time to learn from all wisdom that non-front-end developers have built up over the decades. And this is where I want to hear your recommendations the most.
|
||||
|
||||
Here are a couple resources I personally would recommend on this:
|
||||
|
||||
* [Learn To Think Like A Computer Scientist][34] course at Coursera.
|
||||
* [The five programming books that meant most to me][35] by [DHH][36]
|
||||
|
||||
|
||||
* * *
|
||||
|
||||
What would you recommend? What are you going to learn in 2017?
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
作者简介：
|
||||
|
||||
|
||||
|
||||
Web developer, passionate photographer and owner of crazy dogs.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://medium.freecodecamp.com/what-to-learn-in-2017-if-youre-a-frontend-developer-b6cfef46effd#.ss9xbwrew
|
||||
|
||||
作者：[Artem Sapegin][a]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]:https://medium.freecodecamp.com/@sapegin
|
||||
[1]:https://www.amazon.com/gp/product/0596802293/
|
||||
[2]:https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882/
|
||||
[3]:https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670/
|
||||
[4]:https://medium.com/u/5dccb9bb4625
|
||||
[5]:https://github.com/getify/You-Dont-Know-JS
|
||||
[6]:https://medium.com/u/c359511de780
|
||||
[7]:https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711#.zhnbn4rvg
|
||||
[8]:https://medium.com/u/b6c3841651ac
|
||||
[9]:http://alves.im/blog/before-dive-into-react.html
|
||||
[10]:https://bocoup.com/weblog/javascript-developers-watch-your-language
|
||||
[11]:https://github.com/getify/Functional-Light-JS
|
||||
[12]:https://github.com/MostlyAdequate/mostly-adequate-guide
|
||||
[13]:https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript
|
||||
[14]:https://www.amazon.com/Design-Hackers-Reverse-Engineering-Beauty-ebook/dp/B005J578EW
|
||||
[15]:http://designforhackers.com/
|
||||
[16]:https://medium.com/u/5377a93ef640
|
||||
[17]:https://youtu.be/ZbrzdMaumNk
|
||||
[18]:https://medium.com/u/e611097a5bd4
|
||||
[19]:http://nathanbarry.com/webapps/
|
||||
[20]:https://medium.com/u/ac3090433602
|
||||
[21]:https://abookapart.com/products/on-web-typography
|
||||
[22]:https://medium.com/u/8eddcb9e4ac4
|
||||
[23]:https://www.amazon.com/Inmates-Are-Running-Asylum-Products-ebook/dp/B000OZ0N62/
|
||||
[24]:http://babich.biz/how-to-use-animation-to-improve-ux/
|
||||
[25]:https://medium.com/@pasql/transitional-interfaces-926eb80d64e3#.igcwawszz
|
||||
[26]:https://www.amazon.com/Soft-Skills-software-developers-manual/dp/1617292397/
|
||||
[27]:https://medium.com/u/56e8cba02b
|
||||
[28]:https://www.amazon.com/Clean-Coder-Conduct-Professional-Programmers/dp/0137081073/
|
||||
[29]:https://www.amazon.com/Start-No-Negotiating-Tools-that-ebook/dp/B003EY7JEE/
|
||||
[30]:https://www.amazon.com/gp/product/0060891548/
|
||||
[31]:https://www.amazon.com/Elements-Style-4th-William-Strunk/dp/0205313426/
|
||||
[32]:http://www.economist.com/blogs/prospero/2013/07/george-orwell-writing
|
||||
[33]:http://maximilyahov.ru/glvrd-pro/
|
||||
[34]:https://www.coursera.org/specializations/algorithms
|
||||
[35]:https://signalvnoise.com/posts/3375-the-five-programming-books-that-meant-most-to-me
|
||||
[36]:https://medium.com/u/54bcbf647830
|
||||
@ -0,0 +1,152 @@
|
||||
2017年：前端开发者都应该回顾并掌握的基础
|
||||
======================
|
||||
|
||||
|
||||
|
||||
在当今的快节奏生态中，我们都倾向于将时间花在尝试那些最新的创意软件中，然后在网络进行激烈的辩论。
|
||||
|
||||
这里，我并不是说我们不能这样做。但我们的确应该把脚步放慢一些，并认真了解那些变化不太大的事情。这样不仅会提高工作质量和我们创造的价值 —— 这还讲循序渐进的帮助我们更快理解这些行的工具。
|
||||
|
||||
本文融合了我的个人经历以及对新一年的希冀。正如我想热切表达自己想法一样，我也期待能在评论区看到你的建议。
|
||||
|
||||
### 学习如何写出易读的代码
|
||||
|
||||
我们多数的工作并不是编写新代码，而是维护已有代码。这意味着你最终阅读代码的时间要比编写它所花费的时间要长，所以你需要为 _之后需要阅读你代码的程序员_ 精简代码，而非让代码区适应解释器。
|
||||
|
||||
这里我推荐你按以下顺序 — 由浅入深 — 阅读下面三本书：
|
||||
|
||||
* Dustin Boswell 的 《[编写可读代码的艺术 (The Art of Readable Code)][1]》
|
||||
* Robert C. Martin 的 《[代码整洁之道 (Clean Code: A Handbook of Agile Software Craftsmanship)][2]》
|
||||
* Steve McConnell 的 《[代码大全 (Code Complete: A Practical Handbook of Software Construction)][3]》
|
||||
|
||||
|
||||
|
||||
### 深入学习 JavaScript
|
||||
|
||||
现如今，每周都会出现一个新的 JavaScript 框架，并标榜自己比其他的任何旧框架都要好用。这样的情况下，我们很多人更倾向于花费时间来学习框架，而且这样也要比学习 JavaScript 本身要容易的多。如果说你正在使用框架，但并不了解该框架的工作方式，_立刻停止，并学习 JavaScript，直到你能够理解这些工具的工作方式为止_ 。
|
||||
|
||||
* 可以从 [Kyle Simpson][4] 的 [你所不知道的 JavaScript][5] 系列开始，这个可以在线免费阅读。
|
||||
* [Eric Elliott][6] 列出的 [2017 年：JavaScript 的学习目标][7].
|
||||
* [Henrique Alves][8] 列出的 [进行响应式开发之前必须了解的事情][9](实际上就是一个知识框架)。
|
||||
* Mike Pennisi 的 [JavaScript 开发者：注意你的语言][10] — 了解 ECMAScript 新特性的中 TC-39 发展过程。
|
||||
|
||||
### 学习函数式编程
|
||||
|
||||
多年以来，我们一直期待着 JavaScript 引入类，但真正有类之后，我们却不想在 JavaScript 中使用类了，我们只想使用函数。即使是编写 HTML，我们也是使用函数 (JSX)。
|
||||
|
||||
* Kyle Simpson 的 [轻量级函数式 JavaScript][11]。
|
||||
* Professor Frisby 的 [函数式编程完全指南][12] 和 [在线免费课程][13]。
|
||||
|
||||
|
||||
|
||||
### 学习设计基础知识
|
||||
|
||||
作为一个前端开发者，我们比这个生态中的任何人 —— 可能甚至是设计人员 —— 都要更加接近用户。如果设计人员要指定你呈现在屏幕上的每一个像素，你可能会遇到各种莫名其妙的错误。
|
||||
|
||||
* [David Kadavy][16] 的《[黑客设计][14]》或对应的 [免费课程][15]。
|
||||
* [Tracy Osborn][18] 的讲座：[为非设计人员的设计知识][17]。
|
||||
* [Nathan Barry][20] 的 [Web 应用设计][19]。
|
||||
* [Jason Santa Maria][22] 的 [Web 页面设计][21]。
|
||||
* Alan Cooper 的 [The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity][23]。
|
||||
* 两篇关于 UI 动画的文章：[如何使用动画来提高 UX][24]、[过渡界面][25]。
|
||||
|
||||
### 学习如何与人协作
|
||||
|
||||
有些人很喜欢通过编程来与电脑而非与人进行交互。不幸的是，这样的结果并不是很好。
|
||||
|
||||
我们基本上不可能完全脱离群体来工作：我们总是需要和其他开发者、设计师以及项目经理 —— 有时候甚至要和用户 —— 交换意见。这是比较难的任务，但如果你想要真正理解你在做什么以及为什么要这么做的话，这一步是非常重要的，因为这正是我们工作的价值所在。
|
||||
|
||||
* [John Sonmez][27] 的《[软技能：代码之外的生存指南][26]》。
|
||||
* Robert C. Martin 的《[代码整洁之道：程序员的职业素养][28]》。
|
||||
* Jim Camp 的 《[从零开始：专业人士不想让你了解的谈判工具][29]》。
|
||||
|
||||
|
||||
|
||||
### 学习如何为用户编写代码
|
||||
|
||||
与同事或其他人的交流大部分是以文本的形式进行的：目标描述和评论、代码注释、Git commit、即时聊天消息、电子邮件、推文、博客等。
|
||||
|
||||
想象一下，人们要花费多少时间来理解所有以上提到的这些。你过你能够书写的更加明确和简洁，这个时间便会大大减少，然后世界将是一个更好工作的地方。
|
||||
|
||||
* William Zinsserd 的《[On Writing Well: The Classic Guide to Writing Nonfiction][30]》。
|
||||
* William Strunk 和 E. B. White 的《[英文写作指南 (The Elements of Style)][31]》。
|
||||
* [奥威尔写作规则][32]。
|
||||
* 俄国：很好的 [Glavred course][33]。
|
||||
|
||||
### 学习计算机科学智慧
|
||||
|
||||
前端开发已经不仅仅简单的下拉菜单了，它比以前要复杂的多了。随着我们所需解决问题的复杂度越来越高，声名狼藉的“JavaScript 疲乏症”也随之出现了。
|
||||
|
||||
这意味着现在需要学习非前端开发人员近十年所积累形成的知识精华。而这也是我最想听到你向我推荐的内容了。
|
||||
|
||||
以下是我个人给大家的推荐：
|
||||
|
||||
* Coursera 的 [学习想计算机科学家的思考方式][34]。
|
||||
* [DHH][36] 的 [对我意义非凡的五本书][35]。
|
||||
|
||||
|
||||
* * *
|
||||
|
||||
读完本文，你有些什么建议呢？在这新的 2017 年里你又想学习些什么呢？
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
作者简介：
|
||||
|
||||
|
||||
|
||||
Web 开发者，充满激情的摄影者，疯狗的主人 (owner of crazy dogs ？)。
|
||||
|
||||
译者简介：
|
||||
|
||||
|
||||
|
||||
[GHLandy](http://GHLandy.com) —— 欲得之，则为之奋斗 (If you want it, work for it.)。
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://medium.freecodecamp.com/what-to-learn-in-2017-if-youre-a-frontend-developer-b6cfef46effd#.ss9xbwrew
|
||||
|
||||
作者：[Artem Sapegin][a]
|
||||
译者：[GHLandy](https://github.com/GHLandy)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]:https://medium.freecodecamp.com/@sapegin
|
||||
[1]:https://www.amazon.com/gp/product/0596802293/
|
||||
[2]:https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882/
|
||||
[3]:https://www.amazon.com/Code-Complete-Practical-Handbook-Construction/dp/0735619670/
|
||||
[4]:https://medium.com/u/5dccb9bb4625
|
||||
[5]:https://github.com/getify/You-Dont-Know-JS
|
||||
[6]:https://medium.com/u/c359511de780
|
||||
[7]:https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711#.zhnbn4rvg
|
||||
[8]:https://medium.com/u/b6c3841651ac
|
||||
[9]:http://alves.im/blog/before-dive-into-react.html
|
||||
[10]:https://bocoup.com/weblog/javascript-developers-watch-your-language
|
||||
[11]:https://github.com/getify/Functional-Light-JS
|
||||
[12]:https://github.com/MostlyAdequate/mostly-adequate-guide
|
||||
[13]:https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript
|
||||
[14]:https://www.amazon.com/Design-Hackers-Reverse-Engineering-Beauty-ebook/dp/B005J578EW
|
||||
[15]:http://designforhackers.com/
|
||||
[16]:https://medium.com/u/5377a93ef640
|
||||
[17]:https://youtu.be/ZbrzdMaumNk
|
||||
[18]:https://medium.com/u/e611097a5bd4
|
||||
[19]:http://nathanbarry.com/webapps/
|
||||
[20]:https://medium.com/u/ac3090433602
|
||||
[21]:https://abookapart.com/products/on-web-typography
|
||||
[22]:https://medium.com/u/8eddcb9e4ac4
|
||||
[23]:https://www.amazon.com/Inmates-Are-Running-Asylum-Products-ebook/dp/B000OZ0N62/
|
||||
[24]:http://babich.biz/how-to-use-animation-to-improve-ux/
|
||||
[25]:https://medium.com/@pasql/transitional-interfaces-926eb80d64e3#.igcwawszz
|
||||
[26]:https://www.amazon.com/Soft-Skills-software-developers-manual/dp/1617292397/
|
||||
[27]:https://medium.com/u/56e8cba02b
|
||||
[28]:https://www.amazon.com/Clean-Coder-Conduct-Professional-Programmers/dp/0137081073/
|
||||
[29]:https://www.amazon.com/Start-No-Negotiating-Tools-that-ebook/dp/B003EY7JEE/
|
||||
[30]:https://www.amazon.com/gp/product/0060891548/
|
||||
[31]:https://www.amazon.com/Elements-Style-4th-William-Strunk/dp/0205313426/
|
||||
[32]:http://www.economist.com/blogs/prospero/2013/07/george-orwell-writing
|
||||
[33]:http://maximilyahov.ru/glvrd-pro/
|
||||
[34]:https://www.coursera.org/specializations/algorithms
|
||||
[35]:https://signalvnoise.com/posts/3375-the-five-programming-books-that-meant-most-to-me
|
||||
[36]:https://medium.com/u/54bcbf647830
|
||||
Loading…
Reference in New Issue
Block a user