teleren/devto huggingface dataset:
What is AWS SAM (Serverless Application Model)?
Tags: awssam, awslambda, serverless, aws
Published: 2023-09-14 14:09:50

---
title: What is AWS SAM (Serverless Application Model)?
published: true
date: 2021-07-08 11:03:00 UTC
tags: awssam,awslambda,serverless,aws
canonical_url: https://awsmag.com/what-is-aws-sam-serverless-application-model/
---

![AWS SAM](https://cdn-images-1.medium.com/max/1024/0*dyYwAMyk8YpQiPFG.png)

AWS SAM (Serverless Application Model) is an open-source framework to develop and deploy serverless applications on AWS. The serverless application in the case of AWS is a combination of [Amazon Lambda](https://awsmag.com/an-introduction-to-aws-lambda/), [databases](https://awsmag.com/purpose-built-aws-database/), [Amazon API Gateway](https://awsmag.com/introduction-to-api-gateway/) etc. If you like to read more about [serverless computing](https://awsmag.com/what-is-serverless-computing/) before diving deep into the AWS SAM, you can read it [here](https://awsmag.com/what-is-serverless-computing/).

### What is a Serverless Application?

Before we understand AWS SAM, let us first understand what is a serverless application.

A Serverless Application is a combination of various serverless services provided by AWS. These services are Amazon Lambda, Amazon API Gateway etc. All these services work together with each other and form an application to serve your customers.

### Benefits of AWS SAM

Some of the benefits of AWS SAM are:

- **Testing & Debugging** : We discussed in the serverless computing post that it is hard to test and debug serverless applications. To solve this AWS SAM provides an AWS Lambda like local execution environment which you can use to run and debug the functions locally.
- **CloudFormation Support** : AWS Sam is built on CloudFormation and supports all the resources of Cloudformation in its config file. The AWS SAM team have also created some special construct which you can use to create and deploy resources with less amount of code. For example, A **WS::Serverless::Function** allows you to create an AWS Lambda function along with all the required events configured in the config. If you have configured an API gateway event for your AWS Lambda function, the AWS SAM will deploy that API gateway as well.
- **Single Deployment Configuration:** As I mentionedthat AWS SAM can deploy resources using a construct and also supports other CloudFormation resources as well, you will only need a single deployment config to define and deploy your resources on AWS.
- **Integration** : AWS SAM can also integrate with your CI/CD tool of choice to automate your deployment pipeline. In AWS, AWS Cloud9 IDE supports AWS SAM so you can author, test serverless applications.

That was a quick introduction to AWS SAM. I will be adding more posts around getting started with AWS SAM and building applications using AWS SAM.

_Originally published at_ [_https://awsmag.com_](https://awsmag.com/what-is-aws-sam-serverless-application-model/) _on July 8, 2021._
A Word Search game made with React and Redux
Tags: react, redux, gamedev, sideprojects
Published: 2021-07-08 11:01:32

One of the best ways I know of to learn a new technology, and/or continue learning as it evolves, is putting it into practice.
In this case the main technologies were React and Redux and the project I chose was a word search game.  

The result is before you :)
[Word Search React Game](https://word-search-react-game.netlify.app/)

![Word search react game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bglw5idk7jzq9fh5fto7.png)

You can obviously jump right in and play (it can, at times, even be a challenging game), but if you find yourself asking "how was this implemented" do not hesitate to reach out and contact me here on the comment below or on Twitter [@mattibarzeev](https://twitter.com/mattibarzeev).  
If the topic requires I might write an elaborated answer as a post here.

As mentioned this is  work-in-progress and probably will always be by nature. Any suggestions you have or bugs you might find (and you will) will be received happily.

Feel free to spread it around to whomever you think might enjoy and benefit from it :)

Cheers!
DecoratedBox | DecoratedBoxTransistion in Flutter
Tags: flutter, mobile, dart, codenewbie
Published: 2021-07-08 10:33:06

A widget that paints a Decoration either before or after its child paints.

Container insets its child by the widths of the borders; DecoratedBox does not.

DecoratedBox is commonly used with BoxDecoration.
you can watch the video at {% youtube YvpITGwAOiQ %}
```text
DecoratedBox({Key? key, required Decoration decoration, DecorationPosition position, Widget? child})
```

```dart
DecoratedBox(
        decoration: BoxDecoration(
          gradient: RadialGradient(
            center: Alignment(-0.5, -0.6),
            radius: 0.15,
            colors: <Color>[
              Color(0xFFEEEEEE),
              Color(0xFF111133),
            ],
            stops: <double>[0.9, 1.0],
          ),
        ),
        position: DecorationPosition.background,
        child: FlutterLogo(size: 400));
```
position determines whether the decoration should be at foreground or background to the child.
The above decoration created a full moon with dark night background of FlutterLogo()
{% codepen https://codepen.io/twhite96/pen/RwpxJvW %}
#DecoratedBoxTransistion
Declare it in a statefulwidget and declare the DecorationTween.
```dart
final DecorationTween decorationTween = DecorationTween(
      begin: BoxDecoration(
        gradient: RadialGradient(
          center: Alignment(-0.5, -0.6),
          radius: 0.15,
          colors: <Color>[
            Color(0xFFEEEEEE),
            Color(0xFF111133),
          ],
          stops: <double>[0.9, 1.0],
        ),
      ),
      end: BoxDecoration(
        gradient: RadialGradient(
          center: Alignment(-0.5, -0.6),
          radius: 0.15,
          colors: <Color>[
            Colors.orange,
            Colors.cyan,
          ],
          stops: <double>[0.9, 1.0],
        ),
      ));
```
Declare and intialize AnimationController
```dart
  AnimationController _controller;
  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 5))
          ..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
```
finally return DecorationBoxTransistion
```dart
child: DecoratedBoxTransition(
          position: DecorationPosition.background,
          decoration: decorationTween.animate(_controller),
          child: Container(
              width: 800,
              height: 1000,
              padding: EdgeInsets.all(10),
              child: Container()),),
```

{% codepen https://codepen.io/twhite96/pen/xxdOwBy %}
Create clicking apps with js
Published: 2021-07-08 10:22:47

Here we learn how you can create simple click apps by using javascript.

First let me explain what are clicking apps. So clicking apps are like a counter when you click on button or any key (set in coding) 1 number increments in a number. We have many online app like you can check at https://tecagile.com/click-speed-test-tool/ this app is working with click

##Counter Code

```
<button id="clickme">Click me: 0</button>
<script>
var button = document.getElementById("clickme"),
  count = 0;
button.onclick = function() {
  count += 1;
  button.innerHTML = "Click me: " + count;
};

</script>
```
####Explanation
Above is html and js code. In html we have button when you click on the button a call will go to onclick function which is in js and it will increment 1 number.
🏹Kotlin&Arrow #1 - Modelando Ausencia
Tags: kotlin, arrow, showdev
Published: 2021-07-08 10:20:36

En esta primera sesión con @ivanlorenz analizaremos un caso de uso de 🦄**Wonderful Enterprises** y su servicio especializado en ofrecer servicios turísticos a destinaciones saludables.

Aprovecharemos este caso de uso para mostrar cómo una simple iteración de producto puede provocar una incidencia y cómo resolverla usando [Kotlin](https://kotlinlang.org/) y [Arrow](https://arrow-kt.io/).

Veremos el modelado de ausencia de valor en **Kotlin** con [Nullables](https://kotlinlang.org/docs/null-safety.html) y en **Arrow** con [Option](https://arrow-kt.io/docs/0.10/apidocs/arrow-core-data/arrow.core/-option/).

Aunque introducimos **Arrow** no vamos a hacer programación funcional así que usaremos OOP.

En próximas sesiones introduciremos gestión de errores con [Either](https://arrow-kt.io/docs/0.10/apidocs/arrow-core-data/arrow.core/-either/) e iremos “pidiendo prestado” algunos recursos de la programación funcional que usaremos junto a la OOP.

Puedes consultar el código fuente aquí 👇

{% github AdevintaSpain/wonderful-freshair-app no-readme %}

... y el vídeo de la primera sesión aquí 👇

[0:00](https://www.youtube.com/watch?v=q52oo2KOQYo&t=0s) Introducción
[1:10](https://www.youtube.com/watch?v=q52oo2KOQYo&t=70s) ¿Qué fué antes ... el primer email de la historia o @ivanlorenz?
[4:09](https://www.youtube.com/watch?v=q52oo2KOQYo&t=249s) Wonderful Enterprises - FreshAirApp
[17:31](https://www.youtube.com/watch?v=q52oo2KOQYo&t=1234s) Primera incidencia si una ciudad no existe
[20:34](https://www.youtube.com/watch?v=q52oo2KOQYo&t=1234s) Solución con Nullables de Kotlin
[42:50](https://www.youtube.com/watch?v=q52oo2KOQYo&t=2570s) Solución con Option de Arrow
[1:28:14](https://www.youtube.com/watch?v=q52oo2KOQYo&t=5294s) Bonus refactor con option.eager 🤯

{% youtube q52oo2KOQYo %}

[![Ofertas Backend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2yhil0sifmyta6gebu6.png)](https://careers.adevinta.es/ofertas/?search=backend&stc=aff-blog%20dev.to-modelando%20ausencia%20con%20kotlin%20y%20arrow)
GitHub Copilot for VS Code
Tags: githubcopilot, vscode, pairprogrammer
Published: 2021-07-08 10:19:38

A new "AI pair programmer" represents a breakthrough in the third revolution of software development: the use of AI in coding.

Microsoft and OpenAI have collaborated to build an AI pair-programming system called GitHub Copilot. Copilot, now available in preview as a Visual Studio Code extension, is meant to help programmers write code faster and with less work, Microsoft officials said on June 29.

Copilot is powered by OpenAI Codex, a new AI system. Microsoft and OpenAI have been working together for the past few years on various projects; Copilot is their latest collaboration.

"If the technical preview is successful, our plan is to build a commercial version of GitHub Copilot in the future. We want to use the preview to learn how people use GitHub Copilot and what it takes to operate it at scale," GitHub officials said in a frequently asked questions (FAQ) document published today.

Since GitHub Copilot is available as a Visual Studio Code extension, working wherever Visual Studio Code works, on the developer’s machine or in the cloud on GitHub Codespaces. With access currently limited to a small group of testers, persons interested in trying Copilot can sign up for the Copilot waiting list.

While GitHub Copilot works with a broad set of frameworks and languages, the technical preview works “particularly well” with JavaScript, Python, TypeScript, Ruby, and Go, GitHub said. GitHub cautioned that Copilot does not always write “perfect” code, and that sometimes the suggested code will not work. Code suggested by the tool should be tested, reviewed, and vetted, like any other code, GitHub said.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/398byf9142u64go3p6ky.jpeg)

Codex was trained on billions of publicly available source code lines -- including code in public repositories on GitHub -- and on natural language, which means it can understand both programming and human languages. The Copilot editor extension sends comments and code to the Copilot service. The service uses OpenAI Codex to synthesize and then suggest both individual lines of code and whole functions, Microsoft officials explained in the FAQ.

Copilot is meant to try to discern intent and generate the best code it can. However, it doesn't test the code it suggests, and Microsoft cautions that it may suggest old or deprecated uses of libraries and languages.

Copilot is meant to improve with time and use. Microsoft advises developers to divide their code into small functions, use meaningful names for functions parameters and write good docstrings and comments as they go. They also said Copilot "seems to do best when it's helping you navigate unfamiliar libraries or frameworks."
An Ode to JavaScript
Tags: javascript, poetry, programming
Published: 2021-07-08 10:05:15

Oh JavaScript, please **PROMISE** me
That you'll treat me better.
**LET**'s end **THIS** tragicomedy,
So both of us can **GET** happier.

Every time I **CATCH** up **WITH** you,
I feel pure joy and excitement.
These are the moments I **AWAIT**, to
Fill my **VOID** and reach enlightenment.

IF only you could stay kind to me.
What **ELSE** could I ask for?
Something goes wrong, you get gloomy
You **CLICK** and there's an **ERROR**.

**WHILE** my spirit reaches **OUTERHEIGHT**s
Without an **ALERT** you come to ruin it
It's another **CASE** of you picking a fight.
I **DOCUMENT** everything to myself to prove it.

Anger **RETURN**s, I lose **FOCUS** and grieve
**DATE** and **TIME** stops, another guilt trip
Don't make me **REPLACE** you and leave
This non<strong>FUNCTION</strong>al *love/hate* relationship!
Creating an online budget tool 3/5
Tags: html, javascript
Published: 2021-07-08 09:48:37

---
title: Creating an online budget tool 3/5
published: true
description: Adding javascript totalling to an online budgeting tool
tags: html, javascript
series: online budget in javascript
//cover_image: https://direct_url_to_image.jpg
---

In this short instalment I am going to demonstrate how to total all the budget items and render the totals at the bottom of the budget table.

Code for this iteration has been saved to the add-totals branch available here: https://github.com/muncey/MyBudgetFrontEnd/tree/add-totals

First I have made updates to the budgetTable to remove the contents of the tfoot element.
```
        <table id="budgetTable">
          <thead>
            <tr>
              <th>Item</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfoot>
          </tfoot>
        </table>
```
Next I have added in a calculateTotals function:
```
const calculateTotals = () => {
  let total = 0.00;
  for (let i=0; i<budgetItems.length; i++) {
    total+=parseFloat(budgetItems[i].amount);
  }
  return { item: 'Total', amount: total }
}
```
Notice the use of the parseFloat function which ensures each amount is treated as a number.

Then I assign the innerHTML of the tFoot element to the result of the renderRow and calculateTotals function.
```
const renderPage = (id) => {
  document.getElementById(id).tBodies[0].innerHTML = renderRows(budgetItems);
  document.getElementById(id).tFoot.innerHTML = 
              renderRow(calculateTotals());
}
```
This leaves us with a functional, but not very good looking budget tool.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bq3gb4ntlhdy43qrliq.png)
In the next article I will be looking into saving the budget using local storage.
Don't let embarrassment in the face of feedback devolve into defensiveness (100 Bytes Of Wisdom: Day 61)
Tags: career, journey, advice
Published: 2021-07-08 09:35:54

---
title: Don't let embarrassment in the face of feedback devolve into defensiveness (100 Bytes Of Wisdom: Day 61)
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

![Don't let embarrassment in the face of feedback devolve into defensiveness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lky8icrjneuqaevuyqzk.png)

Sometimes when you get feedback, you can feel quite embarrassed quite quickly. What do you mean I've been doing it wrong this whole time? Oh gosh I didn't know that's how it looked? 

The problem is when this devolves into defensiveness. You start to doubt the feedback in order to prevent further embarrassment. Its a common trap but it's a terrible terrible response to the situation. What you should do is take that embarrassment energy and channel into a few days of quiet reflection. From this reflection you should come up with some concrete actions to fix your behaviour and satisfy the feedback. 

What I'm trying to say is just breathe!

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
How to add @keyframes animation code in SCSS
Tags: css, scss, keyframes, webdev
Published: 2021-07-08 09:25:28

While working on one of my app projects, I found an error during the deployment phase. The error was referring to CSS. The app was working perfectly fine in the development mode. So what went wrong!

Since it wasn't a big project, and there was only one stylesheet, I commented out some parts of the stylesheet that were fairly simple and straightforward. I firstly guessed the error to be arising from the wrong use of interpolation i.e
`#{&}`which is often used in SCSS. But it was correctly coded. 
My second guess was that there is an error arising from the way @keyframes have been used. Yes, I was correct.
So, what went wrong!

In a CSS stylesheet, @keyframes animation code looks like this - 
```
@keyframes animation-name{
        keyframe-selector{
       CSS property value
      }
  }
```

You create @keyframes and call animation property for different elements.

```
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
```

If you check through SCSS documentation, it has many style rules such as `@mixin`,`@include`,`@extend` etc. But, if we use @keyframes directly, SCSS throws an error during deployment. One can infer that it is unable to recognise CSS @keyframes syntax.

###So, how to add @keyframes animation code in SCSS?

It is essential to use the syntax and rules as mentioned in SCSS.
Firstly, create a **@mixin** for animation that includes the animation properties as arguments. It will make it easier for a developer to include this @mixin for different elements. Mostly, animation rules contain animation-name, duration, timing-function and iteration-count. You can add as many arguments as you wish.

```
@mixin animate($animation,$duration,$method,$times){
    animation: $animation $duration $method $times;
}
```

Secondly, create another @mixin that includes CSS @keyframe animation rule inside it. 

```
@mixin keyframes($name){
    @keyframes #{$name}{
        @content;
    }
}
```

For instance, we want to add fade animation property to an element with class - 'headline'.

```
.headline{ 
   @include keyframes(fade){
      0%{
      opacity: 1;
      }
     50%{
      opacity: 0.5;
      }
     100%{
      opacity: 0;
     }
    }
  @include animate(fade, 1s, linear, 1);
}
```

Also, another way to reduce error in this scenario is to provide different animation names for various elements even if they use the same property transitions.

So, if you get stuck while deploying your website, check for the CSS preprocessor's style rules and syntax.
This is one of the ways of using the @keyframes animation rule in SCSS.
Serverless Computing: Security And Challenges

Tags: serverless, cybersecurity, security
Published: 2021-07-08 09:23:48

Serverless computing has been on the rise for the past few years. Serverless computing is a new economic model to cloud computing that has proven popular and has emerged to be a boon to many companies.

__Types Of Serverless Infrastructures__

Serverless architectures are cloud-based and service-based. This means that, instead of provisioning and managing their own servers, organizations buy cloud computing services such as the following:

* __Software as a Service, or SaaS__, delivers centrally hosted and managed software on-demand to end-users over the internet (e.g, Slack, Jira, Salesforce, HubSpot, etc).

* __Infrastructure as a Service, or IaaS__, delivers resources such as networks, data storage, and computers which must be managed by the end-users and offers essential compute, storage and networking resources on-demand, on a pay-as-you-go basis.

* __Platform as a Service, or PaaS__, builds on IaaS by allowing users to deploy and run applications on managed platforms. Deliver everything from simple cloud-based apps to sophisticated, cloud-enabled enterprise applications.

* __Function as a Service, or FaaS__, is a specialized type of PaaS that allows users to develop, manage, and run application functions on managed platforms (e.g, AWS Lambda) without the complexity of building and maintaining the infrastructure.

__How Does A Serverless Environment Reduce The Attack Surface?__

The greatest advantage of serverless computing is that enterprises can build back-end applications without being directly involved in maintaining and securing servers. Maintaining and patching up the security loopholes is assigned to the cloud provider.

Let’s take a look at some of the major responsibilities of the cloud provider:

* Patching the infrastructure periodically.
* Securely configuring the infrastructure with the proper security settings to protect itself.
* Setting up the proper account management for the infrastructure.
* Ensure that it only uses currently supported operating systems and software runtimes.
* Responsible for keeping the software runtime up-to-date and configuring it securely.
* Securely configuring the database and network connectivity.

__Serverless Security Risks & Challenges__

However, like any other existing technology, it’s not immune to risks and threats. Some of the security risks faced by serverless computing includes:

1. Insecure Configuration
2. Overprivileged Function Permissions
3. Event-Data Injection
4. Inadequate Function Monitoring And Logging
5. Improper Exception Handling And Verbose Error Messages
6. Insecure Third-Party Dependencies

_Read more on the security and challenges of serverless computing and the best practices for enhancing security in  serverless applications_ [_here_](https://beaglesecurity.com/blog/article/serverless-computing-security.html)