DEV Community: Eng.Bahaa Salha

Top 10 Essential VS Code Extensions

Eng.Bahaa Salha — Wed, 08 Feb 2023 15:17:46 +0000

A list of essential Visual Studio Code extensions to help you become a more efficient web developer.

If your code editor is Visual Studio Code, this is the article for you. VS Code is awesome by itself, but you can take advantage of its extensive list of extensions to support your workflow.

If you haven’t yet, download VS Code for free. Within VS Code you can browse and install extensions by clicking on the Extensions icon in the Activity Bar on the left side of the editor, or by using the command Ctrl + Shift + X.

Here are my top 10 suggested VS Code extensions for Newbies (and the rest):

Live Server

A must-have for any developer creating webpages using HTML and CSS. Once installed all you have to do is open your project, look for the Go Live button on the status bar at the bottom, or use the command Alt+L Alt+O in order to launch a quick development live server so you can view your current project live on any browser.

2.Live Share

In these times of COVID quarantines, this extension can help you collaborate in real-time with others working on the same project. Edit and debug with your team from the comfort of your home. Everyone gets their own cursor and you can see the changes as they type.

3.Prettier

Stop wasting time formatting your code and let this tool do it for you. It enforces a consistent style by formatting your code every time you save a file (just make sure you manage the settings correctly, as shown below).

Alternative:Beautify

4.Rainbow Brackets

Visual help for those programmers that need to worry about closures, like javascript programmers. It does this by providing different colors for round brackets, square brackets, and squiggly brackets.

5.Peacock

Useful for when you have more than one code editor window open at the same time, as it changes the color of your workspace. Another visual aid, this time designed to help you identify your different code editor windows/projects more easily.

6.GitLens

If you know and work with git, you will want this extension. This customizable extension lets you better understand your code by easily allowing you to view when, why, and by whom the code was added/edited.

7.Code Spell Checker

This one does exactly what it says. It is a spell checker for your editor. It works with camelCase so no worries when naming variables in Javascript. Basically, you will get a squiggly line underneath words you may have misspelled. You also get suggestions for what word you should write instead.
Supported languages are English(US) and English(UK), but you have add-on dictionaries for Dutch, Catalan, Czech, French, German, Russian, Spanish, Swedish, and Medical Terms.

8.REST Client

Do you know PostMan? Well, this tool is similar, only there is no need to leave your code editor. Once you prepare a request a Send Request link will appear above it. Click on it and view the response right in your editor’s window.

9.IntelliSense for CSS class names in HTML

You don’t need to remember all the CSS class names while you are working on your HTML file. This extension will provide you with a completion list for the HTML class attribute based on your workspace or external files referenced beforehand.

10.Visual Studio IntelliCode

This extension uses AI technology to help Python, TypeScript/JavaScript, and Java developers. As you code, it will show a recommended completion items list sorted by context, rather than alphabetically or by most recent.

There is no shame in using tools to help you. Quite the contrary, a smart developer is one that will use these to make their lives easier and become more efficient in the process!

If you liked what you read hit that ❤️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart.

MinIO - Mock S3 in local development

Eng.Bahaa Salha — Tue, 07 Feb 2023 14:39:34 +0000

Amazon S3 or Amazon Simple Storage Service is a service offered by Amazon Web Services that provides object storage through a web service interface. Amazon S3 is undoubtedly one of the popular storage services around. Most of the developers have worked with it either in their professional projects or pet projects to store files. But to work with it, we must need an AWS account, set up the buckets, etc. If you work on a company project, you would have to wait for the credentials from the infrastructure before developing and testing the functionalities. That's where MinIO comes to help.

Minio is an open source distributed object storage server written in Go, designed for Private Cloud infrastructure providing S3 storage functionality. As it implements the same API as amazon S3, any application which can communicate with S3, also can communicate with MinIO. In simple terms, it’s like Amazon S3 but hosted locally. MinIO is a high performance object storage solution that provides an Amazon Web Services S3-compatible API and supports all core S3 features.

Why we are talking about MinIO because you can create S3 storage functionality locally, develop and test your API without needing any actual S3 bucket or account. Later at production, you can just change the credential from MinIO to S3 without changing any internal code.

S3 can serve many purposes including replacing S3 in production but we will talk about from a developer perspective where we will only use it for development, testing and mocking S3 functionalities.

Architecture

MinIO has three major components.

MinIO Server: MinIO Server serves as the root component.
MinIO Client: Referred to as mc provides a modern alternative to UNIX commands like ls, cat, cp, mirror, diff, find etc.
MinIO Client SDK: MinIO Client SDK provides an API to access any Amazon S3 compatible object storage server. These are the available SDK:

Java
Go
Python
JavaScript
.NET
Haskell

In this article, we will learn how to setup a MinIO server in our localhost (which ideally can be replaced with S3 server in production). But we will not use the MinIo client. Rather we will use the existing amazon S3 client SDK.

Installation & Setup

We will now start the installation of the MinIO Server. The best and fastest way to run a instance of MinIO server locally is to use Docker (read more about Docker). You can use either Docker Run or Docker Composer.

Docker Run

`mkdir -p ~/minio/data

docker run \
-p 9000:9000 \
-p 9090:9090 \
--name minio \
-v ~/minio/data:/data \
-e "MINIO_ROOT_USER=root" \
-e "MINIO_ROOT_PASSWORD=password" \
quay.io/minio/minio server /data --console-address ":9090"`
mkdir creates a new local directory at ~/minio/data in your home directory.
docker run starts the MinIO container.
-p binds a local port to a container port.
-name creates a name for the container.
-v sets a file path as a persistent volume location for the container to use. When MinIO writes data to /data, that data mirrors to the local path ~/minio/data, allowing it to persist between container restarts. You can replace ~/minio/data with another local file location to which the user has read, write, and delete access.
-e sets the environment variables MINIO_ROOT_USER and MINIO_ROOT_PASSWORD, respectively. These set the root user credentials. Change the example values to use for your container.
Finally, access the MinIO Console by going to a browser and visiting http://127.0.0.1:9000.

Docker Compose

version: '3' services: minio: image: 'minio/minio:latest' ports: - '${FORWARD_MINIO_PORT:-9000}:9000' - '${FORWARD_MINIO_CONSOLE_PORT:-9090}:9090' environment: MINIO_ROOT_USER: 'root' MINIO_ROOT_PASSWORD: 'password' volumes: - 'minio:/data/minio' command: minio server /data/minio --console-address ":9090" volumes: minio: driver: local
You can access the MinIO Console at http://127.0.0.1:9000.
Credentials:
`Username: Q3AM3UQ867SPQQA43P2F

Password: zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG`