teleren/devto huggingface dataset:
Inside the Mind of Jason Gines + SQL vs noSQL Breakdown
Published: 2020-08-31 01:15:42

# Introduction


My name is Jason Gines II and I am currently a student at Penn State in the College of Information Science and Technology (IST) studying cybersecurity. I am specifically interested in Cyber Security Consulting as a career path guiding different businesses and people towards ideal security measures while balancing practicality and cost to ensure optimal performance. For as long as I can remember, I have always been drawn to technology and how it works breaking down the different aspects of hardware and software as well as the ethical values of certain devices and companies. Even in middle school, I was questioning why certain companies would refrain from including innovations and technologies that would greatly benefit the consumer only to find out later in life the shady business implications influencing the reasoning of such decisions. My passion for cybersecurity specifically came from competing in a hacking competition in high school called Cyber Patriot, a competition with the goal of completing security related challenges to gain points and ultimately make it to the final round with your team. Through this, I gained a passion for securing devices across different operating systems, performing hardware and virus scans, collecting network data, penetration testing, and much more. I also enjoy helping people research and find what they need regardless of what it may be and it's all the better if it is something I am somewhat knowledgable about. All of this ties together and reaffirms my goals for ultimately helping out as many people as I can while manifesting my love for technology. This all ties into my goal of being a Cyber Security Consultant and I hope the information I gain throughout my college experience will push me ever closer to my goal.
DEV Community Discussion #1 
Tags: javascript, productivity, webdev, watercooler
Published: 2020-09-13 13:28:51

_Hello to all my community people :-) I'm thankful to everyone because I love this community. And special thanks to all my 600+ family, not followers. don't forget to check my other posts. I'm sure you'll love it too..._


#### DEV community discussion is something that I wanted to create for this Dev.to platform where we can discuss every week one topic in the comments section. I know twitter and other social media handles are there... But let's make this community more powerful ❤️😃...

---

`Discussion 1`
###How did you overcome imposter syndrome as a software developer/programmer/coder?

Let's discuss this in the comments section...

---
`Note: You can also suggest a topic for next week also`


---
####If you love this post, please give a like to boost my confidence to write more posts for this community. I'm also sharing a short microblog on my Instagram page also.

If you have doubts regarding development or UI/UX Design. Please feel free to connect with me on: ❤️😃

[Linkedin](www.linkedin.com/in/akash1296) 

[Instagram Page](www.instagram.com/designer.akash)

