前端开发工具

Web开发可以分为前端和后端两部分。 前端（客户端部分）应该包括带有 CSS 样式和 JavaScript 的 HTML 布局，以及后端——通常用 Python、PHP、Ruby 等编写的服务器部分。

简单来说，最终用户在浏览器中看到的，最吸引他眼球的就是前端。

引擎盖下隐藏在人眼之外的是后端。

您可能已经注意到，如果服务器端的编程语言列表很长，那么 JavaScript 的客户端就没有竞争。

前端通常也分为设计和开发。 前端设计师更关心创建用户界面，并且熟悉 HTML 和 CSS。

他或她也有很好的工具来创建布局，有美感。 有时不喜欢 JavaScript，但会巧妙地使用 jQuery 等附加组件。

本质上喜欢实现设计解决方案。前端开发人员更关注用 JavaScript 编写代码。 框架、算法、编程范式等对他来说并不是什么不可理解的东西。

那么，2021 年有哪些工具可以促进前端开发人员的生活呢？ 让我们讨论这个实际的话题。

听起来很讽刺，但是虽然前端开发具有组件的模块化优势，但它仍然比后端微服务更加单一。

微前端提供了将前端架构拆分为多个团队的不同部分的能力。

每个团队管理可用于自定义开发、版本控制、测试、渲染、更新和部署（例如，使用 Bit 等工具）的特定微前端的端到端生命周期。

现代生态系统仍然存在一些缺点。 遇到的最常见问题是部署单独的前端、链接、环境差异等等。

使用 Bit，您可以隔离、版本化、开发、测试和更新单个前端/组件。

目前，这些功能用于处理多个应用程序（以及通过组件逐步重构现有应用程序的一部分）。

原子设计与其说是纯粹的方法论，不如说是一种哲学。

该理论由开发人员 Brad Frost 提出，将 Web 应用程序的组成与原子、分子、有机体等的自然组成进行了比较。

原子组成分子（例如文本输入 + 按钮 + 标签原子 = 搜索分子）。 分子构成身体。 有机体存在于图层模板中，可以将其充实到呈现给用户的页面中。

原子组件的好处不仅仅是使用模块化和可重用组件构建模块化 UI 应用程序。

这种范式迫使您考虑组合，以更好地理解每个组件的角色和 API、它们的层次结构，以及如何有效地抽象创建应用程序的过程。

在我看来，未来属于他们。

为什么？ 因为这些纯 Web 组件独立于框架，它们可以在不使用它或不进行标准化的情况下工作。

它们没有 JS，并且受到现代浏览器的支持。 它们的数据包大小和消耗是最佳的，并且 DOM 渲染是惊人的。

这些组件提供了一个自定义元素、一个用于定义新型 HTML 标记的 JavaScript API、用于定义层的 HTML 模板以及组件附带的影子 DOM。

该框架中著名的工具包括 Lit-HTML（和 Lit-element）、StencilJS、SvelteJS 和 Bit。

基于组件的开发的出现催生了许多工具。 最著名的之一是 Bit 及其 Bit.dev 托管平台。

使用 Bit，您可以隔离现有组件并将其导出到动态、可重用的共享集合中。

在 bit.dev 平台上（或在服务器上），可以为多个团队远程组织组件，以便每个团队控制自己的组件的开发。

该平台还为通用组件提供了一个内置的生态系统：它自动记录 UI 组件，在交互式平台上呈现它们，甚至提供一个内置的注册表用于使用 npm / yarn 安装它们。

或者，您可以使用位导入来导入组件并对任何存储库进行更改。

在短期内，这种方法将彻底改变组件共享，从长远来看，它将有助于为微前沿铺平道路。

如何？ 有了它，您已经可以构建版本、测试、开发和更新部分 UI 应用程序。

随着接口模块化程度的提高，应用程序中与全局状态管理相关的挑战变得更加明显，但 Redux 正在成为许多团队的救星。

我们会在 2021 年告别 Redux 吗？ 听起来没有？

然而，处理状态的框架（React hooks、Context-API 等）中出现的新特性为没有全局存储的未来铺平了道路。

由于其面向组件和可扩展的特性，像 Mobx 这样的工具每天都变得越来越流行。

ES Modules 是用于在浏览器中处理模块的 ECMAScript 标准。 它们可用于轻松地将功能封装到通过 CDN 等使用的模块中。

随着 Firefox 60 的发布，所有主流浏览器都将支持 ES 模块，Node 团队已经在努力在 Node.js 中添加对它们的支持。

此外，它们将在未来几年内集成到 WebAssembly 中。

CSS sprites 是一种优化加载时间的重要技术，将许多小图形组合成一个大图形文件。

然后可以通过将图形作为背景图像适当地定位在所需位置来显示各个图形。

这听起来很复杂，需要大量微调。 它将没有以下有用的工具：

优化网站：如果您想为现有网站配备 CSS 精灵（我向大家推荐），SpriteMe 工具可以提供帮助。

只需转到 spriteme.org 并将那里显示的链接拖到浏览器的书签栏中。 您现在可以通过单击链接调用该工具。

然后它分析当前打开的网站，并建议一个可以直接下载为完成图形的精灵组合。

SpriteMe 还会生成适当的 CSS 代码，您只需将其与图形一起包含在您的网站上。

