teleren/devto huggingface dataset:
Understanding TypeScript Utility Types: Pick and Omit
Tags: programming, beginners, typescript, development
Published: 2023-07-26 14:17:50

TypeScript provides several utility types to facilitate common type transformations.

These good features make it easy to manipulate types, either by selecting specific properties or removing unwanted ones from objects.

In this article, we'll demystify TypeScript's utility types, focusing on **Pick** and **Omit.** Whether you're new to TypeScript or a pro, understanding these concepts will improve your coding skills.

These utility types make it easy to work with just the data you need and simplify object manipulation in TypeScript.

## Pick

Allows you to create a new type by selecting specific properties from an existing type.

```ts
interface User {
  id: number;
  username: string;
  email: string;
  isAdmin: boolean;
  createdAt: Date;
}
```
If, you want to create a new type that only contains the essential information for displaying a user's profile, like their username and email. You can use **Pick** to achieve this:

```ts
type UserProfil = Pick<User, "username" | "email">;

const user: UserProfil = {
  username: "Ibrahim Bagalwa",
  email: "ibrahim.bagalwa.dev@gmail.com",
};
```
**`UserProfil`** is a new type created using **`Pick`**, which includes only the `username` and `email` properties from the original **`User`** interface. 

It allows you to work with a more concise representation of a user's profile without including unnecessary details.

## Omit

Allows you to create a new type by taking all the properties from an existing type (Type) and then removing specific properties represented by Keys. 

It's the opposite of the **`Pick`** utility type.

```ts
interface UserSettings {
    darkMode: boolean;
    notifications:boolean;
    showEmail: string;
    language: string;
}
```
If you want to create a new type that excludes sensitive settings, like the user's email visibility. You can use **Omit** to achieve this:

```ts
type PublicUserSettings = Omit<UserSettings, "showEmail">

const userSettings: PublicUserSettings = {
  darkMode: true,
  notifications: true,
  language: "en",
};
```
**`PublicUserSettings`** is a new type created using **`Omit`**, which includes all the properties from the original **`UserSettings`** interface except `showEmail`.

It allows you to create a type that represents only the public settings, hiding sensitive data from being exposed.

**Pick** allows you to choose certain properties from an object, while **Omit** lets you remove specific properties. Both are useful for working with precise data in TypeScript.
Uclid: Maths Game Built With React
Tags: react, javascript, typescript, webdev
Published: 2023-07-26 14:08:48


## Hello Dev Community,

![My Picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svqh276jyuecxoa9cjez.jpg)
I'm Ayomide Atayero also known as Lens and this is my first appearance on the Dev Community. In introduction of myself, I'll like to flaunt a project I have been working on for the past few weeks.

I am a software engineer specialized in frontend development and severless backend using React and Firebase respectively. I am also experienced in the use of tailwindCSS and I write React in both JavaScript and TypeScript.

In putting my skills into practice, I built a medium scale app to test my consistency in clean code and how well I can maintain a more complex codebase. Uclid is a web app that helps users get better at simple arithemetics. It asks simple maths questions from users and helps them see how many they can answer within the span of one minute.

As part of challenging my programming skill, I added a multiplayer feature which allows friends come together to see which of them can score the most in a game. The multiplayer feature is characterized with realtime updates, ranking and the same questions across all connected players.

I experienced a lot of challenges in building this project which has really shaped my programming and problem-solving skills. I am also looking forward to add more features such as difficulty mode, avatars, fully-fledged user profile, world game, leaderboard and much more.

