teleren/devto huggingface dataset:
Como Iniciar?
Tags: webdev, programming, html, curso
Published: 2022-02-25 21:10:15

Esta é uma pergunta que sempre vejo em varios lugares.
Hoje em dia tem varias comunidades para quem quer iniciar seu aprendizado, melhorar seu conhecimento ou se aperfeiçoar a recode.org.br e a web.dio.me por exemplo, são ótimos lugares.
A próxima pergunta que vejo ou deveriam se perguntar "Qual é o próximo passo?", "Onde vou praticar o que aprendi?" essa segunda questão é o que muitos irão fazer e vão ficar sem respostas.
For loops for beginners!
Tags: javascript, beginners
Published: 2022-02-25 21:08:08

So you are coding your new project, and lo and behold! You are stuck writing line after line of repetitive code. Oh how you wish this was not as tedious and for it just to be over. Luckily for you, there are loops!

Loops allow programmers to write what could be dozens of lines in just a few. They preform code and repeat it as many times as necessary.

For example, say we are trying to make a lot of cookies for a bake sale, but you can only make around a dozen each batch. We can use loops to repeat the steps for us so we do not need to write the many lines of repetitive code!

**Syntax**

```
for (initialization condition; testing condition; increment/decrement)
{
    statement(s)
}
```

- For loops execute step by step -

- Initialization condition: You initialize a variable to use for the for loop, which is local for the loop only.

- Testing condition: Used to exit the loop. Returns a Boolean value, and it is checked before executing the loop.

- Statement execution: If the Boolean returns as true, it executes the statements in the body of the loop.

- Increment/Decrement: used to update the variable for next iteration

- Loop termination: When condition becomes false, the loop terminates, ending it.

**Code Example**

```
for (let i = 0; i < 5; i++) {
  nums[i] = i;
  console.log(nums[i]);
}
```

**Code Output**

```
0
1
2
3
4
```
We can also put for loops into more for loops! This is called nesting, and every time the nested for loop completes, and terminates, the outside for loop increments or decrements once.

**Code Example 2**

```
for (let i = 0; i < 2; i++) {
  for(let j = 0; j <2; j++){
  nums[j] = j;
  console.log(nums[j])
  }
}
```
**Code Output 2**

```
0
1
0
1
```
In conclusion, for loops can be a very useful tool for every programmer that is trying to save as much time, and to be as efficient as possible!



