teleren/devto huggingface dataset:
TypeScript utility types: Partial and Required
Tags: typescript, javascript, beginners
Published: 2022-02-19 07:36:16

TypeScript comes with several utility types. These are utilities we can use to do type transformations.

We'll look at the `Partial` and `Required` types in this article.

To give you a bit more context, you might have written an interface or type that reflects a user object, but in some cases, you want to use only certain fields or change which fields are required from this interface.

And that's precisely where the utility types come in handy, there is a whole set of them, and I'll be going through the most commonly used ones.

## The TypeScript Partial utility type

Let's take the following example interface to work with.

```js
interface User {
  firstname: string;
  lastname?: string;
  age: number;
}
```

As you can see, we made two fields required: `firstname` and `age`. The `lastname` field is optional because we added the `?` to it.

However, what if we have an update where we would allow all of the fields to be optional valid?

This could, for instance, be if we have a UI where each field will auto-update without knowing any of the other fields.

Our function for this could be `updateUserField`, which would accept any user fields.

```js
const updateUserField = (id: number, fieldsToUpdate: Partial<User>) => {
  return db.update(id, fieldsToUpdate);
};
```

And we can now use this to update each field individually without needing the other ones to be set.

```js
updateUserField(1, {
  firstname: 'Chris',
});
updateUserField(1, {
  age: 32,
});
```

This is now valid code. However, if you would remove the `Partial` utility, you would see it throws some TypeScript errors about the missing fields.

