teleren/devto huggingface dataset:
Find the IP address of your WSL instance
Tags: development, wsl
Published: 2021-09-06 14:09:37

In Windows, I'm exclusively using WSL2 for development purposes. But sometimes, it's nice to have a GUI to do some works. For example, you are using a DB engine running in Ubuntu via WSL2 but you'd like to read your data in a nice way. When you find out how it works, it's simple.

Well, I did the digging for you and I'll show you how it works (whatever the WSL version you're using).

## Check your WSL instances

For various reasons, you might have more than one WSL instances on your machine. For example, using docker will set up some depending on your uses. We need to find if this is our case. If it is, then we need to check which one is the default one and change it to the one we are interested in.

Make sure to run these commands in a PowerShell terminal.

List all the instances:

```
    PS C:\Users\adrien> wsl -l -v
      NAME                   STATE           VERSION
    * docker-desktop-data    Stopped         2
      Ubuntu                 Running         2
      docker-desktop         Stopped         2
```

As we can see, I have 3 instances of WSL. Since Docker is not running at the time, it shows as `Stopped`. The `*` shows the default instance which is not the one we are interested in. We want `Ubuntu`.

If this is not your case, meaning you only have one, you can skip the rest and go to "*Find the IP address*".

Change the default instance:

```
    PS C:\Users\adrien> wsl --set-default "Ubuntu"
    PS C:\Users\Plouf> wsl -l -v
      NAME                   STATE           VERSION
    * Ubuntu                 Running         2
      docker-desktop         Stopped         2
      docker-desktop-data    Stopped         2
```

Smooth.

## Find the IP address

Now, that's gonna be simple. Run this command:

```
    PS C:\Users\adrien> wsl hostname -I
    172.24.72.193
```

EZ.
Sync container's clock with host machine
Tags: docker, containers, sync, wsl2
Published: 2021-09-06 14:07:03

---
title: Sync container's clock with host machine
published: true
description: Command to sync the container's clock with that of the host machine.
tags: docker, containers, sync, wsl2
//cover_image: https://direct_url_to_image.jpg
---

I recently had a problem while trying to use Google sign-in in a development containerized environment. There was something like 36 seconds difference, I don't remember if it was ahead or behind, from the container to Google servers but it was working fine if I ran the app locally.

Then this morning I was trying to use some Amazon AWS S3 bucket and the system failed with the following error:

`RequestTimeTooSkewed: The difference between the request time and the current time is too large.`

I currently use Windows, not because I particularly liked it but because it was the preinstalled OS, but I must confess I am favorably surprised with WSL2 and all the effort Microsoft has been doing towards cloud development, aka Remote Containers. It took me about ten minutes to find out the things online so I decided it was time to write another small post to have it as a reference for future time.

