teleren/devto huggingface dataset:
Interesting facts I learned after becoming a software developer
Tags: programming, facts
Published: 2022-02-20 16:08:09

Software engineering is an ever-changing profession. Based on my experience, I am sharing some interesting facts to help you decide if embarking on a career as a software developer is right for you.

- If you want to be a software developer, you must have a passion, not only for writing code. But also for constantly learning and solving problems.

- Technology advances so fast, and so does programming. We have to stay updated even if the programming language lasts longer version updates can change a lot.

- Not surprising, full-stack developers are currently in great demand because they provide two developers' expertise and talent, and the average salaries are also increasing fast.

- Working as a software developer can allow working on a team and your own. Whether you like to work on your own or with others, you will find time to do both as a software developer.

- As I understood, Formal learning at school or college is different than the actual learning at the job, that's why professional experience is matters, and experience is the best teacher.

- Programming is challenging but also joyful. Because that's the joy of programming, you feel rewarded after solving a problem.
TOP5 books to read this month:
Tags: ai, datascience, books, discuss
Published: 2022-02-20 16:01:28

1. Possible Minds: 25 Ways of Looking at AI
2. What to Think About Machines That Think: Today's Leading Thinkers on the Age of Machine Intelligence 
3. Life 3.0_ Being Human in the Age of Artificial Intelligence
4. Superintelligence Paths, Dangers, Strategies                    5. AI for Data Science  Artificial Intelligence Frameworks and Functionality for Deep Learning, Optimization, and Beyond 
 
