teleren/devto huggingface dataset:
Challenge yourself with a JS Coding Challenge
Tags: javascript, codenewbie, learning, codingchallenge
Published: 2019-11-12 09:11:24

As a mentor via [CodingCoach.io](https://codingcoach.io/) I'm currently working my way through the *[21 Days of Code](https://coding-challenge.lighthouselabs.ca/) coding challenge by Lighthouse Labs* with my mentees. I thought to share our findings and resolutions here, as well as offer some perspective on these events.

Firstly, I kind of like this iteration (we've previously did a similar coding challenge side by side). We're following a storyline involving the Mayor of Codeville and face different kinds of challenges. It's nice to have some context and not simply solving problems. I think this is a really engaging way of keeping interest and motivation.

The challenges ramp up nicely, they start out with simple problems, but they get more complex per day. Fortunately, in the online code editor (which can be a real nightmare) they've done a good job in emulating an development environment. You can output `console` statements and repeatedly test your code, where error handling is helpful.

What I also like is the encouragement of *Test Driven Development*. When you run your code, you also get the output of the unit test assertions. This helps beginners in pinpointing where the code might be faulty and the practice of coding against tests.

So how do we work together? Basically, everybody tries to solve the challenges on their own, with the help of the entire internet (Google, Stack Overflow, the discussion forum). I share my resolutions to the daily challenges and try to explain which steps I took to come to this resolution (this helps me in writing more readable code as well). If someone is stuck, I try to help break down the problem or we work together in a Codepen on the broken code and I explain what went wrong.

I am offering off-the-shelf resolutions for the daily challenges on a [github repository](https://github.com/joranquinten/lighthouse-21-days-of-code) I've created. The point is having fun, so if you feel like you're stuck, you can just copy & paste a resolution. There's not really something to win or earn, except internet points, so you can only fool yourself with copy & pasting all resolutions.

We're a over the halfway point of the challenge now, so if you're interested and haven't joined, there's still time! And if you want to catch up, feel free to take a look at the resolutions.

BTW I'm in no way affiliated to [Lighthouse Labs](https://www.lighthouselabs.ca/). My mentee happened to stumble upon this and we thought it was an excellent practice.
Implementing Simple PCA using NumPy
Tags: python, numpy, datascience, machinelearning
Published: 2019-11-12 20:57:58

_I am open to job offers, feel free to contact me for any vacancies abroad._

In this article, I will implement PCA algorithm from scratch using Python's NumPy. To test my results, I used PCA implementation of scikit-learn.

```python

from sklearn.decomposition import PCA
import numpy as np
k = 1 # target dimension(s)
pca = PCA(k) # Create a new PCA instance

data = np.array([[0.5, 1], [0, 0]]) # 2x2 data matrix
print("Data: ", data)
print("Reduced: ", pca.fit_transform(data)) # fit and transform

```

This results in:

```

[[-0.55901699]
 [ 0.55901699]]

```

### Centering Data Points

Make origin the centroid of our data.

```python

data = data - data.mean(axis=0) # Center data points
print("Centered Matrix: ", data)

```

### Get Covariance Matrix

Get covariance matrix of our features.

```python

cov = np.cov(data.T) / data.shape[0] # Get covariance matrix
print("Covariance matrix: ", cov)


```

### Perform Eigendecomposition on Covariance Matrix

Eigendecomposition extracts eigenvalues and corresponding eigenvectors of a matrix
```python

v, w = np.linalg.eig(cov)

```

### Sort Eigenvectors According to Eigenvalues

Most numerical libraries offer eigenvectors pre-sorted, However, this is not the case for NumPy. Therefore, we need to argsort the eigenvalue vector to get sorting indices and perform sorting on columns of eigenvalues.
```python

idx = v.argsort()[::-1] # Sort descending and get sorted indices
v = v[idx] # Use indices on eigv vector
w = w[:,idx] # 

print("Eigenvalue vektoru: ", v)
print("Eigenvektorler: ", w)

```

### Get First _K_ Eigenvectors

Our aim in PCA is to **construct a new feature space**. Eigenvectors are the **axes** of this new feature space and eigenvalues denote the **magnitude of variance** along that axis. In other words, a higher eigenvalue means more variance on the corresponding principal axis. Therefore, the set of axes with the highest variances are the most important features in this new feature space since they hold most of the information. By getting the first K columns of eigenvector matrix, which have the K biggest eigenvalues, we form what is called a projection matrix. The dot product of our data matrix and projection matrix, _which sounds pretty cool but it is actually pretty straightforward_, is the reduced feature space, the result of PCA. 

```python

print("Sonuc: ", data.dot(w[:, :k]))
# Get the dot product of w with the first K columns of eigenvector matrix
# (a.k.a) projection matrix

```

Which also results in:

```

[[-0.55901699]
 [ 0.55901699]]

```

This is it. Any corrections or suggestions are welcome.

### Extras

[Square vs. Non-Square: Eigendecomposition and SVD](https://math.stackexchange.com/questions/583938/do-non-square-matrices-have-eigenvalues)

Original Turkish article at

{% medium https://medium.com/@sddkal/cpp-eigen-k%C3%BCt%C3%BCphanesi-ile-temel-bile%C5%9Fen-analizi-pca-7cdaf37155ef %}

My go to [article on PCA](https://sebastianraschka.com/Articles/2015_pca_in_3_steps.html)
Designing For Data Protection - Episode 106
Published: 2019-11-13 02:59:29

<p>The practice of data management is one that requires technical acumen, but there are also many policy and regulatory issues that inform and influence the design of our systems. With the introduction of legal frameworks such as the EU GDPR and California's CCPA it is necessary to consider how to implement data protectino and data privacy principles in the technical and policy controls that govern our data platforms. In this episode Karen Heaton and Mark Sherwood-Edwards share their experience and expertise in helping organizations achieve compliance. Even if you aren't subject to specific rules regarding data protection it is definitely worth listening to get an overview of what you should be thinking about while building and running data pipelines.</p><p><a href='https://www.dataengineeringpodcast.com/data-protection-regulations-episode-106/'>Listen Now!</a></p>
Lwing : Send Stylish Messages on Whatsapp, Messenger and More
Tags: showdev, javascript, unicode
Published: 2019-11-13 07:03:48

---
title: Lwing : Send Stylish Messages on Whatsapp, Messenger and More
published: true
description: ShowDEV Lwing!
cover_image: https://thepracticaldev.s3.amazonaws.com/i/varz9iv8zaoufw8w9jix.png
---

Let's Make It Quick! 🚀

## 🔥 What is Lwing?
lwing (Pronounced as "el-wing") is basically a unicode text styler. It takes your simple english input and converts it to some mathematical unicode charecters to make them look stylish and different.

## 🤔 Why The Name "Lwing"?
I don't know, at first I named it lacewing but mistakenly in website title I named it *lwing* . Now it's named as Lwing!

## 📱 Where Can I use Lwing generated text?
You can use lwing generated text mostly everywhere including Whatsapp , Facebook , Messenger, SMS and even at printing!

## 🌐 I want to use it Now!
### Just head over to <https://lwing.ml> 😊

## 💻 What Tech Stack does Lwing use?
* Svelte
* HTML
* CSS
* JS / NodeJs
* Netlify

## 🔥 🤔 How fast is Lwing?
### 😎 Fast Like Sonic Boom‼️
Here's Lighthouse Report : 
![](https://thepracticaldev.s3.amazonaws.com/i/h8399vt2txhq13jryaz6.jpg)

## 😊 Want to Contribute?
Here's GitHub Repository:
{% github bauripalash/lwing %}

Feel free to Fork, Make Improvements and Send Pull Requests 😊😊

---

You can also Upvote Lwing on Product Hunt at <https://www.producthunt.com/posts/lwing> here 

[![](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=174320&theme=light)](https://www.producthunt.com/posts/lwing?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-lwing)

---
If you want to support my work , you can donate via Paypal at <https://paypal.me/bauripalash> or via Paytm (If Indian citizen) at <https://p-y.tm/9V-oX9y> 😊😻!!

Thank You ❤️
TIL: docker commit
Tags: commandline, todayilearned, docker
Published: 2019-11-13 10:40:08

---
title: TIL: docker commit
published: true
date: 2019-11-13 05:00:00 UTC
tags: command line,til,docker
canonical_url: https://flaviabastos.ca/2019/11/13/til-docker-commit/
---

When I need to create a new custom Docker image, I usually start with a base image (alpine, debian, python, etc, depending on the project), running it in the interactive mode and install the tools and dependencies I will need. Once I get my container the way I want, I create a Dockerfile with all the commands I ran inside my container. It works, but I just learned that this might be unnecessary extra work.

All you need is [docker commit](https://docs.docker.com/engine/reference/commandline/commit/)

The process starts the same way: running a base image with interactive access and installing tools and dependencies. THEN, you run:

`docker commit container_ID image_name:tag`

The _container ID_ can be found by running `docker ps` on a separate tab/window. And the _image name_ and _tag_ is whatever name and tag you want to give it.

Now, having a `Dockerfile` has its advantages, such as better way to keep version control, documentation and maintenance, but for prototyping or really small projects, `docker commit` seems to be very useful.

> _The post _[TIL: docker commit](https://wp.me/pa0b0y-5P) _was originally published at _[flaviabastos.ca](https://flaviabastos.ca/)
CORS .NET Core API, NGINX
Tags: vue, csharp, nginx, cors
Published: 2019-11-13 12:19:01

Hello,

After 2 weeks, still having a CORS issue when my vuejs frontend (running on gnix) try to reach my .net core api (running on kestrek with a nginx reverse proxy).

However, I've followed all the examples and advices I've got.

Where am I wrong ? :(
What is Fragmentation?
Tags: devicefragmentation, fragmentationinos, testing, softwaretesting
Published: 2019-11-13 13:28:50

<a href="https://bit.ly/2X9HKHL" target="_blank"><img src="https://www.browserstack.com/blog/content/images/2019/11/Infographic_Fragmentation-01--2-.png" class="kg-image"></a>

Now that you've seen the extent of fragmentation in devices, platforms, browsers, and screen resolutions, learn how to take them into account while creating your own cross-device test strategy.

<strong>Recommended reading</strong>:</p>
<p><a href="https://browserstack.com/blog/cross-browser-testing-for-compatibility/?utm_source=referral&utm_medium=dev.to&utm_campaign=fragmentation"</a><img src="https://www.browserstack.com/blog/content/images/2020/02/Blog-Banner@2x.png"></a></p>
Visualizing Hacktoberfest 2018
Tags: hacktoberfest, productivity, github, opensource
Published: 2019-11-13 16:33:38

I know this post is about the last year, I would like if you want a 'Visualizing Hacktoberfest 2019' :)

The objective of this event is to increase contributions in Open Source projects. If you make four pull requests to an Open Repository in GitHub, you win a free t-shirt and stickers.
GitHub hosted more than 96M projects in the last year. This included over 200M pull requests.
As someone who is creating visualizations at Scope.ink about productivity and the real impact of tasks in a repository, this is very interesting to me. I want to show you some interesting visualizations on this event and give some useful data 😃
Are collaborations in October increasing?
What I have learned making visualizations, is that in Open Source repositories the largest users don’t contribute more than three times. I think the reason for this being that after this user fixes the problem, they abandon the project entirely.
I believe HacktoberFest motivates people to collaborate.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ruocy0qpg9uknh6qfu4q.png)

Contributions in Open Source Project sort by authors. 

So I decided to check how many pull requests were being opened throughout a year in some popular repositories:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/uqr96cmgsoi0zfa1ab6k.png)

Number of Pull Requests through 2018 in four different repositories

We can see that October is the top month for pull requests contributions. However, while making these visualizations, I found a case that shocked me:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hf1dbrpktj90wa69lotc.png)

Number of Pull Requests in freeCodeCamp repository
The freeCodeCamp repository had more than 14000 pull requests! But…
Are these contributions good?

Seeing the previous visualizations we cannot understand if those contributions were useful or not. First, we should look at how many were merged or accepted, understanding that these are the pull requests which have passed a review:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9keuj07i98coqvvexlux.png)

Unmerged and merge pull requests in the 2018 Hacktoberfest, some repos
But freeCodecamp remained the exception. So many pull requests remained unmerged or marked as invalid.

There were useless pull requests such as:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5c6bmuev16dd8uz7okru.png)
Real contribution in freeCodecamp repository

My theory is that freeCodeCamp made an article calling developers to earn a free t-shirt.
Not every pull request was useless
I think freeCodeCamp was a curious case. In other repositories, we have seen that the number of useless pull requests was not as excessive. In this visualization, we can see the modified files in 100 pull requests from the ghost’s repository. There is a great variety, which indicates to us that there were contributions of all types.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3tr1e573bmisx3nygo8b.png)

Files changed in 100 pull requests
Code snippets to recreate those cool effects seen on famous(ish) sites
Tags: html, css, design
Published: 2019-11-13 22:55:27

Today we will be looking at some snippets you can use to [recreate those awesome effects](https://codemyui.com/tag/deconstruction/) you see on other sites. 


#Reebok Promo Image Transition  - [Codepen](http://codepen.io/flacu/pen/BoLRPw/)
[![R1ebok Promo Image Transition ](https://codemyui.com/wp-content/uploads/2015/09/reebok-ink-image-transition-effect-in-css.gif)](https://codemyui.com/reebok-ink-image-transition-effect-in-css/)

#The gradient pull quote as seen on Polygon - [Codepen](http://codepen.io/mpopv/pen/pbYwvQ/)
[![The gradient pull quote as seen on Polygon](https://codemyui.com/wp-content/uploads/2017/05/gradient-pull-quote-as-seen-on-polygon-com_.gif)](https://codemyui.com/gradient-pull-quote-seen-polygon-com/)

#Facebook's scroll down to show sticky video popup - [Codepen](https://codepen.io/creme/pen/jOOZgEO)
[![Facebook's scroll down to show sticky video popup](https://codemyui.com/wp-content/uploads/2019/11/Vanilla-Javascript-and-CSS-Sticky-Floating-Video-on-Page-Scroll.gif)](https://codemyui.com/vanilla-javascript-and-css-sticky-floating-video-on-page-scroll/)

#Soldout Window sign from Electronic Object - [Codepen](https://codepen.io/SaijoGeorge/pen/YVGKBp/)
[![Soldout Window sign from Electronic Object](https://codemyui.com/wp-content/uploads/2017/04/sold-out-sign-for-ecommerce-stores.gif)](https://codemyui.com/sold-sign-ecommerce-stores/)

#Stripe's navigation header  - [Codepen](http://codepen.io/devy_pl/pen/qaPjKd/)
[![Stripe's navigation header ](https://codemyui.com/wp-content/uploads/2016/11/stripe-com-header-navigation-code.gif)](https://codemyui.com/stripe-com-header-navigation-code/)

#The squiggle link effect as seen on TheOutline - [Codepen](https://codepen.io/geoffgraham/pen/bxEVEN/)
[![The squiggle link effect as seen on TheOutline](https://codemyui.com/wp-content/uploads/2018/09/TheOutline-squiggle-link-hover-effect.gif)](https://codemyui.com/theoutline-squiggle-link-hover-effect/)

#MomentsApp Video Loading - [Codrops](http://tympanus.net/Tutorials/VideoOpeningAnimation/)
[![MomentsApp Video Loading](https://codemyui.com/wp-content/uploads/2015/09/momentsapp-video-loading-animation.gif)](https://codemyui.com/momentsapp-video-loading-animation/)


Want more check out the [deconstruction gallery](https://codemyui.com/tag/deconstruction/) on CodeMyUI.
What Is Trackby in Angular?
Tags: angular
Published: 2019-11-14 09:08:05

The “track by” expression to specify unique keys.

The trackBy function takes the index and the current item as arguments and needs to return the unique identifier for this item.

As an Example,
https://www.code-sample.com/2019/11/trackby-in-angular-ngfor-ng-repeat.html
Google Cloud Firestore Client Library
Tags: firestore, python, orm, fireo
Published: 2019-11-14 09:57:02

# FireO

### A modern and simplest convenient ORM package in Python. FireO is specifically designed for the Google's Firestore, it's more than just ORM. It implements validation, type checking, relational model logic and much more facilities. 

## Installation
```
pip install fireo
```

## Usage Example 

```python
from fireo.models import Model
from fireo.fields import TextField

class User(Model):
    name = TextField()


u = User()
u.name = "Azeem Haider"
u.save()

# Get user
user = User.collection.get(u.key)
print(user.name)
```

Appreciate our work by giving [stars](https://github.com/octabytes/fireo)

Read More about [FireO](https://github.com/octabytes/fireo)
Cómo Correr Migraciones Durante Despliegue de Aplicación Rails en Heroku
Tags: rails, heroku, spanish
Published: 2019-11-14 15:53:02

Se sabe bien que **subir aplicaciones web a Heroku es sencillo**. En muchos casos es solo cuestión de correr comandos en la terminal y con una que otra configuración solo con subir los cambios al repositorio basta.

Y si bien tenemos esa facilidad, hay cosas que Heroku deja de hacer por conveniencia, ahorro o que sé yo. Tal es el caso de la ejecución de [migraciones](https://otroespacioblog.wordpress.com/2015/06/30/resolviendo-un-problema-tonto-pero-poco-comun-en-rails-y-sus-migraciones/) cuando se despliegan aplicaciones [Ruby on Rails](https://otroespacioblog.wordpress.com/2018/10/01/backend-handbook-para-aplicaciones-ruby-on-rails/) en este servicio.

Normalmente, **en un despliegue a Heroku el comando para correr migraciones no es aplicado**. Durante el despliegue Heroku ejecuta todo lo necesario para que la aplicación quede disponible con la URL asignada pero lo demás no le concierne.

O sea que si en un nuevo cambio agregamos dos campos nuevos a la base de datos y ejecutamos en una consola `heroku push origin master`, al terminar el proceso los campos no estarán en la base de datos Heroku Postgres y la aplicación probablemente va a dejar de funcionar.

Para solventar esta situación hay varias formas. La mejor y actual es usar los _[Release Phases](https://devcenter.heroku.com/articles/release-phase)_ los cuales son una característica algo nueva.

Solo para el registro algunas alternativas son/fueron:

- [Usando un _buildpack_](https://github.com/gunpowderlabs/buildpack-ruby-rake-deploy-tasks): El mismo repo recomienda usar release phase.
- [Con scripts de Bash](https://mentalized.net/journal/2017/04/22/run-rails-migrations-on-heroku-deploy/): También recomiendan usar release phase.

## ¿Qué es release phase?

Básicamente es una característica de Heroku que permite correr tareas en momentos previos a que el despliegue culmine.

> La jerga de Release Phase está muy ligada a cómo funciona el despliegue en Heroku. Si se quiere entender más, [está la documentación](https://devcenter.heroku.com/articles/release-phase).

Con esto en mente, lo mejor es definir un archivo `Procfile` en el proyecto y en él tener el siguiente código:

```
# Procfile
 
release: bundle exec rails db:migrate
web: bundle exec puma -C config/puma.rb
```

Ya con la primera línea en ese archivo, en cada despliegue Heroku ejecutará el comando de migración y tendremos el proceso como se debe.

Usando _release phase_ se pueden ejecutar otras tareas necesarias. En este caso la necesidad de correr migraciones queda suplida gracias a esta característica.

***

_Este artículo fue publicado [primero en mi blog personal](https://otroespacioblog.wordpress.com/2019/11/10/como-correr-migraciones-durante-despliegue-de-aplicacion-rails-en-heroku/), [Otro Espacio Blog](https://otroespacioblog.wordpress.com/). Ahí escribo sobre todo lo que aprendo al programar y también sobre temas no relacionados a tecnología._
How to know if oauth2.0 authentication setup might be an overkill?
Tags: laravel, oauth20, oauth
Published: 2019-11-14 16:20:23

---
title: How to know if oauth2.0 authentication setup might be an overkill?
published: true
tags: help, laravel, oauth2.0, oauth
---

So, I'm assigned with a task to create APIs for an Instagram-like application. And, Laravel is the framework that we decided to go with. I'm setting up authentication and the last time I did it, it was just with long-lived access tokens (jwt). You know like once users authenticate they're issued a long-lived access tokens which they provide on every subsequent requests. In fact, I'm thinking about doing this again.

But, I've recently learned that long-lived access tokens are bad. They can be stolen and misused. Short-lived access tokens must be used and should be renewed by a refresh token.

So, how do I introduce this "refresh token" into this client-server stateless architecture?

Kindly share your experience.

Thank you.
Vanilla JavaScript Infinite Scroll using WordPress REST API
Tags: javascript, wordpress, showdev, tutorial
Published: 2019-11-14 22:42:22

---
title: Vanilla JavaScript Infinite Scroll using WordPress REST API
description: This pen is a real example of how to build an Infinite Scroll in Vanilla JavaScript. I've used Fetch API, Intersection Observer API, and WordPress REST API to fetch posts. Feel free to fork, use, and modify this code.
published: true
tags: javascript, wordpress, showdev, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hxnk9wj1p74ts8kw8epm.jpg
---

<p>This pen is a real example of how to build an Infinite Scroll
in Vanilla JavaScript. I've used Fetch API, Intersection Observer API, and WordPress REST API to fetch posts. Feel free to fork, use, and modify this code.</p>

{% codepen https://codepen.io/castroalves/pen/YdGyKY %}