Forem: Swapnil M Mane

Learn How to Use Lambda Layers by Building an Image Resize Function Using Sharp

Swapnil M Mane — Wed, 04 May 2022 08:18:45 +0000

Lambda Layer is a true gem in the Lambda function realm. It provides a convenient way to package your libraries and other dependencies that can be used with the Lambda functions. Our open-source project, Webiny which has 50k+ downloads and 5.5k stars on GitHub uses Lambda layers. It helps us reduce our Lambda function size by 12 MB and enable us to share the image processing library sharp across all the Webiny deployments.

By the time you finish reading this article, you will know how to create and use Lambda layers. As an example, we will create a sharp library Layer and use it in a Lambda function to create thumbnail images.
In this tutorial, we will create a Lambda function that will create a thumbnail image using the sharp library. This library will be packaged into the Lambda function using a Lambda Layer.

The workflow will be like this, for each image file uploaded to an S3 bucket (source bucket), the lambda function will be invoked. It will read the image object from the source S3 bucket, create a thumbnail image, and save it to the target S3 bucket.

Prerequisites

AWS account - To use various AWS services, you will need an AWS account. Please follow this link to create an AWS account.
AWS command line - We will use the AWS command line for creating Lambda Function and Lambda Layer. The AWS CLI installation guide is available here.

Step 1 - Create two S3 buckets

Let’s start by creating two buckets, the source and the target. As mentioned earlier, for each image file uploaded to a source bucket, the Lambda function will create a corresponding thumbnail image and save it in the target S3 bucket.

Please follow these steps to create S3 buckets.

1.) Open the Amazon S3 console.
2.) Create two S3 buckets - source and target.

The target bucket name should be source-bucket-name plus suffixed by -resized . For example, if the source bucket is named mybucket then the target bucket should be named as mybucket-resized. Please follow this naming convention because we will be using this naming logic in the Lambda function.

Step 2 - Create the IAM policy

Now let’s create an IAM policy that specifies the permissions for the Lambda function. The Lambda function must have permission for the following operations:

Get the object from the source S3 bucket.
Put the resized object into the target S3 bucket.
Write logs to Amazon CloudWatch Logs.

To create an IAM policy

1.) Open the Policies page in the IAM console.
2.) Choose Create policy.
3.) Choose the JSON tab, and then paste the following policy. Be sure to replace mybucket with the name of the source bucket that you created previously.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "logs:PutLogEvents",
                "logs:CreateLogGroup",
                "logs:CreateLogStream"
            ],
            "Resource": "arn:aws:logs:*:*:*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": "arn:aws:s3:::mybucket/*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject"
            ],
            "Resource": "arn:aws:s3:::mybucket-resized/*"
        }
    ]
}

4.) Choose Next: Tags.
5.) Choose Next: Review.
6.) Under Review policy, for Name, enter AWSLambdaS3Policy.
7.) Choose Create policy.

Step 3 - Create the execution role

Create the execution role that gives your Lambda function permissions to access AWS resources.

To create an execution role

1.) Open the Roles page in the IAM console.
2.) Choose Create role.
3.) Create a role with the following properties:
- Trusted entity type – AWS Service (Allow AWS services like EC2, Lambda, or others to perform actions in this account.)
- Use case - Lambda (Allows Lambda functions to call AWS services on your behalf.)
- Permissions policy – AWSLambdaS3Policy
- Role name – lambda-s3-role

Step 4 - Create a sharp Lambda Layer

Here comes the special part of this tutorial. We will create the sharp Lambda Layer in this section.

You will perform this part of the tutorial on your machine. Please ensure you have npm installed (we will need the npm to install the sharp package).

1.) Create a directory with the name nodejs.
2.) Install the sharp dependency in the nodejs directory by running the following commands:

npm install

SHARP_IGNORE_GLOBAL_LIBVIPS=1 npm install --arch=x64 --platform=linux sharp

After this step, you will get the following directory structure:

nodejs
|- node_modules
|- package-lock.json

3.) Create a .zip file archive of the nodejs directory.

zip -r nodejs.zip nodejs

