teleren/devto huggingface dataset:
New in Ansible: Ansible Automation Platform 2.2
Published: 2022-05-31 12:40:09

Red Hat Ansible Automation Platform 2.2 is out! It offers new features, expanded capabilities, and an enhanced enterprise automation experience, that further solidifies Ansible Automation Platform as THE enterprise IT automation solution, including:

✔️ New **automation topolofy viewer** in automation controller, allowing you to graphically visualize how automation nodes are connected to each other.

✔️ **Digitally signed Certified Ansible Collections,** enabling you to execute certified and compliant automation anywhere in your enterprise to further enhance security.

✔️ **Updated Ansible developer and creator tooling:** ansible-navigator, ansible-lint, and VSCode language server support.

✔️ **Enhanced network automation Collections:** supported execution environments that Red Hat builds are now included by default with the AAP bundled installer.

✔️ **Automation services catalogs** are now available **on-premise**, giving automation creators and business users self-service access to their automation across physical, virtual, cloud, container, and edge environments.

✔️ **Streamlined reporting and analytics of automation data** with Red Hat Insights, giving you actionable metrics and dashboards to help identify, troubleshoot, and resolve operational, business, and security issues across your entire ecosystem.

✔️ Red Hat Enterprise **Linux 9 support.**
 
We know migrating to the new version is challenging, but it’s also really rewarding since AAP2 brings so much to look forward to. Explore the new features [here](https://www.ansible.com/blog/whats-new-in-ansible-automation-platform-2.2).
JavaScript side-effects
Tags: programming, python, go
Published: 2022-05-31 12:35:19

Programming was always fun and exciting for me most of the time until I started using JavaScript, man it hurts my mind sometimes, it was so fast-paced that feels like I didn't learn enough yet about it.

In the JS world, they give you an overwhelming amount of options to do the same task that certainly you get confused about what to use.

Can't say the same for Python or Go
Editor Support for ReasonML in VSCode with Melange
Tags: reason, vscode
Published: 2022-05-31 12:22:54

I have been trying for a long while now to work with ReasonML files in VSCode and get some syntax highlighting. This has been a problem since [ReasonML](https://reasonml.github.io/) on the frontend has moved on to [Rescript](https://rescript-lang.org/). The solution would be using [Melange](url) but I could not get the editor highlighting to work. I have a bunch of old ReasonML projects that I still refer to so losing the editor support has been less than ideal. The code still works but you are stuck relying on the terminal output for errors. 

I finally got it to work with the help of [@zecklar](https://discord.com/channels/235176658175262720/825155604641218580/981161512905371688) on the ReasonML Discord forum.

Here is the solution that works.

1. Install OCaml plugin https://marketplace.visualstudio.com/items?itemName=ocamllabs.ocaml-platform
2. Build your project esy build
3. Launch VSCode in your esy dev environment `esy code .`
4. On the lefthand side, click OCaml extension icon
5. Click "Select sandbox"
6. Select "Custom" from the dropdown
7. Pass the flag, the input box should contain $prog $args --fallback-read-dot-merlin
8. Voila, at least typehints/navigation etc seem to work

You can try it with this [repo](https://github.com/idkjs/melange-editor-support).

This isnt working for rescript yet but I will update you if I figure it out.

Many thank, @zecklar.
Routing in Reactjs v 16 +
Tags: react
Published: 2022-05-31 12:19:39

hello react people good day. Please can I get any help; like a reference to docs or vids where I can learn how routing and redirecting is done in the new versions of react?
I have tried searching the react documentation online but maybe I don't get how it works but it doesn't bring up anything I need when I type any of the words "routing" or "redirect"
This Week I Learned - 2022 #Week 22
Tags: javascript, jest
Published: 2022-05-31 12:12:28

- [`mockResolvedValue`](https://jestjs.io/docs/mock-function-api#mockfnmockresolvedvaluevalue) is for asynchronous functions that return promises. Instead, [`mockReturnValueOnce`](https://jestjs.io/docs/mock-function-api#mockfnmockreturnvalueoncevalue) is for synchronous functions.
Isn't NextJS has some unnecessary features regarding css ?
Published: 2022-05-31 11:48:22

- Like i must use **css selector/id** to html tag in order to style in name.module.css file which i find really unnecessary. (Cannot able to edit the html tag without selector/id)
- Inorder to use css in JSX, i must import css file as object reference like styles.container,styles.row......

Is it neccessary to change this from react or doing this can boost the performance ? 


I dont have any idea why they did this. Do you have any idea or are you feeling fine with next js css convention ?
Shimmer Loading with Provider
Tags: flutter, shimmer, provider, dart
Published: 2022-05-31 11:36:59

This article will help you to get started with [shimmer ](https://pub.dev/packages/shimmer)effect when loading with state management using provider. The final app looks as follows:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swual14slqek7sa9pzrq.gif)

## Provider
Provider is built by the community for the effective state management. Although it is not developed by google, it encourages to use it. It is easier to use and manage which is basically a wrapper around the Inherited Widgets.

## Shimmer
Shimmer is loading effect that is used to add beautiful animation when the data is loading from server. In simple words, it is the loader like Circular Progress Indicator available in the Flutter framework.

## Let’s Dig In

First of all, put all these dependencies in your _**pubsec.yaml**_
`shimmer: ^2.0.0
provider: ^6.0.3
http: ^0.13.4
`
First create a New Flutter Project and run your example app. Then create a new folder named response inside the lib folder . Inside the response folder create the new dart file named response_data.dart. Here we will create the model for our api. We are getting test api from this [link](https://reqres.in/api/users?page=2).

_response_data.dart_
{% gist https://gist.github.com/nbnD/1e37fc61417234d043b4251047c7e5cb %}

Then we will create a provider class where we fetch the api.

_getdata_provider.dart_

{% gist https://gist.github.com/nbnD/f78d89a222372fa806310bafd96062ae %}

Then, we create the widget that includes how our shimmer layout gonna be.

_shimmer_layout.dart_

{% gist https://gist.github.com/nbnD/f5a346ced8778d7d7b1799e0e23a2119 %}

Finally we will create the Homepage.

_homepage.dart_

{% gist https://gist.github.com/nbnD/e0e180d1dbc0ae3167babca5848d18a5  %}

At last our main.dart file.

_main.dart_

{% gist https://gist.github.com/nbnD/1853f818d2ba98323f7dba3a08190ecd %}


## Lets get connected

We can friends. Find in [Facebook](https://www.facebook.com/nabin.dhakal.714/), [Linkedin](https://www.linkedin.com/in/nabindhakal/), [Github](https://github.com/nbnD), [Instagram](https://www.instagram.com/nbn_d_/), [Medium](https://medium.com/@nabin.dhakal).

## Conclusion
I hope this article is helpful to you and you learned new things. I have used various things in this article that might be new for some of you.

If you learned something new or want to suggest something then please let me know in the comment.

If you loved the article click on <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1647001545310/47WUcJeSz.PNG"> icon which provides motivation on delivering you all with the new things.

Also follow to get updated on exciting articles and projects.

Learning by sharing gives great impact in learning process and making the community bigger and bigger.

Sharing is a magnet that attracts other enthusiast towards you.

Hence, lets take a small step on making our learning community bigger.

Share this article with your friends or tweet about this article if you loved it.

## Get Full code at

{% github https://github.com/nbnD/shimmer_effect %}
AWS Amplify: How to add SSR with API call on dynamic page?
Tags: nuxt
Published: 2022-05-31 11:01:13

I used AWS Amplify to host a NUXTJS site. SSR working fine for fixed page after creating a build with "npm run generate".
But when I set the build command "npm run build" to build server side rendering. I don't know where to add 'npm start' in Amplify, so that the Nuxt site run.
Can anyone help?
What was your Dev Journey?
Tags: beginners, discuss, devjournal, programming
Published: 2022-05-31 10:50:21

Hi all!

I'm a fairly new currently self taught computer science aspiring to be a game dev, but testing the waters as a web dev.

I've been teaching myself for roughly 3-4 months trying to grasp the basics and bouncing from one Udemy course and YouTube video to another.

Last week, I took on a task that was honestly a bit above my skill range. Creating a fully functional Weather Forecast app with React.js. This would be my first solo project with little to no handholding. I wanted to test out how much I've learnt and see if I could google my way through the challenges!

I'm still working on it but if you're curious, check the repo out on [GitHub](https://github.com/TheKillerRex27/Weather-App-Project/). Feedback, comments and general motivation would be much appreciated.

I'm determined to make more complicated projects and perfect my skills so I can start marketing them.

Well that's my journey so far. Drop yours below, whether you've been in the dev life for decades or if you just bought a course on Udemy yesterday, I'm genuinely curious!

Thanks for reading and good luck to you all.
Compose — How To Draw Animated Emojis That Users Will Love
Tags: android, animated, emojis, jetpackcompose
Published: 2022-05-31 10:48:18



**Wanna learn how to draw animated emojis using jetpack compose?**

You will have a basic idea of how Canvas works and how to make use of its basic functions to draw various shapes. 

Today we are going to implement 6 emojis in Jetpack compose. We will make use compose canvas to draw them.

1. Confused
2. Happy
3. Cool
4. Exclamation
5. Long tongue
6. Sad

At the end of this article, you will have a basic idea of how you can implement emojis shown below in your applications.


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

You can find the complete source code of all the above animations on [Github](https://gitlab.com/cp-hardik-p/coolemojis).

To learn the implementation, check out the full article on [blog.canopas.com](https://blog.canopas.com/compose-how-to-draw-animated-emojis-that-users-will-love-2828f862d191)
AWS Aurora S3 Select
Tags: aws, mysql, terraform, productivity
Published: 2022-05-31 10:17:10

# AWS Aurora a 3-day experience.

## Intro:

So this week I had the task of migrating an old DB that is running on an EC2 Instance into RDS. Now I have done this many times but this was the 1st time I have used Aurora. What followed was a lot of fun but also me banging my head on a desk for hours reading AWS docs as my developer said a certain feature wasn't working.

## The fun:

I'm not sure if it's just me who enjoys writing TF files but I had a real blast this week just getting TF working to deploy the Aurora Cluster and instance along with extraneous infra (DNS, KMS etc). Then this was also the 1st pipeline in our team that was going to touch all 3 of our environments. (Work in media and 95% of the team have never heard of TF and a pipeline before) Due to this, I had to configure a dynamic backend for the TF state. After doing some research and trial and error I came across Terragrunt for the 1st time and what a joy to learn this was and has changed the way I work for the better (separate post coming later).

## The bad:

So after Aurora had been spun up and Id migrated all the data and configured the permissions as needed. I handed over the credentials and such to the developer of the app so he could do some preliminary testing to ensure the application was still working. During his testing, he noticed that he could not run the `LOAD DATA LOCAL INFILE` function in SQL.

No problem after some research I found the solution and this was to use the `SELECT CONTENT INTO OUTFILE S3` So I created an S3 bucket and the relevant IAM roles and attached the roles to AURORA and updated the parameters in parameter group as required. Then passed over the commands back to the developer.

He could then run the commands as expected as the RDS_SUPERADMIN user but when it came to using normal user created on the DB he kept getting permission denied errors. So after some more research, I granted the specific user `AWS_SELECT_S3_ACCESS` permissions and then told the developer to try again.

About 10 minutes later he comes back and stated still had the same issue. After confirming the user did indeed have the relevant permissions I spent the next day trawling through all AWS documentation I could find related to Aurora and S3 only to find a **HINT** that says you **MAY** need to run `SET ROLE ALL;` prior to your query.

Once I found this I was relieved and jumped with joy as I tested it myself to find it working. Then came the wave of anger and frustration as to why on earth was this hidden as a subtle hint and why would they suggest that you might not need to run this in some cases as it simply does not work without it!

## Conclusion:

However, that concludes my 1st ever blog post. I learned a lot this week and had a lot of fun doing so when the key information that is required isn't hidden away as a hint that you may or may not need to run. But I also stumbled across Terragrunt and learnt a lot from it.
use chart.js with node
Tags: node, webdev, tutorial, chart
Published: 2022-05-31 10:13:44

With nodeJS you can build a web server which can serve a service or a web app. For example:

```
var http = require('http');

//create a server object:
http.createServer(function (req, res) {
  res.write('Hello World!'); //write a response to the client
  res.end(); //end the response
}).listen(8080); //the server object listens on port 8080
```

Chartjs makes it easy to get a graph of some values. Here a example in HTML embedded:

```
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

<script>
var xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:140, y:14},
  {x:150, y:15}
];

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ticks: {min: 40, max:160}}],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});
</script>

</body>
</html>
```
You can dtermine the scale of the axis by:

```
 scales: {
      xAxes: [{ticks: {min: 40, max:160}}],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
```

It can be usefull to bring the chart feature to nodeJS for evaluations.
You can integrate this in a nodeJS-server by using a string(_html) for the chart-Call it self.

showChart.js
```
const fs = require('fs');
var express = require('express');
var app = express();
var path = require('path');
var Chart = require('chart.js');
var result =[3,6,9];
const port = 3000;

app.get('/', function(req, res){
    let _resLine = 'Events: ' + result;
    console.log('show chart:');
    console.log(_resLine);

    _html = "<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js'></script>"+
    "<canvas id='bar-chart' width='800' height='450'></canvas>"+
    "<script>"+
    "var logChart = new Chart(document.getElementById('bar-chart'), {"+
    "type: 'horizontalBar',"+
    "data: {"+
      "labels: ['res1', 'res2', 'res3'],"+
      "datasets: ["+
        "{"+
          "label: 'calls',"+
          "backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f'],"+
          "data: ["+result[0]+","+result[1]+","+result[2]+"]"+
        "}"+
      "]"+
      "},"+
    "options: {"+
      "legend: { display: false },"+
    "scales: {"+
      "xAxes: [{ticks: {min: 0, max:10}}],"+
      "yAxes: [{ticks: {min: 0, max:5}}],"+
     "},"+
      "title: {"+
        "display: true,"+
        "text: 'Events '"+
      "}"+
    "}"+
    "});"+
    "</script>";

    res.send(_html);
});

app.listen(port);

```
_run it with:_
node showChart.js

check it on:
http://localhost:3000/


refer to:
https://www.w3schools.com/js/tryit.asp?filename=tryai_chartjs_scatter
https://nodejs.org/api/synopsis.html
The Challenges of Building Multi Cloud
Tags: cloud, aws, azure, cloudnative
Published: 2022-05-31 10:07:46

[https://docs.multy.dev/blog/challenges-of-building-multi-cloud](https://docs.multy.dev/blog/challenges-of-building-multi-cloud)

Multi cloud has long been a contentious topic when you talk about cloud infrastructure. Infrastructure as code tools such as Terraform and Pulumi have made deploying to any cloud much easier - you can now use a single interface to deploy infrastructure to virtually any cloud environment. However, the effort of creating infrastructure for each cloud provider still requires significant expertise and time to get right, leading many to see it as a effort not worth taking.

In this blog post, we'll go over the potential consequences of running on a single cloud, the current options companies have when deploying cloud infrastructure and the common pitfalls.
What makes DevOps engineers so much more money than software developers? Are their daily responsibilities really so complicated?
Tags: discuss
Published: 2022-05-31 10:06:30

Most DevOps people I know are basically always on call. If something breaks, they have to fix it FAST because whole teams or customers rely on the infrastructure that they maintain. There is huge value in someone who can diagnose and fix a problem quickly. Let’s talk about the role of DevOps in our projects and daily work routine. 

It would be great to hear your stories!
useHistory - REACT ROUTER
Published: 2022-05-31 10:02:36

**useHistory**
React rendering lifecycle:

1. The Redirect component must be returned
2. The Redirect is then rendered
3. The URL is then updated
4. And finally the appropriate route is rendered.

React Router also provides a mechanism for updating the browser’s location imperatively: the Router‘s history object which is accessible via the useHistory() hook.

```
import { useHistory } from 'react-router-dom';
```
The history object that useHistory() returns has a number of methods for imperatively redirecting users. The first and most straightforward is history.push(location) which redirects the user to the provided location.

Consider this example which immediately triggers a redirect back to the / page after a user successfully submits a <form>:

```
import { useHistory } from `react-router-dom`
 
export const ExampleForm = () => {
 
  const history = useHistory()
 
  const handleSubmit = e => {
    e.preventDefault();
    history.push('/')
  }
 
  return (
    <form onSubmit={handleSubmit}>
      {/* form elements */ }
    </form>
  )
}
```
By enabling imperative updates to the browser location, the history object allows you to respond immediately to user input without having to wait.

You might be wondering how the history object works. Internally, the BrowserRouter‘s history object uses the html5 history API.

In brief, browser history is a stack that stores the URLs visited by the user and maintains a pointer to the user’s current location. This history API allows you to navigate through a user’s session history and alter the history stack if necessary.

In addition to history.push(), the history object has a few more useful methods for navigating through the browser’s history:

`history.goBack(`) which navigates to the previous URL in the history stack
`history.goForward()` which navigates to the next URL in the history stack
`history.go(n)` which navigates n entries (where positive n values are forward and negative n values are backward) through the history stack
Below, we can see how the .goBack() method is used to create a “Go Back” button:

```
import { useHistory } from `react-router-dom`
 
export const BackButton = () => {
  const history = useHistory()
 
  return (
    <button onClick={() => history.goBack()}>
      Go Back
    </button>
  )
}
```
Broke hand
Tags: javascript, webdev
Published: 2022-05-31 10:01:17

I have a broken left hand. It is frustrating. I have gone to css art and drawings. 

I was thinking learning tailwind inside out or lodash they suit my style. But I like animation. Pure css with my own jit purge is both sounding good. 

I always done seo which I take extremely technically. Any advice for help staying sane with a broken hand probably focus on css animations I love css not such a tailwind lover. Might hack my own system together . Any advice staying sane greatly appreciated. 

What do you think. Worth an ask thanks. Writing hurts but is a good way to get blood to the fingers.
Viral Moment | Made with React JS
Published: 2022-05-31 10:00:50

![Viral Moment | Made with Javascript | React JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1653327263/large_viral_moment_made_with_react_js_2f8eebfcbc.png "Viral Moment | Made with Javascript | React JS")


### Your Premium TikTok Intelligence Engine Fuel Your Growth. Make Your Brand Famous.

> The ViralMoment app shows you top TikTok content in your niche and the hottest viral trends. Learn the best time to jump on trends to gain 6x as many followers. We save you from endless scrolling and help you lift algorithm fog to see trends across all TikTok.
> 
> ### Analyze video, sounds, text on screen, audio transcription, logos and more. 
> 
> Hashtags and views only tell part of the story. With ViralMoment, you can now analyze every element of a video & image and truly develop a winning TikTok strategy for your brand.
> 
> ### We make it possible to search, analyze and report on User Generated Conversion.
> 
> ●  TEXT
> 
> ●  ACTIONS
> 
> ●  SYMBOLS
> 
> ●  LOGOS
> 
> ●  CAPTIONS
> 
> ●  HASHTAGS
> 
> ●  COMMENTS
> 
> ●  AUDIO
> 
> ●  OBJECTS

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Viral Moment on Twitter](https://twitter.com/withjavascript/status/1531574697950945281?s=20&t=p7GKDyyqdAZ2K2eHK184-Q)
 |
| Medium | [Viral Moment on Medium](https://medium.com/@madewithjavascript/viral-moment-made-with-react-js-9985a5880128)
 |
| Facebook | [Viral Moment on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02Uf2qAGMmSC3s1USMCZCXGwDEajkKvfHzUqFwz3j3MuHauPt1dpSGmu3hsJJZxwfKl)
 |
| Tumblr | [Viral Moment on Tumblr](https://madewithjavascript.tumblr.com/post/685759375146663936/viral-moment-made-with-react-js-your-premium)
 |
| LinkedIn | [Viral Moment on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6937340825626451968)
 |
| Pinterest | [Viral Moment on Pinterest](https://pin.it/5fHto8O)
 |


Filled Under:
 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with React JS](https://madewithjavascript.club/categories/react-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!