teleren/devto huggingface dataset:
Ansible For Everyone - Part 1
Tags: devops, webdev, productivity, opensource
Published: 2022-05-21 09:56:33

## DAY 32- Ansible For Everyone - Part 1 - Day Thirty Two

[![Image tweet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49arpnjjyf762k9w8vuz.png)![Image Cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxhn8l032kz11tdq6urc.png)](https://twitter.com/intent/tweet?text=Ansible%20For%20Everyone%20-%20Part%201%20%2C%20a%20blog%20by%20%40anuvndhs%0A%0Ahttps%3A%2F%2Fdev.to%2Faws-builders%2Fansible-for-everyone-part-1-5998%20)

[100 days of Cloud on GitHub](https://github.com/anuvindhs/100daysofcloud) - [Read On iCTPro.co.nz](https://ictpro.co.nz) - [Read on Dev.to](https://dev.to/anuvindhs)

------


## Why you should read this blog  Series?
If you are working on NetworkOps, SecOps, DevOps, ITOps & anyone who wants to automate their infrastructure. 

## Why Ansible?
Automation Automation Automation 
![Image automation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwed5wey5y9rmkc8kblc.png)
 


- Orchestrate complex processes on an enterprise scale.
- Simple Automation and Management.
- No Agent - Agentless.
- Ansible executes locally 
- **Open Source** solution for automation.
- Works on both Windows and Linux.
- Can be used on Public cloud and On-Prem.
- Cloud, Network & security automation.

![Image Playbook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5eg18e6lld4tcnk4galx.png)


### Ansible-core 

- In simple it's the CLI of ansible. 

### Playbook
- YAML templates are used to deploy the required infrastructure. 

- Components of Playbook are Plays, Modules, Plugins, Inventory

#### Plays
- Top-level specifications for a group of tasks

#### Modules
- Most of the Modules are written in python and in windows it uses Powershell. These are the components with internal logic.

#### Plugins
- It enables the expansion of Ansible features.

### Inventory 
 Multiple playbooks

### Roles
- Reusable Playbooks

### Collections
-  Collections can have Modules, playbooks, Roles, Plugins Docs, and Tests. 



{% embed https://dev.to/aws-builders/ansible-for-everyonepractical-part-2-58a5 %}

{% embed https://dev.to/aws-builders/ansible-for-everyone-ansible-playbooks-part-3-2dgj %}


----------

**✅Connect with me on [Twitter](https://twitter.com/intent/follow?ref_src=anuvindhs&screen_name=anuvindhs)
 🤝🏽Connect with me on [Linkedin](https://www.linkedin.com/in/anuvindhs)
🧑🏼‍🤝‍🧑🏻 Read more post on [dev.to](https://dev.to/anuvindhs) or  [iCTPro.co.nz](https://ictpro.co.nz)
💻 Connect with me on [GitHub](https://github.com/anuvindhs)**

----------
{% user anuvindhs %}
For those who have trouble setting up Datadog RUM
Tags: sre, datadog, observability
Published: 2022-05-21 09:53:27

## Introduction
If anyone has trouble setting up Datadog RUM, I would like to tell them, **"The setup code for JS/NPM version has some incorrect."** I have previously texted Datadog support about the feedback, but it has not been fixed, so I wrote it.
![Setting page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qutymdwou8cyqjne3oxj.png)
 
 
### 1. Typo in the snippet
As you can see in the screenshot, a snippet is provided as a sample, but unfortunately, a typo has. 
![Sample Snipet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0aat6e5eaahnjumwxr5n.png)
 

Look at line 3, the curly bracket `{` has been used, `datadogRum.init({.`
But the `}` never has been stated in the snippet.

Here is the collect snippet.
```javascript
import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
    applicationId: 'hoge-hoge-hoge',
    clientToken: 'hoge-hoge-hoge',
    site: 'datadoghq.com',
    service:'temp',
    
    // Specify a version number to identify the deployed version of your application in Datadog 
    // version: '1.0.0',
    sampleRate: 100,
    replaySampleRate: 100,
    trackInteractions: true,
    defaultPrivacyLevel:'mask-user-input',
});
    
datadogRum.startSessionReplayRecording();
```

### 2. Disabled Session Replay
If you wanna disable session replay, you also have to be careful with this setup page. There is a toggle, Session Replay Enabled, which seems to allow the snippet to be edited to disable the function.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m4y3n2ii9opllg3v63gg.png)
 
  
However, only this setting doesn't seem sufficient...😅 You also must set `replaySampleRate: 0`

**[References](https://docs.datadoghq.com/real_user_monitoring/session_replay/#how-do-you-disable-session-replay
)**
> Set replaySampleRate to 0 to stop collecting the RUM Session Replay plan which includes replays, resources, and long tasks.

That's why here is the collect snippet!
```javascript
import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
    applicationId: 'hoge-hoge-hoge-b2e3-40e049c84c81',
    clientToken: 'hoge-hoge-hoge-881b380180c1171d17',
    site: 'datadoghq.com',
    service:'temp',
    
    // Specify a version number to identify the deployed version of your application in Datadog 
    // version: '1.0.0',
    sampleRate: 100,
    replaySampleRate: 0,
    trackInteractions: true,
);
```

Happy Monitoring!
Using CSS Grid to put elements on top of each other
Tags: css
Published: 2022-05-21 09:28:24

This is a very cool trick I learned recently.

## The problem
I have a card that contains an image and some text. The size of the image depends on the width of the card. The text could be any length.

When you hover on the card it fills the whole card with a background colour and shows some other text.

## The non-grid solution
The obvious solution is to have a div for the card and a div for the hover and use position absolute to put them on top of each other. However, the card has to be long enough to fit all of the hover text on, even if it takes up more space than the image and text on the card. Which is a problem because an absolutely positioned element doesn't take up space.

The solution is to go to JavaScript, get it to work out the heights of both divs and set the card height to be whichever is taller. It's a pretty simple script and not too much work.

Except that the card image was being lazy loaded and wasn't at the top of the screen. And I had multiple cards. At this point the JavaScript was looking more complicated and I went back to the drawing board (ie Google) to see if there was another way of putting two divs on top of each other. And there is!

## The grid solution
[CSS Grid is pretty cool and will respect the position of your element on the grid, even if it's absolutely positioned.](https://dev.to/nicm42/using-position-absolute-in-a-grid-1apg) Which we can absolutely use.

For this solution we need a container that has both the card contents and the hover div inside it:
```html
<div class="card">
  <div class="card-contents">
  <div class="card-hover">
  </div>
</div>
```

Then we can make the `.card` into a grid:
```css
.card {
  display: grid;
}
```

Since we haven't told it how many rows or columns we want on our grid it works it out for itself. Since we have two elements inside it it's implicitly created two rows, one for the contents and one for the hover.

All we have to do is to tell it we want them both on the first row:
```css
.card-contents,
.card-hover {
  grid-row: 1;
}
```

Except now it's implicitly created two columns instead... But that's easily fixed by telling it we also want them both on the first column:
```css
.card-contents,
.card-hover {
  grid-row: 1;
  grid-column: 1;
}
```

And that's it! By the magic of CSS grid, both divs are on top of each other. You can see in this CodePen, where I've added some extra CSS for the hover effect and also to make it look not too terrible. And I've made the card slightly transparent so you can see the hover behind it without needing to actually hover.

{% codepen https://codepen.io/nicm42/pen/wvpNVWZ %}
How To Loop Over An Object In Javascript
Tags: javascript, object, webdev, loop
Published: 2022-05-21 08:44:02

**1.** Use Object.keys to get an array of keys of the object and loop over it.

```js
let myObj = {
  name: 'Shuvo',
  tech: 'javascript',
  hobby: 'learning javascript',
  favFood: 'beef steak!',
};

// way: 1
 Object.keys(myObj).map((key) => {
   console.log(`key: ${key} value: ${myObj[key]}`);
 });


// output

// key: name value: Shuvo

// key: tech value: javascript

// key: hobby value: learning javascript

// key: favFood value: beef steak!


 ```

**2.** Use For...in Loop to over the object.

```js 
// way: 2
for (key in myObj) {
  console.log(`key: ${key} value: ${myObj[key]}`);
}

// output

// key: name value: Shuvo

// key: tech value: javascript

// key: hobby value: learning javascript

// key: favFood value: beef steak!
```

**3.** Use Object.values() method. In this time you will get all the value of the remaining keys.

```js
// way: 3 

Object.values(myObj).forEach((value) => {
  console.log('value: ', value);
});

// output
// value: Shuvo

// value: javascript

// value: learning javascript

// value: beef steak!
``` 

**4.** Use Object.entries() method. It will return array of key and value

```js


// way: 4 

Object.entries(myObj).forEach((arr) => {
  console.log('arr: ', arr);
});

// output
// arr: ["name", "Shuvo"]

// arr: ["tech", "javascript"]

// arr: ["hobby", "learning javascript"]

// arr: ["favFood", "beef steak!"]
 ```

And that's it.Play with it more :rocket:
Netflix clone in angular using streaming with nodeJS
Tags: node, angular, react, webdev
Published: 2022-05-21 07:56:58

we make streaming app like in netflix video player.
first make server with express.

## app.js

```
const express = require('express')
const fs = require('fs')
const path = require('path')
const app = express()
 
app.get('/video/:id', async (req, res)=> {
const file=await VideoModel.findOne({_id:req.params.id})
const path = 'assets/videos/'+file.filename;
const stat = fs.statSync(path)
const fileSize = stat.size
const rangeSize = req.headers.range
 
if (rangeSize) {
const parts = rangeSize.replace(/bytes=/, "").split("-")
const start = parseInt(parts[0], 10)
const end = parts[1]
? parseInt(parts[1], 10)
: fileSize-1
 
const chunkSize = (end-start)+1
const file = fs.createReadStream(path, {start, end})
const head = {
'Content-Range': `bytes ${start}-${end}/${fileSize}`,
'Accept-Ranges': 'bytes',
'Content-Length': chunkSize,
'Content-Type': 'video/mp4',
}
 
res.writeHead(206, head)
file.pipe(res)
} else {
const head = {
'Content-Length': fileSize,
'Content-Type': 'video/mp4',
}
res.writeHead(200, head)
fs.createReadStream(path).pipe(res)
}
})
 
app.listen(8000, function () {
console.log('Server is listening on port 8000')
})
```

## app.component.ts

```
import {Component, OnInit} from '@angular/core';
import {Observable} from "rxjs/Observable";
import {HttpClient} from "@angular/common/http";


@Component({
  selector: 'app-root',
  template: 'app.component.html'
  })
export class AppComponent implements OnInit {
    apiUrl:string="http://localhost:8000/video/";
    id:any=2;

    constructor() {
    }

    ngOnInit() {
      
    }
}
```

## app.component.htnl

```
<div class="row mx-3">
<div class="col-md-3 col-md-offset-3">
<video style="height: 500px; width:800px;" id="video" controls muted="muted" autoplay>
<source src=`{apiUrl}+{id}` type="video/mp4">
</video>
</div>
</div>
```
play viseo according your id if you have make video list fetch video list and show and select video and play it.
dofeedbackin A platform to connect database to your feedback forms
Tags: discuss, javascript, webdev, productivity
Published: 2022-05-21 07:43:19

**dofeedbackin**

A platform to connect the database to your feedback forms for your web applications ( for any framework)

I am launching it soon..

https://dofeedbackin.netlify.app

Support me in building new projects
https://www.buymeacoffee.com/aravindkumar309
What are Template Literals in JavaScript
Tags: javascript, beginners, programming, tutorial
Published: 2022-05-21 07:36:20

## What are Template Literals?

In the ES6 version of JavaScript, template literals were introduced. Before ES6 if we had a variable that we wanted to use within our strings we would have to do something like the following example.

```
function printDrink() {
  var drink = "Tea";
  return "My favourite drink is" + " " + drink;
}
console.log(printDrink());
//Returns ---> My favourite drink is Tea
```

In the above example, we create a function declaration called printDrink. Inside the function, we create a variable called drink. We assign to the variable the string “Tea”. The function returns a string which uses concatenation (the addition symbols) to print out a string and the drink variable. When the function is invoked we get the string returned.

Template literals offer a clean way to interpolate (inject) the variables or expressions into the string as opposed to having to do the concatenation. A template literal is enclosed in back-ticks instead of the usual double or single quote marks. String interpolation describes when variables are injected into a string. The variable you wish to interpolate is wrapped inside curly braces and started with a dollar sign. The variable itself is placed inside the curly braces.

Let’s look at the prior example but this time using a template literal.

```
function printDrink() {
  var drink = "Tea";
  return `My favourite drink is ${drink}`;
}
console.log(printDrink());
//Returns ---> My favourite drink is Tea
```

In the above example we keep the same function declaration and drink variable. This time we use a template literal. The template literal is enclosed within back ticks and returns the string. Using interpolation the drink variable is injected into the template literal. When the function is invoked we get the same return value.

## Multi line strings

Another useful feature of template literals is that we can span our string over multiple lines. Prior to ES6 you would have to either use string concatenation or a new line character (\n) to achieve this. I briefly show an example of this below:

```
var ourString = "First line\nSecond line\nThird line\n";
console.log(ourString);
//Returns ---> 
First line
Second line
Third line
```

With template literals we no longer have to worry about this. If we want to create a multi line string we can do so by enclosing the string in back ticks and separating the lines.

``` 
let ourString = `First line
Second line 
Third line`;
console.log(ourString);
//Returns ---> 
First line
Second line
Third line
```

I hope you enjoyed this article! If you would like to watch a video tutorial it is available here.
{% embed https://youtu.be/f4KHwBGFwAo %}
Useful Visual Studio Code Extension for Developing Chromium
Tags: chromium, vscode, opensource
Published: 2022-05-21 07:27:49

## Overview

Sometimes when you are developing Chromium, you want to explain to others what part of the code you are working on.

GitHub has a plugin called Copy GitHub URL that allows you to get the permalink of the code you are editing in VS Code so that you can share this permalink.

However, Chromium is mainly managed by Chromium Code Search, and we want the permalink of Chromium Code Search. So this time, I made a plugin for this purpose.


## Demo

Here is a demo.

![Example of VS Code Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae2z7utp8b26hwazzbjn.gif)

What this plugin does is simple: it "generates permalinks in Chromium Code Search for the selected lines from the launcher.

I like the features that generate a permalink depending on the branch, and selecting multiple lines is also considered.

## Conclusion

This plugin for creating permalinks has been very useful for crbug and for explaining the relevant parts of the code when writing proposals for GSoC.
If anyone considers contributing to Chromium, I'm happy if you use this plugin.
If you find any problems, or if you can confirm that it works on Windows, I'd appreciate it if you could send a mention to [@negibokken](https://twitter.com/negibokken) or add it to the issue list in the [repository](https://github.com/negibokken/chromium-code-search-permalink-vscode-extension).

([Japanese version](https://blog.bokken.io/articles/2022-05-21/vscode-extension-chromium-code-search-permalink.html))
100 Days of Code
Tags: 100daysofcode, javascript, programming
Published: 2022-05-21 07:24:59

Hello Everyone,

I am currently working as a Full Stack Developer with focus on Angular, JS, Java and .Net Core, yet sometimes I find myself skeptical in the fundamentals of development. Hence, I have been meaning to improve my skillset starting from the basics.
 
Few months back I came across this post about 100 Days of code and saw a lot of people posting about how the consistency and patience along with hard work has helped them in achieving the desired target and learning with the utmost enthusiasm.

I, too will be starting the 100 Days of code challenge from today and looking forward to share my updates and progress over the time.
多特工作室2022业务范畴：写盘 搭盘 开发盘 开盘 二开盘，关联IDC，BW、SG信用盘
Published: 2022-05-21 07:17:51

2022独家开发双赢环球运营级源码BW，winsg无后门，关联IDC,MOA等

2022独家开发双赢环球运营级源码BW，winsg无后门，关联IDC,MOA等
另有各类时间，电竞，盘商城，BC伪装聊天软件，K线，外会，海外盘等

并支持各种个性定制，二开，搭建，仿站，修复维护
多特工作室2022业务范畴：写盘 搭盘 开发盘 开盘 二开盘，关联IDC，BW、SG信用盘
Tags: 信用盘口搭建, 盘口搭建出租, 28pc大富赛车时时彩, 杏彩迪士尼乐购
Published: 2022-05-21 07:05:14

2022独家开发双赢环球运营级源码BW，winsg无后门，关联IDC,MOA等

2022独家开发双赢环球运营级源码BW，winsg无后门，关联IDC,MOA等
另有各类时间，电竞，盘商城，BC伪装聊天软件，K线，外会，海外盘等

并支持各种个性定制，二开，搭建，仿站，修复维护

 欢迎各位老板连系telegram电报          duoteJG
A brief introduction to Dart
Tags: flutter, dart, webdev, programming
Published: 2022-05-21 06:37:12

Hey folks 👋  I am Denyse, this series is first chapter I want to write about flutter in the future i'll write more and more cool things about Dart and Flutter we'll spend a little time to take a look into Dart programming languages.
I wanted to jump straight to flutter ... but wait 🤔 I couldn't talk about flutter without talking about dart first  

## So what is Dart?

> Dart is a programming language designed for client development, such as for web and mobile apps. It is designed by a huge and powerful company ✨ company called **Google** and also can be used to build server and desktop applications. It is a class-based, garbage-collected language with C-style syntax.
Dart is a client-optimized language for developing fast apps on any platform. Dart was created by Google and first time it appeared was October 10, 2011.


Fun fact about it 😂, first stable version of Dart wasn't 1.0.0, it was 0.8.10-rev.3.29803.

In Dart SDK Tools contain these tools that necessary for development applications:
1. DartVM - Dart Virtual Machine.
2. dart2js- Dart to javascript (web use only) for deployable Javascript.
3. dartdevc - Dart to javascript(web use only) for testing purpose.
4. dartfmt - Tools formatter dart code
5. dartanalyzer - Tools help analyze warning and error code that are specified in dart language. DartPad and IDEs such as Android Studio or VS Code are use the same analysis engine that dartanalyzer provide
6. DartDoc - The API documentation generator (using for write package mostly)
7. pub - Dart package manager (it's like npm or yarn or pnpm). We can use pub tools for manage Dart packages.

What do we mean by Dart fast **apps** , here we mean Dart's speed to mean Dart can compile at both **Run time(JIT)** and **Ahead of Time (AOT)**

![GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0iy19xz3sj77cuol6z3.gif)

## What is AOT or JIT ?


![JIT and AOT description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xy50hx6e9gk0bw90uus.png)
 

- The _**JIT**_ means or **development mode** Flutter provide cools features which are **hot-reload** and **hot-restart** 😊 that help you see UI changes when you change on code. With that is lots of tools that help you debug.
- The _**AOT**_  or **release mode** your code is compiled to native code for better **performance**, minimum app size and remove other stuff that useful in dev mode.


Wanna know more about dart? head to [Dart documentation](https://dart.dev/ ) and stay tuned to get more updates about flutter and dart ...
A gunplot-friendly tool for GeoMap
Tags: gnuplot, python
Published: 2022-05-21 06:32:00

Unlike other plotting alternatives (e.g., ggplot2), gnuplot does not provide built-in tools for GeoMap. Therefore, we need to prepare a polygon files manually.

Inspired by the script shape2txt, I created a project which can create simply txt file from shapes files for the ease of use in gnuplot.

See more at [github](https://github.com/ChenZhongPu/gnuplot-geomap).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlxjfsaaerzq33cesb7p.png)
await, then, return?
Tags: help, javascript
Published: 2022-05-21 06:21:04

Hi,

I'm using **Sharp** for compressing uploaded user images. I want to be sure that my approach is safe and performs in theory for all cases.

I'm rather hesitant, as I didn't set proper testing yet and for now I didn't deploy the app but doing big refactoring on the code then I will test everything the next days.

I am hesitant if my code is correct, and would like to hear from you also about it. Here it is:

```js
const width_ = 200
try {
	thumbnailBuffer = await sharp(originalBuffer)
		.metadata()
		.then(({ width }) => {
			if(width > 400) {
				return sharp(originalBuffer)
					.resize(Math.round(width * 0.5)).toBuffer()
			} else if(width > 200){
				return sharp(originalBuffer)
					.resize(width_, { fit: 'inside' }).toBuffer()
			} else {
				return undefined
			}
		})
} catch (error) {
	req.log.error(`post/listings#postListingHandler#sharp: ${error.message}`)
}
```

Will `thumbnailBuffer` contain a value of a new buffer or a promise or this whole thing is incorrect ?

Thanks a lot !!
Self-documentation of Hire +Plus: V1 (1)
Tags: webdev, react, beginners, writing
Published: 2022-05-21 06:15:17

## What I cover: 

- Intro
- Tools
- Project

---

## Intro
So I'm planning to create a Hiring/JobBoard platform for employers & employees (a developer-focused, fun demo project to put in my portfolio). 

My idea is to have two sections for employers and employees. Employers could post their jobs, search for candidates, and manage candidates using a built-in Trello-like management board. Employees could view job postings from hiring companies, create and manage their profiles, and apply for the job through the company's website.

I thought it would be fun to share my progression. I called it Hire +Plus. I'm using React with `react-router` and `Styled components`, but I'll be using more tools as I progress. I want to add `Typescript` and dive into having a more professional environment. 

## Update, tools I'm using: 
`React`, `React-Router`, `Tailwindcss`, `Typescript`, and `firebase` for the database and authentication, and `cypress` for testing.

## What I'm using to help me
Johannes Kettmann's articles and videos on Youtube will help me with this :) along with being subscribed to Andrei Neagoie's courses on ZTM. 

## Project glimpse
Here's what my folder structure looks like right now. 

![react folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll8cogo2u3xw4xfpiv5u.png)

My `index.js` file handles the routing. React Router has a way of nesting routes. Going to either `"/"` or `"launch"` will render my Launch component. Feel free to look more into this in `react-router`. I know I sure will lol. 

![index.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8l3ujnhs6qvmbfgqzf7.png)

The `launch` component renders two split sections. The "get started" buttons will re-direct the user to the appropriate signup/sign-in page associated with the **employee** or **employer**. It is the first page that shows when the app starts up. Those weird tag names are the styled component classes.

![launch page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bypt1o7fcsb00m2oery.png)


You might see the auth routes in the folder structure, but I haven't coded that section yet.

That's all for now folks. Stay tuned! 

feel free to check out the [source code](https://github.com/AjeaSmith/hire-plus-v1) for styles and more.