teleren/devto huggingface dataset:
It's Show time, Week 6 taskForce 4.0
Tags: awesomity, codeofafrica
Published: 2021-12-06 08:44:53

> Shoot for the stars, that way if you fall short, at least you land on the moon

The week started with us dealing with deploying the application we've been working on for the past 3 weeks and learned some new skills like continuous integration and continuous deployment where you set up your CI/CD and automate everything that happens after development, which is testing, deployment.
It was a great experience cause I learned it saves a lot of time and energy and plus it's a professional way of doing things.

we continued with a session of self-organization and learned yet a new skill again, we found in our team we work more efficiently when we organize ourselves which means we have to know the target and everyone's responsibility and the rest is magic!!

continuing this week the part of containerizing the application was tricky cause most programmers have this thought if it works don't touch it, but I think it doesn't work like that in DevOps you first have to understand why it works how it works, and how everything is connected then your work is done.

we struggled a bit cause we wanted it to run so bad before we even understand what happens at every step of the process. but in the end, we achieved it kudos to us.

## FURAHIDAY
It was the day we've been waiting for and it finally came we graduated it's was a fulfilling moment for me and for every taskforce member. It really was worth it.

```
console.log("Hoolay")
```
Faizan Habib Frontend Developer in Faisalabad
Tags: html, css, react, nextjs
Published: 2021-12-06 08:43:27

