DEV Community: Bhavya Singh

Who wins the fight between Figma and Adobe XD?

Bhavya Singh — Sat, 05 Dec 2020 15:16:11 +0000

Comparing two popular design tools.

TL;DR provided at the bottom!

Comparison

The criteria for comparison will be as follows:

Performance

I had to make an edit regarding this point — as I feared, the performance lag I experienced on Adobe XD was due to my operating system. I have changed the verdict to reflect that.

**Winner — Tied. **Both Figma and Adobe XD are super fast. Not really sure if I can speak for the larger audience since everyone’s machines are a little different.

Collaboration

How easy is collaboration ?— between designers, developers, or any other stakeholders.

Figma offers true real-time collaboration, similar to Google Docs. You can share a link with anyone involved in the project and work on it at the same time. This link would give you a full or partial control of your project based on permissions. This allows designers, developers, and other stakeholders to come in and check the status of design, get specs, or even co-design.
Adobe XD does not currently offer real-time collaboration. This means that collaboration is limited. You must save, then hand your file off to someone else for them to be able to work on it. You can share specs and prototype links, but must update them every time you make changes.

Winner: Figma. Figma offers real-time collaboration. Adobe XD has promised this feature since November 2016, but still no news yet. This feature makes working with other people easy peasy lemon squeezy. It sure saves a lot of time as well. Other collaborative features such as specs and design libraries will be discussed later.

Hand-off

How easy is it to send your design to developers, answer any questions that they have, and have that beautiful hassle-free hand-off?

These two programs essentially offer same features — you can extract colors, character styles, assets, spacing, look at the flow of design, etc. I’ll talk about the differences.

Figma has the specs embedded within the file. This means one less link shared, and is also updated in real time. It also offers different types of specs such as web, iOS, and Android.
Adobe XD has separate spec sheets, which you can publish as a link for other to access. You must re-publish this spec sheet every time you make an edit to your design.

Winner — Figma. Like I mentioned above, they offer pretty much the same features. Figma, however, offers better usability and collaboration in team settings. There are no more “hey-is-this-spec-sheet-up-to-date?” conversations. You just send a link, and don’t have to worry about it . These are my preferences, and yours may differ.

You can find out more about hand-off for Figma here, and XD here.

Design Features

Now time for the meat of the discussion. Figma vs. XD for their designing capabilities.

Basic Functionalities/ Overview

Both have the basic editing functionalities that most design tools have. You can make shapes, set constraints, put a drop shadow, edit text, etc. If I go feature by feature it’ll take too long so you’re just going to have to trust me on this one.

Figma, simply put, has better and more functionalities than Adobe XD. Take its vector tools for example, which can be shown above. You can make rectangles, lines, arrows, polygon, etc. This also extends to text options, layer effects (which XD does not have), image tools, etc. The list goes on and on and on about what Figma has, and what XD is missing.
Adobe XD, as you probably guessed from the previous point, lacks a lot of what Figma has. It will, however, get the job done (at least for me). You can design screens, make buttons, make form elements, etc.

**Winner — Figma. **This is pretty much a no-brainer once you start using Figma after experimenting with Adobe XD / move to Adobe XD after using Figma. There are various quality of life improvements that Figma has, that Adobe XD lacks.

Constraints

Constraints can be used on responsive screens. It saves a lot of time for designers. Once again, Figma and Adobe XD offer pretty similar features. On both, you can constrain your element to left/right/both, and top/bottom/both.

Figma offers one more option — scale. This option allows you to fix the object’s size and position as a percentage. So when you have an element that takes up 70% of a screen, it’ll keep that percentage when you change the size.
Adobe XD offers an “Auto” option. It automatically predicts what kind of constraints you’re going to apply, and applies it for you. This can be a time saver.

Winner — Tied. This specific feature is equally powerful on both programs. I will, however, mention that Figma’s constraint features are better integrated with other features, such as its concept of ‘Frames’ and components. So if you take the overall workflow, Figma is the winner.

Symbols/ Components

Symbols are what makes your design WAY faster. They’re essentially UI elements that can be reused across designs. It helps your design stay consistent and streamlines the design process.

Figma introduces a concept called ‘components’. These are similar to symbols, but with much more flexibility. You can make ‘instances’ of these components, make edits to its colours, text, etc, and still be linked to the original components. This concept makes it really easy to design responsive websites, re-use UI elements, etc. You can sync your symbols to your team library or your own to be able to use them across teams and projects.

