teleren/devto huggingface dataset:
My small hook and my flow with git
Tags: git, productivity
Published: 2020-11-14 18:17:13


I've just made this small git hook https://github.com/franciscoj/dot-files/blob/0825d35076ce4550db20a12ea54d73bf3d6cea63/git/hooks/commit-msg and I'm super happy because I've needed it for a long time!

It analyses the commit msg and adds a `+` sign at the beginning of the first line if the commit has more than 1 line. That way I can recognise commits with extended information.
![git log with this change](https://dev-to-uploads.s3.amazonaws.com/i/4um9hm57704pd4qtaojy.png)

When I'm coding serious stuff (like at work) I make very little and very atomic commits incrementally and I always try to keep things "green" and stable. When I say very little I really mean it. Sometimes those are things like "extract a variable" or "move this to the constructor" or "add an unused parameter".

I don't always to that as I make the change. Instead I play around a bit until I get where I want to and then I just commit small hunks little by little.

As I work on the task I extract things that are independent and can be rolled out on their own. Maybe a refactor that makes the new feature possible or a set of classes that aren't used yet but will be used by the new code I'm writing.

This way I also make sure that, on long projects, I keep sharing my code with my team as much as possible and gathering their continuous feedback.

I do that with many interactive rebases: editing, sqashing, splitting and reordering commits. I can't always do that, of course, but I try to code and commit taking that into account so that it is possible.

I normally extract stuff from my PR that can be independently rolled out and that can ease having a big feature in production without needing big last day deploys.

This way I start using the new code and capturing metrics about it before the new feature is even active for the final users, minimising the risk of performance or functional regressions.

PS: This started as a tweet explaining my silly hook and it went out of hand xD

Edit 2020 - 11 - 24: Updated the link to the hook to the latest version with some fixes I've done in the last weeks :)
Public IP, Private IP and Port forwarding
Published: 2020-11-14 18:09:38

What is a public IP?
• A public IP is an IP address that is exposed to external world i.e internet (global)

What is a private IP?
• A private IP is an IP address that is exposed with in the local network (local)

I know the above two statements sound so cryptic.  To get a clear understanding of the above two statements let us do a small activity.

1. Take any two electornic devices, connect to your home WiFi and simply type my IP  in Google search tab. 

2. Now you see the public IP address down to your search tab with a small heading as "your public IP address" (eg: 167.155.187.34)

3. You must have noticed that on both the screen's you see the same public IP 

Wondered , right! When IP addresses are unique, how come same IP🤔

It's a simple funda... Really?? Yes 😁

See, to expose every device directly on to internet it is really impossible instead what your ISP does is, it gives a public IP to your router and all the machines hooked up to your router will get one IP which is known as internal IP.

Okay....🤔. For example  if I want to expose an application running on one of the local machine to the outside world what should I do??

To do this task you have many techniques. one of them is port forwarding. Before we try to understand what is port forwarding let's try to understand the below scenarios.

• If you are in the same network where your application is running you can very well access it.

• Now if you are outside to the network where your application is running then if you try to access it with the internal IP you'll end up playing the Google's Dinosaur game and trying to crack the previous best.

• Now if you work around with  the  public IP (can be taken from your routers settings, known as WAN IP. WAN IP is a translation of IP address that you found on Google a moment ago) by concatenating Port number will still land you on the Google's Dinosaur game page. Because, your router has no idea what that application is.

Upon understanding the above scenarios, now it's the right time to understand what is port forwarding.

Port forwarding is a process of training your router that any request comes with  a specific port number (eg:8080). It need to be routed to some device (eg:AD)  with some internal IP (eg:192.168.0.178).

Okay...🤔🤔.But how does it work if I want to do this for multiple applications with different port numbers in the  same network ???

Your router internally maintains a routing table (usually a hash table) where the port number is mapped with the internal IP address and the story remains same in routing the request.


Thank you for taking time to read this blog 😊



Credits goes to Hussein Nasser
7 Python Libraries Every Back-End Developer Should Know
Tags: python, programming, webdev, beginners
Published: 2020-11-14 17:58:32

<i>Do you know about these open-source python Libraries?</i>

Libraries are a great way to share usable code with other developers. Coders in their working environment either work on building libraries or work with open-source libraries developed by other developers. Here, we will discuss the top 7 Python libraries that are widely used by Developers in their Python projects. So without wasting any more second, let us get started.

<a href="https://levelup.gitconnected.com/7-python-libraries-every-back-end-developer-should-know-95862dada91a"><button>Click Here to View Full Post</button></a>

<hr/>

If you like the post and want to connect, you could do that by reaching out to me on Twitter. I would love to have a good Dev conversation or a DevJoke ( whatever you prefer ). I bet we could learn a lot from each other.

<a href="https://twitter.com/IamKaranJagota"><button>Twitter Profile</button></a>
S1E5 Learn JMeter Series - Deep dive into HTTP Request
Tags: performance, testing, tutorial, webperf
Published: 2020-11-14 17:52:10

Welcome to Learn JMeter Series!

In this season one, episode four, you will learn the following:

* HTTP Sampler
* Various configuration in HTTP Sampler

{% youtube yDg3hWzI9Oo %}

✔ [Buy me a tea 🍵](https://www.buymeacoffee.com/qainsights)
✔ [My Blog](https://qainsights.com)
✔ [My Udemy Course](https://www.udemy.com/course/performance-testing-using-truweb)
How to learn to program from Donald Trump’s Tweet (includes code)
Tags: python, programming, beginners, computerscience
Published: 2020-11-14 17:50:29

<i>Learn a programming concept from one of the President’s tweets.</i>

This post is neither about Donald Trump nor about the US elections 2020. I am just trying to create a viral post from one of the latest Donald Trump’s tweets. So, bear it with me, just like you, with his 3:00 am tweets. 

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

I request each of you to keep the politics aside and focus on learning the coding concept. 

In programming, while writing loops, we often encounter a situation where we would want to stop it based on a condition. If any of the above words find you confusing, then don’t worry! You will learn it all in this post. Just keep reading.

<a href="https://levelup.gitconnected.com/how-to-learn-to-program-from-donald-trumps-tweet-includes-code-a35dbc33bce1"><button>Click Here To Read Full Post </button></a>

<hr/>
If you like the post and want to connect, you could do that by reaching out to me on Twitter. I would love to have a good Dev conversation or a DevJoke ( whatever you prefer ). I bet we could learn a lot from each other. 

<a href="https://twitter.com/IamKaranJagota"><button> Twitter Profile </button></a>
[10] Hacktoberfest, Exploring The Caverns of GitHub and Free T-Shirts
Tags: webdev, codenewbie, hacktoberfest, github
Published: 2020-11-14 17:45:32

As you might know, at this time, there is an event called [Hacktoberfest](https://hacktoberfest.digitalocean.com/). Hacktoberfest is a month-long (October 1 – 31) open-source virtual festival organized by companies such as [DigitalOcean](https://www.digitalocean.com/), [Intel](https://www.intel.com/content/www/us/en/homepage.html), and [Dev](https://dev.to/villivald). It is quite a popular event among aspiring developers and all kinds of people who are interested in contributing to the open-source. Taking part is easy enough. After registration, you only need to submit four pull requests to any [GitHub](https://github.com/villivald) repo with the hacktoberfest topic or label. People that are maintaining repos, in turn, can create issues with such labels and wait for the contributors.

#Pull requests

I did both. First and foremost, I started by figuring out what the heck is a pull request. I mean, I used GitHub a lot before, but somehow it went past me. I was familiar with pushing, pulling, commits, repos, branches, and so on, but I have never used pull requests in my projects. Anyway, it turned out that it is quite a simple procedure. So, after some digging of information, I have already made my first pull request. You can see it in the picture below.

![](https://create-react-app.com/wp-content/uploads/2020/10/Screenshot-2020-10-13-at-16.55.41.png)

My pull requests may not be the most useful in the world, but I tried my best. The primary purpose was to try new technologies and to learn new skills. Among other things, I implemented a [dropdown menu button](https://github.com/imyjimmy/hacktoberfest-app/commit/56b8f75d8cb30dd1dc79112b6afda6e06b61ddd5) with the React Bootstrap library. Later I have also added [some information](https://github.com/GHATAK123/Javascript-Interview-Cheatsheet/commit/2a8769b87dff9b43120e3560119cc5ced00a0861) about using [data types in JS](https://create-react-app.com/javascript-data-types/) to the JavaScript Interview Cheatsheet repository.

#Issues

At this point, I realized that I have no idea what is the issue, so I started to think in that direction. After all, I opened one issue on each of my two most active repositories – [React website](https://github.com/villivald/proj_react_2020) and [Todo App built with React Native](https://github.com/villivald/todo_app_react_native_2020). You can see the essence of the issues in the pictures below. I was pleasantly surprised by the responsiveness of the community, and I’m very grateful to the people who helped me with the issues.

![](https://create-react-app.com/wp-content/uploads/2020/10/Screenshot-2020-10-13-at-17.15.19.png)
![](https://create-react-app.com/wp-content/uploads/2020/10/Screenshot-2020-10-13-at-17.15.41.png)

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

***

[Original post 13.10.20 @ create-react-app.com](https://create-react-app.com/10-hacktoberfest/)

Site https://proj.create-react-app.com/
GitHub https://github.com/villivald
WSL vs plain old VirtualBox
Tags: wsl, windows, linux, virtualbox
Published: 2020-11-14 17:27:26

So, I have been using WSL2 on Windows 10 for a while; and I have made a few complaints. The latest one is.

{% post https://dev.to/patarapolw/can-t-get-fcitx-to-work-in-wsl2-also-win10-multilingual-input-method-sucks-169f %}

Another major complaint is

{% github https://github.com/microsoft/WSL/issues/4166 %}

Luckily, I upgraded my laptop from 8GB to 16GB in advance. **It uses 8GB RAM at baseline. However, there is no real performance delay.**

![RAM used](https://dev-to-uploads.s3.amazonaws.com/i/2ma7rxiqirbqh4iby8pk.jpg)

Compared to my real Linux-first laptop (Ubuntu GNOME 3), which uses less than 1GB RAM (total 8GB RAM - yes, [that triple-booted 8-year-old MacBook Pro](https://www.polv.cc/post/2020/09/mac-triple-boot)).

So, I decided to visit my old friend, VirtualBox.

## VirtualBox advantages (and cons)

- Graphics and input method engines are all decent and reliable. (Forgot to say that **sound doesn't work in WSL2**'s X410, but does work in VirtualBox.)
- True sandboxing. Better security.
  - Of course, a big pro/con of WSL2, is that **you can access filesystem, bidirectionally to-and-from Windows**. (to-WSL: SSH; from-WSL: network drive)

WSL2 does have some unique cons.

- Web development in WSL2, when opening a server port - [the port increases by one in Windows, e.g. 8080 => 8081](https://dev.to/patarapolw/comment/181l1). None of these shit in VirtualBox.
- `systemd`, and perhaps many other default daemons, does not run at all in WSL2. You cannot always expect things to work the same way as plain old Linux.
  - This also includes, [how to install Docker in WSL2](https://docs.docker.com/docker-for-windows/wsl/).
- GUI, even with the best xrdp or X410 (or VcXsrv), throws error often. Input method engines do not work.

Of course, VirtualBox comes with the same old cons.

- Harder to set up to be performant. Have to manually allocate not only RAM and hard disk space; but also CPU's and **even BIOS settings sometimes**.
  - Everything is automated and defaulted in WSL2. You don't have to set up anything to be performant. (You might want to [limit RAM usage](https://github.com/microsoft/WSL/issues/4166), though.)
- I still cannot figure **a way to access WSL2 from VirtualBox**. Network drives cannot be accessed from VirtualBox shared folders.

## Conclusions

Why not install both?

I am starting to think that, if your PC is powerful enough, use VirtualBox first. But do install WSL2, for the sake of Docker.

Also, consider working at the level of Natively Windows.
Building a Shopify App - Day3
Tags: webdev, sideprojects, laravel, shopify
Published: 2020-11-14 16:59:38

Alrighty, let's kick off Day 3 of the side project.

### Few thoughts
- I want to focus on the **major** use case of this app which is where end-user ( customer ) interacts with app functionality. Which is a "popup".
- I have decided to load that functionality inside an iframe so that styles don't conflict and we have full control of the web page being rendered inside iframe.
- Looked at some inspirations for popup designs and I think, I will go with **Intercom** messenger popup concept in the beginning. Will refine it later.


Jumping into code...👨🏽‍💻

### Progress
- Loaded app functionality inside a **iframe**. Provided some hardcoded styles for positioning and stuff.
```javascript
var iframeNode = document.createElement('iframe');
iframeNode.setAttribute('id', 'secret-id');
iframeNode.style.position = 'fixed';
iframeNode.style.bottom = '100px';
iframeNode.style.right = '20px';
iframeNode.style.width = '376px';
iframeNode.style.zIndex = 2147483000;
iframeNode.style.border = '0';
iframeNode.style.minHeight = '360px';
iframeNode.style.maxHeight = '704px';
iframeNode.style.height = 'calc(100% - 120px);'

iframeNode.setAttribute('src', '{{route('storefront.popup')}}');
document.body.appendChild(iframeNode);
```
- Added TailwindCSS to make the popup design. Behold... My popup design 😂 Not even close to Intercom's but the gist 🤷🏻‍♂️ Will improve it later of course.
![Popup design](https://dev-to-uploads.s3.amazonaws.com/i/keznhqipb5q5z87wtpqe.png)
`popup.blade.php`
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Discount Popup</title>
</head>
<body>
    <div class="container bg-purple-600 py-10 px-5">
        <div class="text-white py-5 px-10">
            <h1>Hi 👋</h1>
            <p>Up for a Discount?</p>
        </div>
        <div class="bg-white py-10 px-5 rounded">
            <div class="mb-3">
                <input type="text" class="border-2 w-full p-1" placeholder="Then enter a secret sauce"/>
            </div>
            <div class="flex">
                <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">Submit</button>
            </div>
        </div>
    </div>
</body>
</html>
```
- Need to improve upon my CSS skills too 😣
- Decided to go with **Purple** as base color for now

### Time Spent
1 and half hour ( Damn you popup 😅 )

--------------------------------------------------------------
Signing off 😴

P.S.

If anybody ( other than me 😂 ) reading it, you might be interested in [following me on Twitter](https://twitter.com/Zubairmohsin33). I tweet about Laravel, Shopify and React stuff.
Completed Hacktoberfest
Tags: hacktoberfest
Published: 2020-11-14 16:53:54

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### [beginner in opensource]
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
I have completed 4 PR at the end of October and it was a great experience
### Background

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->


### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
You need to assemble the railway from parts! It's pretty exciting 😉


Tags: unity3d, 2d, gamedev, testing
Published: 2020-11-14 16:53:38

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

#ScreenshotSaturday
Follow my dev: https://twitter.com/PAPERTANKS2 https://store.steampowered.com/app/1213020/PAPER_TANKS https://www.youtube.com/channel/UChy9stkBBtr9ZIakwD5HwdA
Text Recognizer using Google's ML kit
Tags: machinelearning, android
Published: 2020-11-14 16:48:28

Hi guys, I have made my own Text Recognition Android app. It can recognize text from an image on your local device or you can capture an image to recognize the texts present In the image.

It also has crop functionality so you can get the text from a particular part of the app. You can copy the detected text and use it elsewhere if needed.

This is my first ML project. I don't have much experience in ML so I used Google's pre-built kit. Anyhow, it was a really nice experience.

The project is available on [GitHub](https://github.com/GouravKhunger/TextRecognizer). Check it out!

{% github GouravKhunger/TextRecognizer %}

Also, don't forget to [download the latest apk](https://github.com/GouravKhunger/TextRecognizer/releases) and test it out.

Please let me know if you have further ideas on it. Feel free to star or fork it. PRs are appreciated :)
💻 Exploring Django Project Structure ( Part 3 ) - Django For Beginners
Tags: python, webdev, django, beginners
Published: 2020-11-14 16:37:30

In this part of the series [Django For Beginners](https://bit.ly/django-for-beginners) we are going to explore project struture of a new `Django` project which we create in last part check it out [here](/python/django/how-to-install-django/) after installing `Django`. 

The poject structure should look something like this,

```toml

 📂 myDjangoSite
	- 📂 myDjangoSite
		- 📄 __init__.py
		- 📄 asgi.py
		- 📄 settings.py
		- 📄 urls.py
		- 📄 wsgi.py
	- 📄 manage.py

```

Sorry to interrupt you but I want to tell you one thing that I have started a small blog you may continue reading it [here](https://www.ketaniralepatil.com/python/django/exploring-django-project-structure/) it will help me a lot.
ShiftDB: The most powerful database
Tags: cli, database, json
Published: 2020-11-14 16:13:09

# ShiftDB: The most powerful database

## Introduction


ShiftDB is a simple, fast, powerful, CLI based ,JSON based database, helps developers to develop apps.
Created by [ZDev1](https://repl.it/@ZDev1)

***

## Getting Started

And now, fork the [repo](https://github.com/zplusfour/shift-db)/repl and add this to your JavaScript file:
First:

```sh
$ npm install
```
###### I am thinking of buying an NPM package...

```js
const Shift = require('./shift');
const database = new Shift();
```

***


## Documentation

### 1. Get all the keys

To get all the keys that they're in the database, just type:

```js
database.getAll();
```

### 2. Get a key

To get one key and it's value, just type:

```js
database.get('key');
```

### 3. Make a key

To set a key (or to create a key as well), just type:

```js
database.set('key', 'value');
```

### 4. Delete a key

To delete a key from the database, just type:

```js
database.del('key');
```

***

## CLI Documentation

As I said before, I made a [CLI](https://npmjs.com/package/commander) for the database.
Make sure to open your terminal :)

Help:

```sh
shiftdb help
```

### 1. Get all the keys

To get all the keys, type in the terminal:

```sh
$ shiftdb getall
```

### 2. Get a key

To get a key and it's value, type in the terminal:

```sh
$ shiftdb get
Key: key
```

### 3. Make a key

To make or set a key in the database, type in the termina;:

```sh
$ shiftdb set
Key: key
Value: value
```

### 4. Delete a key

To delete a key from the database, type in the terminal:

```sh
$ shiftdb del
Key: key
```

If all of those aren't working, try this:

```sh
$ node . your_command
```
Learning on pet projects
Tags: xstate, ember, learning
Published: 2020-11-14 16:06:09

I'm a hands-on learner. I can't **read** through the theory _before_ I try to **make** something.

At the same time I never found a value in artificial programming exercises like "implement red-black tree" or "sort a deeply nested array of arrays". For me the project has to have a real world application to be interesting.

Last week friend's daughter had a birthday and we decided to prepare a treasure hunt for her. And since I wanted to learn bits and pieces about [Xstate](https://xstate.js.org/) I decided to put some time into making one of stages into an online puzzle. It took me few hours to put together and even though in the end I was told that "we're not going to do any tech heavy stage", I am still happy that I got a chance to play around with **Xstate** and few other cool technologies.

## The stack

 - [EmberJS 3.22](https://emberjs.com/)
 - [Font Awesome 5](https://github.com/FortAwesome/ember-fontawesome)
 - [Frontile 0.6.0](https://frontile.dev/versions/master/)
 - [Xstate 4.12.0](https://ember-statecharts.com/)
 - [tailwindcss 1.9.6](hhttps://tailwindcss.com/)
 - [Animate.css 4](https://github.com/sinankeskin/ember-animate-css)

The repo is available on: https://gitlab.com/michal.bryxi/snoot-snoot

## Preview

You can play **Snoot Snoot!** (it's named after my friend's daughter nickname) online on: https://snoot-snoot.netlify.app

![snoot-snoot](https://dev-to-uploads.s3.amazonaws.com/i/tme3mtn7ejmkexulmycy.gif)

## Conclusion

If you're a **hands-on** learner, you should find excuses to create silly little projects like this. They take very little time, you learn something, you have something to show&share and they might make someone smile.
 
-----

Photo by Lum3n from Pexels
Como usar el Dhtmlx DataProccesor 
Tags: dhtmlx, dataprocesor, web, ajax
Published: 2020-11-14 15:56:19

El DataProcessor es una librería muy intuitiva y programática que le permite a un componente en el cliente tener un  servidor.

{% youtube iCQbhuijK38 %}


No sólo simplifica el trabajo con el lado del servidor, pero también ayuda a monitorear todos los cambios de datos. Se puede utilizar con cualquier componente DHTMLX que permite la edición dentro de sí mismo. Por ejemplo, la rejilla o dataview. A partir de dhtmlxSuite 2.1, hay conectores PHP-listos para usar que se pueden utilizar en lugar de la codificación personalizada.

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

DataProcessor obtiene los datos (todos los parámetros son parte de las peticiones GET o POST) por medios convencionales de comunicador cliente servidor.