Neovim can be a bit problematic to start with, especially for newcomers. Writing a Neovim configuration from scratch is often difficult. To resolve this issue, we will install Neovim using the Nvchad framework.

Nvchad is a Neovim framework/configuration provider that has a rich, beautiful UI interface, blazing-fast startup time, and helps you work productively with Neovim.

You don't need to configure everything from scratch, as most things come pre-configured. There are multiple themes, code snippets, syntax highlighting, LSP configuration, plugin management, key mapping, and other helpful features.

In this article, I'll give you step-by-step instructions on installing Neovim and nvchad from scratch in your Linux and Debian based distro.

How to Set Up the Project

To download Neovim and nvchad in your distro, you'll need some additional command line tools. These will help you install the software:

1. Git CLI
2. Curl CLI
3. Unzip CLI
4. Fc cache (Font Config) CLI

Let's go through installing these tools to make sure you have them:

Install the Git CLI

To install Git, run the following command:

sudo apt-get install git

Install the Curl CLI

To install curl, run the following command:

sudo apt-get install curl

Install the Unzip CLI

To install Unzip, run the following command:

sudo apt-get install unzip

Install the Fc cache (Font Config) CLI

To install the Fc cache CLI, run the following command.

sudo apt install fontconfig

How to Install Neovim and nvchad

If you follow these steps, you can easily install Neovim and nvchad, even if you are a newcomer. It takes some time, but you don't need to have deep knowledge about Neovim and nvchad to get them set up.

Install Neovim

The first step is to install Neovim on your machine. To do that, you'll need to run the following command depending on your distro:

# Ubuntu ( Snap User)
sudo snap install nvim --classic

# NixOS
nix-env -iA nixpkgs.neovim

# MacOS
brew install neovim

# Arch Linux
sudo pacman -S neovim

For other operating systems such as Windows, you can read the installation documentation Page. I've also written an article on the correct way to install Neovim, which you can also check out.

How to Install Nerd Font

The next step is to install Nerd Font on your laptop or operating system. Nerd Font is a prerequisite for nvchad. If you cannot download Nerd Font, your nvchad UI will not work.

To install Nerd Font in Debian or Debian-based distros and macOS, you can run the following command:

# Debain, Ubuntu, Linux Mint, Kali Linux, etc.
bash -c  "$(curl -fsSL https://raw.githubusercontent.com/officialrajdeepsingh/nerd-fonts-installer/main/install.sh)" 

# MacOS
brew tap homebrew/cask-fonts && brew install --cask font-<Nerd-FONT- NAME>-nerd-font

Before running the nerd-fonts-installer, make sure you've installed curl, unzip, and Fc cache CLI in your Debian distro, following the instructions above.

How to Install nvchad

The last and final step is to install the nvchad framework in Neovim. To do so, run the following command:

# Linux & macOS
git clone https://github.com/NvChad/starter ~/.config/nvim && nvim

The following command takes some time, depending on your internet speed, and installs additional plugins required by nvchad from the internet.

Conclusion

For a newcomer starting with Neovim, the nvchad framework is a great choice. Without nvchad, configuring Neovim from scratch is a hard task for a beginner. Choosing the Neovim framework (configuration) is the right choice for newcomers.

Before starting with Neovim, read up and make sure It is the right choice for you. I recently found a VS Code plugin created and maintained by Neovim. You can get the same Neovim experience inside VS Code. After that, you can decide which you prefer.

Setting up an efficient Java development environment is key if you're a Java dev. It helps streamline your coding process and makes you more productive.

In this article, I will walk you through the important steps you need to set up a Java development environment. We'll cover how to install the Java Development Kit (JDK), the Integrated Development Environment (IDE), and configure the necessary tools and libraries. Let's dive in!

How to Install the Java Development Kit (JDK)

To begin, you need to install the JDK, which includes the Java Runtime Environment (JRE) as well as development tools, like the Java compiler and debugger.

Follow these steps below:

1. Visit the official Oracle website.
2. Download the latest version of the JDK that matches your operating system.
3. Run the installer and follow the on-screen instructions.
4. After installation, set the JAVA_HOME environment variable to the JDK installation directory.

How to Set the JAVA_HOME Environment Variable

Know the JDK Installation Directory

The first step you need to take before setting the JAVA_HOME environment variable, is to know the installation directory of the JDK. Take note of the path where the JDK is installed on your machine.

How to Access Environment Variables

To access the environment variables on your machine, follow the steps below:

1. On Windows: Right-click on the "This PC" or "My Computer" icon on your desktop or File Explorer and select "Properties." In the System window, click on "Advanced system settings" on the left-hand side. You can now copy the environment variables.
2. On macOS: Go to "System Preferences" and click on "Security & Privacy." Then, click on the "Privacy" tab and select "Full Disk Access" from the left-hand side. Click on the lock icon at the bottom left and enter your password to make changes. Now, you can copy the environment variables.

Set the JAVA_HOME Environment Variable

Depending on your operating system, follow the instructions below:

Windows:

1. In the System Properties window, click on the "Environment Variables" button.
2. In the "System Variables" section, click on the "New" button.
3. Set the "Variable name" as JAVA_HOME.
4. In the "Variable value" field, enter the path to the JDK installation directory. For example, if the JDK is installed in "C:\Program Files\Java\jdk1.8.0_XXX" (where XXX represents the specific update number), enter that path.
5. Click "OK" to save the changes.

macOS:

1. In the System Preferences window, click on "Security & Privacy" and navigate to the "Privacy" tab.
2. Scroll down and select "Full Disk Access" from the left-hand side.
3. Click on the "+" button and navigate to the Applications > Utilities folder.
4. Open the "Terminal" application and click "Open."
5. In the Terminal, enter the following command:

echo export JAVA_HOME=/Library/Java/JavaVirtualMachines/{JDK_VERSION}/Contents/Home >> ~/.bash_profile

Replace {JDK_VERSION} with the actual version number of the installed JDK without the curly braces {}.

Then you can close the Terminal and you should be all set.

Verify the JAVA_HOME Environment Variable

To ensure that the JAVA_HOME environment variable is set correctly, open a new terminal or command prompt window and enter the following command:

For Windows:

echo %JAVA_HOME%

For macOS:

echo $JAVA_HOME

The command above should display the path to the JDK installation directory that you previously set.

Congratulations! You have successfully set the JAVA_HOME environment variable to the JDK installation directory. This variable is now accessible to Java applications and tools on your system.

Choose an Integrated Development Environment (IDE)

An IDE makes coding simple and gives you various features like code editing, debugging, and project management.

There are many popular IDEs for Java development. I recommend IntelliJ because of its advanced refactoring tools.

You can download IntelliJ IDEA Community Edition or Ultimate Edition, depending on your requirements. Install it, and you will be guided through the setup process, including selecting key plugins and themes. If you are a student of any university, you can get the Github Student Pack.

How to Configure Your IDE

Once you have downloaded IntelliJ as your chosen IDE, you need to configure it to suit your needs.

The following configurations are some of the things you can do once you have downloaded the IntelliJ IDE.

Set the JDK

You'll need to point your IntelliJ to the JDK installation directory so that it uses the correct Java version for compilation and execution.

Open IntelliJ IDEA and go to "File" in the menu bar, I am using Ubuntu to demonstrate this.

then select "Project Structure":

In the Project Structure dialog, navigate to the "SDKs" section (under "Platform Settings") on the left-hand side.

Click the "+" button on the top right-hand side to add a new JDK. You can see what this looks like from the screenshot above.

In the "Add JDK" dialog, locate and select the directory where your JDK is installed. I am on Ubuntu.

/usr/lib/jvm/java-11-openjdk-amd64

The JDK installation directory typically has a structure like this:

Windows

C:\Program Files\Java\jdk1.x.x_xx

macOS

/Library/Java/JavaVirtualMachines/jdk1.x.x_xx.jdk/Contents/Home

Click "OK" to add the JDK.

After adding the JDK, go to the "Project" section (under "Project Settings") on the left-hand side of the Project Structure dialog.

In the "SDK" dropdown, select the JDK you just added.

If you want to set the JDK for a specific module, go to the "Modules" section (under "Project Settings") on the left-hand side, select the module, and then choose the JDK from the "Module SDK" dropdown.

Click "OK" to apply the changes and close the Project Structure dialog.

IntelliJ IDEA should now be configured to use the JDK you selected for compilation and execution of your Java projects.

Customize Editor Preferences

Adjust the code editor's font, indentation, and code style settings to match your coding style. This enhances readability and consistency.

Install Plugins

