teleren/devto huggingface dataset:
RxJS Operators: buffer
Tags: rxjs, javascript, typescript, webdev
Published: 2023-06-26 20:39:07

RxJS is a JavaScript library that enables the creation of asynchronous and event-based programs. The main type is the `Observable` and a suite of functions and operators are provided to make it easier to work with the data coming through. This series will detail those operators (and a few stand-alone functions) and provide examples of their use.

In this post, we’re going to cover the `buffer` operator.

## What does it do?

The `buffer` operator lets us bundle together values from an observable and process them all together. We pass `buffer` a second observable that controls when to output values. Once the second observable emits a message all the collected values will be pushed through the rest of the pipeline as an array.

## Example

```tsx
import { Subject, buffer, interval } from 'rxjs';

const bufferTrigger$ = new Subject<void>();

interval(1000)
    .pipe(buffer(bufferTrigger$),)
    .subscribe(x => {
        console.log(x);
    });

setInterval(() => {
    bufferTrigger$.next();
}, 5000);
```

We’re using `interval` to provide us with incrementing numbers every second. Every 5-seconds `bufferTrigger$` will fire and force `buffer` to pass whatever values it has to the rest of the pipeline. If we run this we see:

```bash
[ 0, 1, 2, 3 ]
[ 4, 5, 6, 7, 8 ]
[ 9, 10, 11, 12, 13 ]
[ 14, 15, 16, 17, 18 ]
```

We can see that buffer has spent 5 seconds collecting values. Once the trigger fired it built them into an array and forwarded that on. Just make sure the number of values coming from the original observable and the timing on the trigger are aligned. Otherwise, `buffer` will end up collecting a lot more values than you expect, which may cause issues. We don’t want to run out of memory because we’ve not cleared the buffer.

