teleren/devto huggingface dataset:
Area of Circle: Explained
Published: 2022-08-17 04:30:00

In simple terms, we can say that a circle is a round-shaped figure that has no corners or edges. In geometry, a circle can be defined as a closed, two-dimensional curved shape in which the distance of all the points on the circle is same from it’s centre; this distance is also called radius of the circle. Few things around us that are circular in shape are bike wheels, a DVD and coins. We all know that the area of a circle is πr^2, but how? In this blog we’ll try to answer that question.
Let’s imagine taking a tomato and slicing it into 4 equal parts, now if we interlaced these parts as shown in the below image we’ll get a figure which barely resembles a rectangle.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dh1s5asvwfifnlpy7hv2.png)

But what if we take another tomato, slice it into 8 equal parts and interlaced them as shown in the below image? We’ll get a figure which somewhat more resembles a rectangle.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbfzos37539y6s5lftu0.png)

So if we divide the circle into even more smaller pieces, we can see that every time the shape becomes more like a rectangle.
But how small must we divide the circle before we get a perfect rectangle? It turns out that we can keep on dividing the circle into smaller and smaller pieces we can make but the answer is to divide the circle infinitely many times until we can’t distinguish the lines and eventually the circle can now become a perfect rectangle as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isfd8eqwzvj6f0wsfzda.png)

