teleren/devto huggingface dataset:
Debugging: What's the Simplest Explanation?
Tags: devjournal, codenewbie, womenintech, webdev
Published: 2021-02-26 07:48:45

_This post was originally published on February 26, 2021 on [my blog] (https://alexlsalt.github.io/blog)._

-------------

Friday already, this week really flew by, yada yada yada (the usual post intro words to get the writing flowing...)

It's Friday and we're here, doin' it live. I've been working all week on solving a bug, and I finally found a solution for it yesterday only to realize that the fix warranted a mere 10 characters or so to the changed file.

Yet again, I need to keep this idea in mind that the likely solution to any problem or bug is most likely the simplest solution you have on hand.

And yet, we don't think about that right when we go into investigation mode on a bug, do we? I think, for me, I gear myself up to do a deep-dive and learn everything I can about why something is happening to be able to really scope it way down and isolate the issue.

But once I do that, I think I need to ask myself, 'Okay, what is the simplest explanation and most straightforward approach to fixing this?'

Maybe it's not investigating how a certain instance variable is carried throughout the entire application's architecture and creating new functions to manipulate different variables.

Maybe it's just making sure to parse a variable to an integer and move on with your day.

-------------

Pssst! I send weekly newsletters about the self-taught coding journey and my own coding adventures (and misadventures!)  [Sign up here! >>](https://ladies-code-collective.ck.page/e53b5fca44)
9 Top Data Science Competitions to Sharpen Your Skills in 2021
Tags: datascience, machinelearning, analytics, analyst
Published: 2021-02-26 07:42:28

Participating in data science competitions is the best way to test your knowledge and sharpen your skills. That’s why in this article, I am gonna share **9 top Data Science competitions** that will help you to experiment with real-world data and advance your data science skills.

Only theoretical knowledge is not enough to stand in the data science field. You need to apply this theoretical knowledge into practice. And for this, data science competitions are the best. These competitions have various advantages.

Data science competitions help you to showcase your talent to the world and a chance of getting recruited. And working in teams with like-minded people is also good for you to think over a problem from different perspectives.

I hope you understood the importance of these data science competitions. Now you are excited to know about these competitions.

Aren’t you?

I know you are. So without any further ado, let’s get started-
**[Click to continue reading...](https://www.mltut.com/top-data-science-competitions/#1-kaggle)**
TIL Unity Logs Can Take Gigs Again
Tags: todayilearned, gamedev, unity3d
Published: 2021-02-26 07:41:08

2021-02-25

Well it happened again! And it was indeed the shader compiler doing something funky. It was inflating the log with the same error messages till all hard disk space was consumed.
```
Failed to get socket connection from UnityShaderCompiler.exe shader compiler! 
(Filename: C:\buildslave\unity\build\Tools/UnityShaderCompiler/ShaderCompilerClient.cpp Line: 339)
```
When I turn my VPN off, this issue does not occur.
The other thing I discovered today was also interesting. It's related to URL protocols but I'll probably write about it tomorrow.
Download and try API Platform
Tags: api, apiplatform, download, opensource
Published: 2021-02-26 07:40:08

Very pleased to announce that Gravitee.io v3.6 has been released 🚀, download here now: 
Download APIM: https://www.gravitee.io/downloads/api-management
Download AM: https://www.gravitee.io/downloads/access-management

New features include:

- A brand new home page for the console
- API deployment enhancements
- New “Logged data masking policy”
- Application Flows
- Enriched context policies
- Application analytics ..... and many more

Check out our blog coming very soon with details of new features 💫

#newrelease #api #apiplatform
Кешированные HTTP-соединения
Tags: ruby, http, docker
Published: 2021-02-26 07:28:58

Как-то на кухне зашел разговор за потерю времени на установление HTTP-соединения. Вот небольшая заметка: [https://blog.rnds.pro/007-http](https://blog.rnds.pro/007-http?utm_source=devto&utm_medium=post)

![http](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5l4dskjzicyh7dt65m8.png)
How to configure CoreDNS in Linux(Part-1)..
Tags: kubernetes, coredns, linux
Published: 2021-02-26 07:25:40

For CoreDNS installation in Linux, you can proceed further.

📌Go to this Link-->
https://github.com/coredns/coredns/releases/tag/v1.8.3

Now copy this link, as shown in the below image.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jowb65kjbmvr8q0rbmrf.png)

📌Now run the below command to download the software.
$ wget https://github.com/coredns/coredns/releases/download/v1.8.3/coredns_1.8.3_linux_amd64.tgz
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trfc0vlvnva46bjieoya.png)

Software is installed but it is in a zip format.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5xxwqs14bvomc56upfd.png)

📌So you need to unzip this file "coredns_1.8.3_linux_amd64.tgz"
Now, run the command to unzip.
tar -xvzf coredns_1.8.3_linux_amd64.tgz
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1mwgknq3ptn0cf8knja.png)

