面向对象的前端开发_6个面向前端开发人员的生产力工具

面向对象的前端开发

Today I wanted to share with you the tools I daily use to increase my productivity as a front-end developer.

今天，我想与大家分享我日常使用的工具，以提高作为前端开发人员的工作效率。

＃1： Sizzy (#1: Sizzy)

Make your website responsive (almost) without pain, use Sizzy! In my first experience as a web developer, I was given the task of improving the responsive site of the website. And, it was a nice CSS learning lesson. But also, a pain to switch to the mobile view every time I was making a change. It’s at that time I started to use Sizzy.

使用Sizzy，使您的网站响应(几乎)无痛苦。 在我作为Web开发人员的初次经验中，我承担了改善网站响应网站的任务。 而且，这是一个不错CSS学习课程。 但是，每次进行更改时，都很难切换到移动视图。 那时我开始使用Sizzy 。

And, Sizzy is one of those tools that I fall in love with because it is saving me time. It’s not a free tool, but it’ll worth it! Now, let’s stop talking and dig in. One screenshot and you’ll understand the beauty of this tool:

而且， Sizzy是我钟爱的那些工具之一，因为它可以节省我的时间。 它不是免费工具，但值得！ 现在，让我们停止交谈并深入研究。抓取一张屏幕截图，您将了解该工具的优点：

However, you should bear in mind that Sizzy is not a checking cross-browser compatibility. As it does not simulate different browser rendering engines, there’s a might be some minors differences with a real device check.

但是，请记住，Sizzy并不是检查跨浏览器的兼容性。 由于它无法模拟不同的浏览器渲染引擎，因此在进行实际设备检查时可能会有一些细微的差异。

＃2： 获取CSS扫描 (#2: Get css scan)

Another tool that is not free, but that is really good: GetCssScan. It is like a scan for css. So, it will allows to you to quickly check the css of any element on your page. It works as an add-on and has some great features such as the one allowing you to display the grids or display hover styles

另一个不是免费的工具，却真的很好： GetCssScan 。 这就像扫描css。 因此，它使您可以快速检查页面上任何元素CSS。 它可以作为附件使用，并具有一些很棒的功能，例如，允许您显示网格或显示悬停样式的功能。

Get CSS Scan 获取CSS扫描

＃3： Bit and Bit.dev (#3: Bit and Bit.dev)

Spend hours on working on this component? Make it reusable! That’s the sole purpose behind Bit. Bit (Github) lets you easily “harvest” components from your codebase and share them to a collection (a library) in bit.dev.

在这个组件上花费几个小时吗？ 使其可重用！ 那是Bit背后的唯一目的。 使用Bit ( Github )，您可以轻松地从代码库中“收获”组件并将它们共享到bit.dev中的集合(库)。

Bit is the component collaboration platform. Bit leverages component reusability by providing an ecosystem for sharing components between applications and across repositories.

Bit是组件协作平台。 通过提供一个在应用程序之间以及跨存储库共享组件的生态系统，Bit利用组件的可重用性。

It’s really easy to upload your components to bit, and then, later on, re-use them on another project. Some components are also public, so feel free to check out the work of other developers.

将您的组件上传到位，然后再在另一个项目中重新使用它们，真的很容易。 有些组件也是公开的，因此可以随时查看其他开发人员的工作。

＃4：可以使用 (#4: CanIUse)

I was not sure I need to present this one as everybody knows it. But, this article will not have been complete without this tools. Cross browser compatibily can be difficult, almost as difficult as responsivity. Can I use is here to help you navigate in the browsers waters.

我不确定我是否需要像大家都知道的那样介绍这个。 但是，如果没有此工具，本文将不完整。 兼容跨浏览器可能很困难，几乎与响应能力一样困难。 我可以在这里使用它来帮助您在浏览器中进行导航。

Can I use being used 我可以使用被使用

＃5：捆绑恐惧症 (#5: BundlePhobia)

One of the things I sometimes use is Bundle Phobia. It allows me to find the cost of adding a package. It’s useful when you have to choose between two different packages, or when you want to take a look (and improve) your website performance.

我有时使用的一件事是捆绑恐惧症 。 它使我能够找到添加软件包的成本。 当您必须在两个不同的程序包之间进行选择，或者想要查看(并改善)网站性能时，此功能非常有用。

Bundle Phobia 捆绑恐惧症

Usage is straight forward, either pick your package or scan your package.json file. If you scan your package.json file, you’ll be able to order your packages by size, and the heaviest might not be the one you were expecting!

用法很简单，要么选择您的软件包，要么扫描您的package.json文件。 如果您扫描package.json文件，则可以按大小订购包，而最重的包可能不是您所期望的！

＃6：前端清单 (#6: Front end checklist)

A new tool I just discovered is the front end checklist. As its name says, it’s a checklist. It focuses on all the best practices and things you need to make sure you have before launching a website. It’s common stuff, but there is so much stuff to remember that nobody will regret a quick double-check!

我刚刚发现的一个新工具是前端清单 。 顾名思义，这是一个清单。 它着重介绍了在启动网站之前需要确保具备的所有最佳实践和事项。 这是很普通的东西，但是要记住的东西太多了，没有人会后悔一次快速的双重检查！

#BONUS：设计工具 (#BONUS : Designs tools)

Let’s finish with this bonus: a list by a few design tools that might be useful

让我们结束这个奖金：列出一些可能有用的设计工具

💅对于颜色和形式： (💅 For colors and forms :)

Like that color on a website, find it with ColorZilla. Now that you have your main color, you want to choose colors that looks good with it, use Colorhunt or coolors.co.

像网站上的该颜色一样，可通过ColorZilla找到它。 现在您已经有了主色，您想选择适合自己的颜色，使用Colorhunt或coolors.co 。

You want to use gradients. Uigradients and Webgradients are here for you!

您要使用渐变。 Uigradient和Webgradients在这里为您服务！

If you want to do waves, and customize it, you can use Get Waves.

如果您要进行wave并对其进行自定义，则可以使用Get Waves 。

👀图标或表情符号 (👀 Icons or an Emojis)

For Icons and emojis, you have plenty of choices. My personal favorites are The Noun Project and Tablericons. But there is also:

对于图标和表情符号，您有很多选择。 我个人最喜欢的是Noun Project和Tablericons 。 但也有：

• Material

  材料

• Fontawesome

  丰美的

• Flaticon

  平面图标

• Iconmoon

  图标月亮

• SVGRepo

  SVGRepo

• EmojiPedia

  表情符号

• Feather icons

  羽毛图标

• Glyphsearch

  字形搜索

🖼️ Images:

Images️ 图片：

When it comes to images, there is also plenty of tools. For example you might need to compress them (Image Compressor, Compressor.io or Compress). Don’t forget to use copyrights free images. You can find some here: UIfaces, Pexel, Unsplash or ManyPixels.

当涉及图像时，还有很多工具。 例如，您可能需要压缩它们( Image Compressor ， Compressor.io或Compress )。 不要忘记使用版权免费的图像。 您可以在此处找到一些： UIfaces ， Pexel ， Unsplash或ManyPixels 。

🎨 Inspiration:

🎨灵感：

Sometimes, the mock-up are not really clear. So there is plenty of websites to find your inspiration. Here is a non-exhaustive list:

有时，模型并不十分清楚。 因此，有很多网站可以找到您的灵感。 这是一个非详尽的清单：

• Pinterest

  Pinterest

• Dribble

  运球

• Uimovement.com

  Uimovement.com

• Calltoidea

  Calltoidea

• Lapa Ninja

  拉帕忍者

• Awwwards

  阿瓦德

• Behance

  行为

• Interfaces

  介面

• Land-book

  土地书

And, you? Is there any tool making your life easier that you would like to share? Feel free to share it!

你呢？ 有什么工具可以让您更轻松地分享生活？ 随时分享！

普通英语JavaScript (JavaScript In Plain English)

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

喜欢这篇文章吗？ 如果是这样，请订阅我们的YouTube频道解码，以获得更多类似的内容！

翻译自: https://medium.com/javascript-in-plain-english/6-productivity-tools-for-front-end-developers-d9981cba7f13

面向对象的前端开发