4.) Now let’s publish the Layer. Run the following command to create and publish the Layer:

aws lambda publish-layer-version --layer-name sharp --description "Sharp dependency for image transformation" --zip-file fileb://nodejs.zip --compatible-runtimes "nodejs14.x" --region "us-east-1" --output "json"

After successful execution of the command above, you will see an output similar to this one.

Please note the LayerVersionArn, we will use it while creating the Lambda function.

{
    "Content": {
        "Location": "https://prod-04-2014-layers.s3.us-east-1.amazonaws.com/snapshots/400803493251/sharp-539dd937-e29c-4418-bb52-2089f3945afc?versionId=4AMhQSZjY3uw3WI85Jcbf7j7Wj1x1X9i&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJz%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJHMEUCIQDu5lMXWxGc7ydyD6HbmtJk2tnqLLxfRbCYqP7tAwi8wAIgAt3KpyhdECs9I7a2mSGNPjk1n4fq1BKjA7iOmBxOquUq%2BgMIRBAAGgw3NDk2Nzg5MDI4MzkiDOj9vGzyeEXkicvNUirXA9YvAlIvZPE3WdpgIYp51YCl28ISR4eL93paFfqBC0IguHOz%2BctOG2P5MwSc2Vj10UVBUBE4qTiGXYTbB3Gk4jCzTvgDEN90fXdMqQYWXCd8zDpq6OIcZ59qVTQPIFdjo2JZ8U3Tfu68BkIynFNLIiX4Y2WvBqxpJoFUlrmOcU4%2FtuXhSmiW6E7xyQus%2F%2BTq3A2n7JaJ2XgKOKPyINyOOBD3ZsonHjiZw0Djtjk7IgvwMjWVLb6Gn73c%2BG9bLKsHHW7aUnRaNEYSdhWejPpz1QEUlcOKpAkLI87kAgTMPCsljZMujUgWxozAth76hWebjXoE7OHUFx870jscKhpMH2DfJhaOCOsmyme69jpqc4%2FEN6jT2WGjIG42xlfUnxB90DpNBjkPguXFyghOHFlhR07bp9Rom0oW1XOriN9jnbxSZqyQsqDFwbrua4oKtOcJJrzDnUGmhKAlWPMkwE81wDyxXSB%2BGYlYQb%2F%2BXScqvqsieBtIpN5KOfAlB0VuoN17gi5BFXsP5ePaGeJPZ5MJ9COQtm6nXdvclUc8ENc0xPfw0l0485%2BVWe%2BzME%2FIIB0Sclg8TuyNSNcqrSxVxb7VVZMZfFrmMpXpU2FD1chXDGTv1tOP3x%2BthjDLvtWSBjqlATnNWnlBoAfJJE7C6ZqVOgRZU4EvDCpLchTmHT%2F99LoBvqYUU0qospR1VT4pGKtfBBEuNGgg9%2F8Dkj6l0q7p62mlxwt%2BENpVp2QOczzj6CDCjMg1E6jnsVGNzCoPeYiEEx8q6LBM51EOMcm2sSSVjNeVNRhTFrF84ch%2FCteFF5Ilr%2FTHW7pb9pJCaOOuJ%2FMZIpXy2w9CtOXxbO8%2BkG4kHHDarz8M9w%3D%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20220412T121324Z&X-Amz-SignedHeaders=host&X-Amz-Expires=600&X-Amz-Credential=ASIA25DCYHY3S4VTGYGI%2F20220412%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Signature=d84c5f4e44cf6473e0a924f3a5fd57aea32c00b17480af1551a869e41693b030",
        "CodeSha256": "f9IchJrdt01ftKIlcSZ25z6ZRbf780hO8xVYCd6Uxhs=",
        "CodeSize": 8748397
    },
    "LayerArn": "arn:aws:lambda:us-east-1:400803493251:layer:sharp",
    "LayerVersionArn": "arn:aws:lambda:us-east-1:400803493251:layer:sharp:1",
    "Description": "Sharp dependency for image transformation",
    "CreatedDate": "2022-04-12T12:13:27.990+0000",
    "Version": 4,
    "CompatibleRuntimes": [
        "nodejs14.x"
    ]
}