IntelliJ offers a wide range of plugins to extend functionality. Install plugins for version control systems (for example, Git), build tools (for example, Maven), icons, and any other tools you frequently use.

Explore Additional Tools and Libraries

Java offers a vast ecosystem of tools and libraries that can enhance your development experience.

Some popular options include:

1. JUnit: A unit testing framework for Java that helps write and execute tests to ensure code quality.
2. Apache Commons: A library containing reusable components and utilities, such as handling file operations, collections, and string manipulation.
3. Log4j: A logging framework that assists in generating log statements during runtime.

Conclusion

In this article, you learned how to set up Java development environment that is tailored to your needs.

Specifically, you learned how to install the JDK, select an IDE, configure it appropriately, and leverage build tools and libraries that will empower you to write efficient, high-quality Java code.

Thanks for reading.

You'll pick a tech stack and a programming language to learn and use, and you'll also choose an IDE, or integrated development environment, where you'll write your code.

Many different types of IDEs are available today. Some work only online, while others work locally and possibly online. Some have specific features that help you write more precise and correct code, and so on.

In this article, you will learn what an IDE is, what features an IDE can have, and what factors to consider when selecting an IDE for coding.

What is an IDE?

Developers use an IDE, which stands for Integrated Development Environment, to write computer programs. You can write these computer programs in any language, including Python, Java, and many others.

There are always tools that you'll use to help you achieve your goals in life. For example, a writer uses text editors such as Microsoft Word and Google Docs. An accountant uses spreadsheets such as Microsoft Excel and Google Sheets. And a programmer uses IDEs.

These IDEs increase your productivity by making writing, editing, debugging, and testing code easier.

Note: You can write code with text editors, but these text editors won't give you all the benefits an IDE can offer.

Why Use an IDE?

Before IDEs were introduced, programmers used text editors such as Notepad to write code. They then saved that code using programming language extensions such as .php for PHP files and many more.

However, these text editors were plain and lacked some features. This made writing, debugging, and running code difficult and time-consuming.

This resulted in the development of the IDE, which includes some core functionality that extends beyond text editing, such as:

Syntax Highlighting

An IDE detects the programming language and then applies specific colors, fonts, and styles to certain keywords, words, and text. This makes your code readable, clean, easier to detect syntax errors, and lots more.

// without syntax highlighting

const sayHello = () => {
  console.log("Hello World");
}

// with syntax highlighting

const sayHello = () => {
  console.log("Hello World");
}

Auto Completion

When we type code in an IDE, a dropdown of possible suggestions appears from which we can select what we want. These helpful suggestions appear without us having to write the entire code, which can be slow and may result in a syntax error.

Easier Debugging

Because programmers are humans, we are prone to making mistakes (bugs) in our code. These can be challenging to detect with text editors but can be easier with IDEs.

When we run or test our code, an IDE will show us the errors, including the lines where they appear and potential solutions.

This makes debugging (the process of fixing any errors or bugs discovered during testing) much more straightforward.

There are many more reasons why you should use IDEs, such as the ability to easily compile your code and lots more.

How to Choose an IDE for Coding

Having read this article to this point, the next question on your mind is likely - how do I choose an IDE?

Don't worry, this doesn't have to be too complicated. But weighing some options before choosing an IDE is a good idea.

Here are some things to consider:

What programming language you're using

There are many different types of IDEs, as mentioned above. Some are dedicated and only work with specific languages, while others are multi-language and support multiple languages.

The specialized IDEs include automation features tailored to the syntax of specific languages. This means that language is an important consideration when selecting an IDE.

Some examples of specialized IDEs include PyCharm for Python, Intellij IDEA for Java, Code::Blocks for C/C++, and RubyMine for Ruby/Rails.

If you're looking for a multi-language IDE, Visual Studio Code is a popular option. It's useful for web development and many other purposes.

What operating system you're using

Another essential factor to consider is the operating system you're using.

Some IDEs work very well on one OS but not on another. On one operating system, an IDE may be slow or difficult to use, and vice versa on another. Some IDEs exist on one OS but not on another, even though most IDEs today have multiple versions for different operating systems.

For example, Xcode is the built-in IDE for macOS. It is not installed by default, but you can get it for free from Apple via the Terminal or Apple's website. However, this IDE is incompatible with Windows.

The cost

Even if most IDEs are free, the add-ons or customization features may not be. This means you must research the specific features you desire, the cost, and whether they are affordable.

For example, if you want an AI assistant that can suggest code and complete your code for you, saving you time, there are many extensions available, such as Tabnine for VScode. This supports almost all programming languages, but it is paid and only offers a 14-day free trial.

Before selecting an IDE, you should compare as many extensions that offer what you want and the IDE they work with, their cost, the languages they support, and other factors as possible.

There are other details to consider, but this will get you started.

Wrapping Up

In this article, you have learned what an IDE is, why programmers use them, and how to choose one.

To summarize, there are some IDEs that are specific to specific programming languages, as we discussed above. But others, like VSCode, are more general-purpose and support many languages.

Before selecting an IDE, research your preferred language, operating system, financial capabilities, and customization features.You can read more on What is an IDE in Programming? on our previous areticle by Hillary.

Have fun coding!

The problem with popular languages like Python is that every IDE or code editor under the sun seems to have good support for the language. While this can be great, choosing the best one becomes a bit tricky.

In this article I'll introduce you to three IDEs and code editors that can make your Python journey smoother.

But before I begin I want to clarify the fact that this is not an exhaustive list. Like I said, Python is one of the most popular programming languages so it's supported by a large number of code editors and IDEs.

I could've included as many of them as possible, but instead I chose to include the ones that I've used at some point in my life and don't mind going back to. Because I think this'll be more helpful.

Without any further ado, let's jump in!

Table of Contents

• IDE vs Code Editor – What's the difference?
• PyCharm
• Microsoft Visual Studio Code
• Sublime Text
• Conclusion

IDE vs Code Editor – What's the Difference?

Before you start reading about the IDEs and Code Editors I have in store for you, let's clarify the definitions of an IDE and a Code Editor.

As you may already know, source code files are just text files with certain extensions appended to them. Any text editor that has some special feature such as syntax highlighting, automatic code indentation, and so on to make editing code files easier is called a code editor.

Popular code editors include Visual Studio Code, Sublime Text, Atom, Notepad++ and more.

An IDE or Integrated Development Environment, on the other hand, is a much more complex suite of software that combines multiple tools such as a code editor, a file browser, a terminal emulator, a database explorer and more in a single package.

Popular IDEs include PyCharm, IntelliJ Idea, Microsoft Visual Studio, and others.

But thanks to modern highly extensible code editors such as Microsoft Visual Studio Code, the line between an IDE and a Code Editor has started to fade away.

Now that you have a better idea of what an editor is compared to a full-blown IDE, let's look at some of the best for Python coding.

PyCharm

The first one in our list is an IDE from JetBrains. PyCharm is one of the most used Python IDEs out there (if not the most used).

https://www.jetbrains.com/pycharm/

The IDE has two editions. The professional edition will cost you $8.90 every month and $89.00 every year if billed yearly. There is also the community edition which is completely free and is built on open-source software. In this article I'll discuss the community edition.

Both editions are available for Windows, macOS, and Linux. You can download the 30 day trial of the professional edition or the community edition from the official download page.

The installation process is pretty straightforward regardless of the platform you're on. Once you've downloaded and installed PyCharm on your computer, you should be able to start the IDE. You can use the start menu shortcut on Windows, the Applications directory on macOS, or your application launcher on Linux.

You can create a new Python project by clicking on the New Project button.

In the next step, choose where you'd like to store your project. You can either create a new virtual environment or use a previously configured interpreter. In this case, I'm creating a new environment.

If you check the Create a main.py welcome script option, a new Python file with some boilerplate code will be created inside your project. Once you're happy with all the choices, hit the Create button.

This is what the code editor looks like once the project has been created. On the left side you can browse all your source files, and you can hit the play button on the top right corner of the window to run the selected scripts in the dropdown.

As you can see, PyCharm comes with a terminal built in on the bottom of the window and you can see outputs from your program without ever leaving PyCharm.

The community edition is quite complete and you can do more or less everything you can do on the professional edition. The professional edition has better support for web frameworks like Django and some other bells and whistles.

If you're a student, you can get PyCharm Professional Edition and all other JetBrains stuff for free by applying on their website. You can also get a free license of all the JetBrains products if you're an open-source maintainer.

Microsoft Visual Studio Code

Next in the list of my favorites is Microsoft Visual Studio Code or VSCode for short. It's an open-source, electron-powered, cross-platform code editor from Microsoft with a ton of customization options and extensions.