来自单个图形的Sprite 图形：为了从单个图形自动生成 Sprite 图形 + CSS 代码，您只需将图形以 ZIP 格式上传到 CSS Sprite Generator。 该工具完成其余的工作。

从 Sprite 图形生成 CSS：如果您已经自己制作了 Sprite 图形，并且现在需要适当的 CSS 代码来处理各个图形，则可以使用 Sprite Cow。

在那里您上传图形，选择单个元素，然后立即显示 CSS 代码。

CSS 属性border-radius 变得越来越流行，为许多前端开发者省去了推送像素的麻烦。

可以使用纯 HTML + CSS 创建圆形按钮、框、圆形和其他形状。 如果不是因为这个非常长的语法：

-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft：10px；
-moz-border-radius-bottomright：10px；
-border-top-left-radius: 10px;
-border-bottom-right-radius: 10px;

......两个圆角？！ 好吧，六行中有四行来自特定于浏览器的前缀（供应商前缀），希望它们在某个时候不再存在。

尽管如此，这里还是应该提到一个小而有用的网站border-radius.com（容易记住！）。

您只需在矩形的每个角输入所需的边框半径值，即可预览，相关的 CSS 代码会出现在中间。

提示：如果您想完全禁止供应商前缀，可以尝试以下两种工具之一：CSS Prefixer（控制台、Python）、Prefix free (JavaScript)

谁不知道呢？ 你有一个自发的想法或一些你想尝试的 CSS / JS 代码。

只是一点点试验和错误。 页面 jsFiddle 提供了最简单和最快的选项。 全屏上有四个窗口：“HTML”、“CSS”、“JavaScript”和“Result”。

输入代码，可能选择 JavaScript 框架，按“运行”，完成！

结果直接显示在“结果”窗口中，当然您可以与之交互。

但是 jsFiddle 还提供了更多的选项和功能，例如在帐户中保存“fiddles”、清理代码、在其他网站中嵌入“fiddles”等。

此外，该服务仍处于 alpha 阶段，因此我们可以期待进一步的功能和改进。

如果您非常重视跨浏览器兼容性并指定各种默认设置（屏幕大小、颜色深度、JavaScript、Java、Flash）。

总共有 100 多种不同的浏览器变体。 每个选定的变体都被放置在一个队列中，根据还需要处理多少其他请求，可能需要一段时间才能获得所有屏幕截图。

如果您想在问题儿童“Internet Explorer”中仔细查看您的网站，您可以使用有用的 IETester 程序来实现。

您需要一台装有 Win XP 或更高版本的计算机，并且您可以在一个程序中甚至并行测试几乎所有版本的 IE（IE10 预览版、IE9、IE8、IE7、IE 6 和 IE5.5）。

整个事情非常实用，特别是因为那里还有其他有用的选项，例如“重新加载缓存清空”。

提示：如果您安装了 IE8 或更高版本，您可以通过在“文档模式”下选择它来使用开发工具（按 F12）切换到 IE7 引擎。

就个人而言，我认为如果您想创建一个明智和现代的网站，网络字体非常棒，也非常重要。

很快，很难想象没有他们的生活。

因此，请参阅伟大的网站 fontsquirrel.com，它现在提供超过 700 种免费可用的字体。

大多数字体可以作为@font-face 工具包下载，其中包括各种格式的字体、适当的CSS 文件和演示。

通过这种方式，您可以在几分钟内在您的网站上拥有您想要的字体。

随附的格式与以下浏览器兼容：Firefox 3.5+、Opera 10+、Safari 3.1+、Chrome 4.0.249.4+、Internet Explorer 4+、iPad 和 iPhone。

提示：还有一个很棒的 Drupal 模块，通过它可以将 Font Squirrel 和其他网络字体提供者非常容易地集成到 Drupal 网站中：@ font-your-face 模块。

“不，最好轻一点。 或者更喜欢那里的这种颜色……”

当计算机科学家在这种情况下将 RGB 值转换为 HSV 颜色空间、增加亮度并将其计算回 RGB 十六进制表示时，前端开发人员认为：

“嘿，别担心。 查看浏览器扩展。 “我使用 Firefox 扩展程序 ColorZilla 已经有很长时间了，现在 Chrome 也可以使用它。

该扩展的主要功能是一个颜色选择器，您可以使用它在网站上的任何地方找到颜色。

顺便说一句，这也适用于图像，因此不能简单地评估 CSS 属性。 然后，例如将值作为十六进制值直接复制到剪贴板（可以指定格式）。

非常实用！ 还有一个颜色选择器，就像您从 Photoshop 和 Co 知道的那样，所选颜色的历史等等。

提示：如果您正在寻找一种颜色的匹配补色或其他和谐的颜色组合，请务必在这里查看：colorschemedesigner dot com

最后但并非最不重要的一点是，迄今为止我最常使用的工具：Chrome。 F12。 开发者工具。

我不想在这里详细介绍各个功能。 我想任何使用它的人都会喜欢它。

如果你不这样做，你绝对应该尝试一下。 HTML 检查，CSS + HTML 实时编辑，JavaScript 调试控制台，加载时间分析，and and and。

简直超级实用且实施得非常好。

此外，您可以查看这些 WordPress 插件和 Chrome 扩展程序。