Adobe XD uses components. It lacks the flexibility that Figma has. When you make a symbol, you cannot make any changes to it. So if the size of your ‘instance’ symbol changes, the master symbol changes as well. You can, however, change the text or image within the symbol if desired. You can copy and paste symbols from one project to another, and they will stay synced.

Winner — Figma. While Adobe XD will do the job for some people, not for me. It’s simply too constraining. Every time I want to use a symbol and change its size, it changes ALL instances of that symbol. So if I have a symbol used on a mobile screen, and increase the size of it to fit on my desktop screen, the symbol on the mobile will increase in size as well. So I would then have to unlink the symbol to prevent this from happening, which adds extra work.

Asset Management

In this section, I will be talking about how assets are managed — so things such as colours, text styles, symbols, etc. In both programs, you can add them to the assets panel to be reused within the project. So no more keeping tab of all the colours you’re using, text styles, and symbols. You can also upload all these things to the cloud to be synced across your files. You can also add them to the file that you are working on.

Figma allows these assets to be synced across your files, and also with your team. This is a real time saver. Want the new project to have the same colours, text, or symbols? Easy peasy lemon squeezy. All the assets are synced real time as well.
Adobe XD allows these assets to be used on a single project, or use the assets from your Adobe Creative Cloud library. You can add colors and text styles to your local (the file you are working on) library. You can use symbols across different projects by copy and pasting. You cannot, however, sync it to your CC library. The same goes for colours and text styles. You can use them, but cannot sync it up to your CC library to be used from XD.

**Winner — Figma. **Sure, both have asset management, but Figma is superior. One of the biggest thing that bugs me about Adobe XD is that there is no way yet to add assets to your CC library. You can only add assets from Photoshop, Illustrator, or InDesign. This is a total deal breaker since I don’t have those programs — thus I can’t use the asset library is useless.

Plugins

Plugins allow you to add more functionalities to the program. They are normally developed by third parties.

Figma does offer plugins and integrations with programs such as Principle, Zeplin, and Dribble. You can also use Figma’s API to do other fun stuff.
Adobe XD does offer plugins and is rapidly growing. You can download plugins that will fill your designs with dummy data, export as React component, translate artboards, etc. The possibilities are pretty much endless and I can see this being a big selling point for Adobe XD in the future.

**Winner — Tied **Both support plugins.

Prototyping

Once again, prototyping is pretty similar on both Figma and Adobe XD. Both use hot spots and connections to create prototypes. This means that the workflow of exporting assets then creating hot spots on InVision is old news. It also helps whoever is looking at the design figure out the workflow of your design without clarification.

Some of the things you can do on both are:

Tap (click), use overlays, and use timing to move between screens
Use animations
Copy an object/ symbol and keep its linkage to another screen
Add scrolling

Figma, once again, offers much more variety in terms of traditional prototyping than Adobe XD. Some of the things that Figma offers that Adobe XD doesn’t include: hover trigger, horizontal scrolling, link to URL, and more.
Adobe XD has two features that Figma does not have. It has auto-animate, which basically prototypes your screens for you and voice. You can also record your own prototypes as well.

Winner — Figma. I would almost say that this is a tie, but here is my rationale. XD boasts auto animate and voice for its powerful prototyping feature. Auto-animate can be simulated on Figma using the prototyping options that are available, although admittedly it’ll definitely take more time. For voice prototyping — I’m not going to be making a prototype that requires voice commands anytime soon. On the other hand, XD lacks the function to use hover as a trigger. This is a deal breaker for me.

If you are in that niche where you need to use voice for your prototyping, or don’t need to use the hover feature, XD might be it for you. If you don’t fit in these categories, Figma will be worth your while.

Results

Figma is the overall winner

In conclusion, Figma won. You should, however, try both out to see which one is better for your use cases. I hope this article helped you decide on which design tool is better for you.

Hand-off: Figma/Adobe XD
Basic Functionalities/ Overview: Figma
Constraints: Figma/Adobe XD
Symbols/ Components: Figma/Adobe XD
Plugins: Adobe XD
Prototyping: Figma/Adobe XD

6 awesome CSS frameworks, which you should know as a front-end developer

Bhavya Singh — Sat, 05 Dec 2020 15:09:11 +0000

