teleren/devto huggingface dataset:
How to Center a Div with CSS in 3 Steps!
Tags: css, beginners
Published: 2022-01-31 17:37:55

Every dev's challenge: center a div.
Nightmare mode: center it vertically AND horizontally.

Well, you don't have to fret any longer! Here's a foolproof, short way to do it. All you need are two `elements`: a container and your content.

###Step 1: Set up your HTML.
This is very short and sweet: you just need two divs! I like to declare the class semantically so we'll call them `container` and `content`.

```html
<div class="container">
  <div class="content">
    <p>This is some centered content</p>
  </div>
</div>
```

###Step 2: Set up your container's CSS.
 We'll give container a `width` of `100%` and a `height` of `100vh`. This ensures that your canvas is covered.

Then, we take care of what's inside by declaring `display: flex`, `justify-content: center`, and `align-items: center`. This ensures your content is centered.

```css
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

###Step 3: CSS - Set up your content.
For the content itself, you're free to style this how ever you'd like. Since we don't have much content, I set the `width` to `300px`. You can also apply it as a percentage width to keep it responsive!

```css
.content {
  width: 300px;
}
```

And that's it! That's all you need to set your content at the absolute center. Here's a [codepen](https://codepen.io/catvscode/pen/RwjPXrm) for your convenience to copy out of:

{% codepen https://codepen.io/catvscode/pen/RwjPXrm %}

---

## Thanks for reading!!
If you like my content, please give me a follow on [Twitter](https://twitter.com/catcarbn)!
Primitive and reference values in JavaScript
Tags: javascript, webdev, beginners, react
Published: 2022-01-31 17:17:06

"Primitive" and "reference" values in JavaScript, a concept most developers skip as it seems to be too theoretical, actually became quite important when I was learning React. If you don't know about this, let me quickly summarize the concept.

In JS, there are two types of data/values that can be stored in a variable, primitive value and reference value.

Q1. Which values are primitive and which ones are references?

- Any number, string, boolean, undefined, null, or symbol is a **primitive** value.
- Arrays, Objects, and Functions are **reference** values.

Q2. Where does a primitive value gets stored, and where does a reference value gets stored?
- When you declare a variable having a primitive value, the JS engine allocates the memory and store the value on the **stack**.
- On the other hand, when you declare a variable having a reference value, the JS engine allocates the memory and store the value on the **heap**.

Q3. On calling these two types of variables, what do we get in return?
- When you access a primitive value, **you get the actual value of it**. That is why when we assign a variable that stores a primitive value to another, the value stored in the variable gets copied into the new variable. **Now if you make a change in any of the variables, the other one doesn't get affected.**
- When you access a reference value, **you get the reference/location of the memory of it**. That is why when we assign a variable that stores a reference value to another, the location of the value is passed to the other variable. Now if you make a change in any of the variables, **the other one also gets affected **because they are pointing to the same value stored in the heap memory.

Want to read a more clear explanation with examples? You can check out an amazing [article by Tyler McGinnis](https://bit.ly/3ugGHZf) on the same.

Happy coding :)

###10DaysofJSfundamentals (Day 4)
Cron Job
Tags: ubuntu, php, hestia, vesta
Published: 2022-01-31 17:13:12

crontab -e

Создать очередь

```ubuntu
59 7 * * * /usr/bin/php7.4 /home/admin/web/host.com/public_html/index.php /route/rout/rou >/dev/null 2>&1

```
Создать очередь через Hestia или Vesta

```console
php -d max_execution_time=60 -f /home/admin/web/host.com/public_html/index.php /route/rout/rou >/dev/null 2>&1
```

Выполнить очередь
```console
* * * * * /usr/bin/php7.4 /home/admin/web/host.com/public_html/index.php /queue/process >/dev/null 2>&1
```

CLI
Пробрасываем роут в очередь cli
```php
protected function cli(\Components\Route $route)
	{
		$route->cli('/route/rout/rou', 'App\Controllers\folder\TESTController@method');
	}