By installing the right set of extensions, you can turn Visual Studio Code into almost a fully-featured Python IDE. You can download VSCode for free from the official download site for Windows, macOS, and Linux.

Once you've installed VSCode on your system, open the software and go to the extensions tab by hitting the Ctrl + Shift + X key combination.

Use the search bar to search for and install the following extensions:

• Python – provides features such as IntelliSense (Pylance), linting, debugging, code navigation, code formatting, refactoring, variable explorer, test explorer, and more!
• PyLance – works alongside Python in Visual Studio Code to provide performant language support.
• Visual Studio IntelliCode – provides AI-assisted development features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code.

Once you have these three installed, you're good to go. Create a directory anywhere on your machine and open that folder using VSCode. You can use the integrated terminal to run your code or execute any command in general.

You can set breakpoints by clicking on the left side of any line number. Then you can hit F5 to start debugging or Ctrl + F5 to run the program without debugging. VSCode has a lot more tricks up its sleeve that you'll find out as you keep using it.

Sublime Text

Sublime Text is one of the OG code editors that has been used by developers for years. It's a very performant, powerful code editor with rich support for packages.

You can download Sublime Text from their official download page for Windows, macOS, and Linux. Once you have it installed, start Sublime Text like any other software.

Now click on Tools > Install Package Control...

This'll install the Sublime Package Manager. Wait until a success message shows up.

Now go to Command Palette using the Ctrl + Shift + P key combination and type Install Package:

Select the first option and search for the Anaconda package. This is the ultimate Python package that turns Sublime Text into a Python IDE with features like autocompletion, code linting, IDE features, autopep8 formating, McCabe complexity checker, Vagrant and Docker support, and more.

There are also more specific packages such as Djaneiro for Django support and requirementstxt for requirements.txt support on Sublime Text. Just look around the Package Control website and you may find some pretty useful packages.

Conclusion

As I've already said, this is not an exhaustive list of all the popular Python IDEs and Code Editors. I've also used Spyder at a point in my life but decided to leave it off since it's targeted at scientists and engineers.

I've also used IDLE for a brief period as well but it didn't seem like a strong enough option when it comes to larger projects.

If you think I've left out any other good one, let me know via Twitter or LinkedIn. Also, if you're native Bengali speaker, checkout freeCodeCamp's Bengali Publication and YouTube Channel. Till the next one, stay safe and keep learning.

When you're coding, you're writing various text that can be executed by different language compilers. And what makes this text fun and easy to write are the editors that we use.

Different editors have different features. But they have a common goal: making writing code easier – easier to compose, debug, and read.

In this article, we'll look at five code editors that can improve development on your Mac device.

1. Sublime Text

Sublime Text is a lightweight editor with many features for improving your code-writing experience. Here are some of its features:

Multiple view panes

Multiple view panes

Sublime Text offers multiple view panes for writing code. This way, you can view multiple files at once.

What's more fun is you can open the same file in two panes. This feature can be helpful when you're writing code in a file with long lines of code, as you'll be able to scroll to the top in one pane and then write in the bottom of the other.

Side-by-side view for Type Definitions

Instead of just viewing type definitions in a small popup or opening the definition file that overrides the current view, Sublime Text provides a side-by-side view of a definition file for the types in the current file.

Multiple Selections

Multi-Line Selection Text Entry with Sublime Text

There are two forms of multi-selections: multi-selecting the same characters or different characters.

Same character selection

Say you want to rename a literal (variable, function, and so on) in multiple places. Sublime Text allows you to highlight the literal, and using Ctrl/Cmd D you can select other occurrences of that literal and edit, replace, or do what you want.

Different characters selection

Maybe some literals are spelled differently, but you want to highlight them together. Sublime allows you to use your mouse to highlight many things at once and operate on them as you choose.

2. VSCode

The VSCode editor offers syntax light, IntelliSense features (autocompletes, code hinting, and more), custom configurations, and room for different plugins. VSCode also allows multiple selections and multiple view panes.

Here are more features of VSCode:

Code Debugging

With VSCode, you do not need to debug on your browser or other tools.

Debugging in Visual Studio Code

VSCode allows you to debug right from your editor using breakpoints, the call stack, and even an interactive console.

Many extensions for different things

VSCode has a large marketplace for different languages, frameworks, and even your editor. You have extensions that beautify your editor's appearance and experience and tools that help with autocompletion when writing code.

Managing Extensions in Visual Studio Code

Built-in Terminal

With VSCode, you have a a built-in shell terminal where you can execute commands without leaving your editor to go to a different terminal app.

The terminal view of VSCode

A small screen may make your editing view small and a bit inconvenient, but with a large monitor, for example, the view is just okay.

VSCode also has multiple view panes, character selection, and multiple character replacements.

3. Atom

Atom is a highly customizable code editor. This is why the team calls it a "hackable text editor". From the appearance and colors on the editor to the key combinations for commands and many other things, you can customize Atom as much as you wish and make it very personalized.

Here are some features:

Real-time Code Collaboration

Teletype for Atom

Atom has a Teletyping feature that allows multiple people to work on a codebase in real-time. This feature improves collaboration in a team workspace on projects. For VSCode, you'll usually need an extension for this.

Git Integration

With Atom, you never have to go to your terminal for your Git operations.

GitHub for Atom

Git actions are integrated into Atom using the GitHub package, and this creates a smooth version control experience while you write code.

Smart Autocompletion

With many languages and syntaxes integrated into Atom, you also get a nice auto-completion feature while writing code.

Autocomplete (atom.io)

You don't have to type out those long method and variable names anymore. Atom's smart enough to help you avoid that 😉.

In Atom, you also have search and replace features, view panes, and more.

4. WebStorm

WebStorm calls itself "The Smartest JavaScript IDE". It takes a lot of confidence to call itself that, and WebStorm actually delivers. WebStorm makes writing JavaScript and its related technologies not just convenient but more enjoyable.

Some features include:

Built-in developer tools

WebStorm takes the name "development editor" quite literally. From running scripts to breakpoints and general debugging, WebStorm provides developer tools that allow you to write, execute and debug your code.

WebStorm: Integrated Developer Tools

Smart features

This editor allows you to move files between folders seamlessly. It also helps you refactor your code and suggest fixes for errors.

And the most brilliant feature I love about it is that you can easily rename a specific variable across your application. Say you have a variable you've imported in many files – you can easily rename that variable from one of the files.

Fast search and navigation

Another fantastic feature of WebStorm, which people generally praise it for, is the fast file or folder search and navigation.

WebStorm: Navigation and Search

From searching file names, class names, function names within files, and special selectors, you can easily find a file you're looking for.

There's also collaboration, view panes, search and replace in WebStorm.

5. Vim

And there's Vim. It's worth noting that Vim is not for everyone, as it arguably has a steep learning curve – but Vim has many features that make it worth trying out. I have a friend who's never letting go of Vim and keeps advocating that people are missing out.

Here are some features:

High Customizability

I mentioned earlier that Atom is highly customizable, but I don't think it's as flexible as Vim.

Vim customized to be like SublimeText

Down to the low-level commands and feel of the editor, you can configure many things that makes using another editor very strange for you. You can also create scripts that automate things for you.

Support for Many Languages and File Formats

Vim has support for many languages and files of different kinds. It also integrates with many tools.

Powerful search feature

With powerful selectors and regex, you can do multi-level file searches and replacements. With Vim's scripts, you can also get plugins that take the search features to another level.

Agreed, it's not very easy to learn. But it's pretty powerful and consumes less memory, surprisingly. It also has an extensive script system that gives you much power while writing code.

Wrapping Up

There you have it - five code editors you can use to write cleaner, more readable code. I hope you find the one that best fits your needs!

Thanks for reading :)

In this article, I will show you how to get started with Replit and show you how to use a lot of the basic features.

Here is a list of topics discussed in the article:

• How to create a free Replit account
• What is a Repl and how do you create one?
• Basic features of the Replit editor
• Replit files and folders
• Version control in Replit
• Replit Debugger
• How to install packages in Replit
• Secrets(Environment Variables) in Replit
• How to customize Replit settings
• Replit Database
• How to add Unit Tests in Replit
• How to use the run button in Replit
• How to clear the console in Replit
• What is the Replit shell console?
• How to add a custom domain in Replit
• How to publish your project in Replit
• How to share Replit project URLs
• How to invite others to edit your repls
• What is included with the Replit paid subscription?

How to create a free Replit account

To get started, you will first need to go to the Replit homepage. In the top right hand corner, click on Sign Up.

You can create an account with your own username, email, and password. Or you can create an account using your Google, Facebook, or GitHub account.

