对于每一个开发者而言，开发工具就相当于他们的武器，选择一个合适的工具能够帮助我们在工作时事半功倍，在互联网逐渐发展成熟的今天，越来越多的开发工具供我们选择，但其中总有一些更好用的，如何选择成为了一大难题。
从而颁布了2021年StackShare第八届顶级工具奖，快来看看有没有你青睐的开发工具吧。
年度最佳新兴工具
1.FastAPI
FastAPI 是一个使用 Python3.6+ 构建 Web API 的高性能框架。根据框架创建者的说法，FastAPI 性能与 NodeJS 或 Golang 相当。
2.GitHub Copilot
作为一款 AI 结对编程工具，Copilot 的主要定位是提供类似 IntelliSense/IntelliCode 的代码补全与建议功能，但在实际表现上有望超越同样由微软合作伙伴 OpenAI 开发的 Codex AI 系统。
3.FiglamFigma
Figma 是一个 基于浏览器 的协作式 UI 设计工具，从推出至今越来越受到 UI 设计师的青睐，也有很多的设计团队投入了Figma 的怀抱，
4.Logtail
Logtail是日志服务提供的日志采集Agent，用于采集阿里云ECS、自建IDC、其他云厂商等服务器上的日志。本文介绍Logtail的功能、优势、使用限制及配置流程等信息。
5.Coder
开发人员工作区平台·
6.Charts.csscss
Charts.css 是用于数据可视化的开源 CSS 框架，帮助用户理解数据，帮助开发人员使用简单的 CSS 类将数据转换为漂亮的图表。·
7.Counter
简单并且免费的网络分析·
8.React Query
React Query是一个库，可为任何类型的异步数据提供ReactJS状态管理功能。根据他们的官方文件，·
9.vscode.dev
将VS Code引入浏览器，构建一个可以在浏览器中完全无服务器运行的开发工具。
10.BookStack
BookStack 是一个开源的、基于 Laravel + Vue.js 构建的知识管理和服务平台。具有简单但功能强大的所见即所得编辑器，允许团队轻松创建详细且有用的文档。·
11.ThunderClient
Thunder Client 为我们提供了一款轻量级、易用、整洁、简单的 Rest API 客户端扩展。·我们可以利用 Thunder Client 在编辑器内快速测试代码库的 API 端点，从而最大限度地减少页面的切换。它可以替代 Postman，作为常用的无脚本测试工具。
12.Quod AI
Quod AI Code Search是一个由人工智能驱动的Chrome扩展，可以自动从Git存储库或Jira问题中搜索代码。
它使用问题的标题和描述，并自动在你的Git存储库中找到匹配的内容。
13.Dendron
Dendron 是典型的开源社区编程思维的解决方案，虽然初看起来有一点学习曲线，但从根本上是给了使用者最大的自由发挥空间，同时又提供了最强大和最彻底的工具生态支持。·
14.Notion API
把概念和你每天使用的工具联系起来·
15.Github1s
只需1秒，就可以用VS Code方式来看GitHub代码。·
16.Ocean
容器的无服务器基础架构引擎·
17.Magic
快速构建应用程序，可定制，无密码登录
·
18.Jina
更简单的一种在云上构建神经搜索的方法，
19.Focalboard
一款开源、本地存储、免费的类 Notion 应用Focalboard 的自我定位是“Trello、Notion 和 Asana 的开源、自托管替代品”。·
20.zx
更好地编写脚本的工具（By Google）
21.OpenSearh
OpenSearch是阿里云开放搜索简称，为解决用户结构化数据搜索需求的托管服务，支持数据结构、搜索排序、数据处理自由定制。·
22.Querybook
一个可以发现、创建和共享数据分析、查询以及表的大数据IDE（通过Pinterest），
23.MangoDB
MongoDB是一款为web应用程序和互联网基础设施设计的数据库管理系统。MongoDB就是数据库，是NoSQL类型的数据库
24.TooIJet
Retool的开源替代品·
25.Kitemaker
Kitemaker是为团队而非经理创建的超快速问题跟踪器。为远程团队创建的Jira的快速替代方案·
26.Appflowy
Appflowy 是一款使用 Flutter 和 Rust 构建的开源笔记软件，它支持Windows、macOS和Linux，可以免费下载使用
27.Kubegres
Kubegres 是一个 Kubernetes Operator，用来部署并维护 PostgreSql 集群，提供开箱即用的数据复制和故障转移功能，简化 PostgreSql 集群生命周期管理，降低数据复制的复杂性
28.Lightning Web Components
Lightning Web Components,业内简称LWC,是Salesforce于Spring 19发布的一款新型Lightning Component，快速的企业级Web组件基础
29.Judo
用无代码构建原生应用体验
30.Apache APISIX
Apache APISIX Apache APISIX是一个动态、实时、高性能的API网关。提供了丰富的流量管理功能，如负载均衡、动态上游、canary释放、断路、认证、可观察性等。
31.Control
提供免费的加速、自动化安全性以及SOC2合规
32.Remix
专注于Web技术和现代 用户体验的框架
33.NocoDB
免费并且开源的Airtable替代方案
34.JetBrainsQodana
评估你拥有的、合同或购买的代码的完整性
35.TabnineAI
只能代码编写
36.Coolify
一个开源的，自适应的Heroku和Netlify的替代品
37.Penpot
开源设计和原型平台
38.Portman
Postman介绍：postman是一个开源的接口测试工具，无论是做单个接口的测试还是整套测试脚本的拨测都非常方便。
39.Devops Stack
持续部署Kubernetes环境
40.Slidev
面向开发人员的演示幻灯片
41.ReScript
ReScript 是一门针对 JavaScript 程序员的新语言，特别是对 TypeScript 和 Flow 的类型安全感兴趣的程序员。ReScript 的语法和 JavaScript 非常相似
42.Fig
自定完成终端
43.FlutterFlow
Flutterflow 是一个在线低码平台,使人们在视觉上以人们在视觉上构建本机移动应用程序。
44.Porter
运行在你自己的云中的Heroku
45.SigmaOS
在 SigmaOS 中，你会看到完全不同的浏览器布局，它更像是一个工作台
46.VictoeiaMetrics DB
快速、低成本的监控解决方案和时间序列数据库
47.CloudflarePages
JAMstack平台为前端开发者提供协作和部署网站的平台
48. Devbook
面向开发者的搜索引擎
49.Front Matter
直接在VS Code中管理静态站点
50.Supacase UI
用于企业仪表的React组件库
以上可以说是集结了开发行业中的所有“神器”，不仅能助力程序员高效工作，也是今后走向开发岗位小伙伴们的加薪工具。小伙伴可以从中挑选适合自己的工具~
今天小编要跟大家分享的文章是关于Web前端工程师的入门指南-教你如何成为一名web前端开发工程师。经过如此多的试验和测试，而不是说你从头开始创建了所有内容，接着，你在网页上创建了第一个登录表单时，你感觉如何?经过了多次更改后，将布局分配给第一个Web应用程序时感觉如何?当成功处理了数千个用户的操作时，你感觉如何？大多数Web开发人员都经历了上述所有阶段，最初可能会对其中某些感到沮丧，但是当他们看到自己的网站正在运行并且人们在世界各地使用它时，总体感觉确实令人兴奋和惊奇。Web开发人员负责许多任务，从收集需求到设计网站，处理网站的后端部分，并使其成功地为用户服务。每年，行业中都会涌现出新技术和工具，以提高开发人员的工作效率，并为用户提供更好的网站。对于他们来说，保持在Web开发游戏之上的挑战变得越来越大。今天，我们将讨论要在2020年成为Web开发人员的完整地图。这将是针对所有开发人员(前端，后端和全栈)的实用指南。
1、首先确定你的目标或道路
我们将讨论很多技术，趋势和工具，但我们不希望您不知所措，因此你需要首先决定要成为一名Web开发人员要做什么，因为这将帮助你选择合适的工具。和学习技术。成为Web开发人员的原因有很多，下面列出了一些选择因素：
·你想作为一名Web开发人员在一家公司工作，这是最普遍的原因。
·你想以自由开发人员的身份来开始自己的业务或代理。
·你可以成为其他公司的顾问。
·你可以创建自己的应用来赚钱。
·编码是你的业余爱好。
从上述感兴趣或目标的领域，你可以选择适用于你的目标的正确工具和技术。如果你的目标是成为一名前端开发人员，则可以选择前端开发的工具和技术。后端和全栈开发也是如此。
2、Web开发的基本工具和软件
·
计算机和操作系统：如果没有计算机和操作系统，则无法编写代码。要学习Web开发，你不需要任何高端计算机(如果你拥有的话，那么更好)。你可以使用任何类型的中型笔记本电脑或台式机。对于操作系统，可以使用适合你的MacOS，Windows(最新版本)或Linux。
·文本编辑器/
IDE：毫无疑问，VSCode适用于大多数情况和大多数语言。它具有良好的性能，出色的扩展性，内置的终端功能以及大量功能。在2019年StackOverFlow调查中，VSCode也是开发人员的首选。你还可以选择其他一些不错的选择，例如Sublime
Text或Atom。如果我们谈论IDE，那么是Visual
Studio(#或C#)，Eclipse和Netbeans(Java)。是不错的选择。
·
Web浏览器：大多数开发人员的首选是Chrome或Firefox。Chrome速度很快，并且使用V8引擎(JavaScript引擎)。Firefox也取得了长足的进步，其中的一些好东西不在chrome浏览器中。两种浏览器都有出色的开发工具，可以对Web开发中的问题进行故障排除。
·终端：您将使用一些系统命令来使用CLI进行很多工作。您可以将默认或第三方终端用于您的Web开发项目。Bash，Zsh，Powershell，Git
Bash，iTerm，Hyper这些都是可以使用的选项。
·设计(可选)：并不是每个人都需要学习。在公司中，有专门的团队来制作图像，徽标或草图，但是如果您是自由职业者，则可能必须学习Adobe
XD，Photoshop，Sketch或Figma。
3、从HTML和CSS开始
HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进，或者使用什么框架和后端语言，都必须使用HTML和CSS构建前端应用程序。因此，这是在Web开发中要学习的第一件事。
·HTML5(语义元素，属性，文档类型等)
·CSS基础知识颜色，字体，位置，盒子模型等。
·CSSGrid和Flexbox对齐内容或创建列。
·CSS自定义属性
4、响应式布局
您的应用程序应该在所有类型的设备(例如智能手机，平板电脑，台式机，iPad或任何其他屏幕尺寸的设备)上都可以查看和使用。因此，了解创建响应式设计或布局非常重要。让我们来看一些重要的主题。
·了解如何设置视口
·媒体查询不同的屏幕尺寸。
·流体宽度
·雷姆单位
·移动优先
5、自定义可重用CSS组件
与其依赖大型的CSS框架(如Bootstrap)，不如创建自己的模块化，可重用的CSS组件以在项目中使用。如果您构建自己的定制设计，则无需导入完整的库。您创建只需要特定UI的组件。的新趋势最近还出现了有助于更有效地编写CSS代码的代码。如果你已经了解CSS，那么您无需在学习Saas上花费很多精力。Saas是CSS预处理程序，可为标准CSS添加更多功能并使其更加高效。你可以使用变量，嵌套，条件语句来减少CSS的重复并提高其效率。你还可以为每个可重用组件创建单独的Saas文件。Sass确实节省了很多时间，所以你绝对应该在2020年学习它。
6、CSS框架
学习CSS框架的普及程度不如去年，但对于不擅长设计的开发人员而言，仍然非常相关或有用。有许多流行的CSS框架可供使用，其中一些如下。
·Bootstrap是最流行的CSS框架。学习引导程序也有助于学习其他框架。
·Tailwind
CSS是其他正在流行的框架，与其他框架几乎没有什么不同。它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他按钮确实不同的东西。它们也是高度可定制的。
·物化
·布尔玛
7、前端必须语言：JavaScript
学习HTML和CSS之后，接下来需要学习的是Vanilla
Javascript。对开发人员来说，掌握javascript基本知识非常重要。您将在服务器端语言(例如PHP，Python或#)中使用大量javascript，并且如果您想与React，Angular，NodeJS，Vue或任何其他javascript框架或库一起使用，则非常需要学习这种语言。以下是你应该在javascript中涵盖的一些重要主题
·JavaScript基础知识(变量，数据类型，函数，条件等)
·DOM(文档对象模型)
·JSON(JavaScript对象表示法)
·提取API(请求/响应/Ajax)
·如果您想转向React，Vue，Angular或其他框架，现代JS(ES6)概念对于学习非常重要。
8、一些重要工具
Web开发中将使用一些工具。这些工具将帮助你进行调试，提高生产率，管理代码，与其他开发人员合作以及类似的东西。让我们讨论其中一些工具。
·
Git(版本控制)和Github是您肯定会在2020年学习的最受欢迎的工具。Git在与其他开发人员协作和管理代码方面有很多帮助。您还可以选择其他一些选项，例如GitLab，Bitbucket和其他一些选项。
·
了解如何使用浏览器开发工具。无论是chrome还是firefox，您都应该知道如何使用不同的选项卡，例如元素选项卡，javascript控制台，用于请求和响应的网络选项卡，应用程序选项卡以及其他用于不同目的的选项卡。
·大多数IDE或文本编辑器都具有添加扩展名或插件的功能，这对提高生产力和构建Web应用程序非常有帮助。例如，Visual
Studio代码中的VSCode扩展可帮助下载扩展，例如实时服务器或实时saas编译器以与React一起使用。
·Emmet是另一个很棒的工具，它允许您编写非常快速的HTML和CSS，这有助于提高开发人员的生产力。
·
学习使用javascript软件包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或库(例如React)，那么这些软件包管理器将使用很多，但是对于其他语言(例如Python或Php)，您将使用不同的软件包管理器。
·
如果要在前端安装NPM软件包，则必须使用Webpack或Parcel。如果要创建自己的模块，或者要将一个javascript文件带到另一个javascript文件，则默认情况下不能仅使用浏览器来执行此操作，因此需要Webpack或Parcel对其进行捆绑。
9、基本部署
此时，一旦你知道应该为前端开发学习什么工具或技术，就需要知道如何在Internet上部署前端网站。如果你正在为小型企业构建一些小型应用程序，登录页面或个人站点，则无需学习AWS或DevOps，仅因为它们具有光泽和新潮。你将使事情变得更加复杂而不是简单。你需要在2020年学习一些部署工具和步骤。
·域注册(Namecheap，Google等)
·托管托管(InMotion，Hostgator，Bluehost等)
·静态主机(Netlify，Github页面)
·SSL证书。
·FTP，SFTP(文件传输协议)非常适合小型应用程序。
·SSH(安全外壳)，用于高级应用程序。
·CLI和Git。
到目前为止，我们讨论的任何工具，技术趋势或步骤都是前端开发的一部分。您尚不知道该框架，但可以为个人和小型企业构建网站，也可以构建适合移动设备的布局。您还可以使用到目前为止讨论的工具或技术来部署小型应用程序或项目。如果您想申请工作，那么学习一些前端框架(如React，Vue或Angular)将是很棒的。
10、前端框架和状态管理
框架使您可以进行更高级的前端开发。框架为您提供了许多优势，例如可重用的组件，更有条理的UI或页面交互。这对于协作更好，也有助于编写简洁的代码。另外，了解状态管理。每个框架都有不同的方法。以下是2020年的一些流行框架和状态管理器。
·React：React库是最流行的Web开发学习方法，与其他框架和库相比，它相当容易。React开发人员还有很多工作要做。您可以将Redux和
ContextAPI与Hooks一起使用以进行状态管理。
·Vue：
Vue也越来越受欢迎，开发人员也更喜欢学习Vue。与React和Angular相比，Vue最容易学习。VueX是为视图而构建的状态管理器。
·Angular：此框架通常在大型组织中使用。它具有相当陡峭的学习曲线。用Angular学习
TypeScript也很好。它允许您使用可选的静态类型并支持ES2015的功能。NGRX和Services是可以学习此框架的良好状态管理器。
可选学习：
·
如果您具有这三个框架之一的知识，那么您还可以使用Svelte，它是一个JavaScript编译器，可让您生成纯净的原始JS代码并帮助您轻松构建用户界面。
·
了解服务器端渲染。NextJS(React)和NuxtJS(Vue)是允许您在服务器上运行React和Vue的框架。两者都有很好的功能，例如更好的SEO，文件系统路由，自动代码拆分，静态导出，JS中的CSS和许多其他功能。
·静态网站生成器：Gatsby(反应式)和Gridsome(Vue)
我们已经讨论了所有大多数前端开发工具和技术。现在让我们讨论成为后端开发人员或全栈开发人员的语言和技术。
11、服务器端语言(选择一种)
您应该至少了解一种服务器端语言。要在2020年选择一种语言，下面提供了一些选项...
·NodeJS(不是语言，而是运行时环境)
·Python(非常适合初学者)
·Java(适合大型组织)
·Php(适合自由职业)
·Ruby(2020年少两极)
·C#
·Go
注意：无论你喜欢学习哪种服务器端语言，都要确保你了解使用该语言的数据结构和算法。数据结构和算法将帮助您为用户呈现数据，并将帮助您优化Web应用程序中的代码。我们特别建议您专注于使用数组和字符串(最重要)。你将同时使用这两种方法。
12、服务器端框架(选择一项)
一旦学习了自己选择的一种服务器端语言，就可以使用其中一种语言框架。您可以选择以下给出的选项之一...
·Node.js_Express，Koa，Adonis，Feather.js，Nest.js
·Python：Django，Flask，
·Java：SpringMVC，Grails
·PHP：Laravel，Symfony，Codeignitor，Slim
·Ruby：Sinatra上的RubyonRails
·C#：ASP.NETMVC
·Go：Revel
13、数据库(选择一项)
大多数Web应用程序都需要一个存储数据的地方。在某些情况下，某些技术或某些语言可以与某些数据库配合使用。例如：在Mern堆栈中，M代表MongoDB，而在LAMP堆栈中M代表MySQL，但完全取决于您要为应用程序选择哪个数据库。我们将讨论2020年一些流行的数据库。
·关系数据库：RDBMS仍然是最受欢迎的数据库。最喜欢使用PostgreSQL，MySQL，MSSQL。
·NoSQL：MongoDB，RethinkDB，CouchDB
·云数据库：Firebase，AzureCouldDB，AWS
·轻量级和缓存：Redis，SQLlite，NeDB
在学习数据库时，您还将学习RDBMS，ORM(对象关系映射器)或ODM(对象数据映射器)的SQL(结构化查询语言)。GraphQL
：(可选)您可以了解现在流行的GraphQL。这是API的查询语言。它具有类似于JSON的简单语法，并且相当容易实现。
14、CMS：内容管理
您绝对应该了解内容管理系统，尤其是如果您是自由职业者。CMS用于将内容添加到您的网站或应用程序。客户能够更新自己的内容非常好。
·
传统CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enduro(Javascript)
·其他CMS：DEDECMS，帝国CMS，PHPcms，Prismic.io，Strati。
15、部署和DevOps
托管全栈应用程序或后端应用程序比仅前端应用程序要复杂一些，尤其是当您拥有数据库时。确保您知道如何使用CLI进行部署。了解有关用于部署应用程序的以下内容。
在大多数公司中，有不同的团队从事DevOps的工作。因此，拥有有关DevOps的知识完全是可选的。您可以了解到，如果您正在从事自己的项目。
·SSH(安全外壳)
·Web服务器环境：NGINX，Apache
·应用程序托管：Linode，Heroku，AWS，Azure，Now。
·虚拟化：Docker，Vagrant
·测试：单元，功能，集成等
·负载平衡，监视，安全性。
以上所有技术工具都足以使您成为前端，后端或全栈开发人员。根据最终目标选择正确的工具和技术。
以上就是小编今天为大家分享的关于Web前端工程师的入门指南-教你如何成为一名web前端开发工程师的文章，希望本篇文章能够对正在从事web前端工作的小伙伴和正在学习web前端知识的伙伴们有所帮助，想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利，成为一名优秀的web前端开发工程师！
英文|#/how-to-become-a-web-developer-in-2020-a-complete-guide/翻译|web前端开发(ID：web_qdkf)
现在原型工具有很多，那我今天就罗列一些baiUI设计师和产品经理经常用到的工具，以此提高工作效率，又好又快的完成工作。
第一款：Axure
Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理
第二款： Adobe XD
Adobe XD是一站式UX/UI设计平台，在这款产品上面用户可以进行移动应用和网页设计与原型制作。同时它也是唯一一款结合设计与建立原型功能，并同时提供工业级性能的跨平台设计产品。使用Adobe XD可以更高效准确的完成静态编译或者框架图到交互原型的转变。Adobe XD 面向网站设计、移动 APP 设计等设计工作。
第三款：Mockplus（摹客）
Mockplus，一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。从设计上，采取了隐藏、堆叠、组合等方式，把原本复杂的功能，精心安排。上手很容易，但随着你的使用，功能层层递进，你会发现更多适合自己的有用的功能。新手不会迷惑，熟手可以够用。值得一提的是这是一款国产工具，我认为是国内目前最好的工具。因为目前Mockplus的在线原型设计协作平台已然走在国内甚至国际（很多老外也购买摹客英文版）的前列，不论是原型设计、流程协作还是设计规范，都能够在摹客完成，非常方便。并且支持Figma、Sketch、PS、Axure、XD几乎所有主流工具的插件，界面和语言对国内设计师也非常友好。有兴趣可以去摹客官网注册试试。网页链接
- 可分工协作，多人编辑同一个项目；
- 通过评论和标注原型，完成对项目的审阅；
- 提升开发团队的生产力；
- 大大降低沟通交流成本。
第四款： Justinmind
JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以输出Html页面。与目前主流的交互设计工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更为专属于设计移动终端上app应用。justinmind的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的高保真原型。不用进行编程，就可以在原型上定义简单连接和高级交互。
第五款：Balsamiq Mockups
Balsamiq Mockups是一款共享软件，每个lisence授权是79美刀，对个人用户来说，价格不菲。它推出之后如此受欢迎的原因是在软件产品原型图设计领域，特别是web原型图设计领域，还没有哪款产品有如此丰富的表现形式。使用Balsamiq Mockups画出的原型图都是手绘风格的图像，看上去非常美观、清爽（当然，跟使用者的设计水平也有关系）。它支持几乎所有的HTML控件原型图，比如按钮（基本按钮、单选按钮等）、文本框、下拉菜单、树形菜单、进度条、多选项卡、日历控件、颜色控件、表格、Windows窗体等。除此以外，它还支持目前如火如荼的iPhone手机元素原型图，这为开发iPhone应用程序的软件工程师提供了非常好的设计图。
第六款： Proto.io
Proto.io是一个专门用于移动应用的产品原型工具——可以构建和部署全交互式的移动应用的原型，并且可以模拟出相似的成品。基于Web的在线环境，它可以让你制作流行的 iPhone，iPad，Android 手机以及任何带有屏幕界面的产品原型。
