teleren/devto huggingface dataset:
Postgres variables & clean up
Tags: postgress, sql, variables
Published: 2022-03-15 16:41:05

---
title: Postgres variables & clean up
published: true
description: Postres variables and cleaning a user table
tags: postgress, sql, variables
//cover_image: https://direct_url_to_image.jpg
---

## Overview
We needed a little script that would clean up data for a user based on their id.

```sql
do
$$
    declare
        userId varchar(255) := '98584bc7-f06b-45cf-bfc3-d5224cf7b743';
    begin
        delete from "LoginAttempt" where "userId" = userId;
        delete from "LoginSuccess" where "userId" = userId;
        delete from "LoginFailed" where "userId" = userId;
        delete from "Provider" where "userId" = userId;
        delete from "User" where id = userId;
    end
$$
```
TERMINAL komandalari mavzusiga oid | QUIZ GAME |
Tags: terminal, uzbek, beginners, cpp
Published: 2022-03-15 16:31:26

**QUIZ GAME** 
**_TERMINALga oid savollarga javoblar!_** _Lets goo_

1.
- 
 _TERMINAL_ da bugungi sana nomi bilan **(dd-mm-yyyy)** formatida papka yaratish komandasini kiriting!

```py
mkdir $(date '+%d-%m-%Y')
```

2.
-
Siz turgan papkadagi barcha  **(yashirinlarini ham)** fayllarni chop etuvchi komandani kiriting!

```cpp
ls -a
```

3.
-
Siz turgan papka **nomi** ni ko'rsatuvchi komandani kiriting!

```py
pwd
```

4. 
-
Siz turgan papkadagi **hamma narsani** ekranga chop etuvchi komandani kiriting!

```
ls
```

5. 
-
1 ta papka **ort** ga qaytish komandasini kiriting!

```
cd ..
```

6.
-
Bugungi sanani **(dd-mm-YY)** ko'rinishda ekranga chop qiluvchi komandani kiriting!

```py
echo $(date '+%d-%m-%Y')
```

7.
-
Siz ` $HOME ` papkasida turibsiz, shu papkadan chiqmasdan _Downloads_ papkasidagi **keraksiz.txt** faylni o'chirish komandasini kiriting!

```py
rm -rf ~/Downloads/keraksiz.txt
```

8. 
-
Joriy papkadagi **main.cpp** nomli kodni kompilatsiya qilish komandasini kiriting!

```py
g++ main.cpp -o dastur
```

9. 
-
Joriy papkadagi **main.cpp** nomli _code_ ni kompilatsiya qilgach ` a.out ` nomli by default faylni ishga tushirish komandasini kiriting!

```py
g++ main.cpp
```

10. 
-
` $HOME ` papkasiga qanday qaytish komadasini kiriting!

```cpp
cd ~
```

12. 
-
Joriy papkadagi **main.cpp** faylni kompilatsiya qilib natijani **dastur** nomli faylga saqlaydigan komandani kiriting!

```py
g++ main.cpp -o dastur
```
 

13.
-
Joriy papkani **VSCode** daturida **workspace** _(ishchi maydon)_ sifatida ochadigan komandani kiriting!

```py
code .
```

14. 
-
` a.out ` ga saqlangan kodni ishga tushiruvchi komandani kiriting!

```cpp
./a.out
```

15.
-
Joriy papkani o'zgartirib sizni boshqa manzilga olib boradigan komandani kiriting!

```py
cd
```
**Xammaga raxmat xozircha shular :)**
Process Analytics - February 2022 News
Tags: news, bpmn, typescript, analytics
Published: 2022-03-15 16:29:44

Welcome to the Process Analytics monthly news 👋.

As we remind you each month, the goal of the Process Analytics project is to rapidly display meaningful Process Analytics components in your web pages using BPMN 2.0 notation and Open Source libraries.