Once you are logged in, then it should take you to your account homepage.

What is a Repl and how do you create one?

Repl stands for read-eval-print loop and it is an interactive programming environment for developers to create small projects.

In Replit, there are three places where you can create a new repl.

One way is to click on the Create Repl button located at the top left hand corner of the homepage.

You can also create a repl by clicking on the + icon under the Create section.

The last option is the click on the + icon located at the upper right hand corner.

Then you can choose from one of Replit's many templates including Python, Node, Java, HTML & CSS, Ruby, and more.

Once you choose your language, pick a name for your project.

For the free version of Replit, you are not allowed to create private projects. If you want a private repl, then you will need to upgrade to the paid subscription.

Once you are done naming your repl, click on the blue Create Repl button.

Then you should be taken to the editor.

Basic features of the Replit editor

In this section, I will go over some of the basic features you can use in the Replit editor. These features include a debugger, files and folders, version control, unit tests, and more.

Replit Files and Folders

In the upper left hand corner, you can click on the file icon to add files and folders to your project.

To add a file, click on the Add file icon.

To add a folder, click on the Add folder icon.

If you want to upload files or folders from your computer, click on the three vertical dots icon.

If you need to delete files or folders, then click on the three dots icon located next to the file you want to delete. Then from there, choose the delete option.

You can also right click on the file and you should see the list of options.

Version control in Replit

You also have the ability to connect to your GitHub account and create a repository for this project. At the time of this writing, this feature is currently in beta.

First click on the version control icon on the left hand side of the editor page.

You should then see an option to connect to your GitHub account.

You will be prompted to grant Replit permission to create new repositories on GitHub.

Enter in your login information for GitHub.

If you have multiple accounts linked to your profile, choose the account where you want to install Replit.

You will then need to authorize Replit to install.

After you Install and Authorize Replit, you should be directed back to the Replit editor.

Now all of our changes will be tracked and we can push those changes to GitHub. Write a short commit message and click on the Commit & push button.

You should see all of your commit messages in the version control panel.

Then click on the Connect to GitHub button so you can create a new repository.

You can add a description for the repo and then click on the Create GitHub repository button.

Once it is created, you should see the name of the repository in the version control panel.

You can also see your new repository in GitHub.

Replit Debugger

The Replit editor has a debugger tool, where you can walk through your code step by step to see what is happening and fix errors. This is also a Beta feature.

You can find this feature on the left hand side of the editor page.

How to install packages in Replit

You can also install different packages into your projects like morgan, express or cors using the Packages panel on the left hand side of the editor page.

Search for the package that you want to use and click on the + icon to install it into your project.

Inside the console, which is located on the right hand side of the screen, you should see the package being installed.

Secrets (Environment variables) in Replit

Replit no longer supports creating .env files.

Instead, you will have to use the Secrets tab to store your environment variables. You can find this Secrets icon on the left hand side of the editor page.

You will write the name of your key in the Key input field and write the value in the value input field. Then click on Add new secret.

Then you should see your newly created environment variable in the Secrets tab.

If you need to edit that variable, hover your mouse over the variable name and click on the pencil icon.

Now you should be able to use that environment variable inside your code.

How to customize Replit settings

If you need to customize the editor settings for your project, click on the settings icon on the left hand side of the editor page..

Replit Database

If you want to use Replit's key-value storage, then click on the Database icon on the left hand side of the editor page.

To learn more about how to use the Replit Database, please visit the documentation.

How to add unit tests in Replit

If you need to add Unit tests to your project, click on the Unit tests icon on the left hand side of the editor page.

Then click on the Add test button.

Then you can create your Unit tests by providing a name, the code, and a failure message. Click save when you are done.

This is a screenshot using the Replit example unit tests for adding two numbers:

Then click on the Run tests button.

Inside the console, you will see the tests running with the results.

How to use the Run button in Replit

If you want to start the server for your project, then click on the green Run button located at the top of the editor page.

When you click on the Run button then you should see the results of your code in the preview window and console located on the right hand side of the editor page.

How to clear the console in Replit

If you need to clear out the console, then click on the x icon located at the right hand side of the console window.

What is the Replit Shell console?

If you need to type in commands, such as removing or adding folders, then you can use the Shell console.

How to add a custom domain in Replit

In the preview editor, you can add a custom domain for your project. Click on the pencil icon next to the preview URL.

Then you can add your custom domain and CNAME information:

How to publish your project in Replit

Once you are finished creating your project, then you can publish it and have it displayed in the collection of Replit Apps.

First click on the name of the project, which is located in the top left hand corner.

Then you can provide a short description of the project and click on Publish.

You will then have the option to provide a description, cover image, and tag information. When you are finished, click on the publish button.

If you want to publish an update, then you can click on your project and then click on Publish update.

If you need to unpublish your project, click on the three dots icon to the right of the publish page and choose the unpublish option.

How to share Replit project URLs

If you want to share your project URL, you will first need to click on green Run button followed by the Open in new tab button located in the preview window.

Then you should see your page in a new tab.

If you want to share your URL which contains the editor and preview window, use the link found in the top of the browser.

If you visit the link, you should see this result:

If you need help on a project and want other developers to see your code and files, then you share that browser link. Others won't be able to see your environment variables when you share your project.

How to invite others to edit your repls

Replit has a feature where you can invite other developers to join your project and edit the code.

First, click on the Invite button located at the top right hand side of the editor page.

In the search field, you can add users from replit or add the email addresses of those you want to invite.

Then click on the blue Invite button to send invites for users.

You will see that their invitation is pending.

You can also send out a join link to the user you want to add to the project. Click on the Generate a join link button located at the bottom.

If you need to remove invited users, then click on the x icon located next to their name.

What is included with the Replit paid subscription?

The Hacker paid subscription level comes with more memory, storage, speed and private repls.

The Teams paid subscription level comes with educational projects for students and teachers to work with.

To learn more, please visit Replit's pricing page.

I hope you enjoyed this Replit starter guide and best of luck on your developer journey.

Gitpod and GitHub Codespaces are cloud based developer environments that allow you to spin-up high-performance, automated dev environments in seconds.

Over the past few months I have gone down the rabbit hole of cloud-based developer environments. I'm moving several of my projects to the cloud so that developers can deploy the projects with a single click, like this full stack NFT marketplace.

This has been especially helpful for me, as a teacher and content creator helping developers learn how to code. Now these developers can deploy the example projects without having to set up their local environments so there's one less hurdle for them if they are just getting started.

It is also an overall productivity and efficiency boost as I don’t have to clone and set up projects anymore locally when making updates. Instead, I can just click a button and it’s ready to go.

In this article I'll share my view on the ecosystem together with a comparison of the two leading options in accomplishing this – GitHub Codespaces and Gitpod.

For transparency, Gitpod is also a sponsor of my YouTube channel. That being said, I only choose to accept sponsorships from projects that I already enjoy using myself.

Cloud-based Development – This Is the Way

As developers, we like to automate things. We speed up our own workflows, automate infrastructure and CI/CD pipelines, and even create tools that write code themselves.

If you look at modern software pipelines, there is one area we have not automated: our developer environments. They are still brittle, tied to local machines, and require nerve-wracking set-up and maintenance efforts that distract us from being creative and productive.

Dev environments are a constant source of friction during onboarding and ongoing development (remember your last “works on my machine” discussion).

As a teacher and content creator helping new developers learn how to code, one of the most common issues isn't the tutorial or content itself. Rather, it's the developer's local environment not being set up properly, and it's often not even their fault.

There are countless variances of operating systems and application versions that have to be taken into account.

The pain that comes with local dev environments will only get worse over time: larger workloads, more data, more dependencies, more testing, multi-service and multi-track development are all things that are difficult to account for.

GitHub Codespaces and Gitpod Lead the Pack of Cloud-based Dev Environments

Some years ago, Cloud9 moved into the area as a first generation of browser IDEs. Though their ideas were going in the right direction, technology and community just were not ready (yet).

A lot has changed since then. In addition to the advent and meteoric rise of VS Code, there were big leaps in container and VM technology that made it faster, more secure, scalable, and practical to run developer environments in the cloud.

No surprise that we are seeing companies like Google, Facebook, Shopify and most recently GitHub fully moving software development to the cloud with internal solutions.

There are a few players in the area that have taken advantage of those developments – although some might argue that other existing solutions focus more on prototyping and playground work for specific languages and are not a full replacement for local development.

When it comes to cloud-based dev environments that work for day-to-day professional software development, there are two main options: Gitpod and GitHub Codespaces.

So what do they do? Well, essentially they let you spin up task-based developer environments in the cloud from any Git context. Once you’re done, you just close them.

