vs工具箱没有常规_网页设计师工具来解决常规问题-CSDN博客

vs工具箱没有常规

I’ve learn to create websites in the Windows Notepad, as the time went by I been and until today I keep discovering tools to create more and better apps. Here I want to show some of the tools that made my web developer life easier and now I want to make yours easier too.

随着时间的流逝，我已经学会了在Windows记事本中创建网站，直到今天，我一直在寻找创建更多更好的应用程序的工具。在这里，我想展示一些使我的Web开发人员的生活更轻松的工具，现在，我也想让您的工作更轻松。

RIOT，图像压缩器 (RIOT, Image compressor)

Out there we have too many cloud apps that you can use to upload your images and then they return compressed, however this sometimes is not the best shot because not everybody has a good internet connection and we have multiple files or worst, are big images; maybe the compressing tools doesn’t let you to configure correctly the compression levels that you want. For this I’m pretty sure that we have good desktop apps but until today I’m still using RIOT (Radical Image Optimization Tool) to compress my images.

在那里，我们有太多的云应用程序可用于上传图像，然后将它们返回压缩状态，但这有时不是最好的选择，因为不是每个人都拥有良好的互联网连接，而且我们有多个文件甚至更糟，它们都是大图像。压缩工具可能无法让您正确配置所需的压缩级别。为此，我非常确定我们拥有良好的桌面应用程序，但是直到今天，我仍在使用RIOT(径向图像优化工具)来压缩我的图像。

Not is the prettiest app but it does their job very well. Just opening your file it would be compressed and it supports even conversion PNG > JPG, JPG > GIF, PNG > GIF and viceversa. The JPG format obviously doesn’t support so much options to compress, but PNG’s have options to manage the color reduction or compression specific level. You can see with each change up in “Optimize image” the actual file size so you can handle better your compressions.

不是最漂亮的应用程序，但它做得很好。只需打开您的文件，它将被压缩，甚至支持转换PNG> JPG，JPG> GIF，PNG> GIF，反之亦然。 JPG格式显然不支持太多压缩选项，但是PNG具有管理颜色减少或压缩特定级别的选项。您可以在“优化图像”中看到每次更改后的实际文件大小，从而可以更好地处理压缩。

Even if you don’t like this app, really consider to use assets compressions and WEBP/WEBM file formats to improve your load app speed.

即使您不喜欢该应用程序，也要真正考虑使用资产压缩和WEBP / WEBM文件格式来提高加载应用程序的速度。

浏览器扩展 (Browser extensions)

I have multiple extensions that I use but are not so complex to use a full title in my article, so better I’m going to package them all in this part but hey, if they are small it doesn’t mean that they aren’t very useful.

我有多个扩展名，但在文章中使用完整标题并不那么复杂，因此最好在本部分中将它们全部打包，但是，嘿，如果它们很小，并不意味着它们不是。 t非常有用。

Note: My extensions are mainly for Chrome, however I’m pretty sure that for your preferred browser exist something similar.

注意：我的扩展程序主要用于Chrome，但是我很确定您喜欢的浏览器也存在类似的扩展程序。

打开图形预览器 (Open Graph Previewer)

Using the Facebook OG debugger is very good to test our OG meta tags but to use it we first need to set up online our page and sometimes this is not good or possible. A great solution for this is the OGP extension.

使用Facebook OG调试器非常适合测试我们的OG元标记，但是要使用它，我们首先需要在线建立我们的页面，有时这是不好的或不可能的。一个很好的解决方案是OGP扩展。

It doesn’t save cache of any OG data, so any change that you do could be seen after you click again in the extension.

它不会保存任何OG数据的缓存，因此您在扩展中再次单击后便可以看到所做的任何更改。

ColorPicker吸管 (ColorPicker Eyedropper)

I’ve once watched how some coworker wanted to know the colors of some parts of a website, so he took a screenshot, opened photoshop, opened the file and then he used the dropper to pick the colors.

我曾经看过一些同事想知道网站某些部分的颜色的方法，所以他拍摄了屏幕截图，打开了photoshop，打开了文件，然后用吸管选择了颜色。

