teleren/devto huggingface dataset:
Project 2 Blog Post
Published: 2021-03-05 19:36:46

     This project was a fun one. My inspiration for this app was one of my passions; traveling. I wanted to build an app that would keep track of all the destinations I have visited, along with some cool functionality. To turn this idea into a working app, I needed to utilize Sinatra MVC.

     The first step to make this app become a reality was to be able to create a user. A user needs to have email and password credentials, with validations for each. Along with that a user needs to have a session[:user_id] set to keep track of each user and the destinations they create. After this, Models need to be set up so that a User has_many destinations and a Destination belongs_to a User. This is where the validations for a user are created. A few Controllers are needed to handle the routes for how the app runs and CRUD actions. An application_controller, a destinations_controller, a sessions_controller, and a users_controller. The CRUD actions are created in the destinations_controller. A user needs to be able to Create a new destination that will be added to their list, Read all of the destinations on their list, Update a destination from their list, and Delete a destination from their list. To help make all of that possible, Views is needed. Files in the Views directory contain forms that are executed each time the user makes a selection on their browser. This is also where we can do some CSS styling. 

     CSS styling is something I get lost in for hours. There are so man possibilities for what you can do. You can fully customize your web app to your liking - from the text font/color to a navigation bar. "https://www.w3schools.com/css/default.asp" helped me out a lot with my CSS styling. There is so much useful information, and good examples of how to put CSS styling into your code.
#Day 44-45: LeetCode LL, Codechef Long Challenge etc
Tags: 100daysofcode
Published: 2021-03-05 19:34:37

Yesterday, I had solved 8 easy SLL questions from LeetCode. I had planned to solve a few medium question today but I was too engrossed in solving the CodeChef Long Challenge Questions.
I have solved only 2 questions completely well today (was able to solve them instantly within the first hour itself) but I am stuck in the second subtask of 'Interesting XOR' question. Total score now is just 230.
Also, I as a participant of SpringfCode, have submited my solution on the problem that was given to us today related to String.
Problem on starting React-Android App
Tags: react
Published: 2021-03-05 19:08:28

Hi
I have started today a build of an App following the React Native CLI Quickstart (very clear and exaustive).
I created a new React Native project and I tried to install it on my Android mobile 
After setting the corrects path for Android SDK and having downloaded Gradle. I have had yet a problem:

```
C:\www\React\formgen>npx react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 967 file(s) to forward-jetify. Using 4 workers...
info JS server already running.
info Installing the app...

FAILURE: Build failed with an exception.

* What went wrong:
Could not initialize class org.codehaus.groovy.runtime.InvokerHelper

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
```
In particular:
**Could not initialize class org.codehaus.groovy.runtime.InvokerHelper**

Thanks
How to debug web projects using the browser developer tools inside Visual Studio code
Tags: vscode, webdev, debugging
Published: 2021-03-17 18:38:11

---
title: How to debug web projects using the browser developer tools inside Visual Studio code
published: true
date: 2021-03-05 19:08:15 UTC
tags: vscode,webdevelopment,debugging
canonical_url: https://christianheilmann.com/2021/03/05/video-how-to-debug-web-projects-using-the-browser-developer-tools-inside-visual-studio-code/
---

