teleren/devto huggingface dataset:
Console.time & 4 other webdev tips you may want to know 🚀
Tags: javascript, css, html, webdev
Published: 2022-10-10 15:47:51

## 1. Console.time
You can use `console.time()` to starts a timer to track how long an operation takes. Also, you can also use the timeLog method in between the start and the end of the timer. Here’s a quick example:

![Console.time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av2zdfajygjf5hanz78f.png)


&nbsp;
## 2. The importance of input types

You can improve the UX of your app by using the correct input type so the phones/tablets can choose the best keyboard to show to the end user:

![input types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o48zi9udrtgo1p931t84.png)




&nbsp;
## 3. CSS where
The `:where()` Css pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. The code below produce the same output (exept the specificity is different) but the second one is more concise:

![CSS where](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ymu89hspc7hw9fbdqx7.png)

There's a lot to say about `:is()` and `:where()`. if you want to read more aboute these pseudo-class selectors, you can click on the link below 👇
{% embed https://dev.to/mustapha/where-is-css-20nk %}





&nbsp;

---

Hi there! I'm Mustapha, a technical writer, speaker and a passionate JS / TS developer. Follow me on [Twitter](https://twitter.com/TheAngularGuy) for daily tech tips 🚀


---


&nbsp;
## 4. The spellcheck attribute
The spellcheck attribute defines whether an element may be checked for spelling errors.
You can use it in text inputs, textarea and editable content (elements with `contenteditable="true"`).

![spellcheck attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhryerf3vfhputz4gdou.png)



&nbsp;
## 5. Attribute selectors
Did you know about the different ways you can use the attribute selectors in CSS?
Have a look:

![Attribute selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mbac47ajmhyqg0pztqu.png)

Note that the selector is case sensitive. If you want it to be case insensitive, add an I before the closing bracket:

![Attribute selectors not case sensitive](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ve47vchpdaaoko2pkm5k.png)





&nbsp;
&nbsp;

That's all for now. I hope you found this useful! 
Leave a comment to let me know which tip (if any) you found useful ⤵


Until next time, have a nice week!



&nbsp;
### What to read next?

{% embed https://dev.to/mustapha/i-made-a-working-gameboy-css-art-try-it-out-4m1j %}
Pashupati Group lives by the motto of taking care of people and environment.
Tags: productivity, beginners, tutorial, career
Published: 2022-10-10 09:59:05

The group distinctly contributes to circular economy, positively influencing our ecosystem while addressing very critical environment issues that the world faces today.

Visit to know more- [https://pashupatigrp.com/](https://pashupatigrp.com/)
sequence of parameters with bind()
Tags: javascript, bind
Published: 2022-10-10 12:49:24

I try to put some html element object in a class und
write addEventListener which should work for all instances.

I found a solution, but I don´t understand it.
eg.
```
class ValueSlider extends HTMLDivElement {
    constructor() {
        .  .  .
        this.startDrag = function(el, evt) {
            let thisNow = this; // class object
            let element = el; // mySvg object
            let event = evt; // event object
            .  .  .
        }

        this.evHandler = this.startDrag.bind(this, this.mySvg);

        this.mySvg.addEventListener("mousedown", this.evHandler );
    }
}
```
Why the function receives the event object as last parameter ?

Thank you for discussion
Erhie
Remove all tables in a Postgres schema
Tags: postgres
Published: 2022-10-11 08:04:28


![Tables in a data model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqnaqad8p9x460gcuqvy.png)

When working with initial migrations in a project it is often helpful to fast clear all tables and then re-run all migrations. Instead of removing och re-creating the schema (which will affect everything besides just tables), you can use this script taken from [this SO answer](https://stackoverflow.com/a/36023359/1202214).

```sql
DO $$ DECLARE
    r RECORD;
BEGIN
    -- if the schema you operate on is not "current", you will want to
    -- replace current_schema() in query with 'schematodeletetablesfrom'
    -- *and* update the generate 'DROP...' accordingly.
    FOR r IN (SELECT tablename FROM pg_tables WHERE schemaname = current_schema()) LOOP
        EXECUTE 'DROP TABLE IF EXISTS ' || quote_ident(r.tablename) || ' CASCADE';
    END LOOP;
END $$;
```
Day 5-8 of 100DaysOfCode
Tags: nextjs, 100daysofcode
Published: 2022-10-13 04:52:21

---
title: Day 5-8 of 100DaysOfCode
published: true
description: A summary of the first 3 days
tags: nextjs, 100DaysofCode
# cover_image:[Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvwzx3sdefeppe5qgcwr.png)
# Use a ratio of 100:42 for best results.
---

## A Summary of the first 4 days

I have used ReactJS before so I was easily able to quickly move on to fetching data. I spent the first 3 days practicing how to get data from an API. I spent day 4 making a cocktail project that involved me getting data from a cocktail api, I am currently trying to fix any bugs before I deploy the final product.

## Day 5-8

As I stated in my, about me post, I want to become a full-stack developer. So, I feel like I should start off with front-end since it is a little bit easier than back-end. I am starting with NextJS and I decided to sign up for a [hackathon](https://codebattles.dev/event/dce4b8cd-b48d-4511-b4d6-b0058c179944/). I had created a draft of what I wanted the website to look like in Figma. So, I started off by implementing the API and adding the navigation features and dynamic routes. I plan to work on styling on day 9 and 10. Lastly, I have finally finished the [cocktail project](https://cocktail-recipies.vercel.app/). I plan to come back to this project when I finish the first stage of the five year plan, mastering NextJS, and add more features to it.


# thank you and have a great day!
how do i use async with array.map
Published: 2022-10-10 17:28:26

Today I ran into a problem with the sync function. I need to save the asynchronous information that I get from my JSON type database in an array.map which is a synchronous function.

```
  /**
   * Report Excel ShetReportProduction
   */
   async reportExcelRow(reportExcelProductionDetailId: string): Promise<any>{
    const sheetProudction  = await this.SheetProductionServ.getReportExcelbyId(reportExcelProductionDetailId).pipe().toPromise();

    console.log("SheetProduction: ", sheetProudction);

    this.exportExcelService.exportAsExcelFile("-", '-');

  }
```
I am going to use the information obtained in the arrray.map function to be able to export it to an excel. Currently I have not been able to relate the async function to array.map. Could you help me?
Recursion - 1
Tags: computerscience, python, codenewbie, algorithms
Published: 2022-10-11 04:33:26

<u>Recursion in computer science is  technique where the solution to a problem depends on solutions to smaller instances of the same problem.</u>

Let problem be f(N) then smaller problem would be like 

F(N)= F(N/3) | F(N/3) | F(N/3)

Let us see the most classical example - Factorial
Let N = 5, I want to computer F(N) = 5!
I would break this into smaller subproblem of same type like

Hence F(N) = (N)(N-1)(N-2)....1
It can be written as F(N) = (N)(N-1)!
F(N) = (N)F(N-1)!
F(5) = 5*F(4)
F(4) = 4*F(3)
F(3) = 3*F(2)
F(2) = 2*F(1)
F(1) = 1*F(0) -> **Base Case**
At F(0) We know that it cannot be breakdown further, such a point in algorithm where the condition must stop is called **Base Case**
We generally have the knowledge of base cases. Here in this example we set F(0) which is a base case we intialize it to **1**.

After hitting base case algorithm revert back to original case by replacing functions to values.
For example
F(1) = 1*1 = 1
F(2) = 2*F(1) = 2*1 = 2
F(3) = 3*F(2) = 3*2 = 6
F(4) = 4*F(3) = 4*6 = 24
F(5) = 5*F(4) = 5*24 = 120 **Final Answer**

Dealing with recursion we see two directions:-
1) Simplifying problem towards the base case (Top to down)
2) Combining solutions coming back to the main problem (Down to Top)

<u>Recursion take the help of Call Stack</u>

Another Example!
We can define the operation "Go to Home" as:
**Base Case**
1. If you are at home, stop moving.
**Recursive Case**
2. Take one step toward home.
3. "Go to home".


![Factorial of a number through recursion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwy6tre046ydhid3f2lt.png)

_**Recursion = Principal of Mathematical Induction**_
1. Figure of the smallest case
2. Always Assume the Subproblem can be solved.
3. Solve the current problem assuming subproblem solution exists.
Top 7 sites to find free PNG images in 2022
Tags: png, resource, images
Published: 2022-12-16 20:26:34

You know that feeling when you’re trying to find a PNG file but all you’re getting are JPEGs with watermark marked as PNG. Today we’ll be having a look at 7 Free PNG Websites that can ease up the process of finding a suitable PNG file for your project.

1. [PNGHERO](https://pnghero.com/)
PNGHERO offers over 55 million PNG images. All content is licensed under Creative Common Zero (CC0) license which means all the images on the platform can be used in commercial projects too.

2. [FAVPNG](https://favpng.com/)
FAVPNG is a community of creative artists offering a wide range of free transparent PNG images. The platform contains more than 16 million PNG images that are free to use for any personal no-commercial and educational projects.

3. [IMGBIN](https://imgbin.com/)
This site provides some amazing high-resolution PNG images and clipart pictures. IMGBIN platform contains free transparent PNG images which can be used in any personal non-commercial project.

4. [Pixel Squid](https://www.pixelsquid.com/)
Pixel Squid is one of the best places for finding beautiful free transparent PNG images and 3D objects. This PNG image site has a variety of 3D graphics and transparent background clipart that are free to use on any personal and non-commercial project.

5. [PNGHUT](https://pnghut.com/)
Find over 10 million free transparent PNG images and icons on PNGHUT. It is a non-commercial website developed by a bunch of graphic designers. This site is exceptionally useful for finding a vast variety of PNG images for non-commercial projects.

6. [Mrcutout](https://www.mrcutout.com/)
Discover gorgeous royalty-free transparent PNG images on the Mrcutout website. All these clear background PNG images are released under the Creative Common Zero (CC0) license, which means you can use these images in your commercial projects as well.

7. [CleanPNG](https://www.cleanpng.com/)
Clean PNG, is a website having more than 3,000,000+ free transparent PNG images. The platform has high-quality free PNG images organized in over 50,000+ categories. The best thing is you can download an unlimited number of images without registering on the platform.

In 2022 this is the list of websites containing beautiful high-resolution PNG images. Bookmark this page for future reference and don’t forget to share this with your designer friends.
Vue 3 Mouse and Keyboard event combo
Tags: vue
Published: 2022-10-12 09:05:06

I had trouble figuring out keyboard events in Vue, so I'm writing this for future reference

[Edit in Vue SFC Playground](https://sfc.vuejs.org/#eNp1U8GOmzAQ/ZURF4iUQKveKInaSpV66K3H0gPgYSELtmUPpBHi3zvGZnfTqr7Y4/f8PPPsWaLPWqfzhFEeFbYxvSawSJO+lBJ49KNWhmABgy2s0Bo1Qsz0uJSe0ChpCTo1o4GzYyVtNVg8vEWf8R6wOH4AcEZJNmA/fzHmUaGaaWQorYT46jjfe0so0SQxawl1k/EREjzA+QKLP+IGY+lcDROyIqYcfXzF/FUeTvVku2Rx/NwTj76C3E+BReoHmV4+JQdYQ9puLjLvEzvEAeGoh4ow+FV0H8IK4NtmSqIMSEUHoA6hnoiUhBoHdYNKCqC7xnAyezlaBNqnUU0Wncq5jHaLyUxYRgEbsJrxDbh5z2gzVNbu+19IltFLViGvHJZlQ9d1v9/fuudAVT3sVfmN7sJOFRnPj7tici556/6BDcynVrkCcIZehnd4yMcTxWVZcHaPsa6sIv5HCEn/ReHQ7Jlne+q8en0dDi3dQ0lehY3Zv0+tjHCmvNe/waqhF1APVfMcPtCtF9Qx+M7guG2xZ/wNNrnoGPkmOY2VTq9WSW6lTbUMAFfLbnulMuLmcTG/DZG2eZbZtnENeLWpMk8Zr1IzSepHTNGOp9qom+UveWWVcPMarX8Ab/IwVw==)

{% embed https://gist.github.com/barakplasma/c66b2bc8c94b9870f2439b3adc074373 %}
100 DAYS OF CODE CHALLENGE
Published: 2022-10-12 20:18:55

## DAY 5

- WHAT I DID TODAY
Adding audio to my web page

- WHAT I LEARNT FROM WHAT I DID TODAY

   The first step I took was to go to YouTube audio library on the YouTube app, then I searched and downloaded a song of my choice, after downloading the song, I dragged and dropped the MP3 file to the folder containing my index.html file, then I headed back to my VS Code.
   Within the body element, I created an audio element and listed the source equal to the name of my MP3 file, then I added a Boolean attribute [A Boolean attribute is an attribute that can be true or false]. The Boolean attribute I added was the control attribute within the audio attribute. The end result was looking like this;[<audio controls src="New Moon.MP3>].
   With these control attribute, I can play the audio file of my choice, it can be fast forwarded and can also be muted.
100 DAYS OF CODE CHANLLENGE
Tags: react
Published: 2022-10-12 20:43:01

**Day 4**
What I did today
I started my Alt school second semester first assignment, we are told to create a calculator using react on either Replit, Stackblitz or Codestackbox.
    I will be using Replit, I started with it already and hopefully, I will finish by tomorrow.
Day 634 : The Best
Tags: hiphop, code, coding, lifelongdev
Published: 2022-10-12 23:29:09

_liner notes_:
- Professional : Today, there was an all hands meeting. It was cool to hear what's happening with the company. Then I started back working on the demo application I've been putting together. Basically spent the day searching the internet and docs for any sort of help or code snippets.

- Personal : Got the screen for the side door of my van last night and put it up this morning. I tried it on the passenger side and it fit pretty well. I think it really kept my van cool. It got to 86 degrees, and my van was pretty comfortable. Even got a nice breeze. My plan is to put it on the driver side door since I don't really go through that door. Last night, I worked on my side project. Made some pretty good progress and went to sleep.

![A lake surrounded by sky covered mountains and green valleys in Lünersee, Austria](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tndb6bixs4hxq0asijkz.png)

Going to do some coding. Watch the first episode of "Chainsaw Man" anime, heard some good things like it's one of the best animes out in a while. Planning on trying to catch up with "The Walking Dead" also.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube SozX28GZNd0 %}
CryptoJS 用前端加密、解密
Tags: crypto, javascript, tutorial
Published: 2022-10-13 13:01:09

## 本篇要解決的問題

一般來說，加密解密這件事兒都是要讓後端來處理，因為前端寫的程式碼全部都會是明碼，加解密的密碼會大辣辣的攤在所有平行宇宙底下。

But！對，就是這個 But！在 August 遇過的專案中卻用過二次加解密的功能，主要是一些普通的資料不想一直調用 API 來取得，就暫存在 Cookies 中，儲存的時候寫「12345」跟寫「U2Fs+7ZUKvqr+7C=」之類的就是不一樣。

而且也不是所有工程師看到別人的頁面就會去無聊翻 Cookies 跟 JS 檔去解密吧？加上敢存在前端的資訊不會是什麼重要機密了，所以前端的加、解密就還是有機會用到。

本篇是用 Crypto.js 來進行加解密的動作，選它是因為網路上很多人推薦，GitHub 上星星數也多……對，工程師的選擇就是這麼的樸實無華，再加上實際使用起來真的很簡單，因此就決定是它了。

CryptoJS 官方說明文件：[GitHub](https://github.com/brix/crypto-js)。

---

## 安裝

官方文件提供的安裝方式主要分為二種：前端 Browser、後端 Node.js。

身為一位專業的前端工程師們，我們這邊就傲驕的用前端版的。

前端安裝方式也有二種：直接 CDN 引用、import。

### CDN

基本上搜尋「crypto js cdn」，就會看見一些第三方的 CDN 網站有提供，比方 [cdnjs](https://cdnjs.com/libraries/crypto-js)。

寫這篇時的最新版本是 4.1.1，可以直接引用：

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
```

### import

首先先安裝 package：

```shell
$ npm install crypto-js
# 或
$ yarn add crypto-js
```

接著在 JS 檔中 import，import 時可以選擇直接整包，也可以只引用我們有用到的功能。

本篇不會直接 import 整包，而是只 import 有用到的功能：

```javascript
import AES from 'crypto-js/aes';
import Rabbit from 'crypto-js/rabbit';
import encUtf8 from 'crypto-js/enc-utf8';
```

---

## 使用

官方 API 的文件在這：[GitBook](https://cryptojs.gitbook.io/docs/)。

### AES 加密解密

AES 加解密是官方提供的範例之一，使用方式很簡單：

```javascript
import AES from 'crypto-js/aes';
import encUtf8 from 'crypto-js/enc-utf8';

// 加密
const ciphertext = AES.encrypt('要加密的字串', '加密密碼').toString();

// 解密
const bytes = AES.decrypt(ciphertext, '加密密碼');
const originalText = bytes.toString(encUtf8);
```

`加密密碼` 就是每個人自行設定，把它當通關密語，加密跟解密的雙方都要用這組密碼來認證一樣。

除了加解密字串，文件裡也有提供加解密 Object 的部份，其實就是把 Object 變成字串：

```javascript
import AES from 'crypto-js/aes';
import encUtf8 from 'crypto-js/enc-utf8';

const obj = [{id: 1}, {id: 2}]

// 加密
var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(obj), '加密密碼').toString();

// 解密
var bytes  = CryptoJS.AES.decrypt(ciphertext, '加密密碼');
var originalObj = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
```

### Rabbit 加密解密

除了範例上的 AES，看 API 文件裡提到的 [Rabbit](https://cryptojs.gitbook.io/docs/#ciphers) 好像也是蠻厲害的，寫法跟 AES 差不多。

```javascript
import Rabbit from 'crypto-js/rabbit';
import encUtf8 from 'crypto-js/enc-utf8';

// 加密
const encrypted = Rabbit.encrypt('要加密的字串', '加密密碼');

// 解密
const decrypted = Rabbit.decrypt(encrypted, '加密密碼');
const originalText = decrypted.toString(encUtf8);
```
Apa yang menarik di Next.Js 12.3
Tags: nextjs, javascript, typescript, react
Published: 2022-10-16 07:42:34

Next.js versi 12.3 membawa beberapa peningkatan antara lain:
- Improved Fast Refresh
- TypeScript Auto-Install
- Image Component
- SWC Minifier
- New Router + Layouts Update

Dari beberapa peningkatan di atas yang membuat saya cukup tertarik adalah adanya TypeScript Auto-Install, simpel tapi sangat membantu. Dengan fitur ini kita bisa tidak perlu ribet setup insatalasi typescript di projek yang sudah ada, cukup menambahkan file typescript next.js akan otomatis menginstall setup yang diperlukan. Fitur ini akan otomatis bekerja saat kita menjalankan perintah `next dev` atau `next build`.
This Week In Python
Tags: thisweekinpython, python
Published: 2022-10-14 11:13:44


**Fri, October 14, 2022**


This Week in Python is a concise reading list about what happened in the past week in the Python universe. 


## Python Articles


- [When Python can’t thread: a deep-dive into the GIL’s impact](https://pythonspeed.com/articles/python-gil/)
- [Decorator shortcuts](https://nedbatchelder.com/blog/202210/decorator_shortcuts.html)
- [Python implementations of time series forecasting and anomaly detection](https://robjhyndman.com/hyndsight/python_time_series.html)
- [Musings on Python Type Hints](https://samgeo.codes/blog/python-types/)
- [The dangers of assert in Python](https://snyk.io/blog/the-dangers-of-assert-in-python/)




## Projects


- [django-consistency-model](https://github.com/occipital/django-consistency-model) – DCM is a set of tools that helps you to keep your data in your Django Models consistent
- [semantic-python-overview](https://github.com/pysemtec/semantic-python-overview) – overview of projects which are related both to python and semantic technologies
- [python-preloaded](https://github.com/albertz/python-preloaded) – Bundle Python executable with preloaded modules
- [inline-sql](https://github.com/ekzhang/inline-sql) – Inline SQL in any Python program
- [pycopy](https://github.com/pfalcon/pycopy) – a minimalist and memory-efficient Python dialect
Create Custom Scrollbar Using CSS
Tags: css, scrollbar, webdev, tutorial
Published: 2022-10-17 14:33:04

I was always interested in learning about how to make a custom scrollbar and finally, I managed to do it.

First, let me show the components of a scrollbar. A scrollbar contains the thumb and the track. The thumb is the draggable scrolling handle and the track is the progress bar, the entire scrollbar itself.


![Scrollbar components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9un0a4mfjwl6o53qf1n.png)

**The Scrollbar Width**

First, we define the width of the scrollbar (width for vertical scrollbars and height for horizontal ones) using the following pseudo element: ``::-webkit-scrollbar``

```css
::--webkit-scrollbar {
    width: .6em;
}
```

**The Scrollbar Track**

We can style the scrollbar by shadows, border-radius, background-colors and use the pseudo element: ``::-webkit-scrollbar-track``

```css
::--webkit-scrollbar-track {
    background-color: transparent;
}
```

**The Scrollbar Thumb**

The scrollbar thumb can be styled by background-colors, gradients, shadows, border-radius. We use the pseudo element ``::-webkit-scrollbar-thumb`` for it.

```css
::--webkit-scrollbar-thumb {
    background-color: #e1d3cf;
    border-radius: 5px;
    border: .2em solid #25649a;
}
```

Other pseudo elements:
``::-webkit-scrollbar-button`` -  the arrows pointing upwards and downwards.
``::-webkit-scrollbar-corner`` - the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.

Here you can see a codepen demo and play with it:

{% codepen https://codepen.io/HighFlyer/pen/mdLoGMa %}

Unfortunately, this way works on Webkit-based browsers only. For Mozilla Firefox we can use only two parameters: ``scrollbar-color`` and ``scrollbar-width`` and they should be applied to the ``<html>`` element, not the ``<body>``.

The ``scrollbar-width`` has following values: ``auto``, ``inherit``, ``initial``, ``none``, ``revert``, ``thin`` and ``unset``. We can’t define a specific number.

With the ``scrollbar-color`` we define a color for both the scrollbar track and thumb as pair values.

```css
html {
   scrollbar-color: #e1d3cf #25649a;
   scrollbar-width: thin;
}
```

In this case, we can't use shadows, gradients, or rounded edges to style it.

That's all folks! :tada: Thank you for reading. For further information, please, check out the [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#browser_compatibility) resource.
In One Minute : git
Tags: git, beginners, programming, oneminute
Published: 2022-10-15 10:48:58

Git is free and open source software for distributed version control: tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.

Its goals include speed, data integrity, and support for distributed, non-linear workflows.

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

Git development began in April 2005, after many developers of the Linux kernel gave up access to BitKeeper, a proprietary source-control management (SCM) system that they had been using to maintain the project since 2002.

Stack Overflow has included version control in their annual developer survey
in 2015 (16,694 responses), 
2017 (30,730 responses),
2018 (74,298 responses)
and 2022 (71,379 responses).

Git was the overwhelming favorite of responding developers in these surveys, reporting as high as 93.9% in 2022.

Official Website :- https://git-scm.com/
Application specific preferences on my Mac have gone 😱
Tags: application, mac, tutorial, dropbox
Published: 2022-10-15 12:47:27

A few weeks ago I head a problem with my applications where whenever I changed a setting they were not saving, or the settings had just reverted to their default. My VSCode, ZSH, mechanical keyboard settings had all gone.

After hours I managed to figure out the issue and I've created a video below to show how I did it.

{% embed https://www.youtube.com/watch?v=gavAOJDbbjY %}