The source code for this example is available on GitHub:
{% embed https://github.com/drownedintech/rxjs-operators %}
🙌 API marketplace & Open Innovation w/ UNC students 🎓
Tags: java, api, codenewbie, showdev
Published: 2023-06-26 20:33:01

## ℹ️ About

Each year, students of [University of New Caledonia](https://unc.nc/en/) gives to students and enterprises the opportunity to work together on [_"projets tutorés"_](https://iut.unc.nc/espace-entreprises/projets-tutores/) so students can work on real life projects with IT professionals.

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/763oow4gkez5zk0khuvg.png)](https://iut.unc.nc/espace-entreprises/projets-tutores/)

This project has been realized in this context.


## 🎯 Pitch

What you'll see in this article is how and what has been achieved to reach the following target:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8ogjzu9060xxl2jtv24.png)

## 🧑‍🤝‍🧑 Team

Nothing can be done without a team, here we are:

- 👦 Kevin @kpetit
- 👦 David @davnox900 
- 👦 Irwan @isoernc 
- 👨 Adrien @adriens

## 🍿 Showtime

Enough talk, let's see whathas been delivered, and how:

{% youtube QHfvUnJQDl0 %}

## 🔖 Resources

- [`opt-nc/template-projet-tutore-unc`](https://github.com/opt-nc/template-projet-tutore-unc) GitHub template repository

{% github opt-nc/domaine-nc-javafx %}
Let’s celebrate the milestones you’ve hit this year!
Tags: discuss, career, growthmindset
Published: 2023-06-26 20:28:00

---
title: Let’s celebrate the milestones you’ve hit this year!
published: true
series: Monthly Challenge, Mid-year Check-in
description: Reflect on your progress this year and update your goals accordingly.
tags: discuss, career, growthmindset
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Mid-Year Check-in prompt: 

**Celebrate** the milestones and achievements you’ve reached this year. Share your successes, no matter how big or small, and acknowledge the hard work you’ve put into your journey!
The Power of Optional Chaining in JavaScript.
Published: 2023-06-26 20:26:38

**Optional chaining**, introduced in ECMAScript 2020, is a language feature that provides a succinct way to access nested properties and methods without explicitly checking for null or undefined values at each level. It simplifies the code and reduces the likelihood of encountering unexpected errors.

Let's dive into some examples to understand how optional chaining works:

**Accessing nested properties:**
Consider an object called user that has properties like name, address, and city. Traditionally, to access the city property, we would need to perform null checks at each level:

```
const city = user && user.address && user.address.city;
```
With optional chaining, the same can be achieved in a more concise manner:

```
const city = user?.address?.city;
```
If any intermediate property in the chain is null or undefined, the result will be undefined. This prevents throwing an error and allows for graceful handling of missing values.

**Calling nested methods:**
In addition to accessing properties, optional chaining also enables calling nested methods without worrying about potential null or undefined values. Let's consider an object person with a nested getFullName() method:

```
const fullName = person?.getFullName?.();
```
If the person object or the getFullName() method is null or undefined, the expression will gracefully evaluate to undefined without throwing an error.

**Optional chaining with arrays:**
Optional chaining can also be used with arrays to access elements at a specific index. Consider an array myArray:

```
const element = myArray?.[3];
```
If myArray is null or undefined, or if the index is out of bounds, the expression will return undefined instead of throwing an error.

It's important to note that the optional chaining operator only short-circuits the evaluation if the value is null or undefined. For any other falsy values like false, 0, or an empty string, the evaluation continues.
How To Create Website App Without Create-React-App
Published: 2023-06-26 20:07:07

I have created an app of this [Apk sheep](https://www.apksheep.com/) and [traffic rider times](https://www.trafficridertimes.com/) using this code which really works that's why I am sharing this code with you. You can create an app for your website with this code I have created.

please note don't use it in production

First create a html file called index.html

[https://bit.ly/3JxPUmN](https://bit.ly/44gCdjZ
)
[https://bit.ly/3JxPUmN](https://bit.ly/3JxPUmN
)
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React without create-react-app</title>
</head>
<body>

</body>
</html>
```

**add root div as react needs to render**

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  + <div id="root"></div>
</body>
</html>
```
**Then add 3 scripts tag to work with react
**

```
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
```
**voila! write your react code within tag make sure the script tag have type of text/babel
**

```
<script type="text/babel">
function Welcome() {
  return <h1>Hello React World!</h1>;
}

ReactDOM.render(<Welcome/>, document.getElementById('root'));
</script>
```
**Final code will be like this
**

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
 function Welcome() {
  return <h1>Hello React World!</h1>;
 }

 ReactDOM.render(<Welcome/>, document.getElementById('root'));
</script>
</body>
</html>
```
On Overview of Concurrency Control in PostgreSQL
Tags: bitnine, postgres, postgressql, apacheage
Published: 2023-06-26 19:41:44

Today, we will  take a  look at concurrency control in PostgreSQL.
It is a **control mechanism**  that maintains **isolation** and  **atomicity**,  which are some of  the important properties that are required to run many transaction parallelly  in the database. 
Overall, concurrency control  can be categorized into three main techniques:

- _Multi-version Concurrency Control (MVCC)_
- _Strict Two-Phase Locking (S2PL)_
- _Optimistic Concurrency Control (OCC)_

Whenever a data item is read through a transaction, one of the versions is selected by the system to make sure that the system ensures isolation of the transaction. 
The main reason MVCC is considered advantageous is that readers and writers don't block each other.

In some versions of RDBMS and PostgreSQL, a variations of MVCC is used, known as **Snapshot Isolation(SI)**.
Rollback segments are used by some database systems to implement **SI**. Whenever an item is being read, an appropriate version of an item is used by PostgreSQL in response to an individual transaction that is using **visibility check rules**.

Whenever a transaction is initiated in PostgreSQL, a unique identifier is assigned to each transaction known as a **transaction id(txid)**. This txidis a 32-bit unsigned integer with approximately 4.2 billion unique combinations. Whenever a transaction starts, the built-in _txid_current()_ function returns the current txid.

The above was a short overview of concurrency control in PostgreSQL.
Required in Typescript
Tags: typescript, angular, react, javascript
Published: 2023-06-14 09:09:38

Today, we are going to explore one hidden gem of the typescript.  In some cases, properties of the type can be optional.

As in,
Type Props {
  a?: number;
  b?: string;
}
 
const obj: Props = { a: 5 };
 
const obj2: Required<Props> = { a: 5, b: 2 };

Here, for obj2, all the properties are mandatory when we add Required. If we fail to do so, we get the below error
Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

In the real time, the best example I could think of is:

Let's say you have a TypeScript interface called Book representing a book object. 
The Book interface has some optional properties, but you want to create a function that accepts only books with all the properties being required. You can use Required<Book> to achieve this:

interface Book {
  title?: string;
  author?: string;
  genre?: string;
}

function processBook(book: Required<Book>) {
  // Process the book object
}

// Usage
const book1: Book = {
  title: "The Catcher in the Rye",
  author: "J.D. Salinger"
};

const book2: Required<Book> = {
  title: "To Kill a Mockingbird",
  author: "Harper Lee",
  genre: "Fiction"
};

processBook(book1); // Compilation error: Missing required properties
processBook(book2); // Valid, as all the properties are required


In this example, we have the Book interface representing a book object. The properties title, author, and genre are all optional as denoted by the ? symbol. We then define a function called processBook that accepts a book object with all the properties being required.
When we try to pass book1 to processBook, TypeScript raises a compilation error because book1 is of type Book, and it might be missing some required properties. However, book2 is explicitly declared as Required<Book>, providing all the required properties, and thus it is a valid argument for the processBook function.
Understanding the process and memory architecture in PostgreSQL
Tags: postgres, apache, database
Published: 2023-06-26 19:14:25

PostgreSQL is a client/server type relational database management system. 

- It has multi-process architecture .

- Runs on single host.

Now we will discuss the types of processes in it.

##Processes in PostgresSQL server

**1. Postgres Server Process**

The parent process of all the process is Postgres server process, also known as _postmaster_ in previous versions.

- 
All other types of processes are initiated by this process. 

- 
The default port number on which Postgres server listens is `5432`.

- 
More than one PostgreSQL servers can run on the same host but their port number should be different.

**2. Backend Process**
Backend Process (also known as postgres) is started by postgres server process. Its responsibility is to handle all the queries of the connected client. 

- As it is allowed to operate only one database, you have to specify the database while connecting to the server.

- It is connects to clients by a single TCP connection

- PostgresSQL allows multiple clients connection simultaneously but you have specify the maximum number of clients that can connected at a time and this configuration is done through `max_connections` parameter. The default value of this parameter is 100.

**3. Background Process**
Each feature/function has its own background process. For example:

- `CHECKPOINT` is used to write dirty buffers from memory to disks.

- `VACUUM` is used to remove the dead tuples to free up the space.

**4. Replication Associated Process**
The processes that are used to manage the replication of database are known are replication associated processes. 

- 
They are used to perform the _streaming replication_ in which a change in primary database is also done in other replicas of it.

**5. Background Worker Process**
These custom background processes that are implemented by user are known are background worker process.

- 
In addition to the conventional database operations, these processes can also do other tasks. In short, user can add customized tasks in addition to regular operations

##Memory architecture in PostgresSQL server

Next comes the memory architecture of PostgreSQL that has two types

**1. Local Memory Area**

- This area is allocated by backend processes for their own use.
- It is further divided into sub-areas whose sizes are either fixed or variable.

**2. Shared Memory Area**

- This area is allocated by PostgreSQL server when it starts up.

- It is divided into fixed sub-areas.

##References:
[https://www.interdb.jp/pg/pgsql02.html](url)
How to configure 1Password SSH Key and automatically sign your commits on GitHub?
Tags: ssh, 1password, git, github
Published: 2023-06-26 19:06:08

- First generate ssh key using [1Password](https://1password.com/) and save it in Vault. Optionally you can add your existing keys manually.

- On 1Password `Settings -> Developer` check `Use the SSH agent` box.

- Create `allowed-signers` file, Sublime Merge complains if it can't find this file and shows all commits as invalid.

```shell
mkdir -p /home/$(whoami)/config/git/
touch /home/$(whoami)/config/git/allowed-signers
``` 

- Update your local git configuration `~/.gitconfig`

```ini
[gpg]
	format = ssh
[gpg "ssh"]
	program = /opt/1Password/op-ssh-sign
	allowedSignersFile = /home/user/config/git/allowed-signers
[commit]
	gpgsign = true
[user]
	signingKey = ssh-ed25519 pubkey
	name = Your name
	email = email@example.org
[init]
	defaultBranch = main
```

- Update local SSH configuration to use 1Password's SSH agent for all hosts `~/.ssh/config`

```ssh-config
Host *
        IdentityAgent ~/.1password/agent.sock
```

- Finally Add your public key to your GitHub account `Settings -> SSH and GPG keys -> Signing keys`

1Password will pop-up to authorize the use of your private key and if you generated your private key in the app it is never saved on the computer.
Understand the concept of dependency list in useEffect in reactjs
Tags: webdev, javascript, react, beginners
Published: 2023-06-26 18:57:59

When using the `useEffect` hook in React, the  plays a crucial role in determining when the effect should be run. Let's explore the differences between adding and not adding a dependency list in more detail:

1. **Adding a Dependency List**:
   ```jsx
   import React, { useEffect, useState } from 'react';

   function MyComponent({ prop1, prop2 }) {
     useEffect(() => {
       // Effect code here
     }, [prop1, prop2]);

     // Rest of the component code
   }
   ```

   - When you provide a dependency list (`[prop1, prop2]`), the effect will only be triggered if any of the dependencies change between renders. The effect will run initially after the initial render and then again whenever the listed dependencies change.
   - If any of the dependencies have changed, the previous effect cleanup function will run before the new effect is triggered.
   - This approach allows you to control when the effect should be re-executed based on specific prop or state changes, preventing unnecessary re-runs of the effect when those dependencies remain unchanged.

2. **Not Adding a Dependency List**:
   ```jsx
   import React, { useEffect } from 'react';

   function MyComponent() {
     useEffect(() => {
       // Effect code here
     });

     // Rest of the component code
   }
   ```

   - When you don't provide a dependency list (or provide an empty list `[]`), the effect will run after every render of the component, including the initial render.
   - This means that the effect code will be executed on every component render, regardless of whether any specific prop or state has changed.
   - It can lead to performance issues and unnecessary re-execution of code if the effect is not actually dependent on any specific prop or state change.

In summary, by providing a dependency list, you control when the effect should be re-executed based on specific prop or state changes. This helps optimize performance by preventing unnecessary re-runs of the effect. On the other hand, not providing a dependency list will cause the effect to run after every render, potentially leading to performance issues if the effect doesn't actually depend on any specific changes.
Kubernetes Architecture Diagram: Quick overview
Tags: kubernetes, devops, beginners, containers
Published: 2023-06-26 18:47:40

The Kubernetes Architecture Diagram is not an easy system to understand at first, but when you do, your life and time at work will become so much easier.

Companies that want to containerize their apps have to use containers on a huge scale as they don’t use one or two containers, but dozens and even 100’s to ensure high availability and load balance the traffic.

That’s why Kubernetes is a leader in Container Orchestration.


## Components of the Kubernetes architecture diagram

Nodes (set of machines) and Control Plane:

✅The Kubernetes cluster consists of at least one worker node deployed containerized applications and one master node or control plane that manages the worker nodes.

✅The Control plane or master node consists of the Kube-API server, Kube-scheduler, and Kube-controller-manager, whereas the worker node consists of Kubelet, Kube-Proxy, and Container Runtime.

Here’s a quick overview of those components.


![Kubernetes Architecture Diagram ClickIT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7id6zbuwr2xhctffolsu.jpeg)

Amazingly life-changing right? 👀

Kubernetes has proved to be an excellent solution for scaling, supporting diverse and decoupled stateful and stateless workloads, and providing automated rollbacks and rollouts. 

All while also being a fantastic platform that allows you to orchestrate your applications (container-based).

Click [here](https://www.clickittech.com/devops/kubernetes-architecture-diagram/?utm_source=devto&utm_medium=referal&utm_campaign=guest-posting) for the full explanation on the Kubernetes Architecture Diagram.
Elon Musk vs. Mark Zuckerberg 🤪🥊
Tags: discuss, watercooler
Published: 2023-06-26 18:40:40

You probably heard the news, but here's the TL;DR — [Elon Musk challenged Mark Zuckerberg to a "cage match" over Twitter](https://twitter.com/elonmusk/status/1671364992665264131) and Zuckerberg responded on Instagram with the words “Send me location”. Musk then messaged back with "Vegas Octagon". 

Here's [a Medium post](https://medium.com/@erikwiedenmann/elon-musk-proposes-location-for-cage-fight-with-mark-zuckerberg-d498c580ed5d) for a slightly longer breakdown.

![MTV’s “Celebrity Deathmatch”, from the late 90’s, fed the public’s imagination (Illustration: Erik Wiedenmann)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sthidwnpgxk0qwspukfo.png)

Only time will tell if this match happens, but in the meantime, I'm curious about what y'all think... 
- Do you think this fight will happen?
- Who do you think will win if it does? 
- Of the two, who would you most like to see punched in the face and why?
Contributor Day at WCEU23 in Athens
Tags: wordpress, documentation, wordcamp, wceu
Published: 2023-06-26 18:34:44

At WordCamp EU in Athens this year, I had the pleasure of joining the Documentation Team on Contributor day, lead by Melina Cap ( @zzap ). The Documentation Team was very welcoming and it allowed me to immediately jump right into working on real issues within the hour after reading some brief [onboarding material](https://make.wordpress.org/docs/2022/06/13/live-onboarding-sessions-for-the-documentation-team/).

The process of contributing to the Documentation Team is fairly straightforward, and anyone of any experience level can participate. As a matter of fact, people with no experience actually have an edge, as they can more easily find the gaps or mistakes in the documentation. All you need is a [wp.org](https://wp.org) and a [GitHub](https://github.com) account. There is no need to "pull down", set up a repository, or have a dev environment setup; just start contributing by leaving comments with your edits and suggestions on the GitHub issue.

On that note, the [WordPress Playground](https://playground.wordpress.net) has launched, and you can now run WordPress in your browser, facilitating the process greatly. 

So now that I was off to a great start and knew the process for contributing, I was able to update the screenshots and record some new video for two issues during the day.

When I returned from Athens, I joined the #docs [WordPress Slack](https://make.wordpress.org/chat/) channel, and attended my first online documentation team meeting. (They are held every Tuesday, and every 4th meeting is an online contributor day.)

Since joining the team I have contributed to at least six issues, and I find it incredibly rewarding to finally be able to give back to the WordPress community.

If you would like to join the Documentation Team, be sure to check out the onboarding material [here](https://make.wordpress.org/docs/2022/06/13/live-onboarding-sessions-for-the-documentation-team/). If you would like to join any of the other WordPress contributor teams, be sure to check out [make.wordpress.org](https://make.wordpress.org).