teleren/devto huggingface dataset:
Trying bun for the first time
Tags: bunjs, nextjs, react, javascript
Published: 2022-07-19 21:27:33

---
title: Trying bun for the first time
published: true
description: Trying bun for the first time by creating nextjs Application (SSR) and fetch data from Rick and Morty API.
tags: #bun, #nextjs, #react, #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3zaamkda9r0j5n9px23.png
---

Hello Everyone, I'm Excited about the new JavaScript run time **Bun** .
It's blazing fast, compared to **Nodejs**, and you can also install npm packages.

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

So I though why not Try it out by myself, I used rick and Morty API to fetch Data from


and here's how the code looks like
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a3u8udg7v7tmitcyfl5.png)

Project Code: https://github.com/benyou1969/Rick-And-Morty-NextJS-Bun

Read more about Bun: https://bun.sh
Day 596 : Breakthrough
Tags: hiphop, code, coding, lifelongdev
Published: 2022-07-19 21:24:26

_liner notes_:
- Professional : Had a breakthrough in the demo application I was building for a feature. Spoke with the team and found out something that wasn't really made explicit in the documentation. I got it working, but it threw a weird error. Asked the team about it and we'll see what they say. Also got a chance to speak with a new team member. Really nice guy. Also worked on writing up some descriptions and timestamps for the videos I recorded.

- Personal : Last night, I some how went down a rabbit hole looking at reviews and videos for Snap's flying camera, Pixy. I went to their website and it said it would ship that night and when I previous visited when I first heard about it, it said like 11 - 12 weeks shipping. So after a few videos, there aren't really a lot out there, I decided to purchase one. I'm thinking it'll be pretty cool to get some shots when I'm traveling. It's supposed to come in a couple of days.

![Looking through a cave out to the ocean and cliffs in Mallorca, Spain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bu5f4i6majse451w420p.jpg)

I'll probably work on the radio show. Just remembered that I already started the track list last week and just need to find the artists' Twitter accounts. Want to watch a couple of episodes of "The Rise of the Shield Hero" as well.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube WLS3ubRJhg0 %}
How to Stay Accountable with Your Learning
Tags: accountability, focus, motivation
Published: 2022-07-19 21:16:44

There are several accountabilities hacks out there and you might have tried some of them out in the past. The tips shared in this article will help you stay more accountable when others fail. 

**The Stake Model**
As you will expect, if you get anything out of life, you need to stake something. For any successful learning adventure, you had to stake your time and probably let go of some fun or even miss events.

In the Stake Model, you simply find something valuable to you - either a certain amount of money or something of sentimental value to you that you don't want to let go of and give it to a trusted person with the following well clarified and understood:

- The Learning objective: What exactly do you want to learn
- Duration: How long will it take you to learn this
- Success Criteria: What determines if you have successfully completed the learning adventure. You need to pay attention to this. If what you are learning is a technical skill like Power BI, for example, your acceptance criteria should include working on a Power BI Report and documenting this properly on GitHub or Medium. In fact, make sure you submit samples of how detailed your documentation should be. 
The key takeaway here is that you truly want to grow by pushing yourself to do what you haven't done before
- Your Return on Lean: If you have any agreement with your accountability partner, you should clarify what the return will be for you. It is not a must that your accountability partner should give you something back.