With the 1.1.4 release of the [Microsoft Edge Devtools for Visual Studio Code extension](https://aka.ms/devtools-for-code) we have added the final bit that people kept asking for: Console messages now show up in the output console of Visual Studio Code. 

![The extension in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yszkrjo5e7hbya3f9de.png)

To celebrate and as it has been long coming, I recorded a quick, roughly four minute video walkthrough showing how:

* You can start a server inside Visual Studio Code in the correct folder without using an external terminal
* You start using the extension by creating a new instance of Edge running inside the editor
* How to debug network issues in the editor
* How to tweak the DOM and CSS in the editor
* How the extension allows you to activate the link to a style sheet in the CSS editor to jump to the correct line in the file inside the VS Code editor

{% youtube yNJNLqHj92c %}

The extension is available from the market place and inside of Visual Studio Code. It is open source and you can [file issues on GitHub](https://github.com/microsoft/vscode-edge-devtools) and see what's coming next.
I'm Aida Pourshirazi, and I support women devs in 2021!
Tags: wecoded
Published: 2021-03-05 18:53:41

Since I was a kid, I liked to be around technology. I remembered my parents got me the first Dell computer, which in that era, having a personal computer in a household was a massive achievement for kids all over the world. As a result, I got the chance to learn my first programming language C++.

 I  came from an artistic family and grew up around the entertainment industry, including cinema, theater, and television. Therefore, I always had the chance to play with the latest cameras, from analog to digital. Being in that environment inspired me even more, to follow the engineering path for my future career because it was something different from what my parents were doing but somewhat similar in other ways.

 Therefore, I got accepted into the engineering school for electrical engineering with my parents' support and encouragement. 
I was always fascinated with all the new cellphones out there. Then, right before I graduated, I decided to take an internship in one of the biggest telecommunication companies to understand how the telecom world works. Therefore, I got my first job on the cellular network platform, and I knew that I found my life path.  
However, later on, one of the most significant challenges I faced was shifting from a telecommunications background to the software engineering field. So I had to do extensive hours studying and learning the new skills while working full time. 

My message to others is that life is shorter than we think, so we should do what we like and enjoy the path to achieve our goals.
Git - Squash
Tags: githunt, github, squashing, commit
Published: 2021-03-05 18:43:52

Using _**git/github**_  for your personal projects is pretty easy but when you're a part of an organisation or a large scale project with thousands of users you might get a tough time. One wrong move can cause mess or make the commit tree dirty or anything you don't want which in turn may fuel your Impostor Syndrome! 
So hey, HANG ON! You can do it.

###A Clean Commit Tree
*_Squashing your commits_* can help so here we go

1. Switch to the branch where the commit tree is
`git checkout <branch name>`

2. Make sure everything on your local is pushed to the branch
 `git add .`
 `git commit -m "Commit message"`
 `git push origin <branch name>`

3. Squash n previous commits 
_(n is the no.of commits you want to squash)_
`git rebase -i HEAD~3`

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

Now, change _**pick**_ to _**s**_ or _**squash**_ in the last 2 commits 
Press
a) `Ctrl + O` to write out 
b) `Enter` to save changes
c) `Ctrl + X` to exit

Now you can edit the final commit message .
Repeat a,b,c 

Don't forget to `PUSH` your changes on to the branch
`git push origin <branch name>`

If this doesn't work force push your changes
`git push origin <branch name> -f`

You're Done! Now you have a clean commit tree.
discord.py Project 1 - Invite Moderator 🔗
Tags: python, py, discord, discordpy
Published: 2021-03-05 18:06:52

### *For restricted servers, an invite moderation bot is a perfect choice.*

> *You should read the first 2 posts in the series before reading this one!*

# The setup 🚧
We want to start by creating our bot. We will use a commands.Bot, as users will be able to create an invite.

```py
import discord
from discord.ext import commands

bot = commands.Bot(command_prefix="!", case_insensitive=True) # Note: Feel free to change the prefix to something else!

bot.run('token')
```

Now, let's add the `on_ready` event so that we know when the bot is ready for commands!

```py
@bot.event
async def on_ready():
    print("Ready for action! 💥")
```

# Adding our invite command ❗
We now need to add our invite command, so that the users will be able to create invites using the bot. We will need to manually dispatch an event so that it doesn't get confused with invite_create.

```py
@bot.command(name='invite', description='Create an invite link')
async def invite(ctx, reason):
    invite = await ctx.guild.create_invite(reason=reason)
    await ctx.author.send(str(invite)) # Send the invite to the user
    invite.inviter = ctx.author
    bot.dispatch('invite_command', invite)
```

# Add logging 📜
We can add logging like we did in the last post. This time, we need to plug in our 

```py
@bot.event
async def on_invite_command(invite):
    channel = bot.get_channel(channel_id) # Remember how to get channel IDs?
    embed = discord.Embed(title="New Invite",description=f"Created by {invite.inviter}\nCode: {str(invite)}")
    await channel.send(embed=embed)
```