When building the UI, we need a consistent and effective CSS, which can be a hard challenge to achieve. And that’s the reason why many front-end developers are looking for a solution in one of the popular CSS frameworks, like Bootstrap.

CSS frameworks allow us to build a beautiful front-end, and besides the nice colors and tables, most of them also came with responsive design, which makes our work more comfortable, because we don’t have to create another CSS code for mobile versions, everything is already there.

While coming to a selection of a CSS framework suitable to the certain project we have to take into consideration a few aspects like:

performance, because nobody wants to get a slow application,
ease of usage, because other developers shouldn’t have issues with using it,
icons, because we want to avoid using another library just for icons,
components and features, we want the framework to provide solutions for as much layout elements as possible,
Sass or Less, because we may want to use one of them,
responsiveness, because we want to avoid writing additional code,
design, because it would be good to look pretty.

In this article, I’d like to make this choice a little easier, and that’s why I’m going to go through the six CSS frameworks, known and less known, and present their pros and cons.

1. Bootstrap

Bootstrap is one of the most popular CSS frameworks among developers; it was created by Twitter. Bootstrap was the first one who started to promote the mobile-first idea. Today, everything you have to do to achieve a mobile view of your website or application, you have to add certain Bootstrap classes, and that’s all.

A big advantage of the Bootstrap frameworks, and possibly one of the success and significant popularity factors is easy to use and learn. Bootstrap is very beginner-friendly; every component and feature is created in a way to make it clear and understandable even for developers on every level.

It probably results from the great documentation which Bootstrap has. Everything is simple with code examples, the description, and visual representation of the effect.

There is a lot of resources to learn Bootstrap, even whole courses of building the projects using this framework. Also, there are a lot of examples of ready layouts that you can check whenever you need it.
Another point worth to mention about Bootstrap is that since 2011, when it was introduced, it’s still supported and updated. Not so far ago, the new 4.0 version was released with such improvements like flexbox, Sass and Less support, or new responsive classes.

Sometimes if we use too many classes, it can get messy and complicated. Also, we may have a feeling that a lot of websites based on Bootstrap, without any visual changes, looks the same, and it’s hard to make it different.

With the larger amount of pros over the cons, Bootstrap may be considered as one of the best choices when looking for a stable CSS framework.

2. Semantic UI

Semantic UI is another competitor, among other CSS frameworks. It grew with the unique approach they have, focusing on human-friendly HTML, and exactly that’s the feeling I got using Semantic UI.

The human-friendly HTML approach made Semantic UI an easy to learn framework which is easily accessible even for beginners. While using Semantic UI, the image has simple the „ui image” class, and if you want to change the size, nothing complicated. It’s enough to add a „small” class.

The design and amount of available components make Semantic UI a serious competitor to other frameworks. The design allows us to build a pretty UI or website without many changes, but it’s still not an outstanding effect.

Semantic UI also supports responsive design, and it makes it good. Also, the documentation is pretty details and easy to understand. Although there aren’t a lot of courses about using Semantic UI, I don’t think they are necessary.

Coming as easy to use and rich in different components, Semantic UI is another good solution to take into consideration while selecting CSS frameworks.

3. Foundation

Mentioning Bootstrap, it would be a serious mistake not to say a word about Foundation. The website of the Foundation frameworks says that it’s „the most advanced responsive front-end framework in the world”. To fulfill this motto, Foundation comes with responsiveness, accessibility, mobile-first approach, and it’s also readable and customizable.

Calling themself more professional frameworks, creators decided to provide courses and tutorials about Foundation usage, which is a great deal for the users. Also, it’s possible to get certification.

The documentation of the Foundation framework is pretty good, so nobody should get lost in it.
What’s even more awesome, Foundation prepared documentation for creating email templates and websites separately.

Foundation is a huge set of tools that allows us to solve a lot of UI tasks, and it’s also optimized for emails and apps. What developers can really appreciate is that Foundation comes with CLI, so it’s easy to use it with module bundlers.

The design is also pretty nice and allows us to create a really good looking UI.

For junior developers, Foundation may seem a little bit overwhelming; it provides a strong possibility of customization and controlling the frameworks.

I personally think that Foundation is a great framework if you know what you want to achieve, and you need a proper tool.

4. Bulma