So, the area of the circle = area of rectangle = base x height
As we can see, the radius of the circle becomes the bases of the rectangle while the half of it’s [circumference](https://en.wikipedia.org/wiki/Circumference) becomes the height of the rectangle.
Therefore, area of circle = r x 2πr/2, where 2πr is the circumference of the circle.
This gives us the area of circle to be πr^2.
Getting set up to use ABAC for Lambda Functions
Tags: lambda, abac, aws
Published: 2022-08-17 04:28:22

---
title: Getting set up to use ABAC for Lambda Functions
published: true
description: The most important thing with building out any application is to think BIG. Build for ten users now and 10,000 users tomorrow. Having infrastructure that scales as your needs do is critical for user adoption—one of the many reasons we love a serverless approach and particularly AWS Lambda.
tags: Lambda, ABAC, AWS
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gblphmx9b97xoh991kpp.jpg
# Use a ratio of 100:42 for best results.
---
First, we need to set up a policy that has the right permissions to create Lambda functions using team-specific tagging. For this we are going to use team Alpha and team Beta.

```
{
   "Version":"2012-10-17",
   "Statement":{
      "Effect":"Allow",
      "Action":[
         "lambda:CreateFunction",
         "lambda:TagResource"
      ],
      "Resource":"arn:aws:lambda:*:*:function:*",
      "Condition":{
         "StringEquals":{
            "aws:RequestTag/Team":[
               "Alpha",
               "Beta"
            ]
         },
         "ForAllValues:StringEquals":{
            "aws:TagKeys":"Team"
         }
      }
   }
}
```
Next we create another policy to only allow Lambda API actions providing the resource tag is set to team Alpha.
```
{
   "Version":"2012-10-17",
   "Statement":{
      "Effect":"Allow",
      "Action":[
         "lambda:InvokeFunction"
      ],
      "Resource":"arn:aws:lambda:*:*:function:*",
      "Condition":{
         "StringEquals":{
            "aws:ResourceTag/Team":"Alpha"
         }
      }
   }
}
```
Then we need one more policy that gives permissions to `iam:PassRole` and `iam:ListRoles`.

It’s important to note that `iam:PassRole` does not support tag-based authentication, so the role will need permissions to ListRoles in order to create a function with existing execution using the AWS Console. It’s also important to note here that the `Resource` needs to be updated with a role-specific ARN from the setup process.
```
{
   "Version":"2012-10-17",
   "Statement":[
      {
         "Sid":"VisualEditor0",
         "Effect":"Allow",
         "Action":[
            "iam:ListRoles",
            "iam:PassRole"
         ],
         "Resource":[
            "Role specific ARN"
         ]
      }
   ]
}
```
Now, we need to create an IAM role, attach all 3 of these policies, and then tag the role with “Team: Alpha”. Finally, we can create a user and assign them the newly created role.

To read more on using ABAC for Lambda, Check out [Building for Scale and Traceability Using ABAC for Lambda Functions](https://lumigo.io/blog/building-scale-traceability-abac-lambda-functions/)
Scroll to specific element in react using useRef
Tags: react
Published: 2022-08-17 04:26:24

I have a firebase group chat ui and it have a search functionality in it. but when i click on search result then i want to go to that specific element (list element in my case). for that example i am using react hooks called useRef which take current element and we can get get it anywhere in our code .
```
import React, { useRef } from 'react'
const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop) 
// General scroll to element function 
const ScrollDemo = () => { const myRef = useRef(null) 
const executeScroll = () => scrollToRef(myRef)
return ( <> 
<div ref={myRef}>I wanna be seen</div> 
<button onClick={executeScroll}> Click to scroll </button>
 </> )}
```
here, now when i click on button then it will look for div with myRef and our view scroll to that div.
for reference in my code i have given github link - 
[github](https://github.com/Tejendrasrajawat/firebase-chat-app/blob/main/src/components/Group/G_chat.js)
Beautiful and pixel perfect React Icon Library
Published: 2022-08-17 04:08:00

React Iconly - Based on Iconly v2 icons

One of the phases in which we invest more time when we are developing or designing a web or mobile application is in choosing the icon pack that best suits the brand and what we want to convey, even creating our own set of icons if none of them fits or we want it to be unique and identify your brand.

Iconly is one of the options that is being used by designers and developers today, so I decided to create a library for React / Next.js / Gatsby that facilitates its use and that also allows us to customize any icon according to our needs.

Integrating into your project is quite simple just by following these steps:

**Installation**

```yarn add react-iconly```

or

```npm install react-iconly```

Usage

```
import React from 'react';
import { Home } from 'react-iconly';

const App = () => {
  return <Home />
};

export default App;
```

You can also wrap your app inside an IconlyProvider component, this will make all the icons that are within the context use the Provider properties

If you set specific props for each Icon the Provider properties will be overwritten

```
import React from 'react';
import { IconlyProvider, Home, Notification } from 'react-iconly';

const App = () => {
  return (
    <IconlyProvider set="bulk" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge">
      <Home />
      <Notification primaryColor="yellow" />
    </IconlyProvider>
  )
};

export default App;
```

```
<Home set="two-tone" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge"/>
```

You can also include the whole icon pack:

```
import React from 'react';
import * as Iconly from 'react-iconly';

const App = () => {
  return <Iconly.Home set="bulk" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge"/>
};

export default App;
```

Custom style example

```
import React from 'react';
import { Send } from 'react-iconly';

const App = () => {
  return <Send style={{ transform: 'rotate(45deg)' }} primaryColor="red" stroke="bold" size="xlarge"/>
};

export default App;
```

Check the repo [here](https://github.com/foxthebox/Iconly-React)

Thanks for reading
Node.js MySQL Create Database
Tags: node, mysql, database, beginners
Published: 2022-08-17 04:19:34

In this article, we will see Node.js MySQL Create Database. For any kind data store or run query then we need database like MySQL, MongoDB, PostgreSQL but one of the most popular databases is MySQL. You can create database in MySQL using Node.js using the mysql module or connect MySQL with node.js.

So, let's see how to create a database in node js or node js MySQL connection.

You can download MySQL database : https://www.mysql.com/downloads/.

> Step 1: Install MySQL Driver

First you have to need MySQL running on your computer, you can access it by using Node.js.

To access a MySQL database with Node.js, you need a MySQL driver. now we will use the "mysql" module, downloaded from NPM.

---
 
**_[Read Also: How To Generate QR Code In Node.js](https://techsolutionstuff.com/post/how-to-generate-qr-code-in-node-js)_**

--- 

To download and install the "mysql" module in an application using the below command.

```
npm install mysql
```

Now, you have to download and install a mysql database driver.

Node.js can use this module to manipulate the MySQL database.

```
var mysql = require('mysql');
```
 
> Step 2: Connect Database

Create the db_connection.js file your application. and add the below code in that file.

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

var con = mysql.createConnection({
  host: "localhost",
  user: "your_username",
  password: "your_password"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected..!!");
});
```
 
> Step 3: Create Database with Connection

Create a database in MySQL, use the "CREATE DATABASE" statement. So, copy below code and paste in your file.

---
 
**_[Read Also: How To Import CSV File In MySQL Using Node.js](https://techsolutionstuff.com/post/how-to-import-csv-file-in-mysql-using-node-js)_**

--- 

Database Name : node_mysql_demo

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

var con = mysql.createConnection({
  host: "localhost",
  user: "your_username",
  password: "your_password"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected..!!");
  con.query("CREATE DATABASE node_mysql_demo", function (err, result) {
    if (err) throw err;
    console.log("Database Created..!!");
  });
});
```
 
> Step 4 : Run db_connection.js file

Run db_connection.js using the below code.

```
node db_connection.js
```
Okta Workflows Tips #5
Tags: nocode, okta, oktaworkflows, automation
Published: 2022-08-17 17:53:59

---
title: Okta Workflows Tips #5
published: true
date: 2022-08-17 04:17:46 UTC
tags: nocode, okta, oktaworkflows, automation
canonical_url: https://maxkatz.org/2022/01/25/workflows-tips-5/

---
Welcome to another Okta Workflows Tips post. [Read](https://dev.to/oktaworkflows/okta-workflows-tips-57bj) all other tips.

In this post you will learn all the ways to get random values. There are four cards in Workflows that allow you to get a random value. They are:

- Text – Random
- Text – Unique ID
- Number – Random Integer
- List – Sample

## Random text

Use the **Text – Random** card to generate a random text. It takes one input which is the length of the random text.

[![Generating a random text with specified length](https://katzmax.files.wordpress.com/2022/01/workflows_tips_random_text.png?w=1024)](https://katzmax.files.wordpress.com/2022/01/workflows_tips_random_text.png)
<figcaption>Generating a random text with specified length</figcaption>

## Generating a unique ID

**Text – Unique ID** returns a random universally unique identifier (UUID), sometimes called a globally unique identified (GUID). The card doesn’t have any inputs.

[![Generating a unique ID (UUID)](https://katzmax.files.wordpress.com/2022/01/workflows_tips_unique_id.png?w=1024)](https://katzmax.files.wordpress.com/2022/01/workflows_tips_unique_id.png)
<figcaption>Generating a unique ID (UUID)</figcaption>

## Generating a unique integer

Use the **Number – Random Integer** card to generate a random integer between two specified numbers.

[![Generating a random integer between two numbers](https://katzmax.files.wordpress.com/2022/01/workflows_tips_random_integer.png?w=1024)](https://katzmax.files.wordpress.com/2022/01/workflows_tips_random_integer.png)
<figcaption>Generating a random integer between two numbers</figcaption>

## Random values from a list

The **List – Sample** card will pick random a value from a list.

[![Random value from a list](https://katzmax.files.wordpress.com/2022/01/workflows_tips_random_list.png?w=1024)](https://katzmax.files.wordpress.com/2022/01/workflows_tips_random_list.png)
<figcaption>Random value from a list</figcaption>

In the example above, the card is set to return one item ( **amount** field). You can set it to _2_ for example, and it will randomly pick two items from the list.

Now, there is one more option and that’s to use a custom API endpoint to get a random value from an external source.

That’s all for now. Let me know if you have any tips you would like to share.

Build your first automation with these step-by-step [tutorials](https://help.okta.com/wf/en-us/Content/Topics/Workflows/Tutorials/tutorials-workflows-learn.htm).
Beginner guide to websocket
Published: 2022-08-17 04:17:20

Q. What is websocket ?
A. websocket provides a way to exchange data between browser and server via a persistent connection. The data can be passed in both directions as “packets”, without breaking the connection and the need of additional HTTP-requests.

Q. where can we use websocket ?
A. we use websocket where we need realtime data sharing i.e. online trading platform, games and social media platforms.

Frontend Example -
To open a websocket connection we need to create new protocol.

```
let socket = new WebSocket("ws://localhost:3000");
```
Once the socket is created, we should listen to events on it. There are totally 4 events:

open – connection established,
message – data received,
error – websocket error,
close – connection closed.

```
let socket = new WebSocket("ws://localhost.com");

socket.onopen = function(e) {
  alert("[open] Connection established");
  alert("Sending to server");
  socket.send("My name is tejendra");
};

socket.onmessage = function(event) {
  alert(`[message] Data received from server: ${event.data}`);
};

socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
  } else {
    alert('[close] Connection died');
  }
};

socket.onerror = function(error) {
  alert(`[error] ${error.message}`);
};
```

We need to have server database for above demo too, so we can connect to server.
So you’ll see events open → message → close. and if there is error then onerror in end.

When new WebSocket(url) is created, it starts connecting immediately.

During the connection, the browser (using headers) asks the server: “Do you support Websocket?” And if the server replies “yes”, then the talk continues in WebSocket protocol.
 
If you want to use it in frontend so the best way to use is socket.io which works on both client and server side .

There are some methods to use in socket.io

```
//connect to server
const socket = io("http://localhost.com");

//on() - listen to custom event or default event. (receive)
socket.on('connect', console.log('connect to server'))

//emit() - sent custom or default event to server. (send)
socket.emit('costum-event', 10, 'Hi', 'send')
```

important - both server and client have same event name to work.

But how to send data from server ?
For that we need to use same methods in server side too.

```
//broadcast.emit() - send custom or default event to everyone except the sender.
socket.broadcast.emit('costum-event', 10, 'Hi', 'send')

//to(room) - send message to a specific room or group
socket.to("some room").emit("some event");
```
Pre-Commit hooks guide for Ruby
Tags: ruby, inthirtyseconds
Published: 2022-08-17 04:03:30



> Note: This guide assumes you are using rubocop for linting and RSpec for testing

Git hook scripts are useful for identifying simple issues before submission to code review. We run our hooks on every commit to automatically point out issues in code such as missing semicolons, trailing whitespace, and debug statements. By pointing these issues out before code review, this allows a code reviewer to focus on the architecture of a change while not wasting time with trivial style nitpicks.

## Installation

Using homebrew:

```sh
brew install pre-commit
```

## Configuration

create a file named `.pre-commit-config.yaml` in your project root.

```yaml
repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v4.3.0
    hooks:
      - id: trailing-whitespace
      - id: end-of-file-fixer
  - repo: https://github.com/mattlqx/pre-commit-ruby
    rev: v1.3.5
    hooks:
      - id: rubocop
      - id: rspec
```

Updated configuration & discussion thread is maintained on [GitHub.](https://gist.github.com/jayeshmann/a2f562972c70678ee3479bb12c5d1c36)

## Install git hooks

```sh
pre-commit install
```

> now pre-commit will run automatically on git commit

### Run against all files

Pre-Commit will only run on changed files during git commit.

In case you would like to run it on all the files:

```sh
pre-commit run --all-files
```

---

Feel free to config pre-commit according to your requirements.

[Supported hooks](https://pre-commit.com/hooks.html)

[Official Website](https://pre-commit.com/)

[Official Demo](https://github.com/pre-commit/demo-repo#readme)

---

License: [AGPL-3.0-or-later](https://spdx.org/licenses/AGPL-3.0-or-later.html)
Advice Generator App using Tailwind CSS and JS
Tags: beginners, webdev, javascript, tailwindcss
Published: 2022-08-17 03:24:36

**This is a [Frontend Mentor](https://www.frontendmentor.io/) Challenge**

[Live](https://get-random-advices.netlify.app/)

[Code+Resources](https://github.com/dev-rohit0/advice-generator-app-main)

{% embed https://youtu.be/S0GXbNwEAwA %}

In this video we have created a advice generator app with Tailwind CSS and vanilla JS using [Advice Slip API](https://adviceslip.com/)

I hope you loved this.
Free online word count tool
Tags: wordcounter
Published: 2022-08-17 03:21:22

Free online word count tool
Students need to write tasks that require word counts. And if you want to increase your chances of getting a good mark, you need to make sure that the size is optimal: not too small to meet the requirements, but not too big because it will be harder for teachers to check. Of course, the content of the text is also important, but the golden average between brevity and volume would make it possible to compose such a piece that conveys as much meaning as possible. If you are a teacher, this tool will allow you to check the total number of words and their repetition.
Step 1: Prepare a text, word file ... that you need to count words.
Step 2: Just open our [word counter](https://wordcounter.tools) tool
Paste them into the text input box
Step 3: Look at the results above. Here you have information like word count, characters (characters without spaces), sentences, paragraphs, and pages.
You can also get how many words per page: you can calculate the number of pages for your article, while you can choose your goal: required page count or character count per page, you can see the updated values immediately. With this feature, you can optimize your future document according to the number of pages.
Cách sử dụng Git và một số câu lệnh cơ bản
Tags: git, tutorial, vietnameseblogs
Published: 2022-08-17 03:20:00

## Git rất quan trọng đối với lập trình viên dùng để quản lý source code và làm việc nhóm.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l16ylypvy5cfj9v50kqq.png)
 
Sau đây là một số điều cơ bản để sử dụng Git:
**Branch + sử dụng branch**
- Git là một phiên bản hệ thống điều khiển
- Git khác với Github
- git --version: check phiên bản git tại máy
- git init: khởi tạo git trong folder
- git status: check kiểm tra trạng thái hiện tại
- git add --all(git add *): add all files và các thay đổi folder hiện tại.
- git commit -m"hello": để commit thay đổi trên repos git với tin nhắn hello
- git log: Xem các lịch sử commits
- git branch BE: tạo branch mới tên là BE
- git checkout BE: để chuyển qua branch BE
- git checkout -b BE: tổng hợp 2 lệnh checkout và branch
- git merge BE: merge branch BE vào branch hiện tại
- git branch -d BE: xóa branch BE
- git diff BE master: để so sánh khác biệt những thay đổi
Một số cách giải quyết khi xung đột:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqevll7octy26befiau5.png)
 

> Note: 
C1: Khi merge bị xung đột, branch hiện tại phải pull về trước khi merge.
C2: chuyển sang branch iss3, commit, pull. Trường hợp rebase thì git add myfile.txt, git rebase -- continue

**Remote Repos**
- git pull: lấy những thay đổi trên repos về local.(fetch và merge remote với local repos)
- git fetch --all: kiểm tra nội dung mà không muốn merge.
- git push: dùng để đẩy những thay đổi tại local lên remote repos.
**composite commit using rebase**
- git rebase -i: Tổng hợp commit (2 hay nhiều commit thành 1 commit)

**change commit using rebase**
chọn commit chỉnh sửa:
- git rebase -i HEAD~
- git add sample.txt
- git commit --amend: lưu lại thay đổi
- git rebase --continue.

khi rebase commit cũ(khi push lỗi Integrate the remote changes)thì dùng câu lệnh: git pull --rebase để trở lại và push lên remote.
**Git stash**
Git stash là nơi lưu trữ những thay đổi với bản sao repos mà không ảnh hưởng đến repos chính, sau đó có thể quay lại áp dụng vào repos chính sau.
- git stash save(or git stash): lưu lại các thay đổi chưa commit.(khi bạn muốn chuyển branch khác nhưng đang làm dở branch hiện tại)
- git stash list -p: xem danh sách các lần lưu thay đổi và nội dung.
- git stash apply stash@{1}: lấy lại nội dung từ stash lần 1.
- git stash pop stash@{1}: xóa nội dung từ stash lần {1}
- git stash clear: Xóa toàn bộ stash.
Bạn có thể luyện tập tại trang: https://learngitbranching.js.org/

**Nguồn tham khảo:**

- https://learngitbranching.js.org

- https://backlog.com/git-tutorial/vn/stepup/stepup1_1.html

- https://stackoverflow.com/questions/5989592/git-cannot-checkout-branch-error-pathspec-did-not-match-any-files-kn
Build C++ project using CMake on Windows
Tags: cpp, tutorial, programming, beginners
Published: 2022-08-17 03:13:23

---
canonical_url: https://srele96.medium.com/build-c-project-using-cmake-on-windows-406d93413d31
---
Building a basic project structure using CMake and CMakeLists.txt on windows. A short and concise set of steps I did to build and run the C++ project structure.

## Description

Using base structure:

```txt
building-with-cmake/
building-with-cmake/.gitignore
building-with-cmake/README.md

building-with-cmake/CMakeLists.txt
building-with-cmake/source
building-with-cmake/source/CMakeLists.txt
building-with-cmake/source/main.cpp
```

Learn to build a project using CMake. At least a small one, like this one.

## Goals

Build and run the code.

## Build steps

I created this sample on windows machine. I think that is relevant information.

### When first opening the directory

Run the steps in the following order:

```bat
@REM this is a comment

@REM create directory
mkdir build

@REM go to directory
cd build

@REM setup the project
cmake ..

@REM build the program
cmake --build .

@REM run the program
Debug\building-with-cmake
```

### After we create the build directory

Run the following:

```bat
@REM build the program, probably after code change
cmake --build .

@REM run the program
Debug\building-with-cmake
```

Alternatively, we may have to run one more step. Probably if we
change CMakeLists. I am not sure about that.

```bat
@REM setup the project
cmake ..

@REM build the program
cmake --build .

@REM run the program
Debug\building-with-cmake
```