Recap! You just:
- Used the `on_ready` event for the first time
- Edited an attribute
- Used a custom event
- Created another embed
- Used `get_channel`

Final Code:
{% gist https://gist.github.com/isigebengu-mikey/1d333f8647c6b489ce06e92f7f9a45a8 %}
React Native: Command PhaseScriptExecution failed
Tags: reactnative, ios
Published: 2021-03-05 17:47:36

If your React Native builds fail in Xcode with the following message:

`Command PhaseScriptExecution failed with a nonzero exit code`

one possible reason could be that Xcode is using an outdated version of Node (in my case, it was because I use nvm to manage my Node versions, but Xcode used an old version of Node that I had installed via HomeBrew a long time ago).

By default, Xcode will use the Node binary located at `/usr/local/bin/node`. Check its version by running:

```sh
/usr/local/bin/node -v
node -v
```
If the first command outputs an older version of Node, simply delete it and replace it with a symlink to the newer one:

```sh
rm -rf /usr/local/bin/node
ln -s $(which node) /usr/local/bin/node
```

Hope that helps!
Stripe for online payments
Tags: javascript, startup, security, stripe
Published: 2021-03-05 17:46:15

Stripe, a toolkit that can monetize virtually any online business model, its APIs can be used to accept payments, manage customers, handle subscriptions and more.

 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ekle1ipy8ug90psjzs0.PNG)

It's extremely popular for startups because of its developer approach, instead of worrying about things like compliance, security, and fraud detection you can focus on the user experience and implement your payment system with just a few API calls.

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

So, how does the the credit card payment work ?

1- Create a payment intent 
When a user is ready to make a payment in  your app, you'll first need to create a payment intent on your server.
The payment intent is kind of like a session that manages the payment process, currently it's in a state of requires a payment method.
   
```javascript
{"id"    : "bek2$..",
 "amount":  500,
 "status": "requires_payment",
 "client_secret":"..."
}
```

2- Collect Card Details

Next, we need to obtain the credit card details from the customer, 
you can handle this process securely using stripe.js.
Stripe.js is able to mount a customizable credit card form directly in your application; it will provide an automatic validation for the users 'input.

3- Send it to Stripe  
When the form is submitted by the user, you will write a function that takes the payment intent from your server, combines it with credit card details entered by the user in the browser, then calls stripe confirmed card payment to send this data to stripe servers, it will attempt to finalize the payment.

But now, many parts of the world have regulations that require additional authorization for the payment.
The payment intent now has a status of "requires action", and Stripe will handle this process for you in the frontend and once done, the payment intent will move to a status of succeeded.         

```javascript
{"id"    : "bek2$..",
 "amount":  500,
 "status": "requires_action",
 "client_secret":"..."
}
```

Thank you fireship
Kubernetes CKAD Tips 1 - Using Katacoda - A free Kubernetes Playground
Tags: kubernetes, ckad, devops
Published: 2021-03-05 17:41:53

Katacoda is a nice place to start with Kubernetes. It is a browser based playground and does not require any local installation. One can start immediately without spending much time on setting up the Kubernetes locally or in a VM.

This video talks about how we can use Katacoda.

{% youtube k_zsnPj1VrM %}

## Resources 

