teleren/devto huggingface dataset:
⚡️Serverless-stack⚡️ Build full-stack serverless apps on AWS!
Tags: serverless, webdev, opensource, cloud
Published: 2021-12-13 15:58:12

This is an introduction blog post to a new framework called [SST](https://serverless-stack.com/)

{% github serverless-stack/serverless-stack no-readme %}

## What is SST?

Serverless Stack (SST) is an open-source framework that makes it easy to build serverless applications on AWS. It supports various frameworks like React, Vue, Angular, Svelte and much more!

## 🔥 Features

> ### Live Lambda Development

Work on your local Lambda functions live, without mocking or redeploying your app.

> ### Breakpoint debugging

Use your favourite IDE like Visual Studio code, WebStorm, Intellij and set breakpoints to debug your Lambda functions.

> ### Composable serverless constructs

Higher-level CDK constructs made specifically for building serverless apps.

and much more!

### ✨ Examples

Okay, enough talk want to see some actual code? sure, go ahead.

> ### Want to create a REST API?

Here you go,

```js
new sst.Api(this, "Api", {
  routes: {
    "GET /notes": "src/list.main",
    "GET /notes/{id}": "src/get.main",
    "PUT /notes/{id}": "src/update.main"
  }
});
```

> ### No REST, GraphQL please!

alright!

```js
new sst.AppSyncApi(this, "Api", {
  graphqlApi: { schema: "schema.graphql" },
  resolvers: {
    "Query get": "src/get.main",
    "Query list": "src/list.main",
    "Mutation update": "src/update.main"
  }
});
```

> ### Want user auth? it's a piece of 🍰

Here's an example code to add Facebook auth

```js
const api = new sst.Api(this, "Api", {
  defaultAuthorizationType:
    sst.ApiAuthorizationType.AWS_IAM,
  routes: {
    "GET /private": "src/private.main"
  }
});
 
const auth = new sst.Auth(this, "Auth", {
  facebook: { appId: "419718329085014" }
});
 
// Allow auth users to access the API
auth.attachPermissionsForAuthUsers([api]);
```

> ### CRON jobs?

Too easy!

```js
new sst.Cron(this, "Cron", {
  job: "src/lambda.main",
  schedule: "rate(1 minute)"
});
 
// Allow access to other resources
api.attachPermissions(["s3"]);
```

> ### Full-stack react app hosted on AWS?

We need 6 lines of code to do that,

```js
new sst.ReactStaticSite(this, "Site", {
  path: "src/frontend",
  customDomain: "www.my-react-app.com",
  environment: {
    REACT_APP_API_URL: api.url
  }
});
```

and this is just the surface, want to explore more?

⭐️ on GitHub to support us!

{% github serverless-stack/serverless-stack no-readme %}

Website: [here](https://serverless-stack.com/)
Follow on Twitter: [here](https://twitter.com/ServerlessStack)
Join slack: [here](https://launchpass.com/serverless-stack)
Day 1 on my new adventure
Tags: beginners, webdev, programming, career
Published: 2021-12-13 15:55:27

## _Beginnings_

It's the first day of school that I've had in almost six years and the excitement and pressure is already in full swing. If you told me a year ago that I would've left my management job of eight long years to go back to probably my least favorite activity ever I would've said never in a million years. It's been a hell of a crazy year between losing my father and leaving my job that I beat back depression and started to move forward in life. I knew this wouldn't be easy by any means. From making pretty good money in a job that drained the life out of me I made the decision to make a change for the better. I don't know what the future holds in store but I'm optimistic that as tough a journey I'm about to start, I will come out the other end stronger and more resilient than ever before.
Git Flow How I can ovewrite a branch with another one?
Tags: howto, git, gitflow
Published: 2021-12-13 15:53:25

Usually I have to continue a feature that a coleague of mine has done or sometimes I;ll have to be based upon code that has not yet code-reviewed and released.

Therefore I needed to follow these steps to continue my development whilst the code is in Code review.

{% stackoverflow 70337362 %}
The 1 JavaScript Mistake That Costed Me 2 Days (As A Pretty Experienced Developer)
Tags: javascript, react, reactnative, node
Published: 2021-12-13 15:36:43

Hey, guys! Do you still remember the first time you encountered a serious bug in programming? I'm sure you got stuck like crazy and couldn't move on for days, weeks, or even months. In this article, I'll share with you a particular mistake that costed me 2 days, and my sanity.

###Array From Hell in Node.js
Here's the task you wanna accomplish. Look at the code snippet below.
```javascript
const endAVotingSession = asyncHandler(async (req, res) => {
  const votingSession = await VotingSession.find({
    _id: mongoose.Types.ObjectId(req.params.id),
  });

  let arrayThatWillBeModified = votingSession.candidates;

  for (let i = 0; i < arrayThatWillBeModified.length; i++) {
    // Modify the array
  }
  
  await VotingSession.updateOne({ _id: mongoose.Types.ObjectId(req.params.id) }, 
    {
      candidates: arrayThatWillBeModified
    }
  );
});
```

What we're doing is that we're grabbing an array that is returned by MongoDB, and then modifying it, and finally updating it. 

####The question is, will it work?

Nope. It will throw an error. Wanna know the error? It took me 1 to 2 days to solve it. The error is, in the line which I wrote...
```javascript
let arrayThatWillBeModified = votingSession.candidates;
```
...we as developers might assume that candidates is an array (WHICH IS ABSOLUTELY TRUE), and we would do all sorts of things with it like I did here, where I wrote a loop that presumably modified the array. 

The problem is, that array (`votingSession.candidates`) is a Mongoose array, and it seems that you can't just modify it. Instead, you need to convert it to JavaScript array, and then you can modify your array. The solution:
```javascript
let arrayThatWillBeModified = votingSession.candidates.toObject();
// .toObject() converts Mongoose array to JavaScript array
```

The not so cool thing is, even if you log that Mongoose array in console, everything would appear fine, and you'll see an array with the right data. That's it for today guys. If you like this article, leave a like. Thank you.
Living in the Shell #14; sed (Text Stream Editor) (Part 1)
Tags: productivity, linux, bash, devops
Published: 2021-12-13 15:35:50

## `sed` 🖊️

Edits streams by applying commonly used modifications.

## Add a new line `a` & `i`

```sh
cat some-file.txt | sed '3a This is a new line after the 3rd line' 
cat some-file.txt | sed '3i This is a new line before the 3rd line'
```

## Append a new line to the end `$a`

```sh
cat some-file.txt | sed '$a Now, this is the last line'
```

## Prepend a new line to the beginning `1i`

```sh
cat some-file.txt | sed '1i Now, this is the first line'
```

## Replace one or more lines `c`

```sh
cat some-file.txt | sed '1-3c BOOM'
```

> Replaces lines 1 through 3, with 'BOOM'.

## Delete one or more lines `d`

```sh
cat some-file.txt | sed '1-3d'
```

> Deletes lines 1 through 3.
What is CSS? 
Tags: webdev, beginners, tutorial, css
Published: 2021-12-13 15:35:06

Start learning CSS now. Learn CSS Tutorial online or CSS3 gives the basics to the advanced idea of CSS technology. Our CSS tutorial is designed for both beginners and professionals. CSS was developed by [Håkon Wium Lie](https://en.wikipedia.org/wiki/H%C3%A5kon_Wium_Lie) in the year 1994. Cascading Style sheets Passionately introduced to CSS. It is an easy developed language considered to simplify the action of making web pages presentable. CSS allows you to apply a style to HTML elements on web pages. In addition, CSS enables you to do this free of the HTML makes up each web page.

1. CSS stands for Cascading Style Sheet.
2. CSS is used to style  HTML elements.
3. It is a generally used language on web pages.
4. CSS ,HTML and JavaScript are generally  used for web developing. It provides web designers to apply style on HTML elements.

CSS Example:
```CSS
<!DOCTYPE>  
<html>  
<head>  
<style>  
h1{  
color:white;  
background-color:green;  
padding:5px;  
}  
p{  
color:blue;  
}  
</style>  
</head>  
<body>  
<h1>This is the Heading "Dev.to"</h1>  
<p>This is Paragraph.</p>  
</body>  
</html>  
```
##Why to Learn CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

CSS is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Web Development Domain. I will list down some of the key advantages of learning CSS:

Create Stunning Web site - CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.

Become a web designer - If you want to start a carrier as a professional web designer, HTML and CSS designing is a must skill.

Control web - CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
Originally posted: [CSS Tutorial](https://softcodeon.com/css/learn-css-tutorial-online.htm)
Still not finished
Tags: opensource, javascript, webdev
Published: 2021-12-13 15:05:32

  It's 9:25 am, and I'm usually up at this time because of my workout pods. But guess what, it's finals week. I'm two 5-hour energies and an all nighter in. I'm not sure I can think straight, but I am sure finishing out this semester strong. As strong as turning in three late assignments is.

Because I've been "having the college experience" the past two weeks (beers, boys, and benched), I really don't know what I have and haven't done with the final project for my IST 402 class. Which is honestly really disappointing cause I always look forward to doing it, but I haven't had the mental space or time. And guess what, I have all night today and tomorrow to make something magical happen besides it looking a third decent. 

I've been working on creating an event badge based off the below.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1hgitgcumxpz7byce5x.png)
 

And this is the interpretation so far:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m5vsz28d7vl6re12ak2.png)

There are so many placeholders at the moment because I just haven't been able to work on it. However, it has an annoying beautiful shadow. And frankly, that's the best part.
```
 :hover .holePunch {
        box-shadow: inset 0px 0px 2px hsl(220deg 10% 40% / 0.333),
          inset 0px 0px 4px hsl(220deg 10% 40% / 0.333),
          inset 0px 0px 6px hsl(220deg 10% 40% / 0.333);
      }
      .badgeContainer:hover {
        box-shadow: 0px 0px 2px hsl(220deg 10% 40% / 0.333),
          0px 0px 4px hsl(220deg 10% 40% / 0.333),
          0px 0px 6px hsl(220deg 10% 40% / 0.333);
      }
```
Complain if you want, but I feel it just has a modern look.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9vufybz5of2o3vgyhq3.png)

You can find it in it's current state at:
{% github runtimeErrorsMadeEasy/Project3 no-readme %}

This project was initially part of the issue queue with HAX, taking reverse engineering and creating open source resources. Eventually it will be published on NPM here: https://www.npmjs.com/org/runtimeerrorsmadeeasy

I'm honestly starting to fall asleep, so maybe I'll revisit this at a later state to add some updates.

{% spotify spotify:track:274tSPavv09i163nBnYrCU %}
Hey everyone I am trying to do my Haskell coursework but my lecturer didn't teach us
Tags: haskell
Published: 2021-12-13 15:25:23

Define a function steps that takes three positive Int values m n p and returns a String that
can be displayed as p steps, of height m and width n+n (n spaces followed by n asterisks), the
right way up, and repeats the pattern in opposite way, e.g.

Main> putStr (steps 2 3 4)
 ***
 ***
 ******
 ******
 *********
 *********
************
************
************
************
 *********
 *********
 ******
 ******
 ***
 ***
NestJS did not care about numerous gross mistakes in the tests
Published: 2021-12-13 15:18:29

As I write my Node.js framework, I sometimes open the documentation of other frameworks to see what features they have, and I look at issues on github to see what features users of these frameworks want. This is especially true of NestJS, as it has also adopted many concepts from Angular, as has my framework.

The other day I was writing a module to integrate with the well-known [jsonwebtoken](https://github.com/auth0/node-jsonwebtoken) library. NestJS also has an integration with this library, so I decided to peek at what tests they write to test something similar.

The `@nestjs/jwt` module is now downloaded 308,000 times a week, which is about a third of all NestJS users, and is responsible for such an important part as setting up security tokens and verifying them.

And what did I see in the tests of this module? - "Horror!" Because of this I opened the corresponding [issue on github](https://github.com/nestjs/jwt/issues/798). Tests are not just written with small inconspicuous mistakes, such as the lack of `await` before `expect()`, there is generally a hell of a lot, and in almost all tests.

And how do you think [the author of NestJS](https://github.com/kamilmysliwiec) would react? He will say something like: "Wow! Thank you, colleague, for your attention, let's fix it!" - No, he stupidly closed the issue, and even locked it, with the words:
> Tests were added via external contribution as part of this commit 9bae007. Feel free to create a follow-up PR to improve them.

I say - Wow! It would not be terrible if the author of an unknown framework reacted in this way. But this framework is downloaded as much as 1 million times a week, and such an indifferent attitude...

**Udate**: see fix of this bug https://github.com/nestjs/jwt/pull/808
Provisioning an EC2 instance with CloudFormation
Tags: aws, cloudskills, devops
Published: 2021-12-13 15:04:32

**AWS CloudFormation** performs the crazy party trick of enabling you to manage your complete AWS infrastructure and resources from a text file. The formatted YAML or JSON code you write in the AWS CloudFormation template describes your AWS infrastructure and the resources you need. CloudFormation does the rest, provisioning, configuring and deploying everything for you.

1st of all we want to configure AWS CLI using `aws configure` command.

After that create **ec2.yaml** and add following code.

```
AWSTemplateFormatVersion: 2010-09-09
Description: EC2 Instance Create Using CloudFormation

Resources:
  WebAppInstance:
    Type: AWS::EC2::Instance
    Properties:
      ImageId: ami-002068ed284fb165b #AMI ID Unique to Region
      InstanceType: t2.micro
      KeyName: ohio-key #Add keypair name
      SecurityGroupIds:
        - !Ref WebAppSecurityGroup

  WebAppSecurityGroup:
    Type: AWS::EC2::SecurityGroup
    Properties:
      GroupName: !Join [ '-', [ webapp-security-group, dev ] ]
      GroupDescription: 'Allow HTTP/HTTPS and SSH inbound and outbound traffic'
      SecurityGroupIngress:
        - IpProtocol: tcp
          FromPort: 80
          ToPort: 80
          CidrIp: 0.0.0.0/0
        - IpProtocol: tcp
          FromPort: 443
          ToPort: 443
          CidrIp: 0.0.0.0/0
        - IpProtocol: tcp
          FromPort: 22
          ToPort: 22
          CidrIp: 0.0.0.0/0

  WebAppEIP:
    Type: AWS::EC2::EIP
    Properties:
      Domain: vpc
      InstanceId: !Ref WebAppInstance
      Tags:
        - Key: Name
          Value: !Join [ '-', [ webapp-eip, dev ] ]

Outputs:
  WebsiteURL:
    Value: !Sub http://${WebAppEIP}
    Description: WebApp URL
```
After that run following command for create CloudFormation Stack.
`aws cloudformation create-stack --stack-name ec2-stack --template-body file://ec2.yaml --output yaml`

Go to AWS console and search CloudFormation and you can see the newly created stack and you can see output details.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gbho28c456vhw4tw1qk.png)

After that go to EC2 Service and you can see the newly created EC2 instance.

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

If you want you can update stack details using following command.
`aws cloudformation update-stack --stack-name ec2-stack --template-body file://ec2.yaml --output yaml`

Finally, you can destroy AWS Infrastructure using the following command. Please remind that if you destroy you will lose created infrastructure.

`aws cloudformation delete-stack --stack-name ec2-stack --output yaml`

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

After that go to AWS Console and you can see Your EC2 Instance is terminated.

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

Thanks for reading the Article.
SQL Basics Tutorial for Beginners (Practice SQL Queries)
Tags: tutorial, beginners, sql, database
Published: 2021-12-13 15:02:08

##What you will learn from these courses?

- What is SQL.
- Overview of SQL Commands.
- DDL & DML.
- Constraints & Data type.
- SELECT Queries.
- Different functionalities associated with SELECT.

[Link](https://bit.ly/3pRyOph)

All the best for you.
Understanding the CSS Clip Property
Tags: tutorial, css3, todayilearned, html
Published: 2021-12-13 15:00:53

I’m pretty sure some of you may be not aware of CSS clip property. since it’s probably the less used property in the world. It’s no big deal guys. I can't wait, get this show on the road🎉.
<br>
<code>clip</code> property define crop the portion of an element you want to show. Exactly like, <b>"crop" an image by a single CSS property without ask help to JS plugins</b>. It's really surprising.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q8xf051gmyonf8hs376.gif)

Probably, css clip property having some limitation. It's only working on <code> position: absolute; </code> or <code> position: fixed; </code>. It won’t work with relative or static positioning.

Though we can play around with <code>clip</code> property. start to learn clip property from syntax.

```css
.element {
	position: absolute;
	clip: rect(110px, 160px, 170px, 60px);
}
```
Syntax seems little bit weird. Chill, it's still interesting. Just go through following code,

```css
clip: rect(<top>, <right>, <bottom>, <left>);
```
 Your guessing is right🥳. Above syntax seems similar to <code>margin</code> or <code>padding</code> shortcut. But, There is a difference in taking of value.

 Now pay attention. Both the top and the bottom values define the offset <b>from the top border</b> and the left and right values define the offset <b>from the left border</b>. 


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

I find best illustration for how clip property take values from above image. It definitely make sense to you. Hey still with me, I will show you an codepen demo(specially for your patience😍).

{% codepen https://codepen.io/preethi-dev/pen/GRMNeNB %}

Congratulations🎉🎉, you reached the climax of this blog and Please execuse me, I ended up with one more bonus info.

The clip property accepts only three different values:

<b>auto</b>: this is the default behavior. Setting clip to auto is the same thing as not using clip at all.
<b>inherit</b>: well, it inherits the clip value from its parent.
<b>a shape function</b>: Currently only rect() exists.

> Remember avoid usage of % in <code>clip</code> path, It's not working. Need to handle consciously.

Hope, Now you get familire with <code>clip</code> property. Hey Ninja🐱‍👤🐱‍👤, <b>Thanks for reading!!</b>. If you love it or you play around with <code>clip</code> property in experimentally, comment below.
Advent of Code 2021 - Day 13
Published: 2021-12-13 14:59:37

---
title: Advent of Code 2021 - Day 13
published: true
description: In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
tags:
cover_image: https://i.ytimg.com/vi/9sB_URdSS10/maxresdefault.jpg
---

{% youtube 9sB_URdSS10 %}

In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
Blockchain - How are transactions carried out?
Tags: blockchain, beginners
Published: 2021-12-13 14:53:23

Photo by <a href="https://unsplash.com/@clintadair?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Clint Adair</a> on <a href="https://unsplash.com/s/photos/blockchain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Hi readers, in this article we will discuss how are the transactions started and carried out for the new transaction and the steps involved in it.

1. Once you submit any transaction, a backend call is made with the address details.
2. A transaction object is created at the backend using web3.js which includes the below details:

- nonce: It is usually called a number only used once.

- to: The to address which is the receiver.

- value: The amount which is to be sent from sender to receiver.

- gasPrice : Amount of Wei user is willing to pay for transaction. Wei is the smaller unit of ether. 1 ETH = 1,000,000,000,000,000,000 wei.

- gas limit: Maximum units of gas this transaction can consume.

- v,r,s:  these 3 pieces of information are the cryptographic data. this can be used to generate the sender's account address by the sender's private key.
3. So in our case as we will be using the Rinkbey Test network in this series, this transaction object is sent to that network.
4. Now there is a wait time involved in this request to receive the response, which is block time(you can refer to previous articles to terms).
5. Once the block is added success message is received.

So this concludes our steps involved in the transaction. In the next article, we will create our first smart contract on the test network.