teleren/devto huggingface dataset:
Bem, meu primeiro post vou repassar oque aprendi hoje.
Published: 2022-05-09 15:46:29

na minha busca para colocar imagens no codepen. consegui colocar os icons que estava precisando tambem em: assets embaixo no canto esquerdo

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

parece algo tão facil, mas demorei a pegar, e nele consegui colocar os ícones de scroll 

para adicionar as img finalmente fui no https://www.tumblr.com/ 
abri a imagem em uma nova guia e copie o link para o codepen e assim fiz meu codepen :).

https://codepen.io/gans_likesyou/pen/BaYKpPd - link do projeto
What I learnt today: CSS Variables
Tags: webdev, beginners, programming, css
Published: 2022-05-09 15:46:02

## CSS VARIABLES
It works just like variables in SASS/ SCSS. You set a :root value of different variables, then you assign it to each element. Example

`: root{

--color: pink;

--padding: 15px;

--blur: 10px;

--block-width: 100px;

--gutter-size: 10px;

}

section {

width: calc(var(--block-width) + (var(--gutter-size) /2 ));

}

h2{

padding: var(--padding);

}

p{

block-width: var(--blockwidth);

}`

## PROS AND CONS
## Neat Code
This makes your code easy to read for other developers and even for future reference.

It comes in handy when there are a lot of codes to write.

It prevents clumsy codes, increases accuracy, arranges codes in easy-to-reach locations, and reduces confusion when coding.

## Allows for more effective theming.
With CSS Variables, one can easily change the value of a variable and see the effect being implemented everywhere the variable is used.

## Reduces the amount of time spent thinking and using complex styling methods.
With CSS variable styling, your codes are uniform and less complex.

## Flexible code
It can be overwritten easily without affecting other values, thereby increasing the flexibility of the code.

## CONS
CSS preprocessors remain the biggest weapon in this situation, as they can easily take colors and adjust values. Among the many other advantages these preprocessors provide, it's likely that these two systems will need to continue to collaborate as browser technology improves.



#webdev #webdevelopment #CSS3 #coding
#OpenCV – Access to a camera in a Jupyter Notebook with #Python 🐍
Tags: englishpost, jupyternotebooks, opencv
Published: 2022-05-09 18:56:53

---
title: #OpenCV – Access to a camera in a Jupyter Notebook with #Python 🐍
published: true
date: 2022-05-09 15:41:24 UTC
tags: EnglishPost,EnglishPost,JupyterNotebooks,OpenCV
canonical_url: 
---

Hi !

Super quick post today, with an answet to a question that we had last week in one of our Reactor Sessions:

#### Can we access to a camera 🤳 while I’m coding in a Jupter Notebook?

So, the answer is **YES**. Here is a sample:

![vscode jupyter notebooks accesing a camera using open cv](https://brunocapuano.files.wordpress.com/2022/05/vscode-jupyter-notebooks-accesing-a-camera-using-open-cv.png?w=1024)

And as usual, let’s share some code and some notes to test this.

- I’m coding this sample using Visual Studio Code and the Jupyter Notebook extension ([link](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter))
- I’m accesing camera 2 on my devices, I have several cameras.
- I’m using matpotlib to show the image, from an OpenCV Mat. This is super cool, it automatically understand Mat().
- Important: remember to release the camera at the end!

And here is the code:

{% gist https://gist.github.com/elbruno/813f14562d79ccb672d8ac330f7a20f4 %}

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *
Presenting An E-Learning Website To A School
Tags: webdev, elearning, xampp, college
Published: 2022-05-09 15:36:19

**Originally written on July 30, 2018**

This was my first project outside campus project that I had made. I collaborated with Shofiyyah to finish the website. The website was basically for Mrs. Mira’s campus service program (or in Indonesian, it was KKN) team. She guided the team to develop an e-learning system for a school, and the lucky school was Vocational High School of Baabul Kamil in Cikuda, Jatinangor. The website was made by me and Shofiyyah but the contents were created by the campus service program team. The contents they created were presentations, e-books, and videos. They were also helped by the teachers in that school, long before Shofiyyah and me started to develop the website. Shofiyyah was the back end developer and she only used the very basic PHP as the back end while I was the front end developer who used the very basic HTML and CSS as the front end. We were not chosen by Mrs. Mira, but more likely Mrs. Mira opened a recruitment for the developer team of her campus service program team and in that time we signed up for it.

We liked the project so much because it didn’t really need very good skills to develop the desired website but the biggest problem was how to share the website locally using flashdisks.

Oh yes, I forgot to tell how I got to the school. So I went to Mrs. Mira’s room in the lecturers room and we went to the school using Mr. Ino’s car. Shofiyyah couldn’t come because she wasn’t in Jatinangor yet. Some of the campus service program team members were also not coming with lots of reasons. And I really hated that Mrs. Mira was so kind with the team although the team members that were coming only two of them. I was very jealous with that team because they got a very kind lecturer mentoring them. The presentation to the teachers of the school that I thought it would be done by the campus service program team, was done by Mrs. Mira and Mr. Ino. Wow. So nice of her. Those two campus service program team members even didn’t help her but they only sit to watch the presentation.

Back to the development problem. At first Shofiyyah and I used XAMPP mobile but some of the flashdisks that we installed were giving too many errors. A lot of errors meant the website couldn’t be accessed. Unlucky me, the errors came in the presentation time. Although the presenter was not me but Mrs. Mira and Mr. Ino, I still felt guilty about it.

It took very long time to find that USBWebserver was our solution. USBWebserver worked like XAMPP mobile but it was better. Too bad we got this USBWebserver long after Mrs. Mira and her team presented the website to the school so I didn’t know how was it going with the XAMPP mobile version in that school.

This is a good experience for me and Shofiyyah because we got a patent for the website. It took a long time to get the certificate but worth very much because the efforts weren’t not as much as campus projects LOL.
Photo Gallery made with Appwrite
Tags: appwritehack, react
Published: 2022-05-09 15:06:13

### Overview of My Submission
Photoz is a simple photo gallery web app where user can share their recent captures.
I was thinking to build something that will teach me all the basic features of appwrite. In this app user can create account, login, delete account, share their images, delete images. All basic CRUD application stuff.

Front-end: React, React Router, Material UI
Back-end: Appwrite

### Submission Category: 

Web2 Wizards

### Link to Code

{% embed https://github.com/PlabanKr/photoz %}


### Additional Resources / Info

#### Screenshots

![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5yqx3csu3c69pfpqbel.jpg)


![Sign up Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esnu0elfsnh8vmaaq5so.jpg)


![Profile Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p23hobb025doooqj8m5i.jpg)

#### License

MIT
Simple Carrusel React personalizable con tailwind CSS
Tags: react, tailwindcss, carrusel, javascript
Published: 2022-05-09 14:58:17

Me he encontrado muchas veces con el problema de encontrar la forma de hacer un carrusel sencillo sin tanto código, esto para que me permita personalizarlo a mi gusto

contrario a lo que me encuentro en la web siempre son códigos complicados que te toma al menos 30min de entender y ni hablar de si quieres personalizarlo

pues aquí cree una solución bastante simple, y la comparto por que también es útil para un futuro yo

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

sin mas palabras aquí dejo el Código

````js
import React, { useRef } from 'react'

const Carrusel = () => {
    const slider = useRef()
    const images = [...Array(25).keys()];

    return (
        <div className='mx-24'>
            <div className='flex items-center justify-center w-full h-full '>

                <button className='bg-gray-500 mx-2' onClick={() => slider.current.scrollLeft -= 200}>
                    <svg class='w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800' fillRule='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'></path></svg>
                </button>
                <div ref={slider} class='snap-x overflow-scroll scroll-smooth h-full flex items-center justify-start'>
                    {images.map((e, i) => (
                        <div key={i} className='snap-start flex flex-shrink-0 w-auto mx-4'>
                            <img src={`https://picsum.photos/id/${i}/300/300`} alt={`images${i}`} className='object-cover object-center w-full' />
                        </div>
                    ))}
                </div>
                <button className='bg-gray-500 mx-2' onClick={() => slider.current.scrollLeft += 200}>
                    <svg class='w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800' fillRule='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'></path></svg>
                </button>
            </div>

        </div>
    )
}
export default Carrusel
```
'Queendom2Data' -A data visualization web app built by React+Flask
Tags: react, javascript, showdev, python
Published: 2022-05-09 14:52:38

## Introduction
Queendom2data is a data visualization app displays the YouTube views count of the ongoing K-pop reality survival show **‘Queendom2’**. 

**App Link:** www.qd2data.xyz
**GitHub Repo:** https://github.com/monkeyapple/queendom2data


## Techstack
* Programming Languages:  Python, Javascript,SQL,CSS,HTML
* Frameworks:  React(Front-end),Flask(Back-end),Bootstrap(CSS)
* Database:  PostgreSQL
* Automation:  HerokuScheduler
* Data API:  YouTube Data API


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

##Preview
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cefaj0vfzivro99stzy5.jpeg)


##Current Version
v1.0.0

##Technical details about this project
I also wrote two articles for this project:
* [Create a data visualization app for the K-pop TV show ‘Queendom2’ with React+Flask+PostgreSQL+Bootstrap](https://medium.com/@effylh/create-a-data-visualization-web-page-with-react-flask-postgresql-bootstrap-4ec4f080309e)
* [Create a data scraper with Python+YouTube Data API+PostgreSQL+HerokuScheduler](https://medium.com/@effylh/create-a-data-scraper-for-the-ongoing-k-pop-tv-program-queendom2-with-python-youtube-data-d74103a3d074)
My newest dev project is done - YouBarter.us | 🔥Roast Me 🔥
Tags: showdev, javascript, react, nextjs
Published: 2022-05-09 14:45:00

My mom came up with a really good idea a while back about creating a platform for bartering.  After about a year, the website was finally complete.

https://youbarter.us/

Bartering is the act of trading goods and services, and in this site, all goods and services appear on a map, displaying where things are.

![Map of YouBarter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgus18ni2o225c6m9zco.png)

This was my first time using Mapbox.  It was quite difficult, but it was worth it and very fun to experiment with and put together.  On top of it, putting it together with react was really hard, but thanks to [this article](https://dev.to/naomigrace/how-to-integrate-mapbox-gl-js-in-your-next-js-project-without-react-map-gl-or-a-react-wrapper-library-50f) on dev.to, I was able to implement it.

I can explain a lot of this all day, but I'll leave it to you.  Please share your thoughts on it and, if you find any, please report any bugs you should happen to find.

Thanks for reading!

Please be sure to share, upvote on product hunt, and hacker news!
https://news.ycombinator.com/item?id=31314666
https://www.producthunt.com/posts/youbarter
Bookkk - Your Opinionator
Tags: appwritehack
Published: 2022-05-09 14:34:48

### Overview of My Submission
This is a completely anonymous, open source and easy opinionator. You can write down anything on Bookkk and other people can read them and either upvote or downvote them. Consider this a public diary where others can read your thoughts but won't know who wrote it. Thanks to Appwrite's easy database management.


### Submission Category: Wacky Wildcards

### Link to Code

{% github https://github.com/Seek4samurai/Bookkk %}


### Additional Resources / Info

I've deployed this on vercel though, server is not deployed.

# Screenshots/demo videos


![Attributes in Database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hbd8zwfmg012mgefxp4.png)


![Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyh6vsq6gm5n843z8rgu.png)


![Sign-up Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aaafnx5wz722qze9ah67.png)


![Home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dggdky9t0f3rzca22r09.png)

Since appwrite is a self-hosted, hosting will be done on DigitalOcean.
I've so many more ideas for this project and gonna be implementing them sooner.
Thanks.
IO BASH: Is my Tech blog name and domain right for a tech blog?
Tags: discuss, linux, bash, writing
Published: 2022-05-09 14:32:51

Hi, 

I created my Tech blog "IO BASH" to share my DevOps and Cloud computing experience with others.

The blogger is currently still in development and I still have some doubts regarding the blog name and domain.

iobash.com --> English Lang (Temporarily available internall)
iobash.de --> Germany Lang
iobash.de/ar/ --> Arabic Lang 

Where did i get inspired by the name of the blog?

I/O --> Input/Output 
Bash --> Bash is the GNU Project's shell

Do you think that the name of the blog is appropriate for the nature of the technical content that I will write?

Can you share with me some tips to improve the name of the blog, or perhaps choose another name if the name does not indicate at first sight the content?

Is the blog logo simple and meets the purpose? 

Please check it out and tell me how I can make it even better. Thanks so much.
Why Are My Emails Going to Spam (Junk) Instead of Inbox? Check DMARC!
Published: 2022-05-09 14:15:08

![Email Spam DMARC](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbtqbn58x6oc7atqbqld.jpeg)
Why are your emails going to spam (junk) instead of the inbox? If one is using Gmail, he might find his legitimate emails sitting in the Spam folder; or if he is using Outlook, he might find them in the Junk folder. Everyone has had that frustrating experience.

Having legitimate emails land in spam and having illegitimate emails reach the inbox are two sides of the same coin. The former can happen for a lot of reasons, one of which is not having a full DMARC implementation.

#### Why DMARC can improve email deliverability

As an email authentication protocol, DMARC (Domain-based Message Authentication, Reporting and Conformance) is known for email authentication reporting and email spoofing prevention.

However, it's actually more than that. It actually can improve your email deliverability, when implemented properly.

A domain without having DMARC fully implemented (p=reject, or at least p=quarantine) still leaves room for spoofed email to reach the inbox. Needless to say, your users rarely reply to or even open such messages. The more spoofed emails are sent on behalf of your domain, the lower user engagement is.

Mailbox providers like Gmail keep a close eye on user engagement: it's a metric used to calculate your domain sender score. When user engagement of emails from your domain goes down, so does your domain sender score.

A domain sender score is a score that an email service provider (mailbox provider) assigns to an organization that sends emails. It's a crucial component of your email deliverability. The higher the score, the more likely an email service provider will deliver emails to the recipients' inboxes they host. The lower the score, the more likely your emails will go to spam.

In other words, not implementing DMARC or leaving the DMARC policy to _none_:
1. allows spoofed emails to go through;
2. excessive spoofed emails lower the domain's sender score;
3. a low domain sender score hurts your email deliverability.

The upshot here is that you should implement DMARC to p=reject, so that it:
1. stops spoofed emails;
2. increases user engagement;
3. improves your domain sender score;
4. a high domain sender score improves your email deliverability: your business emails are more likely to reach the inboxes.

#### How to implement DMARC

To properly implement DMARC, check out our [definitive guide](https://dmarcly.com/blog/how-to-implement-dmarc-dkim-spf-to-stop-email-spoofing-phishing-the-definitive-guide).

Here are some tools to facilitate an effective DMARC implementation: [free DMARC setup tools](https://dmarcly.com/tools/).

Original post: [Why Are My Emails Going to Spam (Junk) Instead of Inbox? Check DMARC!](https://dmarcly.com/blog/why-are-my-emails-going-to-spam-junk-instead-of-inbox-check-dmarc)
SOLID - LSP
Tags: solid, poo, oop, beginners
Published: 2022-03-25 23:30:44

**Princípio da substituição de Liskov**

> Se q(x) é uma propriedade demonstrável dos objetos x de tipo T. Então q(y) deve ser verdadeiro para objetos y de tipo S onde S é um subtipo de T.

Se a nossa classe não pode se comportar como a classe que ela está herdando, então temos um problema de abstração.

**Por exemplo:**

Temos uma classe **_Veículo_**, com um método _**voar()**_ e temos uma classe _**Helicóptero**_ que herda essa classe **_Veículo_**. 

```c#
    public class Veiculo
    {
        public string Nome { get; set; }
        public virtual void Voar()
        {
            Console.WriteLine($"O veículo {Nome} está voando");
        }
    }

    public class Helicoptero : Veiculo
    {

    }
```

Tudo certo, afinal um helicóptero é um subtipo de veículo e o helicóptero pode voar. Mas e se tivermos uma classe _**Moto**_ herdando a classe _**Veículo**_, desta forma? 

```c#
    public class Moto: Veiculo
    {

    }

...

Veiculo moto = new Moto();
moto.Voar() //>>>>>>>>>> WTF!?

```

Uma moto é um veículo, porém não pode voar. Logo, estamos quebrando o princípio da substituição de Liskov.

**Solução:**

Tiramos o método **_voar()_** da classe _**Veículo**_ e criamos uma classe _**VeículoAéreo**_ com o método _**voar()**_ e então fazemos com que nossa classe _**Helicóptero**_ herde a classe _**VeículoAéreo**_.

```c#
    public class Veiculo
    {
        public string Nome { get; set; }
    }

    public class VeiculoAereo : Veiculo
    {
        public virtual void Voar()
        {
            Console.WriteLine($"O veículo {Nome} está voando");
        }
    }

    public class Helicoptero : VeiculoAereo
    {

    }

    public class Moto: Veiculo
    {

    }
```

Desta forma nem a moto e nem o helicóptero deixam de ser um veiculo, porem não é mais possível voar com a moto (nunca foi).

Criei uma classe _**LavaRapido**_ com um método _**Lavar()**_ que recebe um tipo de _**Veiculo**_

```c#
    public class LavaRapido
    {
        public void Lavar(Veiculo veiculo)
        {
            Console.WriteLine($"Lavando o veiculo {veiculo.Nome}");
        }
    }
```
E assim consigo lavar meus dois veículos, mesmo que o helicóptero seja um veículo aéreo, pois a classe _**VeiculoAereo**_ ainda é um subtipo de _**Veiculo**_.
 
```c#
var lavaRapido = new LavaRapido();

Veiculo moto = new Moto();
VeiculoAereo helicoptero = new Helicoptero();

lavaRapido.Lavar(moto);
lavaRapido.Lavar(helicoptero);
```
Why Coding?
Tags: coding, beginners, programming, career
Published: 2022-05-09 14:12:49

## Why ?


Hmm... 🤔

Why everyone in today's date are so crazy about coding , what it offers really which is making **people so fond of it** ?


![Thinking?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd9nwscm2ixyg2be60tb.png)

Let's find out !

Before understanding what coding offers , let us first understand what every student goes through during their study cycle.


![Subjects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpj55xu6qlrulaaf7683.png)

During our schools we used to have subjects like 

> Physics

> Mathematics

> Chemistry

and so on...

Right?

Can you visualize one common thing regarding all these subjects? 


Yes, these all these subjects have a lot of problem to work upon but all of them requires you to have a good infrastructure of lab 
😔 to get a practical experience of their knowledge.

![Got it?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsjl1mjma6amrc7fa7wo.png)

## Point 1
Here's one of the edge that coding provides to the students. The subject is itself very practical based which gives the students many rooms for applying their own knowledge to solve a problem. You just need a laptop with a good internet to start with.
 

## Point 2

![Demand and supply chain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5i5u46xss5gmxbeab5vy.png)

> Believe it or not, everyone of us want to earn something with our skills. Some skills are not that rewarding and some are very. 


**Coding falls into the very rewarding skill if you are good at it**.

The demand for good developers are still at it's peak and they provide individuals a very good chance for career growth 😮.

## Point 3

> Till now we got to know that coding provides us room for using our knowledge and also is very rewarding but what is the main reason why it's so able to attract so many people 🤔 ?

Here's the last point, coding gives you the freedom to use your creativity. Believe it or not, everyone of us loves to apply our knowledge and creativity while learning anything.

Mugging up things and solving numerical have hardly been exciting for students.😮‍💨

Coding is the heaven for those people who wanted to work on something that pushes them to use their creativity and knowledge💁🏻‍♂️

![creativity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pykms3sgc5h6vza7hc94.png)


For more content stay tuned !

Keep coding #️⃣ , keep rocking 🚀