teleren/devto huggingface dataset:
What are the internal workings of terminal commands?
Tags: tty, linux, shell, terminal
Published: 2022-06-11 11:46:35

First, we should have a context that what is Shell, Session.

## What are Shell & Sessions

When I say session, I mean shell session, which acts as a layer between the kernel and the user, so whenever you run a command in your terminal emulator, it's the shell (e.g. bash) that listens for them on the [PTY slave](https://man7.org/linux/man-pages/man7/pty.7.html) attached to it, captures them, communicates with the kernel, then writes the output back to the PTY slave, which the [TTY driver](https://www.ibm.com/docs/en/aix/7.2?topic=subsystem-tty-drivers) will see and send it to the PTY master so it can be viewed by the user.

The session leader is the process that is running shell. This session leader is the parent of all other processes in the terminal. When you log out of the terminal, kernel sends `SIGHUP (kill -1)` to the session leader, which propagates this signal to all child processes.

Each session is handled by a session leader, the shell, which uses a sophisticated protocol of signals and system calls to communicate with the kernel.



## When you run any linux command in the terminal, what happens?

- You start the bash programme as a sub-process and attach it to the slave component after opening the terminal, which requests a `pty` from the OS, which returns a pair of file descriptors for the [master and slave](https://man7.org/linux/man-pages/man7/pty.7.html) sides.

- The characters are sent from the terminal emulator to the master side, where they are echoed back to the master and buffered by the TTY driver.

- The TTY driver copies the characters in the buffer to the slave when you press enter.

- When you type the command and press enter, the bash will start a child sub-process, perform the command, and write the output to the std output, which also points to the pts.

- The output from pts will be echoed to the master by the tty driver.

- The terminal emulator program's user interface will be redrawn to show you the results of the commands you typed.


## Code Implementation in JavaScript


[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Siddhant-K-code/tty-tutorial)


{% embed https://github.com/Siddhant-K-code/tty-tutorial %}
Aylana ichidami? | Masala
Tags: funksiya, masala, cpp, programming
Published: 2022-06-11 11:41:58

Berilgan nuqta aylana ichidami yo'qmi aniqlaydigan funksiya tuzing.

- **nomi**: pointIsInCircle
- **parametrlar**:
  - aylana markazini anglatuvchi `int cX, int cY`
  - aylana radiusini anglatuvchi `int cRadius`
  - nuqta kordinatasini anglatuvchi `int pX, int pY`
- **qaytarishi**: berilgan nuqta aylana ichida bo'lsa `true` yo'qsa `false` qaytaradi.
- *yuqorida yaratilgan `distance` funksiyasiyadan foydalaning*
Valid Square
Tags: leetcode, dsa, theabbie
Published: 2022-06-11 11:30:36

Given the coordinates of four points in 2D space `p1`, `p2`, `p3` and `p4`, return `true` _if the four points construct a square_.

The coordinate of a point `pi` is represented as `[xi, yi]`. The input is **not** given in any order.

A **valid square** has four equal sides with positive length and four equal angles (90-degree angles).

**Example 1:**

**Input:** p1 = \[0,0\], p2 = \[1,1\], p3 = \[1,0\], p4 = \[0,1\]
**Output:** true

**Example 2:**

**Input:** p1 = \[0,0\], p2 = \[1,1\], p3 = \[1,0\], p4 = \[0,12\]
**Output:** false

**Example 3:**

**Input:** p1 = \[1,0\], p2 = \[-1,0\], p3 = \[0,1\], p4 = \[0,-1\]
**Output:** true

**Constraints:**

*   `p1.length == p2.length == p3.length == p4.length == 2`
*   `-104 <= xi, yi <= 104`

**SOLUTION:**

    class Solution:
        def dist(self, a, b):
            return (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1])
        
        def isPerpendicular(self, a, b, c, d):
            return (b[1] - a[1]) * (d[1] - c[1]) == (b[0] - a[0]) * (c[0] - d[0])
        
        def midPoint(self, a, b):
            return (a[0] + b[0], a[1] + b[1])
        
        def validSquare(self, p1: List[int], p2: List[int], p3: List[int], p4: List[int]) -> bool:
            plist = [p1, p2, p3, p4]
            points = [[(0, 1), (2, 3)], [(0, 2), (1, 3)], [(0, 3), (1, 2)]]
            for diag in points:
                a, b = [plist[d] for d in diag[0]]
                c, d = [plist[d] for d in diag[1]]
                isBisector = self.midPoint(a, b) == self.midPoint(c, d)
                if not isBisector:
                    continue
                d1, d2 = self.dist(a, b), self.dist(c, d)
                if d1 != d2 or d1 == 0:
                    continue
                if self.isPerpendicular(a, b, c, d):
                    return True
            return False
What is render-blocking?
Published: 2022-06-11 11:18:54

**Render-blocking** is associated with generating the Render Tree from an HTML document and eventually **painting** a webpage's pixels on a screen.

Render Tree generation is one of the steps of the **Critical Rendering Path**. Other steps include DOM Tree generation, CSS Object Model (CSSOM) Tree generation, Layout generation and painting pixels. Render Tree generation depends on two prior steps: DOM Tree generation and CSSOM Tree generation.

Render-blocking is relevant when the browser parses a string of HTML markup and builds a DOM tree as it parses. When the HTML parser is blocked by scripts, or scripts are blocked by external CSS files, the DOM tree generation is blocked. As a result, the Render Tree generation is also blocked --- which in turn blocks layout generation and painting of the web page's pixels to the screen. This is cumulatively called **render-blocking**.

In addition, since Render Tree generation depends on CSSOM Tree generation, if the CSSOM Tree generation is somehow blocked, Render Tree generation also gets blocked. So, render-blocking can be induced by problems with CSSOM Tree generation as well.

---
References
1. [Critical rendering path](https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path)
2. [How the browser renders a web page? — DOM, CSSOM, and Rendering](https://medium.com/jspoint/how-the-browser-renders-a-web-page-dom-cssom-and-rendering-df10531c9969)
Masofa | Masala
Tags: masala, cpp, uzbek, programming
Published: 2022-06-11 11:14:44

Ikki nuqta orasidagi masofani hisoblab beradigan funksiya tuzing.

- nomi: `distance`
- parametrlari: `int aX, int aY, int bX, int bY`
- qaytarishi: shu ikki nuqta orasidagi masofani `float` sifatida qaytaradi
Mediafire - Get Direct Download Link ( non expiring ) of files
Tags: webdev, tutorial, productivity, discuss
Published: 2022-06-11 11:06:50

# Direct Download Link - Mediafire - Free Unlimited Video Hosting for Blogger/Website [Trick]

See Video :-
{% embed https://drive.google.com/file/d/1qA7BzGiHThwHQqG4-Th9walT2uq2ABBC/preview %}
https://sh20raj.github.io/DrivePlyr/vlitejs.html?id=eyJpZCI6WyIxcUE3QnpHaUhUaHdIUXFHNC1UaDl3YWxUMnVxMkFCQkMiXX0=


{% youtube https://youtu.be/dOhY_v_5iPw %}

---

{% post https://dev.to/sh20raj/mediafire-unlimited-file-storage-online-trick-free-unlimited-cloud-storage-100-dgo %}

---

> **Generate Mediafire Direct Download Link
 :- https://wholly-api.skinnyrunner.com/websites/mediafire.com/index.php
**

---

WhollyAPI :- https://wholly-api.skinnyrunner.com/

## Get An HTML5 Video Player
- Playlist Link :- https://www.youtube.com/playlist?list=PLFcP4G5x1z-rhG307w1iAQBFSTHa5hbRz

## Sample Links

---

Sample Video 1 :- https://www.mediafire.com/file/rt73bnxsuvhsf86/night.mp4/file

Direct Link of Sample Video 1 :- https://wholly-api.skinnyrunner.com/websites/mediafire.com/direct_download.php?id=rt73bnxsuvhsf86

---

See Demo Blog Post :- https://codexd-india.blogspot.com/2022/06/download-night-movie.html
Sum of Left Leaves
Tags: leetcode, dsa, theabbie
Published: 2022-06-11 11:00:46

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:**

![](https://assets.leetcode.com/uploads/2021/04/08/leftsum-tree.jpg)

**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.

**Example 2:**

**Input:** root = \[1\]
**Output:** 0

**Constraints:**

*   The number of nodes in the tree is in the range `[1, 1000]`.
*   `-1000 <= Node.val <= 1000`

**SOLUTION:**

    # Definition for a binary tree node.
    # class TreeNode:
    #     def __init__(self, val=0, left=None, right=None):
    #         self.val = val
    #         self.left = left
    #         self.right = right
    class Solution:
        def inorder(self, root, isLeft):
            if root:
                self.inorder(root.left, True)
                if isLeft and not root.left and not root.right:
                    self.total += root.val
                self.inorder(root.right, False)
        
        def sumOfLeftLeaves(self, root: Optional[TreeNode]) -> int:
            self.total = 0
            self.inorder(root, False)
            return self.total
How To Implement an Infinite Scroll with Vue and Nuxt
Tags: vue, javascript, nuxt, programming
Published: 2022-06-11 10:52:12

Infinite scrolling is a feature on websites and applications where a user scrolls down and reaches the bottom of the current page of content and then the next page of content is loaded and displayed [digital ocean](https://www.digitalocean.com/community/tutorials/vuejs-implementing-infinite-scroll).

My API response look like this, <small>built on django rest</small> - 
![API response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a71wg0uar3jlrxwnyrov.png)

And now I want to increase the page number and send request for next page result and merge data with my initial data object when user go bottom of page. 

```js
data() {
        return {
            productObj:[],
            rawObj:[],
            page:1,
        }
    },

mounted() {
    this.scroll()

   },

async fetch() {
       await this.fetchData()
       
   },

 methods:{
    scroll () {
      window.onscroll = () => {
        let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight

        if (bottomOfWindow) {
            this.page++
            if(this.rawObj.next){
                this.fetchData()
            }
        }
      }
    },
 async fetchData(){
        try{
           const res = await this.$axios.$get(`productByPagination/?page=${this.page}`)
           this.productObj.push(...res.results)
           this.rawObj = res

       }
       catch({response}){
           console.log(response)
       }


    },
}
```
### Explanation 
In first position I  set  page number 1 in data and send make initial request for storing 1st page data. Then scroll method is responsible when user goes bottom of page it will increase page number and send request to load second page data.
 ```js
let bottomOfWindow = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop) + window.innerHeight === document.documentElement.offsetHeight
```

`bottomOfWindow` return true if user go bottom of the page. And if we get true then this piece of code will execute-
```js
if (bottomOfWindow) {
            this.page++
            if(this.rawObj.next){
                this.fetchData()
            }
        }
```

### Note
In `productObj:[],` I stored only my desire result and in `rawObj:[],` I stored total response object. And in rawObj has `next` which help us to understand is their available any data. If available send another request or make stopped from send another request.
![null in next response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrpeqk2wvxqh49ue8d12.png)

Situation can be different in different API response.
MY JOURNEY AT AltSchool Africa
Tags: webdev, html, altschool, css
Published: 2022-06-11 10:47:43

It been 3 month now at AltSchool Africa a school of tech were you get to set you career in software engineering. things are all great, for the pass 2 month we were able to learn HTML,CSS as the foundation of becoming a software developers and now the 3rd month we start our journey with JavaScript fundamentals and all is going great check out my little achievement at https://www.github.com/Aliyugambo
Why is Accessibility important for front-end developers?
Published: 2022-06-11 10:39:01

As a front-end developer who has some experience with Accessibility, I tried to understand why Accessibility is important for our front-end developers.

**What is Web Accessibility?**
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.
Web accessibility also benefits people without disabilities - ones using mobile phones and smart TVs like the devices with small screens, older ones, ones using slow internet connection, etc.
**Why is it important for the front-end developers?**
In one word, Accessibility can positively impact SEO.
Across the world, 15% of people are living with a disability. That’s a large number! In fact, it’s 1 billion people. Accessible websites help people with disabilities to access and use digital content. It improves their user experience, and can make them feel more welcomed by your brand.
Web accessibility makes a huge impact in the online experiences of many.
There’s a considerable overlap between features that improve accessibility and SEO performance. By making your web pages accessible to everyone, you’re also boosting your chances of being found in search. 
**What can you do as a front end developer to keep your site accessible?**
- Use semantic html, and use it properly
Don’t use divs to build all of your layouts, instead consider using semantic html. Some of the big ones are: nav to build your navigation, use footer to build your footer, use section to wrap blocks on content, and use article to wrap articles.
- Use chrome’s built in accessibility tools
- Install the axe chrome extension
- Run lighthouse audits for accessibility on code changes.

Who has rich experience in Accessibility and What is your opinion?
Hi vijay how are you
Published: 2022-06-11 10:38:12

---
title: Hi vijay how are you
published: true
description: Hii viya how are your description
tags: 
# cover_image: https://www.google.com/imgres?imgurl=https%3A%2F%2Flookaside.fbsbx.com%2Flookaside%2Fcrawler%2Fmedia%2F%3Fmedia_id%3D549427729890622&imgrefurl=https%3A%2F%2Fwww.facebook.com%2FVIJAY-LAXMI-SAHU-473774459494414%2F&tbnid=6yByo8GSIMl52M&vet=12ahUKEwjplJ2DmqX4AhWTgGMGHVGADekQMygCegQIARAh..i&docid=b0FPwJim4mdbQM&w=1536&h=2048&q=vijay%20laxmi%20sahu%20dhamtari&ved=2ahUKEwjplJ2DmqX4AhWTgGMGHVGADekQMygCegQIARAh
# Use a ratio of 100:42 for best results.
---


# Hii Vijay How are you 

## Hey i am rizwan [chouhan]<https://thetimestack.com>
Codurance at DES - free remote sessions
Tags: codurance, conference, highlights, des2022
Published: 2022-06-11 10:35:25

Hola Amigos.
 
For those lucky ones, who are yet to experience the joy of learning Spanish, it means "hello friends" ;)
 
I have some amazing news.
 
Between the 14th and 16th of June, there is an absolutely amazing conference DES | Digital Enterprise Show
 
Wait, there is more. Have you heard of @Codurance, a consultancy that embraced #XP, and #PairProgramming? It shares with the community a lot via meetups, #OpenSource, Fireside Chats #podcast and other activities.
 
Well Codurance is attending attend DES | Digital Enterprise Show and  is giving numerous sessions, from "the role of principal craftsperson" to architecture and AI-enabled platform scaling.
 
Here comes the best part. As I understand, some Codurance events will be remote and are free to attend. I've counted 6 such events ;)
 
 
 
https://info.codurance.com/en/des-codurance-agenda?hsCtaTracking=dfaa46e0-13d7-42a9-8141-ecf2dda3e829%7C62f41ac9-029c-47d8-aee3-ac2588f52322#accordion-section
Zigzag Conversion
Tags: leetcode, dsa, theabbie
Published: 2022-06-11 10:30:40

The string `"PAYPALISHIRING"` is written in a zigzag pattern on a given number of rows like this: (you may want to display this pattern in a fixed font for better legibility)

P   A   H   N
A P L S I I G
Y   I   R

And then read line by line: `"PAHNAPLSIIGYIR"`

Write the code that will take a string and make this conversion given a number of rows:

string convert(string s, int numRows);

**Example 1:**

**Input:** s = "PAYPALISHIRING", numRows = 3
**Output:** "PAHNAPLSIIGYIR"

**Example 2:**

**Input:** s = "PAYPALISHIRING", numRows = 4
**Output:** "PINALSIGYAHRPI"
**Explanation:**
P     I    N
A   L S  I G
Y A   H R
P     I

**Example 3:**

**Input:** s = "A", numRows = 1
**Output:** "A"

**Constraints:**

*   `1 <= s.length <= 1000`
*   `s` consists of English letters (lower-case and upper-case), `','` and `'.'`.
*   `1 <= numRows <= 1000`

**SOLUTION:**

    class Solution:
        def convert(self, s: str, numRows: int) -> str:
            n = len(s)
            if numRows == 1:
                return s
            op = ""
            for i in range(numRows):
                curr = i
                down = True
                while curr < n:
                    op += s[curr]
                    if down:
                        if numRows - i - 1 > 0:
                            curr += 2 * (numRows - i - 1)
                        else:
                            curr += 2 * i
                    else:
                        if i > 0:
                            curr += 2 * i
                        else:
                            curr += 2 * (numRows - i - 1)
                    down = not down
            return op
Together we OpenSource
Tags: diversity, opensource, hackajob, community
Published: 2022-06-11 10:29:50

[Together we Opensource](ttps://www.meetup.com/togetherweopensource/)

The world is dying.

Well, we might be overly pessimistic, but the number of challenges is great and the number of efficient contributors to software solutions is not high enough. It has never been.
We need developers to help save water and energy, and prolong the lives of both humans and animals. The list of challenges is too long to list all of them here.

However, it takes months to find a suitable developer for a project, even in the world of finance, where money is not the biggest problem. Now try to imagine, how hard may it be for nature-related projects, like NationalTrust (UK), Greenpeace, and many others.

That is where we help. We help people of any degree of IT proficiency to get into OpenSource. We help people to become a true part of the Open Source Community. Our goal is to help them to impact society in the most positive way, while quickly and powerfully progressing their IT skills. Our goal is not to grow the “alike developers”, but rather to help each person to realize this individual’s strengths and build on these.
Every single person with the most basic IT knowledge can contribute to OpenSource, a lot.

No coding skills is actually required. Numerous roles in Open Source do not require coding skills.

Also, you might notice that your coding skills will just appear, at some point in the future ;)

We need to give this world a chance.
We need more contributors.
We need YOU.

P.S. Personally I want to help everybody to get a fair chance of getting a quality job. My focus is on supporting people from underprivileged groups and communities, but everybody is welcome.
I promise, I won't send away @MIT and @Oxford students as long as you behave nicely :)
Shopify Customer Profile Edit Page
Tags: shopify, liquid, app, tutorial
Published: 2022-06-11 10:22:25

Shopify is great for starting an online shop quickly & start selling your products. Shopify comes with all the essential features you need to start selling your products, managing orders/inventory accepting payments, etc.

After working on many Shopify stores as a developer, I noticed that there is one essential and basic feature that is missing in Shopify.

**Customer Edit Profile Page in Shopify** is not something that you get out of the box in a Shopify store. As a store owner, you'll want your customer to update their latest details in their Profile for better communication. Shopify doesn't have an Edit Profile Page in the account section which is weird because almost all Big E-commerce website gives their customer an option to update their profile.


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

After doing some research, I found out that there is no easy way to add an **Account update page in Shopify**. There is one app that used to work fine before but is not maintained anymore so I decided to develop one app for the stores I was working on.

The app is very simple and only provides a single feature for now, which is the Edit Profile page for Shopify stores. I uploaded the app to [Shopify App Store](https://apps.shopify.com/customer-profile-editor-1) so other stores can also get benefited from it. 

[Continue reading...](https://softopia.tech/how-to-create-a-customer-edit-profile-page-in-shopify/)
Array of Object Manipulation in JavaScript
Tags: javascript, beginners, webdev, tutorial
Published: 2022-06-11 10:11:01

## how to get the difference between two arrays of objects and merge in a single object?

---

### two array of objects


```js
const befor = [
  {
    one: "123",
    two: "124",
    three: "127",
  },
];

const after = [
  {
    one: "123",
    two: "125",
    three: "128",
  },
];

```


### We get the changed value only from the two array

```js
let newChanges = Object.keys(befor[0]).map(
  (item) => befor[0][item] !== after[0][item] && { [item]: after[0][item] }
);

console.log(newChanges)
```

### output:


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

We do not need the **boolean **value here.
Don't worry about it. 
I will tell you about this later.

```js
let result = Object.assign({}, ...newChanges);
console.log(result)
```

### now output:

> { two: '125', four: '130' }

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

### WHF?

Object.assign( ) create an Object. 
This requires **key** and **value**. 

But **Boolean** value is a value of one. 

Therefore **Object.assign( )** does not recognize the **boolean** value

But I can not say this is the right reason 😅

### another solution

```js
newChanges = newChanges.filter(Boolean)
console.log(newChanges);
```
**output:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4p40xxwo56xe7hw900q4.png)
 
### what happen?

The filter method filters out all the values that return false when passed to a function. 
When you use filter and pass a Boolean constructor.

[read about it👀](https://www.educative.io/edpresso/how-to-quickly-filter-out-all-falsy-values-from-an-array-in-js)


---

### full Code here 👨‍💻:

```js

const befor = [
  {
    one: "123",
    two: "124",
    three: "128",
    four: "132",
  },
];

const after = [
  {
    one: "123",
    two: "125",
    three: "128",
    four: "130",
  },
];

let newChanges = Object.keys(befor[0]).map(
  (item) => befor[0][item] !== after[0][item] && { [item]: after[0][item] }
);

newChanges = newChanges.filter(Boolean)
// console.log(newChanges);

let result = Object.assign({}, ...newChanges);
console.log(result);

```

### result 🎉:


> { two: '125', four: '130' }

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

---

### conclusion 😊

Just wanted to share this with you 😁

If you find another great way to do this don't forget to share here.