DEV Community: ngouend gerard

What parts of security brings CORS In a Project

ngouend gerard — Fri, 15 Aug 2025 15:49:01 +0000

Most tech developers that builds a full stack application for their first time likely encounter the unusual and famous issue : cors policy.

This raw issue subsequently break the app, stop any API call, blank your UI Space under the browser.

Unlikely to a simple reference error , this one doesn't explicitly point to any area in particular to focus on while trying to come out with the solution.

There is just one way left:

To find online which cause(s) are symptomatic of the problem you are facing. And then come back for specific area in your program to get a fix.

Generally, walking through that process, we experience a point where the meaning of the problem is enough comprehensible to us. But we still get lost on where to start our troubleshooting.

And from a click, this error become a frustrating and overwhelming one.

The pain is delivering, start cost unbearable. At this time, bewildered, we often ask ourself : "why the internet has to bring up this type of policy ?"

To give clues how CORS work under the hood, this article, intend to navigate the readers through what it actually Complains about. The essential purpose behind it, the exact description of kind of Errors that could be delivered.

And also while using browsers dev tools page can increase the chance to spot the solution in a minimal amount of times, saving us times and a lost of stress that cling when trying to resolve the issue.

Overview

Web is flooded with devices and software applications.

These one quietly exchange information on almost different levels at all time.

For that case a proper security need to be set in place for data to move from one place to another.

Particularly In computing network , one of the best way to represent a communication is using the OSI Model approach.

This network model of communication contains 07 layers of operation: application, presentation, session, transport, network, data link, physical.

The application layer is where cors errors happen, it is the higher top layer in the model that connect directly with the browser.

To be brief and simple, a very specific cause of the error is a non-conform request coming from a client-side(browser, AI agent, proxy, ...) in destination of a new host's computer, a server by the means of HTTP request method such as : GET, POST, DELETE, and so on.

The diagram above describes how XMLHttpRequest Object make such a request, to pull or send data in or out a server.

XMLHttpRequest Object mechanism to fetch data, is an older one than fetch api or axios, but still, remains good when it comes to present how information flows from one place to another during a particular request. Just look the diagram and see how it goes.

As a matter of fact, in the way CORS technology was implemented. It wasn't from the necessity of simulating a typical request's error under the browser.

The main duty of CORS while being implemented for the first time was to bring a safe and secure transit of data between two different domains.

Since the same origin policy
a technology built before where not allowing request from two different domains.
(policy that protects sensitive data to not being compromise from malicious script coming from the DOM at a communication transmission between two different domains : http to https for e.g)

To address these limitations, the famous big Brother CORS was implemented to make communication soft and reliable while one resource try to access another resource remotely. By definition, CORS, stand for Cross Origin Resources Sharing.

It helps to match the need of modern website where large an sophisticated data laying remotely is needed to be brought to our UI website.

In fact, if it wasn't for CORS. There will be no secure connection between your local machine and any server.

HTTP Errors

HTTP Errors sometimes cause CORS issue. Specifically to understand why. We need to make a differentiation between the two HTTP request that exist :
- simple request
- non simple request

That sounds obvious. But we need to lean a little bit on how the both operates.

Simple request

In general HTTP's request involves a lot of parameters' settings before an actual request is made. No matter how, there are often three to four parameters we constantly need to operate on change: The URL, headers, body , methods.

There are others existing flags. But these four are the one most use to raise a request.

Focusing on the Method parameter we have method which do not involve manipulating/updating data like : GET, POST those belong to Simple Request.

On the other hand there is a parameter, named Content-Type that has the power to affect the kind of request we are launching. In the case where this parameter is set to one of the three following . We rest assure we are making a simple one :

application/x-www-form-urlencoded,
multipart/form-data
text/plain

If not, obviously it changes to a Non-simple-Request.

The fetch api example below is a prototype of how this simple request is structured, in the javascript's front-end code :

// product-api.js (example)

fetch( 'http://localhost:5000/api/data',
  methods: 'GET', 
  headers: {
    ... // bunch of others properties
    'Content-Type': 'application/x-www-form-urlencoded' 
  },
 body :new URLSearchParams({
         key1: 'value1',
         key2: 'value2'
       }).toString()
 })

)

You can see over the lines before, that 'Content-Type' when taking a value such 'application/x-www-form-urlencoded' ignite the body to have a particular raw object embedded. An Object are a core part of Javascript's concept. This syntax keep leave this request to being simple.

Non Simple request

Non Simple Request actually use method like PUT, DELETE where existing data is undoubtedly expose to change.