This is a huge boost for productivity. Think about multi-track development (no changing of dev environment settings when switching contexts to review pull-requests), onboarding, consistency or just working remotely. You can work from any computer, Chromebook, or tablet.

In this article we will take a look under the hood and assess and evaluate both products according to the following categories:

• Workflow and Collaboration
• IDE
• Runtime
• Automation
• Open Source & Ecosystem
• Availability & Pricing

Let’s dive into it!

GitHub Codespaces vs Gitpod Workflow

GitHub Codespaces and Gitpod are both services that allow you to do exactly the same as what you could do locally on a Linux machine with one major addition: your developer environment can be configured as code and hence is version controlled, reproducible and automatable.

GitHub Codespaces allows you to do that with a devcontainer.json file and Gitpod with a .gitpod.yml file that you place into your repository (more on that later). Both do essentially the same thing, like define what Docker container to use, what scripts to run, and they control what extensions will be available in your Codespace (GitHub) / workspace (Gitpod).

Both products embrace a software development flow that enables developers to start a developer environment from any Git context (Issue, PR/MR, branches, and so on) with one-click for the specific task you are working on.

This task-based development flow is what ultimately sold me on switching from local dev for real world projects and, after using it, feels like it would be really hard to go back to not having it.

Developer environments turn just into some resource I can spin up on demand and close and forget about if I am done with my task. Gitpod is excelling at that workflow and built their product around it.

Reading the blog post from the engineering team at GitHub, it feels like they internally adapted a similar workflow, however this is not native with Codespaces right now.

Collaboration with Codespaces vs Gitpod

Both GitHub Codespaces and Gitpod offer ways to collaborate, but they differ in their approach.

On both platforms, when your development environment is running, you can expose any TCP port publicly or privately to the internet. This enables workflows where you can share links to a web-server or API server as standard URLs.

Gitpod offers functionality to share a snapshot of the workspace with a co-worker but GitHub Codespaces does not.

GitHub Codespaces offers the ability to interactively pair program when the LiveShare extension is installed while Gitpod offers the ability to share the workspace itself with collaborators.

Once Gitpod enables local VS Code support (1-2 weeks from this writing) you can also use LiveShare with Gitpod.

Here are some further resources where you can read more about this.

• https://www.gitpod.io/blog/i-said-goodbye-to-local-development-and-so-can-you#develop-a-new-feature
• https://github.blog/2021-08-11-githubs-engineering-team-moved-codespaces/
• https://visualstudio.microsoft.com/services/live-share/

Gitpod vs Codespaces IDE

Both Gitpod and Codespaces ship upstream, and stock VS Code as their default IDE running in the browser. It feels like, acts like, and is literally the same VS Code that you are used to from your desktop. Be aware of cmd+W however :).

As GitHub is owned by Microsoft, I understand that the VS Code team was heavily involved in building GitHub Codespaces.

