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.

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!

I find that personalizing my IDE helps me enjoy the time I spend using it more. I want to share that same spark of joy with you all, and have been searching for and testing out the best extensions to download. And many of these will help you be more productive.

This article goes beyond theming extensions, so I suggest picking out a theme first. Or try out my current favorite theme, Dracula Refined.

Indent Rainbow

Indent Rainbow is a great tool to add color and productivity to your setup. It can also help serve as an alignment check for your indentation. Each indentation is given an alternating rainbow color.

Indent Rainbow

Bonus: Indent Rainbow Palettes

Want custom colors in your Indent Rainbow? Check out Indent Rainbow Palettes by Evondev.

After installing Indent Rainbow, install this extension and follow the outlined steps to select a new gradient palette.

Indent Palettes1

Indent Palettes2

Bracket Pair Colorizer

This will add rainbow colors to brackets, and matching brackets will have the same color. This extension has saved me a number of times when looking for a missing or extra bracket.

The Bracket Pair Colorizer is another popular extension with over 4 million installs.

Depreciation Notice for 2022

This extension has recently become depreciated. This is because of upgrades to VSCode allowing for a bracket pair colorization setting. This can be toggled on with "editor.bracketPairColorization.enabled": true in your user settings.

The improved performance of this feature makes it a better choice, but if you'd prefer to not edit your user settings, I'd suggest looking for extensions that handle this for you such as Bracket Pair Colorizer or Rainbow Brackets.

Colorize

Colorize visualizes color variables by highlighting them with their color value. This is a handy timesaver for translating hex codes and variable names.

Photo Credit: Colorize

Peacock

Peacock provides optional window colors. It is great for managing multiple workspaces. It can be easy to forget which workspace you are in when jumping between similar windows, but not with the bright colors provided by Peacock. You can even customize workspace colors.

Photo Credit: Peacock

VSCode Icons

Adding icons can help when navigating through your folders. VSCode Icons has an extensive library of icons matching a variety of file types.

For example, you can easily see if you are selecting a TypeScript file or a JavaScript file based on the icon. It also adds an extra touch of color and detail to folder structures.

Photo Credit: vscode-icons

TODO Highlight

TODO Highlight will customize your list of TODO comments and make them pop with color. It can be easy to overlook commented out code, but not with this extension, as it is difficult to overlook text that is bright orange.

TODO and FIXME are built in keywords. You'll have the option to customize the color of these and add additional keywords.

Photo Credit: TODO Highlight

TL;DR

Here is a condensed list of the extensions mentioned in this article.

• Indent Rainbow
• Bracket Pair Colorizer
• Colorize
• Peacock
• VSCode Icons
• TODO Highlight
• Dracula Refined Theme

I hope these extensions will bring a rainbow of colors to your VSCode, too.

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.

In this article, you'll learn what a code editor and an IDE are. Then I will also share 7 online editors and IDE's that work best with HTML, CSS, and JavaScript.

What is a Code Editor?

A code editor is a tool that is designed to write and edit code. Popular offline code editors include Visual Studio Code, Atom, Brackets, and Sublime Text.

Code editors make it possible for web developers to write programs that will run on the web. Code editors are helpful especially because they highlight syntax errors and provide automatic code indentation, code completion, and other useful features.

What is an IDE?

IDE stands for integrated development environment. You can use this tool as a compiler, editor, and debugger – so it's much more involved than a basic code editor.

A compiler is a program that takes the code you write and translates it into something machines can read. A debugger is a tool that allows you to step through your code line by line and identify issues (bugs) so you can fix them.

Why Choose an Online Editor Over a Local Editor?

When is it a good time to choose an online editor over your local environment like Visual Studio Code?

There may be times where you just want to share a quick working example on Stack Overflow and using a free online editor is a quicker solution than building it locally.

Or maybe you want to share a small working example of a new feature for documentation? It would be easier to place your code into an online editor and share the URL than go through the trouble of deploying the project from your local device.

Now that you know what code editors and IDEs are, let's discuss some of the most popular ones out there at the moment.

CodeSandbox

CodeSandbox is an online IDE and code editor that makes it easy for developers to create and share their projects.

Once you create a free account, you can start coding by choosing one of the templates that comes with all the starter files and boilerplate code.

You can add any files and dependencies you need to on the left hand side and see your results in the preview window on the right.

If you want to share your work, you can copy the URL address or deploy your production app to Netlify or Vercel.

If you are interested in additional features like private NPM packages, sandboxes and GitHub repositories, then you will need to signup for the paid membership.

Replit

Replit is an online IDE that makes it easy to start building and sharing your web creations. Once you login into your free account, you can choose your language and create a new repl.

Replit gives you the option to add files, packages, and unit tests to your projects. If you want to share your projects, then copy the link right above the preview window on the right hand side.