My name is [Faizan Habib](https://www.linkedin.com/in/faizanhabib/). Experienced SEO Expert & [Frontend Web Developer](https://www.linkedin.com/in/faizanhabib/) with a demonstrated history of working in the consumer services industry. Skilled in Next.js, React.js, jQuery, HTML5 and CSS3. If you consider me for any job you can contact me.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b395re2q4s4jjs1f0vh3.jpg)
Deploy CockroachDB in a managed DigitalOcean Kubernetes Cluster
Tags: kubernetes, database, cloudnative
Published: 2021-12-06 08:25:45

For the [DigitalOcean Kubernetes Challenge](https://www.digitalocean.com/community/pages/kubernetes-challenge), I wanted to deploy a database to a managed Kubernetes cluster, and decided to go with [CockroachDB Core](https://www.cockroachlabs.com/docs/stable/install-cockroachdb).

The process to deploy on Kubernetes was simple. I just followed the instructions in [CockroachDB official documentation](https://www.cockroachlabs.com/docs/v21.2/deploy-cockroachdb-with-kubernetes.html), with just one change - In ["Step 1. Start Kubernetes"](https://www.cockroachlabs.com/docs/v21.2/deploy-cockroachdb-with-kubernetes.html#step-1-start-kubernetes), instead of using hosted GKE or EKS (as mentioned in the docs), I used DigitalOcean's [Managed Kubernetes](https://www.digitalocean.com/products/kubernetes/) service. 

So my "Step 1. Start Kubernetes" was basically:

- [How to Create Kubernetes Clusters Using the Control Panel](https://docs.digitalocean.com/products/kubernetes/how-to/create-clusters/) from DigitalOcean. I created a 3 node cluster with s-4vcpu-8gb droplets. You should be able to do it with slightly smaller droplets too.

Rest of the steps were as mentioned in the doc:

- [Step 2. Start CockroachDB](https://www.cockroachlabs.com/docs/v21.2/deploy-cockroachdb-with-kubernetes.html#step-2-start-cockroachdb)
- [Step 3. Use the built-in SQL client](https://www.cockroachlabs.com/docs/v21.2/deploy-cockroachdb-with-kubernetes.html#step-3-use-the-built-in-sql-client)
- [Step 4. Access the DB Console](https://www.cockroachlabs.com/docs/v21.2/deploy-cockroachdb-with-kubernetes.html#step-4-access-the-db-console)
- [Step 5. Stop the cluster](https://www.cockroachlabs.com/docs/v21.2/deploy-cockroachdb-with-kubernetes.html#step-5-stop-the-cluster)
Who needs my help?
Tags: webdev, career, programming, discuss
Published: 2021-12-06 08:10:16

Hello, Nice to meet you. My name is Raphael (Full stack developer)
If you need anything (software development), I can help you.
After graduating with my Bachelor’s degree in Computer Science, I’ve spent the last 6+ years building professional experience as a Software Development.
Have an extremely software developing, engineering's versatile skill set and I understand the importance of being interactive and enjoy communicating with others for the benefit of the company.
I am looking for a Full-time remote job(Part-time, contract, freelancer also is okay).
My main expert skills are following:
- Front-end technologies: React.js, Redux, React Native, TypeScript, Vue.js, Vuex, Angularjs, HTML/HTML5/CSS, 
- Back-end: Python, Django, Flask,  Node.js, Express, MVC, MVT, .NET, C/C++, PHP, Golang
- ORM, MySQL, MongoDB, Google Firebase, GraphQL, AWS, GCP, Azure, Heroku
- Blockchain, Smart Contract, Cryptography, Web3.js
- variety web frameworks: Laravel, CodeIgniter
- AI and Machine Learning
- Strong version control (Github, Gitlab, Bitbucket)
- Good communication
I can be reached anytime by skype(live:.cid.b1a38583392e35b0 ), email ( futuresea.dev@gmail.com ).
I look forward to speaking with you soon.
Sincerely,
How to render a list with React
Tags: react, javascript, tutorial
Published: 2021-12-06 07:49:43

Hey **fellow creators**,

You don't know how to *render a list with React*? Jump in to learn how to do it!
 
If you prefer to watch the video **version**, it's right here :

{%youtube -4QXMFnFr6g%}

##1. Create a list!

Create a simple React app and add an h1 to your app:

```react
function App(){
	return (
		<div className="container">
			<h1>A React List</h1>
		</div>
	)
}

export default App;
```

To create a list, you need to use the state. Let's import it:

```react
import {useState} from 'React'
```

Then, you need to create some dummy data to feed our state. 

```react
const [data, setData] = useState([
	{
	txt: "Txt 1",
	id: 1,
	},
	{
	txt: "Txt 2",
	id: 2,
	},
	{
	txt: "Txt 3",
	id: 3,
	}
])
```

Creating an ID like that isn't the best way to do it, but we'll see a tool later on that you can use in order to do it better. For now, let's keep it like that!

##2. Render the list with the *map()* method!

Let's render the list with the *map()* method. For each item, you'll render an *li* that contains the text from the data:

```react
return (
	<div className="container">
		<h1>A React List</h1>
		{data.map(item => {
			return (
				<li>
				  {item.txt}
				</li>
				)
			})}
		</div>
	)
```

As you can see, it's working, however in the console there'll be an error saying that each child in a list should have a unique "key" prop. 
React needs that key to understand what has been created, especially if something is deleted or modified.

Therefore you can simply add the key prop to the *li* tag with the *id* from the data:

```react
<li key={item.id}>
```

If you refresh the page, you'll no longer see the error in the console!

##3. There's a better way to have a unique id for each of the items in your list!

As said before, the *id* from the data isn't very secure since they're not unique if it's used in a huge app. In order to fix that, you'll add an *uuid* package. In your terminal, install it:

```html
npm install uuid
```

Then, import it in your app:

```react
import {v4 as uuidv4} from 'uuid'
```

Finally, you can simply use that method in your data:

```react
const [data, setData] = useState([
	{
	txt: "Txt 1",
	id: uuidv4(),
	},
	{
	txt: "Txt 2",
	id: uuidv4(),
	},
	{
	txt: "Txt 3",
	id: uuidv4(),
	}
])
```

You can log it to see the unique and strong ids this method creates:

```react
console.log(data[0].id);
```

You now know how to render a list with React! **Well done!**

Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool


*See you soon!*

Enzo.
Understand your unauthenticated & public AWS API Gateway exposure
Tags: aws, apigateway, security, secops
Published: 2021-12-06 07:07:10

Have you ever had the need to quickly audit your unauthenticated & public exposure of your API Gateway resources to plan a implementation of AWS WAF (Web Application Firewall)?

I had and I needed it to understand what API Gateway endpoints I would like to focus on for our AWS WAF rollout to minimize the risk of direct external threat / attack for the company I work for.

Well, I actually changed my prioritization as we found that 7% of our API Gateways were not supposed to be public and were exposing us for to risk.

It started with my colleague and I needing to do an inventory, We needed to understand our public exposed resources that were not protected by a authorization mechanism that is handled by AWS API Gateway (IAM, API keys etc).

I quickly decided that we would not spend time on doing an inventory on what authorization each resource is configured with in all the 312 API Gateway endpoints in production.

So I started to write a one-liner in bash using aws cli v2 (tested on Ubuntu 20.04 & macos big sur) to do that for me. Make sure to change the profile (three times in the one liner) and add --region if you need to use another one then your default configured.

```
aws --profile AWS-PROFILE-CHANGE-ME apigateway get-rest-apis | grep \"id\"\: | awk -F '"' '{print $4}' | while read -r restApiId; do aws --profile AWS-PROFILE-CHANGE-ME apigateway get-resources --rest-api-id $restApiId | grep -B 4  resourceMethods|grep \"id\"\:|awk -F '"' '{print $4}' | while read -r resourceId; do for httpMethod in "GET" "PATCH" "PUT" "OPTION" "DELETE" "POST"; do  aws --profile AWS-PROFILE-CHANGE-ME apigateway get-method --rest-api-id $restApiId --resource-id $resourceId --http-method $httpMethod 2>&1 | grep -A 1 '"authorizationType": "NONE"' | grep '"apiKeyRequired": false' 2>&1 >> /dev/null  && echo "APIGW $restApiId with RESOURCE ID $resourceId and HTTP METHOD $httpMethod IS PUBLIC AND NO API KEY" ; done ; done ; done  
```
Expected output (if you have public resources)
```
APIGW XXXXXXXXXX with RESOURCE ID XXXXXXXXXX and HTTP METHOD GET IS PUBLIC AND NO API KEY
APIGW XXXXXXXXXX with RESOURCE ID XXXXXXXXXX and HTTP METHOD POST IS PUBLIC AND NO API KEY
```
In my case I had 9.6% of all AWS API Gateway endpoints in production that had one or more resources with an authorization setting set to none and no api key set. That is typically the case when you build a public services as long as they are suppose to be public, in our case we only had a few endpoints serving our customers so we did not expect more then 2%, we had now 7.6% more then expected.

Based on that, we totally shifted the focus from addressing that instead of adding more layers of security (WAF in this case). With that said, if you have a pretty good feeling of how many endpoints and resources that should be public and unauthenticated, this one liner will give you a indication if your developers are doing the right thing managing their infrastructure.
Cypress?
Tags: javascript, testing, discuss, beginners
Published: 2021-12-06 06:51:46

I want share about the trending tool Cypress, which I came across recently.

#Cypress?#
Cypress is an End-to-End Testing framework, which comes with a lot of inbuilt features that you will require in any automation tool.Cypress tests anything that runs in a web browser. All of the architecture surrounding, It is built to handle modern JavaScript frameworks like React, Angular, Vue, Elm, etc.
In a nutshell Cypress is a next generation front end testing tool built for the modern web

#Cypress is all in one#
When we say all in one means we don't need any other 3rd party tool to achieve our automation framework.
Unlike other tools, where we have to maintain and integrate multiple libraries to support automation framework, increasing the effort and cost required to maintain those libraries. 
With Cypress, we don’t have to worry about any of these things, since most of the things which are required come along with Cypress itself.

#Features of Cypress#
There is multiple uniqueness, which makes Cypress one of the choices for Web automation. Few of them are:
**Fast** - Run on the fly.
**Flake Resistant** - Cypress automatically waits for commands and assertions before moving on. No more async issues.
**Ability to test API’s** cases by mocking the server response. (Network Requests)
**Debuggability** -We can hover over each command in the Command Log to accurately see what happened at each step.
View videos of the execution of your entire tests when running from the Cypress Dashboard.
**Viewport Sizing** - set your app viewport size to test responsive layouts.

I have not covered the coding part and architecture as it will be confusing to the new readers.
Thanks for the read let me know what are the things you are interested about this tool and what you want to know more.

Official cypress link: https://www.cypress.io/
Running Tests against LocalStack using GitHub action
Published: 2021-12-06 06:30:56

### My Workflow

This workflow I designed to run tests against [LocalStack](https://localstack.cloud/). I hope this Github action will help developer community or testers to test their respective test cases against LocalStack instead of executing it against the AWS Cloud which could be costly in some cases. For sample Lambda tests, I have referred This [Repo](https://github.com/ciaranevans/localstack_and_pytest_1).

This github action flow is very simple and consists of following three steps-

**Step 1**
Running localstack services.

**Step 2**
Install python and other test dependencies

**Step 3**
Run the tests against LocalStack

The details such as Yaml file and Link to code are given below

### Submission Category: 

**DIY Deployments**

### Yaml File or Link to Code

**Yaml file**

```
name: Localstack CI
on: push
jobs:
  localstack:
    runs-on: ubuntu-latest
    services:
      localstack:
        image: localstack/localstack:latest
        env:
          SERVICES: lambda
          DEFAULT_REGION: eu-west-1
          AWS_ACCESS_KEY_ID: localkey
          AWS_SECRET_ACCESS_KEY: localsecret
        ports:
          - 4566:4566
          - 4571:4571
    steps:
      - uses: actions/checkout@v2
      - name: Install Python 3.8
        uses: actions/setup-python@v1
        with:
          python-version: 3.8
      - name: Install dependencies
        run: |
          pip3 install --upgrade pip==20.0.1
          pip3 install -r requirements.txt
      # Execute Tests lambda
      - name: Run test for sample lambda
        run: |
          cd lambda
          pytest -sv
  
```
**[Link to GitHub Repo](https://github.com/rahul-bhave/localstack-utilities/blob/2780e0f4219d285ebe0c48de9e7e0c2da2d9f4ba/README.md)**

### Additional Resources / Info

I have referred following projects to create the github action-
[LocalStack](https://localstack.cloud/)
[Testing Lambda with Pytest](https://github.com/ciaranevans/localstack_and_pytest_1)
Select the first value of DropDown List using jQuery.
Tags: javascript, jquery
Published: 2021-12-06 06:26:38

**There are mostly 3 ways:**
1.  `$("#target").val("thevalue");`
_Just make sure the value in the options tags matches the value in the val method._

2. `$("#target").val($("#target option:first").val());`

3. `$("#target").prop("selectedIndex", 0);`
Week VI Task Force 4.0
Tags: webdev, graduation, taskforce
Published: 2021-12-06 05:49:01

>  Talk <__code__/> To Me 😂 , scan the code or use the web😎

Hello, it's a graduation !!!! after working up to six weeks, day (03.december.2021) come and we graduate. I would say there is nothing better like achieving goals and touching your dreams , the whole story about task force is that it elevates you from one level to another both technical and soft skills, and surely we are proud of whom we've became.

Firstly, I would like to thank [@codeofafrica](https://www.codeofafrica.com) and [@awesomity](https://awesomity.rw) for this great opportunity that they have offered to us, It was really  great experience to work with professionals like them.

As it was last week of task force 4.0 bootcamp, day come we had to present to team [@codeofafrica](https://www.codeofafrica.com) and team [@awesomity](https://awesomity.rw), what we have been working on as the end result. Surely we have delivered a nice and cool application✨ from which we are proud of, and it is yet to come out and serve you well🎇. 

Lastly, I would say coding it is a lighting journey from which not only change your life, but also you get to change other people's daily lifestyle. I believe that the world need a lot from us. Developers who are still in the journey to reach their dreams, I would say let's keep moving forward the best is about to come at the right time. Nevertheless, It was great guys being with me from first week to this last week I can't thank you enough peace out✌.
Adding new records to a Supabase database
Tags: nextjs, database, react
Published: 2021-12-06 05:16:40

Yesterday we learned [how to set up a basic Supabase database in our Next.js](https://daily-dev-tips.com/posts/adding-supabase-to-a-nextjs-application/) application.

We loaded a simple list of all countries, but as the explorers we are, we happen to stumble on some new land!

And deem this land Devtopia. However, how can we now push this new country into our list of countries?

## Making sure the fields are not required

Since we will be only pushing a name to our database. We want to make sure the other fields are nullable.

To check this, log in to your Supabase app login and visit the table you are working on.

Click on the little arrow on your table and choose "Edit Table"

![Supabase edit table](https://cdn.hashnode.com/res/hashnode/image/upload/v1637854729270/WmuLzrmrq.png)

Within the screen that pops up, make sure only the name field is not-nullable. All other fields must be nullable.

![Supabase check if nullable](https://cdn.hashnode.com/res/hashnode/image/upload/v1637854784893/0ARkONDZZ.png)

## Adding a new country field

We can introduce a new country form in our application. We add this above our existing `ul` list.

```jsx
<div>
	<input
	  type='text'
	  placeholder='My Made Up Country'
	  value={newCountry}
	  onChange={(e) => {
	    setNewCountry(e.target.value);
	  }}
	/>
	<button onClick={() => addCountry(newCountry)}>Add</button>
</div>
```

The important parts here are the `setNewCountry` on the input `onChange` handler.
And the button that executes `addCountry` on click.

This means we should define a state for the `newCountry` variable to capture it somewhere.

```jsx
const [newCountry, setNewCountry] = useState('');
```

And then all we need to do is add the `addCountry` function.

```jsx
const addCountry = async (countryName) => {
	let { data: country } = await supabase
	  .from('countries')
	  .insert({ name: countryName })
	  .single();
	setCountries([...countries, country]);
};
```

What we do here is query the Supabase table and insert a new country with a name.
Then we invoke the `setCountries` state and pass the old state merged with the new country.

This will result in the country showing up at the bottom of our list!

Let's try it out.

![Adding new records to a Supabase database](https://cdn.hashnode.com/res/hashnode/image/upload/v1637855394439/KAtvqGy9c.gif)

And there we go! We can now add data to our Supabase table.

You can find the completed code on [GitHub](https://github.com/rebelchris/next-supabase/tree/add-data-to-supabase).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Loopback
Tags: node, express, webdev, programming
Published: 2021-12-06 05:12:30

   When one starts their journey into backend development, there is no doubt they will come across Node.js and Express. Express being an extremely popular web application framework is commonly the go to for developing new and existing applications. Express makes it easy to cut out much of the daunting code that writing raw Node.js requires. This being said, the task of creating your CRUD operations will always exist and if you have not created these I would suggest looking into it before continuing this article. 

Once you understand the fundamentals of Node and Express, there is an incredible web framework that runs on top of both of these different software. Here approaches Loopback.

Loopback is an NPM package that allows for the quick composition of the important CRUD API's that every developer will eventually have to produce. 

The first step of getting started with Loopback is to use the 
simple command: ```sudo npm install -g loopback-cli```

After this command you will be prompted to name your project, and should enter the command:
``` lb ``` 
which will create a file structure that looks like this: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r07ytqr4735318jyg4h4.png)

The client folder will be for our Frontend work exist and our server.js file will contain our Backend work.

The next step will consist of a prompt asking for your data source, which will create a datasource.json file.

Now we can edit model-config.json to use the any created datasource instead of default one which will be labeled as db.

This is the beginning of Loopback but the true magic of the software begins when you start create your models. When utilizing loopback, creating models is as easy as typing in:
```lb model```

You will then prompted enter details about your model, and depending what you have chosen/selected, the crud applications needed will be AUTOMATICALLY generated.

This is the beauty of Loopback. While generally these Api's would have to be tediously written, this framework will automatically create many of them with your selected end point!

In conclusion Loopback is a low learning curve Backened framework that drastically speeds up the development process. I highly suggest going to create a simple project to checkout the many options this software brings.

Source: https://loopback.io/doc/
Source: https://developer.ibm.com/tutorials/create-rest-apis-minutes-with-loopback-4/
Source: https://blog.logrocket.com/creating-a-dynamic-application-with-loopback/
What are var, let, const and their difference?
Tags: javascript, programming
Published: 2021-12-06 04:57:33

In JavaScript, we can declare variables using three keywords var, let and const. Let’s see about the scope and difference of these three variable declarations.

All the three keywords are used to declare a variable. var is ES5, where let and const are introduced in ES6.

## Variable Declarations

Let’s see what is a variable declaration.

Using var, let and const you can declare varaible.
```
var x = 10; // variable decalartion
let y = 11;
const z = 100;
```
What happens if we declare the variable without a value.
```
var x;
console.log(x); // undefined
let y;
console.log(y); // undefined
const z; // Uncaught SyntaxError: Missing initializer in const declaration
```
If we want to update the variable value, we don’t need to redeclare it again. We can only update var and let, where const can be updated. If we try to redeclare it, will produce a type error.
* let can be reassigned, but cannot be redeclared in the same scope.
* const cannot be reassigned and cannot be redeclared in the same scope.
* var can be reassigned and redeclared.

```
x = 15;// reassigning the variable var x
y = 20; // reassigning the variable let y
z = 200; // Uncaught TypeError: Assignment to a constant variable
var x = 20; // when you give assign different values to same varaible browser will accept the latest value when declared in var
let y = 30; // Uncaught SyntaxError: Identifier 'y' has already been declared
```
Since, we can redeclare the variable in var keyword, for a small number code there won’t be an issue in finding if we redeclare it. But when in large number of lines of code, it will mess up the work. That’s why most of the developers use let and const.
* use let when plan to reassign the value to a variable.
* use const when planned to not reassigning the values to a variable.


[Learn more](https://medium.com/@umapreethi123.up/what-are-var-let-const-and-their-difference-f86fcdc1b9d20)