![TypeScript missing fields error](https://cdn.hashnode.com/res/hashnode/image/upload/v1644471472591/gFt2W94iA.png)

## The TypeScript Required utility type

On the other hand, there might be cases where you expect the value to be set.

Let's look at our user example again.
By default, you might have an object where the ID is not required since we don't know it yet, but once the user is created, we could set it to be required.

```js
interface User {
  id?: number;
  firstname: string;
  lastname: string;
}
```

We can use this `User` interface without specifying the ID when creating the user.

But when we want to update the user, we want to make sure the ID is set.

```js
const updateUser = (user: Required<User>) => {
  db.update(user);
};

updateUser({
  id: 12,
  firstname: 'Chris',
  lastname: 'Bongers',
});
```

Because of the `Required` type, every field in the `User` interface is now required.

A cool thing with TypeScript utility types is that you can also mix and match them.

In a different article, we'll look at how we can only make specific fields required or optional by leveraging some other utility types.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
CSR, SSR, and Progressive Rendering in Javascript
Tags: javascript, beginners, webdev
Published: 2022-02-19 07:27:15

***

## 💻 Client Side Rendering (CSR)

CSR refers to rendering web pages directly in the web browser using JavaScript. All logic, data fetching, templating, and routing are handled on the client (browser) side.

### How it Works

<img src="https://user-images.githubusercontent.com/68415905/197331301-53b2d667-c03d-436f-8c3b-eb04c52ea7a1.png" width="800" />

1. Client ➡ Server: Notifies site access.
2. Server ➡ Client: Sends `index.html`
   <br/>
   Initial access results in receiving an empty HTML with no content, leading to a blank screen.

```html
<html>
  <head>
    ...
  </head>
  <body>
    <div id="root"></div>
    <script src="app.js"></script>
  </body>
</html>
```

3. Client ➡ Server: Requests JavaScript file.
4. Server ➡ Client: Sends `app.js` file (large size, long initial load time).<br/>Includes JavaScript logic, frameworks, and libraries needed to run.

<br/>

### Advantages

- Fast subsequent re-rendering after initial load.
- Reduced server data requests.

### Disadvantages

- Long initial loading time (Time To View).
- Poor SEO due to empty initial HTML.

***

## 📲 Server Side Rendering (SSR)

SSR fetches all necessary data on the server side and sends fully rendered HTML to the client upon site access. This results in fast loading and efficient SEO. SSR does not depend on client device specifications, allowing HTML construction on high-performance servers.

### How it Works

<img src="https://user-images.githubusercontent.com/68415905/197331299-9de64557-829a-412e-a3c1-7ce786d847b2.png" width="800" />

1. Client ➡ Server: Notifies site access.
2. Server ➡ Client: Sends `index.html`.
3. Server fetches required data and sends well-structured HTML during loading.
4. Client ➡ Server: Requests JavaScript file.
5. Server ➡ Client: Sends `app.js`.

### Advantages

- Optimized for Search Engine Optimization (SEO).
- Fast initial page view.

### Disadvantages

- Page flickering on navigation.
- Increased server load due to server rendering.
- Potential functionality issues until full JavaScript load.

***


## 📱 Progressive Rendering

A form of Server Side Rendering where high-priority HTML content is initially rendered and painted on the client side. This approach ensures quick display of crucial content followed by less critical content.

### How it Works

1. HTML request.
2. Initial high-priority HTML rendering
3. client painting.
4. Subsequent HTML rendering
5. client painting.

***
***

> REFERENCE <br /> https://blog.naver.com/jasonrewriter/222220034926 <br /> Youtube DreamCoding https://www.youtube.com/watch?v=iZ9csAfU5Os&t=277s
WhatsApp Automation using Python and Selenium
Tags: python, automation, whatsapp, selenium
Published: 2022-02-19 07:25:32

In this tutorial, I have used Python3 and Selenium. I am assuming that you know the basics of Python.

If you don't have Python installed, you can download it from [https://www.python.org/](url) and follow the install instruction.

After Python installed, we will need to install Selenium Automation Framework. We will be using pip to install Selenium.

```
python3 -m pip install Selenium
```
Next, we will need to install ChromeDriver. You can download it from [https://chromedriver.chromium.org/downloads](url). After downloading, unzip it and move it to some sensible location.

## Automate WhatsApp

```
import os
from typing import KeysView
from selenium import webdriver
from selenium.webdriver.common import keys
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.keys import Keys

os.environ['PATH'] += r"C:\Users\saura\Desktop" #replace it with path that contains chromedriver
driver = webdriver.Chrome()

driver.get("https://web.whatsapp.com/")

driver.implicitly_wait(5)
try:
    destination = driver.find_element(By.XPATH, "//span[.='Friend']")#replace Friend with your WhatsApp contact
    destination.click()
except:
    destination = driver.find_element(By.XPATH, "//span[.='Friend']")#replace Friend with your whatsApp contact.
    destination.click()


msg_area = driver.find_element(By.CSS_SELECTOR, "[title*='Type a message']")
for i in range(20):    #Number of time message will be sent.
    msg_area.send_keys("Hi")     #Replace "Hi" with whatever message you want to send.
    msg_area.send_keys(Keys.RETURN)

```

Copy the code and paste it in your Python file with (.py) extension. Replace drivers path and WhatsApp contact in code. And then run it. It will show a WhatsApp web interface. Scan the QR code. And you are done.

Now you can change the code, according to your various requirements.
Laravel 9 Installation
Tags: laravel, webdev, beginners, programming
Published: 2022-02-19 07:20:01

## Install Laravel 9 In Local

Today I am going to explain how you can Install Laravel 9.

## Laravel Installation Guide.
Laravel documented the [Installation Guide](https://laravel.com/docs/9.x#installation-via-composer) you can read the document to get more details.

## Tech Requirement
- PHP 8.0.2
- MySql
- Composer

## Install Via Composer
Create First Laravel 9 Project
```php
composer create-project laravel/laravel first-laravel9
```

Now GO to the Installed Directory

```php
cd first-laravel9
```

Next to serve application 
```php
php artisan serve
```

You can use [Laravel Valet](https://laravel.com/docs/9.x/valet#main-content) to setup local development environment in macOs.

All Set, Click on served Link and you can see output as below.

![Laravel 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3mxkjwt121xwp0tn3ai.png) 

The Installation Tutorial is below in the video.

{% youtube 73PTcTSiIPw %}

If you face any issue while installing, please comment your query.

Thank You for Reading

Reach Out To me.
[Twitter](https://twitter.com/techtoolindia)
[Instagram](https://www.instagram.com/techtoolindia/)
[TechToolIndia YouTube Channel](https://www.youtube.com/channel/UCOy6o08Yn9DtXMKqxhD9ivA)
How to install laravel 9
Tags: laravel, webdev, beginners, tutorial
Published: 2022-02-19 07:18:18

## Install Laravel 9 In Local

Today I am going to explain how you can Install Laravel 9.

## Laravel Installation Guide.
Laravel documented the [Installation Guide](https://laravel.com/docs/9.x#installation-via-composer) you can read the document to get more details.

## Tech Requirement
- PHP 8.0.2
- MySql
- Composer

## Install Via Composer
Create First Laravel 9 Project
```php
composer create-project laravel/laravel first-laravel9
```

Now GO to the Installed Directory

```php
cd first-laravel9
```

Next to serve application 
```php
php artisan serve
```

You can use [Laravel Valet](https://laravel.com/docs/9.x/valet#main-content) to setup local development environment in macOs.

All Set, Click on served Link and you can see output as below.

![Laravel 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3mxkjwt121xwp0tn3ai.png) 

The Installation Tutorial is below in the video.

{% youtube 73PTcTSiIPw %}

If you face any issue while installing, please comment your query.

Thank You for Reading

Reach Out To me.
[Twitter](https://twitter.com/shanisingh03)
[Instagram](https://www.instagram.com/shanisingh03/)
[TechToolIndia YouTube Channel](https://www.youtube.com/channel/UCOy6o08Yn9DtXMKqxhD9ivA)
Handling API requests in react js
Published: 2022-02-19 07:03:28

1. Setting Up react app

```jsx
npx create-react-app apihandling
```

2. Install `axios` module
```npm
npm install axios
```

3.In app.js file you need to import the axios module 
```jsx
import axios from 'axios';
```

4. Call the API and set it into the state

Import the `useState` and `useEffect` module from react
```jsx
import react, {useState, useEffect} from 'react';
```

creating state to store API data
```jsx
const [ApiData, setApiData] = useState([])
```

Creating an async function for get an data from an API
```jsx
const getData = async() => {
    const res = await axios.get("https://jsonplaceholder.typicode.com/todos")
    setApiData(res.data)
}
```
Adding `getData` function into _useEffect_ function

```jsx
useEffect(() => {
    getData();
}, [])
```


5. In the return statement you can going to map through the value of the state `Api Data`
```jsx
return (
    ApiData.map((data) => <p key={data.id}>{data.title}</p>)
)
```
In the above code we are mapping through each value of the ApiData `state` and returning only the `title` from it in a order.

That's it we have successfully create an react app that can get api from other sources and display.

Full Code Here:
```jsx
import react, {useState, useEffect} from 'react';
import axios from axios;
export default function App() {
    const [ApiData, setApiData] = useState([]);

    const getData = async() => {
        const res = await axios.get(https://jsonplaceholder.typicode.com/todos)
        setApiData(res.data)
    }
    
    useEffect(() => {
        getData();
    }, []);

    return (
        {
          ApiData.map((data) => <p key={data.id}>{data.title}</p>
        }
    )
}
```

Thanks for Reading
Follow me on twitter [@abipravi1](https://twitter.com/abipravi1)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ws5t28e3ehbkxivviwjt.gif)
Writing maintainable Go code
Tags: go, programming, productivity, microservices
Published: 2022-02-19 06:56:26

Writing maintainable code is essential. Clarity, readability, and simplicity are all aspects of maintainability. It should make the process easy for someone to join your project or maintain it after someone leaves. Maintainability is measured by how effortless it is to introduce changes and the amount of risk associated with those changes. To write Go effectively, it is crucial to understand its properties and idioms and apply the established conventions related to naming, program construction, formatting, etc.

Here are some good practices that will help write maintainable Go code.

Link to full article: [https://jogendra.dev/writing-maintainable-go-code](https://jogendra.dev/writing-maintainable-go-code)
What language do you think will conquer the tech world for the next ten years to come.
Published: 2022-02-19 06:29:46

As developers, we are all confronted with this question: what programming language should I learn without the risk of time-wasting? Because we have chosen a domain where things run so fast. And that gives us the impression we don't move. There are so many things to learn and so little time then what have we got as the choice: "python, Java, C#, Go, PHP, JS and so on"; at the end, where do we go. I think that depends on our goal; then you have to find a language either the community is growing or has acquired a certain maturity.

> _From you to me with all these parameters to keep in mind, what language will survive._
Mendel Development Tool
Published: 2022-02-19 06:19:52


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

This came off the google coral dev board website. This code didnt work for me 

`python3 -m pip install --user mendel-development-tool`

What did work for me after I installed and upgraded PIP. Was this line of below:

`python -m pip install --user mendel-development-tool`

I removed "python3" and replaced it with "python"

And that worked beautifuiy for me.

`python -m pip install --user mendel-development-tool`

---
Takeaways: Clever code considered harmful. by Joshua Comeau
Tags: programming
Published: 2022-02-19 06:10:47

## Readability is king 👑

![so simple, yet so brilliant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5n5mu3vzyqda01ekzx7a.gif)

Check out this article 👇
[Clever code considered harmful.. There is something undeniably… | by Joshua Comeau | Medium](https://medium.com/@joshuawcomeau/clever-code-considered-harmful-a1fb1054e8a1)

The article taught me really important points for working with shared code. I want to recommend it to all developers ✨

## My takeaways

I am citing some points from the article below, yet I encourage you to read the original article 😉

- A good barometer: will an intern understand it?
- Good code is simple code
    - Code that makes minimal use of abstractions
    ⇒ Abstractions add complexity
- Readability is king when it comes to shared code
- Pernicious bugs are often caused by too much complexity, not too many characters
- The key is to weigh the cost of an abstraction against its benefit
- Consider the tradeoffs of abstractions with the junior coder in mind
- Turning a complex problem into simple code is so much more impressive than solving a simple problem with a complex solution
Change the default Java Version on macOS
Tags: macos, java, jdk, javase8
Published: 2022-02-19 06:02:49

Here, We are trying to change the version to Java SE 8

First run `/usr/libexec/java_home -V` which will output something like the following:

```sh
Matching Java Virtual Machines (3):
    16.0.2 (x86_64) "Oracle Corporation" - "Java SE 16.0.2" /Library/Java/JavaVirtualMachines/jdk-16.0.2.jdk/Contents/Home
    1.8.202.08 (x86_64) "Oracle Corporation" - "Java" /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home
    1.8.0_202 (x86_64) "Oracle Corporation" - "Java SE 8" /Library/Java/JavaVirtualMachines/jdk1.8.0_202.jdk/Contents/Home
    
/Library/Java/JavaVirtualMachines/jdk-16.0.2.jdk/Contents/Home
```

Pick the version you want to be the default (1.8.0_202) then:

```sh
export JAVA_HOME=`/usr/libexec/java_home -v 1.8.0_202`
```

Now when you run `java -version` you will see:

```sh
java version "1.8.0_202"
Java(TM) SE Runtime Environment (build 1.8.0_202-b08)
Java HotSpot(TM) 64-Bit Server VM (build 25.202-b08, mixed mode)
```

Add the 
```sh
export JAVA_HOME=`/usr/libexec/java_home -v 1.8.0_202`
```
line to your shell’s init file.

Updating the .zshrc file should work:
```sh
nano ~/.zshrc
```

paste the line 
```sh
export JAVA_HOME=$(/usr/libexec/java_home -v 1.8.0_202)
```
at bottom of the file. 

Press `CTRL+X` to exit the editor, Press **Y** to save your changes.

```sh
source ~/.zshrc
echo $JAVA_HOME
java -version
```

Output should be:

```sh
java version "1.8.0_202"
Java(TM) SE Runtime Environment (build 1.8.0_202-b08)
Java HotSpot(TM) 64-Bit Server VM (build 25.202-b08, mixed mode)
```


### Resources

[Stackoverflow](https://stackoverflow.com/questions/21964709/how-to-set-or-change-the-default-java-jdk-version-on-macos)
#No module named pip
Tags: python, modules, coraldevboard, errors
Published: 2022-02-19 05:57:48

I recently had a problem, I would install python. And the package manager would tell me its installing pip also, but it never did or couldnt find it. 

So this [link](https://stackoverflow.com/questions/32639074/why-am-i-getting-importerror-no-module-named-pip-right-after-installing-pip) helped me to figure out how to perform a force python install of pip. This is my notes for me and those that need it. 

`Just be sure that you have include python to windows PATH variable, then run python -m ensurepip`

This was a good tip! #ThanksStackOverFlowPeople

After you install pip run this code `py -m pip install`.

If it tells you to upgrade, then upgrade your pip to a lastest version.

---
Drupal 9 Multisite setup
Tags: drupal9, drupalmultisite
Published: 2022-02-19 05:35:10

Here, Root site is http://www.drupal9.local/

Subsites or sites within root site are http://site1.drupal9.local/ and http://site2.drupal9.local/ 


**Lets start with some easy steps:**

1) To start the setup, first install Drupal 9 on a server with the database name 'drupal9'.    
   After installation create a virtual host for the root site as http://www.drupal9.local/

2) Create directory structure for multisites.
Create folders for site1 and site2 as: 
/drupal9/sites/site1.drupal9.local
/drupal9/sites/site2.drupal9.local

3) Create databases for site1 and site2 as 'drupal9_site1' and 'drupal9_site2.

4) Let the root site aware about multisites. Create an $sites array in sites.php

Make a copy of /drupal9/sites/example.sites.php called /drupal9/sites/sites.php

5) Edit sites.php to add array. Add following array at the end of the file.
   ```
      $sites = [
            	'site1.drupal9.local' =>'site1.drupal9.local', 
            	'site2.drupal9.local'=>'site2.drupal9.local' 
               ]; 
   ```
   
6) Create virtual hosts for site1 and site2.
   
   site1 : http://site1.drupal9.local/
   site2 : http://site2.drupal9.local/ 
  
  Note: Here virtual hosts for multisites should point to root site, not to sites subdirectories.

7) Now make settings for site1 and site2.
   
Copy /drupal9/sites/default/default.settings.php to the new site's directories as settings.php:
   /sites/site1.drupal9.com/settings.php
   /sites/site2.drupal9.com/settings.php

8) Now finish the installation for site1 and site2 by visiting the domains http://site1.drupal9.local/ and http://site2.drupal9.local/
Why React is so popular
Tags: discuss, webdev, react, opensource
Published: 2022-02-19 05:00:39

## A Brief History 

2011 — Designed and createcd in Facebook for internal use.
2012 — Instagram Started using it.
2013 — Open-sourced.
2015 — Open-sourced React Native for building native iOS and Android apps.

## React is a library, not a framework

Its library approach has allowed React to evolve into such a great tool.

The main advantage is that **Libraries** are lightweight, and there is a freedom to choose different tools.

The Framework creates an entire ecosystem to build an app, and you don't have an easy way to use tools outside of it.

## It is Flexible

Once you've learned React, you can use it for a vast variety of projects.

- Generate a static site using **Gatsby**;
- Add server rendering with **Next.js**;
- Build mobile apps with **React Native**;
- Create a virtual reality website for 360 experiences using **React VR**.

## Great Dev Experience

Rapid development and small API combined create a fantastic developer experience. The API has very few concepts and is very simple to learn.

You just need to import the React library and create a component that accepts props and returns JSX, which converts API calls and renders HTML.

## Supported by Meta

React is heavily used in Meta's apps like Facebook and Instagram. That's why Meta is deeply committed to it.

The top four React contributors on GitHub are full-time Meta employees.

The React team maintains a blog that gives you details for each release.

## Broad Community Support

Since 2015, React's popularity has grown steadily. It has a massive active community and its GitHub Repository has over 183k Stars.

It is one of the Top 5 Repositories on GitHub.

Have you used the React library to build something?
Customise Laravel Route for Resource Controller
Tags: laravel, webdev
Published: 2022-02-19 04:29:08

When you create a controller, [Laravel](https://laravel.com) does provide you with the route resource which provides out of the box CRUD operation routes. You can check these named routes by the following command:

```php
php artisan route:list
```

In this article we will use `photos` controller as a example.

By default, following is the list of the ] controller CRUD operation routes:

| Verb      | URI                  | Action  | Route Name   |
| ---------:|---------------------:| -------:| ------------:|
| GET       | /photos              | index   | photos.index |
| GET       | /photos/create       | index   | photos.index |
| POST      | /photos              | index   | photos.index |
| GET       | /photos/{photo}      | index   | photos.index |
| GET       | /photos/{photo}/edit | index   | photos.index |
| PUT/PATCH | /photos              | index   | photos.index |
| DELETE    | /photos              | index   | photos.index |

Sometimes, we may want to use only few of the routes from the CRUD operation and let's say we want to use only `index`, `create`, `store`, `edit` and `update`, we can customise it like the following:

```php
Route::resource('photos', 'PhotoController')->only('index', 'create', 'store', 'edit', 'update');
```

We can also specify the as option to define a prefix for every route name.

```php
Route::resource('photos', 'PhotoController', [
    'as' => 'foo'
]);
```

Similarly, you can also provide a custom name for each controller methods like the following:

```php
Route::resource('photos', 'PhotoController', [
    'names' => [
        'index' => 'foo',
        'store' => 'foo.new',
        // etc...
    ]
]);
```