If you want to collaborate with other developers, you can invite them into your repl and code synchronously. You can also chat in real time with the other developers through the chat function on the bottom left hand corner of the screen.

If you are interested in features like private repls and additional storage, then you will need to sign up for the paid membership.

StackBlitz

StackBlitz is an online code editor that makes it easy for developers to create and deploy front end, back end and full stack applications. Login using your GitHub account, and choose from one of the templates.

StackBlitz allows you to create dozens of files, add packages, and connect to your exiting GitHub repositories. You can also share your project using the URL located above the preview window on the right hand side.

If you want to deploy a production version of your application, you can deploy it using Firebase.

If you are interested in additional features like unlimited private projects and file uploads, then you will need to sign up for one of the paid accounts.

Codepen

Codepen is an online editor where you can create and share small frontend creations. With a free account, you can create unlimited pens and one project.

Pens are small creations that contain one HTML editor, one CSS editor, and one JavaScript editor. Pens do not support multiple files.

Pens come with formatting and analyzing tools to check for syntax errors. You can also use CSS and JavaScript preprocessors, add packages, and add external scripts.

The free account allows you to create one project with a limit of ten files. If you want to create more projects, then you will need to sign up for Codepen PRO.

JSFiddle

JSFiddle is an online IDE that allows you to build and share your front end code snippets. This tool supports over a dozen JavaScript libraries and frameworks as well as CSS preprocessors like Sass.

You can also build projects with other developers and correspond over chat by choosing the collaborate option.

JSFiddle is great to use when you need to provide code snippets for Stack Overflow answers, or to use as a demo for documentation.

Glitch

Glitch is an online code editor that makes it easy to create and share your front end, back end and full stack applications. You can signup for free and get started with one of the templates.

Glitch provides many helpful tools including a formatting tool, a terminal, an option to export your projects to GitHub, and an option to add custom domains.

You also have the option to share your work or invite other developers to build alongside you by clicking the share option located at the top left hand corner.

If you are interested in additional features like private projects, then you will need to signup for the paid membership.

PLAYCODE

PLAYCODE is an online code editor that makes it easy to create and share front end projects. PLAYCODE supports TypeScript, React, CoffeeScript, jQuery, Sass, Less, and more.

If you want to share your project, then you can find the shareable links in the top left hand corner of the editor.

If you are interested in additional features including private projects and custom URLs then you can signup for a paid membership.

Conclusion

There are many benefits for choosing an online IDE or code editor. You don't have to worry about downloading any software and you can share your project very easily in a matter of minutes.

A lot of developers will use these tools if they need to share code snippets for Stack Overflow answers, create a demo project for documentation, or share ideas with other developers.

I hope you enjoyed this article.

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!💻❤

I recently got myself a “new” laptop – a Lenovo x270 (yay)! And once again I needed to set up a Python virtual environment. So of course I Googled for a solution, just to find my previously written article on the same topic!

So in this article, I'll update the instructions based on my newly acquired knowledge.

And let me tell you, it’s easier than before because we are going to do only two things:

• Install virtualenvwrapper
• Edit the .bashrc file

Prerequisites

In this article I will show you how to set up virtualenvwrapper with pip3 (pip for Python 3). We are not going to use Python 2 because it's no longer supported.

To complete this tutorial, you will need a computer with Ubuntu 20.04 installed and an internet connection. Also, some knowledge of the terminal and Vim editor would be useful.

Setting up a Virtual Environment

Now open your terminal in the home directory by right clicking and choosing the option “Open in Terminal”. You can also press the CTRL, ALT, and T keys on your keyboard at the same time to open the Terminal application automatically.

You first need to create a special directory that will hold all of your virtual environments. So go ahead and create a new hidden directory called virtualenv:

mkdir .virtualenv

pip3

Now you should install pip for Python3:

sudo apt install python3-pip

Confirm the pip3 installation:

pip3 -V

virtualenvwrapper

virtualenvwrapper is a set of extensions for virtualenv. It provides commands like mkvirtualenv, lssitepackages, and especially workon for switching between different virtualenv environments.

Install virtualenvwrapper via pip3:

pip3 install virtualenvwrapper

bashrc file

We are going to modify your .bashrc file by adding a row that will adjust every new virtual environment to use Python 3. We will point virtual environments to the directory we created above (.virtualenv) and we will also point to the locations of the virtualenv and virtualenvwrapper.

Now open the .bashrc file using the Vim editor:

vim .bashrc

If you still haven’t used Vim before or you don’t have it installed on your computer, you should install it now. It is one of the most widely used Linux editors and for good reason.

sudo apt install vim

After you've installed Vim open the .bashrc file by typing in the vim .bashrc command in your terminal. Navigate to the bottom of the .bashrc file, press the letter i to enter insert mode in Vim, and add these rows:

#Virtualenvwrapper settings:
export WORKON_HOME=$HOME/.virtualenvs
VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
. /usr/local/bin/virtualenvwrapper.sh

After you are done, press the esc key, then type :wq and press enter. This command will save the file and exit Vim.

Now you need to reload the bashrc script. There are two ways to do it – close and reopen your terminal, or execute this command in the terminal:

source ~/.bashrc

To create a virtual environment in Python3 and activate it immediately use this command in your terminal:

mkvirtualenv name_of_your_env

To deactivate the environment use the deactivate command.

To list all available virtual environments use the command workon or lsvirtualenv (lsvirtualenv will show the same result as workon but in a fancier way) in your terminal:

workon

lsvirtualenv

To activate one specific environment use workon + name of your environment:

workon name_of_your_env

There are several useful command you might need to use someday:

Rmvirtualenv will remove a specific virtual environment located in your .virtualenv directory.

rmvirtualenv name_of_your_env

Cpvirtualenv will copy the existing virtual environment to a new virtual environment and activate it.

cpvirtualenv old_virtual_env new_virtual_env

Well done! You have now created your first isolated Python 3 environment.

Thank you for reading!

Check out more articles like this on my freeCodeCamp profile, Medium profile, and other fun stuff I build on my GitHub page.

Let me tell you a story. Recently, I realized that I needed to review how to set up virtualenvwrapper on top of virtualenv in Ubuntu 18.04. I have completed this process several of times on different computers, and every time it seems to be just a little bit different than before.

I just got a new laptop and on the way home I read several tutorials on “How to set up virtualenvwrapper on Ubuntu 18.04”. And let me tell you – it seemed really easy because all of those tutorials were pretty straight forward and basically explained how to do these three 3 things:

• Install virtualenv
• Install virtualenvwrapper
• Edit .bashrc/.bash_profile or both

But even though I read all those tutorials none of them really worked for me.

I had several errors while trying to figure out what went wrong while following the tutorials.

First I got some of “mkvirtualenv: command not found”, then a little of “-bash: /usr/bin/virtualenvwrapper.sh: No such file or directory”, and then a touch of “ERROR: virtualenvwrapper could not find virtualenv in your path”.

After some research I realized that all virtualenvwrapper Ubuntu 18.04 tutorials are copies an old text written before April 2016 (the release date of Ubuntu 16.04).

I know this because from Ubuntu 16.04 and onward the location of vritualenvwrapper’s pip installation changed from /usr/local/bin/virtualenvwrapper.sh to ~/.local/bin/virtualenvwrapper.sh. Note that the local directory is hidden.

So I'll start by writing a tutorial that will show you how to avoid all those issues mentioned above.

Prerequisites

In this article I will show you how to set up virtualenvwrapper with pip3 (pip for Python 3). I chosen this version of pip instead of a Python 2 because Pythons 2's end of life was January 1. 2020.

Python 2 will retire in… https://pythonclock.org/

To complete this tutorial you will need a computer with Ubuntu 18.04 installed and an internet connection :). Also some knowledge about terminals and the Vim editor would be useful. I will assume you already updated and upgraded your system.

Setting up a Virtual Environment

Now open your terminal in the home directory by right clicking and choosing the option “Open in Terminal”. You can also press the CTRL, ALT, and T keys on your keyboard at the same time to open the Terminal application automatically.

You first need to create a special directory that will hold all of your virtual environments. So proceed with creating a new hidden directory called virtualenv.

mkdir .virtualenv

Now you should install pip for Python3.

sudo apt install python3-pip

Confirm the pip3 installation.

pip3 --version

Now install virtualenv via pip3.

pip3 install virtualenv

To find where your virtualenv was installed, type:

which virtualenv

Install virtualenvwrapper via pip3:

pip3 install virtualenvwrapper

We are going to modify your .bashrc file by adding a row that will adjust every new virtual environment to use Python 3. We will point virtual environments to the directory we created above (.virtualenv) and we will also point to the locations of the virtualenv and virtualenvwrapper.

Now open the .bashrc file using Vim editor.

vim .bashrc

If you still haven’t used the Vim editor or you don’t have it installed on your computer you should install it now. It is a widely used Linux editor, and for good reason.

sudo apt install vim

After you've installed Vim open the file .bashrc file by typing the vim .bashrc command in your terminal. Navigate to the bottom of the .bashrc file, press the letter i to enter the insert mode of Vim, and add these rows:

#Virtualenvwrapper settings:
export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
export WORKON_HOME=$HOME/.virtualenvs
export VIRTUALENVWRAPPER_VIRTUALENV=/home/goran/.local/bin/virtualenv
source ~/.local/bin/virtualenvwrapper.sh

