DEV Community: John Doe

First Glance: WSL2 & GoLand on Windows 11

John Doe — Wed, 06 Oct 2021 18:07:17 +0000

Windows 11 was just released a few days ago and GoLand introduces support for projects inside the WSL2 mount and it is available in the Early Access Program. It is a good time to get started and combine things for modern Go development step-by-step.

I will show you a small introduction to configure WSL2 and GoLand, how to install Go SDK and open projects inside WSL2 mounts. First off, we have to install WSL2 under Windows 11. There are a few steps to consider.

Configure WSL2 on Windows 11

First off, we are going to install WSL2 itself via wsl --install in PowerShell with admin rights. The operation takes a bit of time and at the end of it, you can see the successful message: The requested operation is successful. Changes will not be effective until the system is rebooted.

I would say that the process of installing WSL2 in Windows 11 is much easier than earlier. One command does all things.

After that, open Ubuntu distribution (or change to a different one using Microsoft article), enter username, password and install Go SDK.

Install Go SDK under WSL2

There are a few ways to install Go SDK:

Official guide from Go team.
Go snap package on Ubuntu.

I prefer an official guide. It is pretty well documented and easy to start. Pay attention that it requires sudo privileges for the user.

wget -c https://golang.org/dl/go1.17.1.linux-amd64.tar.gz -O - | sudo tar -xz -C /usr/local

A few preparations to use it:

Specify export PATH=$PATH:/usr/local/go/bin under $HOME/.profile.
Load $PATH changes to the current shell session: source ~/.profile.

To confirm that Go is configured properly, we can execute go version and should get the following output:

go version go1.17.1 linux/amd64

We are good to go to the next section.

Project opening in GoLand

Let's create our project right from GoLand. On Welcome Screen, select New Project and specify project location under WSL2 mount. You can create directories from the pop-up by right-clicking on the root folder. Make sure that the path to the project contains \\wsl$ prefix:

\\wsl$\Ubuntu\home\s0xzwasd\Projects\Go\dev-to-example

GoLand highlights a warning and requires Go SDK in WSL. We can click on the Plus icon and choose Local, then find Go SDK (\\wsl$\Ubuntu\usr\local\go by default). Create a project and wait for Go SDK indexing.

As an example, I take Go by Example: Interfaces code snippet. Let's run it via gutter icons around main() function. After that, try to debug a bit.

We've configured all necessary environments to get developer things done. 🎉

Limitations

So, there are several limitations at the moment, especially symlinks and File Watchers are not supported (IDEA-253253, WEB-38925) as well as External Tools (IDEA-201045) and Mozilla RR (GITHUB-2506).

Conclusion

We can use WSL2 and GoLand for Go development for now. It is much easier to get started and separate personal and development environments. As a benefit of Windows 11, we can run GUI apps inside WSL2 and it looks really promising.

Run tests with -race flag in GoLand 🏎

John Doe — Tue, 29 Jun 2021 09:14:06 +0000

To understand -race flag better, we can refer to the Go documentation:

Data races are among the most common and hardest to debug types of bugs in concurrent systems. A data race occurs when two goroutines access the same variable concurrently and at least one of the accesses is a write.

It is easy to use via the command line interface. So, how to use -race flag in GoLand with tests? Is it possible to use -race always in tests? Here you go.

Add `-race` flag to a specific test

Navigate to a test file, click on the gutter icon near the test name and select Modify Run Configuration.
Add -race entry to the Go tool arguments field.
Save changes and run the configuration again.

Add `-race` flag to all tests

Navigate to Help | Find Action in the main menu (Shift+Shift by shortcuts) and type Edit Configurations, press Enter.
Select the Edit configuration templates option, find Go Test.
Add -race entry to the Go tool arguments field. Pay attention that changing a template does not affect the existing configuration and you should add the flag manually to the same field.

Congratulations! 🎉 Now your tests use -race flag and you can see warnings from the compiler.

Configure revive Go linter in GoLand

John Doe — Fri, 05 Mar 2021 11:55:35 +0000

Fast, configurable, extensible, flexible, and beautiful linter for Go. Drop-in replacement of golint. Revive provides a framework for development of custom rules, and lets you define a strict preset for enhancing your development & code review processes.

Let’s configure revive linter and implement it into GoLand. First of all, we need to download the package using go get action.



go get -u github.com/mgechev/revive

After that, navigate to $GOPATH/bin and try to execute ./revive to make sure that it works as expected. There is shouldn’t be any errors.