```
Add AWS Toolkit in Visual Studio 2019 / 2022
Tags: aws, dotnet, cloud, beginners
Published: 2022-01-31 17:01:26

Hi! In this tutorial, we will learn how to install the AWS extension from Visual Studio. This tool will allow us to work with the .NET ecosystem in terms of developing, debugging and implementing solutions with Amazon Web Services.

###**Step 1. Install the extension**

With Visual Studio started, we can go to the Extensions section from the options menu, and select Manage Extensions. In this space we can search for the AWS Toolkit for Visual Studio and proceed with the installation. 

Here, we can also find the installables:

- [AWS Toolkit for Visual Studio 2017 and 2019](https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.AWSToolkitforVisualStudio2017).

- [AWS Toolkit for Visual Studio 2022](https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.AWSToolkitforVisualStudio2022).

###**Step 2. Authenticate with AWS**

Once the extension is installed, when you start Visual Studio, the AWS Configuration Wizard will start and ask us to configure our credentials. In this case, we can make use of the configuration file that is generated when creating an AWS IAM account. Here, we can review that process: [Set up an AWS IAM account to deploy our applications with ASP.NET](https://dev.to/esdanielgomez/create-an-aws-iam-account-to-deploy-our-applications-with-aspnet-3bbd).

Finally, we will visualize something like this: 

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

By saving the credentials, we will have the AWS Explorer ready that will allow us to work with the AWS services with which we have authorization. This is in accordance with the policies established for our AWS IAM user. 
 
###**Everything is ready!**

With everything in place, we can already work with AWS from Visual Studio, for example, to be able to deploy our web applications with ASP.NET to AWS.

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

####**Thanks for reading!**

If you have any questions or ideas in mind, it will be a pleasure to be able to be in communication and together exchange knowledge with each other.

See you at [Twitter](https://twitter.com/esDanielGomez) / [esDanielGomez.com](https://esdanielgomez.com)!
WebAssembly on iOS error (please help)
Tags: webassembly, ios, help, typescript
Published: 2022-01-31 16:57:13

Has anyone had any experience working with WebAssembly on iOS? I know WebAssembly should work on iOS 14+, but for some reason I keep running into this error:

```
Syntax Error: WebAssembly is undefined
```
The weirdest thing is that when I run my app in a simulator everything runs smoothly, but on an actual device I keep getting the Syntax Error.

If anyone could help or provide some direction on where I might be able to find the answer, that would be hugely appreciated as this has been driving me crazy 😅
Easy CSS Clamp SCSS Mixin
Published: 2022-01-31 01:37:30

The [CSS clamp function](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()) is great.

For anyone not familiar with it, it allows you to elegantly set a minimum and maximum size to something, as well as define a function to transition smoothly between them.

Its syntax goes something like this:

```SCSS
font-size: clamp(12px, 2.5vw, 16px);
```

In a nutshell, this sets the font to be 2.5vw, with a minimum font size of 1 rem and a maximum font size of 2 rem.

So at screen width <= 480 px, the font-size is 12px.
At screen width >= 640 px, the font-size is 16px.
Between 480px and 640 px, it transitions linearly between the two sizes.

Now let's say you wanted to change the threshold for a 12px font from 480px to 400px - it's not very simple, you'd have to do some algebra. Thankfully, [Pedro Rodriguez](https://twitter.com/pprg1996) wrote [a great post](https://css-tricks.com/author/pedrorodriguez/) for CSS-Tricks detailing the math involved.

So I took that math and turned it into a SCSS mixin. Here it is:
```SCSS
/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is 
below $min-width, 
$size-at-max-width when page width is above $max-width, 
and linearly scales between the two between $min-width and $max-width*/