Subscribe to the Channel [TechTalks-Wriju](https://www.youtube.com/channel/UCUzFKvlZOm3ukAiF59B_HgQ)

The [Kubernetes and CKAD Playlist](https://www.youtube.com/playlist?list=PLPIVZsyfpXt-wyNY65-aC9Vm_PEsM3pR8)
My Sinatra Project
Published: 2021-03-05 17:20:55

I wrote my first Sinatra web app. My app starts off by allowing the user to create an account through email, and password. My app was created with my passion in mind, video games.  The user will use my app in order to create a collection of their video games along with the date that they purchased the video game.

The associations that I included are a User model which is related to a Videogame model. The User model holds a has_many relationship with the Videogame model allowing for more than one video game to be associated with a user. The video game in question was only able to be to paired with a single owner as it holds a belongs_to relationship with the user. A foreign key was used to connect the user to the video game.

I was then able to produce information about any video game that was created by a single user and through the use of the authenticate method to ensure only the user who created this record was able to edit or delete this information. The information only contained the video games title, and date purchased.  I allowed users to be able to view other users video game collection since it does not include private personal information in my.
Switch...Case
Published: 2021-03-05 16:56:18

# Veja no Youtube:
[![VIDEO](http://img.youtube.com/vi/3-CBh61JStI/0.jpg)](https://youtu.be/3-CBh61JStI)


# Objetivo

1. Aprender a usar um switch...case
2. Entender o que faz cada parte do código

# Bora lá...

Uma outra forma de trabalhar com condicionais é usando switch...case e aqui vamos ver o esqueleto dele e suas características básicas:

```jsx
const local = "cinema";
switch (local) {
	case "cinema":
		console.log('Entrou no cinema!');
		break;
	case "quarto":
	case "sala":
		console.log('Entrou em casa!'); 
		break;
	default:
		console.log('qualquer valor diferente dos cases acima');
		break;
}

// Output: Entrou no cinema!
```

Temos o:

- `switch` responsável por ouvir a variável que vamos trabalhar
- `case` **sempre irá verificar a igualdade** do valor passado no `switch` com o que está no `case`
- `break`sempre será usado para parar a execução do `case`, caso não exista um `break`seu `switch` vai mandar para o próximo `case` e executará os dois causando um erro
- `default` qualquer valor diferente dos cases acima

Onde temos nosso console log podemos passar uma função ou qualquer outro validador que você precise

> *Note que temos dois cases juntos e isso significa que se cair em qualquer um deles a resposta será a mesma.*

## Conclusão

Temos uma alternativa ao if...else para trabalhar com condicionais de maneira simples também.
Configuring screenshots in Mac
Tags: productivity, macbook, screenshot
Published: 2021-03-05 16:55:16

Hola Everyone,

I have been a Mac user for the past 5 years, wanted to share tricks in customising the screenshots in Mac.

---

**NOTE**

All these changes requires restart, If you want the change to reflect immediately, you can run this command 


```shell
$ killall SystemUIServer
```

---


####1. Disable Screenshot Drop Shadows


```shell
$ defaults write com.apple.screencapture disable-shadow -bool TRUE
```


*To reset the changes*


```shell
$ defaults write com.apple.screencapture disable-shadow -bool FALSE
```


#####2. Change Screenshot File Format


```shell
$ defaults write com.apple.screencapture type PDF
```


*To reset the changes*


```shell
$ defaults write com.apple.screencapture type png
```


#####3. Change the default folder


```shell
$ defaults write com.apple.screencapture location <DIR>
```


*To reset the changes*


```shell
$ defaults write com.apple.screencapture location ~/Desktop
```

#####4. Change the screenshot file name

```shell
$ defaults write com.apple.screencapture name <FILENAME>
```

Do add any comments if I am missing something
{[...Keep Learning, JS..]}
Published: 2021-03-05 16:55:07

"Este repositório foi criado com a intenção de ajudar os desenvolvedores a dominar seus conceitos em JavaScript. Não é um requisito, mas um guia para estudos futuros. É baseado em um artigo escrito por Stephen Curtis e você pode lê-lo aqui."

"This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a requirement, but a guide for future studies. It is based on an article written by Stephen Curtis and you can read it here.

🚀 Considered by GitHub as one of the top open source projects of 2018!"

-> https://github.com/tiagoboeing/33-js-concepts
637. Average of Levels in Binary Tree
(javascript solution)
Tags: algorithms, javascript
Published: 2021-03-05 16:51:09

###Description:

Given a non-empty binary tree, return the average value of the nodes on each level in the form of an array.

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
/// Breadth first search approach
// Traverse the tree and at each level add to a sum variable that counts the total at each level
// After counting the total at each level use the length of the queue to find the average at that level
var averageOfLevels = function(root) {
    const queue = [];
    const averagePerLevel = [];
    queue.push(root);
    while(queue.length) {
        let sum = 0;
        // Save the length value to calculate the average after getting the sum of all values in at that level
        let levelLength = queue.length;
        for(let i = 0; i < levelLength; i++) {
            let node = queue.shift();
            sum += node.val;
            if(node.left) queue.push(node.left)
            if(node.right) queue.push(node.right)
        }
        averagePerLevel.push(sum / levelLength)
    }
    return averagePerLevel;
};
```
Test Plan : Is It Mandatory to Create Test Plan?
Tags: tutorial, beginners, selenium, qa
Published: 2021-03-05 16:43:10

In this video, we are going to learn about the Test Plan, Do you really need a Test Plan Or Not ?

{% youtube 35ygtHMNnA8 %}

✅ Download Mind Map – https://sdet.live/3GKb

✅ What is Test Plan?
A Test Plan is a detailed document that describes the test strategy, objectives, schedule, estimation, deliverables, and resources required to perform testing for a software product.

Test Plan helps us determine the effort needed to validate the quality of the application under test

✅ Why it Mandatory to Create Test Plan?
1. Gives your clarity
2 Help you to have better estimates
3. You can present to stake what you are going to do and what you are not going to do
4. Clarity over QA Strategy
5. Mitigate the Risk
6. Help you to track the Testing

✅ Test Plan Template
https://sdet.live/testplan
https://sdet.live/3F52
Download
https://sdet.live/3F53

🔥🔥IMPORTANT LINKs 🔥🔥

✅ API Testing –
https://www.learnapitesting.com

✅ Cypress Tutorial with LIVE Projects –
http://cypresstutorial.com

🟢 30 Days of Automation Testing
https://go.scrolltest.com/automation

🟢 30 Days of API Testing
https://apitesting.co/30days

🟢 30 Days of Rest Assured
https://go.scrolltest.com/30days-restassured
More women in the teams! That's better. For men too.
Tags: wecoded
Published: 2021-03-05 16:21:37

I'm not talking about football, I don't know anything about that. I'm talking about teams that want to build products that customers love.

More than once I've seen top-class teams made up of alpha males fail miserably. Individually, they might have succeeded. But as a team? Tunnel vision coupled with strong opinions can quickly become a problem.

With us knowledge workers, mixed teams are simply better. Young, old, man, woman, diverse, different cultures, colourful: this enriches perspectives, experiences and talents. The team can draw on all this. And it is precisely this that strengthens creativity, imagination and ability as a source of ideas, approaches and solutions. 

Working in self-organised teams is always an imposition and demands a lot from the team members: openness, courage, respect, commitment and focus. We all know how exhausting the storming phase in the team is. But even in this phase, a diverse team can draw on its many strengths, complement each other and thus be superior. 

Honestly, I (as a man) have no desire to work in an all-male team anymore. For me, that has the mustiness of a losers' locker room. Quite selfishly, I would like to see: more women in the teams!

So men: #SheCodedAlly
Comentários
Published: 2021-03-05 16:12:01

# Veja no Youtube:
[![VIDEO](http://img.youtube.com/vi/kLY4eG2UCo4/0.jpg)](https://youtu.be/kLY4eG2UCo4)

# Objetivos

1. Aprender comentários de linha
2. Aprender comentários de bloco

# Bora lá

No JavaScript podemos comentar o nosso código de duas maneiras e elas são por bloco ou linha para que o JS ignore a execução delas.

### Comentário de bloco

Identificado pelo `/* conteudo */` cria um bloco de comentário de uma ou várias linhas. 

```jsx
/*
const nome = "Diego"

let ano = 2021

const admin = false

const cidade = "SP"
*/
```

### Comentário de linha

identificado por `//` duas barras podemos comentar linhas individuais.

```jsx
const nome = "Diego"

// let ano = 2021

const admin = false

// const cidade = "SP"
```

### Conclusão

De maneira simples podemos comentar um trecho ou linha de código para que o JavaScript ignore na hora da execução do script.