Anyways, I am pleased to release my MVP-1 which can be accessed [Here](https://uclid.vercel.app)

I will love to hear your thoughts and reviews on this project.
Thanks.
AWS Cloud Quest Networking
Tags: cloudquest, aws, game, cloud
Published: 2023-07-26 14:06:29

Solution for task "Connection on Premises Networks". 

Video about the problem and possible solutions for the company: [Problem and suggest for solution](https://www.youtube.com/watch?v=vSNYygtX7xc)

PRACTICE mode [it's part of solution](https://www.youtube.com/watch?v=LvPmFuIapDw)

IT'S IMPORTANT TO FINISH PRACTICE MODE TILL THE END, AND THEN USE THESE COMMANDS FOR TURN OFF AND TURN ON TUNNEL2. 

In practice mode is MUST to be turned both tunnels UP, on the beginning when user setup tunnels using configuration file, where are IP address and Customer Gateway. 

First file which you need to download is in Lab part on the beginning of practice mode, second file which is important to download is "Download Configuration" in **VPN Connections**.

Check the IP address of tunnel1 and tunnel2 and copy in https://www.memonotepad.com/, it can be useful to copy some details, like IP. 


![vpn-tunnels](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iek9dl6di14osr9do194.png)


1. In the setting up tunnel1 and tunnel2 in practice mode, pay attention that all tunnels are UP. You will need to see that tunnel1 and tunnel2 are up. 

2. To turn off, tunnel1, you need to use command in DIY section. 
    ```
       sudo strongswan down tunnel1
    ```

3. To turn on tunnel2, use command : 
    ```
       sudo strongswan up tunnel2
    ```

4. Check the status of tunnel: 
   
       ```
       sudo strongswan status
       ```

AWS CloudQuest Networking [playlist problems, practice mode and solutions.](https://www.youtube.com/watch?v=aytTu0NqVVk&list=PL5wpffL0WhBRoBCNQeNXJLfr6s1Gfm0mU)

GitHub [playlist](https://github.com/JustPLegend/AWS-Cloud-Quest-Networking) for Cloud Quest Networking.
Run Vue App inside PHP
Tags: vue, php, seo
Published: 2023-07-26 13:57:13

Hi there!

I have created a very simple two pages SPA using VUE & Vite. One page is Listview containing list items and the other page is a DetilView to show the details of the selected item.

I want to achieve both SSR + SPA behavior using (PHP + VUE). I cannot use other SSR frameworks at the moment. How can I combine both (PHP & VUE) so that I get SEO benefits from PHP & SPA functionality from VUE.

THANKS!!!
.match vs .gsub
Published: 2023-07-26 13:55:00

Today I played around with .match and .gsub to learn the differences between the two. Instinctively, I always lean toward using .match even though I have to write extra logic to solve some exercises with it, so I used gsub today and leaned into being uncomfortable. I discovered that gsub is more efficient with replacing characters you want replaced and match is better for finding out if a pattern exists.
Use the grammar correction API provided by GPT2API to fix English grammar errors.
Tags: javascript, chatgpt, programming, tutorial
Published: 2023-07-26 13:32:54

Using GPT2API is easy to create API. So I create a grammar correction API and make it public to the community.

### Prompts

```
You're a native English speaker, and you're good at correcting the grammar inside your statements. Please correct the wrong grammar in the statements provided by the user, and output it in the following JSON format:  {"result":"<right sentence>"}
```
**Visit this link to get more details**
[https://aicanvas.app/gpt/run?id=100011](https://aicanvas.app/gpt/run?id=100011)

### Call the API in your project
#### Get the token
Go to page [https://aicanvas.app/gpt/account/api](https://aicanvas.app/gpt/account/api) to get the token.

#### Copy code
Javascript code for demo use, you should replace the <token> in the code.
**Javascript**
```javascript
var md5 = require('js-md5');
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var timestamp = parseInt(Date.now()/1000)
var token = "<token>"
var sign = md5(token + timestamp)

var raw = JSON.stringify({
  "timestamp": timestamp,
  "app_id": "1",
  "sign": sign,
  "api": 100011,
  "model": "gpt-3.5-turbo",
  "max_tokens": 2048,
  "query": "$QUERY"
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("https://aicanvas.app/api/gpt/call", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));
```

Here is the Golang code, replace the <token> before you run it.
```Golang
package main

import (
  "fmt"
  "strings"
  "time"
  "net/http"
  "io/ioutil"
  "crypto/md5"
  "encoding/hex"
)

func Md5(text string) string {
    hasher := md5.New()
    hasher.Write([]byte(text))
    return hex.EncodeToString(hasher.Sum(nil))
}

func main() {

  url := "https://aicanvas.app/api/gpt/call"
  method := "POST"
  token := "<token>"
  ts := time.Now().Unix()
  sign := Md5(fmt.Sprintf("%s%d", token, ts))

  payload := strings.NewReader(fmt.Sprintf(`{"timestamp":%d,"app_id":"3","sign":"%s","api":5,"model":"gpt-3.5-turbo","max_tokens":2048,"query":"abc"}`, ts, sign))

  client := &http.Client {
  }
  req, err := http.NewRequest(method, url, payload)

  if err != nil {
    fmt.Println(err)
    return
  }
  req.Header.Add("Content-Type", "application/json")

  res, err := client.Do(req)
  if err != nil {
    fmt.Println(err)
    return
  }
  defer res.Body.Close()

  body, err := ioutil.ReadAll(res.Body)
  if err != nil {
    fmt.Println(err)
    return
  }
  fmt.Println(string(body))
}
```

### Try it
Go to page [https://aicanvas.app/gpt/run?id=100011](https://aicanvas.app/gpt/run?id=100011), then login and copy code to test the API.
AI Assistant for Secure Code Delivery
Tags: webdev, programming, devops, react
Published: 2023-07-26 13:30:00

## [Tabnine](https://www.aiforme.wiki/ai/tools/Tabnine) is an AI-powered assistant designed to accelerate code delivery while maintaining the utmost privacy and security.

With over 30% code automation, Tabnine helps developers boost productivity and efficiency by adapting to their codebase and reflecting their organization's knowledge and coding practices. Trusted by millions of developers worldwide, Tabnine ensures that your code remains safe, compliant, and free from copyleft exposure.

## Key Features of Tabnine:

**AI You Can Trust:**
Tabnine is trained exclusively on permissive open-source repositories, eliminating privacy, security, and compliance risks. Developers can rely on its accuracy and integrity for code suggestions.

**Privacy and Compliance:**
Tabnine ensures your code's privacy by not training on it unless you choose to connect your codebase. When connected, your code remains in your environment, safeguarding your intellectual property.

**Reflects Organizational Knowledge:**
Tabnine can be locally adapted to your codebase and knowledge base, incorporating your coding styles and best practices. This ensures maximum value for your team and seamless integration with your development workflows.

**Fully Isolated Mode:**
For enhanced security, Tabnine can run in fully isolated mode, allowing you to host it in your preferred environment—secured SaaS, on-premise, or your Virtual Private Cloud (VPC).

**Centralized Policy:**
Tabnine offers centralized policy enforcement, enabling you to enforce configuration policies across your organization consistently. This ensures uniformity in AI assistance and adherence to coding standards.

**Conclusion:**
[Tabnine](https://www.aiforme.wiki/ai/tools/Tabnine) is the go-to AI assistant for developers seeking to expedite code delivery while prioritizing privacy, security, and compliance. 

With its impressive code automation, adaptable knowledge base, and fully isolated mode, Tabnine offers a trusted solution for seamless code suggestions and enhanced productivity. Embrace [Tabnine](https://www.aiforme.wiki/ai/tools/Tabnine) to empower your development team with efficient, secure, and compliant coding practices, leveraging the power of AI for optimized code delivery. 

Boost your coding efficiency and trust Tabnine's expertise to elevate your development process to new heights.
⚠️Is jobs in Web Development are still rising or not?
Published: 2023-07-26 13:06:23

I'm learning web Development but sometimes got distracted by youtube thumbnails that **Web development** is Dead in future!


Can any one show interest and write your review on it!
⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
Run React build inside PHP
Tags: react, php, seo
Published: 2023-07-26 12:58:57

Hi there!

I have created a very simple two pages SPA using React 18 & Vite. One page is Listview containing list items and the other page is a DetilView to show the details of the selected item. 

I have deployed my react build to a server already, but instead of serving my app directly, I want to render my app inside PHP, I want to use PHP for SEO (can't use Next.js or any other SSR frameworks).

I want to achieve both SSR + SPA behavior with using PHP + React 
Check below image, that's how I'm trying to do it. Icon & Titles are being loaded but whole page is empty even though React is being rendered!

Any help would be apricated! 

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zmkj1o9drpatf1240fn.png)
React CountDown component
Published: 2023-07-26 12:58:31

I just created a custom React countDown component and will share you my experience. In order to have a react countdown component that displays the remaining days, hours, and minutes, You'll need to set the target date for the countdown, and the component will calculate the time remaining and update it in real-time. 


```
import React, { useState, useEffect } from 'react';

const Countdown = ({ targetDate }) => {
  const calculateTimeRemaining = () => {
    const now = new Date().getTime();
    const target = new Date(targetDate).getTime();
    const timeRemaining = target - now;

    const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));

    return { days, hours, minutes };
  };

  const [timeRemaining, setTimeRemaining] = useState(calculateTimeRemaining());

  useEffect(() => {
    const interval = setInterval(() => {
      setTimeRemaining(calculateTimeRemaining());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      {timeRemaining.days} days, {timeRemaining.hours} hours, {timeRemaining.minutes} minutes remaining
    </div>
  );
};

export default Countdown;
```



In this component, I calculate the remaining days, hours, and minutes (adding seconds is easy) between the current time and the target date using the calculateTimeRemaining function. The setInterval inside the useEffect is used to update the time remaining every second (1000ms). The countdown will automatically update as time passes.

To actually use this countdown component in your app, simply import and include it, passing the target date as a prop:

```

import React from 'react';
import Countdown from './Countdown';

const App = () => {
  const targetDate = new Date('2023-12-31T23:59:59'); // Replace this with your target date

  return (
    <div>
      <h1>Countdown Timer</h1>
      <Countdown targetDate={targetDate} />
    </div>
  );
};

export default App;
```

 Please replace the targetDate value with your desired date in the format YYYY-MM-DDTHH:mm:ss.
What is First Class Function? First Class Function in JavaScript
Tags: javascript, interview, tutorial, firstclassfun
Published: 2023-07-26 12:52:02

First-class functions are a concept in programming languages that refers to when functions in that language are treated like any other variable. For a language to support first-class functions, it needs to allow functions to be assigned to variables, passed as arguments, and returned from other functions, all without any restrictions. 

JavaScript is one of those languages that treats functions as first-class citizens. This means that in JavaScript, you can do the following:

1. Assign a function to a variable:

```javascript
let greet = function() {
    console.log("Hello, world!");
}

// You can then invoke this function using that variable.

greet(); // This will output "Hello, world!" to the console.
```

2. Pass a function as an argument to another function:

```javascript
function greet() {
    console.log("Hello, world!");
}

function callFunction(fn) {
    fn(); // Call the function
}

callFunction(greet); // This will output "Hello, world!" to the console.
```

3. Return a function from another function:

```javascript
function createGreeter(name) {
    return function greet() {
        console.log("Hello, " + name + "!");
    };
}

let greeter = createGreeter("world");

greeter(); // This will output "Hello, world!" to the console.
```

4. Store functions in data structures:

```javascript
let funcs = [function () { console.log("Hello"); }, function () { console.log("world!"); }];

// You can then invoke these functions.

funcs[0](); // This will output "Hello" to the console.
funcs[1](); // This will output "world!" to the console.
```

5. Functions can have properties and methods since they are objects:

```javascript
function greet() {
    console.log("Hello, world!");
}

greet.language = "English"; // Assign property

console.log(greet.language); // Outputs: English
```

In a nutshell, JavaScript allows us to use and manipulate functions just like any other object - we can store functions in variables, pass them around, create on the fly, etc. This ability to use functions as first-class objects with no restrictions is what makes JavaScript a very powerful and flexible language, especially for functional programming paradigms.

Thank you for reading, please follow me on Twitter, i regularly share content about Javascript, and React and contribute to Opensource Projects

Twitter-https://twitter.com/Diwakar_766

Github-https://github.com/DIWAKARKASHYAP
Here's How To Create Your First PostgrSQL Extension Part 1
Tags: postgressql
Published: 2023-07-26 12:25:05

The following blogs will target the most basics of creating a PostgreSQl extension, at the end you should become pretty familiar with what's required to create an extension for PostgreSQL. the blog series assumes you are working with a linux system like Ubuntu.

## Prerequisites

Obviously you should have your version of PostgreSQL, and won't matter which version of PostgreSQL you will be using since in this tutorial we will create a very simple extension. If you don't already installed PostgreSQL, you can directly install it's package, or install it from a source code following this blog [here](https://dev.to/mghrabi/explaining-in-detail-how-to-install-postgresql-from-source-code-on-windows-with-a-full-understanding-3jk7) where I described in details how to do that.

## Creating an extension!:

1. By having PostgreSQL installed on your machine, you should have the binaries (executable files) installed somewhere in your system, for me they are in `/usr/local/pgsql-13/bin`.

1. Now create a directory where you will create the extension (you can create it anywhere) and name it `add_two_numbers`:

```
mkdir add_two_numbers
```

1. Now we need to understand what are the files exactly we need to create to accomplish the mission, there are three necessary files to create:

* `Makefile` file: it's used to build the extension, in which you specify the instructions to build the extension.
* `*.control` file: This file provides a metadata about the extension like the name, version and author.
* `*.sql` file: this will contain the required sql queries to build the extension functionalities
* `*.c` file: And this c file will contain the c functions that your extension supports.

In the next blog we will be going through each of them in details and explore the steps to build up the extension!.
Appwrite OSS Fund Sponsors Vale
Published: 2023-07-26 12:19:42

Hi readers 👋, welcoming you back to the "Appwrite OSS Fund" series, where we celebrate open-source maintainers. 🎉

## 🤔 What Is OSS Fund? 
On the 4th of May, the Appwrite team launched the [OSS Fund](https://appwrite.io/oss-fund), an initiative to support open-source project maintainers. Being an open-source company, we wanted to give back to the community and help as many people as we can. 

The OSS Fund is an initiative that is very close to our heart. 
Hear what our Founder and CEO has to say - The Appwrite Story:
{% embed https://appwrite.io/oss-fund-announcement %}

> ### 📢 Announcing The Final Project 
> After careful considerations from the committee we are thrilled to announce the twentieth project: 

{% twitter 1674828370259984396 %}

## 🤔 What Is Vale?
[Vale](https://github.com/errata-ai/vale) is a markup-aware linter for prose. It helps enforce consistent stylistic standards across multiple projects, teams, and contributors. Notably, unlike most writing-related software, Vale doesn’t offer any of its own advice. Instead, it offers a framework for creating and enforcing custom rules (such as those from the [Microsoft Writing Style Guide](https://docs.microsoft.com/en-us/style-guide/welcome/) or [Google Developer Documentation Style Guide](https://developers.google.com/style/) ).

## 🤝 Meet The Maintainer
[Joseph Kato](https://github.com/jdkato) who is a software developer from Portland, Oregon is the maintainer of Vale.
He works primarily with Python, Go, and Rust, and maintains a few open-source projects. He was recently a recipient of the [Google Open Source Peer Bonus Award](https://opensource.googleblog.com/2023/05/google-open-source-peer-bonus-program-announces-first-group-of-winners-2023.html).

## 🚘 The Journey So Far
Vale originated from a desire to have a spell-checking tool that understood common markup syntax (AsciiDoc, Markdown, reStructuredText, etc.) and was straightforward to incorporate into continuous integration (CI) systems. The initial version of Vale was released about 5 years ago. Since then, the project has seen ~1.2 million GitHub downloads, ~1.1 million Docker pulls, and has become one of the most widely-adopted prose linters [with users](https://vale.sh/#users) including [The University of Texas at Dallas](https://docs.circ.utdallas.edu/user-guide/contributing/workflow.html#_documentation_testing), [GitHub](https://github.com/github/codeql/blob/main/docs/codeql/.vale.ini), [Microsoft](https://github.com/microsoft/spring-cloud-azure/blob/main/docs/.vale.ini), and the [U.S. government](https://github.com/department-of-veterans-affairs/vets-website/pull/11279).

## 🗒️ Ending Notes

As Joseph continues to build Vale for the open source community, we want to thank maintainers like him for contributing back to the community.
Changing Virtual Webcam Background with JavaScript
Tags: javascript, tensorflow, machinelearning, ai
Published: 2023-07-26 12:19:09

From The Great Wall to the Moon, webcam background change is not limited to Zoom now, I just did it in the browser with **Tensorflowjs** + **BodyPix** model.
Want to know how I implement this? checkout below 
Tutorial + Demo : 
[https://bensonruan.com/selfie-anywhere-person-segmentation-with-bodypix/](https://bensonruan.com/selfie-anywhere-person-segmentation-with-bodypix/)
GitHub repo : 
[https://github.com/bensonruan/Selfie-Anywhere](https://github.com/bensonruan/Selfie-Anywhere)