teleren/devto huggingface dataset:
Implement Facebook login in laravel
Tags: laravel, facebook, javascript, tutorial
Published: 2022-05-25 14:11:18


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

Today we are going to implement social login in laravel with the Facebook platform. Facebook is the most popular social media platform. In this implementation, we are using the socialite package mostly used to connect social media to the laravel application.

## Step by step guide on Facebook login in the laravel application

- Install Package in laravel

Run the following command to install the socialite package in your application. 
```
composer require laravel/socialite
```
You need to add the below line of code inside the config/app.php file.
```
$providers= [
	
	......
	Laravel\Socialite\SocialiteServiceProvider::class,
	......
]; 

$alias = [

	......
	'Socialite' => Laravel\Socialite\Facades\Socialite::class,
	......
]
```
[Read More] (https://www.devrohit.com/facebook-login-in-laravel/)
firebase v9 major changes
Published: 2022-05-25 13:56:09

when firebase v9 introduced there is major change in many functions and method .so if you are looking for the v9 change in syntax .here is some of the major changes
 
**

## Authenticate with Firebase using Password-Based Accounts using Javascript 
**: https://firebase.google.com/docs/auth/web/password-auth#web-version-8_1

**

## Manage Users in Firebase
**

https://firebase.google.com/docs/auth/web/manage-users#web-version-9_4

**

## How to create a new collection using Firestore v9

**
https://devjonas.medium.com/how-to-create-a-new-collection-using-firestore-v9-d91366492287


## **Add data to Cloud Firestore**

https://firebase.google.com/docs/firestore/manage-data/add-data#web-version-9
A jornada do Junior ao Tech Lead
Published: 2022-05-25 13:55:33

Galera, nestes tempos complicados nos quais se discute #bolhadev, cancelamento, e mais um monte de coisas... vale a pena colocar a bola no chão e discutir um pouco carreira, evolução, estudos, realização e felicidade. Sem xiitismo, sem se achar o dono da verdade, sempre de forma humilde e construtiva!

Em janeiro, eu, o @gsuaki , o Valmir Justo e o Wesley Willian batemos um papo sobre carreira, da jornada do Junior ao Tech Lead.

Segue o [link](https://www.youtube.com/watch?v=k-hnrx1pmQU)!

Acredito que a discussão pode somar algo. O mercado de Tecnologia tem muita vaga sim, e independente de bolha, o bom profissional vai ter seu lugar ao sol com bom salário e boas condições de trabalho. Ignore as discussões infrutíferas. Foque no importante (que é relativo. O importante para uma pessoa não é importante para outra :) ).

Espero que aproveitem e qualquer critica construtiva, por favor, sou todo ouvidos! :)
Use Nginx to serve static React site with gzip and HTTP2
Tags: react, nginx
Published: 2022-05-25 13:38:19

Let's start with pre-compressing our React app when we run the build process. To do this, install a npm package.

```
npm install compress-create-react-app --save-dev
```
Then, change the build script in package.json to below.

```
build": "react-scripts build && compress-cra"
```
Whenever we run npm run build, our project will be built and compressed files will be created automatically.

Next, to serve our static files with gzip and HTTP2 using Nginx, we will need to check if we have the modules needed. The modules required are "ngx_http_gzip_static_module" and "ngx_http_v2_module". Run the following command and check if the output contains "--with-http_gzip_static_module" and "--with-http_v2_module".