And finally, your program CoreDNS is installed. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1iflfvqfmuyss41my6ox.png)
How to move background image on scroll
Tags: html, codenewbie, javascript, beginners
Published: 2021-02-26 07:17:04

***Hello, guys in this tutorial we will make an awesome move background image on scroll***

###Common Query###
1. How to move background image on scroll
2. How to add background move animation on scroll
3. How to create background animation
4. move div on scroll

**Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to move background image on scroll**

First, we need to create three files **index.html** and **style.css** then we need to do code for it.

###Step:1###
***Add below code inside index.html***

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>How to move background image on scroll</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet"> 
</head>
<body>
  <div class="section bg-static">
    <div class="move"></div>
  </div>
  <div class="content">
    <h1>Move background image on scroll</h1>
  </div>
  <script>
    $(window).on("load resize scroll", function() {
    $(".bg-static").each(function() {
      var scrollTop = $(window).scrollTop();
      var elementTop = $(this).offset().top;
      var leftPos = scrollTop - elementTop;
      $(this)
        .find(".move")
        .css({ left: leftPos });
      });
    });

  </script>
</body>
</html>
```

###Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.

```css
* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
} 
body {
    width: 100%;
    height: 200vh;
    overflow-x: hidden;
}
.bg-static {
    position: relative;
    max-width: 100%;
    min-height: 100vh;
    background-image: url("01.jpg");
    background-size: cover;
    background-position: center;
  }
.move {
    position: absolute;
    top: 0;
    bottom: 0;
    right: auto;
    width: 100%;
    background-image: url("02.png");
    background-size: cover;
    background-position: center;
}  
.content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
```

> <a href="https://blog.stackfindover.com/spotlight-cursor-text-screen/" rel="dofollow">Spotlight Cursor Text Screen</a>

> <a href="https://blog.stackfindover.com/how-to-create-pure-css-toggle-switch/" rel="dofollow">CSS Toggle Switch</a>

###Move background on scroll Video output:###
{% youtube OMxMI2wRxTM %}
Typescript - Tips & Tricks - this parameter
Tags: typescript, webdev
Published: 2021-02-26 07:04:34

Hello everybody and welcome back, today I'll talk about [this parameter](https://www.typescriptlang.org/docs/handbook/functions.html#this-parameters).

Sometimes we need to create functions that have to know the context to run correctly.
A simple example, the mathematical power must know the base and the exponent number to run correctly.
So we could create a simple method like this:
```ts
function pow(exponent: number) {
  return Math.pow(this.number, exponent);
}

const basePow = {
  base: 2,
  pow,
};

console.log(basePow.pow(2));
```
If we build and run this code, the console log's result will be "NaN", because in the pow method the value of the field "this.number" is undefined.
_N.B. if you build this code with the strict mode on true, the compiler detects the problem at build time and so the build fails_

But now I explain the solution.
In this case, the problem is the "number" field that doesn't exist in this context.
Typescript helps us to prevent this error, it allows us to indicate the "this" type as a parameter.
To do this, we need to declare the "this" context as the first parameter of the function, so typescript detects the "this" type and it helps us to prevent errors and bugs.
So the code in the previous example should be rewritten like this:
```ts
function pow(this: { base: number }, exponent: number) {
  return Math.pow(this.base, exponent);
}

const basePow = {
  base: 2,
  pow,
};

