teleren/devto huggingface dataset:
Using dotnet secrets
Tags: dotnet, tooling, beginners, tutorial
Published: 2022-04-20 18:05:01

Instead of putting secret environment variables in the appsetting.json file, the dotnet CLI has functionality to add secrets to a project, without keeping them in the project folder.

This will decrease the risk of leaking the secrets, for example by adding them to a commit by mistake. 

[This link leads to Microsoft's own documentation.](https://docs.microsoft.com/en-us/aspnet/core/security/app-secrets?view=aspnetcore-6.0&tabs=windows)

## The cheatsheet

```bash
dotnet user-secrets --help # See available commands

dotnet user-secrets init # Initiate secrets

dotnet user-secrets set "MY_API_KEY" "xyz" # Set a secret

dotnet user-secrets set "SOME_API.MY_API_KEY" "xyz" # Set a nested secret

cat secrets.json | dotnet user-secrets set # Set all secrets in a json file

dotnet user-secrets list # List the secrets

dotnet user-secrets clear # Delete all secrets in the project
```

## The walkthrough

### Initiating
The `dotnet user-secrets init` command enables storage of secrets. It adds a line with a GUID in the .csproj file. This GUID is used to identify which secrets belong to which project. The command only needs to be run once for every project, if you are sharing your code with other people, they don't need to rerun it.

```xml
<UserSecretsId>71ad533a-ed09-4780-9037-a5aafb01958b</UserSecretsId>
```

The command also creates a folder in `~/.microsoft/usersecrets` (on a Mac), with a file contaning the secrets in json format. 

```
~/.microsoft/usersecrets
|
└───71ad533a-ed09-4780-9037-a5aafb01958b
│   └──secrets.json
|
└───<some-other-GUID>
    └──secrets.json

```

The secrets are saved in plain text in this json file. 

### Setting secrets
```bash
dotnet user-secrets set "MY_API_KEY" "xyz"
dotnet user-secrets set "SOME_API.MY_API_KEY" "xyz"
```

The commands above are self explanatory and the resulting secrets.json file will look like this:

```json
{
  "MY_API_KEY": "xyz",
  "SOME_API.MY_API_KEY": "xyz"
}
```

If you are given secrets in the same format as above, these can be imported all at once with the command: 

```console
$ cat secrets.json | dotnet user-secrets set
Successfully saved 2 secrets to the secret store.
```
What is React Virtual DOM
Tags: react, webdev, beginners
Published: 2022-04-20 17:35:52

## What is DOM?
Document Object Model or simply DOM is an **Application Programming Interface(API)** for HTML and XML documents. When a browser receives an HTML file, it parses it and builds a DOM tree. HTML elements are considered nodes in a DOM tree.

![DOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfe6bwvg0bnhd86oanh4.PNG)

## What is Virtual DOM?
Virtual DOM or VDOM is a virtual representation of the real DOM. It has the same properties as the real DOM but it can not directly change what’s on the screen. React uses virtual DOM. Why? We will get into that now.

## Is the real DOM really slow?
What is the first thing that comes to your mind when anybody asks why React uses Virtual DOM? What’s wrong with using the real DOM? - Well, it’s because the real DOM is really slow. 

Is it though?

Adding or removing any element from DOM is actually pretty fast. Then why is it called slow?
When we change something in a React component, that change has to be shown on the screen. The process of showing the changes in the UI is slow. 

![Process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45sv1x5390h3tjnuzvsq.PNG)

Upon receiving an HTML file, the browser render engine parses it and makes a **DOM** tree. In the same way, the styles in the CSS file are parsed into **CSSOM**. Both DOM and CSSOM make a render tree. The render tree has to go through a phase called **Layout** .
In the Layout phase, the coordinates of the elements of a render tree are found. The coordinates are used to determine the exact position where the elements will be shown on the screen. Lastly, in the **Painting** phase, the elements are displayed on the screen. When we make any changes in a DOM, the browser has to build the render tree all over again. This repainting process is slow.

## How virtual DOM works

![state change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3irfjgb6g5fxk7j2vt6.PNG)
Virtual DOM represents the same DOM elements. When we make any change in a react component, every single virtual DOM gets updated. Before updating the VDOM, a snapshot is taken. This snapshot is then compared to the updated virtual DOM to figure out which VDOM object has changed. This process is called **diffing**. When react knows which object has changed, it updates only those objects in the real dom. These changes in the real DOM cause the screen to change.
New to Docker? Try it out for free!
Tags: docker, programming, microservices
Published: 2022-04-20 17:26:43

Docker is a powerful tool used to for containerization of microservices. This provides a quick way to spin up sections of an application or website that are needed at the time and spin them down after their function is served. This process saves server space, money, and makes it easier for pushing updates and fixes to a part of the project without breaking the whole thing.

###The Good and Bad
Downside... the full power of Docker costs money. But you are able to use a free virtual server on [Play with Docker](https://labs.play-with-docker.com/) to sharpen your skills, test out projects or just learn how it all works.

###Try it Out
If you click the link above, you'll be brought to Docker's free service where you get the full experience of Docker for 4 hours at a time.

I'm going to show deploying a project on Github named [HAXcms](https://github.com/elmsln/HAXcms). HAXcms is a next-gen content management system fully built out of the open source project HAX (Headless Authoring eXperience).

####Steps
1. Click the "Login" button on Play with Docker's homepage, and either login or create a new account (don't worry it's free).  Once you're logged in, hit the "Start" button and you will be brought to a page that looks like this:

![play with docker homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5sgkkzl5xegax8nhtn7.JPG)

2. From here you want to click the "+Add New Instance" button, which will spin up a virtual server for you to run your project on.

3. Now since we've started an instance we can begin running commands to build and run our project. Start by cloning the HAXcms project into your instance by clicking in the black box, typing `git clone https://github.com/elmsln/HAXcms.git`, then hit 'Enter'.
You'll see the progress of the project being cloned into your environment.

4. Once it's done cloning, let's navigate to that folder with `cd HAXcms`.

5. Now we're going to build an image of the project. We do this by running `docker build . -t haxcms`. `docker build` is our command to run the build, `.` selects the files in our project and `-t haxcms` declares the name of the image we're making.

6. Once your image is built, we're ready to run the project in our container! Run `docker run -dp 80:80 haxcms` and you'll notice a blue "80" link shows up next to the "Open Port" button.

![docker running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip3tqs9k7a0bucwk83tp.JPG)

Click that link and a new tab will open with the running project on your computer.

###You're all set!
That's the basics to getting a project running with Play with Docker. If you'd like to run your own project or another project you've found, you can follow the same steps and replace the HAXcms areas with any project you'd like.
A Tale of Three Scopes
Tags: agency, software, scoping, business
Published: 2022-04-20 17:23:34

---
title: A Tale of Three Scopes
published: true
description: One of the hardest things to figure out while running Cause of a Kind was how to scope different engagements. The entire agency business runs of fixed scopes, but they are incredibly risky and in the long run don't help the client, but hurt them through strained relationships...
tags: agency, software, scoping, business
cover_image: https://images.ctfassets.net/m33y9bdtd8t2/5xwaJSB9irzvOKZVX9MTfl/89b6bd687ddac22c0409f7009d3a5556/katie-moum-5FHv5nS7yGg-unsplash.jpg
---

One of the hardest things to figure out while running [Cause of a Kind](https://causeofakind.com) was how to scope different engagements. The entire agency business runs of fixed scopes, but they are incredibly risky and in the long run don't help the client, but hurt them through strained relationships...

Now we have three types of engagement:

1. Fixed Scopes
2. Retainer / Time and Materials
3. Subscription

We limit fixed scopes to well defined engagements. For example client has some designs and well defined business logic for the software.

We also limit these to things that can be built in ~4 - 6 weeks. This is about as far out as I feel comfortable gazing into a crystal ball.

Retainer works in the most cases. This is just straight hourly billing and works well for anything that requires a complete engagement from planning and architecture to design to development. It can support an agile workflow as new things are learned and requirements change.

The downfall to retainer is it can get very expensive in the long term. As an agency we can only trust a retainer so much to grow the business so you still rely on contractors and have unpredictability in your head. What if they just don't continue after this block?

Retainers are safe, but they are only so predictable. Our next option, subscription handles this nicely. If you have a long term development needs, at least one year in length this is the way to go.

For us we can offer more competitive rates as we can hire longer term employees. We also gain efficiency by having a single team truly learn your product. It's cheaper than trying to hire your own team and more flexible as we can swap in different engineering resources.

For example if you need to focus on a mobile app for a few months, we can bring in a react native engineer, then put it in maintenance mode for the next quarter as your goals change. We can move different talents around to fit your goals, then scale those down again.

This is a flex you wouldn't normally get when hiring a team or finding contractors. Our agency is designed for it, but most product organizations are not. Subscription allows agility in both product as well as the team building that product.

In summary:

1. Fixed scopes for well-defined short term engagements.
2. Retainers pretty much go anywhere and can handle short and relatively long term engagements.
3. Subscription for long term, evolving, agile product development.
Taking the Pain Out of Securing Your Code: A Native, Automated Approach
Tags: security, devops, github, productivity
Published: 2022-04-20 17:22:04

Today, it is more important than ever to take steps to secure your code. As a developer, you want to make sure that your applications are safe from attack, and as a business owner, you need to ensure that your intellectual property is protected.

Unfortunately, securing your code can be difficult and time-consuming. But what if there was a way to take away the pain and effort of keeping your code secure? Well, there is! In this blog post, we will introduce you to Dependabot, a dependency security solution that reduces your risk, increases your productivity, and improves your security.

## What is Dependabot?
[Dependabot](https://github.blog/2022-04-06-how-dependabot-empowers-you-to-keep-your-projects-secure/?msclkid=1d9e662ec00b11ecbc315e088e6445ce) is GitHub's supply chain security experience, and it automates the way you find and fix vulnerabilities in the software you depend on. Think automation for security.

## How does Dependabot work?
GitHub curates information on vulnerable packages in our Advisory Database. As part of the advisory publication process, GitHub maintains a database of vulnerable packages, which we use to inform you about them. We perform static analysis on these functions using GitHub's semantic code graph in order to create an impacted call graph for your repository and generate a Dependabot alert.

## What's a Dependabot Alert?
If a security vulnerability is detected, Dependabot will create a security alert and provide you with all the information you need to fix the issue. Additionally, Dependabot can automatically update your dependencies to keep them secure.
![alert sample](https://docs.github.com/assets/cb-35804/images/help/repository/create-dependabot-security-update-button-ungrouped.png)

## How can I turn Dependabot on?
Enabling Dependabot alerts is easy and only takes a few minutes. Simply go to your repository settings and enable the dependency graph and Dependabot alerts. That's it! Your code is now being monitored for security vulnerabilities around the clock, so you can rest easy knowing that your applications are safe. Is that simple! 

If you're looking for an automated solution to keep your code secure, look no further than Dependabot. By enabling Dependabot, you take the effort out of keeping your dependencies up to date.

Automation makes it easy for teams to integrate security into the development lifecycle, let Dependabot do the work for you, and enable it today.

{% embed https://youtu.be/yvXKlDgiGHo /%} 

Learn more about [Dependabot alerts](https://docs.github.com/en/code-security/dependabot/dependabot-alerts/about-dependabot-alerts), or read more about our other [security features](https://github.com/security).
How to disable right click on web page ???
Tags: javascript, programming, webdev, html
Published: 2022-04-20 17:06:49

It is not recommended to disable the Right-Click on any web page. Anyone with basic understanding of browsers can view the source and extract the information they need.

No matter what we do, We cannot prevent users from having full access to the page content. oncontextmenu event can be disabled by disabling the Javascript on the webpage. But it's good to know a way to disable the right-click on page if you ever needed.

You can disable Right-Click on web page using `contextmenu` HTML Event. The `contextmenu` event occurs when the user right-clicks on an element to open the context menu.

```
<body oncontextmenu="return false">
   <div>...</div>
</body>
```


NOTE :- If you want users to stop copying page content then use `oncontextmenu` along with CSS directive `user-select: none` .

`user-select: none` will disable any selection on web page. User won't be able to select the any text or image after that.
Day-70 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-04-20 17:01:58

Date:20/04/2022
Day:Wednesday

Today, I started with at about 11:00 am as I was in progress to complete the java script course and I was done upto half of 10th module so, today I started with the left over task firstly I started with functions returning the function as When a return statement is used in a function body, the execution of the function is stopped. If specified, a given value is returned to the function caller. For example, the following function returns the square of its argument, x , where x is a number and after this I started with call and apply methods With the apply() method, you can write a method that can be used on different objects and The call() method takes arguments separately but apply() method take argument as array. after this I started with bind method  The bind() method attaches one or more event handlers for selected elements, and specifies a function to run when the event occurs. and after this I started with
immediately invoked function in javascript An Immediately-invoked Function Expression is a way to execute functions immediately, as soon as they are created. these  are very useful because they don't pollute the global object, and they are a simple way to isolate variables declarations.and after this I started with closures A closure is the combination of a function bundled together  with references to its surrounding state the lexical environment. In other words, a closure gives you access to an outer function's scope from an inner function.and this way my day ended up and I got to learn many new things.
Lenny Face ( ‿ ) — All Text Faces Copy and Paste.
Tags: javascript, webdev, beginners, tutorial
Published: 2022-04-20 17:00:40

## Lenny Face (◕‿◕) — All Text Faces Copy and Paste.

Lenny face (◕‿◕) is a text emoji symbol that created with different kinds of unicode characters and text symbols. The text emoticon faces are often used to express the emotion nature by using these emoticon faces.

## #01: Good Night Text Emoticons

![Good Night Text Emoticons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyy0fvpdmb0ip0p807bm.png)

## #02: Good Bye Text Emoticons

![Good Bye Text Emoticons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vl98ixc27unv8yvecjl.png)

## #03: Congratulations Text Emoticons

![Congratulations Text Emoticons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5247zw7kveah29x8pv2.png)

## #04: Thanks You Text Emoticons

![Thanks You Text Emoticons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1z58fwqcodtsrwq73nx.png)

## #05: Good Morning Text Emoticons

![Good Morning Text Emoticons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ucfzjypdjmzy0np75ll.png)

Check out my new tool: [Lenny Face Copy and Paste](https://tools.stackfindover.com/lenny-face/)
5 reasons why your .env environment variables don't work
Tags: beginners, programming, discuss, dotenv
Published: 2022-04-20 16:39:53

It's happened to the best of us.

You've just started your dev server after adding in all your required [environment variables](https://medium.com/chingu/an-introduction-to-environment-variables-and-how-to-use-them-f602f66d15fa) to your `.env` file, and for whatever reason, the environment variables just aren't working.🤔

Here are a few reasons why:

## 1. Your framework doesn’t automatically load `.env` files.

While some frameworks and packages come built-in support for environment variables using .env, many packages like [Express.js](https://expressjs.com/) don’t. Instead, you’ll need to load them yourself or through a library like [`dotenv`](https://www.npmjs.com/package/dotenv).

**The fix** 👉 Use a lightweight package like `dotenv` to load your environmental variables for use. This is particularly common on the backend.

## 2. You added or otherwise updated your `.env` file _after_ starting your server.

Most dev servers don't watch for changes in `.env` files. If you add or update them later, they won't be reflected in your application.

**The fix** 👉 Restart the server.

## 3. Your `.env` file is in the wrong directory.

Some dev servers allow you to specify where your .env file will live. Others expect them to live in a certain place.

**The fix** 👉 Make sure your .env file is where it's supposed to be.

## 4. Your environment variables don't follow your framework's naming conventions.

Some dev servers include prefixes for environment variables that should be included in the client bundle.

**The fix** 👉 Check the docs for your dev server to ensure you're using the right prefixes if any. Below are a few for some popular frameworks:

- [React](https://create-react-app.dev/docs/adding-custom-environment-variables/)
- [Next](https://nextjs.org/docs/basic-features/environment-variables)
- [Vue](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables)
- [Nuxt](https://nuxtjs.org/docs/configuration-glossary/configuration-env/)
- [Remix](https://remix.run/docs/en/v1/guides/envvars#browser-environment-variables)

## 5. Your environment variables are misnamed.

You did all the above but your environment variables are nowhere to be found. Why? It's because you called it VITE_MY_LOVELY_VAR in your `.env` file but VITE_MY_AWESOME_VAR in your code.

**The fix** 👉 Check your variable names and resolve any discrepancies.

**Bonus Tip: Don’t commit your environment variables to GitHub (or any source control).**

## Wrap up

How do you handle environment variables and `.env` files? Anything worth adding? Share your tips or questions in the comments below!
How to add a custom virtual host on Windows 11
Published: 2022-04-20 16:39:21

It would be very difficult for a beginners to migrate their project to a real-time server. Especially in the case of PHP developers. What if you can use a domain name for a project to run it locally?

Yes, No kidding. You can use a custom domain name to run and test your project on your local machine! Let's see how.

## Virtual Host

> Virtual hosting is a method for hosting multiple domain names (with separate handling of each name) on a single server (or pool of servers). This allows one server to share its resources, such as memory and processor cycles, without requiring all services provided to use the same host name.

Well, even I didn't understand what is virtual host after reading the Wikipedia definition. 🥴

Let me explain more elaborately.

Let's say you have multiple projects on your server. You can use the same server and point the domains to the particular root directory of our project with Virtual hosting.

You don't have to buy a domain to test your project if it is working fine with that domain name. You can add your domain name in your local machine's hosts file and instruct your local machine to point that particular domain to the root folder of your project instead of sending a web request to an external server


You can add your own virtual hosts with just few steps

## Step 1: Add your custom domain name to your hosts file

Navigate to "C:\Windows\System32\drivers\etc\" or run the below command in your terminal

```
cd C:\Windows\System32\drivers\etc\
```
![Open hosts file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0likd5w0fmlsv2bhiobu.png)

Open hosts file and add the following line to that file and save it as an administrator

```
127.0.0.1 graphenephp.org
```
You can add your custom domain name instead of graphenephp.org
Your hosts file will look like this after adding this line

![your hosts file after adding the custom domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shfzew3j959n9tmu39nq.png)
 

## Step 2: Add the following code to httpd-vhosts.conf file
Navigate to "C:\xampp\apache\conf\extra\" or run the below command in your terminal
```
cd C:\xampp\apache\conf\extra\
```
![Open httpd-vhosts.conf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byb6m7jfth96vlqubpwu.png)
 
 
Select and open httpd-vhosts.conf file and add the following code to it
```
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/GraphenePHP"
ServerName graphenephp.org
<Directory "C:/xampp/htdocs/GraphenePHP">
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
```

After adding this code your httpd-vhosts.conf file will look like this
![httpd-vhosts.conf file after adding the code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hchokfyzq9vls4a2dyxx.png)
 

That's it you're all set. Now when your start your XAMPP server and enter the domain name in your browser, it will be pointed to your specified root directory. 😉