Step 5 - Create Lambda function

Now let’s create a Lambda function that will use the sharp Lambda Layer. As discussed earlier, this Lambda function will be invoked when an object is created in the source bucket. Then it will create the respective thumbnail image and store it in the target bucket. The code example below assumes that you are following the S3 bucket name convention that is mentioned in Step-1.

Step 5.1 Create the function code

Copy the following code example into a file named index.js.

// dependencies
const AWS = require('aws-sdk');
const util = require('util');
const sharp = require('sharp');

// get reference to S3 client
const s3 = new AWS.S3();

exports.handler = async (event, context, callback) => {

  // Read options from the event parameter.
  console.log("Reading options from event:\n", util.inspect(event, {depth: 5}));
  const srcBucket = event.Records[0].s3.bucket.name;
  // Object key may have spaces or unicode non-ASCII characters.
  const srcKey    = decodeURIComponent(event.Records[0].s3.object.key.replace(/\+/g, " "));
  const dstBucket = srcBucket + "-resized";
  const dstKey    = "resized-" + srcKey;

  // Infer the image type from the file suffix.
  const typeMatch = srcKey.match(/\.([^.]*)$/);
  if (!typeMatch) {
      console.log("Could not determine the image type.");
      return;
  }

  // Check that the image type is supported
  const imageType = typeMatch[1].toLowerCase();
  if (imageType != "jpg" && imageType != "png") {
      console.log(`Unsupported image type: ${imageType}`);
      return;
  }

  // Download the image from the S3 source bucket.

  try {
      const params = {
          Bucket: srcBucket,
          Key: srcKey
      };
      var origimage = await s3.getObject(params).promise();

  } catch (error) {
      console.log(error);
      return;
  }

  // set thumbnail width. Resize will set the height automatically to maintain aspect ratio.
  const width  = 200;

  // Use the sharp module to resize the image and save in a buffer.
  try {
      var buffer = await sharp(origimage.Body).resize(width).toBuffer();

  } catch (error) {
      console.log(error);
      return;
  }

  // Upload the thumbnail image to the destination bucket
  try {
      const destparams = {
          Bucket: dstBucket,
          Key: dstKey,
          Body: buffer,
          ContentType: "image"
      };

      const putResult = await s3.putObject(destparams).promise();

  } catch (error) {
      console.log(error);
      return;
  }

  console.log('Successfully resized ' + srcBucket + '/' + srcKey +
      ' and uploaded to ' + dstBucket + '/' + dstKey);
};

Step 5.2 Create the deployment package

The deployment package is a .zip file archive containing your Lambda function code and its dependencies.

1.) Open a command-line terminal or shell in a Linux environment.
2.) Save the function code as index.js in a directory named lambda-s3.
After this step, you have the following directory structure:

lambda-s3
|- index.js

3.) Create a deployment package with the function code and its dependencies. Set the -r (recursive) option for the zip command to compress the subfolders.
Run this command from the lambda-s3 directory.

zip -r function.zip .

Step 5.3 Create a Lambda function

We will use the AWS CLI command (aws lambda create-function) to create the Lambda function.

Please replace the role parameter 123456789012with your AWS account ID and layers ARN with the one we got in Step 4 (LayerVersionArn).

aws lambda create-function --function-name CreateThumbnail \
--zip-file fileb://function.zip --handler index.handler --runtime nodejs14.x \
--timeout 30 --memory-size 1024 \
--role arn:aws:iam::123456789012:role/lambda-s3-role \
--region "us-east-1" \
--layers "arn:aws:lambda:us-east-1:400803493251:layer:sharp:1"

With the successful execution of the above command, you will see an output similar to this:

{
    "FunctionName": "CreateThumbnail",
    "FunctionArn": "arn:aws:lambda:us-east-1:400803493251:function:CreateThumbnail",
    "Runtime": "nodejs14.x",
    "Role": "arn:aws:iam::400803493251:role/lambda-s3-role",
    "Handler": "index.handler",
    "CodeSize": 1061,
    "Description": "",
    "Timeout": 30,
    "MemorySize": 1024,
    "LastModified": "2022-04-12T12:22:02.432+0000",
    "CodeSha256": "y0QVpF6+WN3wH1Zp+sbpbYlQEeAdkBuSf7p5aJV52Sc=",
    "Version": "$LATEST",
    "TracingConfig": {
        "Mode": "PassThrough"
    },
    "RevisionId": "64dc7cab-9adf-4472-b20b-e15237209939",
    "Layers": [
        {
            "Arn": "arn:aws:lambda:us-east-1:400803493251:layer:sharp:4",
            "CodeSize": 8748397
        }
    ],
    "State": "Pending",
    "StateReason": "The function is being created.",
    "StateReasonCode": "Creating",
    "PackageType": "Zip",
    "Architectures": [
        "x86_64"
    ],
    "EphemeralStorage": {
        "Size": 512
    }
}

Step 6 - Configure Amazon S3 Trigger

So far we have created all the building blocks. Now let's add the final piece where we will configure the Amazon S3 Trigger to invoke the Lambda function.
When a file is uploaded to S3, it should trigger the Lambda function that will resize, create a thumbnail, and upload it to the target S3 bucket.

To create an Amazon S3 Trigger

1.) Open the Lambda page in the AWS console.
2.) Open the CreateThumbnail function.
3.) Choose Add trigger under the Function overview section
4.) Create a trigger with the following properties:
- Select a trigger – S3
- Bucket - mybucket (your source bucket name)
- Event type – PUT

Step 7 - All set, let’s test it!

Nice, we are all set with our Lambda function, which uses the sharp Layer and creates thumbnail images. Please upload an image (jpg or png) to the source S3 bucket. Once the upload is complete, you should be able to see the thumbnail version of the image in the target S3 bucket.

Lambda Layer is a very efficient and convenient way to package libraries and other dependencies that you can use with your Lambda functions. It offers great benefits in reducing the deployment archives size and faster deployment. layers enable code sharing and separation of responsibilities to create maintainable Lambda functions.

In case you want to explore and learn more about best coding practices and code examples related to Lambda, you can check out the Webiny code repository. Webiny is an open-source enterprise-grade serverless CMS.

If you have any questions related to this tutorial or have any feedback, please feel free to ping us on the Community Slack!

Credits

As this tutorial aims to explain and demonstrate the use of Lambda Layer, we didn't reinvent the wheel and write a new Lambda function to create thumbnail images. The Lambda function code used in this article to create thumbnail images is taken from this official AWS Lambda tutorial. Huge thanks to the authors of this great tutorial on the Lambda function. 🙏🏻

Learn About Infrastructure as Code in 5 Minutes and Why You Should Use It

Swapnil M Mane — Fri, 21 Jan 2022 09:15:06 +0000

In the past, IT infrastructure management was challenging. Hardware and software had to be managed and configured manually. Recently, a tool, that allows you to simplify and automate these actions, has appeared. This tool is called infrastructure as code (IaC).

In this article, we will discuss what infrastructure as code is, the best providers that allow you to implement IaC, IaC best practices, examples, and possible challenges.

Infrastructure as code declaration

Infrastructure as Code (IaC) is the process of managing and configuring an infrastructure using configuration files, rather than manually editing configurations on servers or using interactive configuration tools. The IaC model creates the same environment every time it is applied. IaC is used in infrastructure as a service (IaaS), but they should not be confused. The main idea of IaC is to describe the infrastructure using code.

Why it is needed

Without IaC, teams must maintain customization of individual deployment environments. Over time, this leads to each environment having a unique configuration that cannot be reproduced automatically, which in turn leads to problems during deployment. In such a case, infrastructure administration and maintenance involve manual processes that are difficult to track and which can lead to errors. IaC allows you to always set the same configuration for the target environment, regardless of the initial state of the environment.

The best IaC providers

Let’s take a look at the most popular IaC providers and the main features they provide.

Amazon AWS Cloudformation