In that moment having this ColorPick Eyedropper (ColorZilla for Firefox) tool to pick directly the pixel colors that we wanted would be time saver.

在那一刻，使用此ColorPick滴管 (用于Firefox的ColorZilla )工具直接选择我们想要的像素颜色将节省时间。

JSONView (JSONView)

When we access to an API response directly in Chrome, is displayed as an inline string even if the headers say that the type is JSON. So to solve this problem and make the API’s callbacks more readable I just use the JSONView extension.

当我们直接在Chrome中访问API响应时，即使标头指出类型为JSON，也会显示为内联字符串。因此，为了解决此问题并使API的回调更具可读性，我仅使用JSONView扩展名。

Before:

之前：

After:

后：

This can be a good fast approach to debug an API instead to overkill sometimes with Postman or Insomnia.

这可以是调试API的一种快速好方法，而有时会因Postman或Insomnia而造成过度杀伤。

菲格玛 (Figma)

Not everyone has an iMac to work with Sketch and other ones we prefer not use the Adobe XD unless is really necessary. Do exist something in this world for us?, the answer is Figma. If you don’t know what does this apps mentioned are used for, they are used to create vectors, mainly applications interfaces (UI&UX) for our development projects but I’ve seen even how people creates full Branding mockups or branding images.

并非每个人都拥有可与Sketch配合使用的iMac，除非确实有必要，否则我们不希望使用Adobe XD 。为我们这个世界上是否存在某些东西？答案是Figma 。如果您不知道所提到的这些应用程序的用途，它们将用于创建矢量，主要是用于我们的开发项目的应用程序接口( UI＆UX )，但我什至也看到人们如何创建完整的品牌模型或品牌形象。

You can get the CSS code with the styles of your components created, big community behind creating templates and helping in forums and cheaper than the other apps and in my opinion easier to use are the main reasons to make Figma my favourite over Sketch and Adobe XD. I really think that Figma is good even for developers who doesn’t understand so much about design like me because you can learn it in a couple of days if you know the basics of web development.

您可以获得具有创建的组件样式CSS代码，创建模板和在论坛中提供帮助的大型社区，并且比其他应用更便宜，而我认为更易于使用是使Figma成为我优于Sketch和Adobe XD的主要原因。我真的认为，即使对于不像我这样对设计了解那么多的开发人员， Figma还是不错的，因为如果您了解Web开发的基础知识，就可以在几天之内学会它。

VisBug (VisBug)

This tool is one of the newest that I’ve discovered and really blow my mind, is the kind of tools that you didn’t know that you need but once you have it you can’t realize your design work without it.

该工具是我发现的最新工具，确实让我大吃一惊，是您不知道需要的那种工具，但是一旦有了它，您将无法实现设计工作。

With VisBug you can interact with all elements on the screen easier than using the native browser inspector, at least for the design purposes because is faster to analyze which part we are directly working. The elements can be modified by size, padding, colors, fonts… with explanations of what is each tool for them who aren’t so familiarized with the development code. Is faster to apply new styles in live view than rather write them in the file and save it, the average development time certainly would be decreased.

借助VisBug ，与使用本机浏览器检查器相比，您可以更轻松地与屏幕上的所有元素进行交互，至少出于设计目的，因为它可以更快地分析我们直接工作的部分。可以通过大小，填充，颜色，字体等来修改元素，并为那些不太熟悉开发代码的工具提供解释。在实时视图中应用新样式要比在文件中保存并保存新样式更快，平均开发时间肯定会减少。

Unfortunately VisBug is so big than I can’t explain all what it can do, so I’ll leave you here this article about so you can read it after.

不幸的是，VisBug太大了，以至于我无法解释它的全部功能，因此我将在此处为您提供这篇文章，以便您以后阅读。

结论 (Conclusion)

Your best asset is your time, the time doesn’t come back and the more time you save with this is the better for everything. Save more time with the tools to solve problems that doesn’t deserve so much of your effort.

您的最佳资产是您的时间，时间不会回来，您节省的时间越多，对所有事情都越好。使用这些工具可以节省更多时间来解决您不需付出太多努力的问题。