teleren/devto huggingface dataset:
Resource Allocation and Task Breakdown in Angular Gantt Chart
Tags: webdev, angular
Published: 2022-07-13 04:21:34

Learn how easily you can allocate one or more resources to tasks in the [Angular Gantt Chart](https://www.syncfusion.com/angular-ui-components/angular-gantt-chart) component of Syncfusion based on the task requirement. In this video, there is a set of predefined resources added in the application, and those IDs are assigned to the tasks. This video also explains how to view the list of tasks assigned to each resource hierarchically and enable multiple taskbars.

_Product overview_: https://www.syncfusion.com/angular-ui-components/angular-gantt-chart

_Download the example from GitHub_: https://github.com/SyncfusionExamples/resource-allocation-in-angular-gantt-chart

{% youtube mR38dAOJ6A4 %}
Need help with The Odin's Project, Rock Paper Scissors assignment ️
Tags: javascript, help, codenewbie, programming
Published: 2022-07-13 04:10:45

**

## update: figured out THAT particular problem. Now I need to console.log the scores and increment it when either player wins. _I made sure to update my code on Github_
**

I have been beating my brains out for the past few days trying to figure out why the functions being called are _undefined_.

[Live Site](https://taepal467.github.io/rock_paper_scissors/)
[code](https://github.com/taepal467/rock_paper_scissors)

## Here is how the console.log looks at the start of the game:

![Starting the game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1x2k258t4vvm4xwtks32.png)

## Expected Outcome:
When the playRound() is called, the if/else statements should be console.logging the correct statements. Like so:

```
const playRound = (playerSelection, computerSelection) => {
  
  playerSelection = playerWeapon();
  computerSelection = selectedWeapons();

  console.log("playerWeapon: ", playerSelection);
  console.log("computerWeapon: ", computerSelection);

  if (computerSelection === "📜" && playerSelection === "🪨") {
    console.log("Computer Wins!");
  } else if (playerSelection === "📜" && computerSelection === "🪨") {
    console.log("You Win!");
  }

  if (computerSelection === "✂" && playerSelection === "📜") {
    console.log("Computer Wins!");
  } else if (playerSelection === "✂" && computerSelection === "📜") {
    console.log("You Win!");
  }

  if (computerSelection === "🪨" && playerSelection === "✂") {
    console.log("Computer Wins!");
  } else if (playerSelection === "🪨" && computerSelection === "✂") {
    console.log("You Win!");
  }

  if (computerSelection === playerSelection) {
      console.log("Tie!");
  }
 
}
```
Once I am able to get the code working properly, I will then use DOM manipulation, to have the game results displayed on the webpage instead of the console.

## Current Outcome:
In the playRound(), I am calling both the selectedWeapons() and playerWeapon(). But both of the functions, are undefined and I am unable to get the values in the playRound() to use for the if/else statements. BUT, the only console.log message that's given is "Tie".Why is that? 🤔

I tried creating other functions, calling functions in other functions.I've also been playing around with the for..loops and event listeners. 

## Here is the console.log after playing a few rounds:

![After playing a few rounds](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1c8aawf52fk2pkpl14mw.png)

Any help is greatly appreciated.
Navigating the Terminal for the First Time (on a Mac)
Tags: beginners
Published: 2022-07-13 04:02:20

Many years ago, I watched a friend of mine access a file in my computer using solely the terminal and it blew my mind. She moved so quickly and was unfazed by what seemed like gibberish to me. I remember thinking there was no way I could ever do that. And yet I am here now, by no means an expert, feeling confident that I can get from point A to point B using only terminal commands. 

### Opening the Terminal
Starting from the very beginning, it's important that you, the user, are feeling confident as soon as that terminal window pops up.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pbmfrgudgdm7efsqmmh.png)

### Print Working Directory
Now is the time to introduce our first command (don't type the "~"):
`~ pwd`

"pwd" stands for "print working directory," which is not very helpful if you've never done this before. What "pwd" does is it shows you a path from the very beginning to where you are now. It might not show much the first time you run it:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/paydb9pjppksjv790e7h.png)
That just means I am at the beginning and there is no other folder (or directory) left.

### List Directories
Let's take a look at our next command (again, don't type the "~"):
`~ ls`

That's a lowercase L as in Larry, by the way. "ls" means "list", as in list all the folders (directories) ahead of us. It's a list of ~_possibilities_~.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2k7ap1i7fq40796las3.png)

"pwd" and "ls" are both very helpful to see where we are, where we've been, and where we can go in the terminal. 

### Change Directory
Buuuuuut those two don't actually do anything or take us anywhere. That's where this next command comes in (don't type the "~" or the brackets):
`~ cd [directory-name]`

"cd" (to me) means "go to." It actually stands for "change directory" but you already know how I feel about that word by now. So if we look at the image above one more time, we can navigate to "Users" by typing the following command:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ngeq74tqjq4g89iti9x.png)
The change here is subtle, but you can see the "/Users" is now before the "%" meaning we are inside of the directory (ugh) called Users.

There are **many** other commands in the terminal, but these three are the ones I use the most and I think are the most essential. 

Tl;dr
`pwd` to see where you are and where you've been
`ls` to see where you can go
`cd` to go!
What Dah Function?
Tags: javascript, beginners, programming, tutorial
Published: 2022-07-13 03:45:59

What dah Function?
By: Amira de Moya

There came a moment in life where I decided I needed a change.  I found myself exploring different career paths on the web when I came across a blog on digital nomads. The picture of the girl on the beach, a new country, the hot sun, a coconut in one hand, computer on her lap, working on something that made a difference in the world (I imagined), just drew me in. 

Months later it was Day 1 of Flatiron School Software Engineer Intensive.   After making it through a month and a half of Prep Work, I was finally here and boy, did reality set in fast with  JavaScript.  I was doing fifteen-hour days and was really feeling like an imposter. For the life of me I could not grasp functions.   I know this might sound very basic but as a Singer/Songwriter who dropped her computer science class in college after just one class, transitioning into tech would not be easy. I knew this!  I was not deceived by the clever marketing that targeted my social media. However, with perseverance, a lot of practice, and Google, the synapse in my brain fired and functions, it finally clicked.  So, if you are where I was, wondering if this is for you, head heavy with Imposter Syndrome, asking yourself “What Dah Function?”
 
Function 

A function, a basic yet integral fabric of JavaScript is an action word. Instead of performing similar tasks individually, writing repetitive code, a function allows us to group similar tasks together.  Then, when we call the function everything inside the swirly brackets {} gets executed giving us a result.  


Function Declaration

A basic function is created with an expression that begins with the keyword function. It can be an anonymous or a named function as noted below.

function greet(){
    console.log('Hello JavaScript Beginner');
}

greet();

// Hello JavaScript Beginner



or it can have a parameter or multiple parameters.  A function has a body that contains a block of code to be executed once the function is called.  



function greet(name){
    console.log('Hello ‘  +  name);
}

greet(‘Tavian’);

//Hello Tavian.                                  



function greet (name, lastName) {
    console.log('Hello ' + name + ' ' + lastName);
}

greet('Tavian', 'Braddick');

//Hello Tavian Braddick


Source:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
Eloquent JavaScript Marjin Harvebeke
How To Use Sweetalert2 In Laravel
Tags: laravel, sweetalert, php, jquery
Published: 2022-07-13 03:41:24

In this article, we will see how to use sweetalert2 In laravel. You can use sweetalert2 in laravel 8 as well as PHP. sweetalert2 is used to create different types of custom alert messages or you can create custom popups like success messages, error messages, warning modals, confirm modals, custom notifications, etc.

So, let's see  how to use sweet alert in laravel 8, custom alert messages, sweetalert 2 laravel CDN, flash message laravel sweetalert2, laravel sweet alert success, sweet alert delete confirmation laravel 8, sweet alert laravel ajax, how to use sweet alert in HTML.

Normally, javascript provides a simple alert box in your browser but if you want to display a custom popup then sweetalert2 is a very effective library that allows us to create all kinds of alert messages that can be customized to match the look and feel of our own website.

---

**_[Read More: How To Use Sweetalert2 In Laravel](https://techsolutionstuff.com/post/how-to-use-sweetalert2-in-laravel)_**
Basic Array Methods
Tags: webdev, flatiron, javascript
Published: 2022-07-13 03:11:34

I have always had interest in data structures ever since I started going to school for Computer Science, but one thing that I could never remember were array methods. Hopefully, you're like me and want to refer back to simple documentation explaining how array methods work!

## 1. shift()

The shift method allows us, as the user to remove the first element from an array, returns the first element and modifies the original array.

```
let videoGames = ['Minecraft', 'Among Us', 'Valorant', 'GTA']
videoGames.shift() // returns Minecraft
console.log(videoGames) // ['Among Us', 'Valorant', 'GTA']
```

## 2. pop()
The pop method acts in the same way as shift, the only difference being is that it removes the last element of any array.

```
let sports = ['basketball', 'baseball', 'football', 'soccer']
sports.pop() //returns soccer
console.log(sports) // ['basketball', 'baseball', 'football']
```

## 3. splice()
The splice method has the ability to add or remove elements from an array. The first argument is the index location where the elements are to be removed or added. The second argument is the number of elements that you want to remove from the array.

```
let avengers = ['Hawkeye', 'Thor', 'Spider-Man', 'Hulk', 'Iron Man', 'Captain America']
avengers.splice(1,3) // returns ['Thor', 'Spider-Man', 'Hulk']
console.log(avengers) // ['Hawkeye', 'Iron Man', 'Captain America']
```
Now if we wanted to remove an index, and add a different value you it would look like this.

```
let avengers = ['Hawkeye', 'Thor', 'Spider-Man', 'Hulk', 'Iron Man', 'Captain America']
avengers.splice(1,1, 'Ant-Man') // returns Thor and replaces Thor with Ant-Man
console.log(avengers) // ['Hawkeye', 'Ant-Man', 'Spider-Man', 'Hulk', 'Iron Man', 'Captain America']
```

## 4.) slice()
This slice method is used to remove elements from an array without modifying the original array. Also with this method, with what elements you do remove a brand new array is created with those elements. When specifying the range of elements that you want to remove just like our other methods you first want to define was element you want to start with, and the second argument is what you want to end with (the ending index is not included in the new array).

```
let codeLanguages = ['Python', 'JavaScript', 'Java', 'TypeScript', C++]
codLanguages.slice(1,3) // returns ['JavaScript', 'Java'] and creates a new array
console.log(codeLanguages) // ['Python', 'JavaScript', 'Java', 'TypeScript', C++]

```
OpenPGP Proof
Published: 2022-07-13 03:02:54

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/C5AAADA309A67B3AC21C574FC07DE063E9C0D1F5) to [this dev.to account](https://dev.to/orbitaldev). For details check out https://docs.keyoxide.org/advanced/openpgp-proofs/

[Verifying my OpenPGP key: openpgp4fpr:C5AAADA309A67B3AC21C574FC07DE063E9C0D1F5]
nginx basic auth
Tags: nginx, server
Published: 2022-07-13 02:59:38

---
title: nginx basic auth
published: true
description: 
tags: nginx, server
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

[Restricting Access with HTTP Basic Authentication | NGINX Plus](https://docs.nginx.com/nginx/admin-guide/security-controls/configuring-http-basic-authentication/)

```
server {
    ...
    auth_basic           "Administrator’s Area";
    auth_basic_user_file conf/htpasswd;

    location /public/ {
        auth_basic off;
    }
}
```
macOS: xcrun: error
Tags: macos, xcode
Published: 2022-07-13 02:58:59

---
title: macOS: xcrun: error
published: true
description: 
tags: macos, xcode
---

After upgrade macOS to 12.4 (Monterey), execute `make` command will get this error message: 

```
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
```

fixed: udate Xcode toolkit

```
$ xcode-select --install
```
wait about 20 minutes, my `make` command works.
[Desafio] - CRUD com Segurança Extra
Published: 2022-07-13 02:28:52

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1547044260142149634)

---

Ei dev front e back-ender,

Pega esse desafio! Quero ver você resolver essa treta de segurança num CRUD.

Se quiser, pode fazer em dupla ou individual. E tá valendo nota :)

Segue o fio.

cc @sseraphini

↓

![img](https://pbs.twimg.com/media/FXg0jTcUcAA_ihi?format=png&name=small)
![img](https://pbs.twimg.com/media/FXg0jj7VsAAQ3bd?format=png&name=360x360)

---

O desafio é fazer um CRUD de qualquer coisa numa área logada. Toda operação que modifica o estado do banco (criar, apagar, editar) precisa de um token de expiração rápida (tipo ~5 segundos, por exemplo). E toda operação de leitura (listar, detalhar), um token de leitura.

---

Segue as specs dos endpoints:

Segurança:
- POST para obter token de leitura.
- POST para obter token de escrita com expiração rápida.

---

CRUD:

Endpoints que aceitam token de leitura:
- GET para obter a coleção das coisas do CRUD.
- GET para obter um item da coleção (tipo "por id").

Endpoints que aceitam token de escrita:
- POST pra criar um item.
- PUT para editar um item.
- DELETE para excluir um item.

---

Um detalhe sobre os endpoints de escrita: se você fizer uma chamada com o token de leitura ou sem token, estes devem retornar um HTTP 401 com um challenge ─ ou seja, um header WWW-Authenticate com informações sobre como conseguir permissão de acesso.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/WWW-Authenticate

---

Agora uns detalhes mais específicos pros frontenders:

- Reuse o token de leitura do login. Não fique pedindo as credenciais pro usuário o tempo todo durante uma sessão.

- Tente não deixar pro front saber quais são os endpoints de escrita. Tente se valer dos responses HTTP 401.

---

Se você quiser focar apenas no front, use APIs mocadas ─ desencana do backend.

Se quiser focar apenas no backend, desenvolva e teste no postman, curl, insomnia, etc.

---

Se você quiser uma camada extra de desafio, pense numa forma de usar um método diferente de autenticação pros tokens de escrita, tipo um OTP, reconhecimento facial, etc.

Faça do jeito que você quiser, mude o que quiser. O importante é aprender se divertindo.

---

Se fizer e versionar no github ganha ponto extra e se hospedar pra gente testar, passa direto de ano!

Se achou o desafio legal, dá um RT do amor, like, comenta.

---

Preciso nem dizer, né? Se leu até aqui, dá um abraço!

Obrigado demais pela moral, eu faço essas coisas pra você me apoia. ❤️
Doubt on flow of useState hook
Tags: react, webdev, beginners
Published: 2022-07-13 02:23:37

Hey community,

I am learning react and I have been struck in understanding the flow of useState and useEffect hooks(how do they re-render the component) and what exactly does re rendering a component mean(Will the whole function be run again or how does it happen).I am attaching a demo code below it would be great if you explain how the hooks work in this case.

const [myNumber, setMyNumber] = useState(0);
  let inc2=1;
  function increment() {
    setMyNumber(myNumber + 1);
    inc2++;
    console.log(inc2);
  }

  return (
    <div>
      <p>{inc2}</p>
      <p>{myNumber}</p>
      <button onClick={increment}>Increment!</button>
      <p>{inc2}</p>
    </div>
  );
}

Here once I click the button setMyNumber triggers a re-render right?So 
1) Will it trigger re render in the middle of the function execution?
2)If it re renders at the end shouldn't the inc2 value be updated on the screen because when I print it on console it is updated.
Console.log() is Your BestFriend!
Tags: beginners, javascript, testing, community
Published: 2022-07-13 02:09:45

## For Beginners 
If you're just starting out in the world of programming, then you may have already been introduced with a `console.log("Hello World!)`. If not, consider this your first one! At the moment, we may all think this `console.log` is meaningless. But the fact of the matter is, it is a very helpful tool. 

## What is Console.log()
By definition, provided by GeeksforGeeks, The console.log() is a function in JavaScript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user.

**Syntax:** `console.log(A);`
**Parameters:** It accepts a parameter which can be a string, an array, an object or any message.
**Return Value:** It returns the value of the parameter given, to the web console.

Let's go ahead and put this information to use.

## Let's Log!
 
Example: 

```
let firstName = "Curious"
let lastName = "George"

console.log(firstName)
console.log(lastName)

console.log(firstName + lastName)
```
Now, here in this very simple block of code you can see that we have set firstName to Curious and lastName to George. So, if we run our console.logs we will receive three logs. "Curious", "George", and " Curious George". As developers we should **always** console log after every line of code no matter how simple it may look. Why, you may ask? This insures  us that the code is either working or what every developer dreads an error code. 

If your code seems to be working fine then proceed with your programming and jump to the next line of code. If your code is receiving an error then run for the hills! Just joking.. we reassess our code! Fix that line of code before we continue.

This will help you tremendously in the long run. You will be able to catch any type of code error right then and there. Instead of creating a bunch of code and then running it, to find a whole bunch of errors that'll give you that migraine we all hate. 

So please, use the console.log() you'll thank me later.
Distributed File Storage and Peer-To-Peer Networks
Published: 2022-07-13 02:07:51


The internet is a hyper-connected web of clients and servers. Clients make requests to servers and servers return files, software, data, and applications. However things have evolved quite a bit from the static client/server model. For instance, cloud computing infrastructure accounts for much of the internet’s requests and responses these days. Cloud services like Amazon Web Services (AWS) host massive warehouses filled with servers that can be rented out by users or companies. Companies like Netflix purchase server functionality from AWS, allowing Netflix to only worry about their video content and website design. All of the infrastructure, storage, and hardware concerns are left in the hands of AWS. 

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

Cloud computing has proved itself very useful in the last decade. Netflix is only one of thousands of companies that have built successful businesses using cloud computing. But unfortunately cloud storage can be somewhat centralized. A bad scenario would look like an entire server center getting destroyed, and by extension databases and files can be lost forever. Another bad scenario could be that Amazon, Google, and Facebook know everything about you and they own that information and can do whatever they want with it. Other models have also emerged and evolved over the last two decades, namely the Torrent file sharing protocol. 

The Torrent protocol, in simple terms, allows for clients to act as servers. Files stored on local machines can be requested from other local machines. The benefit of this is in the design of the torrent protocol which attempts to speed up the file download time for a user by downloading the file from multiple client machines. This is useful for very large file types and, in theory, distributes information amongst users which can defend against government censorship or corporate ownership of user data. However there aren’t many incentives currently for a person to database information for others without compensation.

Looking into the future, torrenting may rise to more prominence as local storage becomes cheaper and blockchain technology becomes more trusted. There may be a future in which cryptocurrency is rewarded to anyone willing to rent out their free gigabytes of storage to hold encrypted data that can be accessed by anyone in the world. There are many hurdles to this, more than the centralized cloud computing models we have now, but I think it’s a pretty cool thought that your computer storing other peoples data might be able to buy you a free meal once a week.
New programming language
Published: 2022-07-13 01:48:45

Today I'm glad to announce that I'll start a new journey! I love challenges and that's why I'm starting this. Seems very interesting and I'll be sharing my trajectory here with you all!

This seems to be a very powerful programming language.

Join me!

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