AWS CloudFormation is a built-in IaC tool in the AWS Cloud Platform that provides the ability to provision and manage a set of multiple related AWS and third-party resources. CloudFormation lets you manage your resource scaling, automate resource management by integrating CloudFormation with other required AWS resources, and create your own resource providers to provide and manage third-party application resources.

Azure Resource Manager

Azure Resource Manager is an IaC tool for deploying and managing Azure resources. It allows you to deploy, maintain, and track resources as a collective action rather than separately. It incorporates role-based access control into the resource control mechanism to enable users to enforce access control over all resources in a resource category.

Google Cloud Deployment Manager

Google Cloud Deployment Manager is an infrastructure deployment service designed to automate the creation, configuration, provision, and management of assets on the Google Cloud Platform. It allows you to easily create a collection of Google cloud assets and then manage them as a whole. Google Cloud Deployment Manager enables multiple resources to be deployed concurrently, controls the order in which resources are created, and creates resource definition dependencies.

Terraform

HashiCorp Terraform is the most popular open-source infrastructure automation tool. terraform allows you to easily plan and build IaC for multiple infrastructure providers with a single workflow. You can easily provision different environments using the same configuration and manage the complete lifecycle of the infrastructure you want; thereby reducing human error and increasing the automation of infrastructure provision and management.

AWS CDK

The AWS CDK is a software development platform for defining cloud infrastructure in code and exposing it using AWS CloudFormation. It allows you to define the framework and application stack in programming languages such as Python, Java, Typescript, .NET, and JavaScript, and deploys a full-featured application stack directly from a supported IDE.

AWS CDK allows you to automatically create a CloudFormation template based on your source code and deploy this template to your AWS account.

Pulumi

Pulumi is an open-source multilingual development platform that lets you manage your cloud infrastructure with code. It provides any cloud deployment functionality, cloud management. Pulumi offers the freedom to use any supported programming language you like. With Pulumi, you can view all existing environments and the changes you make to them. In addition, you can easily customize their configurations to protect your data.

IaC examples

Let’s look at a simple scenario for provisioning an AWS EC2 instance. In the following example, we can see how Terraform code is used for this requirement.

terraform {
  required_providers {
    aws = {
      source  = "hashicorp/aws"
      version = "~> 3.27"
    }
  }
}

provider "aws" {
  access_key = "aws_access_key"
  secret_key = "aws_secret_key"
  region = "us-west-1"
}

resource "aws_instance" "web_server" {
  ami                    = "ami-0123456"
  instance_type          = "t3.small"
  subnet_id              = "subnet-a000111x"
  vpc_security_group_ids = "sg-dfdd00011"
  key_name               = "web_server_test_key"

  tags = {
    Name = "Web_Server"
  }
}

IaC best practices

Some of the best IaC practices to consider when developing it are listed below.

Version control

Configuration files should be versioned so that you can easily track, manage, and recover any potential changes. Version control is also very helpful in diagnosing problems.

Document as little as possible

When using IaC, the code is the infrastructure documentation and will always be up-to-date, so your employees don’t need to write a lot of additional instructions.

Modularity and microservices

IaC can be used to develop, manage and maintain applications as many deployable modules. It also allows you to split your infrastructure into multiple modular components and then use automation to combine them in the most appropriate way.

IaC Compliance Regulation

Errors in IaC files can be a serious problem if they are not detected prior to deploying IaC definitions. Therefore, it is recommended to automatically and continuously scan IaC files, ensuring that verification occurs whenever an IaC definition is created or updated. You can do it using such tools as Checkov, TFLint, Accurics.

IaC challenges

While there is a list of IaC advantages, there are certain issues with this model that need to be understood and solved before the IaC implementation process.

Shift of configuration

In the long run, a configuration shift can occur, no matter how consistently or often you configure your servers. Therefore, every time you need to change your infrastructure, you must ensure that it is done in accordance with a predefined maintenance workflow.

Potential duplication of errors

In the process of implementing IaC, there are certain processes that must be done manually. One of these processes is writing the code that generates your IaC architecture, during which there is always the possibility of error.

Need for new skills