@function clamp-calc($min-width, $max-width, $size-at-min-width, $size-at-max-width) {
    $slope: ($size-at-max-width - $size-at-min-width) / ($max-width - $min-width);
    $y-axis-intersection: -1 * $min-width * $slope + $size-at-min-width;
    $return-value: clamp(#{$size-at-min-width}, #{$y-axis-intersection} + #{$slope} * 100vw, #{$size-at-max-width});
    @return $return-value;
}
```

Using this function, we can rewrite our original CSS snippet:

```SCSS
font-size: clamp-calc(480px, 640px, 12px, 16px);
```

Which [does indeed](https://gist.github.com/ChristianMay21/c675abf2a53183c3289dc65a570730a1) compile to the same CSS (albeit a bit more verbose):
```SCSS
body {
  font-size: clamp(12px, 0px + 0.025 * 100vw, 16px);
}
```

Happy styling! Quick note: the function will work with units other than px, but `$min-width` and `$max-width` will need to be the same unit, and `$size-at-min-width` and `$size-at-max-width` will need to be the same unit.
Bolsas de Mestrado para trabalhar com Elixir
Published: 2022-01-31 16:43:33

Acabei de ler esta matéria ([Criador da linguagem de programação Elixir e diretor da Dashbit investe em bolsas de mestrado e iniciação científica no Laboratório de Compiladores do DCC](https://dcc.ufmg.br/criador-da-linguagem-de-programacao-elixir-e-diretor-da-dashbit-investe-em-bolsas-de-mestrado-e-iniciacao-cientifica-no-laboratorio-de-compiladores-do-dcc/)) no site do Departamento de Ciência da Computação (DCC) da Universidade Federal de Minas Gerais (UFMG). 

Tanto a UFMG é uma das melhores universidades do Brasil, quanto o DCC é um dos melhores departamentos de computação do Brasil. 

Em resumo: a Dashbit, empresa do José Valim, está financiando bolsa de mestrado na UFMG. Eu fiquei sabendo disso ano passado em primeira mão quando entrevistei tanto José Valim (para o [Elixir em Foco](https://www.elixiremfoco.com/)) quanto Fernando Magno Quintão Pereira (para o [Fronteiras](https://fronteirases.github.io/)).

A matéria fala de UMA bolsa em 2021. Mas é possível que a bolsa seja ofertada em anos seguintes. Eu sei que a [Erlang Ecosystem Foundation](https://erlef.org/) também tem verba que talvez possa ser usada para bolsas de mestrado e doutorado relacionadas a Elixir, Erlang ou à [BEAM](https://en.wikipedia.org/wiki/BEAM_(Erlang_virtual_machine)). 

Portanto, se você tem interesse em fazer mestrado e/ou doutorado relacionados a esta linguagem, entre em contato comigo!
ReactJS - Adding a environment file to ReactJS project
Tags: react, javascript, beginners, tutorial
Published: 2022-01-31 16:28:23

> ⚠ Note: this feature is available with react-scripts@0.2.3 and higher.

> WARNING: Do not store any secrets (such as private API keys) in your React app!

> Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

So why not I just use a `.js, ts, json` file, well something is better than having nothing.

Sometimes we need to have multiple development environments `[dev, stag, prod]` and according to these environments you want to choose your variables, that's where `.env` files can be useful. 

> There are two ways you can use `environment` files in you react js project. 

## Method: 1.

If your project is built with CRA(create-react-app), then it becomes very easy.
Read the official documentation.
> [Adding Custom Environment Variables to CRA project](https://create-react-app.dev/docs/adding-custom-environment-variables/)

#### Long story short - 
- Create a `.env` file at the root of your project.
- Variable name must start with `REACT_APP_`
- Use it anywhere in react - `process.env.REACT_APP_VAR_NAME`

Quick sneak peak - 

![Adding Custom Environment Variables to CRA project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idhfk9chgwrn8dqtyisj.png)

## Method 2
For custom ReactJS setups, please refer to this stackoverflow. This link lands you directly to the working solution.
> [Adding an .env file to React Project](https://stackoverflow.com/questions/49579028/adding-an-env-file-to-react-project#answer-49579700)

 

📝**NOTE** - Need to restart application after adding variable in `.env` file.


 > [How to use multiple environment files in ReactJS](https://dev.to/rajeshroyal/handle-multiple-environments-in-reactjs-dev-stag-prod-1b9e)
 
 
That's all for today! see you soon 👀. Oh! I forget to tell you that you can still make that heart red in top left corner or save this for later 🤘 Tada 🙋‍♂️
2 Day of 100 Days of Code
Tags: 100daysofcode, python, opensource
Published: 2022-01-31 16:22:49

## Day 2 of #100DaysOfCode started with...
refresh my PHP knowledge. I made the documentation / wiki of the [DiscordCustomRPC.py repository](https://github.com/InvalidLenni/DiscordCustomRPC.py) a little more understandable. I also updated the Python rewrite of the AntiScamBot backend, but it's not yet merged.
CSS 3D Flip
Tags: css, 3d
Published: 2022-01-31 16:20:51



In CSS, the transform property is used to change the coordinate space of an element, with transform property effects like rotate, skew, and translate being added to an element. Transform helps to design elements that improve user interaction with the webpage.

```css
 .element{
      background-color:transparent;
      width:300px;
      float: left;
  transform: rotateY(180deg);
}

```
![flip Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/je75a7yz51pt02mtyfwm.png)

Transform  Syntax
```css
 transform: rotateY(angle);
```

When using CSS 3D flip, transform takes one function either rotateY() or rotateX() each of these functions has one parameter angle e.g 180deg, that determines what degree the element should rotate. The parameter specifies the angle of the rotation, the parament can be a positive number or negative number.
A positive number will result in a clockwise rotation and a negative value result in a counter-clockwise rotation
rotateY();
rotateY() function rotates an element around the y-axis when used with the CSS transform property. the function value can be positive to rotate the element clockwise or negative to rotate the element counter-clockwise on a y-axis direction as shown below:
 
.element{
      background-color:transparent;
      width:300px;
      height: 400px;
      transform: rotateY(-100deg);
}


This will rotate the element 100 degrees in counter-clockwise direction on the y-axis direction.

rotateX()
The rotateX() function is used with CSS 3D-transforms. It's used with transform property to rotate an element around the x-axis. It can be used along with rotateY() to rotate the element around the y-axes when needed.

.element{
      background-color:transparent;
      width:300px;
      height: 400px;
      transform: rotateX(180deg);
}


The above code will rotate the element 180 degrees in a clockwise direction on the x-axis direction.
  transform: rotateY(180deg);

rotateY();

{% codepen https://codepen.io/popoolatopzy/pen/LYzXGpY %}

rotateX();
{% codepen https://codepen.io/popoolatopzy/pen/KKXrVmB %}
VAT Calculator
Published: 2022-01-31 16:19:13

This is a VAT calculator that I made in Python3. It has the ability to add or remove VAT (20%) to any numerical value provided. The result then automatically copies to clipboard so that the value can be used where required. It is programmed to loop so that it can be used with as many values as needed.

![VAT calculator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgerkputcg597oh10lpa.PNG)

This is the code I used.

```
import pyperclip

vat = 1.2


def remove_vat(x, y):
    return x / y
def add_vat(x , y):
    return x * y

while True:
    print("#### VAT Calculator ####")
    num = float(input("Enter Amount: "))

    print("Choose Operation:")
    print("1. Remove VAT")
    print("2. Add VAT")

    choice = input("Enter Choice(1/2):")
    result = 0

    if choice =='1':
        result = remove_vat(num , vat)
    elif choice == '2':
        result = add_vat(vat , num)
    else:
        print("Invalid Input")

    print(round(result , 2))
    pyperclip.copy(round(result , 2))
```
I was inspired to make this because I was using an [online VAT calculator](https://www.online-vat-calculator.co.uk/) which was effective but I believed that I could speed up my workflow by making this simple tool and did not want to rely on an internet connection to be able to use it.
Ng-News: Issue 22/04
Tags: angular, nightwatch, monorepository, testing
Published: 2022-01-31 16:14:36

This is a weekly posting, covering the latest updates from the Angular community.

{% youtube P_Aduwp65Bo %}

## Angular 13.2

We have a minor version upgrade to 13.2. Angular follows semantic version. This means, a minor version can add new features, can fix bugs, but everything is fully backward-compatible.

So you can safely run `ng update` and your application shouldn't break.

Among the new features, we have two additional template checks. You will get a warning if you are using the two-way binding syntax in the wrong way. And, if you are using the nullish coalescing operator (the "Elvis" operator) on a non-nullable object, then you will also get a warning.

Finally, the `FormControl` has an initial value and reuses it,  if you call the rest method on that FormControl.

[Official Release Notes](https://github.com/angular/angular/releases/tag/13.2.0)

[Analysis from Ninja Squad](https://blog.ninja-squad.com/2022/01/27/what-is-new-angular-13.2/)



## Website about Monorepositories

Nrwl, the company behind nx, an extension to the Angular CLI, created a new website which focuses on Monorepositories, and compares different tools like nx, lerna, Bazel, and many others.

With Monorepositories, it is effortless to share code between multiple projects. As the term mono indicates, all the projects are placed in a single repository, sharing the same dependencies. You could use it for monolithic applications but also Microfrontends. Especially with the latter, it is a good fit because you can avoid having version conflicts.

[Monorepository Tools](https://monorepo.tools/)

[Use Cases for Monorepositories](https://blog.nrwl.io/misconceptions-about-monorepos-monorepo-monolith-df1250d4b03c)

## Miscellaneous

### Nightwatch 2

Nightwatch, an E2E testing framework, was released in version 2. If you are still running on Protractor and are looking for a Selenium-based successor, this might be of interest. 

[Nightwatch 2 - Release Notes](https://nightwatchjs.org/guide/getting-started/whats-new-v2.html)

### Testing Videos: Kevin Kreuzer
Kevin Kreuzer released two videos. One about marble testing in RxJs and another one about Harnesses. You can see harnesses as a library for UI components that makes testing them much easier. 

{% youtube rlkCeeyBwf8 %}

{% youtube jG-2ldLQRIE %}

### Angular Virtual Conference
We also had the Angular Virtual Conference. It lasted one day. Its recordings are available for free on YouTube.

{% youtube cSROnw5DuRs %}
5 Articles every WebDev should read this week (#05)
Tags: webdev, tutorial, javascript, programming
Published: 2022-01-31 16:01:40

A curated list of the top five web development must-reads from last week. Don't miss out on the latest web development stories and insights. Read all about the cutting edge in web development, working in tech and the new tools and frameworks while learning a few new tricks.

---

## Boost Performance with Web Workers: A Detailed Guide

> A Step by Step Guide on How to Imitate multi-threading in JavaScript with Web Workers

https://blog.bitsrc.io/web-workers-a-step-by-step-guide-to-boosting-performance-with-web-workers-11307238b36e

---

## Getting Started With CSS Cascade Layers

> Cascade layers introduce the new at-rule of @layer. The intent is to help CSS authors be more intentional about ordering the “layers” of CSS rules as a new method of cascade management.

https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/

---

## TypeScript Features to Avoid

> This post lists four TypeScript features that we recommend you avoid. Depending on your circumstances, there may be good reasons to use them, but we think that avoiding them is a good default.

https://www.executeprogram.com/blog/typescript-features-to-avoid

---

## How do you actually prevent bugs?

> Here I would like to share exactly how I help prevent bugs on projects and how I help others come up with ideas on how to prevent bugs as well.

https://nicolalindgren.com/2021/11/15/how-do-you-actually-prevent-bugs/

---

## What’s New In DevTools?

> What’s new in Chrome, Edge, Safari and Firefox? Patrick Brosset breaks it down with the latest features in DevTools across browsers.

## https://www.smashingmagazine.com/2022/01/devtools-updates-2022/


---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr).

Photo by [Alex Kulikov](https://unsplash.com/@burntime) on [Unsplash](https://unsplash.com)

---

[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---
Infinite Cars | Car Race Game
Tags: codepen, gamedev, javascript, showdev
Published: 2022-01-31 15:56:08

<h1>Infinite Cars</h1>

<h2>Description</h2>

<p>My first ever game created using a game engine!</p>

<p>Why "Infinite Cars"? Well simply because this is an endless racing game.</p>

<p>This is just a simple time killer when you are bored.  This game does not have a specific goal. Just drive the car, survive the game, and dodge all the obstacles with all your might!</p>

<p>I already created many versions of this game, but this is so far is my creation that I feel satisfied the most. Well it's because this is the first time I actually used a game engine.</p>

<p>The computer car has a light artificial intelligence algorithm which it avoids an obstacle to go through. Although, it's not perfect, I'm already satisfied with it.</p>

<p>I read the API documentation, and the code in the examples a lot, for me to understand how to work on this game. Although, I'm pretty sure that my writing is not perfect.</p>

<h2>Instructions</h2>

<p>As mentioned before, just avoid the obstacles on the road.</p>

<p>You may drag the red car (or the character) to left or to the right to control it.</p>

<p>There is no other controls other than that.</p>

<p>If you feel that the background sound effect is noisy, you may mute it (Located at the top right of the game screen).</p>

<h2>Resources</h2>

<p><a href="https://phaser.io/">Phaser</a> - JavaScript game engine or framework.</p>

<p><a>Aseprite</a> - Drawing tool for the game objects .</p>

<p><a href="https://lmms.io/lsp/">LMMS</a> - DAW application for the sound effects.</p>

<p><a href="https://fonts.googleapis.com/css2?family=Luckiest+Guy">Luckiest Guy</a> - Font used for the texts.</p>

<p><a href="https://lospec.com/palette-list/aap-64">AAP64</a> - The color palette used for the images and the UI.</p>

https://codepen.io/takaneichinose/project/editor/AMQxen