teleren/devto huggingface dataset:
I spoke at the Sri Lanka Institute of IT...#opensource
Tags: opensource, womeninopensource, programming, speaking
Published: 2022-03-18 15:07:30



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


For March as women's month I got the amazing opportunity to share at Sri Lanka Institute of Information Technology on how we can bring more women into open source!

Here's a short breakdown of what I talked about! Each point was broken down further in the video live call.

A big thank you to SLIIT FOSS community and everyone who tuned in.

 
**Introduction**

- Statistics show that over 50% of women face seclusion and toxic treatment while working in the open source field. This has led to hesitancy to join the field

- In 2018 when Physicist Dr. Donna Strickland won the Nobel Prize, there was a no wikipedia published for such a feat!

- More than 90% of Github open source contributors are male…This lack of diversity extends from the lack of representation in tech as well. This obviously reckons the intertwining of women in tech and women in open source

- Studies have backed the open fact that inclusivity brings better quality and creativity in delivering better tech products

**Challenges facing women in open source**

Hesitancy to join OSS
Lack of representation hence leading to demoralization
Bro culture is still dominant
Lack of men in the women in open source convos
78% of women in tech feel that they have to work twice as harder to get promotions and recognition in tech

**How to remedy these challenges and do better**

Skills beyond programming, examples to be given
Bringing men into the women in open source convos, hiring and overall inclusion
Monetization as a remedy
Better and stronger inclusion of women into the field
Safe spaces for women in open source
Debunking the myths surrounding joining open source
Welcoming the greater role of non-code contributions into open source as well.

**Conclusion**
Interacting further with the SLIIT FOSS community and answering questions from the audience.

This was a great experience for me as an international  speaking engagement. Thank you once again to everyone who made it possible and tuned in!

#breakthebias #womeninopensource #womenwhotech #SLIIT #SLIITFOSS
Automatically commit your Dev.to articles to your personal GitHub repo
Tags: javascript, tutorial, pipedream, showdev
Published: 2022-03-18 15:06:19

As you know, Dev.to is one of the biggest Developer communities on the web.

One of the killer features that is that your posts are natively in Markdown with frontmatter that's common static site generators like Jekyll. 

Every post you make on Dev.to is actually compatible with static site generators.

In this tutorial, I'll show you how to use Pipedream to build a workflow that will automatically sync your Dev.to articles to your GitHub repository.

That way your posts are backed up in version control, and you can automatically publish them onto your own statically generated site built with Netlify or Vercel.