In February, we worked on improving the BPMN Visualization (JavaScript/TypeScript) library 🤗. Let’s see what’s new here 👀!

## BPMN Visualization JS/TS library

In February, we released 2 versions: [0.21.4](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.21.4) & [0.21.5](https://github.com/process-analytics/bpmn-visualization-js/releases/tag/v0.21.5). They were focused on improving the TypeScript support.

The 0.21.5 release includes a fix for issue [#1808](https://github.com/process-analytics/bpmn-visualization-js/issues/1808) that prevented some TypeScript projects from using [bpmn-visualization](https://github.com/process-analytics/bpmn-visualization-js) 😭. This issue was introduced in version 0.21.3. It also impacted  projects using the types to get the API documentation in IDE.

The team enthusiastically thanks [*@kristapsdz-saic*](https://github.com/kristapsdz-saic) for the detailed report and investigations 🏅.

---

Since the fix, we have added additional checks to the build process to make sure such an issue won't happen again 🤔.

We introduced a new TypeScript project built with [Vite](https://vitejs.dev/) in the examples repository to spot similar errors. All [TypeScript projects](https://github.com/process-analytics/bpmn-visualization-examples/tree/v0.21.5/examples/projects) are now built continuously 🛠️, so we will detect issues earlier.

Some definition files previously referenced types or classes that were not available. This is fixed as well.

Finally, to improve the usage of bpmn-visualization in TypeScript projects, the README now provides more information about the TypeScript support and how to use the library 📚.

---

The API document in IDE is now working, as demonstrated in the following [codesandbox example](https://codesandbox.io/s/bpmn-visualization-sandbox-hpvq8) that uses bpmn-visualization 0.21.5 👇.


![Usage of the types as documentation in an IDE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61o6nl85scqafzi3ghl0.gif)
*Usage of the types as documentation in an IDE*

## That’s All Folks!

We hope you enjoyed this February project news and are looking forward to what March will bring 👋.

In the meantime, to stay on top of the latest news and releases, follow us through:

- Website: [https://process-analytics.dev](https://process-analytics.dev/?utm_source=devto&utm_medium=display&utm_campaign=news)
- Twitter: [@ProcessAnalyti1](https://twitter.com/ProcessAnalyti1)
- GitHub: https://github.com/process-analytics

*Cover photo by [le Sixième Rêve](https://unsplash.com/photos/WBa6zqfEDo8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*
Reading Files Serially through Callbacks and Promises
Tags: javascript, webdev, beginners, programming
Published: 2022-03-15 16:22:15

**Through Callbacks**

const fs =require('fs');

console.log('Before');

fs.readFile('f1.txt',cb1);

function cb1(err,data){
    if(err)
    {
        console.log(error);
    }
    else
    {
        console.log(" "+data);
        fs.readFile('f2.txt',cb2);
    }
}

function cb2(err,data){
    if(err)
    {
        console.log(err);
    }
    else
    {
        console.log(" "+data);
        fs.readFile('f3.txt',cb3);
    }
}

function cb3(err,data){
    if(err)
    {
        console.log(err);
        
    }
    else
    {
        console.log(" "+data);
    }

}

console.log('After');

//👉 ans ->
// Before
// After
//  this is file 1
//  this is file 2
//  this is file 3





**Through Promise**

const fs =require('fs');

console.log('Before');

let f1p=fs.promises.readFile('f1.txt');

f1p.then(cb1);

function cb1(data){
console.log("File data->"+data);
let f2p=fs.promises.readFile('f2.txt');
f2p.then(cb2);
}

function cb2(data)
{
    console.log("File data->"+data);
    let f3p=fs.promises.readFile('f3.txt');
    f3p.then(cb3);
}


function cb3(data){
    console.log("File data->"+data);

}



console.log('After');


//👉 ans ->
// Before
// After
// File data->this is file 1
// File data->this is file 2
// File data->this is file 3

📌Handwritten Notes:
https://github.com/pushanverma/notes/blob/main/webd/Serially%20in%20Js%20.pdf
Promises in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-03-15 16:19:24

const fs =require('fs');

console.log("Before");


// 📌to read file normally through callbacks
// fs.readFile("f1.txt",function(err,data){
//     if(err)
//     {
//         console.log(error);
//     }
//     else{
//         console.log("file data ->"+data);
//     }
// })

// 👉ans -> Before
// file data ->this is file 1

//📌 reading file by PROMISE
// (this is the first stage , where the promise shows pending )
let promise =fs.promises.readFile('f1.txt')
// (here we have used promise present inside the fs module)
console.log(promise);
// 👉(if we replace the file with f3.txt , then it would not run because it will not run )
// ans->
// Before
// Promise { <pending> }
// After
// (after pending stage , we have two stages -either to get fulfilled or to get rejected)
// fulfill - is done by .then 
// reject - is done by .catch
// just like try and catch

promise.then(function(data){
    console.log("File data->"+data);
})

promise.catch(function(err){
    console.log(err);
})
//👉 ans -> Before
// Promise { <pending> }
// After
// File data->this is file 1

console.log('After');





**HOW TO CONSTRUCT A PROMISE ?**



let promise = new Promise(function(resolve,reject){
    const a=2;
    const b=2;
    if(a===b)
    {
        // resolve();
        resolve("yes value are equal");
        //resolve calls .then function 
    }
    else
    {
        // reject();  
        reject("no value are not equal");
        //reject calls ,.catch function   
    }

    // you cannot put .then and catch inside the promise 
})

// 📌1st way 

// promise.then(function(){
//     console.log("Equal");
// })

// promise.catch(function(){
// console.log("Not Equal");
// })

//👉 ans ->"Equal"(because value of a & b is 2 )
//👉 ans -> "Not Equal"(because value of a and b is differennt a=2 , b=4)





// 📌2nd way(through CHAINING OF THEN AND CATCH)
// promise.then(function(){
//     console.log("Equal");
// }).catch(function(){
// console.log("Not Equal");
// })


//📌 3rd way(writing in resolve and reject and returning in then and catch)

promise.then(function(data){
    // console.log(data);
    console.log("result coming from resolve method"+data);
}).catch(function(err){
    // console.log(err);
console.log("result coming from reject method"+err);
})

//👉ans ->yes value are equal
//👉ans ->result coming from resolve methodyes value are equal




📌Handwritten Notes:
https://github.com/pushanverma/notes/blob/main/webd/Promises%20in%20Js.pdf
CallBacks in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-03-15 16:17:36

//Call back functions -Any function that is passed as an argument to another function is known as Callback function.



function printFirstname(firstname,cb,cb2)
{

    //cb recieves Lastname function
    //cb2 recieves printage function
 console.log(firstname);
 cb("Verma")
 cb2(22);
}

function printLastname(lastname)
{
    console.log(lastname);
}

function printAge(age)
{
    console.log(age)
}

printFirstname("Pushan",printLastname,printAge);

//👉ans->
//Pushan
//Verma
//22

**2nd example:**

const fs =require('fs');

console.log("before");
// let data =fs.readFileSync('f1.txt');

fs.readFile('f1.txt',cb);
fs.readFile('f2.txt',cb2);


function cb(err,data)
{
    if(err)
    {
        console.log(err);
    }
    console.log(" "+data);

}

function cb2(err,data)
{
    if(err)
    {
        console.log(err);
    }
    console.log(" "+data);

}


console.log("after");


// 👉 ans ->
// before
// after
//  this is file 2
//  this is file 1

📌HandWritten Notes:
https://github.com/pushanverma/notes/blob/main/webd/Callbacks%20in%20Js%20.pdf
Fabric.js in React — Draw bounding box in webcam preview using canvas events.
Tags: react
Published: 2022-10-31 17:55:44

---
title: Fabric.js in React — Draw bounding box in webcam preview using canvas events.
published: true
date: 2022-03-15 16:15:00 UTC
tags: React
canonical_url: https://anlisha.com.np/blog/fabric-js-in-react-draw-bounding-box-in-webcam-preview-using-canvas-events/
---

Fabric.js is a JavaScript library for HTML5 canvas. Using Fabric.js one can create object/shapes on canvas. We’ll be incorporating canvas events to draw bounding box over webcam component.

**Step1 — Install Fabric.js & react-html5-camera-photo**

```
npm i fabric react-html5-camera-photo
```

**Step2 — Create canvas & camera element**

```
<Camera onTakePhoto={(uri) => {}} />
<canvas id="fabricEl" width="720" height="348"></canvas>
```

**Step3 — Initialize fabric.Canvas**

```
import React, { useEffect, useState } from "react";
import Camera from "react-html5-camera-photo";
import { fabric } from "fabric";

const [canvas, setCanvas] = useState("");

const initCanvas = () =>
 new fabric.Canvas("fabricEl", {
  selection: false,
  stateful: true,
});

useEffect(() => {
 setCanvas(initCanvas());
}, []);
```

Note that `initCanvas` function returns a fabric.Canvas object; invoked upon initial rendering of the DOM.

**Step4 — Draw bounding box with canvas mouse events**

Fabric supports a number of events to allow for interactivity and extensibility. In order to subscribe to events for a canvas we use the `on` method.

```
useEffect(() => {
 if (canvas) {
  var rectangle;
  canvas.on("mouse:down", function (e) {
    var pointer = canvas.getPointer(e.e);
    rectangle = new fabric.Rect({
     id: 1,
     top: pointer.y,
     left: pointer.x,
     width: 0,
     height: 0,
     originX: "left",
     originY: "top",
     fill: "rgba(255,0,0,0.3)",
     stroke: "rgba(255,0,0,1)",
     strokeWidth: 2,
     hasControls: true,
     hasRotatingPoint: true,
     hasBorders: true,
     transparentCorners: false,
     selectable: true,
     cornerSize: 10,
     cornerColor: "rgba(255,0,0,1)",
     borderColor: "rgba(255,0,0,1)",
     cornerStrokeColor: "rgba(255,0,0,1)",
     cornerStyle: "rect",
    });
    canvas.add(rectangle);
  });
 }
}, [canvas]);
```

On `mouse:down` event of canvas we create a `fabric.Rect` object and add it to the canvas via `canvas.add()` method.

**Final Code!**

View the code on [Gist](https://gist.github.com/anlisha-maharjan/187755ed07a75f39074cb2aad83275d8).

Note on line 95, `canvas.renderAll()` re-renders both the upper and lower canvas layers on the DOM. The `object:moving` event is to restrict the bounding box rectangle within canvas boundary. The `object:modified` event calculates bounding box center x, center y, width and height.

**Demo!**

![](https://anlisha.com.np/blog/wp-content/uploads/2022/05/1_v9dOJvw0CwbcCOvQSCUngg.png)

The post [Fabric.js in React — Draw bounding box in webcam preview using canvas events.](https://anlisha.com.np/blog/fabric-js-in-react-draw-bounding-box-in-webcam-preview-using-canvas-events/) first appeared on [Anlisha Maharjan](https://anlisha.com.np/blog).
Which is better For Job BCA or BTech Computer Science?
Tags: beginners, javascript, java, programming
Published: 2022-03-15 16:10:57

**Basics in Btech And BCA Education or Difference between BCA or BTech**
**First Year** :
At Present, if you want to join any college or any degree Btech Or Bca, so education style is the same on the first year if I talk about BTech so all students in colleges for any stream like mechanical, architecture, computer science, electrical, electronics, etc. so all student learn same topics and also in Bca in First Year study about business development differ from programming

Check Full Article on **[Which is better For Job BCA or BTech Computer Science](https://www.leads4needs.com/which-is-better-bca-vs-btech-computer-science-for-job)**

![CSharp Tutorial For Beginners by CodeExampler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60a25dcef2p477lix5t5.PNG)
**Second Year** :
But on Next Year in Btech (Computer Science) Learn C and C++ Programming Language and few other topics, and the same condition on BCa learn c and C++ and Few Html in Both degrees but on 2 nd year learn only 2-3 maximum languages
**[How to Comment in Javascript Tutorials for Beginners](https://www.codeexampler.com/javascript-comment)**

**Third Year **:
Btech Computer science learn HTML, CSS, Php, and few others languages and another subject and on Bca Degree three years so this is last year for Bca Students and in this year Learn Java, Php, Html, CSS, and Python type of advance Languages learn only a Few best university in both BTech and BCA.



![Python Tutorial For Beginners by CodeExampler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zxjnzass1izeaeqtoiu.PNG)
**Fourth Year** :
Btech Learn java, C#, provide education about oops concepts and few other coding languages learn

Many Student job and also study in Different City so Search **[Pg in Noida](https://www.pgwars.com/)** and many City So Search on **PGWars** Website

There are lot og Gym but Best Gym in Myzaffarnagar so Check Profile on **[BodyStation Gym & SPA in Muzaffarnagar](https://www.leads4needs.com/businessview/619cefbf6eeae13516d0b9a6)**
Part One: Building a Static Site in S3
Tags: beginners, aws, cloud, codenewbie
Published: 2022-03-15 16:09:59

In my previous post, I mentioned the [Cloud Resume Challenge](https://cloudresumechallenge.dev/docs/the-challenge/aws/). I was splitting my time between a Python course and studying for another AWS certification (Solutions Architect Associate), but ultimately decided to get some practical skills and experience using both Python and AWS. I'm spending as much "free" time as possible between my job as a Product Manager and life (which amounts to about 5 hours a week). 

Since I've already taken and passed my AWS Certified Cloud Practitioner exam back in 2021 (a prerequisite for the challenge), I was able to get right into building my resume website. 


I began building the site in AWS using S3, Route53, Certificate Manager, and CloudFront:

- **Route53** for domain registration 
- **S3** to host the site files
- **Certificate Manager and CloudFront** to deliver the site's content to visitors quickly and securely over HTTPS



For the front end design, I leveraged HTML and CSS design elements from a few website templates and combined these with a reworked version of my PDF resume. For the site's visitor counter, I googled and hacked together some JavaScript (this took awhile to grasp, and I plan to tweak the presentation a bit as I get further into the challenge).

I ran into some blockers of course since I'm not a front-end developer (google and Reddit are my friends). I also tapped some developer friends for guidance with HTML and CSS. [VS code](https://code.visualstudio.com/) is a great [IDE](https://www.codecademy.com/article/what-is-an-ide), especially since I've been working in different languages for this challenge so far. 


I had some false starts and needed to do some reading to grasp some of the AWS concepts as I moved through the steps, but I am pleased with what I've built so far. This phase of the challenge took me about six weeks to complete. 








**_NEXT UP_**: Part two...**Dynamo DB**, **Lambda**, and configuring an **API Gateway** in AWS. Stay tuned for my next post!
Preventing higher costs on EC2
Tags: aws, organizations, ec2
Published: 2022-03-15 02:43:08

In this post we will discuss an example of how to prevent running unwanted expensive EC2 instances. 

### Situation  
We currently have several AWS accounts with consolidated billing in one AWS account using [AWS Organizations](https://aws.amazon.com/organizations/). Hundreds of users are using those AWS Accounts daily to complete their daily work.

### Issue
We want to prevent all users to launch expensive EC2 instances with higher prices (like the GPU Accelerated instances types), to do not have a heart attack when looking at the bill in the following month. We can use IAM custom policies to define those conditions, but the restriction must be applied also in those who had full administration access.

### Solution
We can take advantage of AWS Organizations and create Service Control Policies (or SCPs) to define IAM guardrails. These policies will help us to define a set of Denied actions on an AWS Account, no matter IAM user's permissions. Additionally, this won’t required any additional cost. The following steps can be run on a CloudShell terminal. 

1. **Enable organization Secure Control Policies (SCPs).** ```
rootId=$(aws organizations list-roots | jq .Roots[].Id | sed 's/"//g')
aws organizations enable-policy-type --root-id  $rootId  --policy-type SERVICE_CONTROL_POLICY`
```

2. **Create SCP to restrict expensive instance types.**
Save a SCP policy in a json file and create the policy. Then, obtain the policyId to be used in next step. ```
cat > scp_ec2_policy.json <<'END'
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Deny",
            "Action": "ec2:RunInstances",
            "Resource": "*",
            "Condition": {
                "StringLike": {
                    "ec2:InstanceType": "p*.*"
                }
            }
        }
    ]
}
END
policyName="DenyEC2InstanceTypes"
description="Denies launch of expensive  EC2 instances"
file="file://scp_ec2_policy.json"
policy=$(aws organizations create-policy --content $file --name $policyName --type SERVICE_CONTROL_POLICY --description "$description")
policyId=$(echo $policy  | jq ".Policy.PolicySummary.Id"  | sed 's/"//g')
```

3. **Attach it on AWS Account on AWS Organizations.** 
Apply the following command per each AWS Account invited into the AWS Organization, except the management account. Replace `<aws_account_id>` by AWS Account's ID.```
aws organizations attach-policy --policy-id $policyId --target-id <aws_account_id>
```

Finally, when trying to launch a new EC2 instance with p3 instance type, we'll get an error no matter we have EC2 Full Access. This is great to prevent unexpected costs for launching expensive EC2 instances!
Brainboard
Tags: terraform, multiclouddeployment, automationtool, cloudnew
Published: 2022-03-15 15:55:25

I am glad to share a new automation tool that I explored recently. I had the same excitement when I used #Sourcetree few years back  made my life easy with GIT operations. 

This time for Terraform and the tool is 𝐁𝐫𝐚𝐢𝐧𝐛𝐨𝐚𝐫𝐝. It amazed me on every aspect. The best thing I like is to be get started with Terraform and deploy the resources just like that. It has everything under one switch. Be it the design to create our architecture, be it a code editor, be it a simple integration with all the popular source code repositories and so on. One another outstanding feature is its versioning of the entire architecture.

𝐁𝐫𝐚𝐢𝐧𝐛𝐨𝐚𝐫𝐝 is bi-directional that is we can either create an architecture and automatically generate the terraform code or we can import the terraform code and generate its appropriate architecture which is the best part. It has vault integration to store and retrieve your credentials and access keys safely and securely. It has a beautiful UI to easily switch between multiple cloud providers that makes multi-cloud infrastructure management easy. Also the effective team collaboration is yet another highlight and it gives all the major cloud providers remote state management in ease.

I can see a clean ecosystem with 𝐁𝐫𝐚𝐢𝐧𝐛𝐨𝐚𝐫𝐝 that results in simple and consistent operations and hence increase in the productivity. A good tool to use overall. It has free trial and starter packages to start with and enterprise edition to cover all the features.
More details on https://www.brainboard.co/

Thanks to Chafik Belhaoues ☁ and Jeremy Albinet for creating such an awesome product.
Central Limit Theorem
Tags: statistics, machinelearning
Published: 2022-03-15 15:46:50

The following video on Central Limit Theorem in 5 minutes discusses the following topics        

✅ Population         
✅ Sample    
✅ Central Limit Theorem     
✅ Central Limit Theorem example      

Hope you find it useful in your datascience and machine learning journey          

{% embed https://www.youtube.com/watch?v=4nUhy9kc2VU %}