teleren/devto huggingface dataset:
Stepping into Github Actions
Tags: actionshackathon21
Published: 2021-12-08 13:44:29

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)
I have been tried to integrate the GitHub actions with my ML pipelines concerning a project, that helped me to keep checks on updates and errors.



### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)
This workflow will check for syntactical correctness, if the requirements installed are clean and run tests across different branches.


### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)
Wacky Wildcards

### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

`name: Super-Linter

on: push

jobs:
  super-lint:
    name: Lint code base
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Run Super-Linter
        uses: github/super-linter@v3
        env:
          DEFAULT_BRANCH: main
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}`


{% github https://github.com/TishaJhabak1014/customer-propensity-modelling %}

### Conclusion
I have got the understanding of the basics on the GitHub actions to be part of every project. This Hackathon inspires me to explore more on the same.

### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )

[Reminder]: # (Submissions are due on December 8th, 2021 (11:59 PM PT or 2 AM ET/6 AM UTC on December 9th).
ReactJS: adding scripts to project Unexpected token '<'
Tags: react, javascript
Published: 2021-12-08 13:43:48

I am trying to integrate a javascript project into my reactjs one. The plain `js` project augments images in 3D space using `matrix3d` `css`. https://github.com/zoltan-dulac/Matrix-Construction-Set I want this project to act separately in a modal inside my reactjs app.
There are lots of `js` files and I found that it's a headache to add simple `script` tags to a `reactjs` project, so I've started with a blank `js` file. Adding the empty file to the project raises the following `error` in the browser, files with content also raise the same `error`.

`Uncaught SyntaxError: Unexpected token '<'`
The cyber-security impacts of an AWS Outage
Tags: cybersecurity, aws, devops, cloud
Published: 2021-12-08 13:42:12

On the morning of December 7th, AWS had a major outage that effected a large portion of the us-east regions. The outage affected everything from the AWS Console to Disney+, Netflix and even home security devices such as Ring and Wyze.

The outage lasted a good duration of the afternoon where for a good portion of the time AWS service health dashboard didn't even report any issues per AWS: "This issue is also affecting some of our monitoring and incident response tooling."

For most people, it was an inconvenience but its situations like this where not only cyber criminals thrive but even average criminals can monopolize on this too. 

Let's imagine you use a Ring camera ( without the security subscription ) to monitor your home while you're at work. Around lunch time, it was widely known that there was a major outage and even broadcasted on local TV news. Ordinary criminals become aware of the situation and act targeting anyone with that nice Ring sign in their front-yard.

Most products like Ring or Wyze have mandatory disclosures about outages like this; ironically enough I received one from Wyze which I have only a smart plug but never received one from Ring which I have setup around my entire home.

Now let's imagine your company has EC2 machines setup for monitoring or SAAS services to scan for phishing attempts or even security response automation. Sophisticated attackers have systems setup to monitor critical infrastructure like AWS for outages and then start attacks. If an attacker see that a system is down, they will launch a series of attacks to try and bypass the systems that might be down. If these systems are down then it creates opportunities for attacks to slide under the radar and likely never even be noticed until it's too late.

After everyone's PagerDuty alarms stop and the dust settles, situations like this can be good opportunities to remind organizations that putting all your eggs in one basket ( or us-east-1 in this case ) should be treated as a security vulnerability not just 'bad devops'.

These situations also highlight our reliance on infrastructure that most of us highlight as 'too big to fail' but it's better to be prepared for the worst than not.
My first job interview question?
Published: 2021-12-08 13:19:57

How to get loop throw and structure data.
loop throw questions array and get comments with respect of the ``questionId`` and replies with respect of ``commentId`` 
 
Example 
```
let data = {
	questions: [
		{
			questionId: 1,
			questionText: "Question 1",
		},
		{
			questionId: 2,
			questionText: "Question 2",
		},
		{
			questionId: 3,
			questionText: "Question 3",
		},
		{
			questionId: 4,
			questionText: "Question 4",
		},
	],
	comments: [
		{
			commentId: 1,
			questionId: 1,
			commentText: "Comment 1",
		},
		{
			commentId: 2,
			questionId: 1,
			commentText: "Comment 2",
		},
		{
			commentId: 3,
			questionId: 1,
			commentText: "Comment 3",
		},
		{
			commentId: 4,
			questionId: 3,
			commentText: "Comment 4",
		},
		{
			commentId: 5,
			questionId: 2,
			commentText: "Comment 5",
		},
	],
	replies: [
		{
			commentId: 1,
			replyId: 1,
			replyText: "Reply 1",
		},
		{
			commentId: 2,
			replyId: 2,
			replyText: "Reply 2",
		},
		{
			commentId: 3,
			replyId: 3,
			replyText: "Reply 3",
		},
		{
			commentId: 3,
			replyId: 4,
			replyText: "Reply 4",
		},
		{
			commentId: 5,
			replyId: 5,
			replyText: "Reply 5",
		},
	],
};

```
Try yourself to prepare interview if stuck blow is the solution
Desire output:

```
[
  {
    questions: { questionId: 1, questionText: 'Question 1' },
    comments: { commentId: 1, questionId: 1, commentText: 'Comment 1' },
    replies: [ [Object] ]
  },
  {
    questions: { questionId: 1, questionText: 'Question 1' },
    comments: { commentId: 2, questionId: 1, commentText: 'Comment 2' },
    replies: [ [Object] ]
  },
  {
    questions: { questionId: 1, questionText: 'Question 1' },
    comments: { commentId: 3, questionId: 1, commentText: 'Comment 3' },
    replies: [ [Object], [Object] ]
  },
  {
    questions: { questionId: 2, questionText: 'Question 2' },
    comments: { commentId: 5, questionId: 2, commentText: 'Comment 5' },
    replies: [ [Object] ]
  },
  {
    questions: { questionId: 3, questionText: 'Question 3' },
    comments: { commentId: 4, questionId: 3, commentText: 'Comment 4' },
    replies: []
  }
]

```


## Solution :clap: :clap: :clap:
```
function generateOutput(data) {
	const { questions, comments, replies } = data;
	// CODE HERE
	let output = [];
  questions.map((i)=>{
      comments.map((c)=>{
        const reply = replies.filter((r)=>r.commentId===c.commentId)
        if(c.questionId===i.questionId){
          output.push({questions:i,comments:c,replies:reply})
        }
      })
  })
	return output;
}

let output = generateOutput(data);

console.log(output);

```


Thanks for reading, if it is helpful comment blow with Thanks :smiley:
Everything You Need To Know About Software Development Life Cycle

Tags: beginners, programming, testing
Published: 2021-12-08 13:18:03

In this high-tech world, building the perfect software is like finding a gold mine.
 
But while in the past, finding a gold mine was a physical task, building the perfect software is a mental one.
 
And like reality, software development also has different stages when it comes to its development.

## What Is Software Development Life Cycle (SDLC)

Software Development Life Cycle (SDLC) is nothing more than the list of steps that a development team can take action on to build a software product.
 
A life cycle model represents all the methods required to make a software product pass through its life cycle stages.
 
SDLC includes in it the full cycle of development. The steps that are included in all these phases are planning, creating, testing, and deploying a Software Product.
 
That means, the SDLC is like a map. This process shows us the entire process of software, from its inception to its ending.

**Read More:** [Software Development Life Cycle](https://www.hyperlinkinfosystem.com/blog/software-development-life-cycle)
SQL Server Interview Questions
Tags: sql, server, career
Published: 2021-12-08 13:16:58

Developed by Microsoft, the Microsoft SQL Server is an incredible and industry-perceived social database management system. It is a hearty RDBMS that empowers applications running on a similar PC or a distant PC to store and recover information. Likewise, this product item is viable to work with Microsoft Windows Server, Linux, and Microsoft Windows operating systems.

![SQL Server Interview Questions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxz4mnc8sh9y0jovdvnt.png)
 
A wide range of Microsoft SQL Server editions is available that aims to meet the varying needs of different users. The Microsoft SQL Server editions are available across three categories – Mainstream, Specialized, and Discontinued.

Pursuing a career in SQL Server requires you to possess at least a Bachelor’s Degree in Computer Science. In addition, it would be a plus point to hold certification in SQL Server.

**List of SQL Server Interview Questions:**
Here I compiled top interview question for SQL Server developer. Want to their answers too, then go through this blog [SQL Server Interview Questions](https://www.techgeekbuzz.com/best-sql-server-interview-questions/).

1. What is SQL Server?
2. List and explain types of commands used in SQL Server.
3. Explain the method of creating a database in SQL Server.
4. What is SQL?
5. What is the latest version of SQL Server?
6. Explain PL/SQL.
7. Differentiate between SQL and PL/SQL.
8. Explain a Relational Database Management System (RDBMS).
9. List out properties of RDBMS.
10. What do you understand about a database table?
11. Tell the syntax for creating a table in SQL Server with an example.
12. Write down the syntax for deleting a table in SQL Server.
13. Tell the syntax for updating a table in the SQL Server.
14. Explain different kinds of relationships in SQL Server.
15. Explain the primary key in SQL Server.
16. What is a foreign key?
17. Name the TCP/IP Port on which SQL Server runs.
18. Explain database normalization and list its forms.
19. Explain functions in SQL Server.
20. Explain Aggregate functions in SQL Server.

## Conclusion:

If you wish to shape your career in SQL and aim to appear for an interview, this article will surely assist you. We have listed the most common SQL Server interview questions and answers. You can be more confident about what to answer if an interviewer asks any of the above questions related to SQL Server.
Infuse Fungible Tokens into an NFT
Published: 2021-12-08 12:54:11

## Fungible tokens vs. Non-fungible tokens
A fungible token is something like Bitcoin, Ethereum, or Flow. They usually represent some form of interchangeable value. Non-fungible tokens (NFTs) are tokens that we can use to represent ownership of unique items. They let us tokenize things like art, collectibles, and even real estate. 

## A Creator's dilemma

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

An Artist may want to reward her early backers/collectors of her artwork in some form without the collectors needing to let go of the artist's work in order to cash in on the value.
We see successful examples of how some projects have rewarded their communities and thus grown even further and created much stronger and loyal members. 
These examples include [Axie Infinity](https://decrypt.co/82283/axie-infinity-airdrop-60m-axs-tokens-ethereum) which gave out $60M to its early players in an airdrop, [Ethereum Name Service (ENS)] (https://www.one37pm.com/nft/finance/ens-airdrop-is-here-why-its-important-how-to-claim) did >$500M in an airdrop just recently as well

[According to Moonpay, banks hate cryptocurrencies (fungible tokens) but they love NFTs.](https://www.youtube.com/watch?v=amr7ti0ZT50) It can become a legal hassle for solo Artists/Creators to go through the same process as Axie Infinity and ENS. That is why creating a Dapp that enables one to infuse any fungible tokens into an NFT could be useful. 
The NFT would allow for the infused tokens to be claimed over time and it would turn the artworks into portals that stream the artist's social tokens to collectors. As the total value of the artist's artwork increases the value of those tokens will increase as well.

## Building on Web3
Implementing such a Dapp (Decentralized app) would usually require one to write smart contracts for an NFT and a fungible token. If many Creators were to do this, we would have thousands of the almost identical smart contract deployed on the blockchains. Unfortunately, this is what we see happening already on the blockchains like Ethereum and Binance and it is really inefficient. The Hyperverse is all about efficiency. [Hyperverse](https://www.decentology.com/blog/composing-the-hyperverse) is a platform with many composable smart contract modules that one can reuse. So you don't have to write smart contracts and deploy them on your desired blockchain. You can just use the modules that are available from the Hyperverse.

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

This allows you to build rapidly and have a working Dapp ready in less than 15 minutes.
update custom model by rendering into html
Published: 2021-12-08 12:46:36

Hi,
Greetings for the day!

This is Vishnuvardhan. I am fresher in Django.
Here I am unable to do below activity.
I have one table(custom model) having product details.(like, name, price, description) having 10 records.
I need a provision to update price and description.
for this, I would like to create one .html(update_product.html) file with three input fields.
while I select product, update_product.html should open by filing existing details.
After I will change price and description and submit. it should update to existing table.
Please guide/suggest me any reference links/blogs to achieve this.

Thanks in advance.
Vishnu.
Slice vs Splice in JS
Tags: javascript, tutorial
Published: 2021-12-08 12:20:39

Hey **fellow creators**

You've never quite known what the *difference was between Slice and Splice* in Javascript? Dive in!
 
If you prefer to watch the video **version**, it's right here :

{%youtube UvYoCavdbCA%}

##1. Slice.

Slice will return a new array from an existing one. For example:

```js
const array = ["kiwi", "strawberry", "lemon", "peach", "grape"];
const slicedArray = array.slice(0,2)

console.log(slicedArray)
```

Here, *slicedArray* will return the existing array from index 0 to index 1 without including it, meaning the first two elements of *array*, kiwi and strawberry.

##2. Splice.

Splice, however, will not return a new array but will simply remove or replace a portion of the existing array.

```js
const array2 = ["kiwi", "strawberry", "lemon", "peach", "grape"];
array2.slice(0,1)

console.log(array2)
```

It will remove an element from the beginning of the index, meaning the first fruit will be removed from the array.

You can also replace an element with another one:

```js
const array2 = ["kiwi", "strawberry", "lemon", "peach", "grape"];
array2.slice(0,1, "lime")

console.log(array2)
```

Here, "kiwi" will be replaced by "lime", but there will still be 5 elements to the array.

Know the difference now? As you can see, it's not that hard ;)

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

*See you soon!*

Enzo.
Get the search params with React Router
Tags: javascript, react, webdev, tutorial
Published: 2021-12-08 12:16:50

Get the query string params (aka search params) with React Router using the useSearchParams hook from React Router v6. A search param is what comes as key/value pair after a ? separator in the URL. For example "?name=john" where name is the key and john is the value.

{% youtube Q0xlGWU9WDQ %}
1-Day Python Build: What’s The Weather At The North Pole?
Tags: python, webdev, adventofcode, anvil
Published: 2021-12-08 11:52:24

# What's the weather at the North Pole?

> This blog post is part of Anvil's Advent Calendar, a project where we build 24 apps in 24 days, and blog about it! That means this app was built in only a few hours; read on to see what our 8th of December app is.

Weather conditions can be pretty tough for Santa Claus and his Elves at the North Pole. With todays advent calendar app, you can find out whether the weather is being naughty or nice for Santa:

<h3 class="app-url"><center><a href="https://north-pole-weather.anvil.app">https://north-pole-weather.anvil.app</a></center></h3>


![Finished Weather App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tqf2xllsvvjkry85c7t.png)

Of course, the app is built with nothing but Python!

## Here's how it works:

[AccuWeather](https://www.accuweather.com/) provides a simple free API for getting the [current weather conditions](https://developer.accuweather.com/accuweather-current-conditions-api/apis/get/currentconditions/v1/%7BlocationKey%7D) at a given location. All we need to do is send a request to the API and build a front end for it to display the information we want.

We can start by building the app's UI by dragging and dropping components, like [Labels](https://anvil.works/docs/client/components/basic#label), to display the weather information we want. 

![Dragging and dropping a Label onto a form and naming it self.chance_of_snow](https://anvil-website-static.s3.eu-west-2.amazonaws.com/advent-calendar/north-pole-weather/weather-app-build.gif)

Then we just need to [get an API key](https://developer.accuweather.com/accuweather-current-conditions-api/apis/get/currentconditions/v1/%7BlocationKey%7D) and [store it as a secret](https://anvil.works/docs/security/encrypting-secret-data#using-secrets-from-code) in our app. We can then create a server function to [send the HTTP request](https://anvil.works/docs/http-apis/making-http-requests) and get weather data back:

```
`@anvil.server.callable
def get_north_pole_weather():
  resp = anvil.http.request(f"http://dataservice.accuweather.com/currentconditions/v1/336714?apikey={anvil.secrets.get_secret('accuweather_key')}", json=True)
  return resp[0]
```

Then, we can set the properties of each front-end component, like a Label's display text, in [client-side Python](https://anvil.works/docs/client/python) to display the weather data:

```
...
self.weather_description.text = weather_data['WeatherText']
self.temperature_celsius.text = str(weather_data['Temperature']['Metric']['Value']) + "°C"
...
```

And that’s all there is to it! We now have an app to check the weather at the North Pole.

## See the Source

Check out the source code for yourself!

**[<u>Clone Link</u>](https://anvil.works/build#clone:YPVNELTJMBVAKYP3=AWCRNMANN5KU6WCSVLTWST5A)**
How I built SetProgress - Part 1 Waitlist
Tags: nextjs, twitter, webdev, sideprojects
Published: 2021-12-08 11:42:00

This is going to be a multi part series. In this post, I am going to explain how I created a waitlist page for my app [SetProgress](https://setprogress.co/).

For a simple waitlist, you require only 2 things, a landing page and a way to collect & store emails or phone numbers. 

<figure>
  <figcaption>Waitlist Architecture</figcaption>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lu3vfdehn6of3o5ixj7.png">
</figure>

### Landing page

For the landing page, I used [Unicorn platform](https://unicornplatform.com/). I chose an existing template and made some minor tweaks to it. I did not want to spend time building a page myself since waitlist is a temporary thing and I could spend that time on building the app itself. 

I took their `Maker` pricing plan, so that I can export the code and host it myself. I did not want to depend on another platform for hosting and keep paying them just for that. 

### Collecting emails

I wrote a few lines of JavaScript code which will make a call to an API which will have the email the user entered in the waitlist input box. On success, I show the user an alert message with the text `Added to waitlist successfully`. I just used javascript `alert(success)` for it, no fancy pop up's.

### Storing waitlist emails

I decided to store the emails in Airtable. I created an automation in Integromat which will receive the emails through a webhook and write them to Airtable. The automation is a Webhook to Airtable integration. The ajax call from the waitlist form is made to the Webhook API url provided by Integromat. 

 
<figure>
  <figcaption>Integromat integration</figcaption>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0r1moxq1js3l9wmyz8gu.png">
</figure>

### Creating the logo
I created a simple logo from Figma.


<figure>
  <figcaption>App logo</figcaption>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fh0nndhyuvg8ul2ju06.png">
</figure>

I created it using emoji's :smile:

### Tools used for the waitlist

- Unicorn platform, for building the landing page.
- Figma, for creating the logo.
- Storyset, for illustration. I used [Fast-loading](https://storyset.com/illustration/fast-loading/bro) illustration.
- Airtable, to store the emails
- Integromat, to create a webhook and write data to Airtable
- Vercel to deploy the waitlist.

I used the free tier of all the above tools, except Unicorn platform for which I did one time payment of 8$ for a month, just to export the code.

### Summary

As you can see, a waitlist doesn't have to be complicated. It can be done in a few simple steps. I don't recommend anyone to spend a lot of time on the waitlist. Focus your time & energy on the actual app itself.

Here's how the waitlist page looks.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/io8973bisom9nmp5x9mi.png">
</figure>