teleren/devto huggingface dataset:
Using TailwindCSS with Express and EJS
Tags: express, tailwindcss, ejs, webdev
Published: 2022-10-04 16:29:03

In this article we are going to learn how to quickly set up an Express application using express-generator using EJS as the template engineer and then adding TailwindCSS in order to quickly style/mock up your views!

First lets make the directory for our app and move into it
`mkdir express-ejs-tailwindcss`
`cd express-ejs-tailwindcss/`

Lets install and run express-generator
`npx express-generator`
`express --view=ejs`

Follow the directions of express-generator and run `npm install`

To make development easier, lets install nodemon so the server refreshes on each save.
`npm install nodemon --save-dev`

Open up your project and add the following script to your package.json file.
`"devstart": "nodemon ./bin/www",`

Run the npm devstart to see the default index.ejs view from express-generator.

Now that express and EJS are installed, lets move onto TailwindCSS! Run the following:
`npm install tailwindcss postcss autoprefixer postcss-cli`

Lets generator our tailwind.config.js and postcss.config.js files with: 
`npx tailwindcss init -p`

Copy the following code to your tailwind.config.js file

`/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./views/*.ejs'],
  theme: {
    extend: {},
  },
  plugins: [
    {
      tailwindcss: {},
      autoprefixer: {},
    },
  ],
};`

Create a tailwind.css file in the public/stylesheets folder and add the following to the file:
`@tailwind base;
@tailwind components;
@tailwind utilities;
`

Add the following script to the package.json file.

`"tailwind:css": "postcss public/stylesheets/tailwind.css -o public/stylesheets/style.css"`

Add a tailwind class to your project! In the index.ejs file modify the following line as a test:
`<p class="text-red-500">Welcome to <%= title %></p>`

Run the tailwind:css script, then devstart, open your browser to see your tailwind styled page with Express and EJS!
Did you know how discord/zoom works?
Published: 2022-12-20 09:02:44

---
title: Did you know how discord/zoom works?
published: true
date: 2022-10-03 19:41:33 UTC
tags: 
canonical_url: https://blog.amr-hassan.xyz/did-you-know-how-discordzoom-works
---

The secret ingredient is WebRTC.

Here I think that the communication protocols I need to pick when developing a new solution are GRPC, REST, Websockets, and GraphQL.

Thanks for reading Amrs Newsletter! Subscribe for free to receive new posts and support my work.

Since we are talking about real-time communication by default we will drop others beside WebSockets.

thats when I saw WebRTC when reading this discord article.

## What is WebRTC?

WebRTC is a fully peer-to-peer technology for the real-time exchange of audio, video, and data, with one central caveat. A form of discovery and media format negotiation must take place.

in order for two devices on different networks to locate one another. This process is called signaling and involves both devices connecting to a third, mutually agreed-upon server. Through this third server, the two devices can locate one another, and exchange negotiation messages.

## So here is my short reflection:

### Good side

- Fast as long as your use case doesnt require all packets delivery in order

Uses UDP which explains why its faster than WebSocket which uses TCP.

peer-to-peer technology and once the connection is up and running, you do not need to pass the communication via a server (unless using TURN).

- Secure

With WebSockets, the data has to go via a central webserver which typically sees all the traffic and can access it.

With WebRTC the data is end-to-end encrypted and does not pass through a server (except sometimes TURN servers are needed, but they have no access to the body of the messages they forward).

I was curious to see its compatibility with all browsers; it seems solid ![Screenshot from 2022-10-03 20-43-01.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664826182183/QKvgZISpF.png)