[https://t.me/elb2021](https://t.me/elb2021)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6372sbt5d791253flw9t.jpg)
#OpenCV – How to add a watermark to an image 🖼️ using Python 🐍
Tags: englishpost, codesample, opencv
Published: 2022-02-21 18:30:39

---
title: #OpenCV – How to add a watermark to an image 🖼️ using Python 🐍
published: true
date: 2022-02-20 15:57:53 UTC
tags: EnglishPost,CodeSample,EnglishPost,OpenCV
canonical_url: 
---

Hi !

Super quick post today with a cool scenario to support my [TikTok videos in Spanish](https://www.tiktok.com/@elbrunomsft) (I know !😀):

#### How to add a watermark text to an image using python and opencv

Here is the output with an original photo from my office and a watermarked one:

![add watermark to an image using python and opencv](https://brunocapuano.files.wordpress.com/2022/02/add-watermark-to-an-image-using-python-and-opencv.jpg?w=824)

Sample code:

{% gist https://gist.github.com/elbruno/3180142bc220a50601ac3c7c0b1e663d %}

Happy coding!

Greetings

El Bruno

* * *

#### OpenCV and Python

- [Easy way to install OpenCV and TensorFlow with Anaconda](https://elbruno.com/2020/05/12/python-easy-way-to-install-opencv-and-tensorflow-with-anaconda/)
- [Convert an OpenCV frame to PIL image and viceversa](https://elbruno.com/2020/05/12/python-easy-way-to-install-opencv-and-tensorflow-with-anaconda/)
- [Open a video file 🎥 and save each frame as a PNG 🖼 file to a folder 📂](https://elbruno.com/?p=32847)
- [How to add a watermark text to an image 🖼](https://elbruno.com/2022/02/20/opencv-how-to-add-a-watermark-to-an-image-%f0%9f%96%bc%ef%b8%8f/)
I thought i had posted already 
Tags: discuss
Published: 2022-02-20 15:21:10

Acronym trees. How do they work as hashes and as not hashes but hierarchies most like hidden Markov probabilities? But also not. Looking for a lively discussion when I can return soon I gotta work out to free my mind on this subject. Also Monte Carlo infallibility what's that about? How are the two related and why or why not and/or both?
I made a Next Js Project, Which helps you remember friends birthdays. 😁 
Tags: nextjs, opensource, showdev, webdev
Published: 2022-02-20 15:17:53

Hey guys, So I have been working on this Next Js project for 20 days now.

## SLAX

Yup, the name of the project is Slax 😎. This website will make your life easy, just add all the birthdays or any date which repeats every year and forget about it. You will receive an email on all your devices.

You can check out the live demo [here](http://slax.studio), or the GitHub [repo](https://github.com/Mazahir26/Slax).

**History**

I would like to tell you why I created this project, I wanted to step into web development and and the first thing which comes on my mind is Next Js. it was popular and Full-Stack kinda thing.
I decided to learn it, and I like to learn from creating projects. My initial idea for the project was to create a event management app but that got to complex. so I Settled for a simple website named slax which just does one thing reminds you on your friends and family special day.  

In the process I learnt a lot about Next js, mongo db, Next Auth, SMTP and con jobs.😊 

## The Ending

I ended up buying a domain for it as well😉, Anyways you can fork the project learn, add more features, make your own version out of it. Possibilities are endless.

**Thank You** 
see you around.👋
Glances webui with pipx
Tags: python
Published: 2022-02-20 15:17:22

---
canonical_url: https://waylonwalker.com/til/pipx-w/
published: true
tags:
- python
series: til
title: Glances webui with pipx
---

Glances has a pretty incredible webui to view system processes and information like htop, or task manager for windows.

The nice thing about the webui is that it can be accessed from a remote system. This would be super nice on something like a raspberry pi, or a vm running in the cloud.  Its also less intimidating and easier to search if you are not a terminal junky.

## install

You will need to install glances to use the glances webui.  We can still use
`pipx` to manage our virtual environment for us so that we do not need to do so
manually or run the risk of globally installed package dependency hell.

``` bash
pipx install glances pipx inject glances "glances[web]"
```

You will be presented with this success message.

``` bash
  injected package glances into venv glances
done! ✨ 🌟 ✨
```

## running the webui

Now that you have glances installed you can run it with the `-w` flag to run the webui.

``` bash
glances -w
```

This will present you with the following success message.

``` bash
Glances Web User Interface started on http://0.0.0.0:61208/
```

## Open it in your browser

Now that its running you can open your web browser to `localhost:61208` and be presented with the glances webui.

![running the glances webui on my system](https://images.waylonwalker.com/glances-w.png)

## Links

* [pipx](https://pypa.github.io/pipx/)
* [website](https://nicolargo.github.io/glances/)
* [docs](https://glances.readthedocs.io/en/latest/index.html)
* [github](https://github.com/nicolargo/glances)
Linking to a heading in the same page in Hugo
Tags: hugo, html, markdown
Published: 2022-02-20 20:11:06

---
title: Linking to a heading in the same page in Hugo
published: true
date: 2022-02-20 14:58:24 UTC
tags: hugo, html, markdown
canonical_url: https://www.preciouschicken.com/blog/posts/hugo-link-same-page/
---

Linking to another page in markdown in [Hugo](https://gohugo.io/) is easy: i.e. `[Auntie Beeb](https://www.bbc.co.uk/)` renders as [Auntie Beeb](https://www.bbc.co.uk/) - but when you want a link to a heading in the same page I can never remember, so this is a quick aide-memoire:

## HTML

In HTML a [relative link to an element in the same page](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page) looks like:

```html
<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">
  Jump to the heading below
</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>
```

## Hugo markdown

In Hugo to achieve the same effect:

```markdown
<!-- <a> element links to the section below -->
[Jump to the heading below](#section-further-down)

<!-- Heading to link to -->
## Section further down
```
How to setup a postgres and pgadmin to be used at development and testing of a application using docker-compose?
Tags: postgres, pgadmin, docker, compose
Published: 2022-02-20 14:56:44

---
title: How to setup a postgres and pgadmin to be used at development and testing of a application using docker-compose?
published: true
description: 
tags: postgres, pgadmin, docker, compose
//cover_image: https://direct_url_to_image.jpg
---

Using docker compose we can achieve this. In the following docker-compose code we are binding the local folder to the folder in the docker for data persistence.

Copy the code to a file named `docker-compose.yml` and run the command `docker-compose -f docker-compose.yml up`

```
version: "3.5"

services:
  postgres:
    container_name: postgres_container
    image: postgres
    environment:
      POSTGRES_USER: ${POSTGRES_USER:-postgres}
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-changeme}
      POSTGRES_DB: ${POSTGRES_DB}
      PGDATA: /data/postgres
    volumes:
      - ./db_data:/data/postgres
    ports:
      - "5432:5432"
    networks:
      - postgres
    restart: unless-stopped

  pgadmin:
    container_name: pgadmin_container
    image: dpage/pgadmin4
    environment:
      PGADMIN_DEFAULT_EMAIL: ${PGADMIN_DEFAULT_EMAIL:-pgadmin4@pgadmin.org}
      PGADMIN_DEFAULT_PASSWORD: ${PGADMIN_DEFAULT_PASSWORD:-admin}
      PGADMIN_CONFIG_SERVER_MODE: "False"
    volumes:
      # The local folder owner and group must be set to 5050
      # for the volume to work. Otherwise pgadmin is not able to
      # write to the local folder
      # sudo chown -R 5050:5050 pgadmin_data
      - ./pgadmin_data:/var/lib/pgadmin
    ports:
      - "${PGADMIN_PORT:-5050}:80"
    networks:
      - postgres
    restart: unless-stopped

networks:
  postgres:
    driver: bridge
```
How to create a qrcode generator using python
Tags: showdev, productivity, python, webdev
Published: 2022-02-20 14:46:03

Hello friends i created a qrcode generator.So now i share you how to generate a qrcode.It is super simple and awesome you can take my code in my github account-https://github.com/sripadhs/Python-qrcode-generator

Give me a star in github
Understanding Bind, Call and Apply in Javascript
Tags: javascript
Published: 2022-02-20 14:40:13


ES6 introduces the new methods for objects, bind, call and apply, Here a simple example to explain them.

```js
    let car = {
        name: 'Ford',
        getName: function(){
            return this.name;
        }
    };
    let fullName = car.getName();
    fullName;
    // Ford
```

## Bind

Bind create a new copy of the function, It accept a value as argument, let's see example:

```js
    let car = {
        name: 'Ford',
        getName: function(){
            return this.name;
        }
    };
    let fullName = car.getName.bind(car);
    fullName();
```

In this example, we pass object car as argument to the bind method in the invocation of the getName method. this bind method create a new copy of the original getName method and sets this keyword from object car.

Here another example:

```js
    let car = {
        name: 'Ford',
    };
    function getName(){
        return this.name;
    }
    let fullName = getName.bind(car);
    fullName();
```

## Call

Call has similarity with bind, with some differences :

- Call doesn't create a new copy of the function, it just call the function with the given arguments
- Call immediately invoke the function
- Call accept arguments

```js
   let car = {
       name: 'Ford',
       getName: function(){
           return this.name;
       }
   };

   let firstCar = {name:'Honda'};
   let secondCar = {name:'Toyota'};

   car.getName.call(firstCar);
   car.getName.call(secondCar);

```

Here another example, see how we can pass arguments to the call method:

```js
    let car = {
        name: 'Ford',
        getName: function(transmission){
            return `${this.name} has ${this.horsePower} horse power and is a ${this.type} and transmission is ${transmission}`;
        }
    };

    let firstCar = {name:'Honda', horsePower:'200', type:'SUV'};
    let secondCar = {name:'Toyota', horsePower:'100', type:'Sedan'};
    car.getName.call(firstCar, 'manual');
    car.getName.call(secondCar,'automatic');
```

## Apply

Is similar to call, but it accept an array of arguments instead of a list of arguments.

```js
  let car = {
        name: 'Ford',
        getName: function(transmission, color){
            return `${this.name} has ${this.horsePower} horse power and is a ${this.type} and transmission is ${transmission} and color is ${color}`;
        }
    };

    let firstCar = {name:'Honda', horsePower:'200', type:'SUV'};
    let secondCar = {name:'Toyota', horsePower:'100', type:'Sedan'};
    car.getName.apply(firstCar, ['manual', 'red']);
    car.getName.apply(secondCar, ['automatic', 'blue']);

```
Laravel 8 - "Cruddy by Design" A Controller Structure for Beginners 🔥🔥🔥
Tags: laravel, php, beginners, crud
Published: 2022-02-20 13:56:01

One of the easiest to understand Controller structures in Laravel is "**Cruddy by Design**" by Adam Wathan.

After the conference he published a new **[GitHub repo](https://github.com/adamwathan/laracon2017)** that contains the demo app he refactored on stage. The 4 main tips to improve your code come as **[PRs](https://github.com/adamwathan/laracon2017/pull/1)** on the repo with an full description on why the change is valuable. Very cool stuff.

[Link](https://www.youtube.com/watch?v=MF0jFKvS4SI&list=PLFj_ZOEtqR3paNWePc42LiJTmYGxFR4lw&index=1) of the video.

I highly **recommend this method specially for beginners** when you implement this and are working with a team, by looking at the logic of things in a CRUD way you can easily know where to find the code you need looking simply at the routes or controllers.

> There's no real cost to having 10x as many controllers, given you can organise them and standardise naming. This approach has allowed several applications to remain easy to understand and manage as complexity grows; the http interface feels no more complex every time You add a new controller. If you were a developer introduced to a new codebase and you knew it used this approach, you would immediately know what "`PodcastTagsController`" does and how to use it without even looking in it. You could open routes/web.php in my application and immediately understand the majority of how people interact with the application over http.
Finding Remote Job/Internship
Tags: react, findingjobs, intern, javascript
Published: 2022-02-20 13:45:42

Hello !!! I am a web developer and have great experience in front-end development also comfort in back-end development. I create user-friendly, responsive websites and maintain all of the following components such as security, performance, user-friendly, and properly maintainable code.

- I am currently studying Computer Technology at Narsingdi Polytechnic Institute, Bangladesh. I can work with HTML5, CSS3, Bootstrap, Tailwind, JavaScript, ES6, React JS, React Router Dom, API, Material-UI, Node-JS, Express-JS, MongoDB, Firebase for Authentication etc. and also my one year Has long working experience.
My tools include GitHub, VS code, Chrome Dave tool, Microsoft Edge, Heroku, Netlify, figma.

-Currently I need an urgent job / internship to enhance my work experience. Below I gave my resume. If you need a react developer, I hope you will consider. Thanks.

[My Resume Link](https://drive.google.com/file/d/1STwv1A5wx4Sj7Ve_hdxvOhMwMh1Od2Md/view?usp=sharing)
Creating our UI 
Published: 2022-02-20 13:44:55

Let us  write down the two components.
- AddFruit - for adding a fruit name along with its count.It also has a validation logic before adding the fruit.
- FruitList - to display the fruits.

(I am using Bootstrap(currently version 5) as the CSS framework in order to lessen our styling efforts.It is completely optional.)

### public/index.html (<small>For adding bootstrap</small>)
![Bootstrap linking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp0l6w0avvfv7m8pcso8.png)

Next, create a folder named `components` inside the `src` and add two files inside it.
### AddFruit.js
``` 
import React, {useState} from 'react';

const AddFruit = ()=>{
    const [fruitName, setFruitName] = useState('');
    const [fruitCount, setFruitCount] = useState(0);
    const [error, setError] = useState(null);

    const addFruitHandler= ()=>{
        setError(null);
        if(fruitName.length > 0 && Number.isInteger(fruitCount) && fruitCount > 0){
            console.log(fruitName, fruitCount);
        }
        else{
            setError('Please enter a fruit name and count should be more than 0');
        }
    }

    return (
        <div>
            <p className='lead'>Add Fruit Detail</p>
            <input className='form-control my-3' placeholder='Fruit Name' type="text" onChange={(e)=> setFruitName(e.target.value)} value={fruitName} />
            <input className='form-control mb-3' placeholder='Number of fruit' type="number" onChange={(e)=> setFruitCount(parseInt(e.target.value))} value={fruitCount} />
            <button type="button" className="btn btn-primary" onClick={addFruitHandler}>Add fruit</button><br/>
            <p className='text-danger'>{error}</p>
        </div>
    )
}

export default AddFruit;
```

### FruitList.js
```
import React from 'react';

const FruitList = ()=>{
    const  fruits = [
        {name: 'Mango', count: 2},
        {name: 'Gooseberries', count: 3},
    ];

    return (
        <div>
            <h1 className="display-4">Fruits</h1>
            <ul class="list-group list-group-flush w-25">
            {
                fruits.map((fruit, index)=> <li className="list-group-item" key={index}>{fruit.name}{' '}
                <span class="badge bg-info rounded-pill mr-3">{fruit.count}</span>
                </li>)
            }
            {fruits.length === 0 && <p className='lead'>No fruits added yet!</p>}
            </ul>
        </div>
    )
}

export default FruitList;
```

### App.js 
we imported the two files and added them in our App.js.

![Added components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnfuzhk640030oyxz9lx.png)

For now, in AddFruit.js file we are _console.log-ing_ our fruit details .Later we will be _sending_ it to our reducer.
And in FruitList, we are using a hardcoded data, later we will be _provided_ from our state.

So our UI will look like this,

![Fruit logger ui](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9n51awyt89tauldnkhd.png)

In the next blog, we will be writing the reducer code and hooking it up with the store and so it can be accessed by the components.
Setting up and using the reduxjs toolkit (RTK)
Tags: javascript, react
Published: 2022-02-20 13:44:22


This is the first blog in series of blogs where we will be using the Reduxjs Toolkit library(RTK) to build an application to add fruits with their count.

### Goal:
The design of the application is that we will be adding a fruit with its count and the fruit will be added in the fruit list.The adding of fruit and displaying the fruits list will be in two separate components so we have to use the redux for our app wide state management.

#### The final application can be found here:
https://fruits-logger-redux-toolkit.netlify.app/

#### The complete code can be found here:
https://github.com/abhidatta0/fruits-logger-redux-toolkit

## Let's start
First, we will be using the below command to generate a react boilerplate (without the RTK)
 ```
npx create-react-app fruitslogger
```

Then , install the RTK and react-redux library
```
npm install @reduxjs/toolkit react-redux
```

<strong>@reduxjs/toolkit</strong>
 is for providing the core redux functionality and 

<strong>react-redux</strong>
 is for integrating our react code with redux. 

Now,create a file `store.js` in root folder of our project and add the code for a simple store and hook it up to our App.js file.

![Basic store code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhcsogts2fruhat3bg3c.png)

![Ap.js redux integration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utw79wa1xw1y2up3shab.png)

If we `npm start` and run in the browser , we will be getting an console error `Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.`.
So let's fix that issue but before that let us build the UI.
1288. Remove Covered Intervals
Tags: cpp, algorithms, programming, 100daysofcode
Published: 2022-02-20 13:42:19

# Description

Given an array `intervals` where `intervals[i] = [li, ri]` represent the interval `[li, ri)`, remove all intervals that are covered by another interval in the list.

The interval `[a, b)` is covered by the interval `[c, d)` if and only if `c <= a` and `b <= d`.

Return *the number of remaining intervals*.

## Example 1:

```
Input: intervals = [[1,4],[3,6],[2,8]]
Output: 2
Explanation: Interval [3,6] is covered by [2,8], therefore it is removed.
```

## Example 2:

```
Input: intervals = [[1,4],[2,3]]
Output: 1
```

## Constraints:

- `1 <= intervals.length <= 1000`
- `intervals[i].length == 2`
- `0 <= li <= ri <= 105`
- All the given intervals are **unique**.

---

# Solutions

## Solution 1

### Intuition



1. ascending sort by the start of interval, if start are equal then descending sort by the end of interval;
2. store the biggest end point, and update it
3. if end point smaller than the biggest end point, this interval is covered.

### Code

```cpp
class Solution {
public:
    static bool compare(vector<int>& a, vector<int>& b) {
        return a[0] == b[0] ? a[1] > b[1] : a[0] < b[0];
    }
    int removeCoveredIntervals(vector<vector<int>>& intervals) {
        if (intervals.size() == 1) {
            return 1;
        }
        sort(intervals.begin(), intervals.end(), compare);
        int end = intervals[0][1];
        int count = intervals.size();
        for (int i = 1; i < intervals.size(); i++) {
            if (intervals[i][1] <= end) {
                count--;
            } else {
                end = intervals[i][1];
            }
        }
        return count;
    }
};
```

### Complexity

- Time: O(nLogn)
- Space: O(1)
0.1 + 0.2 != 0.3?
Tags: programming, floatingpoint, double
Published: 2022-02-20 13:39:27

Can you guess the output of the following code?

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fg8fii6ol064enjkgc1a.png)

If you thought the output was "Equal", you're not alone.

We know computers store data in 0s and 1s (binary format). While integers can be accurately converted to binary format, when it comes to floating point numbers  this conversion is not quite accurate. Numbers such as 1/2, 1/4, 1/8 can be expressed precisely because the denominators use multiple of 2, while other floating point numbers can't be expressed accurately. (For the simplicity of this post, we will not get into the conversion of floating point numbers to binary)

Since the exact value of such floating point numbers cannot be determined, the processor stores a value close to the actual number in binary format. For this reason we do not get the expected output for any arithmetic operations performed on such floating point numbers.

![Explanation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d59yulwbrlspr32csrt3.png)