console.log(basePow.pow(2));
```
In this case, the result at runtime is "4" as expected.
If by chance we write the "basePow" object like this:
```ts
const basePow = {
  value: 2,
  pow,
};
```
when we try to call the method "basePow.pow(2)", the typescript language detects the error, and in this case, when we try to build the code the build fails.

That's all!
See you soon guys!
VIM cheatsheet
Tags: vim
Published: 2021-02-26 06:57:31

**Exiting:**

- 
:qa ⇒ close alll file
- 
:qa! ⇒ close all files, abadon changes
- 
:w ⇒ save
- 
:wq / :x ⇒ Save and close file
- 
:q ⇒ close file
- 
:q! ⇒ close files, abadon changes
- 
ZZ ⇒ save and quit
- 
ZQ ⇒ quit without checking changes

**Navigation:**

- 
h, j, k, l ⇒ arrow keys
- 
<C-U> / <C-D> ⇒ Half-page up / down
- 
<C-B> / <C-F> ⇒ page up / down

words

- 
b / w ⇒ previus / next word
- 
ge / e ⇒ previus / next end of word

line

- 
0 (zero) ⇒ start of line
- 
^ ⇒ start of line (after white space)
- 
$ ⇒ end of line

character

- 
fc ⇒ go forward to character c
- 
FC ⇒ go backword to character c

document

- 
gg ⇒ first line
- 
G ⇒ last line
- 
:n ⇒ go to line n
- 
nG ⇒ go to line n

window

- 
zz ⇒ center this line
- 
zt ⇒ top this line
- 
zb ⇒ bottom this line
- 
H ⇒ move to top of the screen
- 
M ⇒ move to middle of the screen
- 
L ⇒ move to bottom of screen

search

- 
n ⇒ next matching search pattern
- 
N ⇒ pervius match
- 
*⇒ next whole word under cursor
- 
# ⇒ pervius whole word under cursor

tab pages

- 
:tabedit [file] ⇒ edit file in new tab
- 
:tabfind [file] ⇒ open file if exist in new tab
- 
:tabclose ⇒ close current tab
- 
:tabs ⇒ list all tabs
- 
:tabfirst ⇒ go to first tab
- 
:tablast ⇒ go to last tab
- 
:tabn ⇒ go to next tab
- 
:tabp ⇒ go to previus tab

**Editing:**

- 
a ⇒ append
- 
A ⇒ append from end of line
- 
i ⇒ insert
- 
o ⇒ next line
- 
O ⇒ previus line
- 
s ⇒ delete char and insert
- 
S ⇒ delete line and insert
- 
C ⇒ delete until end of line and insert
- 
r ⇒ replace one character
- 
R ⇒ enter replace mode
- 
u ⇒ undo changes
- 
<C-R> ⇒ redo changes

**Clipbord:**

- 
x ⇒ delete character
- 
dd ⇒ delete line (cut)
- 
yy ⇒ yank line (copy)
- 
p ⇒ paste
- 
P ⇒ paster before
- 
"+p / "*p ⇒ paste from system clipborad
- 
"+y / "*y ⇒ copy to system clipborad

**Exiting insert mode:**

- 
Esc / <C-[> ⇒ exit insert mode
- 
<C-C> ⇒ exit insert mode and abort current command

**Visual mode:**

- 
v ⇒ enter visual mode
- 
V ⇒ enter visual line mode
- 
<C-V> ⇒ enter visual block mode

in visual mode

- 
d / x ⇒ delete selection
- 
s ⇒ replace selection
- 
y ⇒ yank selection (copy)
Setup recomendado para Laravel apps
Tags: laravel, php, codequality
Published: 2021-02-26 06:49:04

#### Initialize Git

after create a new laravel project you must initialize git after install Husky to make it work properly:

```terminal
git init
```

#### agrega el archivo public/js/app.js al gitignore

Si usas el watcher de laravel mix tu archivo `public/js/app.js` se modificara constantemente por lo cual es bueno sacarlo de control de versiones:

```.gitignore
/public/js/app.js
```

#### Instalar paquete de cs fixer

```terminal
composer require friendsofphp/php-cs-fixer
```

If it fail you can use an specific version 2.16.2 version:

```terminal
composer require friendsofphp/php-cs-fixer:2.16.2 -W
```

#### Instalar paquete Husky

```terminal
npm install husky@4 --save-dev
```

#### Crea un archivo ".php_cs" y agrega el siguiente contenido:

```terminal
<?php

$finder = PhpCsFixer\Finder::create()
    ->in(__DIR__)
    ->exclude(['bootstrap', 'storage', 'vendor'])
    ->name('*.php')
    ->name('_ide_helper')
    ->notName('*.blade.php')
    ->ignoreDotFiles(true)
    ->ignoreVCS(true);

return PhpCsFixer\Config::create()
    ->setRules([
        '@PSR2' => true,
        'array_syntax' => ['syntax' => 'short'],
        'ordered_imports' => ['sortAlgorithm' => 'alpha'],
        'no_unused_imports' => true,
    ])
    ->setUsingCache(false)
    ->setFinder($finder);