{% embed https://www.youtube.com/watch?v=5m-RIXELV8A %}
How to add Vue to a Laravel app?
Tags: vue, laravel, help
Published: 2022-03-18 15:04:51

---
title: How to add Vue to a Laravel app?
published: true
description: I'm trying to add Vue to a base laravel app and it fails why?
tags: vue,laravel,help
//cover_image: https://direct_url_to_image.jpg
---

I know some Vue and I'm attempting to learn about Laravel how do I add Vue to a Laravel app? I've tried a couple of things on Stack Overflow and here yet regardless of what I try I can't get it to work.

I've tried this: 

```javascript
npm install vue
```
which install vue and I try create a component but I can't seem to get it to render I've tried adding `<script src="{{ mix('js/app.js) }}"></script>` to my blade file

and this:

```javascript
php artisan ui vue
```

which creates the scaffold correctly it says to run `npm install && npm run dev` yet every time I do this it fails. I've added `.vue` to mix file so this is currently:

```javascript
mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');
```

It says additional dependencies are needed:

`Running: npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps.
Finished. Please run Mix again.`

Then it just fails:

`npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
`

How do I run Mix again? `npm run dev`, `npm run hot` both fail what am I doing wrong?
#66 Days of Data
Tags: python, datascience, 100daysofcode, ankitgupta
Published: 2022-03-18 14:56:32

## **Learning Python**  👨‍💻

D 31 to 34 of #66daysofdata 📈

Today I have learnt Python Control Flows - Indentation, If-Else & ELIF Statements, For, While & Nested Loops, Control statements & Patterns. 
Functions - Types of Functions, Arguments & it's Types, Scope of Variables ✌️

Checkout 👉 [My #66 Days of Data timeline on Github](https://github.com/mrankitgupta/66DaysOfData)

Say me Hi! 
I'll be glad to connect on 
👇

**Twitter** @ [Mr_AnkitGupta01](https://twitter.com/Mr_AnkitGupta01)

**Github** @ [MrAnkitGupta](https://github.com/mrankitgupta)
[PT-BR] Circuitos Lógicos
Tags: showdev, braziliandevs, beginners, computerscience
Published: 2022-03-18 14:25:59

## Portas Lógicas

Uma porta lógica é um circuito eletrônico que se constitui no elemento básico e mais elementar de um sistema eletrônico.

Existem diversos tipos de portas lógicas e cada uma delas é capaz de **implementar uma operação  ou  função lógica específica**.

Uma **operação lógica** (semelhante a uma operação algébrica) realizada sobre um ou mais valores lógicos produz um certo **resultado** (valor lógico),  conforme a regra definida para a referida porta.


![Image0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5okz5x04xzpfcb1dz8sy.png)

### Tipos de portas


![Image1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hs8pjinofyj0mt4ofee.png)

![Image2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3we5kepmcho134b8nvy6.png)

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

Caso queira realizar um projeto comigo (ou até mesmo bater papo), não hesite em me enviar uma mensagem, acesse o link das minhas redes sociais abaixo: ⤵️

[Instagram](instagram.com/celycodes)
[Twitter](twitter.com/ceIenny)
[GitHub](https://github.com/celenny)
[LinkedIn](https://www.linkedin.com/in/celenny)
Laravel Eloquent One To One Relationship
Tags: laravel, tutorial, beginners, javascript
Published: 2022-03-18 14:21:17

This video will dive into Eloquent’s one-to-one Relationship in Laravel.
Laravel one to one with going deeper. This is a deep dive into belongsTo Relationships in Laravel.

Follow me:
Twitter: https://twitter.com/Laravellercom
Facebook Page: https://www.facebook.com/1laravellercom
Instagram: https://www.instagram.com/laravellercom/
Github: https://github.com/laraveller
Website: https://laraveller.com/

Setup VS CODE for Laravel: https://youtu.be/EliywWn4IK4
Setup Mac for development: https://youtu.be/yxuR5myrVi4

Playlists:
Laravel Restaurant Reservation: https://bit.ly/3Jc5IcG
Spatie Laravel Permission: https://bit.ly/3pOsOhN
Laravel Testing For Beginners: https://bit.ly/3t1gNq4
Laravel Roles and Permissions: https://bit.ly/3gOhM7d
LARAVEL INERTIA MOVIE APP: https://bit.ly/3FVMp4Q
Laravel Livewire Movie App: https://bit.ly/3s8D6v1
Laravel Classified Website - https://bit.ly/3nsFRnb
Livewire Employees - https://bit.ly/2ZtIpZY
Laravel Employees Management - https://bit.ly/3Gglt14
Laravel admin panel - https://bit.ly/3CcX75M

{% embed https://www.youtube.com/watch?v=A3004iViSEE %}
5 Awesome Python HTTP Clients
Tags: http, client
Published: 2022-03-18 14:16:39

Name | Description | GitHub Activity
---- | ----------- | ---------------
[Requests](https://github.com/psf/requests) | A simple, yet elegant, HTTP library. | ![GitHub stars](https://img.shields.io/github/stars/psf/requests) ![GitHub commit activity](https://img.shields.io/github/commit-activity/y/psf/requests)
[urllib3](https://github.com/urllib3/urllib3) | Python HTTP library with thread-safe connection pooling, file post support, user friendly, and more. | ![GitHub stars](https://img.shields.io/github/stars/urllib3/urllib3) ![GitHub commit activity](https://img.shields.io/github/commit-activity/y/urllib3/urllib3)
[httplib2](https://github.com/httplib2/httplib2) | Small, fast HTTP client library for Python. Features persistent connections, cache, and Google App … | ![GitHub stars](https://img.shields.io/github/stars/httplib2/httplib2) ![GitHub commit activity](https://img.shields.io/github/commit-activity/y/httplib2/httplib2)
[GRequests](https://github.com/spyoungtech/grequests) | Requests + Gevent = <3 | ![GitHub stars](https://img.shields.io/github/stars/spyoungtech/grequests) ![GitHub commit activity](https://img.shields.io/github/commit-activity/y/spyoungtech/grequests)
[Uplink](https://github.com/prkumar/uplink) | A Declarative HTTP Client for Python | ![GitHub stars](https://img.shields.io/github/stars/prkumar/uplink) ![GitHub commit activity](https://img.shields.io/github/commit-activity/y/prkumar/uplink)
**source**: [5 Awesome Python HTTP Clients](https://bestofgithub.com/blog/awesome-python-http-clients_59)
Vue 3 beginners roadmap resources. FREE
Tags: vue, beginners, javascript, programming
Published: 2022-03-18 14:14:07

**1. The best way to learn Vue.js in 2022 - CRASH COURSE**

[Vue Master](https://www.youtube.com/watch?v=bzlFvd0b65c)

**2. Vue 3 Tutorial for Beginners**

[Net Ninja](https://www.youtube.com/watch?v=YrxBCBibVo0&list=PL4cUxeGkcC9hYYGbV60Vq3IXYNfDk8At1)

**3. Learn Vue 3: Step by Step**

[Laracasts](https://laracasts.com/series/learn-vue-3-step-by-step)

**4. Vue 3 Official Tutorial**

[Official Tutorial](https://vuejs.org/tutorial/#step-1)

**5. Weather App Build (Vue 3 & Tailwind)**

[Net Ninja](https://www.youtube.com/watch?v=gUsBaB5ViAo&list=PL4cUxeGkcC9hfoy8vFQ5tbXO3vY0xhhUZ&ab_channel=TheNetNinja)

**6. Vue 3 Official Projects**

[Official Projects](https://vuejs.org/examples/#hello-world)
How to make "2D To 3D Button".
Tags: css, html
Published: 2022-03-18 13:47:21

Hi Guys,In this Blog I will show you how to make 2D To 3D Button 
Tutorial 👇
[Tutorial](https://photos.app.goo.gl/7D6DMJjaAAwGHyYk6)

Source:- 

## HTML:- 

```
<body>
<a href="#">tap on me</a>
</body>
```

## CSS :- 

```
body
{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #2196f3;
}
a
{
  position: relative;
  padding: 20px 20px 20px 30px;
  color: #fff;
  font-size: 20px;
  font-family: sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 10px;
  transition: 0.5s;
}
a:hover
{
  background: #2196f3;
  transition-delay: 2s;
  box-shadow: -30px 30px 50px rgba(0,0,0,.4);
  transform: rotate(-30deg) skew(35deg);
}
a:before,
a:after
{
  content: '';
  position: absolute;
  width: 2px;
  height: 100%;
  background: #fff;
  pointer-events: none;
  transform-style: linear;
  transition-property: width,opacity,transform,box-shadow;
  transition-duration: 0.5s;
}
a:before
{
  top: 0;
  left: 0;
}
a:after
{
  top: 0;
  right: 0;
}
a:hover:before
{
   width:100%;
   opacity: 0.1;
   transform: translate(5px,-5px);
   box-shadow: +2px 2px 2px rgba(0,0,0,.1);
   transition-delay: 0s,0.5s,1s,1.5s;
}
a:hover:after
{
   width:100%;
   opacity: 0.1;
   transform: translate(10px,-10px);
   box-shadow: +2px 2px 2px rgba(0,0,0,.1);
   transition-delay: 0s,0.5s,1s,1.5s;
}
```
 
![
A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ous6pixpsple80jelf7n.jpg)

![A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvacexv4sqwxu6znxgzf.jpg)
Thanks for Reading My Post . Please like and Share.
Code Craft Saturdays And Sundays
Tags: programming, tdd
Published: 2022-03-18 13:38:37

I just wanted to share this here to help it get more exposure.  My friend Bob Allen has been running Code Craft Saturdays and Sundays since before the pandemic.  When the pandemic hit, he switched to virtual and didn't miss a beat.  It's free and it's a great way for software developers to hone their craft!

[Code Craft Saturdays And Sundays](https://www.eventbrite.com/o/code-craft-saturdays-and-sundays-15457506392)
2 free data security tools every dev should know (and use)
Tags: security, appsec, encryption, opensource
Published: 2022-03-18 13:29:45


> The goal behind encrypting sensitive data is to **prevent  leakage if the application or the database was attacked.** Application level encryption (encrypt data before storing in the database, decrypt after reading) provides maximum protection.

💡 To help developers integrate encryption easily and without hassle, we maintain several open-source data security tools that you can download from GitHub and use for free.
***

[![Acra database security suite by Cossack Labs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz4835a6id7ny1n4djl3.png)] (https://www.cossacklabs.com/acra/)

Quickly encrypt your sensitive data in SQL/NoSQL databases and distributed apps with [Acra] (https://cossacklabs.com/acra/).

As a database security suite, Acra provides **9 strong security controls in one shot** to solve your data security vital needs.
 
We designed Acra to be flexible and reliable, easy to install and use. 

💡 With no huge changes in code, you can [encrypt data using application level encryption] (https://dev.to/cossacklabs/what-is-application-level-encryption-and-why-its-not-tls-49hb) before storing it in the database. Besides encryption, Acra supports search over encrypted data, data masking and data tokenization, SQL request firewall, audit logging, and many other [features] (https://dev.to/cossacklabs/application-level-encryption-4n32).
 
The latest version of Acra Community Edition is available on Github: 
📥 https://github.com/cossacklabs/acra
***

[![Themis by Cossack Labs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01gkk15g2k8v3sq0ohan.png)] (https://www.cossacklabs.com/themis/)

[Themis] (https://cossacklabs.com/themis) is an open-source high-level cryptographic library, **perfect for protecting sensitive data (PII, locations, etc.) in most applications**.

Add Themis in your app for secure data storage, secure message exchange, secure socket connections, and authentication across 15 platforms and languages. 

💡 Themis keeps trusted, verified, and audited cryptography under the hood, so you will be protected from making security and cryptography mistakes.

Download the latest version of Themis from Github: 
📥 https://github.com/cossacklabs/themis
***
Check these free tools out, use them, and keep your data protected. 🔐
Follow [@Cossack Labs] (https://twitter.com/cossacklabs) for more updates!
IAM (AWS service).
Tags: aws, communitybuilder
Published: 2022-03-18 13:27:17

I'm glad to share with you my first article about IAM (AWS service).
To know more about it please check the link below.
[](https://drive.google.com/file/d/1oQoAet2yW8qIS4gbz-v_LGbzpX_cwkjf/view)
Linux V4L - Video Streaming 📹
Published: 2022-03-18 13:20:08

From Wikipedia, ***Video4Linux*** (V4L for short) is a collection of device drivers and an API for supporting real-time video capture on Linux systems.

***V4L*** (or it's successor ***V4L2***) are used in many scenarios, such as applying effects to your stream.

## Let's Stream
Load the **V4L2** module first:

```$ modprobe v4l2loopback```

The command above will create a virtual video device. 
To check the available video devices:

```$ v4l2-ctl --list-devices```

A "*Dummy video device*" should be available, for simplicity, we will call this device ***/dev/video2***.

Map the video stream:
```$ ffmpeg -re -i VIDEO_NAME.mp4 -map 0:v -f v4l2 /dev/video2```

I use [VLC](https://www.videolan.org/) to play the video
```$ vlc v4l2:///dev/video2```

You can also stream from a URL, for example, to stream from an ***.m3u8*** playlist:

```$ ffmpeg -i 'https://www.example.com/video/file.m3u8' -c copy -vcodec rawvideo -threads 0 -f v4l2 /dev/video2```

The video can now be accessed in real-time from **/dev/video2**.

Also Youtube-dl can be used to obtain a HLS link to the ***m3u8*** playlist, just use the ***-g*** flag

```$ youtube-dl -g https://www.youtube.com/watch?v=QquG9a8xpfk```

You can use [webcamtests.com](https://webcamtests.com/) to see /dev/video2 from your browser.
Explained: Passing props to data - Why is my data not changing?
Tags: vue, javascript
Published: 2022-03-18 12:41:45

Today I found out something basic that I should have known for a long time. The value for a `data`-property, associated with a `props`-property, is only set when the component is initialized! Further changes to the prop will not be applied to the `data`-property. 

## An example

Lets assume we've got the following child component, which gets some name passed by its parent.

`Child.vue`:
```
export default {
  name: 'Child',
  props: {
    name: String,
  },
  data() {
    return {
      localName: this.name,
    };
  },
};
```

A parent component can simple pass a name to this component. The initial data value inside `Child` is set to name, which is defined inside parent. 

### Runtime types with pass-by-value

I have always thought that this connection `localName: this.name` is _passed by reference_. So if you change the prop, you also change the `data` _each time_. **But this is wrong!**  

Rather, it is _passed by value_, which means the value of `this.name` is copied and applied to `localName`. Therefore, only the _initial value_ of `this.name` is applied to `localName` during rendering time of the component.  Further changes are ignored unless the component is re-rendered. 

This applies to all normal `props`-types like `String`, `Number`, or `Boolean`.


### `Array` and `Object` are different

This could be the end of the article. However, there exists an exception. 

Arrays and objects are _passed by reference_. So it is actually possible to mutate nested properties of the array or the object. Even if it is possible, you should not do it. For more information have a look at the official [docs](https://vuejs.org/guide/components/props.html#one-way-data-flow).

## Example

I've also made an [interactive example](https://stackblitz.com/edit/vue-vrnnnu?file=src/App.vue) which demonstrates the behaviour of changing `props` and how it affects its related `data` property..

## Summary

Keep this in mind if you change data in your parent component and it does not affect the local state of your child component.

_This is my first article, so I would like to welcome any suggestions for improvement, feedback, or pointers to false claims._
CSS Flexbox
Published: 2022-03-18 12:13:27


Flexbox is a new layout mode in css3. The CSS3 flexbox is used to make the elements behave predictably when they are used with different screen sizes and different display devices. It provides a more efficient way to layout, align and distribute space among items in the container. 
The flexbox contains flex containers and flex items. 

## Flex container

A flex container is a section of a document that has been put out using flexbox. To build a flex container, change the display property of the area's container to flex or inline-flex. The parent's properties are specified by the flex container. It's stated by setting an element's display attribute to flex or inline-flex.

## Flex item

The children's properties are specified by the flex items. A flex container may hold one or more flex objects.

**The attributes of the flex item are as follows:**
- Order 
- Flex-grow
- Flex-shrink
- Flex-basis
- Flex
- Align-self

## The order property

it specifies the order of a flexible item relative to the rest of the flex items inside the same container.
`<div style="display:flex;flex-direction:column">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>`
_**output**_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i754ajrvbj84dvgx5nza.PNG)

## Flex grow property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
`<div style="display:flex">
  <div style="flex-grow: 1; border:1px solid red">1</div>
  <div style="flex-grow: 1; border:1px solid red">2</div>
  <div style="flex-grow: 8; border:1px solid red">3</div>
</div>`
_**output**_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc1hmiazvb7ucdrbemzo.PNG)

## Flex-shrink property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. The value must be a number. 

## Flex-basis property

The flex-basis property specifies the initial length of a flex item.
`<div style="display:flex">
  <div style="border:1px solid red">1</div>
  <div style="border:1px solid red">2</div>
  <div style="flex-basis:200px;border:1px solid red">3</div>
</div>`
_**output**_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uws2y4uybbr6chd6fvjv.PNG)

## The align-self property

The align-self property specifies the alignment for the selected item inside the flexible container.
The align-self property overrides the default alignment set by the container's align-items property.
`<div style="display:flex;height: 200px">
  <div style="border:1px solid red">1</div>
  <div style="border:1px solid red">2</div>
  <div style="align-self: center; border:1px solid red">3</div>
  <div style="border:1px solid red">4</div>
</div>`
_**output**_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ts8kyqqca99xe7gj4x80.PNG)
My First clone project html & CSS
Tags: html, css, selflearn, shabilnedumpally
Published: 2022-03-18 12:11:30


![My first clone project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dl758mnevsi3vda2xx4.png)

Hey Guys  
My name is Shabil Nedumpally. 
This is my first project Today My first project completed
go check it out [check](https://shabil-nedumpally.github.io/fbclone-grid/)
Kirish | C++ boshlang'ich
Tags: cpp, beginners, uzbek, dasturlash
Published: 2022-03-18 11:57:27

### C++ shablon kod
```cpp
#include <iostream>

using namespace std;

int main()
{
    cout << "Salom dunyo!" << endl;
    return 0;
}
```

#### `iostream`
- `#include <iostream>` *(input/output stream)* ya'ni kiritish chiqarish oqimini boshqaradigan kutubxonani qo'shish

#### `std::`
- `using namespace std;` *(standard)* **std** maydondagi nomlarni ishlatilishi e'lon qilish. Buning vazifasi `std::` qayta-qayta yozavermaslik uchun kerak.

#### kodga kirish
- `int main()` funksiyasi C++ dasturiga kirish eshik hisoblanadi. U C++ dasturida **mavjud** bo'lishi shart va **yagona** bo'lishi shart.

#### `console` out
- `cout` komandasi *console* konsulga chop etish uchun ishlatiladi. `cout` *console*ga tekstlar va sonlar va chop eta oladi

#### tekstlar va sonlar
- C++ dasturlash tilida tekstlar `string` deb ataladi va qo'shtirnoq `" "` orasida yoziladi

> Masalan:
> "222222" - bu **string** ya'ni tekst
> 22222 - bu esa son. `string`dan farqli o'laroq son ustida arifmetik amallar bajarsa bo'ladi.


#### yangi qator
- chop etish davomida keyingi qatorga o'tish uchun `endl` komandasi ishlatiladi.

#### ifodani yakunlash
- C++ da har bir ifoda oxiriga `;` qo'yilishi shart

#### dasturni yakunlash
- dasturni muvaffaqiyatli yakunlanganini Operatsion Sistemaga aytish uchun `int main()` yakunida `return 0;` yoziladi


## Topshiriqlar
1. Quyidagi shaklni C++ dasturda yordamida chop eting.
```
222222
2    2
2    2
222222
```

O'zingizni sinab ko'ring! [👉 GO](http://oj.ilmhub.uz/problem/1)