The findings here are not mine, but part of [this StackOverflow answer](https://stackoverflow.com/a/55245963/4483723), that references [this Github's issue](https://github.com/docker/for-mac/issues/2076#issuecomment-353749995) in Docker for Mac repository.

The trick is done by this super simple command:
```bash
hwclock -s
```
You can use it in a container without having to stop it or restart it, **IF** you are running in *privileged* mode.

Just as a tip, to be used with some common sense, I set the dev container I use to *privileged* in the `docker-compose.yaml` and add a small script to my repo's package to be able to quickly run it from yarn:

```json
{
  "name": "my-repo",
  "scripts": {
    "clock-sync": "docker exec -it -u root my-container /bin/sh -c \"hwclock -s\""
  }
}
```

I think the command can be used in any container and it affects all of them, I was not able to dig much into how all of this happens, so I would be more than happy to read similar experiences or detailed info about what is happening under the hood, if you know it please comment!
Top 10 Fastest Developer Environments on the planet
Tags: devrel, nextjs, productivity, tutorial
Published: 2021-09-06 13:54:14

{% youtube x19DetWAsVA %}

In this video, I compare 10 cloud-based developer environments from login to compiled code preview in the browser and find out, which tool is the fastest!

### Testing Criteria
- one attempt
- same [GitHub repository](https://github.com/mfts/cloud-ide-challenge), the Next.js starter code
- login/signup to tool
- make 1 change to the codebase
- compile and preview code in browser

### Winners ✨🏆
(in ascending order)
Unfortunately, with the following tools I ran into errors and could not complete the challenge: 
Sourcelair, Glitch, and Codetasty

The remaining 7 contestants are in the following order:
1. 🥇 ??? _come on, of course_
2. 🥈 ??? _I'm going to make it exciting_
3. 🥉 [Stackblitz](https://stackblitz.com)
4. [Replit](https://replit.com)
5. [AWS Cloud9](https://aws.amazon.com/cloud9/)
6. [Codeanywhere](https://codeanywhere.com/)
7. [goormIDE](https://ide.goorm.io/)

I want to reiterate that this was by no means a scientific experiment. This video is only meant to **give an impression of the first developer experience** for each service. Once you are signed up or logged in to your favorite service, the speed might of course differ.
 
For more information on developer experience and open source, please check out my [Twitter](https://twitter.com/mfts0).
Ou Isso ou Aquilo: Exemplos Com Desvios Condicionais Simples (Parte 2)
Tags: javascript, algorithms
Published: 2021-09-06 13:52:19

Vamos ver alguns exemplos de como podemos utilizar as estruturas condicionais. Vou começar com os desvios condicionais simples.

## Exemplo 1

### Escreva um algoritmo que leia um número e o mostre caso ele seja maior do que 20.

O que temos aqui? O usuário vai digitar um número e o programa vai verificar se esse valor é maior que 20. Em primeiro lugar, vou criar uma variável para guardar esse número:

```javascript
const valor = Number(prompt("Digite um número inteiro qualquer:"));
```

Agora vou criar uma condição para verificar se o número digitado pelo usuário é maior do que 20 ou não. Se condição for verdadeira, esse número aparecerá na tela. Caso contrário, esse valor não vai aparecer.

```javascript
if(valor > 20) {
    console.log(valor);
}
```

## Exemplo 2

### Construa um algoritmo que leia dois valores numéricos inteiros e efetue a adição. Imprima o resultado caso seja maior do que 10.

O usuário vai digitar dois números inteiros. Um programa vai efetuar a soma e mostrar o resultado se for maior do que 10. Vou criar duas variáveis para colocar esses números:

```javascript
const A = Number(prompt("Digite o primeiro número inteiro:"));
const B = Number(prompt("Digite o segundo número inteiro:"));
```

Vou criar uma variável para fazer a soma:

```javascript
const soma = A + B;
```

Agora vou criar uma condição para verificar se o resultado da soma é maior do que 10 ou não. Se condição for verdadeira, esse número aparecerá na tela. Caso contrário, esse valor não vai aparecer.

```javascript
if(soma > 10) {
    console.log(soma);
}
```

E aí? Gostaram? Até a próxima anotação! 😊
Configuration for Husky + pre-commit
Tags: husky, git
Published: 2021-09-06 13:22:41

##What is Husky?

> Husky improves your commits and more 🐶 woof!

[Husky](https://www.npmjs.com/package/husky) helps us do more things along with git commands. For example, we can run `npm test` in `pre-commit` phase and do something else in `post-commit` phase

##Setup
There is a bit difference between npm version below and above 7, so please check it by
```
npm -v
```
###Automatic (require npm version > 7)
```
#For npm
npx husky-init && npm install

#For Yarn 1
npx husky-init && yarn

#For Yarn 2
yarn dlx husky-init --yarn2 && yarn
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcv0jt7cgpdrgb8v7gbn.png)

After executing the command successfully, we need to take a look at the directory tree to make sure `.husky/pre-commit` is there.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zopcwmbgakst3acfnr20.png)

###Manual
- Install `Husky`
```
npm install --save-dev husky 
```
- Enable git hooks
```
npx husky install
```
- Add `prepare` script to `package.json`, this script will be trigger enable Git hooks after install. This step also depeneds on our npm version
  - npm > 7: `npm set-script prepare "husky install"`
  - npm < 7: copy `"prepare": "husky install"` to `scripts` in `package.json` 
 `
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0o6oq1dqngrjpttsiu2.png)

Once here, our folder tree look like below. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avhpmlo0rqafqel6o3j1.png)

- Now we need to create a hook by command `husky add`. After executing the below command, a line `npm test` is added to a new file `pre-commit` in `.husky`, which means `npm test` will be run before we actually commit.

```
npx husky add .husky/pre-commit "npm test"
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khzirhq9u0dvov4y931q.png)

*If you use yarn2, [here](https://typicode.github.io/husky/#/?id=yarn-2) is your reference*.

##Have fun
Now, depending on our needs, we list out commands in the file `pre-commit`. In my case, I want to verify **branch name pattern**, **lint**, and **test cases**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhgy3ws6egqh57nupnh0.png)

[Paypal](https://paypal.me/DantisMai).

_I hope you had fun with git hook. I am really happy to receive your feedback on this article. Thanks for your precious time reading this._
Span Width - [SOLVED]
Tags: html, css, javascript, beginners
Published: 2021-09-06 13:21:24

## TL;DR Summary
If you try to set span ***width*** like you would on ***div*** element for example:
```css
span {
  width: 500px;
}
```
It simply will not work.

What you need to do is change the ***display*** type of the ***span*** element which is by default ***inline***.

```css
span {
  display: inline-block;
  width: 500px;
}
``` 
And now you can see the span width actually changing and it is set to ***500px***. Background color is only used here so you can easily see the area that ***span*** element occupies.

And here is the full code used to generate the image above:
```html
<style>
  body { 
    background-color: lightblue; 
  }
  div { 
    font-size: 40px; 
    margin-top: 300px;
    text-align: center; 
  }
  span {
    background-color: yellow;
    width: 500px;
    display: inline-block;
  }
</style>

<div>
  Do you know how to make
  <span>this span wide</span>
  and other text normal?
</div>
```
In short this is all you need to know about setting span width.

Until next time,
*Will*
*[Building an Algo-Trading Hedge Fund From Scratch](https://programmermoney.com/)*
How to See Which Branch Your Teammate is on in PhpStorm
Tags: webdev, programming, productivity, git
Published: 2021-09-06 13:01:40

*“What branch are you on?”* is often the first question you ask when a teammate says *“The tests aren't passing”* or *“The build failed”*. Here’s how you can get an answer to that question without even needing to ask.

In PhpStorm, open up the Team Window by clicking GitLive on the bottom tool window bar.


![PhpStorm-IDE.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630926853406/aEZhmCiDS.png)

This will show a list of your teammates, if they are online (or away) and the issue they are currently working on. Locate the teammate you are interested in and click the arrow on the left-hand side of their avatar.

![ide window scaled.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629731240886/JbaOB-CYS.png)

Now you will see all the repositories they have cloned including the name of their current branch! 

![screenshot 3 scaled.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630506270361/bHUNayHHj.png)

**NOTE:** If an issue has been connected to the branch you’ll see the issue name instead, if that's the case just hover your cursor over the issue name and a tooltip will appear showing you the branch name (and even the commit hash)


![screenshot 4 scaaled.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1630506279553/DVzcaTM-n.png)

Don't have the GitLive extension installed yet? You can [find GitLive here](https://plugins.jetbrains.com/plugin/11955-gitlive) and, if you need help setting it up, follow the instructions in [GitLive docs](https://docs.git.live/docs/installation/).
FractalCrypt - deniable encryption cryptoarchiver
Tags: showdev, github, opensource, cpp
Published: 2021-09-06 13:01:10

Free cryptoarchiver permitting any number of hidden volumes for deniable encryption.
Github link (full readme, screenshots, technical dentails): [https://github.com/zorggish/FractalCryptGUI](https://github.com/zorggish/FractalCryptGUI)

**What is deniable encryption?**
Deniable cryptography describes encryption methods, enabling to use plausible denial of existing encrypted messages, which means there is no way to prove the existence of data in the plain text.

In this case, the user creates a cryptocontainer of a certain size, into which he can add and from which he can remove groups of files stored in encrypted form.
It is impossible to determine how many such volumes are stored in the container because the encrypted files are indistinguishable from noise.

**What is it used for?**
This method of storing secret information increases security compared to simple encryption, because no matter how strong the encryption is, the password can always be obtained by blackmail or physical threats. If you use deniable encryption, you can give away the unclassified part of the encrypted message, claiming that you did not have the secret information. Or, alternatively, give out only part of the classified information.

**How does it work?**
First, it creates a cryptocontainer of a user-specified size, filled with random characters. To create the first volume, the program archives the user-specified files to the beginning of the cryptocontainer and encrypts it using the first key. Thus, knowing the first key, you can access the first-layer files and the rest of the cryptocontainer.
To create the second volume, the program will archive the files in the rest of the cryptocontainer and encrypt it with the second key; So, the first key is also needed to create or access data from the second volume.
Aprenda Git com imagens
Published: 2021-09-06 12:42:57

Uma maneira bem didática para se apreender o básico de como usar Git.

A autora esta nas imagens.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4l7mdxc9mk7bw2kbjqx.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6we6ehkhljt1pepf2efe.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mdnw8iqzeqgclobjiml.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pizy9kx1x99ynbdm7xq.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ja0bid8r62fn19ji9ae1.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdbfknm3ue2m8yv0479n.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqqa096xhto297j2980j.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3xmvs5y2ulxrfuy8dt7.jpg)
top languages every programmer should learn in 2021 as it is 2021 are 
Published: 2021-09-06 12:29:46

Python.

<a href='https://www.techsite.io/p/2551415/t/what-is-python-and-what-are-the-practical-uses-of-python'>python</a> is still at the top of the tree.

Python is a language that every programmer should have in their arsenal, even if you are just starting your career in 2021. Python features a simple and easy-to-understand syntax. As a result, it is an excellent place to start for a newbie.
Golang.
Golang, or simply "Go," is a Google-developed programming language. The rise of Golang to the top of the programming languages to learn league has been gradual.

C#.
C# is a Microsoft-developed programming language that has gained popularity in the online and game development areas. It's most commonly found in the Unity software, which is used to create 2D and 3D video games.

C / C ++.
C/ C++ is utilised in the majority of low-level systems, including operating systems, embedded systems, and kernel development, because to its speed and high levels of functionality.

Java.
Another top programming language for 2021 is Java. Despite being one of the oldest languages known, it is still in high demand.

JavaScript
Another top programming language for 2021 is Java. Despite being one of the oldest languages known, it is still in high demand.
VS2022: WPF WebView2, thumbs down
Tags: vs2022, maui
Published: 2021-09-06 12:14:19

Finally out-of-the box (if you use NuGet package manager) the newer WebView2 works with WPF.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idfhhnff22nkszzye9x7.png)

Per the article here:

[WebView2 and WPF](https://docs.microsoft.com/en-us/microsoft-edge/webview2/get-started/wpf)

It worked first time.  

![WPF and WV2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zeye980lc6dxgibz9tt2.png)

While it seems simple enough to spin up, controlling it is another thing. MSFT themselves recommends using Selenium? What? Are you kidding me? 

It looks to me like more of the same spoon feeding tactics of the oversized and fat MSFT corporation, 

> "we'll give you a tad here, but don't look too deep because we don't have it, and we aren't going to support it."

JWP2021
Best coding practices part 2
Published: 2021-09-06 12:12:03

### Best coding practices to remember.

- Be sure to understand your problem before you decide how to solve it.

- Be sure you understand the algorithmic method before you start the program

- In case of difficulty, divide the problem into pieces and think of each part separately. (Divide and conquer)

- Keep your functions short and simple; rarely should a single function be more than a page long.

- Use techniques like "scaffolding" to simplify debugging. Scaffolding is a technique used to localize errors.

- Keep your programs well formatted as you write them. This makes debugging easier.

- Keep your documentation consistent with your code, and when reading a program make sure you debug he code and not just the comments.

- Explain your program to someone else: Doing so will help you understand it better yourself.

_Adapted from the book [Data Structures and Program Design in C](https://www.amazon.in/Data-Structures-Program-Design-2e/dp/8177584235)_
Free eBook - Real-World Xamarin.Forms Succinctly
Tags: xamarin, xamarinforms, books, programming
Published: 2021-09-06 12:11:50

**OVERVIEW**

Learning how to develop cross-platform mobile apps with Xamarin.Forms is great, but if you’re new to mobile development, or are using Xamarin.Forms in an enterprise setting for the first time, there are many unique scenarios to consider. In Real-World Xamarin.Forms Succinctly, author Alessandro Del Sole draws from his experiences developing enterprise mobile apps to guide you through common challenges. Topics addressed include biometric authentication, secure communications, document sharing, and more.

**TABLE OF CONTENTS**

- Cross-Platform Device Capabilities
- Local Settings: Preferences and Secure Storage
- Implementing Biometric Authentication
- Local Data Access with SQLite
- Working with Web API and JSON
- Securing Communication with Certificate Pinning
- App Center: Drive Business Decisions with Analytics
- Displaying After Effects Animations with Lottie
- Displaying and Sharing Documents
- Managing the Screen on New iPhonesImplementing Biometric Authentication

Download & Read
https://www.syncfusion.com/succinctly-free-ebooks/real-world-xamarin-forms-succinctly
What did you teach this week? Happy teacher's day!
Tags: teachingthisweek, discuss, teaching
Published: 2021-09-06 12:11:45

Happy Teacher's Day! 
So this week did you too become a teacher? Comment below and encourage others to teach!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2cceii78wc9nq5yc26w.png)
Rome Wasn’t Built in a Day
Tags: sofwaredevelopment, teamwork, agile
Published: 2021-09-06 12:09:39

---
title: Rome Wasn’t Built in a Day
published: true
date: 2021-09-06 12:05:30 UTC
tags: sofwaredevelopment,teamwork,agile
canonical_url: https://medium.com/chingu/rome-wasnt-built-in-a-day-bcdf3c3ae3ae
---

#### Sprint 2 — Monday

![](https://cdn-images-1.medium.com/max/1024/1*wA-6FK34X9mscD1Ef9cr8w.jpeg)<figcaption>Photo by <a href="https://unsplash.com/@hd24?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Claudio Hirschberger</a> on <a href="https://unsplash.com/s/photos/rome-built-day?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>

### Let Agile be your Guide!

A common issue Agile teams run into in the first few sprints is adding too much functionality too soon. The impact of this is that teams getting stuck implementing technical details and hitting issues **_before_** they are needed.

Keep in mind that the MVP process, supported by an Agile methodology, builds a working product in each sprint. In early sprints your product will be very simplistic, but **_each sprint iterates to build on the work you completed in previous sprints_**.

The product you deliver at the end of each sprint **_doesn’t have to be perfect_** , but it does need to deliver some functionality.

It’s okay if the product you deliver at the end of Sprint 2 consists of a project structure, the basic technical stack, and a basic landing page. This gives you something you can expand in Sprint 3 and beyond.

That’s actually a great starting point since it lets team members add new features to a common foundation.

The diagram below shows the level of complexity in the project at the end of each sprint.

![](https://cdn-images-1.medium.com/max/673/1*DMvC1iSJHW6TzIazbKKR1g.png)

When you have questions or encounter problems you can always seek help from your teammates.

> Remember the goal isn’t to reach your goal individually — it’s to achieve success together!

### Before you Go!

Chingu helps you to get out of “Tutorial Purgatory” by transforming what you’ve learned into experience. The experience to boost your Developer career and help you get jobs.

You can learn more about **Chingu** & how to join us at [https://chingu.io](https://chingu.io/)

* * *
VS2022: WPF WebBrowser still wrong!
Tags: vs2022, wpf
Published: 2021-09-06 12:01:51

To recreate, simply create a new WPF project in VS2022. Open up the tool box and drag a WebBrowser onto canvas.  This is what is delivered.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hr3nb8e21zivxgkhrft9.png)

So wrong after almost 20 years of non working embeddable web browser. They require you to download all the WebBrowser2 stuff separately. Can't they just add a new control to the tools menu?

JWP2021