```

#### Agregar la siguiente llave en tu package.json

```json
    "husky": {
        "hooks": {
            "pre-commit": "vendor/bin/php-cs-fixer fix --config .php_cs --allow-risky=yes --dry-run --verbose",
            "pre-push": "php artisan test"
        }
    },
```

Con esta configuración cada vez que se realize un commit se revisaran todos los archivos del proyecto, también si se realiza un "push" del código este correra todos los tests por medio del comando `php artisan test` antes de subir los cambios.

#### Instalar dependencias con npm

```terminal
npm install
```

#### Correjir código anterior

Si el proyecto ya esta avanzado es posible aplicar también las reglas al código anterior ejecutando este comando:

```terminal
vendor/bin/php-cs-fixer fix
```

o

```terminal
php-cs-fixer fix --config .php_cs --verbose
```

#### Instalando Laravel IDE Helper

```terminal
composer require --dev barryvdh/laravel-ide-helper
```

###### Agrega comentarios para los Facades

```php
php artisan ide-helper:generate
```

###### Agregar comentarios para los modelos

```php
php artisan ide-helper:models
```

###### Genera el archivo Metafile para PHPStorm

```php
php artisan ide-helper:meta
```
Using the GitHub CLI to update your repo
Tags: tutorial, cli
Published: 2021-02-26 06:26:36

Have you ever forked a repo, only to come back to it months later and realise your fork is totally out of date?

This is what happened to me this week whilst live coding. We were working through the Flame of Open Source on [Twilio Quest](https://www.twilio.com/quest). It had been a while since I'd completed this mission. We were going over the quest, talking about open source, how to get involved, and how to find good projects.

![twilio-quest-oss-banner.width-800](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr2ivy14ruwk7uirpbvx.png)
 
The Flame of Open source uses an open source repo to show you how to contribute to open source. Since I'd already done this mission, I had the repo forked on my GitHub account, and as a local git repository. But the fork was now 759 commits behind the main branch. One way around this would be to delete the repo and re-clone it.

But there's a better way - updating the repo to match the main branch. You can use the command line with GitHub to do this.

First, navigate to your local git repository:

` cd [file path] `

Now we need to grab the path to the main branch you originally forked it from:

` git remote add upstream [URL ending in *.git] `

Then pull this into your local repository:

` git remote pull upstream main `

During the above step, make sure you're on the right branch. If you're not on the correct branch, use `git checkout [branch name]` to switch to the correct branch (this is what I did wrong originally) :facepalm:

Now everything is up to date locally. All you need to do is push all the changes back to GitHub:

` git push `

Everything now looks good. One of the great things about live streaming is you can learn on the go from people around you. If you want to check out this :tea: Twilio Quest and Tea :tea: stream, you can watch the recording on [Twitch](https://www.twitch.tv/videos/924999778). Or come and join us sometime at [MishManners](https://twitch.tv/MishManners).

![Twitter cardSmall](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75xbp2c9asbiirvc79aw.jpg)
Run HTML, JS, CSS with JS
Tags: javascript
Published: 2021-02-26 06:15:11

#Q: How to run Run HTML, JS, CSS with JS?
###Ans: **BLOB!**

**Can Be Used As File eg: src="outputFileUrl"**

####Use Code:

``` 
var codeText = ``; // Some Code In HTML/JS/CSS

var outputFileUrl = URL.createObjectURL(new Blob([codeText], {

// Can Use Any File Type
type: "application/javascript" // - For JS, "text/html" For HTML, "text/css" for CSS
   
}));


