teleren/devto huggingface dataset:
How to easily make a new type by taking or picking certain properties from another type in TypeScript?
Tags: typescript
Published: 2022-05-14 00:00:00

---
  title: How to easily make a new type by taking or picking certain properties from another type in TypeScript?
  published: true
  tags: TypeScript
  date: Sat May 14 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/easily-make-new-type-by-taking-certain-properties-from-another-type-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-af24443fa3bb48912450668f0bdb076c.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/easily-make-new-type-by-taking-certain-properties-from-another-type-typescript)
  
To easily make a new type by taking or picking certain properties from another type in TypeScript, you can use the `Pick` utility type and pass the name of the type you want to take the properties from as its first type argument, and the properties you need to pick as a string literal union type as its second type argument.

### TL;DR

```ts
// a simple interface
interface Person {
  name: string;
  age: number;
  salary: number;
}

// make new type by picking the `name`
// and `age` properties from the `Person` interface
// using the `Pick` utility type
type NecessaryDetails = Pick<Person, "name" | "age">;

/*
Content of `NecessaryDetails` type
    
{
    name: string;
    age: number;
}
*/
```

For example, let's say we have an interface called `Person` with some properties called `name` having the type of string, `age` having the type of `number`, and `salary` having the type of `number` like this,

```ts
// a simple interface
interface Person {
  name: string;
  age: number;
  salary: number;
}
```

Now let's say we need to make a new type where we need only the `name` and `age` properties from the `Person` interface, to do that we can use the `Pick` utility type and pass the `Person` type as its first type argument and a string literal union type composed of `name` and `age` as its second type argument like this,

```ts
// a simple interface
interface Person {
  name: string;
  age: number;
  salary: number;
}

// make new type by picking the `name`
// and `age` properties from the `Person` interface
// using the `Pick` utility type
type NecessaryDetails = Pick<Person, "name" | "age">;

/*
Content of `NecessaryDetails` type
    
{
    name: string;
    age: number;
}
*/
```

Now if you hover over the `NecessaryDetails` type, you can see that the `name` and `age` properties are picked from the `Person` interface and is now available in the `NecessaryDetails` type.

We have successfully made a new type by taking or picking certain properties from another type in TypeScript. Yay 🥳!