So, the main advantage of revive is easy configurable configs. Go to our project directory and add a new one. I create config.toml file with the recommended configuration from docs. Install Toml plugin if you are interested in syntax highlighting.



ignoreGeneratedHeader = false
severity = "warning"
confidence = 0.8
errorCode = 0
warningCode = 0

[rule.blank-imports]
[rule.context-as-argument]
[rule.context-keys-type]
[rule.dot-imports]
[rule.error-return]
[rule.error-strings]
[rule.error-naming]
[rule.exported]
[rule.if-return]
[rule.increment-decrement]
[rule.var-naming]
[rule.var-declaration]
[rule.package-comments]
[rule.range]
[rule.receiver-naming]
[rule.time-naming]
[rule.unexported-return]
[rule.indent-error-flow]
[rule.errorf]
[rule.empty-block]
[rule.superfluous-else]
[rule.unused-parameter]
[rule.unreachable-code]
[rule.redefines-builtin-id]

Configuration and installation steps are completed. Now is time to configure File Watcher in GoLand.

File Watcher is a GoLand tool that allows you to automatically run a command-line tool like compilers, formatters, or linters when you change or save a file in the IDE.

Go to the IDE settings (Preferences / Settings | Tools | File Watchers) and add a new file watcher, select custom template.

Add a name, e.g. revive linter, then set File type to Go files. Scope option should be Project Files. The next step is to fill out Tool to Run on Changes:

Program: path to revive linter ($GOPATH/bin), e.g. /Users/user.name/go/bin/revive.
Arguments: -config config.toml -formatter unix ./…
- -config path to our config that we created previously.
- -formatter type of formatter. I prefer Unix.
- ./.. to check all Go files inside the project directory.
Output path to refresh: empty.
Working directory: $ProjectFileDir$ macro.
Environment variables: empty.

Expand Advanced Options and select Show console to Always and select/unselect other checkboxes if needed. The result of the configuration is presented in the screenshot below.

That’s it. Save changes, then try to create a simple file and save changes. Congrats! 🎉

All about console logging in JavaScript

John Doe — Sat, 23 May 2020 20:17:35 +0000

In this article I want to collect all the information about logging in the console. Do you want to pump your skill in this and surprise familiar developers? Then let's get started! ✨

console.log()

This is probably one of the most frequent commands that we use when debugging the application. However, even this command has chips you may not be aware of. For example, you can pass several arguments:

const address = 'dev.to';
const protocol = 'HTTPS';

console.log(protocol, address);

In addition, you can transfer objects, arrays or functions:

const obj = { name: 'John', lastname: 'Doe' };

console.log(obj);

console.warn() & .error() & .debug() & .info()

This is a very interesting logging feature, which should not be abandoned and can be used daily.

Some of the most important advantages of using: entities are separated, warnings or errors during logging can be recognized immediately, you can make a filter of the desired type.

console.warn() ⚠

Using console.warn(), you can display a warning if something suddenly goes wrong, but, for example, it does not greatly affect the main operation of the application.

const a = 3;
const b = -5;

const multiply = (a, b) => {
    b < 0 ? console.warn('Ooops. b is less than zero!') : null;

    return a * b;
}

console.error() 🌋

Obvious use: when something seriously went wrong. More informative and immediately visible, unlike console.log().

const firstName = 'John';
const secondName = undefined;