Credit to [Ankit Lathiya - Java For Loop: Iteration In Java – Complete Guide](https://appdividend.com/2022/01/20/java-for-loop/)
regimechange.js
Tags: devops, opensource, news
Published: 2022-02-25 20:42:09

**[https://github.com/outdatedregime/change](https://github.com/outdatedregime/change)**

## A Desperate Cause!
Putin surrounded Russias brother country Ukraine with 190.000 troops and invaded.

Still, up to 50-70% of Russians have a favorable opinion of Putin.

Help the world break through the Russian state propaganda wall.

## How Does It Work?
When executed, this script detects whether the user is located in an old russian regime. If the user's regime is out of date we redirect them to this cool looking warning page advising the user to stay informed about what it's regime is doing.

[How to Guide](https://outdatedregime.github.io/change/how.html)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2022-02-25 20:34:56

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there! 


Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Getting some great feedback ... or whatever else might spark joy ❤️ 

---

Congrats on everything you're proud of!

![Trophy](https://media.giphy.com/media/jIRyzncqRWzM3GYaQm/giphy.gif)
Oak Technologies LLC | OakTechnologiesLLC
Published: 2022-02-25 16:59:07

All the brands work hard to define and present their brand to the audience. There are millions of brands that are trying to build their career by offering their services online. If you want to present your brand online to your potential customer. You need to ensure your strong digital presence.

A strong digital presence can be started by getting a responsive website. A website helps in defining the brand to the customers. Customers are only interested in buying if they are able to communicate with the brand. By having a website, you can fulfill this need. You should contact Oak Technologies LLC to get this requirement fulfilled with the help of their expert web designers.
They will design the website in such a way that gives a chance to the customers to contact the brand easily. It will help in creating a robust digital presence. The website will share all the important information like business hours, product listing, and contact information. These are the foremost things required by the clients.

Oak Technologies LLC also makes unique content for the website. Their designers are skilled at creating unmatched content to spread the message of the brand. All the business goals can be achieved by getting digital services at low prices. [Oak technologies LLC](https://oaktechnologies.ae/) have created more than 870 projects for clients. They get your work done by expert designers, video makers, content writers. The projects are delivered on time without any delay. The time frame is set by the client during the consultation. Free consultations provide to the clients. The agency tries to achieve all the information it needs before creating the project. All the requirements of the clients are also understood by the clients.
Jornada DEV 1/52 semanas
Tags: beginners, html, github
Published: 2022-02-25 19:58:15

Depois de algum tempo estudando programação, decide de fato me desafiar a manter um ritmo de estudos. Seguindo a Lógica do formato de estudo da kenzie(não faço o curso). 
O objetivo é estudar diariamente por um ano, por conta própria. Vou deixar meu perfil do github para quem quiser acompanhar os estudos, aceito dicas de estudo <3 

https://github.com/bysunshinearts
Why Write Tests?
Tags: test, webdev, programming, codenewbie
Published: 2022-02-25 19:56:41

**Hello 👋 techies,**

>This week's article will be addressing a very important, essential and one of the most underrated sections in the tree of software development, which is Testing.

*With my little observation most developers especially junior developers tend to know nothing about writing tests and nearly all companies including average companies take testing in their developing process.*

### Firstly, what is test?
Test is a program created with a major aim to source out bugs and possible errors in another piece of code or program.

### Reasons Why Test is Underrated.
- Some developer sees testing as a waste of time, which can be really and truly time-consuming.
- Some developers don't attempt because it can be boring and frustrating while writing 
- Some developers can't just find a solid reason why they must write code for a piece of code or set of codes 

### Why write tests?
 Why does testing sound as important as this.
- Testing is one of the laid down processes in software development.
- Most companies values testing, knowing how to write tests makes it a plus and advantage for a developer.
- Tests actually save one from time wastage and stress due to bugs.



> **Thanks for reading through this article and I hope you found it useful, you can connect with me on;**

- [Twitter](https://twitter.com/chryz_code)
- [GitHub](https://github.com/chryz-code)

**Bye 👋.**
Mature optimization is not that evil
Tags: react, hooks, beginners, optimization
Published: 2022-02-25 19:47:30

You probably know saying "Premature optimization is the root of all evil", but is all optimization premature and evil?
Sometimes 1% differences can have a significant impact.
In a world where everybody is using their phone for browsing the internet, small optimizations can mean additional minutes of browsing time on a single charge.

Today I wanted to write about a little feature in React that will help you on your journey of 1% improvements.
`useMemo()` is a hook that returns the memoized value. We can use this hook when we want to avoid calculations every time we render the component. The first argument of the `useMemo()` hook is a function we create, and the second is an array of dependencies. By passing a function to `useMemo()` hook, it will be called in the first render, and the stored value will be returned on each subsequent re-render, so you can avoid additional calculations each time the component is rendered. However, if one of the values passed in the array of dependencies changes, the function will be called again to obtain and store the new value. 

It's important to first write code that works and then add performance optimization to it using `useMemo()`. Properly used `useMemo()` does not change anything in the behavior of the application, it only affects performance.

The examples of `useMemo()` based on a counter are everywhere, so I'm adding my simple example below.

![useMemo() simple example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0674gqksmwl0z6dtbqey.png)

I'm creating a quiz in which content will be defined by the user, the quiz will have multiple stages/steps. Depending on the stages of the quiz, as well as the selected language, I want to display a different label on the button. For example, when displaying questions, the footer with "prev" / "next" buttons will be displayed, but when it is the last question, instead of "next" I will display "submit" on the button, etc. 

This way the label won't be recalculated until we move to another 'stage' of the quiz. Otherwise, a re-render is not needed. It may be a small change, but it things like that add up.

I think it's always a good idea to review your code and consider if there's any room for improvement.
How To Upload Images In Laravel | Laravel For Beginners | Laravel 9 Tutorial
Tags: laravel, beginners, vue, tutorial
Published: 2022-02-25 19:46:00

{% embed https://www.youtube.com/watch?v=dUAxXwKodnQ %}


In this video, we are going to learn how to upload images with Laravel.

Follow me:
Twitter: https://twitter.com/Laravellercom
Facebook Page: https://www.facebook.com/1laravellercom
Instagram: https://www.instagram.com/laravellercom/
Github: https://github.com/laraveller
Website: https://laraveller.com/

Playlists:
Laravel Testing For Beginners: https://bit.ly/3t1gNq4
Laravel Roles and Permissions: https://bit.ly/3gOhM7d
LARAVEL INERTIA MOVIE APP: https://bit.ly/3FVMp4Q
Laravel Livewire Movie App: https://bit.ly/3s8D6v1
Laravel Classified Website - https://bit.ly/3nsFRnb
Livewire Employees - https://bit.ly/2ZtIpZY
Laravel Employees Management - https://bit.ly/3Gglt14
Laravel admin panel - https://bit.ly/3CcX75M
DotVVM para Visual Studio 2022
Tags: webdev, dotnet, csharp, html
Published: 2022-02-25 19:33:39

DotVVM es un framework de ASP.NET que nos permite crear aplicaciones web utilizando el patrón MVVM (Modelo Vista Vista-Modelo) empleando C# y HTML. 

Desde este momento, DotVVM ya está disponible para Visual Studio 2022 por medio de una extensión. 

###**Pasos a seguir**

Para instalar esta extensión podemos realizar los siguientes pasos: 

1.- Cargar Visual Studio, dirigirse a la sección de Extensiones y seleccionar Manejar extensiones. 


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

2.- Buscar DotVVM.


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

3.- Descargar la extensión y seguir las instrucciones.

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

4.- Reiniciar Visual Studio y crear un nuevo proyecto.

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

5. Buscar DotVVM y seleccionar DotVVM Web Application. 


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkrvmfvi74tdeyzpygl6.png)
 
Con estos pasos, DotVVM está listo para poder ser utilizado desde nuestro Visual Studio 2022. El proceso es el mismo para Visual Studio 2019. 

###**Recursos adicionales**

Si deseas conocer todo lo que puedes hacer con DotVVM, aquí hay algunos artículos de casos prácticos que pueden serte de utilidad:
 
- [DotVVM y ASP.NET Core: Implementación de operaciones CRUD](https://dev.to/dotvvm/dotvvm-y-asp-net-core-implementacion-de-operaciones-crud-43oe).
- [Construyendo un Dashboard con ASP.NET Core y DotVVM](https://dev.to/esdanielgomez/construyendo-un-dashboard-con-asp-net-core-y-dotvvm-geh).
- [Trabajando con servicios web a través de ASP.NET Core y DotVVM](https://dev.to/dotvvm/trabajando-con-servicios-web-a-traves-de-asp-net-core-y-dotvvm-4c76).

###**Gracias por leer**

Si tienes alguna duda o idea en mente, será un gusto poder estar en comunicación contigo y juntos intercambiar conocimientos entre sí.

Nos vemos en [Twitter](https://twitter.com/esDanielGomez) / [esDanielGomez.com](https://esdanielgomez.com)!
Playwright Github Actions question
Published: 2022-02-25 19:33:34

---
title: Playwright Github Actions question
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Hey all! I'm trying to integrate Playwright into my CI pipeline with a NextJS app, Github and Vercel as the host. I've got Playwright (the first time I'm using it) loaded and running a couple sample tests, and it comes with a boilerplate workflow playwright.yml file like this:

```
name: Playwright Tests
on:
  push:
    branches: [main, master]
  pull_request:
    branches: [main, master]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: "14.x"
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright
        run: npx playwright install --with-deps
      - name: Run Jest
        run: npm run test
      - name: Run Playwright tests
        run: npx playwright test
      - uses: actions/upload-artifact@v2
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

```
This works fine locally since I have my dev server running, but how can I test this as part of the Github Action? I assume I'm missing something very simple that will run the server to let me actually test it, but can anyone point me in the right direction? 

Thanks!

**Update:**
I hadn't realized you needed to separately enable the webServer block in the playwright.config.ts file. In my case, using Next, I had to set it to:

```
webServer: {
  command: "npm run build && npm run start",
  port: 3000,
}
```
Section 3.2 - AWS Certified Cloud Practitioner Study Guide
Tags: aws, cloudskills, examprep, cloud
Published: 2022-02-25 19:08:49

**This series is intended to be a personal study guide. Information may not be comprehensive or accurate. I am sharing it in case others find it useful. Please feel free to comment if any information is inaccurate.**

[Return to Exam Guide](https://dev.to/aidutcher/aws-certified-cloud-practitioner-study-guide-exam-guide-outline-233o)

**<u>3.2 Define the AWS global infrastructure</u>**

[AWS global infrastructure](https://aws.amazon.com/about-aws/global-infrastructure/regions_az/)

**Describe the relationships among Regions, Availability Zones, and Edge Locations**

- _Regions_ - physical locations in the world where data centers are clustered; contain multiple AZs
- _Availability Zones_ - one or more discrete data centers with redundant systems
- _Edge Locations_ - site that [CloudFront](https://aws.amazon.com/cloudfront/) uses to cache copies of content for faster delivery to end users

**Describe how to achieve high availability through the use of multiple Availability Zones**

- _Recall that high availability is achieved by using multiple AZs_
     - Using multiple AZs means if one AZ goes offline the data is still available
- _Recognize that AZs do not share single points of failure_
     - Different AZs do not use the same physical resources and will not fail together

**Describe when to consider the use of multiple AWS Regions**

- _Disaster recovery/business continuity_ - data and services withstand large-scale disaster events
- _Low latency for end-users_ - deploying in regions close to user bases
- _Data sovereignty_ - different regions may have different regulations regarding data

**Describe at a high level the benefits of Edge Locations**

- [_Amazon CloudFront_](https://aws.amazon.com/cloudfront/)
     - Reduce latency by deploying through globally dispersed Points of Presence
- _[AWS Global Accelerator](https://aws.amazon.com/global-accelerator/?blogs-global-accelerator.sort-by=item.additionalFields.createdDate&blogs-global-accelerator.sort-order=desc&aws-global-accelerator-wn.sort-by=item.additionalFields.postDateTime&aws-global-accelerator-wn.sort-order=desc)_
     - Improve network traffic performance using AWS global infrastructure
     - Get two global static public IPs to serve as fixed entry point to application

[Return to Exam Guide](https://dev.to/aidutcher/aws-certified-cloud-practitioner-study-guide-exam-guide-outline-233o)
Section 3.1 - AWS Certified Cloud Practitioner Study Guide
Tags: aws, cloudskills, examprep, cloud
Published: 2022-02-25 18:51:39

**This series is intended to be a personal study guide. Information may not be comprehensive or accurate. I am sharing it in case others find it useful. Please feel free to comment if any information is inaccurate.**

[Return to Exam Guide](https://dev.to/aidutcher/aws-certified-cloud-practitioner-study-guide-exam-guide-outline-233o)

**<u>3.1 Define methods of deploying and operating in the AWS Cloud</u>**

**Identify at a high level different ways of provisioning and operating in the AWS Cloud**

- _Programmatic access, APIs, SDKs, AWS Management Console, CLI, Infrastructure as Code_
     - _Programmatic access_ - allows user to make API calls, use the AWS CLI, or use the Tools for Windows PowerShell
     - _APIs_ - services can be accessed through their own APIs
     - _SDKs_ - software development kits, allow developers to build on AWS using their preferred languages
     - _Management Console_- browser-based UI, easy to use but sometimes slower and more difficult to govern
     - _CLI_ - control services from the command line and automate with scripts
     - _Infrastructure as Code (IaC)_ - define resources in code and deploy them to cloud environment (allows for code review and version control)

**Identify different types of cloud deployment models**

- [Types of cloud computing](https://aws.amazon.com/types-of-cloud-computing/)
- _All in with cloud/cloud native_ - deploy and operate entirely in the cloud
- _Hybrid_  - some on-prem solutions mixed with some cloud solutions
- _On-premises_ - deploying cloud services on-prem, see [AWS Outposts](https://aws.amazon.com/outposts/)

**Identify connectivity options**

- _VPN_ - establish secure connections between your on-premises networks, remote offices, client devices, and the AWS global network using encrypted tunnels
- _[AWS Direct Connect](https://aws.amazon.com/directconnect/)_ - alternative to using internet, has higher speed and lower latency
- _Public internet_- use internet gateways to allow users to connect to resources through the internet

[Return to Exam Guide](https://dev.to/aidutcher/aws-certified-cloud-practitioner-study-guide-exam-guide-outline-233o)
Svelte + Webpack + Sass
Tags: svelte, beginners, webpack, saas
Published: 2022-02-25 07:58:36

Solving this particular solution took me quite some more time than expected. So, I thought of sharing it here.

**Starters**

- npx degit sveltejs/template-webpack svelte-app (for svelte installation with webpack)

- cd svelte-app

- npm install

- npm run dev

After running npm run dev, Svelte will compile and build your application. It will start a local server at localhost:8080.

**Main Course**

To begin, you'll need to install sass-loader

- npm install sass-loader sass webpack --save-dev

Now, if you get an error regarding 'style-loader' . Run the below command to install style-loader

- npm install style-loader --save

Further, you have a starter pack of svelte with webpack and your folder structure have default files and folders.

If you wish to explore more about the details of the files.
Check it out [here] (https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started)

You will have webpack.config.js instead of rollup.config.js

Make a few changes to webpack.config.js

Refer the image:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u22qrx2s0zlifyrgk5js.png)
 
For now, I have renamed my global css file as global.scss and made some changes in the code.

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

Also, change the import statement in main.js file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4r8lj07blqk9mygbt4x0.png)
 
**Dessert**

You can now see the changes in your localhost with the scss we wrote in global.scss.

If you want to see Sass with rollup, you can find it [here](https://github.com/dceddia/svelte-sass-template)

Do have a look at this repo https://github.com/markoboy/svelte-webpack-babel-scss#get-started (An extension of the webpack template)

HAPPY LEARNING :smile:
Verificando o status da instalação SQL
Published: 2022-02-25 18:28:37

Uma instância de um banco de dados é similar à instalação de um software (mais especificamente um serviço) que roda em segundo plano no seu computador. Existem serviços que rodam tanto localmente em sua máquina quanto em servidores remotos ao redor do mundo.

-------------

Abra o terminal e digite o seguinte comando (deve ser exibido o status de active no Linux / started no macOS)

```js
# Linux
sudo systemctl status mysql
# macOS
brew services list
```

![active sql linux](https://s3.us-east-2.amazonaws.com/assets.app.betrybe.com/back-end/sql/images/mysqlinstallation11-a446ef9267a34cc18e33107e50326b15.gif)

![active sql mac](https://s3.us-east-2.amazonaws.com/assets.app.betrybe.com/back-end/sql/images/mysqlinstallation13-00af0f9ac51678745159e469f16516d1.gif)

Caso o serviço esteja parado, você pode usar o comando a seguir para iniciá-lo:

```js
# Linux
systemctl start mysql
# macOS
brew services run mysql
```

Para parar o serviço do MySQL , você pode usar o comando stop

```js
# Linux
systemctl stop mysql
# macOS
brew services stop mysql
```

Para sair, aperte ctrl+c.

------------------------------------------------

## Configurando a inicialização e senha do servidor MYSQL

Por padrão, após a instalação, seu servidor vai estar configurado para iniciar junto ao sistema. Caso não queira que isso aconteça, para poupar memória RAM, você pode desativar o início automático utilizando o comando:

```js
# Linux
sudo systemctl disable mysql

# macOS
brew services stop mysql
# Esse comando remove os serviços não utilizados
brew services cleanup
```

A primeira vez que for utilizar após iniciar o computador, será necessário iniciar o servidor com o comando:

```js
# Linux
sudo systemctl start mysql

# macOS
brew services run mysql
```

Se desejar ativar novamente que ele inicie junto ao computador, basta usar o comando:

```js
# Linux
sudo systemctl enable mysql

# macOS
brew services start mysql
```

---------------------------

você poderá agora acessar seu servidor pela linha de comando. Para visualizar quais bancos de dados estão disponíveis, você deve usar o comando:

`mysql -u root -p`