See the above code live in [codesandbox](https://codesandbox.io/s/easily-make-new-type-by-taking-certain-properties-from-another-type-typescript-j7welj?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
How to avoid turning off Ubuntu Laptop with the lid closed
Tags: linux, tutorial, ubuntu, debian
Published: 2022-05-13 23:01:53

### Summary

- My laptops running Debian based distributions (Kubuntu and Peppermint OS) get suspended when I closed the lid after logging out ( = I guess the setting for KDE gets disregarded).

### Solution

```
/etc/systemd/logind.conf
======
HandleLidSwitch=ignore
```

```
sudo systemctl restart systemd-logind
```

### Reference

- [How can I tell Ubuntu to do nothing when I close my laptop lid?](https://askubuntu.com/questions/15520/how-can-i-tell-ubuntu-to-do-nothing-when-i-close-my-laptop-lid)
React Native
Published: 2022-05-13 22:21:26

## React Navigation v6.x

### Installation

#### 1. Install in Expo Project

```
npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context
expo install @react-navigation/native-stack
```

#### 2. Wrap your App.js with NavigationContainer component.

```
<NavigationContainer>
   // you app code goes here
</NavigationContainer>
```

#### 3. React Native Stack Navigator

Create Native Stack Navigator 

const Stack = createNativeStackNavigator()

<Stack.Navigator>
    <Stack.Screen name="Home" component={Home}/>
</Stack.Navigator>
daily.dev Clone with Flutter and Appwrite
Tags: appwritehack, flutter
Published: 2022-05-13 22:15:02

### Overview of My Submission

This application is a blog application inspired by the platform [daily.dev](https://daily.dev).

I'm trying to implement Appwrite as backend service and with Flutter as frontend to clone the platform [daily.dev](https://daily.dev)


### Submission Category: 

Mobile Moguls


### Link to Code

{% embed https://github.com/sahibul-nf/daily %}


### Working:
**There are total 2 parts in the app**.

1. Authentication
2. Article Feed or Blog Post

So, here Authentication is implemented with Appwrite. It's so easy to integrate Auth & DB in a flutter app using Appwrite.

In the article feed section, here is a list of articles or blog posts taken from RssFeed of several blogs on the internet.


### Additional Resources / Info

- [Appwrite](https://appwrite.io/)
- [Flutter](https://flutter.dev/)
- [GetX](https://pub.dev/packages/get)
- [rss2json](https://rss2json.com/docs)
- [daily.dev](https://daily.dev/)


### Demo

[Demo Video](https://www.loom.com/share/e9177206e3df4778bfab45bc28ebc098)

{% embed https://www.loom.com/embed/e9177206e3df4778bfab45bc28ebc098 %}


### Screenshots

![SignIn Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3nirhvpa7gae541x2g5.png)

![SignUp Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f19m6eb9rg1zlipn5g3s.png)

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

### Thank you
Thank you so much for checking out my project. It was an awesome learning experience for me. Thank you for your time.
Dreams come true ! I became the founder of the Cameroon 🇨🇲PHP community 🎊
Tags: php, c4rl3, cmrphp
Published: 2022-05-13 21:44:13

I'm so proud of the work we've done to achieve this goal. But this is not a culmination, only an exalted parenthesis in an ordinary life. I sincerely hope that many Open Source projects will emerge and contribute to the evolution of the world.

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

Follow us on [Twitter](https://twitter.com/i/communities/1525216326565904384) 

Thanks a lot.
The CORS specter...
Tags: aws, webdev, tutorial
Published: 2022-05-13 21:30:53

I sat down at my computer to work on my new website. The task was simple! Connect the frontend with the backend API.

All was going well until suddenly my browser console said: "CORS errors whoo, haha!"

What? I already enabled CORS support, and I allowed any. (knowing this is bad practice) I rechecked everything and was sure everything was correct. So what's going on?

This is what I did to squash the CORS specter while trying to integrate two AWS Lambda Proxy REST API resources: 
[https://anto.online/code/how-to-set-up-cors-for-an-aws-lambda-proxy-rest-api-resource/]

I hope this guide will save you the many hours of debugging I had to endure.
Python Buble Sort In Action
Tags: python, algorithms, programming
Published: 2022-05-13 21:19:30

Write a Python program to sort a list of elements using the bubble sort algorithm.
Note : According to Wikipedia "Bubble sort, sometimes referred to as sinking sort, is a simple sorting algorithm that repeatedly steps through the list to be sorted, compares each pair of adjacent items and swaps them if they are in the wrong order. The pass through the list is repeated until no swaps are needed, which indicates that the list is sorted. 

The algorithm, which is a comparison sort, is named for the way smaller elements "bubble" to the top of the list. Although the algorithm is simple, it is too slow and impractical for most problems even when compared to insertion sort. It can be practical if the input is usually in sort order but may occasionally have some out-of-order elements nearly in position.

**Sample input**
`[2,4,3,1]`

**Sample Output**
`[1,2,3,4]`

**Sample Solution**

{% youtube g_xAhmMr2n0 %}

_Source : https://www.w3resource.com/python-exercises/data-structures-and-algorithms/python-search-and-sorting-exercise-4.php_
PHP VMValidator 2.3.0
Tags: webdev, showdev, php, programming
Published: 2022-05-13 21:18:55

Additions:

## Callback execution

- Callbacks are executed when the validation does not trigger and Exception (based on SEVERITY_LEVEL)
- $forceCallback can be used and has an effect only with EXCEPTION_SEVERITY_LEVEL to force callback after an EXCEPTION trigger

## Bug Fixes

- Bug fixes applied for the default OptionsModel

## Test Scenarios

- New tests for testing the callback functionality are added
Any feedback, recommendations and support are welcome and will be well appreciated :)

https://ivangrigorov.github.io/VMValidator/
Enjoy.
Day-87 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-05-13 20:54:19

Date:13/05/2022
Day:Friday

Today, I started at about 10:30 am as I wasn't in progress to complete the java script course and the project so, today I started with left over task, firstly I started with functional java script Functional programming is a programming paradigm — a style of building the structure and elements of computer programs — that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data after this I started with eighteenth module in this module the instructor started with building fortify app and I did some basic requirements of projects and after this I get involved in finding the additions that I would integrate with my project so, this way my day ended up and I got to learn many new things.
Chatbot Wordpress
Tags: wordpress, ai, chatbot, plugin
Published: 2022-05-13 20:49:54

## How to add AI Chatbot to Wordpress

Install ChatBot on your WordPress site using Kommunicate Plugin.

Pre-requisites:
1. Access to the Wordpress Admin panel
2. [Kommunicate.io](https://www.kommunicate.io) account


Step 1: Go to the Plugins section in your WordPress Dashboard. Click on the Add New button. Navigate to the search box and type ‘Kommunicate’. Click on the Install now button and activate it.
Alternatively, download plugin from [Wordpress plugin store](https://wordpress.org/plugins/kommunicate-live-chat/) and install it.


Step 2: Click on the Kommunicate setting in the Left Panel, Here you will require Kommunicate App ID. Go to Kommunicate (https://dashboard.kommunicate.io/signup) and signup for the account to [get the APP_ID](https://dashboard.kommunicate.io/settings/install). 


![Wordpress Chatbot Plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7o496pnt2obw7w4l90x.jpeg)


Step 3: Almost ready! Now create the bot that you will use on your website. Go to Bot Integrations -> Kompose to create a chatbot. Create your first welcome message, answers and embed Texts, Buttons, Images, or other rich media types.

Here is the tutorial for the same: [https://www.kommunicate.io/blog/how-to-make-a-chatbot/#kompose-create-chatbot](https://www.kommunicate.io/blog/how-to-make-a-chatbot/#kompose-create-chatbot)

[Youtube Video showing how to create Chatbot for Wordpress
](https://www.youtube.com/watch?v=fYvrB6XX5UA
)



Step 4: Refresh your Wordpress website page and now your chatbot widget should be live on your WordPress website.


References: https://www.kommunicate.io/blog/chatbot-for-wordpress/
Leetcode Number Of Islands
Tags: python, programming, algorithms, career
Published: 2022-05-13 20:20:10

In this post we'll have a look at [LeetCode problem #200](https://leetcode.com/problems/number-of-islands/) called Number Of Islands.

The problem statement is quite straightforward. Given a grid of 1s and 0s, we need to find the total number of islands in a given grid.

They mention:

> An island is surrounded by water and is formed by connecting adjacent lands horizontally or vertically. You may assume all four edges of the grid are all surrounded by water.

For example:

```
Input: grid = [
  ["1","1","1","1","0"],
  ["1","1","0","1","0"],
  ["1","1","0","0","0"],
  ["0","0","0","0","0"]
]
Output: 1
```

And another example:

```
Input: grid = [
  ["1","1","0","0","0"],
  ["1","1","0","0","0"],
  ["0","0","1","0","0"],
  ["0","0","0","1","1"]
]
Output: 3
```

How do we solve it?

My approach is to look at each (unvisited) cell in the grid, if it contains 1 then (recursively) expand outward from there as long as its neighbour also has a 1. This is called BFS (breadth first search).

When we visit a cell, we'll mark that cell as visited, such that we'll not visit it again later.

Here's the solution:

```python
class Solution:
    def numIslands(self, grid):
        
        ROWS, COLS = len(grid), len(grid[0])
        res = 0
        visited = set()
        
        def dfs(r,c):
            if r<0 or c<0 or r>=ROWS or c>=COLS or (r,c) in visited or grid[r][c] != "1":
                return
            
            visited.add((r,c))
            dfs(r+1,c)
            dfs(r-1,c)
            dfs(r,c+1)
            dfs(r,c-1)
        
        for r in range(ROWS):
            for c in range(COLS):
                if grid[r][c] == "1" and (r,c) not in visited:
                    res += 1
                    dfs(r,c)
        
        return res
```

The code itself is also very straightforward to understand. I hope you find it helpful.

Note that we can avoid using a visited set by simply marking 1s with some symbol, like a # sign.

--
Cover Photo by Sacha Gregoire on Unsplash
Hide API key without Node
Tags: javascript
Published: 2022-05-13 19:56:17

Hi everyone,

I have a question:

> If I have a basic website, that has one html file, one css, file and one js file, and I have a simple fetch api get call made in the js file, how do I hide the API key so the browser does not expose it?

I know how to do this using Node and dot env, but I wanted to know if there is anyway to do this **without** node and dot env, there must be a way.
Takeaways from Volunteering at Devoxx UK
Tags: volunteer, conference, java
Published: 2022-05-13 19:45:40

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

This week I volunteered at [Devoxx UK](https://www.devoxx.co.uk/), and what an intense experience it has been!

Some takeaways:

🔥 Offline events are way, way better than anything virtual we have had during the previous two years. No video conferencing tool, no matter how fancy, will replace the joy of being in the same physical space as other people who share similar interests with you.

🔥 I've never worked with Java, so being at a Java-centric event was definitely a step outside my comfort zone. It was an interesting experience and a way to see what exists outside my Ruby bubble, what problems engineers are trying to solve and what the current buzzwords are.

🔥 Volunteering at a tech conference is a way to hack your way into an expensive event you wouldn't have been able to afford otherwise. You spend part of the day volunteering, and then you are free to attend conference talks, network and just enjoy the event. Most of the time I was actually monitoring conference rooms and assisting speakers, so I got to listen to talks while volunteering as well.

One of my fellow volunteers actually admitted that he enjoyed volunteering at this conference more than being there as a regular attendee with a ticket. Volunteering felt more involved and more of a community experience for him. And I think I know what he meant.

So much of this is not about tech at all. People need people.

I hope we haven't unlearned that.
Designing an 8-bit supercomputer
Tags: retro, z80, hardware, programming
Published: 2022-05-13 19:16:12

In this short series I will be designing one of the first Z80 based supercomputers, in order to accomplish this we need to make useful modules for the multiple Z80 processors to use, this will include external APUs that can handle the large floating point numbers that the machine will be able to compute.



## Z80 Compute Modules

In order for this machine to have any usable modules first we need to build some Z80 processor cards, this can easily be accomplished with a few small boards.

### The Z80

The Z80 is an 8-bit processor with 16 bits of address space, there are a multitude of control and status lines as well that need to be controlled in order for the processor to run properly, first of which are the power (+5V) and ground (GND) connections, which supply power to the Z80, the +5V line should also have a decoupling capacitor to ground with a 100nF value.

![Z80 with the power connected](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbll1u05n3ix70gm88hh.png)

Next are the control signals, ordinarily you would tie the majority of these to ground with a resistor, however in this case they will be needed later down the design process in order to control and monitor certain aspects of the running system, as such we will tie them to ground with an external input for control using a D Type latch. 

![Z80 with IO sorted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/incxm9t952u8dk8tghur.png)

There is a lot going on here, but basically I am attaching these pins to a latch so external circuitry can control them.

The final pieces of the puzzle for now are the data lines and address lines as well as a few other outputs and inputs, these will be used in tandem with the BUSREQ control line in order for the processors to access the memory and peripherals.

![All hooked up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vllqplcxpland1t08fe7.png)
 

With this being the final schematic.

### Routing the traces

Routing PCB traces is a massive pain, so I am going to use an autorouter to do the job for me, more specifically a tool called FreeRouting{% embed https://github.com/freerouting/freerouting %}

Prior to routing:
![Prior to routing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5lkp8k7p1d52ett6zfg.png)

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

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


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


Next Up: Memory Modules
How to write a resume?
Tags: beginners, career, help, discuss
Published: 2022-05-13 19:05:52

Hello DEV community,
I am getting my portfolio and resume ready to begin applying for junior dev jobs. My problem is, what do I put down on my resume? I don't have any professional experience and the only projects I have completed are from Frontendmentor and from Udemy courses. Do I list those under the experience section? And also, what if your projects are not built 100% correctly? I ask because I have some projects where the web pages are displayed differently in different browsers. And should I add my retail experience to my resume along with my degree in Finance?
useEffect hook from the prespective of a noob
Tags: react, hooks, beginners, webdev
Published: 2022-05-13 18:58:42

_Have you ever wondered why this hook is called useEffect ?_
Simply because it manages the side-effects of a component, But what are side-effects?

## Side-effects
side-effects can be any thing that does not target the output value of the function for examples: 
1. Asynchronous api calls to fetch data
2. Setting a subscribtion to an observable
3. Manually updating the dom
4. Updating global variables from inside a function
Code example :
```
import {react} from 'react'
function Greet({name}){
 const message = "Hello, ${name}";
 document.title = message; // this is a side-effect
 
 return <div>{message}</div>
}
```

## Arguments
the useEffect hook accepts two arguments 
`useEffect(callback function , [dependencies])`

- The callback function is to execute the side-effects you want to happen after the render.
- The array of dependencies is to tell the useEffect hook when to execute the callback function that performs the side-effects.

## The dependencies array
the dependencies array argument can be in three forms:

- Not provided => means that the callback function will be executed after each render and that may cause an infinite loop
```
import {react} from 'react'
function Greet({name}){
 const message = "Hello, ${name}";
 
 useEffect(()=>{
   document.title = message;
 })
 return <div>{message}</div>
}
```
- Provided as an empty array => means that the callback function will be executed after the initial render only [Mounting]
```
import {react} from 'react'
function Greet({name}){
 const message = "Hello, ${name}";
 
 useEffect(()=>{
   document.title = message;
 },[])
 return <div>{message}</div>
}
```
- Has dependencies => usually the dependencies are props and state and the callback function will be called after the initial render and after the change of any dependency
```
import {react} from 'react'
function Greet({name}){
 const message = "Hello, ${name}";
 
 useEffect(()=>{
   document.title = message;
 },[name])
 return <div>{message}</div>
}
```

## Clean up
The useEffect hook always expects to return nothing or to return a function this function is used for clean up. Some side-effects need a clean up like to clean up a timer or to close up a socket connection.

```
import {react} from 'react'
function Greet({name}){
 const message = "Hello, ${name}";
 
 const timer = useEffect(()=>{
   setInterval(()=>{
      document.title = message;
   },2000)
   
   return function cleanUp(){
      clearInterval(timer);
   }
 },[name])
 return <div>{message}</div>
}
```
**Final Note**:
_The callback function cannot be async because async functions return a promise and the useEffect hook always expects the callback function wheather to return nothing or to return a clean up function_

##More resources:
Dimitri Pavlutin article => [Link](https://dmitripavlutin.com/react-useeffect-explanation/)
Ben Awad youtube video => [Link](https://www.youtube.com/watch?v=j1ZRyw7OtZs&t=23s)

If you arrived to this point I hope you enjoied the article and learned somthing new ^^ .