const concatNames = (firstName, secondName) => {
    return firstName && secondName ? `${firstName} ${secondName} : console.error('Something goes wrong!');)
}

console.debug() 🐛

It is very convenient to use the application for debugging, since then you can go through the entire code and remove it if you suddenly forgot. 🧹

const car = {
    model: 'Audi',
    year: 2020
    price: 132043
}

console.debug(car);

console.info() ℹ

It can be used to display some kind of reference information, for example, the execution time of a specific code / function.

console.info(`Code executed ${time} seconds`);

Variables and special values

When using string values, you can specify variables that are declared with the following arguments. Be sure to specify the type of value: string, number, and so on.

console.log("Hello, my name is %s and I'm %d years old!", "Daniil", 22);

In the example above, we made two variables with different types: string and number.

In addition, you can use tabs or newlines. The main thing is not to forget the escape of the character :)

console.log("\tThat tabs!");

Now you can smoothly switch to using CSS in the console and create beautiful output 🎉

Using CSS in console! 🎨

We came to the most interesting. Using a special directive %c, you can set CSS properties for a string. Pass the styling itself as the second argument (most styles are supported). Let's look at an example right away.

console.log("This is %cCSS", "color: aqua");

Now in the example, «CSS» will be displayed with aqua color.

Who uses VS Code there is a special extension that will help with this.

VS Code Extension: Colored Console Log

Output grouping

For ease of reading the logs, they can be grouped. This will help if you have a large amount of data that can be combined.

console.group("That console group!");
    console.log("Info in group #1");
console.groupEnd();

«Assert» values

In short, console.assert() displays an error message if the statement is false. Let's see an example.

const foo = undefined;

console.assert(foo, "Foo is not set now");

// Assertion failed: Foo is not set now

Stack tracing 🏎

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

In the console, we get the function call stack in the following order:

bar
foo

Try it out!

I prepared a small sandbox where you can test all of the listed use cases (grouping in this sandbox is not supported at the time of writing).

Codesandbox

I will be glad to see examples of your use of logging in the comments :)

Using SCSS && CSS variables in React

John Doe — Wed, 18 Mar 2020 16:31:09 +0000

Using variables allows you not to remember the «magic» numbers of each value, just declare the variable once and use it throughout the project. This will help in the future, when it will be necessary to change some value, then we will do it in only one place. We can say that this is a CSS on small steroids.

There are two approaches to organizing variables: using SASS (SCSS) and inline CSS variables. We will see both, they are conveniently compatible in the React project. This is my experience that I applied in one of the projects and, as it seems to me, it is convenient. Check out CSS variable support on caniuse (hope you don't have to work with IE11 😅).

Let's start with an empty sheet, but in order not to configure Webpack from scratch, we will use a very popular solution — create-react-app. In the console, execute the command:

npx create-react-app my-app

Wait until everything is installed, then go to the project folder and use npm or yarn to install a new dependency for working with SASS and SCSS-syntax.

yarn add node-sass

The last and most boring 😒 thing remained of the preparatory phase: we rename all .css files to .scss, do not forget to update the import of these files in the components themselves.

Everything is behind, we are launching the project, our project should open without errors, but so far there are no changes in it either.

yarn start

Now for the fun part. To work with variables, I create a separate folder in the src directory, call it design-tokens. In this folder we create two files: _scss-variables.scss and css-variables.scss. As a result, the structure of the project should look something like the screenshot below.

Excellent! Do not forget to import these two files into one of the root components, I will have index.scss.

@import "./design-tokens/scss-variables.scss";
@import "./design-tokens/css-variables.scss";

Most of the path has been covered, very little remains: create variables and understand how to use them. Let's start with the creation.

A frequent question that arises for those who begin to use variables: what to put into variables, what values and what properties? And there is no definite answer, it all depends on your and team preferences. I can give advice that will give understanding at the initial stage: create color variables, font sizes and names, line-height. This will be enough and save a lot of time in the future.

Let's start by creating CSS variables first, for this we’ll go to the css-variables.scss file and create a «root» selector, which will later help us use the variables throughout the project. For example, I will make the color variables of the flag of Germany, in order to further use them as the main color scheme in the project.

:root {
  --color-primary: #000000;
  --color-secondary: #DD0000;
  --color-additional: #FFCE00;
}

Notice how the variables are called. I could name them --color-black, --color-yellow and so on, but what if the designer of our project comes and says that now we will use orange instead of yellow? Try to name variables abstractly so that they are responsible for their purpose, rather than expressing a specific entity (for example, a specific yellow color).

We are done with CSS variables, now you can go into any component styles file and use them. Perhaps I will change the background-color of the App component in the App.scss file.

.App-header {
  background-color: var(--color-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

Wonderful! Now write variables this way throughout the project.

The question remains: why do we need the _scss-variables.scss file and how to use it? For myself, I found a solution that I use SCSS variables for indentation and media-queries, since I use them less often and not in all components. For example, in the file, create several variables for margins and paddings.

$spacer-xs: 4px;
$spacer-s: 8px;
$spacer-m: 12px;
$spacer-l: 17px;
$spacer-xl: 28px;

The syntax is slightly different, but the essence is the same, we declared five variables with specific values in pixels. Unlike CSS variables, they are not globally accessible and need to be imported into each file in which we want to use. Import is similar to CSS syntax, I will create the components folder, inside which is the Card folder, where I will add the Card.scss file. I import variables inside this file. Now I can use both types of variables in one file, which I will do.

@import "../../design-tokens/scss-variables.scss";

.card {
  background-color: var(--color-secondary);
  margin: $spacer-m;
}

Now we have two types of variables that we can use throughout the project and quickly override if necessary. Create, invent new and practice in consolidating the acquired skills, I wish you all productive work!