```
sudo nginx -V
```
Here is the server block of our Nginx configuration that enables gzip and HTTP2. Note that to use HTTP2, we will first need HTTPS. If HTTPS is not yet activated, follow the guide of [Let's Encrypt](https://letsencrypt.org/).

```
server {
  listen 443 ssl http2;
  ssl_certificate /PATH/TO/YOUR/CERTIFICATE;
  ssl_certificate_key /PATH/TO/YOUR/CERTIFICATE/KEY;
  location / {
    alias /PATH/TO/YOUR/BUILD/FOLDER;
    gzip_static on;
  }
  server_name YOURSERVERNAME;
}
```
The gzip_static directive allows Nginx to serve files with .gz extensions, while the http2 activates the support for HTTP2.
CSS Grid: repeat function — basics
Tags: css, beginners, tutorial
Published: 2022-05-25 13:38:03

Hello. Today I want to talk about the last function specific to CSS Grid: repeat function. This simple, yet powerful tool can make your life much easier when building complicated layouts. Let’s dive in!

This article is part of my CSS Grid introduction series. If you want to check out my previous posts, [here](https://dev.to/mateuszkirmuc/css-grid-tutorial-table-of-contents-1g4) you can find the whole table of contents.

---

## Function definition.

The function can be used only as a value of grid-template-columns or grid-template-rows CSS properties. It can be used several times in single property.

```
grid-template-columns: repeat(...) repeat(...);
```

The function takes two arguments: positive number or one of two special keywords (auto-fill or auto-fit). The type of the first argument determines the available values for the second argument and the final result. Therefore this article will be dedicated only to the numeric argument. The use of auto-fill and auto-fit keywords is a little more complex subject and deserves a separate article.

```
grid-template-rows: repeat(10, ...) repeat(5, ...);
```

The value of the second argument takes exactly the same syntax as the value of grid-template-columns/grid-template-rows CSS properties. This means we can use a combination of any method used to define track size (like length type, percentage, fr unit, sizing keywords, or sizing function) along with grid lines names. You can check out one of my previous [articles](https://dev.to/mateuszkirmuc/css-grid-defining-the-grid-58j9) as a reminder.

```
grid-template-rows: repeat(3, 1fr 10px 20% auto fit-content(10px));

grid-template-columns: repeat(2, [first] 1px [second, abcd] 1fr);
```

Resulted value is pretty straightforward: it is the second argument multiplied by the first argument.

```
grid-template-columns: repeat(3, 1fr 50px);

is equivalent to:

grid-template-columns: 1fr 50px 1fr 50px 1fr 50px;
```
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlxlan3ntzz8aweg0d3l.png)

```
grid-template-columns: repeat(2, [a] 100px [b] 50px [c]);

is equivalent to:

grid-template-columns: [a] 100px [b] 50px [a, c] 100px [b] 50px [c];
```

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

Notice how grid line names are applied to according grid line.
 

---

Thank you for reading this short article. If you want to read more content like this you can follow my dev.to or [twitter](https://twitter.com/MateuszKirmuc) account. Also, feel free to give me any form of feedback. I'd love to read any comments from you. See you soon in my next article!

---

PS. If you would like to support my work, I will be grateful for a cup of coffee. Thank you. ❤️

<a href="https://www.buymeacoffee.com/mateuszkirmuc" target="_blank"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wovao2myccggp2830esp.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
Set up Arch Linux in WSL
Published: 2022-04-12 07:39:04

## Install Arch Linux on WSL
- Download the latest version of ArchWSL from [here](https://github.com/yuk7/archwsl/releases) 
- NOTE: I've saved the folder as `ArchLinux`
- Extract the archive 
- Run the following command _in PowerShell_ to install ArchWSL:
```powershell
cd D:\
Expand-Archive .\ArchLinux.zip 
D:\ArchLinux\Arch.exe
```
![Screenshot 2022-03-17 145954](https://user-images.githubusercontent.com/69384921/158779592-379e8947-cf52-47ac-8057-ac0794fc257d.png)

 Done ! Arch is now installed _as a custom distro_ on WSL.

## Init keyring and populate the pacman database
- Create a new user with sudo privileges
- Run the following command _in PowerShell_ to boot your distro for the first time:
```cmd
wsl -d ArchLinux
```
This should open up a bash terminal, and execute some _refreshing-key..._-like commands...

```
echo "%wheel ALL=(ALL) ALL" > /etc/sudoers.d/wheel
```

This command added in the sudoers file ensures that all the members of the `wheel` group can execute any command.

```
pacman -Syy archlinux-keyring
pacman-key --init
pacman-key --populate
pacman -Syy
```

This will update the pacman database, using the ArchLinux keyring.

## Create a new sudo user

```bash
READ  -p "Enter the username: " username
useradd -m -g users -G wheel -s /bin/bash $username
passwd $username
su $username
```

This asks the user the new password as input, and then creates the user with the specified username.

## SystemD

```bash
curl -L -O "https://raw.githubusercontent.com/nullpo-head/wsl-distrod/main/install.sh"
chmod +x install.sh
sudo ./install.sh install
sudo /opt/distrod/bin/distrod enable 
sudo rm ./install.sh
echo ----------------------------------------------------------------------------------------------------------
echo Now terminate this distro and open a new shell!
echo ----------------------------------------------------------------------------------------------------------
```

`curl` is a command line tool for transferring files from or to a remote server. It can be used to download files from website links, just like what we have done in the previous step.

`chmod` is a command line tool for changing the file permissions of files and directories.

`echo` is a command line tool for printing strings to the standard output.

NOTE: You have to set your user as the default user on ArchLinux.

Do this by running `/path/to/arch.exe config --set-default-user <username>`.
Why I like using Vim
Tags: vim, programming, codenewbie, beginners
Published: 2022-05-25 13:30:52

### My friends keep on asking me "Why do you use _Vim_?". And my reply to this question is simple, to boost my **productivity**🤷‍♂️
By using Vim we force ourselves to use the keyboard every time we perform some action in our code. By not moving our hands from the keyboard to the mouse, we save a few seconds⌛️
These seconds are very minimal but when you see the amount of work you are able to do by just sticking to the keyboard, you will know why many people like using Vim💻
If you are coding and you have to move your hand to the mouse, your productivity is affected. Whereas if you just use the keyboard and focus more on the code, you might enter the flow state which will help boost your productivity👨‍💻
Now I don't use Vim directly and am more of a **_Vim extension_** user. I use Vim extensions/plugins in both VS Code and Goland(Golang ide by jetbrains). 
In VS Code you can just search for "_Vim_" in the extension section and download it.
![Vim for VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xnky0to0wf1d08w0tus.png)

For Jetbrains IDEs you can download "_IdeaVim_" from the plugins section.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxl2olp2vu9kvj6bnd9w.png)

These extensions and plugins will help you to run your code in your code editor by using Vim commands. This will help you become more productive while keeping the features of your favourite IDEs.
Have a happy and productive programming!!👋
What skills should be learned to earn an internship?
Tags: discuss, programming, career, suggestions
Published: 2022-05-25 13:29:18

During couple of months, our university is having their placement season ( they are offering internships in place of job offers ). Till now I haven't been provided with any offers in hand. 

What do you guys think I should **work upon to grab an internship** ?

A short brief about me, I am a **full stack developer with MERN stack and have till now worked with 4 companies as an intern adding up to 1 year of experience with these stacks**.
Explain Memoization in a pure Javascript
Tags: javascript
Published: 2022-05-25 13:20:30

Memoization is the process of caching the output of function calls so that subsequent calls are faster. Calling the function again with the same input will return the cached output without needing to do the calculation again. 

Because JavaScript objects behave like associative arrays, they are ideal candidates to act as caches. Each time a memoized function is called, its parameters are used to index the cache. If the data is present, then it can be returned, without executing the entire function.  However, if the data is not cached, then the function is executed, and the result is added to the cache.

A basic implementation in Javascript looks like this:

```javascript
const memoize = fn => {
  const cache = new Map()
  return value => {
    const cachedResult = cache.get(value)
    if (cachedResult !== undefined) return cachedResult
    const result = fn(value)
    cache.set(value, result)
    return result
  }
}
```

## Note

- The above technique returns a unary function even if the function can take multiple arguments.
- The first function call will be slower than usual because of the overhead created by checking if a cached result exists and setting a result before returning the value.
- Memoization increases performance on subsequent function calls but still needs to do work on the first call.
JavaScript closures, explained
Tags: javascript, webdev
Published: 2022-05-25 12:26:27

**Closures are a concept that puzzle many JavaScript developers**, even after reading the zillion articles that have been written about the topic. Yes, this is just one of those zillion articles 😄, but I'll do my best to explain it.

To explain what a closure is, first we have to explain the concept of *scope*.

**The scope indicates in which places a given variable is available.** Global variables (i.e. those not inside a function or block) are available everywhere in the code.

If you create a new variable inside a function, the scope of that variable is the function itself, it's not available outside. And if you create one function inside another, the inner function can access the parent's variables.

And if you create a variable using `const` and `let` inside a block of code enclosed in curly braces (`{` and `}`), those variables exist inside that block only.

In JavaScript, functions can return another functions. When that happens, the new function can access the variable from its parent. For example:

```javascript
function createLuckyNumberFunction(name) {
    const luckyNumber = parseInt(10000 * Math.random());

    return function() {
        return `${name}'s lucky number is ${luckyNumber}`;
    }
}

const mikesLuckyNumber = createLuckyNumberFunction("Mike");
console.log(mikesLuckyNumber());
// 👆 Outputs "Mike's lucky number is 3220"

const juliasLuckyNumber = createLuckyNumberFunction("Julia");
console.log(juliasLuckyNumber());
// 👆 Outputs "Julia's lucky number is 1449"
```

The function `createLuckyNumberFunction` (from now on, I'll call it the "parent function") create another function (the "child function") and returns it.

The child function can access the variables from the parent, with the values they had when the child function was created.

For example, the function that we get from the first call to `createLuckyNumberFunction` has access to the variables `name = "Mike"` and `luckyNumber = 3220`. And the function from the second call can read the following variables: `name = "Julia"` and `luckyNumber = 1449`.

**A closure is a combination between a function and its surrounding variables**. In this example, the closures are made of the inner function and the variables `name` and `luckyNumber`.

Closures are useful when you want to hide variables and prevent them from being modified externally. In the examples above, nobody can change the lucky number after it was created.

Another use is when the function will be executed in a different context (i.e. as a callback), but the function needs variables that may not be available at call time. 

---

If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/
My Experience with AstroJS
Tags: javascript, astro, webdev, opensource
Published: 2022-05-25 13:16:04

I wanted to migrate my site to something simpler from [Gatsby](https://www.gatsbyjs.com/). Gatsby uses a ton of configuration files and maintaining [GraphQL](https://graphql.org/) queries for a simple blog doesn't make much sense.

I wanted support for markdown everywhere and less config for running TailwindCSS.

I tried out [NextJS](https://nextjs.org/) & [Eleventy](https://www.11ty.dev/).

NextJS seems like a very heavy framework for maintaining a simple blog.

And, I found Eleventy hard to configure for things beyond the suggested path. Plus, the [starter projects](https://www.11ty.dev/docs/starter/) didn't seem very helpful for my use case.

I remembered seeing [Astro](https://astro.build/) a few months back and thought I'd try it out.

Astro has a great [site](https://astro.new/) for starter templates. I could just go and see the live version with code. I checked out both it's Tailwind & Markdown starters and they had minimal config compared to other frameworks.

Astro supports Markdown out of the box. But what I really liked is how easy it makes importing markdown in templates. You can write text in Markdown and import it like a component.

```js
import { Content as About} from '../snippets/about.md';
```

Even Syntax Highlighting works out of the box. 

With a lot of other templating frameworks, you need to install third-party extensions for formatting and syntax highlighting in your editor which don't work properly every-time. But turns out, Astro has official extensions for VSCode (the editor I use) and a few other [platforms](https://docs.astro.build/en/editor-setup/) too. 

Astro also supports using vanilla JS for dynamic HTML which seems great coming from the React ecosystem.

```js
---
const items = ["Dog", "Cat", "Platypus"];
---
<ul> {items.map((item) => (<li>{item}</li>) )} </ul>
```

Overall, I had a really great experience with Astro.

Note:
> Examples have been adapted from the AstroJS Docs site.

> Astro is relatively new compared to other frameworks & I just wanted to make a simple blog with it. It might not be stable for more use-cases yet.
Solidity
Published: 2022-05-25 13:14:01

Multiple deeds
```
pragma solidity ^0.5.0;

  contract SplitDeed {
    address payable public benificiary;
    uint256 public transferDate;
    address lawyer;`

   constructor(
        address _lawyer,
        address payable _benificiary,
        uint _transferDate
    )
        payable // Allow to send ether on creation of contract
        public
    {
        lawyer = _lawyer;
        benificiary = _benificiary;
        transferDate = _transferDate;

    }

    function withdraw() public{
        require(msg.sender == lawyer, "Lawyer only");
        require(now > transferDate, " Too early ");
        benificiary.transfer(address(this).balance);
    }
}
```

Escrow

```
pragma solidity ^0.5.2;

contract Escrow{
    address payable public dev;
    address public website;
    address public customer;
    uint public amount;

    constructor( address payable _dev, address _customer,uint _amount) public {
        dev = _dev;
        website = msg.sender;
        customer = _customer;
        amount = _amount;

    }

    function deposit() payable public{
        require(msg.sender == customer, "Only customer can add money");
        require(address(this).balance <= amount, "Money can not exceed given amount");
    }

    function sendMoney() public{
        require(msg.sender == website, "Only website can transfer money");
        require(address(this).balance == amount, "Amount not proper"); 
        dev.transfer(address(this).balance);
    }

    function getBalance() view public returns(uint){
        return address(this).balance;
    }

}
```
JavaScript MCQ Questions Answers
Published: 2022-05-25 13:05:22

[Quizack](https://quizack.com/) is offering the latest [JavaScript MCQs](https://quizack.com/javascript/questions-and-answers) free of charge. You will be able to cover almost every topic through Javascript multiple choice questions. Subject matter experts have researched various testing techniques and online practices to choose topics. Interestingly, you will be given a chance to practice all those questions via interactive online simulations.
kubectl output like a pro
Tags: kubernetes, docker, kubectl, devops
Published: 2022-05-25 12:59:14

If your work involves [kubectl](https://kubernetes.io/docs/reference/kubectl/), even more wrapping [kubectl ](https://kubernetes.io/docs/reference/kubectl/)commands in bash scripts, then this might be for you.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpuuil1icb8l1qyu4op0.png)
 
 So let's say you want to take only the pods **names** for **all namespaces**. You can use things la AWK, grep but also you can customize your output:

```bash
kubectl get po -o name -A
```
Pretty simple, and it looks like this:

> pod/harbor-jobservice-5f56f77c85-75fzj
> pod/harbor-nginx-858bb8887f-8grwb
> pod/harbor-portal-59ff88c985-2k878
> pod/harbor-redis-0

If you don't like that fact that pod's names are prefixed with `pod/`...say no more:

```bash
kubectl get po -o=custom-columns=NAME:.metadata.name -A
```

> harbor-jobservice-5f56f77c85-75fzj
> harbor-nginx-858bb8887f-8grwb
> harbor-portal-59ff88c985-2k878
> harbor-redis-0

Would be nice though to know the namespace in which each pod is running:

```bash
kubectl get po -A -o go-template='{{range .items}} --> {{.metadata.name}} in namespace: {{.metadata.namespace}}{{"\n"}}{{end}}'
```

>  --> harbor-jobservice-5f56f77c85-75fzj in namespace: harbor
>  --> harbor-nginx-858bb8887f-8grwb in namespace: harbor
>  --> harbor-portal-59ff88c985-2k878 in namespace: harbor
>  --> harbor-redis-0 in namespace: harbor

That's about it, also this applies for [Docker ](https://www.docker.com/) check this [article](https://faun.pub/docker-101-format-command-output-8e2673f083af).
Use opaque types to improve typing on basic types
Tags: typescript
Published: 2022-05-25 12:57:58

---
title: Use opaque types to improve typing on basic types
published: true
tags: typescript
cover_image: https://images.unsplash.com/photo-1557657043-23eec69b89c9?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746
---

Have you ever wanted to give a `string` field a type alias?

In TypeScript, these are interchangeable:

```typescript
type Username = string;
type Password = string;
```

That means that even if we type parameters with A and B:

```typescript
function logIn(username: Username, password: Password) {}

const username: Username = "username";
const password: Password = "password";

logIn(username, password);
```

TypeScript won’t stop us from mixing them up:

```typescript
function logIn(username: Username, password: Password) {}

const username: Username = "username";
const password: Password = "password";

logIn(password, username);
```

Opaque types is a way to let TypeScript understand what we’re really after, and will make TS shout at us when using the types wrong, just as it would with any other complex type:

```typescript
type Username = Opaque<string, "Username">;
type Password = Opaque<string, "Password">;

function logIn(username: Username, password: Password) {}

const username: Username = "username";
const password: Password = "password";

logIn(password, username); // 🚨🚨🚨
```

Read more about them here:
<https://codemix.com/opaque-types-in-javascript/>

And get the Opaque type from type-fest:
<https://github.com/sindresorhus/type-fest/blob/main/source/opaque.d.ts>

_Photo by Amy Asher on [Unsplash](https://unsplash.com/photos/giZJHm2m9yY/)_