The IaC model requires a high level of technical expertise, so teams must continually invest in people and skills. For some teams, this may be too costly.

Conclusion

IaC fully frees developers and other professionals from manual, error-prone tasks. In addition, it lowers costs and increases efficiency throughout the entire software development lifecycle.
If you have questions or comments, please reach out via Twitter or Webiny Community Slack.

Introducing the new Object field 🚀

Swapnil M Mane — Thu, 29 Jul 2021 11:20:41 +0000

⚡️Seamlessly create nested and repeatable data structures with the new Object field.

With the latest Webiny 5.11.0 release, we are glad to introduce the new Object field in Headless CMS.

The nested and repeatable data structures was one of the hot topic discussed in the Webiny community. With the new Object field now, you can create complex data structures with ease. Huge thanks to our community members for their suggestions and contributions.

Let's quickly dive into the highlighting capabilities of the Object field.

Build nested data structures

The new Object field allows you to build nested data structures. You can create an object and add various existing fields (ref, richText field, etc.) to it. Along with this, you can also nest objects within other objects.

Repeatable structure

The icing on the cake is, the data structure created with Object fields can be repeatable (like an array of nested objects).

The Use as a repeatable object property allows creating the repeatable object. E.g. setting the 'Use as a repeatable object' property to true on the Equipment model will make it multi-valued.

Below is the model view for the multi-valued Equipment field.

And the preview of the model will look like this:

GraphQL Schema auto-complete support

Object field respects all the rules and behaviors of all the other existing fields (ref, richText field, etc.). You also get a full GraphQL Schema auto-complete on your nested fields.

Alright, here is the demo in action!

Try the new Headless CMS - Object field and please let us know your valuable feedback!

5 Things to Avoid When Writing Cypress Tests

Swapnil M Mane — Mon, 26 Jul 2021 09:15:05 +0000

When it comes to testing an application, End-to-End (E2E) testing provides the most confidence and the most bang for the buck.

On the contrary, there is no doubt that End-to-End testing is hard, time-consuming, and comes with a bag of issues to solve. But, only if you're using the wrong tool for the job.

Enter Cypress: Fast, easy, and reliable testing for anything that runs in a browser.

Cypress helps in solving most of the pain points of End-to-End testing and makes it fun to write tests.
But, there are certain mistakes to be avoided so that you can get the full benefit of working with Cypress.

In this blog post, we'll cover 5 such common mistakes, which should be avoided when writing Cypress tests.
So, without further ado, let's begin!

Use `id` and `class` For Selecting Element

Using id and class for selecting element is problematic because they are primarily for behavior and styling purposes, due to which they are subject to change frequently.
Doing so result in brittle tests which, you probably don't want.

Instead, you should always try to use data-cy or data-test-id.
Why? Because they are specifically for testing purposes, which makes them decoupled to the behavior or styling, hence more reliable.

For example, let's suppose we have an input element:

<input
  id="main"
  type="text"
  class="input-box"
  name="name"
  data-testid="name"
/>

Instead of using id or class to target this element for test, use data-testid:

// Don't ❌
cy.get("#main").something();
cy.get(".input-box").something();

// Do ☑️
cy.get("[data-testid=name]").something();

What about using text for selecting element?

Sometimes it is necessary to use text such as button label to make an assertion or action.
Although, it's perfectly fine, keep in mind that, your test will fail if the text changes, which is what you might want if the text is critical for the application.

Treating Cypress Commands as Promise

Cypress tests are composed of Cypress commands, for example, cy.get and cy.visit.
Cypress commands are like Promise, but they are not real Promise.

What that means is, we can't use syntax like async-await while working with them. For example:

    // This won't work
    const element = await cy.get("[data-testid=element]");

    // Do something with element

If you need to do something after a command has been completed, you can do so with the help of the cy.then command.
It will guarantee that only after the previous command finishes, the next will run.

    // This works
    cy.get("[data-testid=element]").then($el => {
        // Do something with $el
    });

Note when using a clause like Promise.all with Cypress command, it might not work as you expect because Cypress commands are like Promise, but not real Promise.