![Instagram page](https://dev-to-uploads.s3.amazonaws.com/i/2ic2vrfzlf2pxlrrmkmr.jpg)

Regards
`Akash`
I've hit a brick wall.       
How do I progress as a React Dev and other confusions.
Tags: help, react, career, typescript
Published: 2020-09-13 13:28:09

It's been 4 months that I've learnt just enough React to build some very basic apps that consume API and can also dynamically handle routes. 

So far, I've build a number of projects with React that just work fine, but something that always seem to be in common with these projects are the lack of a solid structure and organisation to the project.

I strive to make my code follow the 'SOLID' principles and other such best practices, but I have frequently found myself in situation where I'm deep into a project and some feature addition requires either a lot of refactoring or duplicating the code.

Also, off-topic, something that I noticed is how rapidly Typescript is being adopted in almost every React project and is growing in demand among the tech companies.

So in all, I have *few questions* to ask the veterans and this community. 

**Where do I go from here to develop production grade React clients?** 

**Does Typescript solve some part or all of the above problem?**

I know, I'll need a lot of practice and I'm totally down for it, but I don't want to become a world-class spaghetti chef by cooking spaghetti all the time, instead I just need a way to learn about the design patterns and philosophies that Pro React Devs use.

A deep gratitude If someone is possibly open to guide me or mentor me in any way. Thank you🙏

Thank you for reading.
Svelte and tailwindcss tooltip!
Tags: svelte, tailwindcss, tooltip, fouita
Published: 2020-09-13 13:06:01

## Svelte and Tailwind tooltip component

Easy to use Tooltip component for your svelte and tailwindcss projects

## Install

```bash
 $npm i @fouita/tooltip -D
```

## Usage

Import the tooltip component and use it like the following

![fouita tooltip](https://cdn.fouita.com/assets/pics/template/tooltip/tooltip-simple.jpg)

```html
<script>
	import Tooltip from '@fouita/tooltip'
</script>

<div class="m-4 p-4 border rounded text-center relative">
    Element 1
    <Tooltip pointer=middle position=top text="Middle Top" show/>
</div>
```

### Positions
* top
* left 
* right
* bottom

### Pointer
* start
* middle
* end


## Change Color

You can use `color` and `text_color` props to customize the color 

![fouita tooltip](https://cdn.fouita.com/assets/pics/template/tooltip/tooltip-color.jpg)


```html
<div class="m-4 p-4 border rounded text-center relative">
    Element 1
    <Tooltip pointer=start position=top text="Start Top" text_color=red-100 color=red-700 show />
</div>  
```

## Hover action

To show the tooltip when hovering on an element you can use `on:mouseenter` and `on:mouseleave` events and toggle a show flag, like the following.

![fouita tooltip](https://cdn.fouita.com/assets/pics/template/tooltip/tooltip-hover.jpg)

```html
<script>
	import Tooltip from '@fouita/tooltip'
	let show_elm = false
</script>

<div class="p-4 w-32 m-20 border rounded text-center relative" on:mouseenter={() => show_elm=true} on:mouseleave={() => show_elm=false}>
        Hover
        <Tooltip pointer=middle position=top text="Info to share!" w=48 show={show_elm}/>
</div>
```

We can also customize the width of the tooltip by adding `w` attribute and use the scale used in tailwindcss.


## Custom content

To add custom content to a tooltip we can just add children tags and add some html

![fouita tooltip](https://cdn.fouita.com/assets/pics/template/tooltip/tooltip-click.jpg)

```html
<script>
	import Tooltip from '@fouita/tooltip'
	let show_elm = false
</script>

<div class="m-20 mt-64 w-32 p-4 border text-center relative cursor-pointer" on:click={() => show_elm=!show_elm} >
        Click
        <Tooltip pointer=end position=right color="red-500" show={show_elm}>
            <div class="p-4 w-64 bg-red-500 text-red-100">
                <div class="text-2xl font-bold mb-2">Custom Content!</div>
                <p class="text-left mb-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos dolores excepturi placeat, eos et iste magnam illo voluptates veritatis exercitationem laborum, doloremque eius omnis, enim corrupti inventore rem vero assumenda.</p>
                <button class="border-2 border-white py-2 px-4">
					Great!
				</button>
            </div>
        </Tooltip>
</div>
```

## Source code

[Svelte and tailwindcss Tooltip](https://github.com/fouita/svelte-tw-tooltip)

## About

[Fouita : UI framework for svelte + tailwind components](https://fouita.com)
So videos don't have Ctrl+F...
Tags: productivity, todayilearned
Published: 2020-09-13 12:56:05

[Youtube-dl](https://youtube-dl.org/) is an awesome download tool for videos and audios in a huge amount of sites but there are some features that people don't usually use. One of them is to download video subtitles that sometimes is available.

Youtube-dl is a CLI program, it can be a bit difficult for begginners but it will be worth learning. I promise.

People usually just use youtube-dl with a link, maybe referencing a list of links using the `-a` flag.
```bash
youtube-dl $link
youtube-dl -a $file
```

If you run `youtube-dl --help` there will be a lot of options and I will show some of them related to subtitles;

- `--list-subs`: Shows the list of embedded subtitles that the video have. Usually not that useful, at least not in this case xD;

- `--write-subs`: Downloads the subtitles that are embedded in the video;

- `--sub-lang`: Specifies a language to the downloaded subtitles, the default is en. In brazil the language is pt;

- `--sub-format`: Specifies a file format of the downloaded subtitles. The default is `VTT` and is the fallback if the specified formats aren't available to download;

- `--write-auto-sub`: This is the flag I was talking about xD. This flag downloads the subtitle automatically generated in youtube, the video transcript. lang and format flags are hints about what subtitle will be downloaded;

After downloading the subtitle, the program will also download the video, if you just want the subtitle you can use the flag `--skip-download`.

Batching works too, so if you want to download a full playlist or a file with all the URLs using `-a` you can and it will work.

When you download a subtitle you download not a `TXT` file full of words but a `VTT` file, that if you want just the text you can delete the unwanted parts. In every text line there is a fixed lines of other data that you can delete using someting like a `vim` macro, `sed` or other text manipulation tool you like.
Missing attention to basics.
Tags: python, missingattentiontobasics
Published: 2020-09-13 12:34:16

Yesterday while just doing the regular refreshing and going back to the basics of python I came across the statement that "int" in python3 has no limit. In python2 if a number stored was larger than its limit it was automatically considered to be a "long". In python3 "int" and "long" have been unified and there's no limit to "int" and you would probably run out of memory before reaching the limit of an "int" in python3.
Deploy AWS lambda functions from a monorepo
Tags: actionshackathon, showdev, aws, lambda
Published: 2020-09-13 12:33:15

---
title: Deploy AWS lambda functions from a monorepo
published: true
description: My submission to the GitHub Actions x DEV Hackathon!
tags: actionshackathon, showdev, aws, lambda
---

### My Workflow
Deploy your AWS Lambda functions based on the files changed in a monorepo with this [Github Action](https://github.com/blombard/lambda-monorepo).

I know a lot of you are using the excellent [serverless](https://www.serverless.com/) framework that does a lot for you (including CI/CD). But for smaller use case (personnal Lambda functions for example) I found it easier not to use it.
But not using it comes with a cost so I wanted to eliminate this cost and created this action.

### Submission Category: 
This is an entry for DIY Deployments

### Yaml File or Link to Code

{% github blombard/lambda-monorepo %}

If you want to use this action in your workflow here is an example :

Set your <b>AWS</b> credentials in the [secrets](https://docs.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets) of your repo: 
- AWS_ACCESS_KEY_ID
- AWS_SECRET_ACCESS_KEY
- AWS_REGION

Create a `filters.yml` file and put it in `.github/worklows` : `.github/worklows/filters.yml`

The structure of the file should be :
```yml
LambdaFunction1:
  - 'LambdaFunction1/**/*'
LambdaFunction2:
  - 'LambdaFunction2/**/*'
```

`main.yml`
```yml
on:
  push:
    branches:
      - master

jobs:
  deploy:
    name: Deploy to AWS Lambda 
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: Configure AWS Credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: ${{ secrets.AWS_REGION }}

    - uses: dorny/paths-filter@v2.2.1
      id: filter
      with:
        filters: .github/filters.yml

    - uses: blombard/lambda-monorepo@master
      with:
        lambda-functions: '${{ toJson(steps.filter.outputs) }}'
        zip-params: '*.js *.json src/ node_modules/'
        alias-name: 'production'
        layer-name: 'MyLayer'
```

### Additional Resources

This action is based on those Github actions : 
- [configure-aws-credentials](https://github.com/aws-actions/configure-aws-credentials)
- [paths-filter](https://github.com/dorny/paths-filter)

### Info

This is my first attempt at building a GH action and my first Dev post. Hope you will like it ! And don't hesitate to improve the action if it is useful for you.
Perceive Your Meme
Tags: python
Published: 2020-09-13 12:32:12

# Perceive Your Meme (PyM)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8gyndfnzknb9zi0j3k7h.png)

[Read more at GitHub repos](https://github.com/dinhanhx/PerceiveYourMeme)

## What is this?

A Python library to scrap from [KnowYourMeme](https://knowyourmeme.com/). Written in Python 3.7!

## How to set up this library?

Before setting up this library, it is recommended to checkout this file `PerceiveYourMeme/CONST.py`, there are 2 constants you may want to modify.

```Python
HEADERS = {'User-Agent':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36 Edg/85.0.564.44'}
# User-Agent headers
# This HEADERS can be achieved by going to this link
# https://www.whatismybrowser.com/detect/what-is-my-user-agent
# If you are smart and have time, https://developers.whatismybrowser.com/api/

DEFAULT_DOWNLOAD_PATH = ''
# Define default download path
# This depends on OS
# If you are smart and have time, https://stackoverflow.com/questions/35851281/python-finding-the-users-downloads-folder
```

Clone this repository and run this command at root

`pip install -r req.txt .` (The last parameter is a dot `.`)

## How to use this library?

Since I am too busy to checkout at [readthedocs](https://readthedocs.org/), so please checkout [`DOCUMENTATION.md`](https://github.com/dinhanhx/PerceiveYourMeme/blob/master/DOCUMENTATION.md)

## What are applications of this library?
- For archiving memes data from KnowYourMeme (Obviously)
- For building dataset for memes detection such as [Memes Detection Android App using Deep Learning](https://medium.com/datadriveninvestor/memes-detection-android-app-using-deep-learning-d2c65347e6f3) or [Hateful Memes Challenge and data set for research on harmful multimodal content](https://ai.facebook.com/blog/hateful-memes-challenge-and-data-set/)
- For entertaining purposes such as a discord meme bot (TBH Reddit is still better source for getting memes)

If you use this library for different purposes from mentioned one, it is recommended to add your purposes and links to your project to this section.

## Ascii art
```
.,;;,,,,,'.                   .;cc'         .:c:.        
.::.   ..,:,.                 .cllc.       .:lll.        
.:;.     .;c. .'.       .''.  .c:;c:.     .;c,:l'        
.:;.     .::. ;OO;     ,kKO;  'l:.,l;     ,l,.;o,        
.::.....':;.   l0x.   .d00l.  'o; .:l'   .c:. ,o;        
.:c;,,,,'.     .o0o.  c0d;.   ,o,  .lc. .:c.  'o:.       
.:;.            .x0c.,Ok'     ;o'   ,l;.,l'   'l:.       
.:;.             ,kkcdO;     .:l'   .:l:c;    .lc.       
.::.              ;OK0c      .cl.    .loc.    .cl.       
.'.               .xKo.      .''.     .'.      ',.       
                  'dOl.                                   
                  ,oOk:.                                    
                  .:l,.                                      
```
Combining Streams
Published: 2020-09-13 12:27:45

What if we wanted to add the values of two streams s1, s2, and react everytime one of the streams is updated ?

Javascript does not allow operations overloading, so we can't just do: s = s1 + s2.

Here is a very simple implementation of a function which combine  multiple streams.

```js
function Stream (value) {
  let storedvalue = value
  let mappers = []
  function stream (newvalue) {
    if (arguments.length) {
      mappers.map(f => f(newvalue))
      storedvalue = newvalue
    }
    return storedvalue
  }
  stream.map = function (f) {
    mappers.push(f)
  }
  return stream
}

function combine (f, streams) {
  let s = Stream(0)
  function update (v) {
   let acc = s()
   s(f.apply(null, [acc, v]))
  }
  streams.forEach( st => st.map(update))
  return s
}

s1 = Stream()
s2 = Stream()
s3 = Stream()

let c = combine((x, y) => x + y, [s1, s2, s3])

c.map(v => result.innerHTML = `Result of combination : ${v}`)

s1(3)
s1(3)
s2(5)
s3(56)
```
You can test it here : [combine](https://flems.io/#0=N4IgtglgJlA2CmIBcA2ATAOgCwFYA0IAZhAgM7IDaoAdgIZiJIgYAWALmLCAQMYD21NvEHIQAHigQAbgAJoAXgA6IAE7xSAV1htlAPkXUZMg2ID0kqbu4hS8BDzYQB5JgAYkARhwgAvnhr0jMwAVuS8AkIiTIQa1A5OhgDKbGr0MgAUUrSwGvAAlDLABkYIbDKkbHxqUFk58DLyMrW5xTKlMmC0AA5d8CqkDTIUALqtMXGOAuUp8Gnp1PAA7s35ha1GEIQZtCoA5hoMgqQYCNS7bCwFRYZGt509fcf36VvyujKE80sreXnrtxUqvAatlcoMFstQfB-j5-mo2BoVIZAdUVq1YTcKqkwBh7oNxvEpi8rv97r1+hguhpSCxiejWvDEciZvQDBiDATJoZ+GAAEYQBYZQh4abY0gkm7tAaNZLY9KuP43TkJGQaLpQWhCDJSCW3dq0Hg8QakdKKgEvDDdLqwACe8y0sBFFANPBFUmGv3pmJZYGOhCqAFEDbTpg13hVcd10mqNUJPTdGUjymyDAZSB5BrLZmBTWm0JmfbnqKQAMwFuWKgztI2NHn8hbpdIADxkeBtBTeMhbAGoZDanemRaQ0EOSx7U3FI11MmGZGpNNoMAKFioABIAFQAsgAZQYAAwASuotGU+Fs6wLNSqkDIACTAKQ+PeV4sedIlxXp9+ftDpHCfks-xQF8JwnaxbHsLkXBAdxXAAWiwEskFcXx-BAOgGFEDAeFIMIQH4QRhDYURfGGAgMKCLFszAPhqUQHwgA)
Build Adonis/Vue apps without an API
Tags: experimenting, adonisjs, vue
Published: 2020-09-13 12:24:55

In [a previous post](https://michaelzanggl.com/articles/bye-bye-api-layer/) I created a prototype of seamless integration between frontend and backend.

To save you from reading the article, here's a gist:

> No more fetch requests to the backend, no more setting up API routes, no need for controllers. Leaving you with what is essentially just calling a function (referred to as an action).

> Under the hood, it creates the API routes automatically and turns backend imports on the frontend into network requests.

This time I've taken the same approach and applied it to something more realistic. An app that uses Adonis.js on the backend and Vue.js on the frontend.

## How it looks like

[Here](https://github.com/MZanggl/adonis-vue-without-api) is the GitHub of the little app. It contains a couple of actions like getting all users, creating users, and logging in.

To keep this example simple, let's just see how we can get the list of all users.

### Backend (extracted from `Actions/user.js`)

```javascript
const User = use('App/Models/User')

exports.getAllUsers = async function() {
  return User.all()
}
```

### Frontend (extracted from `App.vue`)

```vue
<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      [{{ user.id }}] {{ user.email }}
    </li>
  </ul>
</template>

<script>
import { getAllUsers } from '../../api/app/Actions/user'

export default {
    data() {
        return { users: [] }
    },
    async mounted() {
        this.users = await getAllUsers()
    }
}
</script>
```

Seeeeamless ;)

## Changes to the previous prototype

Mainly there's a new `seamlesslyrc.json` file that holds everything together. The backend will write all generated routes to this file and the frontend will then consume it.

Having this file comes with a lot of benefits over the previous prototype:

- No need for language/framework parsing
- single source of truth for the whole API generation
- Can be used to look up the API
- Can be used to store more things in the future like the endpoint prefix (currently always `/api`)
- using other HTTP methods than just POST is a lot easier.

The loader and API generator is under a new package called [seamlessly](https://github.com/MZanggl/seamlessly).

And you can find the integration for the above example here:

- backend: https://github.com/MZanggl/adonis-vue-without-api/blob/master/api/start/routes.js
- frontend: https://github.com/MZanggl/adonis-vue-without-api/blob/master/ui/vue.config.js

---

There are still some things that require some more thought, but I guess for the next test, I will try to use a non-JS language as the backend. Laravel 🤔🤔🤔
Introducing Labforum 3.0.5 (Unstable)
Tags: php, javascript
Published: 2020-09-13 12:20:32

{% youtube ulksXLWtZfs %}
##Introduction
After we have open-sourced our source code in Labforum 3.0 using LGPLv2, we are now taking a bigger step forward in Labforum 3.0.5 and Labforum 3.1. These updates includes fixes on regressions of threads and pages, as well as migrating API classes to use the classes in src/, which was introduced in the pre-alpha stages on 3.0 . 
 
**After we did a complete revamp of the forum, the software isn’t stable enough for normal day usage. If you need a stable-er version, please wait until we announces it.**  

We are asking for help because we are a small team and have to switch between different projects. Please join us in GitLab. 

###Our Repo
https://www.gitlab.com/labstry/labstry_forum  
  
###**Changelog**
**General Bug and Regression Fixes**
In Labforum 3.0.5, we are now deprecating classes within api. This deprecation was due to the **structural change for API calling**, where api will use standardised Classes together with the frontend. Warnings will be prompted to suggest users to migrate to the classes based on src/ folder.
  

**A partially revamped Admin Panel**
We revamped the admin panel to make it look a little nicer. We did that by changing the colours used on the header. We adopted a more vibrant color to makes it look comfortable, we increased the text size of the titles to make it more visible to users.
  

**Adopting Bootstrap 5**
As the date drawing closer to the release of BS 5, we are taking early steps to migrate to BS 5 to allow us to adapt the changes made in this version update. We are now using new classes name to replace the old, deprecated ones.
How can I use <pre/> tag in react JS ?
Tags: react, html, javascript, beginners
Published: 2020-09-13 12:03:43

Hellow my fellows!

Yesterday I learn a small detail, but important. I tried to add a code example using `<pre>` tag in my react page to create my web portfolio. But, the `<pre>` tag doesn't worked as expected. 

How should I use ? 

Simple, we need use the ` character to envolve the code example. 

![pre_tag_example](https://dev-to-uploads.s3.amazonaws.com/i/5job4ad8ew17poy2m8ty.png)

Simple :D!
Daily Developer Jokes - Sunday, Sep 13, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-09-13 12:00:12

---
title: "Daily Developer Jokes - Sunday, Sep 13, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Sep%2013%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258f50f7c0.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the developer go broke?

___A:___ Because they used up all their cache
 -->