teleren/devto huggingface dataset:
Hide & Seek code
Tags: docker, node, javascript
Published: 2021-05-18 13:00:16

We were trying to hide our code from the client. We didn't want them to judge us because of the bad indentations we followed. Lol! 

Basically, we wanted to obfuscate it so that the client doesn't get hold of the source code. This is what we did. 

## The proud plan

1. We had a git repository obviously where all the developers pushed their code.
2. Each client had their own branch. This was done to handle customizations at a client level.
3. Each client had their own server instance(AWS) also. They had a docker file that would pull code from the particular branch into the server.
4. On the server, once the code was pulled, it was built and obfuscated and the original source files were removed. Only the gibberish build folder remained on the client's server.

### The not-so-proud moment!!!

So far things were good. That is when we realized the client can modify our docker file and pull the code from the branch if needed. 

5. We introduced a new server in between our git repository and the client's server. The only function of this server was to take as *input* the **client name** and send as *output* the *build* file after obfuscation to the client's server.

But since we are never satisfied with things in our lives, we are still trying to find flaws in this approach. We know one for sure .i.e. it takes too much time to do all of this.

**P.S.**: if you are one of our clients, we did this to protect your code from malicious attacks :|  

Happy programming.

We took it a step further [here](https://dev.to/vjnvisakh/hide-seek-code-part-ii-4og5)
Stop URL from changing, using react-router
Tags: react, reactrouter, webdev
Published: 2021-05-18 13:09:22

I was using **react-router** and wanted to stop the *URL* from changing, kind of one common *URL* for every screen except the default one and the first thing I learned was about **Memory Router** it said that it does not *read or write to address bar*.
The problem I faced using *Memory Router* was first, the back button of the browser didn't work, and second, since it cannot read or write to the address bar the *react* component linked to the default path which should only be opened with '/', was opening with any path.
```javascript
//Routes.js
import React from 'react';
import { MemoryRouter as Router, Switch, Route } from 'react-router-dom';
import HomePage from './HomePage';
import About from './About';
import DashBoard from './DashBoard';
const Routes = () => {
  return (
    <>
      <Router>
        <Switch>
          <Route exact path='/'>
         <HomePage />
          </Route>
        <Route exact path='/about'>
          <About />
          </Route>
         <Route exact path='/dashboard'>
         <DashBoard />
          </Route>
        </Switch>
      </Router>
    </>
  );
};

export default Routes;

```
The issue in the above code is we can open *HomePage* with either '/' or '/jhkjbdv/' or '/hdcubv/dhhvd/dkfhd' and I don't know how to manage this thing.
```javascript
//same as above replace MemoryRouter with BrowserRouter
//Routes.js
const Routes = () => {
  return (
    <>
      <Router>
        <Switch>
          <Route exact path="/">
            <HomePage />
          </Route>
          <Route exact path="/yourapplication">
            <AllPage />
          </Route>
        </Switch>
      </Router>
    </>
  );
};

export default Routes;

```
```javascript
//HomePage.js
import React from 'react';
import { Link } from 'react-router-dom';
const HomePage = () => {
  return (
    <>
     <div>
        <Link
          to={{
            pathname: `/yourapplication`,
            state: {
              getby: "about"
            }
          }}
        >
          About
        </Link>
        <hr />
        <Link
          to={{
            pathname: `/yourapplication`,
            state: {
              getby: "dashboard"
            }
          }}
        >
          DashBoard
        </Link>
      </div>
    </>
  );
};

export default HomePage;
```
```javascript
//AllPage.js
import React from "react";
import { useLocation } from "react-router-dom";
import About from "./About";
import DashBoard from "./DashBoard";
const AllPage = () => {
  let { state } = useLocation();
  const switchTabs = () => {
    switch (state.getby) {
      case "about":
        return <About />;
      case "dashboard":
        return <DashBoard />;
      default:
        return <></>;
    }
  };
  return <>{switchTabs()}</>;
};
export default AllPage;
```
Using *BrowserRouter* and *useLocation hook* I was able to reduce the routes, as which component should be rendered is managed in a separate component i.e. *AllPage*
How to use YAML Aliases
Tags: yaml, devops
Published: 2021-05-18 13:07:06


Have you ever had to copy and paste duplicate content in a YAML file and wondered if it is possible to DRY that up? As it turns out, YAML allows you to repeat nodes via aliases.

YAML Aliases allow you to assign a name to a value or block of data and recall the assigned data by its name in the YAML file. Aliases should work for any file written in YAML.

# Simple Example

```yml
hello: &hello 'hello'
greeting:
  audience: 'world'
  hello: *hello  #greeting.hello has the string value of 'hello'
new_greeting:
  audience: 'room'
  hello: *hello  #new_greeting.hello has the string value of 'hello'
```

# Aliasing blocks of data
Besides string or number values, you can alias a block of data as well:
```yml
foo:
  bar: &bar
    qux: 'quxqux'
    baz: 'bazbaz'
greeting:
  audience: 'world'
  bar: *bar  #greeting.bar has the same values as foo.bar.
             #So greeting.bar.baz is 'bazbaz'
```

# Modifying a section of an alias
You can copy an alias and modify a section of it by using the merge key (<<:):
```yml
bar: &bar
  qux: 'quxqux'
  baz: 'bazbaz'
greeting:
  audience: 'world'
  bar:
    <<: *bar       # greeting.bar.qux is 'quxqux'
    baz: 'notbaz'  # greeting.bar.baz is 'notbaz'
```

# Defining aliases from modified aliases
You can even modify a section of an alias and define that as a new alias:
```yml
bar: &bar
  qux: 'quxqux'
  baz: 'bazbaz'
greeting:
  audience: 'world'
  bar: &newalias
    <<: *bar
    baz: 'notbaz'
new_greeting:
  audience: 'room'
  bar: *newalias  #new_greeting.bar.baz is 'notbaz'
```

# YAML specification
Alias nodes are described in the YAML specification [here](https://yaml.org/spec/1.2/spec.html#id2786196)
Sample Dokerized flask app deployed on Kubernetes on Azue using AKS
Tags: python, docker, kubernetes, azure
Published: 2021-05-18 13:00:53

Hello Developers,
I've prepared a sample Dockerized flask app deployed on Kubernetes on Azure using AKS!
Save your time and run application in different ways :
-As standalone app.
-As a Docker container running on your machine
-Run flask-app-kubernetes repo from Docker Hub:ahmedkhemiri95/flask-app-kubernetes

https://github.com/ahmedkhemiri95/flask-app-kubernetes
Tracking my working time using timetrace
Tags: productivity, timetracking, go, cli
Published: 2021-05-18 13:00:00

In my new job, I'm not required to track my working time anymore. This feels great, but since I'm getting paid for working 40 hours a week, I decided to track it myself and built a simple and friendly CLI tool: [timetrace](https://github.com/dominikbraun/timetrace).

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

## Installing timetrace

timetrace is available for many platforms. Since I'm on macOS, I'll simply use Homebrew:

```
brew tap dominikbraun/timetrace
brew install timetrace
```

For other installation methods, check out the [installation instructions](https://github.com/dominikbraun/timetrace#installation).

## Creating a project

timetrace uses _projects_ to store what you are currently working on. For example, creating a project called `make-coffee` is pretty simple:

```
timetrace create project make-coffee
```

## Tracking time

To start tracking time for a project, run the `start` command and provide the project name:

```
timetrace start make-coffee
```

You'll see the following output:

```
✔️ Started tracking time
```

## Current tracking status

What project are you currently working on? And how long have you been working on it? The `status` command answers such questions.

```
timetrace status
+-----------------+--------------------+--------------+
| CURRENT PROJECT | WORKED SINCE START | WORKED TODAY |
+-----------------+--------------------+--------------+
| make-coffee     | 0h 5min            | 4h 20min     |
+-----------------+--------------------+--------------+
```

## Stop tracking time

Once you've finished your work, stop tracking time.

```
timetrace stop
```

## List today's records

Tracked time is stored as a _record_. To list all records, use the `list records` command and provide the current date. On our example, this is only one record:

```
timetrace list records 2021-05-18
+---+-------------+-------+-----+----------+
| # |   PROJECT   | START | END | BILLABLE |
+---+-------------+-------+-----+----------+
| 1 | make-coffee | 14:44 | --- | no       |
+---+-------------+-------+-----+----------+
```

This overview is useful for running other commands like `get record`, `edit record` or `delete record`, since you'll have to provide the record's start time for them.

To get a complete list of available commands, run `timetrace -h` or check out the [command reference](https://github.com/dominikbraun/timetrace#command-reference)

## Planned features

This was a quick usage example including the most important commands I'm using every day. But there are more advanced features planned. Some of them are:

* Lengthen and shorten existing records
* Generating reports of tracked time
* Reverting changes done with `edit` or `delete`
* Project modules for managing sub-modules

If you'd like to contribute or have some suggestions, check out [timetrace's open issues](https://github.com/dominikbraun/timetrace/issues)!
Thank you! Cloud with Chris has reached 500 YouTube Subscribers
Tags: youtube, community, content, contentcreator
Published: 2021-05-18 12:37:40

I'm sat writing this blog post about 4 months after writing my [2021 kick off blog post](https://www.cloudwithchris.com/blog/cloud-with-chris-moving-forwards/). My aim for 2021 was to focus on one goal - contributing back into the technical community.

{% twitter 1345748585443454978 %}

I set out 2021 to achieve 500 subscribers by the end of the year, and had ideas of creating brand new types of content. When I created Cloud with Chris back in March 2020, I started it off as a podcast. Later in 2020, I decided to add the video content to the mix. Then, as we entered 2021, I brought my old blog posts from my personal website onto Cloud with Chris, and started off a weekly blog.

I then began the journey of evolving my content over time, by -

* Introducing additional series of content, including Tales from the Real World, Cloud Gaming Notes and Cloud Drops
* Automating as much of my processes as possible, including uploads of the podcast MP3s to Azure Storage, cross-posting to Twitter and Reddit (though more work to be done here), dev.to and medium.com
* Kicking off a weekly vlog (Yes, there have been 20 of those so far!)
* Starting off releasing a weekly blog, but now adjusting to a cadence of producing two blog posts per week (This is blog post #25 from 2021!)
* Bringing more guests onto the show, and making the sessionize more discoverable to bring in a diverse and global set of guests
* Improving upon the Search Engine Optimization (SEO) of the website to increase the audience that are accessing the content.

All of that effort has clearly been worth it! Over the weekend (I believe 15th May was the date), I managed to hit the magic 500 subscribers mark on YouTube, **way** ahead of schedule.

![Thank you - 500 Subscribers!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vlxs1z98h461rg9ks0j.jpg)

So, a big heart-felt thank you from me for everyone that has taken time to either read, listen or watch my content, become a guest on the show, or provide any guidance, coaching, or feedback to help me get to where I am.

The journey is not over, and I've got plenty of ideas and energy to take me forwards to the next 500 additional subscribers. There's a ton of content in the pipeline, with a backlog of guests for me to respond to that would like to join the show!

Who knows, maybe we can reach 1,000 subscribers by the end of 2021? That would be awesome!

So, please stay tuned for more to come very soon. As always, I deeply appreciate the feedback as I continue making my content even better than it is right now.

Onwards and upwards! Bye for now.
Svelte & vscode & typescript odd error
Published: 2021-05-18 12:33:25

hey, im using svelte for a project and vscode extension, and im using typescript, i have it structered like so: src/webviews/
tsconfig.json
components/Sidebar.svelte
pages/Sidebar.ts
![](https://salvage.is-inside.me/jTW8vAP2.png) this is the error
not sure how to fix it?
anyone know?

code: https://github.com/Milo123459/salt/tree/master/vscode-salt

Please, anything will help! I'm so confused.
How to assess Ansible Collection’s quality
Tags: ansible, automation, ansiblecollection, ansibleplaybooks
Published: 2021-05-18 12:32:09

In the old times of monolithic Ansible, making sure the automation content we are using is high-quality was next to impossible. We could either use what Ansible package delivered or resort to things like distributing Ansible modules in roles (which we consider an ugly hack around Ansible's limitations). 

With the introduction of Ansible Collections, we gained a lot more control over the content we use in our Ansible playbooks. We can install the core Ansible engine and then equip it with modules, plugins, and roles we need. But, as always, with great power comes great responsibility. 

With the ability to install Ansible Collections, we are solely responsible for the quality of content we use to build our Ansible playbooks. But how can we separate high-quality content from the rest? Here are a few things we do when we are evaluating Ansible Collections. 

**Check documentation.** Once we find a potential candidate on Ansible Galaxy, we first check the documentation. It should contain at least a quick start tutorial with installation instructions and reference documentation for modules and roles. 

**Assess playbook readability.** Because we want our playbooks to serve as a human-readable description of the desired state, modules from the Ansible Collection under evaluation should have a consistent user interface and descriptive parameter names. 

**Test basic functionality.** Before we start using 3rd party content in production, we always check the basic functionality each Ansible module should have. Things like enforcing state instead of executing actions (running the same task twice in a row should be safe and the second ideally reports back no changes) and supporting check mode are the bare minimum we expect. 

**Peek at the tests.** This last check is a bit harder to perform if we never developed an Ansible module or role before. But even then, checking the CI/CD configuration files should give us a general idea about the test suite's robustness. We are looking for integration and sanity tests (`molecule` and `ansible-test` invocations).
HackbotOne Migration to Django
Tags: django, python, fullstack, webdev
Published: 2021-05-18 12:26:18

Hello Everyone,

I have developed one blogging website using Django and the website will focus on making contents from Application Security & Software Development.

Please follow the Github repository & Youtube walkthrough video.

YouTube video walkthrough - https://www.youtube.com/watch?v=TRaejKHVhj8

HackbotOne Website link - https://hackbotone.com/

Github
1. hackbotone-website - https://github.com/anshumanpattnaik/hackbotone-website
2. hackbotone-api - https://github.com/anshumanpattnaik/hackbotone-api


Please clone both of the repositories and let me know if you've any suggestion.

Thanks
ThinkingElixir 048: Ecto Associations with Sheharyar Naseer
Tags: elixir, database
Published: 2021-05-18 12:24:50

In episode 48 of [Thinking Elixir](https://thinkingelixir.com/the-podcast/), we talk with [Sheharyar Naseer](https://twitter.com/sheharyarn) about Ecto’s feature “association defaults” and how they work. They support defining a function that gets called during your changeset operations and can be used to ensure that multi-tenancy IDs get populated down correctly. We learn more about Slab, talk about Single Table Inheritance designs and how we feel about them. We also talk about wrapping our Repo module for fun and profit!

[Podcast Episode](https://thinkingelixir.com/podcast-episodes/048-ecto-associations-with-sheharyar-naseer)
How to add AWS EC2 instance root user password (Simpliest way!)
Tags: productivity, aws, passwordlogin
Published: 2021-05-18 12:24:29

When we create an instance in AWS EC2, we need to add a `.pem` file to the instance. And to log in every time we need to use that .pem file to our local machine. Which is not that cool way :(

So, in this article, we will learn how we can add root user password for ssh login from our local machine to AWS EC2 instance.

Before getting started, I am considering we have a running instance on AWS EC2. I am running the ubuntu operating system on my instance. For the Linux instance, all these work the same as the ubuntu instance.

At first, we need to log in to our instance with the corresponding .pem file by the following command and of course, replace “your-pem-file.pem” by your instance .pem file and x.x.x.x by your instance IP address:

`ssh -i "your-pem-file.pem" ubuntu@x.x.x.x`

Then, we need to switch to superuser by running this command:

`sudo su`

After that, we will edit the configuration to modify the ssh login system for password. So, let’s open the configuration file with a nano editor. This will let us edit the default configuration.

`nano /etc/ssh/sshd_config`

This will open the config file which possibly will look like this:

![sshd-config-file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqypcholsnjh4qfv7oth.png)

So, we need to tell ssh we want password authentication. For this, we are going to change PasswordAuthentication no` to PasswordAuthentication yes`. After that, press crtl+x and save this file.

Next, we need to restart the sshd by running this command:

`service sshd restart`

Now, we can set a password for our authentication by running this command:

`passwd ubuntu`

And set your preferred password. And whalah, it’s done!
Now, exit from the server and login again with your password that you’ve set just now. Run this command, and then give the password.

`ssh ubuntu@x.x.x.x`

So, isn’t this interesting? :D
4 ways to Compare Strings in JavaScript
Tags: webdev, javascript, beginners, codenewbie
Published: 2021-05-18 12:02:57

In this short JS tutorial, you’ll learn how to compare strings and see code examples.

<!--more-->

## Strict equality

To determine whether the strings are equal, you can use the strict equality operator `===`. It returns `false` if the strings are different and `true`, if they’re the same.

```javascript
const s1 = 'learn';
const s2 = 'today';

console.log(s1 === 'learn');  // true
console.log(s1 === s2);       // false
```

Comparing the strings using strict equality `===` always analyzes the case of the letters, meaning that capital letters are different from the small ones.

```javascript
const s1 = 'javascript';
const s2 = 'Javascript';

console.log(s1 === s2); // false
```

## Case-insensitive string comparison

If you want to do a case insensitive comparison of the strings in JavaScript, you can turn both strings to lowercase and compare them using a strict equality operator afterward.

```javascript
const s1 = 'javascript';
const s2 = 'Javascript';

console.log(s1.toLowerCase() === s2.toLowerCase()); // true
```

## Comparing the length of JavaScript strings

If you need to find which of two strings is longer, then the operators "greater than" and "lower than" won’t suit you well. They compare the characters of a string in alphanumeric order one by one and consider the length of the strings at the very end.

```javascript
const s1 = 'javascript';
const s2 = 'node.js';

console.log(s1 > s2); // false
```

In JS, every string has the `length` property. By comparing the value of this property in different strings, we’ll get to know which of them is longer.

```javascript
const s1 = 'javascript';
const s2 = 'node.js';

console.log(s1.length > s2.length); // true
```

## Check if a string contains another string

To check if one string is a substring of another in JavaScript, there’s a built-in function `includes`. Remember, the function `contains` exists in Java, but it’s deprecated and replaced by `includes` in JavaScript.

```javascript
const s1 = 'javascript';
const s2 = 'python';

console.log(s1.includes('script')); // true
console.log(s2.includes('script')); // false
console.log(s1.contains('java'))    // ERROR! .contains is not a function
```

Read more [JavaScript tutorials](https://learn.coderslang.com/tags/javascript/) or [Learn Full-Stack JS](https://js.coderslang.com) from scratch!
Daily Developer Jokes - Tuesday, May 18, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-05-18 12:00:30

---
title: "Daily Developer Jokes - Tuesday, May 18, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20May%2018%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258bb6df5f.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What did the spider do on the computer?

___A:___ Made a website!
 -->
[Dicas do VIM] Instalando o VIM / NeoVIM no Linux
Tags: braziliandevs, vim, neovim, linux
Published: 2021-05-18 11:57:45

![meme drake vim](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d20a151ef6b4ktwyz47k.png)

print("Olá! o/")

Hoje vamos iniciar um nova série aqui no seu blog preferido de tecnologia. 😎

Vamos falar sobre o tão amado e temido (e às vezes, odiado) VIM. Será uma dica por cada post, de como usar o editor. Assim, aos pouquinhos vamos juntas perdendo o medo (além de aprender a rir dos memes sobre sair do VIM).

Como podem ver no título, vamos começar pela instalação.

Digite, no terminal

```
$ sudo apt install vim
```

- **$** indica que você deve usar o usuário comum para fazer essa operação.
- **sudo** serve para pedir permissões de administrador temporariamente.
- **apt** do inglês, *Advanced Package Tool*, em português, *Ferramenta de Empacotamento Avançada*; é a ferramenta que nos ajuda na instalação, atualização e desinstalação de programas, entre outras funções.
- **install** é o comando de instalar, indicando ao apt o que fazer.

ou

```
$ sudo apt install neovim
```

para instalar o [NeoVIM](https://neovim.io/charter/).

Eu vou optar por usar o NeoVIM, então algumas configurações podem ser um pouco diferentes, mas os comandos são os mesmos. Fiquem tranquilas quanto a isso. 😉