Using Arbitrary Waits in Cypress Tests

When writing the Cypress test we want to mimic the behavior of a real user in real-world scenarios.
Real-world applications are asynchronous and slow due to things like network latency and device limitations.

When writing tests for such applications we are tempted to use arbitrary values in the cy.wait command.
The problem with this approach is that, while it works fine in development, it is not guaranteed. Why? Because the underlying system depends upon things like network requests which are asynchronous and nearly impossible to predict.

    // Might work (sometimes) 🤷
    cy.get("[data-testid=element]").performSomeAsyncAction();
    // Wait for 1000 ms
    cy.wait(1000);
    // Do something else after the action is completed

Instead, we should wait for visual elements, for example, completion of loading. Not only does it mimic the real-world use case more closely, but it also gives more reliable results.
Think about it, a user using your application mostly likely wait for a visual clue like loading to determine the completion of an action rather than arbitrary time.

    // The right way ☑️
    cy.get("[data-testid=element]").performSomeAsyncAction();
    // Wait for loading to finish
    cy.get("[data-testid=loader]").should("not.be.visible");
    // Now that we know previous action has been completed; move ahead

Cypress commands, for example, cy.get wait for the element before making the assertion, of course for a predefined timeout value which you can modify.
The cool thing about timeout is that they will only wait until the condition is met rather than waiting for the complete duration like the cy.wait command.

Using Different Domains within a Cypress Test

One limitation of Cypress is that it doesn't allow using more than one domain name in a single test.

If you try using more than one domain in a single test block it(...) or test(...), Cypress will throw a security warning.
This is the way Cypress has been built.

With that being said, sometimes there is a requirement to visit more than one domain in a single test. We can do so by splitting our test logic into multiple test blocks within a single test file. You can think of it as a multi-step test, for example,

describe("Test Page Builder", () => {
    it("Step 1: Visit Admin app and do something", {
        // ...
    });

    it("Step 2: Visit Website app and assert something", {
        // ...
    });
});

We use a similar approach at Webiny for testing the Page Builder application.

Few things to keep in mind when writing tests in such a manner are:

You cannot rely on persistent storage be it variable in test block or even local storage.
Why? Because, when we issue a Cypress command with a domain other than the baseURL defined in the configuration, Cypress performs a tear-down and does a full reload.
Blocks like "before", "after" will be run for each such test block because of the same issue mentioned above.

Be mindful of these issues before adapting this approach and adjust the tests accordingly.

Mixing Async and Sync Code

Cypress commands are asynchronous, and they don't return a value but yield it.

When we run Cypress it won't execute the commands immediately but read them serially and queue them.
Only after it executes them one by one. So, if you write your tests mixing async and sync code, you will get the wrong results.
For example:

it("does not work as we expect", () => {
  cy.visit("your-application") // Nothing happens yet

  cy.get("[data-testid=submit]") // Still nothing happening
    .click() // Nope, nothing

  // Something synchronous
  let el = Cypress.$("title") // evaluates immediately as []

  if (el.length) {
    // It will never run because "el.length" will immediately evaluates as 0
    cy.get(".another-selector")
  } else {
    /*
    * This code block will always run because "el.length" is 0 when the code executes
    */
    cy.get(".optional-selector")
  }
})

Instead, use our good friend cy.then command to run code after the command has been completed. For example,

it("does work as we expect", () => {
  cy.visit("your-application") // Nothing happens yet

  cy.get("[data-testid=submit]") // Still nothing happening
    .click() // Nope, nothing
    .then(() => {
      // placing this code inside the .then() ensures
      // it runs after the cypress commands 'execute'
      let el = Cypress.$(".new-el") // evaluates after .then()

      if (el.length) {
        cy.get(".another-selector")
      } else {
        cy.get(".optional-selector")
      }
    })
})

Conclusion

Cypress is a powerful tool for End-to-End testing, but sometimes we make few mistakes which makes the experience not fun.
By avoiding the common mistakes we can make the journey of End-to-End testing smooth and fun.

What is Open Source?