Bulma is a pretty new, open-source CSS framework, and what differs it from the ones mentioned above that it’s pure CSS. Bulma doesn’t require using Javascript at all.

Bulma gained popularity while the 4th version of Bootstrap was developed, and programmers started to love it. Maybe because of simplicity or maybe because it’s very elegant and gives very beautiful results. It becomes more popular then Foundation in a short period.

The main points Bulma takes care about is responsiveness, and here Bulma is not worse than other frameworks, it also follows the rule mobile-first.

Another great thing in Bulma is its modularity, which allows us to import only the necessary parts, and save some space.

As Bootstrap, Bulma is based on flexbox and building a grid is one of the simplest I’ve ever seen. Really!

Bulma has the support of a small but very passionate community, which makes me think that this framework is going to grow much more.

5. Tailwind CSS

Tailwind CSS is a little bit different than other frameworks, because it doesn’t focus so much on delivering ready to use components, but it’s more about utility classes, which help developers to build what they need. It’s more like giving ready building blocks for components.

Sometimes it may look ugly while we add too many classes, but the goal is reached.
Although it’s not a primary goal of the Tailwind CSS framework, the elements have a pretty beautiful design.

Also, like all of the presented CSS frameworks, Tailwind CSS is fully responsive.

In my opinion, it’s a great framework for developers who don’t want to have an imposed design, and who likes to have a wide possibility of customization. Although it’s a less known framework, it has a big potential to grow.

6. UIkit

The last CSS framework on my list is UIkit. The website of the framework says it’s a lightweight and modular framework, also going a little bit deeper I was able to take a look at a clean and modern design, which makes the framework a solid competitor.

The big advantage of the framework, besides its design, of course, is a wide variety of components, which may help us build even more advanced UIs.

Also, like every other framework on the list, it’s fully responsive, and it contains a set of icons possible to use in our UIs. Besides that, it also supports Less and Sass.

Documentation of the framework is short, but it gives all the needed information easily and straightforwardly, so even beginners can work with this framework.

I personally, really like the clean, modern, and kind of spacious design, and I would definitely try this framework in any of my future projects.

Conclusion

There are many different CSS frameworks, but in most cases, they provide us similar functionality but in different ways and with a different design. As a developer, we have to take into consideration some more factors than just the visual aspect while selecting the framework. Still, I believe that everyone can find a suitable solution for a particular project.

Writing this article, I found out about some frameworks, which I didn’t know before, and I can’t wait to try them. Some of them caught me with simplicity, and some of them present such a lovely design, that really makes me want to try it.

I hope you will find this listing useful while selecting a CSS framework for the next project. If I didn’t mention something that’s caught your eye, let me know in comments and share with us your opinion about the CSS frameworks you like and use a lot.

Thank you for reading,

Bhavya

The 25 Best VS Code Extensions

Bhavya Singh — Sat, 05 Dec 2020 14:20:52 +0000

Make your life easier and more productive with these

Having a good text editor is important for your efficiency, your learning curve, and your time management.

Why VSCode?

VSCode is probably the number one code editor as of today. I love it.

I think the reason it’s become so popular is simply that VSCode provides every developer’s wants, including features that they didn’t even know they needed. That’s the secret charm of VSCode — it never fails to surprise you.

I believe that one of the best ways to get to a person’s heart is by helping them to realize what they need before they even know they need it. This is one of the powerful drives in marketing, actually, and VSCode did a very good job.

Most VSCode lovers are JavaScript developers — VSCode was created for modern technology. Today, popular JavaScript frameworks are perfect for VSCode — it has everything you need.

When it comes to choosing a text editor, always go for the latest and greatest. Technology is changing rapidly and you don’t want to fall behind. Time should always be on your side to become a great developer.

I don’t mean you should jump from one language to another, or one framework to another — that’s crazy. What I’m saying, and have been saying in my previous blogs, is to stay updated, stay sharp, know the latest, and compare them to what you have been currently using, know the difference, pros and cons and watch the support and its community growth, because stability is also important. You’ll be surprised how much your productivity could skyrocket!

VSCode has a huge open-source community. Its growth and potential are limitless, and in the future learning how to code and coding itself will be easier.

1. Auto-Close Tag

Having this extension is a must. Coding is hard and crazy enough, without having to deal with finding errors just because of a missing close tag,

You can thank me later!

