**Written by Malcon, Software Developer.**

![gplust.jpeg](https://cdn.jobsity.com/gplust_57bc30e761/gplust_57bc30e761.jpeg)

HashiCorp Terraform is the most popular and open-source tool for infrastructure automation. It helps in configuring, provisioning, and managing the infrastructure as code. With terraform, you can easily plan and create IaC across multiple infrastructure providers with the same workflow.

Today we are going to explore one way to share and lock one of terraform's core components the [state file](https://www.terraform.io/language/state) in AWS S3 bucket and using Github Actions as our GitOps tool.

## What is Terraform state?

![state101.png](https://cdn.jobsity.com/state101_9cfe332c28/state101_9cfe332c28.png)

If you’re using Terraform for a personal project, storing state in a local `terraform.tfstate` file works just fine. But if you want to use Terraform as a team on a real product, you run into several problems:

**Shared storage for state files:** To be able to use Terraform to update your infrastructure, each of your team members needs access to the same Terraform state files. That means you need to store those files in a shared location.

**Locking state files:** As soon as data is shared, you run into a new problem: locking. Without locking, if two team members are running Terraform at the same time, you may run into race conditions as multiple Terraform processes make concurrent updates to the state files, leading to conflicts, data loss, and state file corruption.

In the following sections, we’ll dive into each of these problems and show you how to solve them.

## This is (not) the way

The most common technique for allowing multiple team members to access a common set of files is to put them in version control (e.g. Git). With Terraform state, this is a Bad Idea for the following reasons:

**Manual error:** It’s too easy to forget to pull down the latest changes from version control before running Terraform or to push your latest changes to version control after running Terraform. It’s just a matter of time before someone on your team runs Terraform with out-of-date state files and as a result, accidentally rolls back or duplicates previous deployments.

**Locking:** Most version control systems do not provide any form of locking that would prevent two team members from running terraform apply on the same state file at the same time.

**Secrets:** All data in Terraform state files is stored in plain text. This is a problem because certain Terraform resources need to store sensitive data. For example, if you use the aws_db_instance resource to create a database, Terraform will store the username and password for the database in a state file in plain text. Storing plain-text secrets anywhere is a bad idea, including version control.

Instead of using version control, **the best way to manage shared storage for state files is to use Terraform’s built-in support for remote backends**. A Terraform backend determines how Terraform loads and stores state. The default backend, which you’ve been using this whole time, is the local backend, which stores the state file on your local disk. Remote backends allow you to store the state file in a remote, shared store. A number of remote backends are supported, including Amazon S3, Azure Storage, Google Cloud Storage, and HashiCorp’s Terraform Pro and Terraform Enterprise.

## Remote backends with GitOps

If you’re using Terraform with AWS, Amazon S3 (Simple Storage Service), which is Amazon’s managed file store, is typically your best bet as a remote backend for the following reasons:

 - It’s a managed service, so you don’t have to deploy and manage extra infrastructure to use it.

 - It’s designed for 99.999999999% durability and 99.99% availability, which means you don’t have to worry too much about data loss or outages.

- It supports encryption, which reduces worries about storing sensitive data in state files.

 - It supports locking via DynamoDB. More on this below.

 - It supports versioning, so every revision of your state file is stored, and you can roll back to an older version if something goes wrong.

 - It’s inexpensive, with most Terraform usage easily fitting into the free tier.

Multiple writes at the same time can led to a place that we don't want to right? to prevent and control this behaviour we are going to use DynamoDB.

Last but not least we are going to perform CI-CD to those resources with Github Actions, linting the terraform code and deploying into our AWS account using git as the source of truth.
 
The solution will look like this:

![tf-state-using-s3.png](https://cdn.jobsity.com/tf_state_using_s3_fcb7b87160/tf_state_using_s3_fcb7b87160.png)


## Getting ours hands Dirty!

## Setup Steps

Pre-requisites:

* A setup AWS account

* Git installed on your machine

* A Github Account

* A Github repository

### Step 1: Create the backend bucket


1. Clone the repo `git@github.com:malconip/terraform-tfstate.git`

2. Install the [Terraform](https://www.terraform.io/downloads.html) binary

3. Set your bash variables locally

* `export AWS_ACCESS_KEY_ID=[your-key]`

* `export AWS_SECRET_ACCESS_KEY=[your-key]`

4. `terraform init` to initialise Terraform

5. Update the `main.tf` file and set `bucket` property of the backend and s3 resource blocks (yes, even the one that's commented out, we'll need it as part of step 8)

6. Execute `terraform apply` (type `yes`)

### Step 2: Run Terrafrom on Github Actions

7. Uncomment the backend configuration in `main.tf`

8. Execute `terraform init` (type `yes` to move your state)

9. Set your AWS `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY` as repo secrets @ github.com/[your-username]/[your-repo]/settings/secrets/new

10. `git add .` and `git commit -m "First commit"` to commit any changes

11. `git push` to push to github

## Conclusion

Now we can work as a team and push any bussiness foward, but beware padawan, this is the first step and we have a lot of other questions to answer:

 - How to share between multiple accounts?
 - How to protect the state file?
 - How to use those states as data sources?

Perhaps, another blog post about this?
--
If you want to stay up to date with all the new content we publish on our blog, share your email and hit the&nbsp;<a href="https://www.jobsity.com/blog">subscribe</a>&nbsp;button.
Also, feel free to browse through the other sections of the blog where you can find many other amazing articles on:&nbsp;<a href="https://www.jobsity.com/blog/category/tutorials">Programming</a>,&nbsp;<a href="https://www.jobsity.com/blog/category/it">IT</a>,&nbsp;<a href="https://www.jobsity.com/blog/category/outsourcing">Outsourcing</a>, and even&nbsp;<a href="https://www.jobsity.com/blog/category/management">Management</a>.
<a href="https://www.jobsity.com/contact-us"><img src="https://5621549.fs1.hubspotusercontent-na1.net/hubfs/5621549/CTA_2.png"/></a>

HashiCorp Terraform is the most popular and open-source tool for infrastructure automation. It helps in configuring, provisioning, and managing the infrastructure as code. With terraform, you can easily plan and create IaC across multiple infrastructure providers with the same workflow.

Terraform Remote States in S3 with Github Actions

## Introduction

React JS is a JavaScript library for building user interfaces. It lets you create reusable components so that your code is easy to read and maintain. When a user interacts with a React component, React updates the component automatically. This makes your app more responsive and fast.

React JS allows developers to create forms that change based on user input. This can be extremely useful for creating custom forms that are specific to a particular use case. Additionally, React JS helps to keep forms organized and easy to navigate.

In this tutorial, we will go through the steep so you understand how to do it in an easy way. Let’s get started with creating a simple form using React JS.

First of all, you may wonder what is a form! Let me put it simply this way- a form is an empty entity that might hold different values in it. It can be any type of value like name, age, address, email, number, etc. Here we’ll create a simple and static form that shows two rows.


```
import './App.css';
function App() {
 return (
 <div className="App">
 <form>
 <div>
 <input
 name='name'
 placeholder='Name'
 />
 <input
 name='salary'
 placeholder='Salary'
 />
 </div>
 </form>
 </div>
 );
}
export default App;
```


As you can see in the above example I have created two different input fields, which take “Name” and “Salary” values as inputs. However, the form is static. It can only accept the values, but can not do something with those values. The created form looks like this.


<img width="680" src="https://cdn.jobsity.com/image6_d6fbf562d6/image6_d6fbf562d6.png" alt="How to create a dynamic form using React JS">



As you already know that the created above form is static. A static form is isolated and not pretty much useful. Our goal is to create a dynamic form. Let’s make the above form dynamic using React state management. To make the form dynamic I’ll create a React state, and this state will have an object that contains age and salary properties in it. Let’s do it.

`const [inputFields, setInputFields] = useState([ \
 {name: '', salary: ''} \
])`.

Here, the `inputFields` is a React state. Now, we can use this state to map our form fields. To use this state we must import the `useState` hook from the library.


```
import { useState } from 'react';
import './App.css';
function App() {
 const [inputFields, setInputFields] = useState([
 { name: '', salary: '' }
 ])
 return (
 <div className="App">
 <form>
 {inputFields.map((input, index) => {
 return (
 <div key={index}>
 <input
 name='name'
 placeholder='Name'
 />
 <input
 name='salary'
 placeholder='Salary'
 />
 </div>
 )
 })}
 </form>
 </div>
 );
}
export default App;
```


Boom! We are done. The above code will create a set of input fields with the properties “Name” and “Salary” since I’ve used one object in our state. We can increase the number of pairs anytime by adding more objects to the state.

Moreover, we can simply add the values from the <code>inputFields </code>state to the input fields by doing–


```
<input
 name='name'
 placeholder='Name'
 value={input.name}
/>
```


And the process is the same for the “Salary” property.

Let's imagine a real-time situation where we are in need of adding more fields to our form since our existing input fields are not sufficient. To solve the issue we may create a button named “Add More” that will create a new pair of input fields while clicking. Let’s make the button first.


```
<button>Add More</button>
```


Now we need a function that will work beneath this button. This function will trigger only when someone clicks the “Add More” button.


```
const addFields = () => { 
}
```


And now, let’s connect the function to our button by simply adding an `onClick` event.

`&lt;button onClick={addFields}>Add More&lt;/button>`.

So far so good! Our physical structure is ready. Now, we need to create a function that will create a new empty field every time we click the “**Add More**” button. Therefore, we need to make an object inside the `addFields` function, which will cause the result. This object will go back to the `inputFields` state while clicking and creating a new input field.


```
const addFields = () => {
 let newField = { name: '', salary: '' }
}
```


 

Now, we can put this `newField` object inside the `inputFields` state so that it can automate the process.


```
const addFields = () => {
 let newField = { name: '', salary: '' }

 setInputFields([...inputFields, newfield])
}
```

<img width="680" src="https://cdn.jobsity.com/image7_24213ab610/image7_24213ab610.png" alt="How to create a dynamic form using React JS">






Note: The spread operator (three dots **…**) set up the new fields with existing values from the first input field.

Now, we can have more input fields by clicking the “**Add More**” button. Each click will add an extra pair of input fields with “Name” and “Salary” properties.

Next, we want to get another feature of a dynamic form, which is the “**Submit**” button. Let’s imagine a situation when we want to provide our information and send or submit it to the concerned person/company. In this scenario must have to have a submit button below our dynamic form. In this case, we need to create a “**Submit**” button like the previous one. Let’s get a “**Submit**”


```
<button>Submit</button>
```


Then again, we need to have a function, which helps to get the button triggered when we click it. This function will save the data in the console, from the input fields. It also contains a method called <code>e.preventDefault() </code>that will prevent the page from getting refreshed. So that, the information becomes safe.


```
const submit = (e) => {
 e.preventDefault();
 console.log(inputFields)
}
```


Afterward, integrate this function with the “**Submit**” button so that it can send the data and log it in.


```
<button onClick={submit}>Submit</button>
```


Finally, add this to the form tag.


```
<form onSubmit={submit}>
```


When we submit the data using that “**Submit**” button we’ll have the below picture in our console log.


<img width="680" src="https://cdn.jobsity.com/image3_ffaedb87dc/image3_ffaedb87dc.png" alt="How to create a dynamic form using React JS">





<img width="680" src="https://cdn.jobsity.com/image2_4983dfbc62/image2_4983dfbc62.jpg" alt="How to create a dynamic form using React JS">





Lastly, we’ll add the “Remove” feature to our dynamic form. It becomes a pretty much useful feature when it comes to editing or removing the input field’s value of a form. By clicking the remove button we can erase the value of a row if we provide the wrong input mistakenly. Let’s add the remove feature to our form.


```
<button>Remove</button>
```


And now, we need a function that executes the operation. Let’s create the function and integrate it with the button.


```
<button onClick={() => removeFields(index)}>Remove</button>
```


The integration process..


```
const removeFields = (index) => { 
}
```


Finally, just like the previous button execution, we need to construct a new variable and store the <code>inputFields </code>state in that new variable.


```
const removeFields = (index) => {
 let data = [...inputFields];
}
```




<img width="680" src="https://cdn.jobsity.com/image5_487daa7d8e/image5_487daa7d8e.png" alt="How to create a dynamic form using React JS">





We can remove our form data easily by slicing them by their index number. For instance, we have a table of four data pairs and we want to remove the first pair and save it to the console log. 


<img width="680" src="https://cdn.jobsity.com/image1_6b5192a9bf/image1_6b5192a9bf.png" alt="How to create a dynamic form using React JS">






Before slicing the form data

Now, I’m removing the data for Adam.


```
const removeFields = (index) => {
 let data = [...inputFields];
 data.splice(index, 0)
 setInputFields(data)
}
```




<img width="680" src="https://cdn.jobsity.com/image4_d7d8bd5fcf/image4_d7d8bd5fcf.png" alt="How to create a dynamic form using React JS">




After slicing the form data

Now if we press the submit button we’ll have the updated data set in our console log.

## Warming Up

Using React JS to create dynamic forms is a great way to improve the user experience on your website. It makes the form more responsive and easy to use, which can lead to more submissions. So if you're looking for a way to improve your forms, consider using React JS. It always provides an upper hand while making a dynamic form using React JS.
--
If you want to stay up to date with all the new content we publish on our blog, share your email and hit the&nbsp;<a href="https://www.jobsity.com/blog">subscribe</a>&nbsp;button.
Also, feel free to browse through the other sections of the blog where you can find many other amazing articles on:&nbsp;<a href="https://www.jobsity.com/blog/category/tutorials">Programming</a>,&nbsp;<a href="https://www.jobsity.com/blog/category/it">IT</a>,&nbsp;<a href="https://www.jobsity.com/blog/category/outsourcing">Outsourcing</a>, and even&nbsp;<a href="https://www.jobsity.com/blog/category/management">Management</a>.
<a href="https://www.jobsity.com/contact-us"><img src="https://5621549.fs1.hubspotusercontent-na1.net/hubfs/5621549/CTA_2.png"/></a>

React JS helps to keep forms organized and easy to navigate. In this tutorial, we will go through the steep so you understand how to do it in an easy way. 

How to create a dynamic form using React JS


A basic Todo List App enables us to add, remove, and mark a task as completed. The idea seems quite simple but for beginner Angular developers it could be a bit challenging to build it.


How to Create an Angular Todo List App from Scratch

Ever since it became trendy, the demand for websites, web apps, desktop software, and tools to have dark theme support is ever increasing.


How to Make Dark Mode for Websites Using Only CSS

DevOps has become one of the hottest trends in IT in recent years as organizations strive to optimize their development and operational processes. This in turn has given rise to a number of other buzzwords, including Continuous Integration (CI), Continuous Delivery (CD) and Continuous Deployment (CDE). Each of these are considered integral to an effective DevOps framework, but do we really know what we mean when we talk about each one?&nbsp;
Here we’ll look at CI, CD and CDE in more detail, highlighting some of the subtle - but important - differences between them, their key uses and the benefits they can offer. Before we do that, it’s worth stressing the common goal of all these concepts: to make software development processes more efficient, speedy and reliable.
What is Continuous Integration (CI)?
CI is a process of continuously - in practice, this typically means “several times a day” - sharing all source code changes made by individual developers into a central repository. Here these additions or updates can be built and tested for bugs, usually with tools that allow for many tasks to be automated (such as <a href="https://www.jobsity.com/blog/what-is-jenkins-and-why-should-you-use-it" >Jenkins</a>).&nbsp;&nbsp;&nbsp;
<img src="https://f.hubspotusercontent40.net/hubfs/5621549/01%20(82)-png.png" loading="lazy" width="704" alt="Continuous Integration vs. Continuous Delivery vs. Continuous Deployment">
The goal of CI is to solve or prevent problems that can occur when a team of developers is working on a project. Each dev or engineer can work on a different area of the project, but with CI the central repository always maintains the latest version of the source code that the whole team can access. This aims to avoid conflicts in the code, which can lead to bottlenecks and delays.&nbsp;
The key concept of CI is breaking down the development work into small chunks, which are then integrated into the main branch of code as they are built. This approach allows any problems to be identified and resolved quickly, preventing them from snowballing into much bigger issues further down the line. To be most effective, CI builds should be kept short, so that new code can be tested and merged quickly, with any failure notifications received within a few minutes. This improves productivity by allowing developers to draw a line under one task and move on to the next one rather than jump back and forth between tasks (context switching).
What is Continuous Delivery (CD)?
CD is an extension of CI, but it is more of a software engineering solution than one of enhancing team workflow. The overriding aim of CD is to keep the code in a deployable state at any given time. What this means in practice depends on what language, servers and frameworks are being used. But the key factor is ensuring that the features and functions that are available are vetted, tested, debugged and ready to deploy (e.g. to a staging environment) as and when they are needed.&nbsp; The ideal target is for this deployment to always be possible with a single click.
<img src="https://f.hubspotusercontent40.net/hubfs/5621549/02%20(55)-png.png" loading="lazy" width="703" alt="Continuous Integration vs. Continuous Delivery vs. Continuous Deployment">
Again, CD makes use of automation to improve speed and efficiency in the life cycle. A full suite of automated testing can be used to ensure that once deployed the code will actually work as expected. One popular approach is using “reproducible builds,” which are builds that result in identical output artifacts. These can help developers and project managers that code that works on a developer machine will also work in a production environment. In addition, as updated code is deployed, it can be tested by users, who provide feedback that the developers can use to improve functionality or correct any ongoing issues.&nbsp;
As with CI, the main benefit to the IT team and business organization is speed. Automating repetitive tasks also frees up talented developers and QA engineers to work on more creative and higher-level tasks. To make your CD system effective, you should first have a robust CI model in place and ensure that everyone on the team understands and trusts the relevant processes.
What is Continuous Deployment (CDE)?
This is another extension. CDE is broadly similar to CD, but goes a step further by continuously deploying the most up to date version of your code to the production environment. The key difference here is that the whole process is automated, rather than requiring the manual intervention of a team member to complete deployment to production (as is the case typically with CD).&nbsp;
<img src="https://f.hubspotusercontent40.net/hubfs/5621549/03%20(30)-png.png" loading="lazy" width="701" alt="Continuous Integration vs. Continuous Delivery vs. Continuous Deployment">
Setting up CDE requires a high degree of trust in the automated processes and fluid communication between all the relevant departments affected by new software releases (e.g. marketing/support) but once this is achieved it can significantly shorten the software development cycle. It can also facilitate rapid scaling of software applications.
A Quick Comparison
As we’ve seen, CD is an extension of CI and CDE is a further extension of CD. While CI focuses on helping developers by ensuring each bit of new code is bug-free and functional, CD is more about releasing updates and changes in a quick and safe manner. CDE is about creating a unified pipeline for software releases and increasing the velocity of delivery. Combining all three means that when new source code is committed it can be deployed to production automatically and within minutes (or even seconds!), assuming it passes all the relevant tests.&nbsp;
<img src="https://f.hubspotusercontent40.net/hubfs/5621549/04%20(22)-png.png" loading="lazy" width="700" alt="Continuous Integration vs. Continuous Delivery vs. Continuous Deployment">
In this approach, software releases are smaller and far more frequent, which reduces the potential for having to roll back a major issue. The final ingredient - sometimes known as ‘continuous improvement’ - is establishing automatic feedback loops so that developers can react to information from users to keep improving the end product.&nbsp;
Of course, you also need to have developers that are comfortable working in a CI + CD + CDE environment. Jobsity only works with the top developers from Latin America, so don’t hesitate to get in touch to find out how we can add capacity and capabilities to your IT team.
--
If you want to stay up to date with all the new content we publish on our blog, share your email and hit the&nbsp;<a href="https://www.jobsity.com/blog">subscribe</a>&nbsp;button.
Also, feel free to browse through the other sections of the blog where you can find many other amazing articles on:&nbsp;<a href="https://www.jobsity.com/blog/category/tutorials">Programming</a>,&nbsp;<a href="https://www.jobsity.com/blog/category/it">IT</a>,&nbsp;<a href="https://www.jobsity.com/blog/category/outsourcing">Outsourcing</a>, and even&nbsp;<a href="https://www.jobsity.com/blog/category/management">Management</a>.
<a href="https://www.jobsity.com/contact-us"><img src="https://5621549.fs1.hubspotusercontent-na1.net/hubfs/5621549/CTA_2.png"/></a>

DevOps has become one of the hottest trends in IT in recent years as organizations strive to optimize their development and operational processes. This in turn has given rise to a number of other buzzwords, including Continuous Integration (CI), Continuous Delivery (CD) and Continuous Deployment (CDE). Each of these are considered integral to an effective DevOps framework, but do we really know what we mean when we talk about each one?&nbsp;


Continuous Integration vs. Continuous Delivery vs. Continuous Deployment

Written by Gabriel, Front End Developer
As a dev working in the field of UI, I’ve come to appreciate the use of good animations as a powerful accent to making web properties really special.&nbsp;

Who hasn’t seen UI concepts accented or explained with beautiful animations? Sometimes they bring a page to life, and other times they distract.&nbsp;
There are a lot of them online these days -- from transitioning pages to interacting interfaces. And they make a huge difference for users who want immersive digital experiences online.
In this post you are going to learn the basics to create nice and smooth animations on the web, and how and why to avoid clunky, laggy, or distracting animations that take away from your user experience.&nbsp;
<h2 >Topics We’ll Explore</h2>
<ul>
<li aria-level="1">Concept of frames</li>
<li aria-level="1">Best practices</li>
<li aria-level="1">How to animate using transition and animation properties</li>
<li aria-level="1">Performance Analysis</li>
<li aria-level="1">Helpful Resources</li>
</ul>
<h2 >Concept of Frames</h2>
Before anything else, let's make sure we understand the basics of animation. Have you ever seen a video on the internet where a guy goes through a collection of drawings really fast and he makes it look like a regular cartoon? That’s an animation. And it works by using a concept called frames; but showing a certain number of frames in succession -- or FPS: frames per second.
<img src="https://f.hubspotusercontent40.net/hubfs/5621549/IMG_0216.png" alt="Dev Talks: How to Make Good Animations" width="400" loading="lazy" >So, a collection of many pictures or frames, and those being shown sequentially is an animation. An animation will be smoother if it has a higher frame rate per second, and it will be laggier as it gets closer to 0 frames per second. 
That being said, if we want to have smoother animations, we need to achieve 60 FPS or more.
<h2 >Best Practices</h2>
There are two "engines" responsible for animations: CPU and GPU. But right now, all we need to know is that GPU is way more efficient when it comes to computing tasks related to UI.
One note: CSS properties such as <code>display, left, right, top, bottom, width, height,</code> must always be avoided. In contrast, we should use <code>opacity </code>and<code> transform</code> for better performance.
Some users have motion sickness or simply dislike movements on screen, so it's good to give them the choice of turning off animations.
Another best practise is to always make animations meaningful. Animations should have a purpose, like entertaining users while page loads or suggesting certain actions somewhere on the app.
Animations should be quick. It’s not a good idea for your app to extend task time too much; after 3 or 4 times, users might start getting irritated by the animation.
<h2 >How to Animate</h2>
First, let's see how to animate the opacity. For this example we are going to have a simple div element with a class "box".
<pre><code class="lang-css">.box {
 width: 100px;
 height: 100px;
 background-color: green;
 transition: opacity 300ms ease-in-out;
}

.box:hover {
 opacity: 0;
}
</code></pre>
In this example, we are animating the opacity on hover. Notice that the <code>transition</code> property sets animation behavior including: what property will be listened to, animation duration, and timing. Sometimes I add <code>pointer-events: none </code>and<code> position: absolute </code>to make the element not interactable.
Now, let's try a more advanced animation. We can do that by using <code>@keyframes</code>. Here is how CSS <code>keyframes</code> look like.
<pre><code class="lang-css">@keyframes moving {
 from {
 transform: translateX(0);
 }
 to {
 transform: translateX(200px);
 }
}
</code></pre>
We start writing <code>@keyframes</code>, then we give it any name we want, and use the syntax above to set how animation starts and how it ends.
We can also use percentages to shape a custom animation the exact way we want.
<pre><code class="lang-css">@keyframes moving {
 0% {
 transform: translateX(0);
 }
 50% {
 transform: translateX(200px) opacity(0);
 }
 100% {
 transform: translateX(200px);
 }
}
</code></pre>
And to use this CSS <code> keyframe</code>, we can write this onto the element.
<pre><code class="lang-css">.box:hover {
 animation: moving 600ms ease-in-out infinite alternate;
}
</code></pre>
The property <code>animation</code> will be mainly defined by those parameters: animation name, animation duration, timing, repeat times, direction.
If you need to add an animation on a click of a button, here is what I suggest:
<pre><code class="lang-javascript">const element = document.querySelector('.box')

const moving = (element) =&gt; {
 element.classList.add('moving_animation')
}
element.addEventListener('click', e =&gt; moving(e.target))
</code></pre>
Basically, we add a CSS class to the element, this way we guarantee that it is the GPU responsible for the animation.
And that is how the class should look:
<pre><code class="lang-css">.moving_animation {
 animation: moving 600ms ease-in-out infinite alternate;
}
</code></pre>
<h2 >Performance Analysis</h2>
If we use Google Chrome, then you have a powerful tool: Dev tools. Go to the developer tools panel, and look at the header for "Performance". Now hit the reload button and start the animation. It looks like this:
<img src="https://f.hubspotusercontent40.net/hubfs/5621549/IMG_0217.png" alt="Dev Talks: How to Make Good Animations" width="400" loading="lazy" >
Now, try to find "Frames" to see how many frames you are getting. The profile made by Google will also help you see other useful information about your app’s performance. (I would encourage you to study these docs!)
<img src="https://f.hubspotusercontent40.net/hubfs/5621549/IMG_0218.png" alt="Dev Talks: How to Make Good Animations" width="400" loading="lazy" >We are getting 62 FPS: that is very smooth!
If you have made it this far, good job! Now you are ready to start practicing and bringing to life everything your mind is capable of imagining.
<h2 >More Resources&nbsp;</h2>
If this article has piqued your interest in animation or convinced you to try UI animation in your web development, you’re in luck. The internet is full of powerful resources -- like this article on <a href="https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" >moving elements</a> or this one on <a href="https://developer.chrome.com/docs/devtools/evaluate-performance/reference/" >performance evaluation</a> -- and Jobsity’s team of top LATAM developers is standing by to talk UI needs, web development, or animation itself. Just reach out and ask; we love to connect and would be honored to help!
--
If you want to stay up to date with all the new content we publish on our blog, share your email and hit the&nbsp;<a href="https://www.jobsity.com/blog">subscribe</a>&nbsp;button.
Also, feel free to browse through the other sections of the blog where you can find many other amazing articles on:&nbsp;<a href="https://www.jobsity.com/blog/category/tutorials">Programming</a>,&nbsp;<a href="https://www.jobsity.com/blog/category/it">IT</a>,&nbsp;<a href="https://www.jobsity.com/blog/category/outsourcing">Outsourcing</a>, and even&nbsp;<a href="https://www.jobsity.com/blog/category/management">Management</a>.
<a href="https://www.jobsity.com/contact-us"><img src="https://5621549.fs1.hubspotusercontent-na1.net/hubfs/5621549/CTA_2.png"/></a>

Written by Gabriel, Front End Developer
As a dev working in the field of UI, I’ve come to appreciate the use of good animations as a powerful accent to making web properties really special.&nbsp;


The Blog

Tutorials

Subscribe for updates

Leave your worries about hiring &
retaining costly developers behind.

We provide you with top-level nearshore developers from around the world

The Blog

Tutorials

Subscribe for updates

Leave your worries about hiring & retaining costly developers behind.

Leave your worries about hiring &
retaining costly developers behind.