After you are done, press the esc key. Then type :wq and press enter. This command will save and exit the Vim editor. Close and reopen your terminal when you’re done.

To create a virtual environment in Python3 and activate it immediately, use this command in your terminal:

mkvirtualenv name_of_your_env

You should confirm that this environment is set up for Python3:

Python -V

To deactivate the environment use the deactivate command.

deactivate

To list all available virtual environments use the command workon or lsvirtualenv (same result as workon but shown in a fancy way) in your terminal:

workon

lsvirtualenv

To activate one specific environment use workon + name of your environment:

workon name_of_your_env

There are several useful command you might need to use someday:

Rmvirtualenv will remove a specific virtual environment located in your .virtualenv directory.

rmvirtualenv name_of_your_env

Cpvirtualenv will copy the existing virtual environment to a new virtual environment and activate it.

cpvirtualenv old_virtual_env new_virtual_env

Well done! You have now created your first isolated Python 3 environment.

Thank you for reading! Check out more articles like this on my freeCodeCamp profile and other fun stuff I build on my GitHub page.

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.

Let’s face it: Developing distributed applications is painful.

Microservice architectures might be great for decoupling and scalability but they are intimidatingly complex when it comes to development.

Local Kubernetes clusters (Minikube), long build times (Docker), and awkward or even nonexistent solutions to debugging is how we started. Two years in, we have automated everything: nothing runs on my local machine anymore and I can start coding and debugging individual components on any branch in just 15 seconds. ?

I now enjoy working on our project so much and believe this is one of the most streamlined setups out there. In the following I want to share that experience.

Starting with a Preview Environment

To get started on a bugfix or feature, I just need to create a new branch on GitHub. This will immediately trigger our CI servers (we use Jenkins) which then deploys a preview application to a GKE cluster. The application lives in a namespace corresponding to the branch name and, using the preview URL, I can access and use the application.

Since I only branched off and didn't push any changes, the build artifacts are cached and the deployment takes only a few seconds. But even once I push changes, the build will run quickly as it only rebuilds what is really necessary.

Starting to Code

Next up I spin up a development environment to work on my task. We use Gitpod, which similarly to a CI server prebuilds dev environments for any branch. A click on a button from any of our project’s GitHub pages starts a fresh dev environment for exactly that branch and opens it in my browser.

The dev environment is up after ~15secs and awaits me with a fresh clone of our repo and the correct branch checked out. Furthermore, the project is fully built and even all dependencies are downloaded already. The terminal welcomes me with the following message:

The IDE is preconfigured with all the VS Code extensions we need, in our case Kubernetes, Docker, MySQL, Go and TypeScript. It is also already connected to the Kubernetes cluster running the preview environment as well as the corresponding database. So I can, for example, type 'kubectl get all' in my terminal and see all the deployed kube objects.

The connection is based on a secret token that every developer has to put into their user account once and which is injected when starting a dev environment.

Although these ephemeral dev environments run in my browser, they provide all the state-of-the-art tools, allowing me to code, compile, run and debug code as well as interact with the database and the cluster.

Of course, I can now push any of my code changes to GitHub and wait for the CI to update my preview environment accordingly. Since the build is caching heavily, small changes are deployed in a minute or so. Most of the time, however, a minute is way too long. We need an instant, hot-reloading experience that allows to debug any service in the context of the full application. Enter Telepresence.

Debugging with Telepresence

I want to be able to debug any individual service in the context of the full application. Instead of waiting for redeploys, our components have proper launch configs to debug them using Telepresence.

Telepresence replaces a Kubernetes deployment with a proxy that forwards all communication to a locally running process. So in short I can start a local debug session and have it working in the context of my preview environment.

This works fantastically and is the best way I’ve seen so far for debugging Kubernetes services. It allows me to reuse all the existing debugging tools available.

Pushing and Review

Once I’m happy with my changes, I push to my branch and create a Pull Request. I can do that from within Gitpod which is quite convenient.

Jenkins will now update the preview environment and Gitpod prebuilds a new dev environment. So when a colleague wants to start reviewing my changes, they can try them out immediately and quickly launch a dev environment for deeper inspection. From within Gitpod they can add comments to the code and even approve (or reject) the PR.

Our Toolchain

Conclusion

Achieving fast turnarounds and automated setups for distributed applications is hard but an absolute necessity for getting into a productive flow. Any friction in this will have a bad effect on the productivity of your team.

A fast build with preview environments and the slick Telepresence-based debugging experience have been an enjoyable productivity boost for us. If Gitpod didn’t exist we’d have to build it ;).

Do you have questions? Reach out, we are happy to help.

Note: Some of the features in Telepresence require system calls that are currently only allowed in Gitpod self-hosted.

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.