What it does is automatically add the closing bracket of the opening tag you just added and then position the mouse cursor between the tags. Cool, right?
Auto Close Tag

2. Visual Code Integrated Terminal

Having your command/terminal inside your VSCode Editor won’t just make your life easier, it will save space. Thanks to VSCode, having your terminal comes in handy.
Integrated Terminal in Visual Studio Code

3. Bracket Pair Colorizer

Brackets are a pain for most developers, especially when working with huge projects. It’s even worse when you have spaghetti code. Trust me, bracket pair colorizer will save you all the stress.

With tons of nested long codes, especially in working with Javascript, it’s almost impossible to determine which brackets matches up with each other. Using bracket pair helps you find the opening and closing more easily. The fact that they’re colored makes your code more readable. Download this!

And yes, you’re welcome!
Bracket Pair Colorizer

4. ESLint/TSLint

The main function of this extension is to auto-format codes for consistent formatting across your team. ESLint can also be configured to auto-format your code, and whenever you make an error it will scream at you with a bunch of warnings.

It has millions of downloads for a reason.
ESLint

5. Code Spell Checker

If you are non-native English speaker like me and English is not your first language, and maybe not even your second, then Code Spell Checker is very helpful for keeping your code free of typos and errors. And nobody’s perfect, whether you’re fluent in English or not, typos are inevitable — you don’t want to spend time finding them, especially if you have spaghetti code.
Code Spell Checker

6. Settings Sync

If you use multiple machines, as I do, you’ll find this extension useful. Settings sync keeps all your computers/laptops synced in terms of how your visual studio is set up.

If you’re a developer who works on both an office and home computer you’ll basically you will be working on a different workstation. It’s time-consuming to change your settings manually on both because, to be honest, we will need to change our settings from time to time depending on the projects we are doing, so to reduce the stress of programming, I recommend that you use this extension so that all the changes you make are automatically synced on all your machines and workstations.
Settings Sync

7. Prettier

Earlier, I listed ESLint, which helps you with auto-formatting for consistent code and shows several warnings and errors.

As a React/Native Developer, keeping my code clean and properly aligned is a must — it’s non-negotiable. Having it properly indented and separated for better code reading is a priority, especially when dealing with long written code — separations with styles and functions and handlers are critical, not just for you but for your colleagues to read and work on.

This is super easy to set up, it will automatically format on its own the moment you hit save.
prettier/prettier-vscode

8. Material Icon Theme

This extension gives you pretty, cute icons for your file list. If the file is a JavaScript then it will include a JavaScript icon in the material style beside the file name. If you’re more of a visual developer then this extension is for you. It’s widely used by millions of users.
Material Icon Theme

9. Path Intellisense

This extension is one of those I can’t live without. Trust me, it will save you so much time. I’m forgetful and working as a front-end developer with numerous components, extensions, packages, especially with React formatting, I need something that will help me with the file paths. Working with large projects is crazy and path Intellisense is your best friend for this. As you try and type a path in quotations, Intellisense will automatically fill or show suggestions for you.

Path Intellisense can also help with auto-completion for all your hidden files.
Path Intellisense

10. Browser Preview

This extension is a must for front-end Developers. Instead of opening another window for your Chrome to see the changes you’ve made in your code, download this browser preview so you can work it all out within your VSCod. This shows you the browser preview of your code, so no more having to tab to your browser to see even small changes. It helps you save time and space.
Browser Preview

11. Debugger for Chrome

This is my favorite and most used VSCode extension. As a front-end web and mobile developer, Debugger for Chrome has helped me a lot. Especially for JavaScript developers, it will save you a lot of time in making small changes. It is most helpful with debugging — it helps you resolve and catch bugs very quickly.

The console is powerful when it comes to finding which lines and functions do the error came from, up to seeing its data handling.
Debugger for Chrome

12. Javascript (ES6) Code Snippets

This is your new best friend if you’re a JavaScript developer. Regardless of what JavaScript framework you use, this extension will help you. If you’re typing the same generic codes over and over, I would say it’s not very efficient.

This handy code snippet is a light-weight library extension, it binds any standard JavaScript calls, so just by typing shortcut code you can see the entire generic codes automatically printed to your editor. This extension comes with pre-built support not just for Javascript ES6 but also to Typescript, Reactjs, Vue, and HTML.
JavaScript (ES6) code snippets

13. Live Server

