teleren/devto huggingface dataset:
Folow-me
Tags: codepen, folowme, folow, me
Published: 2020-05-02 23:39:13

<h1>Follow-me</h1>

<p style="font-size:12px;">This page contains different follow me forms such as:
  <li style="bullets"> a side follow-me with icons</li>
  <li style="bullets"> a position absolute head follow-me</li>
  <li style="bullets"> a head follow-me with the same icons again</li>
  <li style="bullets"> a footer follow-me</li>
  <li style="bullets"> a position absolute footer follow-me (stage at the same place, no-mater if the text mooves)</li>
  <li style="bullets"> an inner follow-me (usefull for aticle, to do an ad break in the middle)</li></p>

<p>If You use one of my free option, please, kindly, give-me your feedback on it, in:
  <li style="bullets"> either the <b>Discord</b> server (<a href="https://discord.gg/dtJTBn" target="_blank">https://discord.gg/dtJTBn</a>)
  <li style="bullets"> or on <b>Dodepen</b> (<a href="https://codepen.io/henry-letellier/pen/OJygPKY" target="_blank">https://codepen.io/henry-letellier/pen/OJygPKY</a>)
  <li style="bullets"> or even on <b>DEV</b> (https://dev.to/henral/folow-me-195k)</li></p>

<p>If you liked my project, don't hesitate to click on the follow links to follow-me, yes they really work ;-)</p>

<p>I hope forward to seing you in others of my projects.</p>

<p>By the way:
   <li style="bullets"> this project has been created by Henry Letellier (me) (<a href="https://www.instagram.com/hen9341_henry/" target="_blank">https://www.instagram.com/hen9341_henry/</a>)</li></p>
   <li style="bullets"> and has had graphical advice by Irina Marchand (<a href="https://www.instagram.com/irinamarchand/" target="_blank">https://www.instagram.com/irinamarchand/</a>)</li></p>

{% codepen https://codepen.io/henry-letellier/pen/OJygPKY %}
Implementing Bootstrap in Your React App
Published: 2020-05-02 23:31:03

Bootstrap is a wonderful and easy to use styling tool. Major companies like the NBA, Walmart, and Target utilize bootstrap to style their websites. In this blog I will be covering the basic setup for bootstrap as well as provide an example of implementing a bootstrap component. 

I am using the React-Bootstrap forum to guide my setup so if you would like another resource visit: https://react-bootstrap.github.io/getting-started/introduction

First install react-bootstrap with npm: 
`npm install react-bootstrap bootstrap`

Next we need to link bootstrap in your react app’s index.html file so that bootstrap will launch. Locate your index.html file and paste this code into the last line of the `<head>` tag:
`` <link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
  crossorigin="anonymous"
/>``
Your index.html should look something like this(lines 9-14):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nllan3lmsi3wadot27hb.png)
Notice its just before `</head>`

That’s all for set up. Wasn’t that easy! Now lets implement a component. There are quite a few so if you want to check them out visit: https://react-bootstrap.github.io/components/alerts/

For this example, let’s use the form component since it utilizes a few components. visit: https://react-bootstrap.github.io/components/forms/

The layout of the react forum lists many examples of that specific component you can use and has the “source code” underneath it. Find any example that speaks to you. For me it’s this one:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o4jznixka95sx0d589ls.png)

Now copy and paste that source code right into your project like this: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sqlo43w1al4n7rq365u0.png)

The last thing you need to do is import the components. Very important or it won’t work. Go through the Source code and look for all the different components you see. Those would be the tags with a capitalized first word. The yellow text in the above example. In this case there are Form components and children of form components, but there is also a Button component at the bottom of the form. Import those components like this: 
`import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/62elprabduicmk6b6w2k.png)

notice you just put the component after the import keyword and at the end of the file path. Also notice that simply by importing Form we have imported all of Form’s child components like Text, Group, and Label. Cmd+s and visit your page and you should see the styled component there! Here is mine:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aybe4ydojat3011y40x8.png)

I hope this blog is helpful to anyone confused about implementing Bootstrap. Comment if you are still having a hard time with it or if I left something out. Thank you for reading!
handy Ruby methods #1 - Array#compact
Tags: beginners, ruby
Published: 2020-05-02 23:24:06

This is my attempt applying the 80/20 principle on Ruby methods. Here's a [primer on 80/20 principle](https://www.youtube.com/watch?v=PfBxuf8f5rc) if you need a refresher. 

I'll only include methods I frequent writing software at [Kajabi](https://kajabi.com/). 

An annoying error happens working with arrays. You'd assume assigning `nil` to an allocated array slot is okay. You're able to add it successfully.. so yeah, it must be okay! Right? 

Issues pop up when you loop over an array. You'll loop over arrays plenty when dealing with real world data. Seriously, I get this error all the time.

I'd punt a baby across a football field if I never have to see this again: 

```ruby
NoMethodError: undefined method 'length' for nil:NilClass
``` 

Okay, maybe not a baby, how about a terrorist? Too much? You feel my pain..

Nil guard your arrays - be better than me.

``` ruby
x = [1, 2, 3]
x.map { |y| y * 5 }
# [5, 10, 15]

x << nil
x << 5
# [1, 2, 3, nil, 5]

x.map { |y| y * 5 }
# NoMethodError: undefined method '*' for nil:NilClass
#    from (irb):in `block in irb_binding`
#    from (irb):in `map'

puts "ugh.. fuck me"
x.compact.map { |y| y * 5 }
# [5, 10, 15, 25]
```

Keep `Array#compact` in your back pocket as you'll see this a lot in your software career.
Handle page unload event in nativescript-vue
Tags: nativescriptvue, event, nativescript, snippet
Published: 2020-05-02 23:14:24

---
title: Handle page unload event in nativescript-vue
published: true
description: 
tags: nativescript-vue, event, nativescript, snippet
---

```js
import { Page } from 'tns-core-modules/ui/page'
export default {
  mounted () {
    this.nativeView.page.on(Page.navigatingFromEvent, this.pageUnload)
  },
  beforeDestory () {
    this.nativeView.page.off(Page.navigatingFromEvent, this.pageUnload)
  },
  methods: {
    pageUnload () {
      console.log('page unload')
    }
  }
}
```


- [navigatedFromEvent](https://docs.nativescript.org/api-reference/classes/_ui_page_.page#navigatedfromevent)
- [nativeView](https://stackoverflow.com/a/55495992/11898289)
What‘s good documentation for Gradle?
Tags: discuss
Published: 2020-05-02 22:51:15

I use Gradle for my open source projects. I like its features, specifically the easy way to do multi project builds.

I struggled with the official documentation on the website. A common trap with technical docs: a lot of details on how things work internally and how you can configure the tool.

What I miss is: say you have goal X, like publishing your project on Maven Central, what are the exact recommended steps to do that? I don’t want to become a Gradle expert, I want to get a job done.

I had to figure out a lot by googling, Stack Overflow and reading blogs.

What are your experiences with Gradle docs? Do you know good and reliable sources of information about Gradle?
React/Redux: To State or to Store
Tags: react, redux, javascript
Published: 2020-05-02 22:32:42

For newer React developers, the decision to use React component state vs. a Redux store can certainly feel a bit confusing. Time is often wasted wavering in indecision - Is it overkill? Is it necessary? Without a clear understanding of the pros and cons of each option, making the wrong decision may quickly lead to even more hours spent troubleshooting a poorly designed data flow in your React components - or worse yet, redevising your application upon realizing that a Redux store is the way to go. Let's try to distinguish which opportunities call for React state, or when a Redux store is in your best interest.

#### React Component State
React consists of two fundamental types of components. **Presentational components** are responsible for how your data will appear on the page. In short, these components are merely in charge of how things look. Meanwhile, **functional components** are responsible for providing the correct data to be displayed. Functional components achieve this by holding *state* - They accept data as *props*, which they pass to other components to be used or displayed. 

Imagine you’re building an application for dog groomers. You have a presentational component that displays an index of all of your furry clients. Your functional component would be responsible for capturing the state of your client list, which is passed to your presentational component and displayed. If you add a new client to the application, the functional component would need to update its state and pass that along to the presentational component to be displayed. This state flow is *unidirectional*, it starts with a user action -> updates state -> changes the view to reflect the new state.

#### Redux Store
Now imagine you’re expanding your dog grooming application to include a weekly schedule and individual pet profiles. This would mean that the data relating to each client now needs to be passed to your original client index component, your new schedule component, and your new profile component. This is the critical point of distinction between when to use React component state or a Redux store. ***When data must be persisted to numerous components, it’s generally time to implement a Redux store.***

The Redux store acts as a centralized location for your data. This makes passing data into your components very straightforward and clear. To dive deeper into this subject, check out Redux functions in the Redux docs (`connect`, `mapStateToProps`, etc.). It’s a very clean and powerful way to manage heavily-used and ever-changing state within your React application. 

#### Conclusion
It’s nice to have numerous ways of maintaining state within a React app. For a simple application, using React component state to pass props around is a quick and effective solution. However, once an application begins to grow, passing around props in this manner can quickly become convoluted and difficult to troubleshoot. This is where a Redux store shines - It provides an efficient structure for storing and passing state from one convenient location.
Chasing after productivity
Tags: django, productivity
Published: 2020-05-02 22:31:18

When I started seriously learning python, I used a technique I have never forsaken since; I built a real-world project with deadlines and all that. The application helps property owners collect rent from their tenants through mobile money using USSD.

> *Every time I fancy a new technology, I look for an actual project with deadlines and all to learn it.*

I decided to use flask as the web framework and with it organised my application into a web portal, an API, and a third-party gateway. I had explored Django but never really fancied it's "batteries included" approach. Fast-forward to 2020, I have developed 3 other applications using flask.

In the last few months I picked up Django. I have been using flask primarily due to its minimality and was quite hesitant to pick up Django. However, I have come to this point due to the following reasons:

- Productivity is key and Django already has a number of common tasks done for you already.
- A large number of client projects I get are nothing more than CRUD with a few statistics dashboards.
- A guy I know has always held multiple client projects and have them delivered on time. I thought I should try his framework choice to see if I can deliver as fast.

> *A lot of work goes into building a complex application with flask. Django has a lot of this work already done*

So picking up Django means:

- Authentication is a setup, not a code up.
- I am enjoying using signals (Celery has been overkill in some situations)
- Writing an application now is like building using LEGOs.

*Till I write again.*
Add an animation overlay on a video with ffmpeg
Tags: linux, video, productivity, ffmpeg
Published: 2020-05-02 22:20:16

{% youtube jIcVut4k6zc %}

This one was a doozy to figure out but I finally managed to overlay a little subscribe animation over my main videos.

Normally I would explain it but its pretty long winded so if you want the full explanation, please watch the video.

The short answer is, its using a complex filtergraph to offset the timestamps on the frames of the sub animation and delay its audio so they play over the main video when I wanted them to.

The command is as follows:

```sh
#!/usr/bin/env sh

IN=$1
OVER=$2
OUT=$3
START=$4
MILLI=${START}000

ffmpeg -i $IN -filter_complex \
"[0:v]setpts=PTS-STARTPTS[v0];
movie=$OVER:s=dv+da[overv][overa];
[overv]setpts=PTS-STARTPTS+$START/TB[v1];
[v0][v1]overlay=-600:0:eof_action=pass[out1];
[overa]adelay=$MILLI|$MILLI,volume=0.5[a1];
[0:a:0][0:a:1][a1]amix=inputs=3:duration=longest:dropout_transition=0:weights=3 3 1[outa]" \
-map "[out1]" -map "[outa]" $OUT
```

------
🎥 [YouTube](https://www.youtube.com/channel/UCTHij3Ac5GizLsn5yB4IX_Q) - Subscribe for more FFMPEG videos!
Anyone here still using CSS Floats?
Tags: css, discuss, webdev, html
Published: 2020-05-02 22:12:58

Since the introduction of grids and flexbox, I have pretty much removed floats from my vocabulary. The only situation in which I would use them would be with positioning images next to wrapping text. Are there any other situations you have run into where floats were a better solution than other alignment tools?

{% codepen https://codepen.io/LegendOfLuis/pen/vYNWLEE default-tab=css,result %}
Case for WebComponents
Published: 2020-05-02 21:30:23

One of the biggest benefits for using web components on a site is the case for overall design consistency. Since web components are resuasable, it makes it a lot easier to create designs faster and more effectively. The biggest case would be for large organizations because it ensures the design of a site is coherent throughout. The video I showed demonstrated how web components can be used in duplicates of the same dataset, in that example, it gave a visual of a possible dataset that would be reused, in that case it was the information on a page filled with different news articles. Creating the custom HTML tag allowed the information to be populated in all of the datasets with that tag. This was a component that would probably be used on multiple other pages of the same website, and by just using the custom tag, it eliminates the time that would be spent populating the information into the dataset, as well as through providing a format that was consistent throughout the entire site. Another example I used showed how HTML components would be used for UI elements on a site. It demonstrated a single component could be used throughout an entire site for elements such as buttons, tags, etc. Instead of a designer going in and creating a new element for each instance of the button, using a custom HTML component would allow the designer to continue to reuse the component throughout the site, saving time while also creating a consistent overall design throughout the site.
YouTube Video: {% youtube y46GDi6W0MY %}
How to delete a file uploaded in database
Tags: sql, mysqli, mysql, data
Published: 2020-05-02 21:07:31


To delete a file loaded on a server, we must enter the following code in our program:

  // We proceed to delete
     if (! unlink ('uploads /'.$ file)) {
          // print error when deleting
          echo 'Error deleting';
     } else {
          // File deleted
          echo 'File deleted';
     }
News Articles Classifier NLP Notebook
Tags: machinelearning, nlp, showdev, datascience
Published: 2020-05-02 20:52:42

I created a News Articles Classifier Python Notebook which was made using *scikit-learn* and *NLTK* libraries of Python. scikit-learn is a library that has machine learning algorithms for supervised and unsupervised learning. Classification and Regression are the basic learning algorithms included in the Supervised Learning methodology of Machine Learning.

In this notebook, I have classified the News articles into four categories:- *"World News"*, *"Sports News"*, *"Business News"* and *"Science-Tech News"*. The categories are also known as labels or classes in Machine Learning. As, the number of classes in this model are more than two it is not a binary classifier but a multiclass classifier.

The NLTK library stands for Natural Language Toolkit and it is used for performing various tasks for preprocessing of text data like: lemmatization, tokenization, removing stopwords and stemming, etc. It is a library used for Natural Language Processing.

I have also made WordClouds for all the different types of news articles i.e. world news, sports news, business news, and science and technology news.

I have used the *Kaggle* platform for making the notebook whose link is given
[here](https://www.kaggle.com/amananandrai/news-article-classifier-with-different-models).

 *Kaggle, a subsidiary of Google LLC, is an online community of data scientists and machine learning practitioners. Kaggle allows users to find and publish data sets, explore and build models in a web-based data-science environment, work with other data scientists and machine learning engineers, and enter competitions to solve data science challenges.* **- Wikipedia**

Kaggle notebooks previously known as kernels are a cloud based workbench for running Machine Learning and Data science programs. It supports two languages *Python* and *R*. Also the notebook format is a Jupyter notebook and supports Markdown blocks for writing text portions.

In this notebook I have used five different classification algorithms and seen how each of them works on this given dataset by comparing there accuracies. The dataset contains two files one for training and the other for testing. The training set consists of 1,20,000 news articles. I have used 50% of the data for training. Also it can be seen that the dataset is balanced which means it contains equal proportions of all classes in the dataset.

The classification algorithms used are:-
>1 - Multinomial Naive Bayes
>2 - Decision Tree
>3 - Gaussian Naive Bayes
>4 - Stochastic Gradient Descent Classifier
>5 - Light Gradient Boosting Machine Classifier

I have used Python's *matplotlib* and *Seaborn* library for plotting graphs and data visualization.

Please, go through the notebook and give your valuable feedback. Also, if you like the notebook upvote it on Kaggle. 👨😄

The link to the notebook is 
https://www.kaggle.com/amananandrai/news-article-classifier-with-different-models
Learn Python: Lists
Tags: python, lists, tutorial, beginners
Published: 2020-05-02 20:09:37

---
title: Learn Python: Lists
published: true
description: Introduction to lists in Python
tags: python, lists, tutorial, beginners
series: [Learn Python]
cover_image: https://images.pexels.com/photos/4050296/pexels-photo-4050296.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940
---

A list is a variable which can hold multiple values.

```python
list_of_alpahbet = ['a','b','c','d'];
list_of_numbers= [1,2,3,4,5]
list_of_fruits = ['🍎','🍊','🍐','🥑','🥝','🍓','🍋','🍍']
mixed_list = ['a','b', 1,2, '🍓','🍋']

print(list_of_alpahbet)
print(list_of_numbers)
print(list_of_fruits)
print(mixed_list)
```
![](https://i.imgur.com/qm9JMxw.png)

Generally, you want to keep your list homogeneous. That is, you want to keep elements of similar type within a list. 
In the example, the first 3 lists (`list_of_alpahbet`, `list_of_numbers`, `list_of_fruits`)  are recommended. The 4th list (`mixed_list `) isn't as it is not homogeneous.
 
## Accessing elements in a list
Elements stored within a list can be accessed via their index.
The first element always has an index value of `0`.

```python
list_of_alpahbet = ['a','b','c','d'];
list_of_numbers= [1,2,3,4,5]
list_of_fruits = ['🍎','🍊','🍐','🥑','🥝','🍓','🍋','🍍']
mixed_list = ['a','b', 1,2, '🍓','🍋']

print(list_of_alpahbet[0])
print(list_of_numbers[1])
print(list_of_fruits[2])
print(mixed_list[3])
```
![](https://i.imgur.com/6zpgqgK.png)


## Nested lists

A list can be nested within another list.

```python
# Nested lists
fruits_names = [
  ['Strawberry', '🍓'],
  ['Lemon', '🍋'],
  ['Pineapple', '🍍']
]

### Accessing the first list within a list.
print(fruits_names[0])

### Accessing the first value of the first nested list.
print(fruits_names[0][0])
```
![](https://i.imgur.com/ZOLaJFS.png)

## Number of elements in a list.

To evaluate the number of elements in a list, we use the `len()` function.

```python
list_of_fruits = ['🍎','🍊','🍐','🥑','🥝','🍓','🍋','🍍']

print(len(list_of_fruits));
```
![](https://i.imgur.com/4nHNMWR.png)

## Adding new elements to a list

Use `.append()` to add new elements to a list.

```python
fruits_names = [
  ['Strawberry', '🍓'],
  ['Lemon', '🍋'],
  ['Pineapple', '🍍']
]

## Adding a new element to the list
fruits_names.append(['Avocado', '🥑'])

print(fruits_names)
```
![](https://i.imgur.com/pX79D8j.png)

# Removing from list

Use `.remove()` to remove an element from a list.

```python
fruits_names = [
  ['Strawberry', '🍓'],
  ['Lemon', '🍋'],
  ['Pineapple', '🍍']
]

## Removing an element from the list
fruits_names.remove(['Lemon', '🍋'])

print(fruits_names)
```
![](https://i.imgur.com/xfsTFhu.png)
 

<hr>
{% replit @rishiabee/learnpylists %}