```

**Possible Uses: **
1) **Code Editor**
2) **Editing JS After Page Loads.**
3) Many More!

##See My Example: [CodePan](https://codepen.io/pranit-kharche/pen/VwmmLEa)
Reactjs hard reload. Content from server
Published: 2021-02-26 06:04:01

Hey, 
I was building an application with react js which uses service workers. I am unable to see new changes immediately when pushed to the server. We manually need to hard reload the browser by pressing ALT +CTRL + R. 

We as an organization facing this for 3 weeks now and there are some builds in the pipeline waiting for this to resolve. 

Thanks in advance!
Why use drop shipping business?
Published: 2021-02-26 05:07:39

Let’s say you’ve decided you want to start an ecommerce store. What are your next steps? Most entrepreneurs try to come up with a product idea, look for suppliers, pay for the products and get them into your real-world store. Then, once you receive your merchandise, you’ll try hard to make sales.
The problem is you don’t really know what will sell well, or if you will be able to sell the product at all. There’s a lot of risks involved in the traditional business model.

To illustrate:
Alice uses dropshipping, so she doesn’t buy products in advance;
She only manages to sell 10 products and brings in $200 in sales;
Alice orders the products from her suppliers and has them shipped directly to her customers;
She quickly realizes that nobody likes these products and decides to try a different niche or product instead;
Alice is still happy because she just made $100 in profit.
What is Debouncing in JavaScript?
Tags: webdev, javascript, programming, codenewbie
Published: 2021-02-26 05:07:13

Debouncing in JavaScript means you can control the rate at which a function can execute. You can also think of Debouncing as **High Order Function** which is used to control the limit at which a function can execute. 

### Creating a debounce
```javascript
function _debounce(cb, delay) {
 let time; 
 return function() {
  clearTimeout(time); 
  time = setTimeout(cb, delay); 
 }
} 
```

### Using a debounce
```javascript
userNameInput.addEventListener(
  "keyup", 
  _debounce(checkUser, 500); 
 ); 
```
On each keypress, the **checkUser** will trigger after 500ms. 

### But why Debouncing 🤔

It is used while doing a SEARCH on your webpage. 

Ex. When the user starts typing, after three characters we hit the DB to fetch the search results. But if the user is typing faster, it might become a race condition in fetching the data. So to obtain it in a proper sequence we must use Debouncing. 

You probably know: 
- Window resize event
- Scroll Events
- Autosave feature
- Input search feature

--- 

🤔Thanks For Reading | Happy Coding 🍞

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from <a href="https://mailchi.mp/9f73b65b9c38/rahulism" target="_blank">Here</a>

<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> <img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>
How classmethod in Python helps in implementing Factory methods ?
Tags: oop, python, tutorial
Published: 2021-02-26 04:50:58

When talking about class method, it bounds to a class rather than to its object. Similar to that of static method, it doesn't requires the creation of the class instance.

The key difference between a static method and a class method is that Static method knows nothing about the class and just deals with the parameters while the Class method works with the class since its parameter is always the class itself.

**static method**

```
@staticmethod 
def static_function(arg): 
    return arg
```
>The above example shows us that a decorator @staticmethod is followed by a function accepting a single parameter and returns that parameter arg during its function call.

**class method**
```
@classmethod # decorator
def class_function(cls, arg): 
    return cls(arg)
```
>The above example shows us that a decorator @classmethod is followed by a function accepting the class as a parameter along with a parameter named arg so it returns by constructing the class with the parameter arg during its function call.

***The Water Tank Factory***
```
from abc import ABC, abstractmethod

class WaterTank(ABC):
    @abstractmethod
    def get_capacity(self):
        pass

class WaterTankFactory(WaterTank):
    def __init__(self, capacity):
        self.__capacity = capacity
    def get_capacity(self):
        return self.__capacity
    @classmethod
    def set_capacity(cls, capacityRequired):
        return cls(capacityRequired)
```
Let us create a class named WaterTank as an abstract class with an abstract method get_capacity() (getter function for retriving a private variable).

Now let us create a factory class named WaterTankFactory which is going to produce our Water Tanks.

>You see as Factories helps us to manufacture products, Factory methods inside a Factory class helps us to create or construct Products in our case we call them Objects or instance of a class.

In our code we are going to use the class method as our factory method.By using the @classmethod before our set_capacity() method, we are saying that the set_capacity() method accepts class as its argument.

**Manufacturing our Water Tank**

>We are going to create two tanks namely tankOne and tankTwo.

```
tankOne = WaterTankFactory.set_capacity(500)
print(f'Capacity of tankOne is {tankOne.get_capacity()} Litre')

tankTwo = WaterTankFactory.set_capacity(100)
print(f'Capacity of tankTwo is {tankTwo.get_capacity()} Litre')
```
Directly using the class WaterTankFactory now we can access our factory method set_capacity() which helps us to set the capacity of our Water Tank, as we implemented this factory method using class method of Python 3, it helps us to construct the class and return it as an object. This helps us to avoid passing object instance to the factory method directly  from the user by preserving the abstraction and advantage of the users as to be a consumer of what they want.

**Output**
 `Capacity of tankOne is 500 Litre
 Capacity of tankTwo is 100 Litre`

Visit My Personal Blog @ [danyson.github.io](https://danyson.github.io/)