In using Live Server, this vscode extension will help you open a live web server of your current project. Usually, when using a builder like Webpack, that normally does the job, but this extension has proven itself to be more useful. You can just right-click and run open with live server and it will do the rest.
Live Server

14. Quokka

Quokka is called the modern-day scratchpad for JavaScript developers. It’s built to help every developer when it comes to code checking. It’s a perfect solution.

It’s very lightweight, productive and powerful compared to other VSCode extensions. It will boost your workflow, it’s real-time and will give you feedback right away.

What it does is utilize a fixed color type for each result, so developers can easily understand the execution of the flow.
Quokka.js

15. Live Share

Live share is one of the most advanced features in VSCode text editor. It’s perfect when working with team members. One of its functions is to allow every developer to share code snippets with other developers in real-time.

This is perfect and helps team collaborations become much more efficient and productive. Live Share allows the instant sharing of current projects even when debugging — how cool is that!

Collaborators don’t have to install any repositories, SDKs, or anything to connect with other developer’s current code. Everyone on the team can collaborate sessions to explore and fix things remotely.
Live Share

16. Github Extension

If your team is using Github, or you are using Github for your project repositories or want to use other developer’s source code repositories, then this extension is for you.

Github, by the way, is now owned and managed by Microsoft for those who don’t know, so Github and VSCode are now part of Microsoft’s products.

With using Github Extension, you can now easily connect other developer’s repository, your favorite developer’s repositories and even your own. You can easily pull and push — very handful if you use Github regularly.
GitHub

17. GitLens

Gitlens is another great extension. It supercharges the current VSCode Git functionalities with the ability to perform side by side code comparison from your previous commits and changes, together with other cool features.
GitLens — Git supercharged

18. NPM

Every modern developer already knows what NPM is and why it’s important. The Node Package Manager is an extension that helps you manage your package.json file. It gives you warnings if there are dependencies required that haven’t been installed yet, as well as your NPM package’s version control.

Most of the bugs and errors that I’ve been working on comes from using NPM packages, functions and features that won’t work because of its incompatibility with other packages. I swear, not having the dependencies it requires not having the compatible versions is stressful!

This VSCode extension is a must:
npm

19. Beautify

Beautify is another great extension for code formatting, almost the same as the one I mentioned earlier, Prettier. It now has almost 12 million downloads, so there’s nothing more to say here for you to be convinced of why this extension is so useful.

It formats codes that are written in Javascript, JSON, Sass, CSS, and HTML.
Beautify

20. Live Sass Compiler

If you’re a fan of Sass for styling, or just using Sass because it’s part of the project application requirement, then this VSCode extension is for you!

It compiles your SASS/SCSS files into CSS files in real-time and automatically gives you a live preview of the app or the compiled styles in your browser.
Live Sass Compiler

21. Emmet

I’ve been using Emmet since I started using VSCode. It helps every developer improve your speed when it comes to writing your codes. Use this extension and soon you won’t be able to imagine coding without it.

True story:
Mithril Emmet

Here’s a bonus: Emmet Documentation Cheatsheet:
Cheat Sheet

22. VSCode Icons

This one’s for our front-end developers. This is similar to the one I mentioned earlier, material icons, but with different designs. As a front-end developer, we love to see things right? so this icon will help you see the kind of files you have and whether they’re HTML, CSS, Javascript, etc.
vscode-icons

23. Color Picker

The color picker extension helps you to easily select colors within your CSS files. It will immediately be reflected or apply to the property that you are currently working on. It’s also available if you preferred to use RGBA colors.
Color Picker

24. ES7, React, Redux & GraphQL Snippets

This is for advanced developers who are now working with JavaScript frameworks such as React, along with the other technologies compatible with its production and complex applications.

Typing standard codes over and over is inefficient. With the help of this snippet you can easily create class-based components, functional components, imports, lifecycle methods and many more by just typing shortcut codes, this is one of my most used extensions since I’ve been working with Reactjs and React Native.
ES7 React/Redux/GraphQL/React-Native snippets

25. REST Client

Another advanced tool, the Rest Client extension helps you if you are working with other third-party tool and APIs. It’s useful if you need to be able to make an HTTP request easily.

This extension allows you to easily call and endpoint directly inside your code editor. It saves time —yuo can use this instead of going back and forth to your browser, or postman just to make a request.
REST Client

Thank you all for reading!