Watch this short video to understand the Stake Model very well
{% embed https://youtu.be/6VCJc16dsvs %}

**Benefits of Using The Stake Model**

1. If your parent is your accountability partner, this is a great way to show them your commitment to growth and they can go the extra lengths to get you the support needed for your growth.
2. If your mentor is your accountability partner, this is an excellent way to convince them of your commitment to growth and they can be encouraged to support you even when not convenient for them.
3. It is a way to get what you need for your next learning journey. as you share your growth with the community, it is easier for people to estimate the value of their investment in you. If you can do this with just a phone, with a PC, you can even do more. simple.
4. Sharing your journey can also connect you to the right mentor. there is no way to convince your potential mentor of your commitment if you don’t have evidence like this. You need to practice accountability in your learning and growth journey.

**Learning Resource**
30Days of Learning: https://aka.ms/30DLOnboardingRecap scroll down to the end of the page and click on the Data Analysis Track
How to make a video calling website in python flask?
Tags: ask, flask, python
Published: 2022-07-19 21:13:38

I want to make video calling website where people can call each other and do stream. I had searched a lot. In most of video its just a simple. When I ask someone they say use `websockets` and instruction are unclear. I really need a push  what I have to really do, which  library to learn? If you any materials from where I can learn step by step.
MariaDB with Replication in Docker
Tags: sql, docker, tutorial, bash
Published: 2022-07-19 20:46:00

In this blog we are going to demonstrate how to replicate a MariaDB database that runs in a Docker container.

Automatically deploy environment by;

Running the deploy_config.sh after cloning this Repo {% embed https://github.com/nabangi/MariaDB-in-Docker %} 
Environment prep and manually deploy

```
sudo apt update
```

Installing the Docker engine incase its not installed yet

```
sudo apt-get remove docker docker-engine docker.io

sudo apt install docker.io

sudo systemctl start docker

sudo systemctl enable docker
```

logout then login again to enable user rights incase they don't apply immediately

```
sudo groupadd docker

sudo gpasswd -a "${USER}" docker

usermod -aG docker "${USER}"
```

Create the database persistent volume to be mounted

```
mkdir -p /opt/mariadb/master-data
```

Grant Permissions

```
sudo chown -R 1001:1001 /opt/mariadb/master-data/
```

Running containers in dettached mode but when you remove the "-d" it could help with debugging the running configs in the container!

```
docker run -d or docker-compose up -d 
```

To login to a container

```
docker exec -it $container_id bash
```

Mariadb

```
$ mysql -u my_user -p
  #my_password

```
after login check databases

```
show databases;
use my_databse;
```

then create table form there

```
exit;
```

check or configure replication

login with root

```
$ mysql -u root -p
  #master_root_password
```

then

```
show master status;
```

To import:

```
docker exec -i adprcc3ms_mariadb-master_1 mysql -uroot -pmaster_root_password my_database < mariadb-master-dump.sql
```

To export:

```
docker exec -i adprcc3ms_mariadb-master_1 mysqldump -uroot -pmaster_root_password my_database > mariadb-master-dump.sql

```
Stop and backup the currently running container, Uncomment the following lines

```
docker stop $container_id
```

```
rsync -a /opt/mariadb/master-data /opt/mariadb/master-data.bkp.$(date +%Y%m%d-%H.%M.%S)
```

incase you want to scale up number of slaves or scale down

```
docker-compose up --detach --scale mariadb-master=1 --scale mariadb-slave=3
```

To clean up

```
docker stop $container_id

docker rm $container_id
```

You can also remove all images and stopped contaners using

```
docker prune -a
```

Run the following to see if the cronjob you've defined actually runs.

```
sudo grep CRON /var/log/syslog
```

VOILAA...!!!
Ng-News: Episode 22/28
Tags: javascript, webdev, programming, angular
Published: 2022-07-19 20:44:20

{% embed https://youtu.be/lhj7Jf0dS_M %}

## Better type-safety with zod

In TypeScript, there are cases where we don't have a guarantee that the type we define is the one that is used during the runtime.

A typical example is the response of an HTTP request because the HttpClient doesn't verify that type. However, suppose you want that a verification still happens.

In that case, you should read Tim Deschryver's latest article, where he showcases zod, a validation library for TypeScript, and of course, how to integrate it into Angular.

{% embed https://twitter.com/tim_deschryver/status/1544001427525230592 %}

## Advanced TypeScript

If you have been working for some time with TypeScript, you will very likely be fascinated by its possibilities for type inference or utility types.

Especially NgRx, a state management library, shows the potential of TypeScript, if you really master it.

Mike Ryan, a member of the NgRx team, wrote an article where he explains step by step the techniques behind the createActionGroup function, which can actually be seen as a masterpiece.

{% embed https://twitter.com/findabsolutejoy/status/1545095846726774784 %}

## ModuleFederation in Nx

ModuleFederation is a feature of webpack and is often used for MicroFrontends.

It is a perfect example of a community-driven project where especially Manfred Steyer did a lot of pioneering work.

Nx, an alternative to the Angular CLI, has now a feature where ModuleFederation is used to build only changed lazy loaded modules but not the rest of the application. This is obviously a massive boost in terms of build time. Colum Ferry wrote an article where he explained this feature in detail and how to apply it.

{% embed https://dev.to/nx/setup-module-federation-in-angular-using-nx-5gko %}
PHPStorm Tips #8 : Rechercher et ouvrir plusieurs fichiers
Tags: phpstorm, productivity, php, webdev
Published: 2022-07-19 20:18:33

Aujourd'hui, petit coup de projo sur la recherche de fichiers et la capacité à en ouvrir plusieurs d'un coup.

Pour chercher un fichier, plusieurs possibilités :

- Rechercher par **nom de fichier** `Ctrl` + `Shift` + `N`
- Rechercher par **classe** `Ctrl` + `N` 

Dans les deux cas, PHPStorm va t'ouvrir une **liste déroulante** avec les résultats :

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

On peut utiliser les flèches pour mettre le fichier qu'on veut ouvrir en surbrillance puis `Entrée` pour l'ouvrir.

Mais si t'hésites entre plusieurs fichiers (_par exemple avec le même nom de classe ou de fichier_), il est possible d'en ouvrir plusieurs, pour ça :

Soit tu restes appuyé sur `Shift` puis `↓` pour descendre et **mettre en surbrillance** plusieurs fichiers:

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

Soit avec la souris, `Ctrl` + `clic gauche` :

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

Puis `Entrée`, et voilà, tous les fichiers sélectionnés s'ouvriront !

> ⛈️ **Le commentaire de l'expert** : La recherche PHPStorm est assez "intelligente", si tu sais que ta classe `Toto` est dans le namespace `MonJoliNamespace`, tu peux chercher : "Joli/Tot", et il le trouvera.
PHPStorm Tips #7 : Naviguer dans le YAML
Tags: phpstorm, productivity, php, webdev
Published: 2022-07-19 20:11:56

Aujourd'hui, 2 petites astuces :

- Comment aller rapidement **à la déclaration d'une clé** .yml
- Comment **copier une clé .yml** pour la coller en tant que string

## 🔎 Trouver rapidement une clé

Si tu es face à une clé, par exemple :

`akeneo.tailored_import.data_mapping.operations.category_replacement.title`

Et que tu veux rapidement retrouver le fichier .yml où elle est déclarée, sélectionne la clé, puis utilise le raccourci `Shift` 2 fois de suite (`Shift` `Shift`). 

La recherche rapide va te retrouver le fichier et te montrer la clé :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kplpba4auw413didn5a.gif)

## 💾 Copier rapidement une clé

Maintenant, l'inverse peut être utile : à partir d'une clé .yml, tu veux rapidement la copier pour la coller en tant que _string_.

Pour ça, sur la clé dans le fichier .yml fais un clic droit, puis "**Copy / Paste Special**" > "**Copy Reference**", et voilà, tu peux coller ça n'importe où :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0767ikf6644oql89vnx1.gif)
PHPStorm Tips #6 : Les contextes
Tags: phpstorm, productivity, php, webdev
Published: 2022-07-19 20:07:26

Aujourd'hui petit coup d'oeil aux contextes PHPStorm, que je trouve cools pour le cas suivant :

- Tu bosses sur ta branche **PR-1**, avec 8 fichiers d'ouverts
- Tu dois revenir rapidement sur une autre branche, **PR-2** et travailler sur 6 autres fichiers
- Tu reviens sur ta branche **PR-1**, et tu veux rapidement ré-ouvrir les 8 fichiers sur lesquels tu bossais

**PHPStorm peut ajouter une sélection de fichiers à un contexte pour la retrouver plus tard.**

Quand t'es prêt à sauvegarder ta sélection de fichiers ouverts, va dans Tools > Tasks & Context > Save Context (ou `Shift` + `Alt` + `S`), nomme ton contexte et zouh !

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

Perso, je nomme ce contexte du nom de la PR sur laquelle j'étais. Ensuite, tu peux tout fermer, ouvrir et bouiner les fichiers que tu veux etc.

Une fois que t'es prêt à retrouver ton contexte sauvegardé, Tools > Tasks & Context > Load Context (ou `Shift` + `Alt` + `L`), et ZOUH, tu retrouves tous tes fichiers !

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dzx1f55faaamn0cg9n1.gif)

Pour supprimer un contexte, ouvre le "Load Context" clique sur la petite flèche, puis sur "Remove". 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ul92ssknjhhy7y729zj.gif)

> ⛈️ **Le commentaire de l'expert** : Pour aller plus loin et notamment exploiter le plein potentiel des Tasks, c'est par ici : [https://www.jetbrains.com/help/phpstorm/managing-tasks-and-context.html](https://www.jetbrains.com/help/phpstorm/managing-tasks-and-context.html)
Building micro frontends with Vercel + Lit
Tags: lit, vercel, webcomponents, microfrontend
Published: 2022-07-19 20:06:00

I recently began exploring Vercel for microservice development in a course I was teaching. Like any good professor, it's important to propose a course topic you only sort of know about. I knew web components; how hard could Microfrontend development be?

This series will detail some of the lessons learned in developing a series of microservice + web component projects the last few months. These are beginning to distill down to follow a common pattern:
- Front end brick that works anywhere (ala web components, lit based)
- Something to broker and manage the API calls (middleware / class on front end)
- End point that is blackboxy, returning expected output (Vercel for these examples, though really AWS Lambda)

I hope that by covering the similarities and differences in approaches I've taken to produce a few of these it can help others think through the potential benefits of web components.

![Stories about microservices](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s92dsvxp68x9grt57u8.png)

Here's some links to start poking around:
- Our storybook hooked up to Vercel - https://haxapi.vercel.app/ look for the "microservice"
- Code Monorepo - https://github.com/elmsln/lrnwebcomponents/tree/master/ . `/api` has the endpoints for the microservices and `/elements` contains source for our web components
Crea imagenes elegantes de prueba en laravel-alternativas a fakerphp
Tags: faker, fakerphp, fakerimages, laravel
Published: 2022-07-19 20:02:28

Aprende a crear imágenes elegantes de prueba y almacenar en el servidor, con éstos dos alternativas de **fakerphp** de forma sencilla:
**1. Primera opción**
Proveedor de imágenes alternativo para fakerphp usando **faker-images**
**INSTALACIÓN**

```
composer require --dev mmo/faker-images
```
**USO**
Creamos un seeder o factories

```
php artisan make:factory admin/ImageFactory
```
Dentro de imageFactory

```
class ImageFactory extends Factory
{
//protected $model = Image::class;
    public function definition()
    {
        $faker = \Faker\Factory::create();
        $faker->addProvider(new \Mmo\Faker\PicsumProvider($faker));
        $faker->addProvider(new \Mmo\Faker\LoremSpaceProvider($faker));
       return[
           'url' => 'cursos/' . $faker->picsum('public/storage/cursos', 640, 480, false),
            ];

   }
}
```
Para más información del paquete visita su [repositorio](https://github.com/morawskim/faker-images)
**2. Segunda opción**
Proveedor de imágenes alternativo para fakerphp usando **picsum.photos**
**INSTALACIÓN**

```
composer require --dev mmo/faker-images
```
**Uso**
Creamos un seeder o factories

```
php artisan make:factory admin/ImageFactory
```
Dentro de imageFactory

```
class ImageFactory extends Factory
{
//protected $model = Image::class;
    public function definition()
    {
        $faker = \Faker\Factory::create();
        $faker->addProvider(new \Smknstd\FakerPicsumImages\FakerPicsumImagesProvider($faker));
        return [
            'url' => 'cursos/' . $faker->image('public/storage/cursos', 640, 480, false),

          ];

   }
}
```
Para más información visita su [repositorio ](https://packagist.org/packages/smknstd/fakerphp-picsum-images)
**Solución a posibles errores**

```
php artisan storage:link
```

**Cambiar en el archivo .env de local a public**

```
FILESYSTEM_DISK=public
```
Si te sirvió no dudes en compartirlo hasta la próxima codero...!
Rebuilding Management
Tags: architecture, management, programming, discuss
Published: 2022-07-19 19:50:26

Is there a short solution for this kind of problem?

This question kept popping up in my head for the past 2 weeks. With a fairly complex background of problems, ranging from Human Resources to existing Management and Information Systems.

Sometimes for companies that are pioneering this often happens or even in companies that have been running for a long time.

{% twitter https://twitter.com/panggilmeiam/status/1549479739613913088 %}

Does anyone here have the same experience as me?
Reviewing Javascript Comparisons
Tags: javascript, beginners
Published: 2022-07-19 19:30:56

Hi y'all,

This is where I'm going to be taking some notes on specific Comparison operators in Javascript. Typing this out will help me remember the specifics and may also be useful to you as a reference sheet! I will also be attempting to transliterate what the code is saying to make it easier to read.

## Equality and Inequality Operators

**The Strict Equality Operator (===)**
Equal without any type conversions

```
60 === 60;
// 60 (number) is strictly equal to 60 (number)
> true


60 === "60";
// 60 (number) is strictly equal to 60 (string)
> false

```

**The Strict Inequality Operator (!==)**
Unequal without any type conversions

```
60 !== 60;
// 60 (number) is strictly not equal to 60 (number) 
> false


60 !== "60";
// 60 (number) is strictly not equal to 60 (string) 
> true
```

**The Loose Equality Operator (==)**
Equal with any type conversions (with extra examples)

*Extra examples aren't necessarily accurate but they're true in the confines of the coding language

```
60 == "60";
// 60 (number) is loosely equal to 60 (string) 
> true

true == 1;
// true is loosely equal to 1 (number)
> true

"0" == false;
// 0 (string) is loosely equal to false
> true

null == undefined;
// null is loosely equal to undefined
> true

" " == 0;
// Empty Quotations is loosely equal to 0 (number)
> true
```

**The Loose Inequality Operator (!=)**
Inequal with any type conversions 

```
60 != "60";
// 60 (number) is not equal to 60 (string)
> false

61 != 60;
// 61 (number) is not equal to 60 (number)
> true

```

## Relational Operators

- greater than (>)
- greater than or equals (>=)
- less than (<)
- less than or equals (<=)

*Important to note that Javascript will attempt to convert strings into numbers here

*For the last example, note that if both sides of the inequality are strings, it will only compare them lexicographically (left to right, by each character). It will NOT convert the whole string into a number.

```
70 > "60";
// 70 (number) is greater than 60 (string)
> true

70 >= 70;
// 70 (number) is greater than or equal to 70 (number)
> true

70 < "80";
// 70 (number) is less than 80 (string)
> true

70 <= "71";
// 70 (number) is less than or equal to 71 (string)
> true

"70" > "8";
// 70 (string) is greater than 8 (string)
> false (see note above)

```

## Sources

**MDN:**
- [Expressions and Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)

- [Equality Comparisons and Sameness](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness)
PHPStorm Tips #4 : Extend Selection
Tags: phpstorm, productivity, php, webdev
Published: 2022-07-19 19:27:06

Aujourd'hui, un petit raccourci de derrière les fagots : **Extend Selection**.

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

Quoi que tu aies sélectionné, PHPStorm peut **étendre ta sélection** de manière logique. Par exemple, si tu as sélectionné le texte en jaune :

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

Tu peux **étendre** la sélection avec `Ctrl` + `W`, ce qui donnera :

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

A partir de là, il est possible de l'**étendre** encore avec `Ctrl` + `W` :

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

Et ainsi et suite, je pense que t'as capté le deal.

> ⛈️ **Le commentaire de l'expert** : Si jamais tu as un peu abusé du `Ctrl` + `W` et que tu veux réduire ta sélection, `Ctrl` + `Shift` + `W` est là pour **réduire** ta sélection.
PHPStorm Tips #3 : Extract method / variable
Tags: phpstorm, productivity, php, webdev
Published: 2022-07-19 19:20:00

Aujourd'hui, on extrait !

## Extract method - `Ctrl` + `Alt` + `M`

Un bloc de code un peu trop important qui mérite sa propre méthode ? PHPStorm t'aide à extraire tout ça, check donc :

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

En plus il te laisse la main pour changer la visibilité (private, public..), changer l'ordre et le typehint des arguments, merci la tempête.

Pour se souvenir du raccourci, `Ctrl` + `Alt` + `M`**_ethod_**, MALIN !

## Introduce variable - `Ctrl` + `Alt` + `V`

Un accès un peu trop récurrent sur un getter ? Une string que tu utilises plusieurs fois ? PHPStorm te permet de rapidement l'extraire en variable :

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

Comme tu peux le voir, il te propose de changer l'occurence sélectionnée ou toutes les occurences qu'il a trouvé 😍

Pour se souvenir du raccourci, `Ctrl` + `Alt` + `V`**_ariable_**, ULTRA MALIN !

> ⛈️ **Le commentaire de l'expert** : ces méthodes d'extractions sont aussi disponibles dans le menu "refactor" au clic droit !

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