Swapnil M Mane — Mon, 26 Jul 2021 08:14:08 +0000

What is Open Source?

Link to video chapter https://youtu.be/Vo5FP0nwMtM

Open Source Software are those whose source code is publicly available to everyone. Anyone can freely use it, modify it and redistribute it.

Let’s understand each term individually.

Source Code

A soul of any software is its code, most of user never see the source code, they use the software.

But behind every software there is a code, which is compiled, transpiled or interpreted by the browser.

So, in open source software, this source is available in public domain means anyone can see what is written in the code.

Let’s take an example of Food Dish. so a food dish is the final thing you consume.

But what is the core or soul of the dish? It is it’s recipe, the final Dish is outcome of recipe.

So, it you make this recipe in public domain anybody can prepare that dish. Open Source is something like this.

Now let’s see how an open source software can be freely used, Modified or Redistributed.

[Use it]

Since it is in publicly available anyone can see the code and use the software.

[Modify it]

Now if anybody want to make any change in software,

For e.g. if you found any bug in the software, you can fix it and can contribute back to it or if you want to add a new feature you can do that as well.

[Redistribute it]

Once it modified, than the modified version of that software can be redistributed i.e. you have the ownership to redistribute it.

So, this was concept of making source code available, so that anyone can freely use it, modify it and redistribute it.

How the Open Source term was Coined?

Link to video chapter https://youtu.be/Vo5FP0nwMtM?t=135

Initially the free Software world was widely used but there were some problem with this word.

Like when any business hears this term, free, they thought the Software will be cheap, unusable and worthless software and they thought they couldn't make money out of it.

And this terms was kind of confusing for newcomers, they often assume the free word is referring to the Price or Money, which was not the case.

Actually the Free words was referring to the freedom at the philosophical level.

So, this was issue which needs to be address, On February 5, 1998, a group was assembled at VA Research and during this meeting Open Source termed was coined.

The credit of inventing this term goes to Christine Peterson, we are thankful to her for this invaluable contribution.

Whats makes a piece of software open source?

Link to video chapter https://youtu.be/Vo5FP0nwMtM?t=192

Just making source code available in public doesn’t makes it open source software.

Author have to give rights to users to freely use, modify or redistribute it.

So, how author can do it,

The process is simple - By adding a License file in the code.

In brief, License allow software to be freely used, modified, and shared.

There are various open source license available, like Apache, MIT, GNU etc.

Like if you have driving license, you are legally allowed to drive in the respective nation.

Similarly if your code have open source License file, it will allow user to freely use it, modify it and share it.

Forem: Swapnil M Mane

Learn How to Use Lambda Layers by Building an Image Resize Function Using Sharp

Prerequisites

Step 1 - Create two S3 buckets

Step 2 - Create the IAM policy

To create an IAM policy

Step 3 - Create the execution role

To create an execution role

Step 4 - Create a sharp Lambda Layer

Step 5 - Create Lambda function

Step 5.1 Create the function code

Step 5.2 Create the deployment package

Step 5.3 Create a Lambda function

Step 6 - Configure Amazon S3 Trigger

To create an Amazon S3 Trigger

Step 7 - All set, let’s test it!

Credits

Learn About Infrastructure as Code in 5 Minutes and Why You Should Use It

Infrastructure as code declaration

Why it is needed

The best IaC providers

Amazon AWS Cloudformation

Azure Resource Manager

Google Cloud Deployment Manager

Terraform

AWS CDK

Pulumi

IaC examples

IaC best practices

Version control

Document as little as possible

Modularity and microservices

IaC Compliance Regulation

IaC challenges

Shift of configuration

Potential duplication of errors

Need for new skills

Conclusion

Introducing the new Object field 🚀

Build nested data structures

Repeatable structure

GraphQL Schema auto-complete support

5 Things to Avoid When Writing Cypress Tests

Use id and class For Selecting Element

Treating Cypress Commands as Promise

Using Arbitrary Waits in Cypress Tests

Using Different Domains within a Cypress Test

Mixing Async and Sync Code

Conclusion

What is Open Source?

Use `id` and `class` For Selecting Element