teleren/devto huggingface dataset:
how to start self hosting 🚀
Tags: docker, linux, beginners, tutorial
Published: 2022-09-10 10:50:49

![picture](https://github.com/Ayman-s-Lab/selfhosted-pi/raw/main/pics/main.jpg)

in this article we will be setting up a raspberry pi server and installing docker and portainer on it. so you can selfhost your own services on it.

![picture](https://media.giphy.com/media/JSjjhv0tuiTGW6peHb/giphy.gif)
## First Steps

- install the raspbian os on your sd card.
  you can follow this tutorial from [2:25](https://www.youtube.com/watch?v=gyMpI8csWis&t=1304s) ⏩ prep the Raspberry Pi.
- connect the raspberry pi to your wifi network.
- ssh into the raspberry pi using the ssh command.

```
ssh pi@ipaddress
```

- update and upgrade the system using the command below.

```
sudo apt update && sudo apt upgrade
```

- and reboot the system.

```
sudo reboot
```

congratulations you have now installed the raspberry pi.

- now you can install the following software.

```
sudo apt install git
sudo apt install nvim
    ...
        ...
            ...
```

### installing docker

to install docker, clone this repo and run the install script.

```
git clone https://github.com/Ayman-s-Lab/selfhosted-pi.git
cd selfhosted-pi/installation-scripts
chmod +rx docker.sh
./docker.sh
```
Remember to logout/reboot for the changes to take effect.
```
logout
```
ssh into the raspberry pi again
### installing portainer
portainer is a web application that can be used to manage and easily deploy your docker containers .

to install portainer, open th installation-scripts folder and run the install script.

```
cd installation-scripts
chmod +rx portainer.sh
./portainer.sh
```
yeah, now you can access portainer at http://ipaddress:9000 .

you created a new administrator user and chose docker as a container env aaand you are ready to go🎆.

Click Settings, in the bottom-left corner, and paste the Portainer v2 json file link from below into the "App Templates" box.
this is the one i use for my portainer.
i will create my own soon.

```
https://raw.githubusercontent.com/ntv-one/portainer/main/template.json
```
You're done! Now just click App Templates and deploy applications!

![done](https://media.giphy.com/media/CRbvUItILGRs4/giphy.gif)

Thanks for reading this article, i hope you enjoyed it.

if you have any questions or suggestions, feel free to contact me on [twitter](https://twitter.com/NamyaTheWizard) 

dont forget to give this [project](https://github.com/Ayman-s-Lab/selfhosted-pi) a star⭐ to support me.
Migrate YouTube Subscriptions into Another Account with C#
Tags: dotnet, csharp, youtube
Published: 2022-09-10 10:41:09

If you have multiple YouTube accounts and looking for a way to import your subscriptions into another account, you can implement it yourself by following this tutorial:

[![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkkdahrs1yxruc4mwws1.png)](https://devpower.co.uk/dotnet/migrate-youtube-subscriptions-into-another-account-with-csharp/)

The key takeaways:
* Don't forget to revoke your token before switching to the destination account
* I'd rather use service accounts to avoid all the manual approvals but they don't seem to work with YouTube
* Nothing beats solving a problem with your own code 💪
Working with existing DB Tables through Python
Published: 2022-09-10 10:32:15

The whole point of coding is to not learn stuff and do things faster, no one codes because they want to learn some random framework by heart as if it was a religious book sent down by some divine power!

What is on the web? 
Millions of Tutorials who insist on teaching DB interaction through creation of Tables and manipulation of DB via Python.
Reality--> A programmer needs a simple mechanism of inserting simple data units into an already existing Database or retrieving them back. 

Managing the DB is in itself a vast academic field and almost always is handled by actual DB managed DUDE/Girl who has devoted his life to digital book keeping leaving those in the hands of a python coder is nothing short of insanity so it begs the question why is there so many tutorial on creating db via python and not enough simple ones about just retrieving the damn data!!! The only possible answer is deep sexual frustration and social anxieties of the IT community members who make such useless tutorials.


So if you need to access a table in the database that is already in there all you have to is to have this piece of code:

`


`from sqlalchemy import MetaData,create_engine
from sqlalchemy.orm import declarative_base, sessionmaker

import sqlalchemy 




str1='mysql+pymysql://username:pass@ip_of_db:port_of_dbserver/schema_name'
engine=create_engine(str1)
s_factory=sessionmaker(bind=engine)
metadata = MetaData(engine)
metadata.reflect()
Base=declarative_base(metadata=metadata)


class Users(Base):
    __tablename__='users'
    __tableargs__={"autoload": True,"autoload_with":engine}


with s_factory() as s:
    ret=s.query(Users).filter(Users.id==3).first()
    print(ret)`

from sqlalchemy import MetaData,create_engine
from sqlalchemy.orm import declarative_base, sessionmaker

import sqlalchemy 




str1='mysql+pymysql://username:pass@ip_of_db:port_of_dbserver/schema_name'
engine=create_engine(str1)
s_factory=sessionmaker(bind=engine)
metadata = MetaData(engine)
metadata.reflect()
Base=declarative_base(metadata=metadata)


class Users(Base):
    __tablename__='users'
    __tableargs__={"autoload": True,"autoload_with":engine}


with s_factory() as s:from sqlalchemy import MetaData,create_engine
from sqlalchemy.orm import declarative_base, sessionmaker

import sqlalchemy 




str1='mysql+pymysql://username:pass@ip_of_db:port_of_dbserver/schema_name'
engine=create_engine(str1)
s_factory=sessionmaker(bind=engine)
metadata = MetaData(engine)
metadata.reflect()
Base=declarative_base(metadata=metadata)


class Users(Base):
    __tablename__='users'
    __tableargs__={"autoload": True,"autoload_with":engine}


with s_factory() as s:
    ret=s.query(Users).filter(Users.id==3).first()
    print(ret)
    ret=s.query(Users).filter(Users.id==3).first()
    print(ret)`
I bet on entirety my sexual hormones that this comment-less piece of code is more useful then the entire alchemy Doc on hand!!!
Json to SQL { .db file }
Tags: javascript, whatsappweb
Published: 2022-09-10 10:13:38

I have been writting whatsapp bots using javascript and the common way i use to authenticate with whatsapp web... Is json file. {Via baileys} I was thinking of turning json file into a database file... .db im looking for a better software to do this task... I tried several but they result a simple sql file.
20+ React Libraries to Jumpstart your next project
Tags: javascript, react, npm, webdev
Published: 2022-09-10 10:00:13

In the universe of npm, there are a lot of packages to choose from, so knowing which one to choose from can be very difficult. In This article, we will first look at the categories of libraries which are server-side-rendering, animation,state-management, and General Utilities and we will then look at the packages under these categories.

#### 1.General Utilities
The npm packages in this category are just packages that are helpful so few specific tasks and you may eventually need them. The packages in this include:
1. moment.js -- very good for working with dates
2. Axios -- good for handling async tasks 
3. React-hot-toast, React-toastify — handling small notifications and toasts
4. react-icons," @mui"/icons-material  —  For icons
5. react-paginate —  For pagination 
6. React-share — Share things Socially  
7. React-slick, react-responsive-carousel — For Carousel 
8. clsx — For conditional classes 
9. react-intersection-observer — For intersection 
10. react-dropzone  — For file upload and drag and drop

#### 2. Animation
Bringing animation to your site just makes it more fun and pleasant for your viewers. That being said, the packages under animation include:

1. GSAP
2. Framer motion
3. React-spring
4. Anime.js

#### 3. State Management
Sometimes the data in your React.js application can be very difficult to manage effectively and the React content API isn't just good enough. That being said, the packages under state management include:

1. Redux
2. Redux Toolkit -- my personal favourite
3. Recoil
4. Mobx
5. React Context -- not recommended for big projects

#### 4. server-side rendering
if you are building a highly optimized robust website you will need an SSR framework because they make routing easier, they fetch data on the server and return to the component, they optimize images so it doesn't bottleneck performance, and much more. That being said, the packages under server-side rendering include:

1.  Next.js
2. Gatsby.js -- for only SSG (static site generation)
3. Remix

##### Conclusion
if you enjoyed please do not forget to drop a follow and a reaction and follow me. **IF YOU LIKED THE POST, THEN YOU CAN BUY ME MY FIRST COFFEE EVER, THANKS IN ADVANCE.**
<a href="https://www.buymeacoffee.com/alex03" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
Kotlin Springboot -- Part 8 インスタンスの作成を Component 機能を使って Dependency Injection が自動で行われるようにする
Tags: kotlin, springboot, ca
Published: 2022-09-10 09:57:25


## why

DI をして 各層で完全に分離された Unit テストを書くため。

---

## 以前のインスタンスたち

```kotlin
    val personsDriver = PersonsDriver()
    val personsGateway = PersonsGateway(personsDriver)
    val personsUsecase = PersonsUsecase(personsGateway)
    val persons = personsUsecase.getAllPersons()
```

これまでは Rest に 全てのインスタンスを作成して

```kotlin
class PersonsUsecase(val personsGateway: PersonsGateway) {
  fun getAllPersons():Persons {
    return personsGateway.getAllPersons()
  }
}
```

Usecase 以下では引数からインスタンスを受け取って使っていた。

---

## Rest で Usecase を引数から読み込む

```kotlin
@RestController
class PersonHandler(
  val personsUsecase: PersonsUsecase
) {
```

Rest でも引数で Usecase のインスタンスを読み込むようにする。
ハンドラの一番上に書いてもこれだけだとクラスのインスタンスなどない。

```kotlin
@Component
class PersonsUsecase(
  val personsGateway: PersonsGateway,
) {
```

だが、Usecase に Component のアノテーションをつけることで、これはアプリが動いた直後に優先して取り込むものとして認識されるので、RestController の引数として受け取ることができる。

```kotlin
@Component
class PersonsGateway(
  val personsDriver: PersonsDriver
) {
```

```kotlin
@Component
class PersonsDriver {
```

Gateway と Driver でも同様に書く。
これで各層の引数に書いておけば、自動で各層が依存している層のインスタンスを使用できるようになった。

---

## まとめ

Rest と Domain 以外の各層で Component アノテーションを書く。

そして Rest から Gateway まで引数に、依存する層のインスタンスを書く。

これで Rest で全ての層のインスタンスを作成しなくても依存する層のインスタンスが使えるようになる。
AWS Backup adds Amazon CloudWatch metrics to its console dashboard
Tags: aws, devops, security, architecture
Published: 2022-09-10 09:33:14

[AWS Backup](https://aws.amazon.com/backup/) now provides you a way to centrally view your Amazon CloudWatch metrics for your data protection jobs directly in the AWS Backup console. With this launch, you can monitor your data protection metrics (of backup, copy, and restore jobs) for all the AWS Backup supported services, spanning compute, storage, databases, and third-party applications.

**TO ACCESS THE DASHBOARD**

1. Open the AWS Backup console at [https://console.aws.amazon.com/backup](https://console.aws.amazon.com/backup).

2. Select **Dashboard** in the left-hand navigation pane.

**Metrics with CloudWatch**
You can use CloudWatch to monitor AWS Backup metrics. The `AWS/Backup` namespace allows you to track the following metrics. AWS Backup emits updated metrics to CloudWatch every 5 minutes.

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

The following table lists all the metrics available to you.

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




More dimensions are available beyond those listed in the table. To view all the dimensions of a metric, type the name of that metric into the AWS/Backup namespace of the Metrics section of the CloudWatch console.

[more details](https://docs.aws.amazon.com/aws-backup/latest/devguide/cloudwatch.html)
Spreading arrays in a resilient way using JavaScript/TypeScript
Tags: javascript, programming, beginners, typescript
Published: 2022-09-10 08:55:30

Spreading is a really handy technique that we JavaScript developers use daily. 

Some common usages are:
- When constructing a new array using the existing array items immutably.
- When updating or adding items to an array.

We see code like the following often:

```
const originalArray = [a: {count: 1}, b: {count: 2}, c: {count: 3}]

const newArray = [...originalArray, a: { count: 10}]
```

## Perils of spreading in JavaScript

But it can be fraught with peril when the spread array can be undefined. 

Just like with destructuring undefined values, spreading undefined values can be the source of unexpected bugs.

For example examine the code below:

```
const originalArray = couldBeStringArrayOrUndefined()

const newArray = [...originalArray]
```

## Perils in TypeScript

This same code is further complicated in TypeScript. You will be faced with an error 

```
const originalArray = couldBeStringArrayOrUndefined()

const newArray: string[] = [...originalArray]

Type 'string[] | undefined' must have a '[Symbol.iterator]()' method that returns an iterator.
```

## Solution

The solution is quite simple.

If you know the value could be undefined add an OR empty array.

So for the above code:

```
// In Vanilla JS
const newArray = [...originalArray || []]

// In TypeScript
const newArray: string[] = [...originalArray || []]
```

This solution makes intuitive sense, as this code is simply specifying that if the spread array is undefined an empty array will be spread (and thus no items spread).

## Caveat

This solution comes with the caveat that wherever possible it is better to make sure an undefined value is handled further up the chain.

For example if your undefined value can come from an asynchronous call, it might be better to explicitly get your promise to resolve to an empty array `[]`.

This will have the same effect as the solution above, but also give you the confidence of being able to test the value being added in.

But this isn't always possible, so don't feel bad if you have to resort to the `...spreadArray || []` combo when needed.

## Takeaways

- Using the spread operator is great!
- But be careful of spreading undefined values.
- Use the simple `...spreadArray || []` combo to make your code resilient to undefined values!
Free Flutter Themes!!
Tags: flutter, dart, programming, beginners
Published: 2022-09-10 08:53:56

Control every pixel to create customized & adaptive designs that look great on any screen. Take control of your codebase with plugins, testing, and dev tools & build high-quality apps.

## 1) Material Kit Flutter:

Material Kit Flutter features over 200 variations of widgets like buttons, inputs, cards, navigation, etc, giving you the freedom of choosing and combining.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1b7ofhywhk9nfwcpqoj.jpg)
.
👉 [**Product Page:**](https://www.creative-tim.com/product/material-kit-flutter?AFFILIATE=128200)
.
👉 [**LIVE DEMO:**](https://demos.creative-tim.com/material-kit-flutter/?AFFILIATE=128200)

**************************************
## 2) Argon Flutter:

Argon Flutter comes packed with a large number of components and cards. Putting together a mobile app has never been easier than matching together different widgets. From the profile screen to a settings screen, you can easily customize and build your screens.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6b2eyhhq59vspqu8hjid.jpg)
.
👉 [**Product Page:**](https://www.creative-tim.com/product/argon-flutter?AFFILIATE=128200)
.
👉 [**LIVE DEMO:**](https://demos.creative-tim.com/argon-flutter/?AFFILIATE=128200)

**************************************
## 3) Now UI Flutter:

Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications. We have redesigned all the usual components to make it look like our Now UI Design, minimalistic and easy to use.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u2k2g2j521ej8tnkgj0.jpg)
.
👉 [**Product Page:**](https://www.creative-tim.com/product/now-ui-flutter?AFFILIATE=128200)
.
👉 [**LIVE DEMO:**](https://demos.creative-tim.com/now-ui-flutter/?AFFILIATE=128200)

***********************************

> My fav theme is MATERIAL KIT.
> Which one is your favorite theme?? Let me know in the comment section.
> Thank you!!!!

FOLLOW, LIKE, AND SHARE!
[Flutter Queen](https://www.instagram.com/_flutter.queen/)
Learn Python #8 - Let's do Tuple...🐍
Tags: python, programming, webdev, codenewbie
Published: 2022-09-10 08:34:42

## Tuples 💡
Tuple in Python is a collection that is ordered, and unchangeable.

### Find an element by index 💡
You can find an element in the `tuple` by index
```
new_tuple=(1,"b",False)
print(new_tuple[0]) //1
print(new_tuple[1]) //"b"
```

### Ordered 💡
The tuple is an ordered collection. The order can not be changed.

### Unchangeable 💡
Once defined, the `tuple` cannot be changed. But we can do some work around to update the `tuple` by leveraging `list`.
```
new_tuple = (1,"b")
updated_tuple = list(new_tuple)
updated_tuple[1] = "c"
new_tuple = tuple(updated_tuple)
print(new_tuple) // (1,"c")
```

### Access the elements 💡
Items in a tuple can be accessed with a negative index as well.
```
new_tuple=(1,2,3,"a", False)
new_tuple[-1] //False
```

## Conclusion 📗

There are more posts on the way related to the tuples...So keep reading.

Thanks in advance for reading this article...🚀

*I am more than happy to connect with you on*

- [@twitter](https://twitter.com/_nitinreddy3)
- [@LinkedIn](https://www.linkedin.com/in/nitinreddy3/)

*You can also find me on*

- [@Github](https://github.com/nitinreddy3)
- [@DEV](https://dev.to/nitinreddy3)
- [@Medium](https://medium.com/@nitinreddy3)
Bruh. I accidentaly deleted my project before pushing it to github.
Tags: javascript, webdev, programming, react
Published: 2022-09-10 08:29:27

Man it is tough. I don't know what to say or do.
The story goes like this.
I was coding on my portfolio project. I was coding it using React and Vanilla CSS.
I was very happy with the results. using Linux is no joke bro. I accidentally excuted rm -rf myportfolio it was saved in the terminal history.
what i can say is it was experience and I protect my self from these kind of things.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unij1be1hrdica9u4eas.jpeg)
How I got my first AWS Certificate
Tags: cloud, aws, webdev
Published: 2022-09-10 08:07:03

*How did I get my first AWS certificate as a beginner*

This is my personal experience on AWS certificate as front-end developer.

[Watch the video here](https://youtu.be/EXBaNzMES7A)

*Connect with me:*

Twitter: [https://twitter.com/hellonehha](https://twitter.com/hellonehha)

Linkedin: [https://www.linkedin.com/in/nehha/](https://www.linkedin.com/in/nehha/)

Topmate: [https://topmate.io/hellonehha](https://topmate.io/hellonehha)
Akka will no longer be Open Source
Tags: opensource, java, scala, discuss
Published: 2022-09-10 08:06:31

If I hear about _Actor model_, the first thing that comes to my mind is the popular Open Source library [Akka](https://akka.io/).

I feel very connected to Akka, probably because I learned it at the university with Java and Scala, and then I landed my first Game Dev job using it on the backend... so many good memories!

Lightbend, the company owning Akka, recently shared a [blog post](https://www.lightbend.com/blog/why-we-are-changing-the-license-for-akka) signed by the CEO announcing a license change from Apache 2.0 to Business Source License 1.1, a proprietary license. You can already find it in [this PR](https://github.com/akka/akka/pull/31561), merged a couple days ago.

Old versions will still be free, but future updates will require licensing for commercial use before 3 years, a time window after which the written code goes back to Apache 2.0.

**What do you think about this license change? Should FOSS ever do that, applying a more restricting license, after the free contributions from the community over the years?** Let's discuss!

---

I suggest you these good readings to get more insights:
- [Akka License FAQ](https://www.lightbend.com/akka/license-faq?_ga=2.2392880.1006785090.1662795195-486305666.1662795195)
- [Why We Are Changing the License for Akka](https://www.lightbend.com/blog/why-we-are-changing-the-license-for-akka)
- [Akka is moving away from Open Source](https://alexn.org/blog/2022/09/07/akka-is-moving-away-from-open-source/)
How to detect AdBlock in plain JavaScript with a few lines of code
Tags: javascript, webdev, adblock, html
Published: 2022-09-10 08:04:15


Using analytics tools to measure the impact of your application is part of every website these days.

But measuring how many of your users block your analytics is probably even more important.

And luckily, it’s not that difficult to figure it out.

## How it works

In a nutshell - you need to add a fake advertisement div to your website and check if it is visible or not.

In practice:

1. Add an empty `div` that’s positioned in the top right corner of your website. That way, it won’t bother users who don’t use AdBlock.
2. Preferably also add `aria-hidden="true"` to not show this fake ad to users who use accessibility tools.
3. Once the page is loaded, check whether this fake advertisement div is visible or not.

```html
<div class="ad-box" style="position:fixed;top:0;left:0;" aria-hidden="true">
  &nbsp;
</div>
<script>
  setTimeout(function () {
    var adBoxEl = document.querySelector(".ad-box")
    var hasAdBlock = window.getComputedStyle(adBoxEl)?.display === "none"
    // ... save to DB
  }, 2000)
</script>
```

The way most AdBlocks work these days is that they target specific CSS classes (like `class="ad-box"`) and apply `display: none` on it. That way, the Ad disappears in your browser.

> Always double-check that you don’t break the experience for users that do not use AdBlock.

You can see all the CSS classes that are used for blocking in [EasyList blocklist](https://easylist.to/easylist/easylist.txt).
Send Whatsapp messages without saving number
Tags: angular, firebase, webdev, whatsapp
Published: 2022-09-10 08:03:11

A while ago I had to send a whatsapp message to a person, but did not want to save his number in contacts.

Same thing happened again, I went to make some printouts and shop owner requested to send document over email or on his whatsapp, obviously whatsapp was the preferred option in this case also I didn't want to save his number. 

These problem lead me to search a way to send whatsapp messages without saving number in contacts. I found out that you could actually do it but it's not quite straightforward or even possible for everyone.

It can be done this way: 
 
1. Open this url in browser : https://wa.me/[Phone-number]

and it will open Whatsapp app with chat opened for this number.

This gave me an idea, if I can make it easier by providing a way to enter a phone number and open above link in a browser. This will help me as well as lot of people facing same problem.


![UI for entering mobile number and open chat on whatsapp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl324uziuzjb4hxrfiwk.png)

Turned out it's not as difficult as I thought it would be, so after completing development as using it for a while I decided to publish over internet

So here it is https://waunmp.web.app/.

I am still perfecting it, but please give it a try and provide your feedback.

Have a nice day!!