In Non-Simple-Request, depending on the browser. A CORS Preflight (a request's permission connection before the really one) request is sent to identify if the domain that is about to make the request has the right to access to door of the server.

In others hand simple request can switch rapidly to become a Non simple also . It all come first to the value of the Content-Type. If set to : application/json. Then we already have a non simple request. But guess what, if Content-Type have one of the previous value said in the section before. And also if our website involve accreditation by credentials there might be time where even under **GET* or POST request, the request translate to become a non-simple one.

We can see through this example below. Always using fetch :

// product-api.js 

const data = { product: 'example', image: 'image123' };

fetch('http://localhost:5000/api/data',
methods: 'GET', 
  headers: {
    ... // bunch of others properties
    'Content-Type': 'application/json'
  },
 body :JSON.stringify(data)

)

Here 'Content-Type' has taken the value of 'application/json'. Causing the request to become a non-simple one.

If we want to talk just about HTTPS errors , there are several of them that might occurs during a particular request. But the one that require most our attention are 5xx (server error) or 4xx (client error). These one are those capable of awakening a CORS' Issue. Going further we want us to remember that. But don't worry every CORS Errors identify itself inside the message error appearing under the console dev tools of our browser. Let just keep in the head that if this issue is a bouncing from HTTP errors we need to circumcise our research to servers' Http errors and clients' Http Errors.

CORS Errors

CORS as we know is fundamental for establishing communication between two domains. The mechanism is provide keep secure interconnection between devices of the same or different network. Dealing with CORS' issue will be daunting , if you don't have a proper way to go through the different step that may be their causes. In this section we will discuss the most common flagged errors by CORS, and how front-end and back-end of an application interpret data fetch or sent over a request when they occur. Setting quite enough possibility of moving around solutions to these issues. .

1.Reason: Cors Disabled

Most popular browsers disallows the use of the CORS functionality inside their default settings.

You may be skilled in one area but remember, not everyone is assertively a programmer ,and most user just need access to their favorite websites doing their things, without making request from HTTPS TO HTTPS. But now, as a growing developer you want to create what others do not see under the hood. Then you need to also tells your browser, i am developer.

For the case of mozilla firefox's browser, CORS is disabled by the content parameters under the set of a property called disable.

content.cors.disable = true

In the same way others browsers has their ways to shut down cors permanently. For mozilla for example if we change the disable property to the boolean false. It could maybe disengage the security of same origin policy. But the concern is how does it will going to affect others left parameters of the browser. Hypothetically It's for sure a risk that could create malfunction of the browser in some points. Because a browsers is a set of protocols, javascript's script, HTML page, CSS, and security network communication. There might be a lot to consider before roughly change the value of a parameters inside. Hopefully CORS on their inside possess parameters like headers where a good selection set of those, undeniably close a communication from two different domains. And one of this property is referred as Access-Control-Allow-Origin.

When you see error **CORS Disabled* that means the Access-Control-Allow-Origin is not well set.

That is how the scheme goes:

When you send a fetch request from you front-end javascript code. This request , get interpreted by the back-end and for our case , the browser before allowing the stream connection between the two remote domain will ask to CORS in the back, if the Domain in charge to sending the request has a permission to access data gathered under the server. And that is Access-Control-Allow-Origin's role.

An example of File's organization under the server side may look like underneath:

In the earlier used XMLHttpRequest's Object method fetch we have two ways of settings Access-Control-Allow-Origin permission

One : by granting access to any domain coming (using: *)

product.js 

Access-Control-Allow-Origin : * // on top before any syntax

Two : by allowing only one domain to communication

product.js 

Access-Control-Allow-Origin : https://example-B.com 

or

Access-Control-Allow-Origin : http://localhost:5000 // for  local machine

These configurations while working has brought to many others difficulty in times that went not seeing solutions after times even after setting this parameters to a right value.

In modern Javascript's API library for fetch request like axios or fetch. The process is much more easier and reliable than settings directly Access-Control-Allow-Origin under api endpoint files in the back-end. NPM dependency like cors running a safe program to configure cors ( for nodejs user at back-end environment) is a good bet to use. It just take little properties' name settings to the exact value via middleware's call.

An example of this with a framework like expressjs good to build routes for our server look like below :

express.js

const express = require('express')
const app = express()  
const router = app.router()   
const cors = require('cors'); 

app.use(cors()); middleware : // Enable CORS for all origins  

// or 

app.use(cors({origin: ['http://localhost:3000', 'https://your-frontend-domain.com'],
  optionsSuccessStatus: 200}))  // enabling only origins specified  

   // middleware config are made in express.js with **use** method : **app.use()**

2.Reason: CORS preflight channel did not succeed

We mentioned earlier in someway that browsers need to first know if a domain is allowed to start a conversation with a server before sending a specific request to that domain. It like a pilot which call the center's board regulation of an airport to ensure the pitch he is about to land is secure and empty.That is why CORS Preflight does in priority(aside request sent by the browser before the main request)

To better understand that preflight let's start by catching the difference between an URL, a domain , and an origin.

Here below. This is an URL

URL: https://www.tech-future.com/blog/articles?username=john doe&location=middleland

A domain will refer to all the web pages that forms the entire website (e.g : www.tech-future.com), such as :

An origin often called BASE_URL represent a protocol, a host and a port. It looks as following :

e.g : https://www.tech-future.com
(where exactly https://www.tech-future.com:443 represent the origin, the port which here is 443 is often hidden on website scripture under the browser)

another e.g :http://localhost: 3000

Every request made from the client side via a browser need to encapsulate the origin of requester. Both from the front-end and the back-end of an application.

The origin is automatically include in CORS' headers request when sending a request using any mechanism from xmlHttpRequest to axios in the front-end of your app. Their program's structure know how to catch origin from an url provided.

Therefore a good set to avoid preflight errors will be to grant access via Access-Control-Allow-Origin.

And we see it could be done like following :

Example :

app.use(cors({origin: ['http://localhost:3000', 'https://your-frontend-domain.com'],
  optionsSuccessStatus: 200}))

Simple and precise origin gathered in one array.

3.Reason: CORS request external redirect not allowed

This Error is a Triggered one that happen most the time when an URL has updates it domain either temporarily or permanently. This will be the case if the people in charge of the website are making huge update or working on some fix, bug, security or new release, and will not want to loose track with the people using their online services for their goods.

An example. If the page https://service.tld/fetchdata were requested, and the HTTP response is "301 Moved Permanently", "307 Temporary Redirect", or "308 Permanent Redirect" with a Location of https://anotherservice.net/getdata, the CORS request will fail in this manner.
Link: CORS request external redirect not allowed

To solve the problem Just reassign the targeted server domain using the new URL domain printed over the message error appearing in the console dev tools of your browser.

4.Reason: CORS request did not succeed

This error crying out loud. It is not in fact a failure of CORS.

Others part like the network connection, or plugin, or new extension can be the cause of that error.

In first place you need to check your internet connection. If there is no problem on that side. Try to relate if you recently installed a non-secure program or an extension, and try to disable these one, And try once again the request. If that doesn't help. There could be some issues hitting your network layer application. Try to look other process outside and online that could help you fix these network issues. But first of all be sure you have to deal with a really network issue not an internet connection one.

The link below will guide you to areas to further glance if having this error persists.

Link : CORS request did not succeed

5.Reason: Multiple CORS header 'Access-Control-Allow-Origin' not allowed

This error occurs when under a fetch process the cors' header parameter : Access-Control-Allow-Origin it set to multiple origins at the same time. Access-Control-Allow-Origin just allows one origin in case it is set differently than *(any origin).

product.js 

Access-Control-Allow-Origin : https://example-a.com  https://example-b.com // **forbidden**

If you are looking for configuring limited amount of origin to access the server. The easier way is to use dedicated program like cors npm package, that you can install and execute to hold in dedicated configurations you can take control over.

Example : The configuration discussed in the section:

2.Reason: CORS preflight channel did not succeed

Will work too. Solving the problem.

6.Reason: Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is '*'

Anytime you decide to open one of your favorite website or any new one that you get excited to use . Their are party that prompt you to login or register. Imagine we have this website we love right. It has a free version and a premium version. The access you are granted for free you can guess may not be like the one you are given in the premium stage. And this is exactly due to a set of credentials that are given from low access or a high access to a website. We can think of it like regular user vs admin user. When such a website is built, users generally access their data under a thorough control by the application of the credentials they have been granted.

That means, if you decide to set Access-control-Allow-Origin to a star : '*'. Then any domain could access any page of the website. Cors will definitely says to you : NO WAY!

Why ?

Because a star: '', allows all sort kind of resource an access, and this is a mess with the really purpose of credentials: secret password or secure authentication meeting over process like **JWT Token* or oauth authentication. The logic of the error shout out loud : you can't have credentials involved and in the meanwhile allow everyone to be in without exception. That It's absurd.

A way to fix that error is to leave Access-Control-Allow-Origin to set specific URLs for interaction and further implement thorough credentials match that not come back squeezing the communication (good Oauth or JWT implementation).

// configure cors to extend access to particular origins
app.use(cors({origin: ['http://localhost:3000', 'https://your-frontend-domain.com'],
optionsSuccessStatus: 200}))

7.Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Headers'

This error will hardly appears to you when using modern javascript technology like fetch or axios because they are specifically settings cors header property Access-Control-Allow-Headers under the hood.

This error specify that in response to the preflight sent by the browser** their is in Access-Control-Allow-Headers one or many header's names response that do not match the standard syntax expected to be. Therefore, are confusing the user-agent(browser) receiving this report in such a way that he doesn't really get the ability to interpreted those data.

8.Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Methods'

The same reason apply to Access-Control-Allow-Methods. The preflight send a response under a set of random methods names given in config under the back-end api endpoint of the app. The user-agent(browser in our case) try to interpret them, but fail. These method names could(e.g : GET, POST, OPTIONS) not well written or additional unknown methods of the browser in that property that kill the process.

9.Reason: Did not find method in CORS header 'Access-Control-Allow-Methods'

If you directly set Access-Control-Allow-Method in a back-end api endpoint of your app like the example underneath :

product.js

Access-Control-Allow-Methods : GET, POST

You can't suddenly decide to make an update request from your frontend javascript's code using PUT. The request will not succeed. Remember, you just set the tone of Methods to be used in the back-end and it doesn't seems like PUT serve the team. That is why, CORS complains.

Remarks: It's not required to set Access-Control-Allow-Methods, Access-Control-Allow-Headers in general. If you don't any fetch's mechanism( XMLHttpProperty, Fetch, Axios, ...) will know how to handle these properties under their process.

Just write clean code and don't try to overwhelm the server with unneeded configuration.

10.Reason: CORS request not HTTP

CORS requests may only use the HTTP or HTTPS URL scheme. In case different others kind of processed URL are used to mount these request. There will be compliance coming from CORS stating that HTTP Protocol in need for request it is not seen in the syntax mounted.

Always use http URL : e.g https://example-B.com or http://localhost:5000

Don't use file redirected Url : file:// ... to make a CORS request.

Conclusion

Cors Errors are painful and difficult to address. Then we need to shape unique ways to track those issues an gain times. The 10 different cors' errors related before may lack more refinement, but we put our effort to leave clues on how they relate practically, and where they will be the area to adjust the issues. This to ensure you build full stack-app based projects with one more layer success that decrease the time is cost you to bring the project to life. Moving forwards i would like anyone that have questions , or feedbacks, to leave their comments, all to evolve to a clear article that will get users to become much familiar with CORS!

You can join me on linkedin: https://www.linkedin.com/in/ngouend-gerard-5a0584244/

or twitter: https://x.com/nest_Ngoueni

Thanks You.

text-Editor VSCODE Without Mouse

ngouend gerard — Thu, 30 Jan 2025 18:47:07 +0000

Text Editors are primarily small programs intend to write , edit and save text quickly, without too much fancy formatting. These quick notebooks savior are generally built-in app most find in any digital devices . For example we basically have xed in linux, TextEdit in Mac, Notepad in windows OS computers. Others Advanced text Editors like EditPad Lite, Sublime Text, Vim, Notepad++, and so on can be found online, downloadable for free or paid. These are a lot to have in hands and we are going to look why is necessary to have a more powerful text editor.

coding

When referring to coding skill, we utilize text editor to compile syntax of any programming languages, test functionalities of an app, structure files and projects . All for the sake of cooking a good web app.

Time went where software engineers thought about increasing the capabilities of text editor beyond simple writing and savings options.

They mind of new text editors products capable of running online or local programs, getting a rich built-in settings for convenience writings , processing almost any programming languages, reducing bugs,and that could be quite adaptable to many operatings systems available out there.This diversified ecosystem, draw an environment, where possibility of the use of one plateform or interface can sustain an entire built process of an online product without relying on a panoply of external resources to embed constantly. These idea give birth later to what we commonly know as Integrated Development Environment or IDE . IDEs become the text editors product commonly use by coder, designer, and other web tech field. One of them is vscode, popular among this peer with his rich configurable panel settings. However that doesn’t mean it is only the good one. Presenting vscode in this article comes with the necessity to take over the power of advanced text editors during our work , doing most of the labour with minimal use of a mouse device, and then become good at automating tasks in any IDE environment. That is why using shortcut commands feature gave by vscode or others editors as well, will allow constency flow of our work with less distractions, with a result in fast production.

shortcut commands

Shortcut commands are keyboard’s keys combinations that trigger a certain behavior in a document or window while being entered.
Their main goal is to reduce as much as possible the congestion of using the Mouse device while browsing editing , finding file or content inside a window. This enormously help users stay focus on tasks they perform through the interface , avoiding a lot distractions, essentially from external materials they might want to access.
An example of shortcut command could be :

Ctrl + < in linux or windows
or ⌘< in mac

To directly open the setings parameters panel.

Ctrl + <

Over the next Level of our discussion , we will assume, all the times, excepts a contrary notification that any command beginning with Ctrl Button (linux, windows OS ) will be replaced by the similar one ⌘ in a mac OS .
We will also keep our cursor within a window editing area of vscode when composing the combination's shortcut commands keys. In order to have it working.

shortcuts commands on vscode IDE Interface can help us over :

1 - Navigation

2 - Displaying

3 - Editing

4 - Workspace

I - NAVIGATION

Vscode displays three majors area that certainly hook our interests most of the time , writing syntax of an app or testing code. These are :

•  1 The Repertory area
•  2 The Tab files area
•  3 The Editing area

Like seen in the image below.

3 areas

I-1 Repertory Area (Ctrl + 0 )

The shortcut command Ctrl + 0 give quick access to the Repertory area while editing . You switch from the ~ /editing area ~ to the ~ /repertory area ~ almost instantly , giving to multiples directory and files an access to be browsed, reviewed and re-structured in necessary case.
Under repertory area navigation from one file/directory to another is made using directional keyboard buttons. Files can be opened clicking on ENTER, and we can switch back once again to the editing area combining the same shortcut key's command.

I-2 Tab Files Area (Alt + 1 or 2 , 3, etc )

While having your vscode's window open , browses back and forth from one file to another of the same editing group area using the shortcut command :

Alt + 1 or 2 , 3, ...

Just name the right number before Alt and shift from your current file to the file located at that specific position. This quite for sure one will take your attention to how powerful you can take control over vscode.

Alt + 4

I-3 Editing Area (Ctrl+K Ctrl + ←)

Editings area are actually place you can write, edit, delete your syntax.

There are sitution where within a container block element, you want to reach other previous or next block's elements jumping quickly to their specific location under the file. The use of commands like :

Alt + ↓ or Alt + ↑ will make sure you jump back and forth faster over all your block lines of code.

Alt + PgUp or Alt + PgDn will allow you to scroll the page up and down to reach a certain block or section.

Ctrl+K Ctrl + ← or Ctrl+K Ctrl + → will help you navigate from two editor groups and right to the place wgere the editing cursor where left.

II- DISPLAYING

II-1 editings group alignment

For those who have been familiar a bit with CSS styling . Some of the time while building a web layout page we align box's content like text or image over the horizontal-axis , vertical-axis, depending on the size screen. The same parallel apply to vscode when displaying multiple opened editor groups in a ~ single window ~. You may decide to align them along the vertical or horizontal as your preferences.

The command :

Shift+Alt+0

will enable you to do so, as your convenience.

Shift+Alt+0

II-2 editings group zoom

If in revanche you want to emphasize the view over a file, shrinking, growing the editing area window to contrast text size or pull over more contents. You will be in need to go for commands :

Ctrl + or Ctrl – that allows zoom in or zoom out over a file.

II-3 editings group zen mode

Situation comes where at a certain point your file becomes strecth and looking inside editing area for large content becomes difficult. This is usually simply the right time to zoom over the whole screen to closely looks under stretch syntax and try to figure out solutions over spinning issues you continuously comes upon inside your code. Use the command :

Ctrl +K Z and open the file in Zen Mode.

Take attention performing this command , having K and Z spaced means hit the combination Ctrl + K first, release the ctrl button , and then click to Z.

Esc is the button to exit zen mode .

zen mode

III- EDITING

We all time to manipulate line(s), block or section elements while writing code syntax inside the Editing area.

III-1 Occurrence

Back when i was starting coding, i wasn't considering the necessity to use shortcut commands, that brought me into a lot of trouble spending too much of time on styling webpage with CSS , i was unable to put my hands on the sets of properties written that pull down my design not allowing new CSS changes to proceed and update the DOM (Document Object Model). It is just when i finally discover the following command that are really take control over my css classes. This will also allow you to check quickly any word by select all occurrences this one. Thw command is :

Ctrl + D

My name for this command is : ~ Control Diffusion. Thankfully, I was yet able to find any css class ( name) easily in a file, recording all the lines involves with a specific class name and inherit the power to look over all the properties applied to this class . My set of changes was now controllable and i could follow up finding what is keeping my progress, anytime i misuse properties in my code. The command is just tremendously helpful.

III-2 Formatting

One line

When always suppressing line or couples of lines. I notice there are extra spaces remaining that you do not want and you have to delete once again to have a good format with the left code. This take your focus away and divert you even if you just spend few seconds doing it. Trying to relate your mind again and agin after a deletion to what to do next before proceeding. The command :

Ctrl + L

Select one or multiples lines depending on how many times the combination giving you opportunity to delete line faster.

Multiple Lines

As incredible the command Ctrl + L is for deletion. We don’t want to miss attention and suppress part of lines we were not intended to remove. As Ctrl + L is a rough command for selecting multiple lines, created on purpose to select one line.
It will be good if we can look for a easier solution to wrap a block once. Yet we are used to select couple of lines , block, section relying under the old formula : cursor pointer put on the beginning block → scroll to the end of the block, place the mouse near the endpoint block and hit cmd : Shift + left-click to the mouse button.

This formula work well when the blocks doesn't extend out of the view content. But in case it does, we continuously have to scroll to meet the end, then the formula becomes insecure, despite all the attention, scrolling to reveal more contents can accidently lead to a mess , mixing up ending tag, and deleting content not included in the block. To avoid this silly situation, we must use the command :

Shift + Alt + → to give us control and selection over all blocks element under a block container.

The revert command :

Shift + Alt + ← will deselect all these blocks element to easy continue o mover over other conyents of our file.

Yeah It is just: Amazing !

Shift + Alt + →

III-3 Fold/Unfold Block

When lines of code become incredibly longer, focusing on specific blocks , sections, functions leaving all others syntax hidden can huge be of one help mostly while editing wide syntaxes over JavaScript, HTML, or CSS file.

There is one command that allow you to fold / unfold blocks of code :

Ctrl K + Ctrl L

Anytime you see yourself in a situation of a plurality of sections to looks over , think to grasp the earlier command, fold some section and capitalize the update of your file with the rest left open, repeat the process again and again until you finish your review.

Ctrl K + Ctrl L

IV – WorkSPace

This section is not about short command , but I felt the necessity to insert it under our building to help reorganize efficiently any of our work under VsCode .

Basically, all projects we open in VsCode are not for full working.
Some of them could are couples lines of code to test.
While others belongs to real projects we are developing. To make this gap clear enough while using vscode. We can create several workspace environments and group test code on one side and projects code on other side. These divisions keep vscode's windows organized over a same goal, and enable us to choose for the right workspace to work on, each time we open vscode.

Here Below is how simple you can create a Workspace Environment.

Click the file tab under the top first bar of vscode window.
You will then see bunch of tag’s elements.

Go For the option :

Save Workspace As …

Hit ENTER and fill :

The Environment Name >
Specify The location where you want to save the specific workspace environment.

Nice! You have a ready environment that you can open at any time, letting you focus on your tasks .

file

We can repeat :

click file tab
select : New Window , to start a new Vscode window. >

And register a new workspace environment.

By This way we keep structured control our similar projects in one window, setting boundaries to better work on every part of technology, projects, or programming languages we want to test on vscode.

Bonus

Clustered window :

many editor groups ,
panel command (integrated terminal) ,
repertory area,

All open at the same time .

Release some of the panels from vscode.

commands as :

Ctrl + B

Will be able to toggle and hide the repertory area with ease freeing some space.

Ctrl + shift + C

will quickly open the root directory of your app project in a new shell window , enabling you to run the project or install additional packages needed to it, out of vscode. This opportunity extend the editing area , if we close the integrated terminal in vscode

Notes

The list shortcut commands in vscode is exhaustive.
You might want to download official vscode’s sheet-sheet documentation available for linux, macOS, windows under the links below:

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Let’s have fast production on projects !

Getting Oneself around Hardware Skills

ngouend gerard — Tue, 21 Jan 2025 21:35:55 +0000

This is a submission for the 2025 New Year Writing challenge: Compiling 2025.

1 – ADAPTABILITY TO NEW MARKET TRENDS

Yeah! The change. Is Huge and obvious. Need is to get back to basis, to grasp technologies more in relation with hardware architecture systems, computing , and back-End Development. We talk about PHP, MYSQL, Data Structures & Algorithms, Linux, GIT, as soon as possible, to give a ticket to a future where we improve our web projects using AI. Time is moving on quickly, lately happens the release of AI Agent , barely 6 months after the trend of cloud computing website called SAAS (Software as a Service). Yet, That means everyone can build a website without learning a programming language barely right now. Just chatting with your AI agent about your project's intend with details and boom! You have a business website from scratch. Unfortunately, we are still realistic about tangible expectations training or using some of the tools based AI online, 06 months a least. That's why We lay our attention to work out first on how to interact with hardware most effectively for adaptability of our earlier software skills to new perspective. This podcast video Jobs of the future where hardware meet software from youtube with a16z showcase the reality of the moving markets skill now.

2 – A PITCH TO CONTENT CREATION UNRAVELED

To summarize some take-away lessons from Dan Koe in the youtube video : Learn This Skills if you want to thrive in the Next 10 Years. He underlines the fact that: he understood the need to get his message in front of people, and present arguments to promote his services, personal brand , social media , and display values , if he wanted to access real opportunities . And it quite sounds usual, it’s all about value, right. But the truth is, it all begin where people don’t like Marketing. You want a job, you have to prove that you are worth for the role, you want to become best at what you do , you have to teach like Feynman says in a way that even a kid may grasp what you are saying , it is connecting and it is all about marketing once again . While Learning other skills than software documenting our learning can serve like a base to teach new technologies or concept people are less talking about or even doing, such notions interests many people don’t know or have difficulties of interpretation could push us far than our merely expectations. Leading our self to help experienced people that didn’t grasp past all the particular use case of the subject back when they were focusing on it, or to shake new beginners interests to follow up our journey and leverage some skills that could enable their abilities to land jobs and experience quickly . Additionally It will also be a reminder of our experience, our commitments, and our achievements through years. Yes it is first frankly for our self and second quietly for others, and this make us connect in many ways with people we were not ever being to expect. Yeah, Holding a daily journal will stand as a quick-overview over times while helping reviewing our goals and plans. These two series videos express the great necessity of having a notebook journal and work with it :

A notebook to save you from mindless scrolling (introducing 3-part journal) by - Flourished Hope
Using a Notebook (This way) still beats Every Productivity App by – Bullet Journal

3 – THE OPPORTUNITY TO WORK WITH TEAM ON REAL PROJECT

Learning how to code was delightful, while also painful It makes me feel. One of the most exquisite character I genuinely enjoyed, was the welcoming sensation carried along my journey. Where a lot of caring people and platform were helping for free with highly recommended content. I have been accessing documentation like w3Schools, MdN web docs. Listening tutorials on community like freecodecamp. Having my code reviewed by others developers on frontendmentor. Reading good articles on dev-community, opened platform like StackOverflow, ask Ubuntu, and many , really many others to be added to this list but infinite, from personal blog website to video Tutorial , drawing my steps since. This is Love and Care ! And I thank all these teams, their dedicated work and to exactly make me feel at home, comfortable and understood without fear of my mistakes. This gratitude drives me thinking, “I have to do the same for others”. Isn’t It undoubtedly what we want to do? The same! For our parents, our tutors, our friends, our lovers and supporters, strangers that held our hand in the darkness past years and we can even reach out now , far from the place they lead us help and having any clue if they are still breathing or not. And Now for our guys in Tech ! What else, we don’t want to miss it, right! The true power behind wisdom is to share, because it is lovely. My goals is to participate to meaningful projects that really impact the productivity of people. Such as increasing team’s value with a good products software, teach people , help them have measurable ways to track their improvements. That is what it is ! The benefits to shape their life and gain freedom.

The Go Back On Time

ngouend gerard — Tue, 21 Jan 2025 15:33:47 +0000

This is a submission for the 2025 New Year Writing challenge: Retro’ing and Debugging 2024.

11111101000 is one of the year to be remembered for it sudden switch interest back to hardware’s skill in the I.T area. During 20 - 25 years software engineers was the shining stars of the I.T world, being the most in demands on the field. A common believe between many tech guys getting jobs , was to to enter the field of informational technology around software development training. Learning to code , design website, write good webpage contents was in trend and huge in demands. In 2024, within one semester space, many corporations revealed their achievements with huge AI advancements, going from new version of LLMs to yet now AI agents. However many aspiring Techs Developer still work out relying on the traditional recipe : learn to code, become good at using popular frameworks, tools and libraries out online, become a good Designer. Meanwhile The change with A.I are so rapid in Tech that We may be forced to ask : How could developers get on the trails ? Why is it important to become a quick learner ? Why is it worth doing to keep connect with others techs practitioners on the field ? All of these interrogations , lead us to explore some of the great teaching that the year 2024 preach me.

1 – THE IMPORTANCE OF A BETTER COMMUNICATION

The most important lesson I have learnt during the year 2024 is to start to communicate better. Better communications means, discussions , connection with members of tech’s communities, and people who have already land jobs in Tech. You Guys need someway to do the same, I supposedly think. Popularly said, Code doesn’t exist in the vacuum. What Next after you spend hours and hours coding in your dim room ? What Next ? We Really need to better think of that! My assumption; most of the people that commits to long training code , are people that are broke in some way, have a keen desire to change, coming from area where they don’t have good living-conditions, acknowledgments, decent amount of money out working or hustling, or even couldn’t get promotion upon the incredible work they achieve in enterprise or are too bored by the mechanic of the same tasks they perform all days.Fortunately, All of that can be flipped to good situations if we learn and spend times to communicate effectively. This was firmly enlightened to me listening 7 years of software engineering Advice in 18 minutes”’s
video by Bgo ( Youtube ).

If It was possible to get back in time from when i start my journey to become software developer. I would earlier focusing on few things, growing my network by helping others with their issues in communities that I am involved, and posting more content of my works over social media platform. Back on my first day learning, I was too involved on the materials more than exchanging ideas and even giving feedback to others. Is It a lie we need strong connections to have chance to meet with our next employers ? With others developers that will be delighted to have us on board in their project ? With tech company’s willing to hire us upon the achievements they see online ? To Create values out of what we thing as nothing (our current knowledge) ?. So, how do we leverage connections when we are broke ? Because, Money is value. We need to Think of it.By my view side, unless we decide to work the way we communicate, we can’t become asset just with our presence online. Most people don’t commonly yield it: consistently share projects on social media, help others with their issues, write articles, create blog tutorials or videos, start something in the unknown and become a perfect match to hit your goal fast and stand out among the luckiest person that did it in this world, before the End.

2 – THE CURVE LEARNING SKILLS

I was learning vanilla JavaScript between December 2022 and February 2023. Undoubtedly the core principle of creating dynamic elements in the DOM using JavaScript code sweets me like an ice-cream. In the mid of the next month I moved my study to ReactJS, my first framework. I definitely at first spot have headache to understand hooks principles and context api , having no solid knowledge in object oriented programming just unconsciously wired to functional programming approach, i learned React almost six months. Later on i got interested to full-app projects and start learning MongoDB, ExpressJS, NodeJS’s back end development tools with React to stand out to the market demands . I listened couples of videos and jump into four to five months implementation of a foods-delivery-app of my own (November 2023 - March 2024). One week later, stopping coding my foods-delivery-app and reflecting on my did so far by the end of this project. I realize that i was lost In my thought, unease, didn’t knowing how to express all this work in terms of achievements, all this time of coding. I consequently said to myself : “definitely, I am missing something”. Then, I jump back to videos you guess, as a self taught developer! To find out the best way to implement Back-end in a APP. I listened a guy on youtube, he entirely blew my mind with his says, he really shakes my opinion on back-end dev , I couldn’t remember his name . but he was barely saying that : **to be honest, even like new developer learn MERN (MongoDB-Express-React-Node) in purpose to achieve a full stack(front-end + back-end) app. The reality of Tech Company is not the same. When coming to code a Full Stack App real project they don’t use what it is commonly taught . They might use in the back-end area tools like : SQL, POSTGRESQL for database not MongoDB, and back-end framework such as PHP, and Laravel. Advising to go over and learn these technologies”. But, at these times discussing with others tech friends, they made available to my awareness that my design of app sucks, and I should start to learn BOOTSTRAP, and tailwindCSS. I made additional months doing that. At summer 2024 I was taken by VueJS Framework and start learning it. While Making a MEVN (MongoDB-Express-Vue-Node) blog-website project , it becomes clear to me that Artificial Intelligence is expanding fast in Tech and by some way I need to figure out how to learn it . In the interest of finding a job , I decided to code on the end of October a project that would make communication efficient between Team and manager in Company. Here I am.

3 – THE POINT OF LEARNING INFORMATIONAL TECHNOLOGY

While learning REACTJS for the first time in 2022, I was confused , because I started with some courses, tutorials that were designed from React v16.8 released In 2019 . Then, I figure out exploiting ReactJs documentation that a new release of React was made available in 2021 , React v18.0. It takes me around a month to figure it out, because I didn’t know much about framework update, new to the concept. While exercising on Class Components at first side (object oriented programming) , I shift learning Functional Components (functional programming approach) at the end. That makes me realize how fast things can move between two to three years in the software industries. Nowadays , calling back these moments, I firmly understand the importance of teaching what we could even know to others. Our knowledge can quickly become outdated, or either not well assimilated in a deep level if we don't do that. Technology evolves rapidly. That means it is a waste of time to matter about how people will use our knowledge to easy become fit on the market ahead of all of us. Tech is a skill in constant evolution, and whatever field we are in, we consistently need to learn. While accommodating to grasp the new concepts, Someone will always be better than us, whatever we do, decide to do or learn. What will make us unique, is our ability to share, explain, and teach to help improve life, bringing solutions where people are stuck in their journey, and transforming their worries into fuel of productivity . That’s why many Top Tech Engineers at a certain level of their growth start educating about the topics of their interests.