The team behind Gitpod has a long background in open-source developer tooling, and they initially created Theia (which is also based on VS Code). |But recently, they switched to stock VS Code and maintain a very lightweight fork of VS Code that has also continued to gain adoption by other teams in the industry (https://github.com/gitpod-io/vscode/).

VS Code Extension Marketplace for Codespaces and Gitpod

Having the VS Code team behind the product and being able to access all proprietary extensions (like Liveshare, for example) through the Microsoft-controlled Visual Studio Marketplace is a plus for Codespaces.

As a response, Gitpod created https://open-vsx.org/ (now hosted under the Eclipse Foundation), which is a vendor-neutral marketplace run by the Eclipse Foundation for VS Code extensions that is accessible through Gitpod.

Though there is almost extension parity for the most popular VS Code extensions, Microsoft’s (excellent) proprietary extensions have not found a way to OpenVSX.

In case you don’t find an open-source extension on OpenVSX, you can trigger the publish automation by sending in a pull-request to https://github.com/open-vsx/publish-extensions.

Remote Development from Desktop VS Code

I am a big fan of being able to connect from my local Desktop VS Code into a dev environment running on somebody else's computer.

Both products offer that feature, but the flow that Codespaces ships out of the box is superior compared to the approach from Gitpod.

While you can achieve the same with Gitpod’s local app, the setup involves more work and friction from a user’s perspective. Asking the Gitpod team about this, I received feedback that they will release a similar one-click experience at the end of August.

What about other IDEs than VS Code?

For GitHub Codespaces I could not find any information for other IDEs than VS Code. And given that Microsoft is behind both projects, I’d expect that they'll probably focus on VS Code.

In contrast, Gitpod tries to stress that what they have built is, on an architectural level, IDE independent and allows you to run any IDE image you can run remotely in their container.

I found some templates in their GitHub Repo that allow you to run the Jetbrains product fleet (based on https://github.com/JetBrains/projector-installer).

The developer experience there still feels a bit clunky. Digging a bit deeper I found this interesting discussion around one of the most requested features from the Jetbrains community that would enable remote support via SSH out of the box. I would love to see that supported by Gitpod and Codespaces.

Here are some resources for further reading:

• https://www.theregister.com/2021/04/08/gitpod_talks_up_importance_of/
• https://www.gitpod.io/blog/local-app
• https://www.gitpod.io/docs/integrations/jetbrains

Codespaces vs Gitpod Runtime

GitHub Codespaces runs on virtual machines which come with great isolation out of the box and are easier to provision and manage. However, they also carry the overhead of the full operating system, making them larger and slower to start as well as more costly.

Gitpod runs on lightweight containers that spin up quickly and enjoy a far higher cloud density (as more processes can run in parallel on the same underlying hardware, there is less idle compute). This allows Gitpod workspaces to spin-up faster and be more resource – that is cost and energy – efficient.

The downside of containers is that, by default, they do not have the same isolation/security benefits as virtual machines provide.

Before last year, sudo-rights (and with that docker-in-docker) were not possible in Gitpod workspaces. Earlier this year they implemented namespace isolation features that made both of those things possible (see their head of engineering explaining how they achieved that).

Both Codespaces and Gitpod support docker-in-docker for Docker Compose scenarios and nested virtualization which enables running operating systems or appliances in your browser.

Here are some more resources for you on this:

• https://www.gitpod.io/blog/root-docker-and-vscode
• https://github.com/gitpod-io/template-nixos

Automation with Codespaces and Gitpod

Both heavily embrace the notion of dev environment as code that Vagrant first coined and Gitpod then further built out.

The basic idea behind that is applying ideas from Infrastructure as Code to dev environments. Codespaces uses a devcontainer.json format as a configuration file while Gitpod uses a .gitpod.yml.

Given the reach and distribution power of Codespaces and VS Code, my prediction is that the devcontainer.json format will win long-term as the industry standard for configuring developer environments. As listed on their roadmap, Gitpod plans to support that as well. Right now they don’t and run on a .gitpod.yml.

Creating and setting up your dev-env-as-code is only the first step towards fully automated per-task developer environments. As you do not want to wait for dependencies to download and code to build every time you start a developer environment, the workspaces/codespaces need to be prebuilt before you even start.

Gitpod supports prebuilds for that (think about them as a CI/CD server where Gitpod prebuilds the full workspace / runs the automation on every commit to Git). Automation only works if executed frequently.

Codespaces currently do not have prebuilds included in their GA, but internally they already use them. Therefore it should be a matter of months until they also publicly release that feature.

You can read more here:

• https://www.gitpod.io/screencasts/continuously-prebuild-your-project
• https://github.blog/2021-08-11-githubs-engineering-team-moved-codespaces/

Codespaces and Gitpod Open Source and Ecosystem

The biggest difference between the two is that Gitpod is open source and everyone can contribute to the project. You can self-host it on GKE, EKS, and vanilla Kubernetes.

Their roadmap and development work is public and everyone can contribute to the project. In addition to this, maintainers and core contributors to open-source projects get Gitpod for free.

With GitHub, Microsoft owns the market leading social platform for developers and they integrated GitHub Codespaces as a first-class citizen into the developer experience on GitHub. This means that by default the UI in GitHub shows you an Open in Codespaces button, which nicely embeds into your development workflow.

For Gitpod to achieve the same level of integration you need to download either the browser extension or a bookmarklet. GitLab has a strategic partnership with Gitpod and has on every repository and merge request an “Open in Gitpod” button built into the GitLab UI.

Contrary to Microsoft, Gitpod follows a strategy where it is neutral by default, not owned by big tech and designed in a way to integrate with whatever tooling developers want to use.

This means it not only works with GitHub but also other Git providers such as GitLab and Bitbucket and you can deploy it on your own infrastructure.

Availability, Pricing, and Specs of Codespaces vs Gitpod

Gitpod has been available for more than 2.5 years, while GitHub Codespaces came out of beta on the 11th of August 2021 for customers with a GitHub Team or GitHub Enterprise subscription.

Based on a tweet from their CEO, Nat Friedman, we can expect that individual developers will have access to GitHub Codespaces at the end of the year.

GitHub Codespaces is currently free for all organizations on a GitHub Team or GitHub Enterprise subscription until September 10th. The billing increment is for the amount of minutes a workspace is active, and for the amount of storage used on disk for each workspace until a user deletes the workspace.

You can read more about that here.

Gitpod is free for public and private repositories for 50 hours per month. Maintainers and core contributors of well-established open-source projects can apply for a voucher that upgrades their account to unlimited hours per month.

Read more about Gitpod pricing in these resources:

• https://www.gitpod.io/blog/cloud-based-development-for-everyone
• https://www.gitpod.io/pricing
• https://www.gitpod.io/docs/professional-open-source

To simplify comparing the offerings from GitHub Codespaces and Gitpod, here are three different scenarios using the same amounts of CPU, memory, and storage for each use case.

The amount of CPU and memory for each workspace launched is configurable in GitHub Codespaces and they offer SKUs of up to 32 CPU cores and 64GB of RAM. Gitpod at this time does not yet offer a way to have more or less compute resources.

See it in action

I hope you’re as excited as I am after first hearing about the concept of dev environments as code in the cloud! Give both a try and see for yourself how you like them.

Right now I prefer Gitpod as it’s free for my use cases, has pre-builds, is accessible to anyone who wants to use it, is open source, and can be used with any Git provider including GitHub.

How to Get Started with Gitpod:

• Prefix any GitLab, GitHub or Bitbucket URL with gitpod.io/# to dive right in
• Or use their browser extension or browser bookmarklet for starting workspaces from any git context
• Or try their quickstart templates
• Check out my guides here and here

How to Get Started with Codespaces:

• If you’re a GitHub Teams or Enterprise customer, look for an “Open in GitHub” button next to a repo
• Individual developers need to wait until it launches more widely
• Check out this video for an overview.

Just like any beginning developer, when I began to learn coding I needed some guidance on how to get started. And one of the most important things that I had problems choosing was an application to help me write my code.

There were plenty of options to choose from, and every tutorial I followed used a different one. But eventually I was able to find one and stick to it.

Now if you happen to work in web development or any programming related field, then there is an application you'll use to write code. It's called an Integrated Development Environment, or IDE for short. But, what exactly is an IDE and how does it help you out?

In this article we are going to focus on what an IDE is, the different types of IDEs out there, and how you can utilize them to make your work flow easier. We will also look at some of the top IDEs out there today.

Let's get started!

What is an IDE?

In simple words, an IDE is a handy piece of software that acts as a text editor, debugger, and compiler all in one. IDEs are designed to make coding easier for developers.

So basically, an IDE is an application that facilitates application development, and gives you a central interface featuring all the tools you'll need like:

• A code editor that's designed to help you write and edit your code. It also helps you make it more readabile and clean.
• A compiler that transforms code written by a human into machine-readable form.
• A debugger that helps you eliminate errors from your programs so that your code executes and performs the way it should. This feature provides tools to help you examine your code.

Some IDEs also allow plugins to be installed in them to give you even more features.

Just like any other piece of tech, there is a history behind it. Have you ever wondered how developers back in the days used to work? Let's learn a little of the IDE's history.

History of the IDE

Back in the day, you could say that coding was "text-only". It may sound boring but I suppose professional developers back then liked it a lot (or didn't have any other options).

Developers used to write code in a text editor (like Notepad, Emacs, and others). They would write and save applications in the editors with various extensions like .java, and then later run the compiler, note the errors, and go back and fix them until the code worked.

Over time, these various activities started to get baked into coding enviroments and became more automated by just the click of a few buttons. Microsoft's Visual Basic was the first real IDE, and later many companies developed different IDEs for different languages (as we will discuss below).

So how did this work – with different companies developing different development environments? You'd think they should adhere to consistent rules of work, right? For example an IDE should support one or more languages, and should be either web development or mobile development based.

Well, let's see the different types of IDEs we have today.

Types of IDEs

We have a variety of different IDEs today, depending on how you work and the kind of code you are working on.

We have IDEs designed for specific languages, and there are multi-language IDEs. Some are customized for the development of mobile apps, and others for web apps. There are also have cloud-based IDEs.

Let's look at each one in turn.

Multi-Language IDEs

Just like the name says, these are IDEs that support more than one language. As a beginner starting out (and planning to advance on your knowledge later) you might want to consider learning to use a multi-language IDE.

Here are some examples of multi-lang IDEs and their supported languages:

• Eclipse – A free and open source editor. It's highly recommended by many professional developers. Eclipse began as a Java-based enviroment but has recently been updated to support languages like: C, C++, Python, PHP, Ruby, Perl, and Java just to mention a few.

• Visual Studio – One of the most widely used IDEs, Visual Studio is known for its amazing features and continuous support for extensions and updates. And it can easily support a new language by adding an extension.

Devs use Visual Studio to develop web applications, games, mobile apps, web APIs, and more. Some of the built-in language support includes: C, C++, C#, JavaScript, Typesript, HTML, CSS, XML and many more.

• NetBeans – Just like Eclipse, NetBeans is an open source, free, and a cross platform IDE. Developers mostly use it to develop mobile apps, desktop apps, and web applications.

It provides simple features like drag and drop, making it easir to work with. And just like Eclipse you can also extend it via plugins.

Some of the supported langs include: Java, PHP, C, C++, HTML, JavaScript, CSS and more.

• Komodo – A cross platform IDE that has a premium option. You can enhance its features by adding packages and other addons.

It supports a number of languages like Python, PHP, Perl, GoLang, Ruby, C#, C, C++, HTML, CSS, JavaScript, TypeScript and more.

Common Features of Multi-lang IDEs

Most multi-language IDEs have certain features in common that prove very useful when you're coding.

• Intellisence – IDEs with this feature can provide code completion, quick info, and member lists on a project.
• Smart code editing – your IDE can indent code lines, match words and brackets, and also highlight keywords.
• Debugger – most IDEs provide powerful debugging features and along with a graphical debugger and breakpoints.
• Extension/plugin manager – you can add new extensions/plugins to extend your IDE's functionality.
• Version Control – IDEs offer support for various version control systems like Git, Subversion, Mercurial, CVS and so on.

Mobile Development IDEs

Mobile app development is one of the most compelling and exciting fields of development today, and it's a common reason that people learn how to code.

Not only that, but almost every organization from governmental bodies to individuals are building mobile apps.

As the mobile app development industry grows, there are lots of new tools to help out. In order to develop good and resourceful apps, mobile app devs need a platform that's focused on that type of development.

For example if you're building an app for Android, iOS, and web, you'll need a cross-platform IDE that supports all that tech.

Some of the multi-language IDEs also fall in this category, like Visual Studio, Eclipse, Visual Studio Code, and others. But now let's look at some specifically mobile development-focused IDEs.

Here are some examples of mobile dev IDEs:

• Android Studio – the official Android IDE, created to help developers build high quality Android apps for Android devices. It supports Java and Kotlin.
• Intellij – Mostly known to support Java (Java Centric), but with plugins it can support other languages as well. It was created with intelligent coding and ergonomic design. Using it is like a treat.
• Xamarin – a cross-platform app that is completely free and open source. Used to develop apps for both Android and iOS. It supports .NET and C#.
• Xcode – Apple's very own IDE, which is used only to develop Apple products. It allows you to manage your entire workflow from start to finish. Support langs like: Swift, Objective-C and C++.

Web/Cloud-Based IDEs

Recently, cloud-based IDEs have started growing in popularity. This is because they give you access to your code from anywhere compared to offline IDEs. No matter the language you use, there is a cloud-based IDE for almost every usecase.

Here are some examples of cloud-based IDEs:

• Cloud9 – the most powerful and extendable online development platform available because of its integration with AWS. It combines a code editor with a terminal and also has powerful debugging tools. Also allows collaborative programming with teams.
• CodeTasty – a quick and simple to set up IDE. It supports all the major langs we have. It also has its own terminal and an output window. Although it's free, to get other functionalities like collaborations with team members you have to use the paid version.

The above are the most commonly known multi-lang cloud based IDE, but there are a number of others that just don't have the same capabilities as these I listed. They include: Codepen, Replit, Codevny, Codeacademy, and CodeRun.

Many of these more limited IDEs are capable of doing everything you might need them to do. Although they may have some limitations, like you need an internet connection to use them or you may also have to subscribe to others.

If you haven't yet encountered your favorite IDE, then it probably falls into our 4th type. In fact, my favourite IDE is a single-language IDE, which we'll talk about below.

Specific language IDEs

I think most developeres have a favorite language they would choose over the rest. If that is the case, chances are there is an IDE designed specifically for that language. And it probably has more features to help you out compared to the other enviroments. Let's have a look:

• For Python – PyCharm, Spyder, Thonny, IDLE, PyDev.
• For Java – Intellij IDEA, Jikes, Jcreator.
• For C/C++ – Code::Blocks, C-Free, Dev-C++
• For Ruby/Rails – RubyMine, Redcar, RadRails.

Alright, we've now learned what IDEs are, the different types we have, and what their main functionality/capabilities are. Now, on to the next step.

Why do you think developers use IDEs? Or rather, what are the advantages of IDEs (as well as their disadvantages)? Let's break that down to understand the why.

Why Should You Use an IDE When You Code?

Here are some of the main advantages of using an IDE:

• IDEs save you time and effort – the entire purpose of using an IDE is to make development faster and easier. IDEs do this by providing you many helpful resources, shortcuts, and error recognition, and more.
• They're Easy to Setup – An IDE brings different capabilities together in one place, and therefore reduces the struggle of constantly switching between tools. If you're having trouble setting up your IDE, check out this article Here for guidance.
• They support collaboration – most IDEs support groups working together and so can help speed up production.
• IDEs can correct syntax, give warnings, and help you write quality code.
• You can also use them to create drivers and utilities.

Disadvantages of IDEs

There are a few tricky parts to using an IDE, so let's see what they are:

• It's hard to keep up with constant updates including new samples, templates, and newly added features.
• IDEs can't automatically fix errors – you still need knowledge to write clean code.
• Some IDES are complex for beginners to understand.

How to Choose an IDE

Is there something like the perfect IDE? In my opinion, I don't think there is. Usually it depends on the job at hand.

But here are some of the things to consider when you're choosing an IDE:

• The cost – although most IDEs are free, the addons may not be. Most of the paid IDEs comes with premium features and also support, so just choose according to your project's needs.
• Ease of use, packages, and libraries – IDEs that contain plenty of packages and libraries can become harder to use. But this depends on how those libraries and packages are implemented. Choose wisely depending on your needs.
• Server connection – check to see if you're able to deploy your code to the server from your IDE.

Conclusion

Choosing an IDE usually depends on the type of the project you're working on, along with various environmental requirements like platform, programming language, version control system, and more. And of course you also have to take into account budget and personal preferences.

But now that we've gone through these examples above, hopefully you will find the one that's best for you. If you have a favourite, do share which one. Personally I switch between PyCharm while writing Python code and VS Code in other situations.

Enjoy Coding!💻❤

The release of Visual Studio Code single-handedly impacted the developer ecosystem in such a way that there's no going back now. It's open source, free, and most importantly, a super powerful tool.

But with VSCode, Microsoft gave life to another super important thing back in 2016, which is less well-known. It is called Language Server Protocol.

What is Language Server Protocol?

Language Server Protocol (LSP) is a protocol or a way of talking to language servers (just like HTTP or FTP).

Language servers are special programs that run on regular servers. They take in the meta state of editor in which you're coding (for example, where your cursor is currently inside the editor, which token you're hovering over right now), and return a set of actions/instructions – what token should appear next, what should happen when you CMD/Ctrl-click that token, and so on.

This communication happens using a set of rules defined by the protocol. Language Server Protocol could be thought of as a trimmed down version of HTTP and communicates only on JSON-RPC.

Why is LSP required?

You see those fancy autosuggestion and error messages popping up in VSCode all the time? And how, just by adding a simple extension from the VSCode marketplace, you get all that IntelliSense power for a completely different language like C, Python, Java, and so on? That comes from LSP.

Support for autocompletion and IntelliSense for HTML/CSS/JavaScript comes baked into VSCode (just like PyCharm comes baked in with Python support). However, the same support for other languages can be implemented using Language Server Protocol for those languages.

What is JSON-RPC?

JSON-RPC stands for JSON Remote Procedure Call. It is an architecture (similar to how REST is an architecture) but with the fundamental unit being a procedure call rather than an API endpoint in the case of REST.

Here's a simple payload for JSON-RPC:

// Request
curl -X POST —data '{
  "jsonrpc": "2.0",
  "method": "runThisFunction",
  "params": [ "some-param", 2 ],
  "id": 1
}'
// Response
{
  "jsonrpc": "2.0",
  "result": "codedamn",
  "id": 1
}

In this example we're sending a JSON encoded payload following RPC specification. If the server is configured to handle JSON-RPC correctly, it will execute the method runThisFunction with the passed parameters and return the result in the form as shown.

LSP + JSON-RPC

LSP uses JSON-RPC to communicate to remote server. It follows this:

Content-Length: <bytes of JSON>\r\n\r\n<json-payload>

To write an example, it'll be like this:

Content-Length: 78

{"jsonrpc":"2.0","method":"runThisFunction","params":["some-param",2],"id":1}

The LSP requires you to pass the Content-Length header followed by 2 CRLF tokens \r\n. When the running language servers like ccls receive this, they'll respond with an appropriate message:

Of course, in the example above, you can see that ccls says that there is no method called runThisFunction. But you can see that the remote server also responds with a Content-Length header with a JSON-RPC specification.

Why does all this matter?

With the introduction of a formal protocol LSP, Microsoft reduced the famous M x N problem to an M + N problem.

M = Different languages (C, C++, PHP, Python, Node, Swift, Go, etc.)
N = Different editors (VSCode, Eclipse, Notepad++, Sublime Text, etc.)

Previously, for M editors to support N languages, you need M*N solutions. That is, every editor had to implement native support for every language differently.

With the introduction of LSP, the editor only needed to implement support for the Language Server Protocol. Once it did, anyone who makes a language server (following the LSP standards) can be seamlessly integrated with the editor, without the editor ever intelligently "knowing" what language it is working with!

The future of IDEs

As more and more languages come out with their language servers, people will have more ability to choose the editor they like best.

No longer will you have to stick to only XCode for Swift development, or PyCharm for Python. Not only this, but LSPs can also be implemented straight into JavaScript to support IntelliSense in the browser like I'm doing at codedamn, a platform for developers to learn and grow! It's an exciting time to be alive!

Peace,
Mehul

Learning to code by following tutorials works for many people. And yet there tends to be a separate learning curve when you're trying to move out of the tutorial ecosystem and into creating your own projects.

I've written elsewhere about how to escape tutorial purgatory and make progress as a programmer. But to summarize here, it's a necessary step in your growth as a developer to venture out into the wild west of programming and build something. This will expose you to the ins and outs of your chosen coding ecosystem.

Here are five tips to help you move out of those tutorials and into making real progress as a developer by building projects.

1. Choose a Project

Whether you're coding from a book or working through online tutorials, your first step upon leaving the safety of your nest is to choose a project that is specific to your field of interest.

If you're an aspiring front end developer, that might mean creating a basic website. If you're learning Python, that could look like a simple web scraper. Find something that interests you, and research examples to get an idea of what your project might look like when it's complete.

2. Set Up an IDE

If you've been learning from online tutorials which provide a console that handles all of the back end work for you, take some time to set up an integrated development environment (IDE) that is specific to your intended project and ecosystem.

The actual form of your IDE will vary greatly depending on your project. You could be cobbling together a workflow that includes a code editor, command line interface, version control system, and package manager. Or, on the other hand, you might install a game engine that has all of the stuff that you need built-in for you.

The important component of this step is to become comfortable coding in an environment that is standard for the type of work you want to do. This helps you move away from only coding in a browser or following a book.

3. Get Comfortable with Documentation

Here's a glimpse of a familiar workflow when you're beginning a new project:

1. Set up your IDE
2. Code
3. Get stuck or forget the syntax for something
4. Google some half-formed question about the issue
5. Find the official documentation and a handful of Stack Overflow posts
6. Check social media for no reason
7. Return to the documentation and Stack Overflow to find your answer
8. Return to step 2

Unless you're a super expert in your field, chances are that you'll get stuck trying to figure out a solution to some aspect of your project. The official documentation for the library or framework that you're using will likely have some sort of answer - even if it's an obscure one - for whatever's puzzling you. But if it doesn't, someone has probably asked a similar question on Stack Overflow or elsewhere.

Even if there are no answers out there for your specific question, there will be a breadcrumb somewhere that'll lead you to an approach for how to solve your problem.

If you're trying to use ES6 classes in some obscure JavaScript framework, for example, you might not find the exact answer you're looking for. But there will be plenty of similar resources out there that can help you come up with a solution yourself.

4. Ask for Help

One of the best things you can do for yourself as an aspiring developer is to make friends with other developers in your field. They can look at your code and provide feedback about how to make it better.

For some people, the idea of sharing their work and having it critiqued is an anxiety-inducing experience. I recommend working as diligently as you can to overcome this emotion as it will stagnate your growth as a programmer.

When you're starting out with your own projects, it can be extremely helpful to have someone who's already walked the path to look at your work and offer constructive criticism. Even if doing so requires you to rewrite whole sections of code. In many cases, you might be trying to recreate the wheel while other options already exist. There, you'll benefit greatly from learning best practices from experts that have experience in the field.

5. Identify Other Areas for Growth

One project usually leads to another, and you'll quickly identify areas in which you're able to grow as a developer. This might mean that you'll move from front end development to back end, or vice versa, or hop from 2D game programming into 3D.

It might also mean that you need to keep building your skill set just to complete the initial project that you've chosen. There's no shame in learning C#, for example, then deciding to build the back end of a web app, and having to learn all about ASP.NET and Razor Pages before actually making any progress!

Happy coding!

If you enjoyed this article, please consider checking out my games and books, subscribing to my YouTube channel, or joining the Entromancy Discord.

M. S. Farzan, Ph.D. has written and worked for high-profile video game companies and editorial websites such as Electronic Arts, Perfect World Entertainment, Modus Games, and MMORPG.com, and has served as the Community Manager for games like Dungeons & Dragons Neverwinter and Mass Effect: Andromeda. He is the Creative Director and Lead Game Designer of Entromancy: A Cyberpunk Fantasy RPG and author of The Nightpath Trilogy. Find M. S. Farzan on Twitter @sominator.

If you're moving from coding tutorials into creating your own JavaScript projects, you'll want to become familiar with using a version control system like GitHub and benefiting from ES6 features to clean up your code and streamline your development process.

In this new video, we'll walk through cloning an existing repository from GitHub, creating your own local and remote repositories, utilizing node package manager (NPM) to install dependencies, creating a streamlined code base using ES6 classes, import/export modules, and arrow functions, and adding, committing, and pushing changes to GitHub.

Plus, we'll talk through the basic file structure for a Phaser 3 project!

Check it out (50 minute watch):

Happy coding!

If you enjoyed this article, please consider checking out my games and books, subscribing to my YouTube channel, or joining the Entromancy Discord.

M. S. Farzan, Ph.D. has written and worked for high-profile video game companies and editorial websites such as Electronic Arts, Perfect World Entertainment, Modus Games, and MMORPG.com, and has served as the Community Manager for games like Dungeons & Dragons Neverwinter and Mass Effect: Andromeda. He is the Creative Director and Lead Game Designer of Entromancy: A Cyberpunk Fantasy RPG and author of The Nightpath Trilogy. Find M. S. Farzan on Twitter @sominator.

If you're moving from online tutorials to building your own projects, you might be overwhelmed by the idea of setting up your own integrated development environment (IDE), or wonder why you even need one to get your work done.

In this article, I'll discuss what an IDE is and give you some ideas about what yours might look like, particularly if you're working in JavaScript, although the information will be applicable irrespective of language or project type.

Here's a video version of this post if you'd prefer (28 minute watch):

What is an Integrated Development Environment?

An integrated development environment, put simply, is everything a programmer needs to get their work done. The actual makeup of an IDE will vary between programming languages, types of projects, and even between programmers, but there are some things that are common among a lot of IDEs, which I'll cover below.

The simplest way to understand an IDE is to consider an "all-in-one" solution like Unity. As a fully-featured game engine, Unity has everything you'll need to create a 2D or 3D game: a GUI that allows you to build your game world, a code editor (Visual Studio) where you can write scripts, a way to download dependencies and assets, and even GitHub integration so that you can keep track of build versions and collaborate on projects. For smaller projects, Unity can be thought of as a fully functional integrated development environment, where everything is already set up for you after downloading the game engine.

Other IDEs can vary greatly in complexity, particularly if you're coming from an online tutorial that allows you to code right in the browser. One of my gripes with common answers to the question, "what programming language should I learn?" is the notion that learning JavaScript is easier because "it just runs in your browser."

Tell that to anyone who's attempted to set up an IDE for Create React App, which requires several components to get up and running - none of which are apparent when you're working through online tutorials. To actually do work as a developer, you'll need four main things to set up your integrated development environment: a code editor, command line interface (CLI), version control system, and package manager.

Major caveat: your IDE may vary greatly depending on programming language or type of project, but you'll likely need one or more of the following in any case!

IDE Tool #1: Code Editor (and Compiler)

A whole bunch of online tutorials allow you to just code in the browser, which is great for understanding basic programming concepts, but in the long run, you'll need an editor that allows you to save your code (and compile it, if you're using a language like C# or C++).

There are a lot of code editors out there, such as Atom (lightweight, free, and open source), Sublime (super popular with tons of integrations), and Visual Studio / Visual Studio Code (supported by Microsoft and wonderful to work with). It would be reductive to say that they're "all the same thing," as each one provides a different approach to supporting your coding workflow, so you might try one or two before deciding which one you like best.

IDE Tool #2: Command Line Interface (CLI)

If you have a computer, you've undoubtedly used your file explorer or some other navigational GUI to access the file system, create folders, delete files, and so on.

The command line interface (CLI) allows you to do the same thing...in plain text. Which might seem super archaic or annoying at first, but once you wrap your head around chaining commands together and integrating them into your workflow, you'll begin to see the power of the CLI and how essential it is to most development environments.

On Mac, you might be using the Terminal. Because I've installed GitHub for Windows (more on GitHub below) on my machine, I use Git Bash for my work. There are several options here for you, and it might do to check out a few command line tutorials to understand some of the basic principles so that you feel comfortable using it in your IDE.

IDE Tool #3: Version Control System

There are several resources out there that provide overviews of what is version control and why you should use it. Suffice it to say that when you're building anything other than a simple project, you'll need a way to back up your work, share your code with collaborators, and keep track of the different build versions so that you can muck with parts of the code base and not others.

GitHub isn't the only version control system out there, but it is the gold standard at the moment, and it would be worth your while to look up a few tutorials to learn how to take advantage of its features, even if you just wind up using it as a remote backup method.

Additionally, while there are several addons to integrate GitHub right into your code editor (or game engine), the standard practice for doing Git-related tasks is by using the command line interface, which provides another reason for becoming proficient with your CLI of choice.

IDE Tool #4: Package Manager

For some IDEs, like with our Unity example above, all you need to do is download and install software to get started with building your projects. Most of the dependencies that you'll need will be included with your initial download, and if not, there will be a way to access them from within the game engine (e.g. Unity's Asset Store).