[source](https://caniuse.com/rtcpeerconnection)

### Bad side

Require a singling server

complex API compared to WebSockets, but many packages work toward solving that.

## When should you use WebRTC instead of a WebSocket?

Rarely. That's the truth.

If you're contemplating between the two and you don't know a lot about WebRTC, then you're probably in need of WebSockets, or will be better off using WebSockets.

I think of data channels either when there are things you want to pass directly across browsers without any server intervention in the message itself (and these use cases are quite scarce), or you need a low latency messaging solution across browsers where a relay via a WebSocket will be too time-consuming.

## Resources time:

- [WebRTC vs WebSockets BlogGeek.me](https://bloggeek.me/webrtc-vs-websockets/#:~:text=WebRTC%20doesn't%20use%20WebSockets,as%20HTTPS%20or%20secure%20WebSockets.)
- [Simple WebRTC Signaling Server](https://github.com/aljanabim/simple_webrtc_signaling_server)
- [WebRTC and Web Audio Resources](https://docs.google.com/document/d/1idl_NYQhllFEFqkGQOLv8KBK8M3EVzyvxnKkHl4SuM8/edit#heading=h.catfe7kt7q0m)
Kusk v1.3 Release - Updated CLI and dashboard experience!
Tags: opensource, openapi, kubernetes, ingress
Published: 2022-10-04 16:29:03

The Kusk team is proud to announce the v1.3 release of Kusk Gateway, which adds OAuth support, mocking of the API directly from the CLI and improved developer experience of the CLI!

## CLI improvements

- New `kusk deploy` that allows you to deploy your OpenAPI definition to Kusk directly without needing to pipe it to `kubectl`. It also adds a watched that looks for changes in your OpenAPI file and re-applies them to the LoadBalancer.

- New `kusk ip` command that returns the IP address of the default Kusk LoadBalancer so you can now pipe it to your favorite commands. `curl $(kusk ip)/api`

- `kusk install` and `kusk upgrade` have now moved to `kusk cluster install/upgrade`. We have also removed the dependency on `helm` and we install Kusk directly using `kubectl` under-the-hood, this has vastly improved the speed of installation and upgrade of Kusk Gateway!

- New `kusk cluster uninstall` command that uninstalls Kusk and all of its components from your Kubernetes clusters.

## Dashboard Overhaul

We have redesigned Kusk Dashboard to make it easier to use and more familiar with the entire Kusk ecosystem. There are new guides and recommendations added that will help you navigate easier.

![Imrpoved Kusk dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cze28zwg14e4h9jvm4xe.png)

## Improved Documentation

We’ve improved the experience and design of the documentation because we like amazing experiences everywhere 😎 Check out the new [docs.kusk.io](https://docs.kusk.io)

## Try it out!

Try and download the new version of Kusk [here](docs.kusk.io/getting-started)! If you have any questions or ideas please feel free to join our [Discord server](https://discord.gg/uNuhy6GDyn) and get in touch. Kusk is fully open source, so you can always help us by starring the [project on github](https://github.com/kubeshop/kusk-gateway/), opening issues or a PR!

Thank you!
CIO Guide for Operational and Business Benefits of DevOps
Tags: javascript, webdev, programming, devops
Published: 2022-10-04 16:26:20

The rising demands of end-users have forced businesses to face many challenges to increase their operational efficiency and productivity. Also, the continuous evolution in the market plays a handy part in pressuring businesses to achieve optimal results.

To overcome and eliminate all those hassles, businesses can prefer a DevOps culture that brings collaborative work nature to their team. This blog is about briefing DevOps and its benefits (Operational & Business) for an organization.

_**What Is DevOps?**_

[DevOps](https://www.ismiletechnologies.com/devops/devops-operational-business-benefits-guide-for-cios/) brings rapid growth or development to an organization with a set of approaches and practices. In simple words, DevOps can be defined as a tool that enhances the development and operational capabilities of an organization.

It enforces a collaborative workforce and brings cultural changes to improve business values. Though DevOps brings more benefits to an organization, still it will differ according to the organizational workflow and structure.

_**Why DevOps Is Important to An Organization?**_

Today’s market evolves upon user behavior and trends consistently. To handle those changes and to bring more operational values, the implementation of DevOps becomes essential for an organization.

Here are the lists of reasons that make DevOps essential

1. Builds collaboration among teams
2. Offers continuous test environment
3. Enhance operational capabilities to manage quicker deployments
4. Bring the ability to monitor the performance
5. Increases business ROI

However, the benefits offered by DevOps can be classified into 3 types, technical benefits, Operational Benefits, and Business benefits. The upcoming sections will elaborate on the operational and business benefits an organization can achieve through the implementation of DevOps.

**_Operational Benefits of DevOps
_**
The ultimate goal of [DevOps](https://www.ismiletechnologies.com/devops/devops-operational-business-benefits-guide-for-cios/) is to bring more efficiency, cost-effectiveness along with scalability features to an organization. Businesses that depend more on their frontend operation can avail more benefits through DevOps. Apart from bringing more stability to the business, DevOps allows business stakeholders to sync their business operations with their business goals.

By doing so, every employee knows their goal and will work to achieve it. Take a look over those operational benefits of DevOps in brief.
My experience while attending Flatiron's Software Engineering Bootcamp.
Tags: beginners, help
Published: 2022-10-04 16:23:36

At the start of 2022, I had begun my first semester for a B.S. in Computer Science, but the thought of having to wait two years to complete my education and then start looking for a job in the industry made me anxious. Then, I heard from my partner about someone who had completed the Flatiron school software engineering program and was successful with it while having no prior coding experience. 

I decided to reach out to the school and got all the information I needed. As soon as my spring semester ended, I got thru their pre-work and was enrolled to attend in June. The first three weeks were not easy, it was a lot of material to get thru, but I did not want to fall behind on the work. I tried my best to stay focused on the work, but if I got distracted, I would take a break. I soon noticed I got diverted because I did not completely understand a topic. Taking breaks at those times helped me clear my mind and was a requirement later in the program. 

During the program, I had to work on projects as a team, and we had to decide what we would develop and how and we always had to use the skills we had been learning. It was a great experience, as I got to see how others wrote their code and how they approached problems. Seeing the different ways we could tackle the same problem pushed us to find optimal ways to get the problem solved. It was also beneficial because we learned to explain our ideas better so others would understand our vision. 

Overall my experience was excellent; the instructors were great and engaging, and they challenged and pushed you as much as possible. It amazes me how much you can learn in 15 weeks and put our learning into practice. It was a gratifying experience; you will get a lot out of it if you dedicate the time it needs. 

If I could change one thing about the whole experience, it would have been not working while attending the program. It was something the admissions lead explicitly told me before enrolling. Even though I worked part-time as a nursing assistant on the weekends, it wasn't easy. Without the support of my partner and family, the whole experience would have been very different. 

Overall I would recommend the program, I was very skeptical before attending, but it was well worth it.
Invert Binary Tree
Tags: javascript, leetcode
Published: 2022-10-04 16:20:43

Given the root of a binary tree, invert the tree, and return its root.

Example 1:

Input: root = [4,2,7,1,3,6,9]
Output: [4,7,2,9,6,3,1]

```js
/**
 * Definition for a binary tree node.
 * function TreeNode(val, left, right) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.left = (left===undefined ? null : left)
 *     this.right = (right===undefined ? null : right)
 * }
 */
/**
 * @param {TreeNode} root
 * @return {TreeNode}
 */
var invertTree = function (root) {
  const invert = (root) => {
    if (root === null) {
      return;
    }
    let leftNode = root.left;
    root.left = root.right;
    root.right = leftNode;

    invert(root.left);
    invert(root.right);
  };
  invert(root);
  return root;
};


```
Sum of Left Leaves
Tags: javascript, leetcode
Published: 2022-10-04 16:19:22

Given the root of a binary tree, return the sum of all left leaves.

A leaf is a node with no children. A left leaf is a leaf that is the left child of another node.


Example 1:
Input: root = [3,9,20,null,null,15,7]
Output: 24
Explanation: There are two left leaves in the binary tree, with values 9 and 15 respectively.


```js
/**
 * Definition for a binary tree node.
 * function TreeNode(val, left, right) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.left = (left===undefined ? null : left)
 *     this.right = (right===undefined ? null : right)
 * }
 */
/**
 * @param {TreeNode} root
 * @return {number}
 */
var sumOfLeftLeaves = function(root) {
  let sum = 0;
  let isLeft = false;
  const getSum = (root, isLeft) => {
    if (root === null) {
      return;
    }

    if (root.right === null && root.left === null && isLeft) {
      if (isLeft) {
        sum = sum + root.val;
      }
    }
    getSum(root.left, true);
    getSum(root.right, false);
  };

  getSum(root, isLeft);
  return sum;
};

```
Posting Audio Recordings to Your Web App Database as Blob Datatypes
Tags: javascript, react, audio
Published: 2022-10-04 16:18:48

The goal is to receive audio from the users microphone to and store that audio on a database. To do this, we first need to ask the user, in their browser if we can use their microphone.

```
const [trackOne, setTrackOne] = useState(
    {
      isRecording: false,
      blobURL: '',
      isBlocked: false,
    })

  // one time check for mic permissions
  useEffect(() => {
    navigator.getUserMedia({ audio: true },
      () => {
        console.log('Permission Granted');
        setTrackOne({ isBlocked: false });
      },
      () => {
        console.log('Permission Denied');
        setTrackOne({ isBlocked: true })
      },
    );
  
  }, [])
```
Once permission is granted, a function can be called to start the recording.

```
  const startOne = (e) => {
    if (trackOne.isBlocked) {
      console.log('Permission Denied');
    } else {
      Mp3Recorder
        .start()
        .then(() => {
          setTrackOne({ isRecording: true });
        }).catch((e) => console.error(e));
    }
  };
```
In order to stop the recording a function must be called that stops the recording.

```
const stopOne = () => {
    Mp3Recorder
      .stop()
      .getMp3()
      .then(([buffer, blob]) => {
        const file = new File(buffer, 'track-one.mp3', {
          type: audioType
        })
        setAudioData(file)
        const blobURL = URL.createObjectURL(blob)
        setTrackOne({ blobURL, isRecording: false })
      })
  }
```

Then a useEffect can be used to post the data whenever the stop button is clicked.

```
const formData = new FormData()
  formData.append('audio_data', audioData)
    
  useEffect(()=>{
    fetch('/tracks', {
      method: 'POST',
      body: formData,
    })
    .then((r) => {
      if (r.ok) {
        fetch('/tracks')
        .then(r => r.json())
        .then(data => setAllTracks(data))
      }
    })
  }, [audioData])
```

The included fetch GET request at the end is to immediately render the new track.

libraries involved:
import MicRecorder from 'mic-recorder-to-mp3';

***important***
A bit rate must be set in your audio recording component
const Mp3Recorder = new MicRecorder({ bitRate: 128 });
Powershell - Remove files - folders 📂
Tags: powershell, script, file, sysadmin
Published: 2022-10-04 16:12:51

These scripts make it easy to remove files or folders.


### REMOVE BY EXTENSION, YOU CAN EXCLUDE
```
Get-ChildItem -Recurse -Path 'C:\YOUR-PATH'  -Exclude *.pdf , *.mp4 | Remove-Item -force -Verbose -WhatIf
```


### DELETE FOLDERS EMPTY RECURSE
```
$path="C:\YOUR-PATH\*"
Get-ChildItem $path -Recurse -Force -Directory | 
    Sort-Object -Property FullName -Descending |
    Where-Object { $($_ | Get-ChildItem -Force | Select-Object -First 1).Count -eq 0 } |
    Remove-Item -Verbose -WhatIf
```

Parameters:
- -Verbose: to provide status updates, detailed tracking information execution by console.
- -WhatIf: for TEST before execute without changes.
- -Recurse: execute cmd recursively.
- -Exclude: for exclude folders, extensions. 


Thanks for read!

- [redhcp page](https://redhcp.me/)
- [redhcp github](https://github.com/redhcp)
NextJS + Notion build a website
Tags: nextjs, notion, xclippy, osbkca
Published: 2022-10-04 15:58:19

**Object**

I want to build a blog for myself or my SaSS with the lowest cost? I set the criteria:

- Good for SEO
- Having WYSIWUG (What you see is what you get)
- Easy for content editors management

**Solution**
`NextJS for build website`
Referring to good SEO we must mention the NextJS framework. You can build the APIs if you use NextJS, no need to understand too deeply in the project configuration. NextJS gives you a basic layout for your project. You can get started right away without having to install too many things.

`Notion for database and editor`
If you've ever used Notion, you will surely be impressed with the way text is organized in Notion. You will be even more impressed if you use the editor on a page of Notion. After using it for a while, I came up with an idea: Why don't I use Notion as a CMS for my website. That's great, if you can do it, you can of course manage the editor with Notion, can use Notion's editor very easily and quickly. Imagine being able to drag and drop to change the position of text, upload images and save on website development fees. I used this stack to build [Xclippy Website](https://xclippy.com/blog) with no cost :)

**Documents**
- [Create NextJS App](https://nextjs.org/docs/getting-started)
- [Notion Library for NodeJS] (https://www.npmjs.com/package/@notionhq/client)
- [Create an app on Notion to get an credential] (https://www.notion.so/my-integrations)

**Demo**
[![Demo NextJS + Notion](https://scontent.fhan14-3.fna.fbcdn.net/v/t15.5256-10/307194659_462886482437720_6186842375061365721_n.jpg?stp=c135.0.414.414a_dst-jpg_p552x414&_nc_cat=104&ccb=1-7&_nc_sid=08638f&_nc_ohc=64nTDDhJYPYAX819TQz&tn=-3wKLNK6JWR5cMkU&_nc_ht=scontent.fhan14-3.fna&oh=00_AT-AYPwz8lxGQ5xtitq1V8XF0UpwvbuJPHbBHQYi56fqHQ&oe=63418E66)](https://www.facebook.com/100003737261345/videos/773599880518651/)

Happy coding!!
3 Sum / Three Sum
Tags: javascript, leetcode
Published: 2022-10-04 15:56:37

Given an integer array nums, return all the triplets [nums[i], nums[j], nums[k]] such that i != j, i != k, and j != k, and nums[i] + nums[j] + nums[k] == 0.

Notice that the solution set must not contain duplicate triplets.

Example 1:

Input: nums = [-1,0,1,2,-1,-4]
Output: [[-1,-1,2],[-1,0,1]]
Explanation: 
nums[0] + nums[1] + nums[2] = (-1) + 0 + 1 = 0.
nums[1] + nums[2] + nums[4] = 0 + 1 + (-1) = 0.
nums[0] + nums[3] + nums[4] = (-1) + 2 + (-1) = 0.
The distinct triplets are [-1,0,1] and [-1,-1,2].
Notice that the order of the output and the order of the triplets does not matter.

```js
const threeSum = (arr) => {
  let nums = [...arr].sort();
  const res = []; 

  for (let i = 0; i < nums.length - 2; i++) {
    // We can do - 2 cause our other 2 pointers will take care of the last 2 nums
    // Initialize 2 pointers for innerloop which will give sum 
    let l = i + 1,
      r = nums.length - 1;

    if (nums[i] === nums[i - 1]) continue; // check for dupes on the outter loop, skip if nums[i] is a num we already saw

    while (l < r) {
      let total = nums[i] + nums[l] + nums[r]; // Add up all our current pointer values

      if (total === 0) {
        res.push([nums[i], nums[l], nums[r]]); // Add if we found a solution

        while (nums[l] === nums[l + 1]) l++; // This skips dupes in the nums array
        while (nums[r] === nums[r - 1]) r--; // This skips dupes in the nums array

        // We need to do one extra move after skipping the dupes or else we will still be on a dupe
        l++;
        r--;
      } else if (total > 0) {
        // If its greater than 0, then we can move the r pointer down
        r--;
      } else {
        // its less than 0 and we need to move the left pointer up
        l++;
      }
    }
  }

  return res;
};


```
Get AWS Certified FREE: Specialty Challenge
Tags: aws, cloud, learning, certification
Published: 2022-10-04 15:51:35

AWS FREE Voucher for AWS SPECIALTY Certification

AWS has recently come up with their Specialty Challenge that provide you with advanced trainings, including live and on-demand Twitch sessions with AWS experts working at your level when you sign up before December 16,2022.

The AWS Specialty Challenge starting off on October 3, 2022 and ends December 16, 2022. Register now and get ready to show what you know! Also post training you’ll receive a Free 50% voucher toward the cost of your certification exam.

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


The voucher is applicable for the following Specialty Level exams:
-> AWS Certified Machine Learning-Specialty
-> AWS Certified Data Analytics-Specialty
-> AWS Certified Advanced Networking-Specialty
-> AWS Certified Security-Specialty
-> AWS Certified SAP on AWS-Specialty

Link to Register: https://pages.awscloud.com/GLOBAL-ln-GC-TrainCert-Specialty-Certification-Challenge-2022-reg.html
🔴  Live Q&A session on Luos Discord Tuesday, 11 at 6:00 PM CEST with Nicolas Rabault
Tags: opensource, microservices, embedded, luos
Published: 2022-10-04 15:41:45

Save the date, it will be a small friendly event to ask all the questions you want about Luos: upcoming features, vision, best use cases, pros and cons.

[To participate ⏩](https://discord.gg/DUNWRFQSdP?event=1026867797004927027)

💬 Comment on this post with your question now and we’ll answer it live!
How to choose the right load balancer for your AWS workloads
Tags: aws, architecture, network, devops
Published: 2022-10-04 15:35:04

Before talking about how to choose the right load balancer, let's take a look about what are the available load balancers in AWS.


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

### When do we need to use the Application LB?
When we have one of the below targets combined with one or more from the below requirements.


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

### When do we need to use the Network LB?
When we have one of the below targets combined with one or more from the below requirements.


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

### When do we need to use the Gateway LB?
When we have one of the below targets combined with one or more from the below requirements.


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

### When do we need to use the AWS Global Accelerator?
When we have one of the below targets combined with one or more from the below requirements.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pataxrxilkfsg211eg8.jpg)


To get more details on how to select the LB got to this session https://www.youtube.com/watch?v=p0YZBF03r5A