原文鏈接:https://mail.qq.com/cgi-bin/readtemplate?t=safety&check=false&gourl=https%3A%2F%2Fwww.freecodecamp.org%2Fnews%2Fweb-development-2020%2F&subtempla ...
前端部分原文+翻譯如下(百度翻譯,對不順暢的語序做調整,基本不太需要,百度翻譯已經很發達了~),轉載請註明出處(本文的鏈接),謝謝
Web Development in 2020: What Coding Tools You Should Learn
Quincy Larson The teacher who founded freeCodeCamp.org.
Today one of my favorite teachers, Brad Traversy, published an overview of what he recommends you learn to become a web developer in 2020.
Brad cuts through a lot of the hype you hear on social media. His advice is practical and realistic. And I agree with him on pretty much everything he recommends you learn.
The main thing Brad emphasizes - and that I always emphasize - is don't feel daunted or let yourself get overwhelmed.
Remember: freeCodeCamp's curriculum covers most of these tools, and it has helped more than 40,000 people get jobs as developers. When in doubt, just focus on that.
I've summarized Brad's main insights below for your convenience. This said, I encourage you to watch his full video, which I've embedded below. He adds a lot of detail way beyond what these notes convey. It's a 73-minute watch.
2020年的網路發展:你應該學習哪些的編碼工具
今天,我最喜歡的一位老師,Brad Traversy發表了一篇關於他推薦的,你如何在2020年學習成為一名web開發人員的概述
布拉德刪掉了很多你在社交媒體上聽到的炒作。他的建議是切合實際的。我同意他對你的建議。
布拉德強調的最主要的事情——我也一直強調——是不要感到膽怯或者讓自己不知所措。
請記住:freeCodeCamp的課程涵蓋了這些工具的大部分,它幫助超過40000人獲得了作為開發人員的工作。有疑問的時候,集中精力。
為了您的方便,我在下麵總結了布拉德的主要見解。這就是說,我鼓勵你看他的完整視頻,我已經嵌入下麵。他在這些說明之外添加了很多細節。這是個73分鐘的視頻。
Web Development in 2020: An Overview
The main goal of the video is to give you familiarity with some of the more mainstream web development tools available to web developers.
"I'm not trying to overwhelm you with technologies. These are just options that you have... There are a lot of technologies out there. When you hear something like Nuxt or Gatsby I want you to know what it is. And then you can choose if you want to learn it or not."
Brad starts by encouraging people to first ask what they want to do. Do you want to work on a product company? Or work as a consultant? Do you want to freelance? Or build a product of your own?
A lot of his advice about what to learn boils down to what your goals are. And he frames a lot of his tool suggestions in this light.
As a starting point, he recommends learning what he calls "The Necessities."
2020年網路發展綜述
本視頻的主要目的是讓您熟悉一些可供web開發人員使用的更主流的web開發工具。
“我不是想用科技壓倒你。這些只是你的選擇。。。有很多技術。當你聽到Nuxt或Gatsby這樣的話,我想讓你知道是什麼。然後你可以選擇你是否想學。”
布拉德首先鼓勵人們先問他們想做什麼。你想在一家產品公司工作嗎?或者做顧問?你想做自由職業者嗎?還是自己做產品?
他對學習什麼的很多建議歸結為你的目標是什麼。他從這個角度提出了很多工具建議。
作為起點,他建議學習他所說的“必需品”
One counter-intuitive thing he points out: you don't need a fancy computer for web development. "It's not like game engine development or something like that, so you can use a mid-range laptop or desktop, or even in some cases a lower-end computer."
He uses MacOS, Windows 10, and Linux for cloud servers and even for some of his media servers.
He is a big fan of VS Code for his editor, and uses Chrome and its built-in DevTools for browser-based debugging. This said, he thinks Firefox has come a long way as well and is a viable alternative.
He recommends starting with standard HTML and CSS, and learning newer CSS tools like Flexbox and Grid.
He says learning responsive web design in 2020 should be a given. "Every serious project that you create should look good and be completely usable on all devices."
Instead of relying on CSS frameworks like Bootstrap, he recommends you practice building your own modular CSS components that you can then re-use throughout your project.
This said, he says you may encounter these as you work on projects for different employers.
他指出,有一點與直覺相反:你不需要一臺花哨的電腦來進行網路開發。”這不像游戲引擎開發之類的,所以你可以使用中端筆記本電腦或台式機,甚至在某些情況下使用低端電腦。”
他將MacOS、Windows 10和Linux用於雲伺服器,甚至用於他的一些媒體伺服器。
他非常喜歡編輯器的VS代碼,並使用Chrome及其內置的DevTools進行基於瀏覽器的調試。這就是說,他認為火狐也取得了長足的進步,是一個可行的選擇。
他建議從標準的HTML和CSS開始,學習Flexbox和Grid等新的CSS工具。
他說,在2020年學習響應式網路設計應該是一種必然。”您創建的每個重要項目都應該看起來很好,並且在所有設備上都完全可用。”
他建議您練習構建自己的模塊化CSS組件,然後在整個項目中重用這些組件,而不是依賴於Bootstrap這樣的CSS框架。
這就是說,他說,當你為不同的雇主做項目時,可能會遇到這些問題。
He specifically mentions Tailwind, which I hadn't heard of before. Tailwind is a bit different from other CSS frameworks. It's focused on "utility classes" that you can combine to accomplish what you want with the design.
It's no surprise that Brad recommends getting really good with JavaScript.
他特別提到了Tailwind,這是我以前沒聽說過的。Tailwind與其他CSS框架有點不同。它關註的是“實用類”,您可以將它們結合起來,以實現您想要的設計。
布拉德建議要真正精通JavaScript,這並不奇怪。
Learning at a Practical Pace
Throughout Brad's guide, he repeatedly emphasizes the need for practicality.
Yes - there are best practices for everything. But in many cases, there is a good enough way that will help you move faster and get more done, without getting mired in tools.
One of the most interesting (and perhaps heretical) things he says:
"There's no need to learn DevOps and AWS and all these things for a small site. A hosting site or a managed hosting site like InMotion or Hostgator is fine. It allows you to do [deployment] right in the browser. There's no need to overcomplicate things."
He argues that even in 2020, there's something to be said for using familiar tools.
以實際的速度學習
在布拉德的指南中,他反覆強調實用性的必要性。
是的-每件事都有最佳實踐。但在很多情況下,有一個足夠好的方法可以幫助你更快地行動,完成更多的工作,而不會陷入工具的泥潭。
他說的最有趣(也許是異端)的一句話是:
“對於一個小網站來說,沒有必要學習DevOps和AWS以及所有這些東西。托管站點或托管托管站點(如InMotion或Hostgator)可以。它允許您在瀏覽器中執行[部署]。沒有必要把事情複雜化。”
他認為,即使是在2020年,對於使用熟悉的工具也有一些話要說。
For people new to web development, Brad recommends first getting to the point of being able to work as a basic front end web developer. This will allow you to build websites for local businesses as a freelancer.
"Hipsters will say you definitely need to use a front end framework. I don't think that is true. If you want to render templates on the server without using a front end framework, I think that's absolutely fine, but there are many many jobs that are looking for something like React or Vue."
But once you're ready to tackle front end frameworks, he recommends you explore React, Vue, and Angular. "Try all three and figure out which one you like the best."
He also gives a nod to Svelte - which isn't a framework, but rather a compiler. But he says it's probably too new to try and pick up in 2020.
And he discusses the increasing popularity of Server Side Rendering. File system-based routing means you don't have to create a complicated routing file. Instead, you can just put the files in the directory you want them to be in.
The two popular Server Side Rendering tools are Next.js (for React) and Nuxt.js (the Vue option).
Another emerging trend is Static Site Renders, which he says you don't need to learn but you should be aware of. For example, Gatsby sites are extremely fast and don't need a server.
對於剛接觸到web開發的人,Brad建議首先能夠作為一個基本的前端web開發人員工作。這將允許你作為一個自由職業者為當地企業建立網站。
“Hipsters (嬉皮士)時尚人士會說,你肯定需要使用前端框架。我不認為那是真的。如果您想在伺服器上呈現模板而不使用前端框架,我認為這是完全可以的,但是有許多作業正在尋找React或Vue之類的內容。”
但一旦您準備好處理前端框架,他建議您探索React、Vue和Angular。”三個都試一下,找出你最喜歡哪一個。”
他還贊揚了Svelte——它不是一個框架,而是一個編譯器。但他說,這可能是太新的嘗試,併在2020年回升。
他還討論了伺服器端渲染的日益流行。基於文件系統的路由意味著您不必創建複雜的路由文件。相反,你可以把文件放在你想要的目錄中。
兩種流行的伺服器端呈現工具是Next.js(用於React)和Nuxt.js(Vue選項)。
另一個新興的趨勢是靜態網站呈現,他說你不需要學習,但你應該知道。例如,Gatsby站點速度非常快,不需要伺服器。