For other, more choose-your-own-adventure IDEs, you'll need to piece things together yourself, and one of the essential components will be a package manager like NPM or Conda.

Package managers do a lot of things, and at their most basic functionality, they'll help you to install all the dependencies you'll need to get your work done. If you want to get started on a React project, for example, you'll navigate to a folder through your CLI, and, after installing NPM (which is bundled with Node.js) type:

npx create-react-app my-app 
cd my-app 
npm start

The first line basically says: "Hey, NPM! Download all the dependencies for Create React App, and put them in a folder called 'my-app.'"

The second line then tells your CLI: "Navigate to the new directory called 'my-app.'"

The third line gets the action going: "NPM, it's me again. Start a development server that displays my project in a browser and updates it whenever I make changes to the code."

Once you've installed all of the necessary dependencies using your package manager, you'll begin working in your code editor and using the command line interface to make pull requests or push code to a remote repository using your version control system.

In summary, an integrated development environment comprises all of the things you need to get your work done, and varies based on language, project type, and your personal preference. Ordinarily, IDEs include a code editor (and compiler), command line interface, version control system, and package manager, but your integrated development environment might have different requirements or a combination thereof.

You can do it!

If you enjoyed this article, please consider checking out my games and books, subscribing to my YouTube channel, or joining the Entromancy Discord.

M. S. Farzan, Ph.D. has written and worked for high-profile video game companies and editorial websites such as Electronic Arts, Perfect World Entertainment, Modus Games, and MMORPG.com, and has served as the Community Manager for games like Dungeons & Dragons Neverwinter and Mass Effect: Andromeda. He is the Creative Director and Lead Game Designer of Entromancy: A Cyberpunk Fantasy RPG and author of The Nightpath Trilogy. Find M. S. Farzan on Twitter @sominator.