teleren/devto huggingface dataset:
Difference Between 2 Colours Using Python
Tags: datascience, python
Published: 2020-09-12 13:13:49

---
title: Difference Between 2 Colours Using Python
published: true
description: 
tags: datascience, python
---

Recently, I needed to compare a number of colours to get the 2 most identical colours. This problem at the facade looks like a cakewalk, even for beginners, but is a bit involved.
<be>

>A naive implementation is to calculate to Euclidean distance (as shown below) between the RGB values of the 2 colours.

`d=sqrt((x1−x2)^2 + (y1−y2)^2 + (z1−z2)^2)`
<br>

The 2 colours that have the lowest Euclidean Distance are then selected. But, there is a serious flaw in this assumption. Although RGB values are a convenient way to represent colours in computers, we humans perceive colours in a different way from how colours are represented in the RGB colour space. What looks like identical colours to us, might give us a Euclidean distance that is greater than the Euclidean distance of colours that look different to us when comparing in RGB colour space.

<br>

## So, what to do now?

Delta-E distance metric comes to our rescue. It uses the CIE Lab colour space which approximates how we perceive colours, although it's also not fully accurate. Once we represent the colour in the CIE colour space, we can calculate the Delta-E distance metric using Euclidean Distance. Ever since its release in 1976, it has been modified 2 times to cope with shortcomings of the previous versions. The diagram below shows that by shifting along the x and y-axis we get different shades of the same colour.
*CIE76 -> CIE94 -> CIE2000*

<br>
![alt text](http://hanzratech.in/figures/color-space.gif)
<br>

For, this tutorial we will use CIE2000. If you are interested in the actual mathematics, refer to the Wikipedia page. It’s is pretty easy to write your own code to compare the 2 colours, but we’ll not try to reinvent the wheel. Python provides a high utility package `colormath` to convert between different colorspaces, delta E comparison, density to spectral operation etc.

Using `colormath`, we just don’t need to put in much effort to find the Delta-E metric.

The module `colormath` can be installed using pip -

```bash
sudo apt-get install python-pip
sudo pip install colormath
```

Now, let’s write the actual python code to find the difference between 2 colours.

```python
from colormath.color_objects import sRGBColor, LabColor
from colormath.color_conversions import convert_color
from colormath.color_diff import delta_e_cie2000

# Red Color
color1_rgb = sRGBColor(1.0, 0.0, 0.0);

# Blue Color
color2_rgb = sRGBColor(0.0, 0.0, 1.0);

# Convert from RGB to Lab Color Space
color1_lab = convert_color(color1_rgb, LabColor);

# Convert from RGB to Lab Color Space
color2_lab = convert_color(color2_rgb, LabColor);

# Find the color difference
delta_e = delta_e_cie2000(color1_lab, color2_lab);

print "The difference between the 2 color = ", delta_e
```

### References
1. [Stack Overflow Thread](https://stackoverflow.com/questions/9018016/how-to-compare-two-colors-for-similarity-difference)
2. [PyPi colormath Package](https://pypi.org/project/colormath/)
How to install Emmet with Vim in Termux
Tags: tutorial, termux, vim, emmet
Published: 2020-09-12 13:39:11

Termux is a terminal emulator and Linux environment app for Android devices which can convert your phone, or tablet, into a rather powerful web development machine.

Termux can be used for many other purposes, including data processing and hacking. You can read more about Termux on the [official website.](https://termux.com)

Vim is the much-loved text editor for Linux machines. If you do not know Vim [read this tutorial.](https://www.linux.com/training-tutorials/vim-101-beginners-guide-vim/)

Emmet is a text-editor-plugin which greatly improves the HTML/CSS workflow. You can find the docs [here.](https://docs.emmet.io/)

In this tutorial, I'll show you how you can install Emmet along with Vim in Termux.

Firstly, you need to install Termux from the Google Play store.

After installation, open Termux and type:

```bash
$ apt update && apt upgrade
```
Then install Vim.

```bash
$ apt install vim
```
After Vim is installed, create a folder in the current home directory by typing
```bash
$ mkdir .vim
```
Navigate to that directory.

```bash
$ cd .vim
```
Create another folder called 'plugged' here.
```bash
$ mkdir plugged
```
Cd back into the home directory.
```bash
$ cd ..
``` 
There are several ways to install the 'emmet-matt' plugin. In this tutorial, I'm going to use a Vim plugin manager called vim-plug. We need to install that by typing
```bash
$ curl -fLo ~/.vim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
```
After the vim-plug installation, make a .vimrc file.
```bash
$ vim .vimrc
```
Vim will open a new file for editing.

Press 'i' on the keyboard to toggle input mode in Vim. 

Type
```
call plug#begin('~/.vim/plugged')
Plug 'mattn/emmet-vim'
call plug#end()
```

and press 'Esc'.

Then type `:wq` to save changes.

For installing the emmet-vim plugin, we need to install git. This is a crucial step. Without git, the plugin installation will fail and Vim will show an error.

Type 
```bash
$ pkg install git
```

After the git installation, Type `$ vim` to open Vim and type
 ```
:PlugInstall
```
If everything goes well, we'll now have the Emmet plugin installed.

Emmet manual says to type `html:5` and use the key combination Ctrl+y+, (the comma is important). But on my phone, I just typed `!`and the key combination; and Voila! I got the starter HTML boilerplate.
```

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

```

Enjoy coding! 

___ 

**Vinod Mathew Sebastian** is a Full Stack Developer
👨‍💻 QuantumAlert - A Javascript Alert Library 💙
Tags: webdev, html, css, javascript
Published: 2020-09-12 13:34:18

                          " QuantumAlert "

A Powerful , Elegant and fully customizable "alert" library using JavaScript that replaces that boring style of alert.

Documentation:- https://quantumalert.cosmogic.com/

This is the first version of QuantumAlert
Soon we will be coming up with { QuantumAlert v2 }.Some of the features are: -

>> More option of alert animation.
>> Custom Background color
>> Custom Fonts
>> Custom Logo
>> T&C Alert Box

YouTube Video Link: -
This is the Go through video......
https://lnkd.in/epBJq6w

We are open for collaboration.
Collaborate with us:
https://lnkd.in/eVQf8Bg
Ruby Jard - Just Another Ruby Debugger
Tags: ruby
Published: 2020-09-12 13:28:13

Hi all, I would like to show you guys a Ruby debugger, named Ruby Jard, that I'm working on recently. Ruby Jard provides a rich Terminal UI that visualizes everything your need, navigates your program with pleasure, stops at matter places only, reduces manual and mental efforts. You can now focus on real debugging.

Ruby Jard wraps around Byebug, and Pry and provides a series of features and enhancements. Some significant features:
- Rich intuitive Terminal UI, runs directly in terminal emulators.
- Navigate with pleasure. No more next, next, next, next, and have no idea what you are doing. 
- Debug filter. Prevent your program from stepping into weird places. You can specify which layer (application only, gems, standard libs, etc.) you are interested in, and can combine with the included/excluded list.
- Visualize everything you need, grab important things at one glance. A totally new variable inspection that helps you comprehend any variable data shape, and peek at its data.
- Powerful REPL console
- Flexible customization

It is still in Beta version. So, it would be great to hear the feedback so that I can improve it in the future. 

You can see it in action at https://rubyjard.org/
Or watch the following video (https://asciinema.org/a/358874)

[![Ruby Jard Demo](https://dev-to-uploads.s3.amazonaws.com/i/v2ug7x6gwhct8jbtdb05.png)](https://asciinema.org/a/358874)
(Click to view on asciinema)

Some screenshots:
![Ruby Jard Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/8xdxe0s27asidkbj2t0d.png)
![Ruby Jard Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/nlbgahb5749sgyay11ff.png)
![Ruby Jard Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/yz9qyq36ub3uhw9sk9c7.png)
![Debug Rails on 2K screen](https://dev-to-uploads.s3.amazonaws.com/i/tjnl8s0nshhhgfdvbyi2.png)
How to backup MongoDB every night in NodeJS
Tags: node, webdev, tutorial, javascript
Published: 2020-09-12 13:28:09

Many reasons might cause data to be lost or the database to become corrupted. It's crucial to keep the data available and safe you need to keep at least one copy of your database.

I'll explain how to schedule a task to backup your everyday data at 11:59 pm, and how to restore backup data from the command line.

If you have MongoDB already installed you can use a utility named mongodump, which can export data from your database to a local file system.

```javascript
 mongodump --db=yourDatabaseName --archive=pathToStoreBackup/ --gzip
```
`--db` argument for databse name
`--archive` argument for path of output
`--gzip` argument will make the output file be compressed with gzip

> Note: for more options like --username, --password, --host and --port please visit https://docs.mongodb.com/manual/tutorial/backup-and-restore-tools/


Now we need to write a code to execute this command

```javascript
spawn = require('child_process').spawn
let backupProcess = spawn('mongodump', [
    '--db=restaurantDB',
    '--archive=.',
    '--gzip'
    ]);

backupProcess.on('exit', (code, signal) => {
    if(code) 
        console.log('Backup process exited with code ', code);
    else if (signal)
        console.error('Backup process was killed with singal ', signal);
    else 
        console.log('Successfully backedup the database')
});
```

Now we need to install `node-cron` package to this daily task

```javascript
npm install node-cron --save
```

now we need to write a code for running the task every day at 11:59 pm

```javascript
const cron = require('node-cron')
let task = cron.schedule('59 23 * * *', () => {
	cosnole.log('One minute before midnight!');
});
```

> Note: if the argument "59 23 * * *" is not clear please visit https://www.npmjs.com/package/node-cron for more details

Now we need to put the two pieces together

```javascript
const cron = require('node-cron'), spawn = require('child_process').spawn;

let dbBackupTask = cron.schedule('59 23 * * *', () => {
    let backupProcess = spawn('mongodump', [
        '--db=restaurantDB',
        '--archive=./db/backup/',
        '--gzip'
      ]);

    backupProcess.on('exit', (code, signal) => {
        if(code) 
            console.log('Backup process exited with code ', code);
        else if (signal)
            console.error('Backup process was killed with singal ', signal);
        else 
            console.log('Successfully backedup the database')
    });
});
```

And now in case, you wanted to restore the backup data execute this command

```javascript
mongorestore --gzip --archive=backupLockation/
```
##Conclusion
I hope you found this useful! if you have any questions or suggestions please leave a message in the comment section
Rex State - a handy utility to convert your hooks into shared states
Tags: showdev, react, reactnative
Published: 2020-09-12 13:14:47

# Introducing [Rex State](https://github.com/react-native-toolkit/rex-state) v1.0 

I initially built rex-state as a state management library, however, since it was using the Context API it wasn't very efficient with handling re-renders. 

But then its another feature became more prominent. It can easily convert any hook into a shared state!

Focusing on this functionality, Today I'm releasing Rex State 1.0. This tool is easy to use and will work with your existing hooks.

## Usage
Add rex-state to your project

```sh
yarn add rex-state

# or

npm i rex-state
```

Consider you have the following counter hook ﹣

```jsx
const useCounterHook = (initialCount) => {
  const [count, setCount] = useState(initialCount || 0);

  const increaseCount = () => setCount(count + 1);
  const decreaseCount = () => setCount(count - 1);

  return {
    count,
    increaseCount,
    decreaseCount
  };
};
```

You can use rex-state to create a provider and a shared hook using the following code ﹣

```jsx
import { createRexStore } from "rex-state";

const { 
  useStore: useCounter, 
  RexProvider: CountProvider 
} = createRexStore(useCounterHook);
```

Wrap your application inside the `CountProvider` ﹣

```jsx
export default function App() {
  // Starting off with an initial count of 10
  return (
    <CountProvider value={10}>
      <CountDisplay />
      <Controls />
    </CountProvider>
  );
}
```

Now you can use `useCounter` hook inside both `<CountDisplay/>` & `<Controls/>` components. When the count changes in the `<Controls/>` component, it will cause the `<CountProvider/>` to re-render & will also update the `<CountDisplay/>` component.

This is based on the React.Context API. I have written a detailed page on its [performance](https://rex-state.netlify.app/?path=/story/intro-performance--page) & when to use it in your application.

Following is a working codesandbox of the counter app ﹣

{% codesandbox rex-counter-2m4zy initialpath=/src/App.js %}

Read about it detail on [Github](https://github.com/react-native-toolkit/rex-state)

Share your thoughts about using this library. I'm open to feedbacks & ideas ✌🏽
OBJECT ORIENTED PROGRAMMING PART, ⚁
Tags: oop, beginners, computerscience, codenewbie
Published: 2020-09-12 13:00:28

Hey Everyone, Sharing the Remaining  Part of Object Oriented Programming Fundamentals,

This Contains The Last 2 ⚁ Pillars

ABSTRACTION - This refers to providing only essential information to the outside world and hiding their background details.

For Example - Music Player, Video Games

ENCAPSULATION - It is a process of binding methods and data fields into a Single Unit.
This restricts access to certain properties or component.

Best Example - Class

I Hope you've enjoyed this post on Object Oriented Programming Fundamentals.

Thanks for stopping 🛑 by i hope you learned something from this.
How to make a Lean Canvas with MarkDown
Tags: markdown, lean
Published: 2020-09-11 00:26:10

I like to write lean canvases as idea notes. It is good to organize information about a new product or new something.
I know the best way to make the lean canvas is hand-writing with A3 paper. However, sometimes I want it on digital tools.
Besides, I love markdown and crafting something by writing markdown, such as the "marp".
(marp is markdown presentation maker).

# Meet mdCanvas

[mdCanvas](https://github.com/jerik/mdCanvas) is a very nice naming. I instantly understand this is it.


## how to confirm it works or not.
```
git clone https://github.com/jerik/mdCanvas.git
cd mdCanvas
```
1. You can find a HTML file named `mdCanvas.html`.
2. Open it by **FireFox** (current version only support this browser).
3. In case you can open with an error, no problem. But if you face the error, please move to the next step.

### how to stop CORS error.

Long story short, CORS is one of the security errors. Turning it off includes potential risk.

1. Open the firefox tab. Then input `about:config` in URL text box.
2. On the `about:config`, There is search box. Let's input string `security.fileuri.strict_origin_policy`.
3. Change the value to `false`.

## how to make your markdown file

1. Make a new markdown file by copying **mdCanvas.md**
2. Open mdCanbvas.html with query parameter, `md=filename`

```
cp mdCanvas.md project.md
```
open `/mdCanvas.html?md=project`


have fun!
Submission for GitHub Actions x Dev Hackathon
Tags: actionshackathon, python, googlesearch, github
Published: 2020-09-12 12:56:47


My Workflow:

The name of my Github Action is Python internet search. It is a simple python program which can be used to return search results from the Google search engine, based on a particular query.

Submission Category: Wacky Wildcards

Link to Code: 
{% github https://github.com/Anugya-Gogoi/Internet-Search- %}
WEB DESIGN: what’s a good fit if you DONT LIKE STYLING? 
Tags: html, python, javascript
Published: 2020-09-12 12:38:32

I’m running into, I really don’t like styling.
One container is this, another div is that..... oops, it dosnt add up right. OH WAIT, not that button radius or color, ACTUALLY, I do like that color.

What is a more precise part of web design? Php, Python, JavaScript, Kotlin, Java, ????
I like “seeing” what I’m doing, BUT, if it’s setup right with how you do things, then it’s ok when I can’t see it. 
Watching videos, I like the concept of how Kotlin is used, Swift and also I do like python. I like the possibilities. But I don’t like styling. 
Which is best to be “more precise” to what you do?
Flexbox grid
Tags: html, css, flexbox
Published: 2020-09-12 12:37:23

Hi people :)
I'am sorry, my English is bad..
This is my first post on dev.to
Please don't throw stones at me :)

I had a task to make a CSS grid.

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

Of course you can do it on css grid and I did it on them.
But I can't find easy ways! :)
And so I made it on flexbox..

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

I also needed to implement margins in it "margin: 1px".
To calculate the indents, I used the css function "clamp()".

Here's what came of it
(https://codepen.io/brendan8c/pen/oNxqKNY?editors=1100)
What do you think about this?
Flutter Web using GitHub Actions
Tags: actionshackathon
Published: 2020-09-12 12:18:47

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)


### My Workflow
The Name of the GitHub Action is flutter_web.yml. I had tried to use the GitHub Action to create the Web Project using the Flutter Beta Channel and published it using the GitHub Pages

### Submission Category: 

1. Must create an Token by going to the Settings using GitHub, for the GitHub Pages Deployment.
2. Add the Token created in the Settings page of the repo.


### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)
The Link of the Repo is [link](https://github.com/irahulcse/GitHub-Actions-Hackathon)


### Additional Resources / Info

I had been using the workflow in my various projects. The Main Project where I had put all the application using this workflow is [this](https://github.com/irahulcse/A-Complete-Guide-To-Flutter).
Real Time Markdown Preview (35 lines of code)!!
Tags: ruby
Published: 2020-09-12 12:04:08

As The title Said, just 35 lines of code i made a markdown real time preview with sinatra and jquery and Github markdown Gem, this is the source code as screenshots.

[source code github](https://github.com/almokhtarbr/ruby-scripts/blob/master/markdown/markdown.rb)

![Screenshot 2020-09-12 at 12.45.55](https://dev-to-uploads.s3.amazonaws.com/i/m6uzfjtzqnskvcw0j2wg.png)
 
![Screenshot 2020-09-12 at 12.46.32](https://dev-to-uploads.s3.amazonaws.com/i/at91y4ylnlojdq9f13pu.png)

![Screenshot 2020-09-12 at 12.57.46](https://dev-to-uploads.s3.amazonaws.com/i/ebij1f0jvf8u48vw171o.png)
MySQL Command Notes
Tags: sql
Published: 2020-09-12 12:01:12

To select,

```
select * from app_item WHERE name="great";
```

To create,

```
INSERT INTO app_item (restaurant_memo, restaurant_name, created_by_id, updated_by_id, image) VALUES ("great", "great", 3, 3, "images/restaurant_posts/peperonchino.jpg");
```

To delete,

```
DELETE FROM app_item WHERE id = 24;
```
Daily Developer Jokes - Saturday, Sep 12, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-09-12 12:00:16

---
title: "Daily Developer Jokes - Saturday, Sep 12, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Sep%2012%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12598468df3.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Who used the internet before it was cool?

___A:___ Httpsters
 -->
Singleton Tasarım Deseni
Published: 2021-04-26 20:44:29

---
title: Singleton Tasarım Deseni
published: true
date: 2020-09-12 12:00:00 UTC
tags: 
canonical_url: http://artuncolak.com/blog/singleton-tasarim-deseni
cover_image: https://artuncolak.com/media/singleton-tasarim-deseni/main.jpg
---

Singleton tasarım deseni en basit tasarım desenlerinden bir tanesidir. Singleton tasarım deseni bir Classtan sadece 1 tane nesne oluşturulabilmesini sağlamaktadır.

Singleton bir Classtan direk bir instance oluşturulamaz Classtaki static bir method çağrılır ve bu method eğer Classın bir instance ı oluşturulmadıysa yeni bir instance oluşturarak bunu geri döndürür ve bundan sonra kullanıcı bu methodu her çağırdığında ilk başta oluşturulan instance geri döndürülür.

**SingletonClass.java**

```java
public class SingletonClass {
    private static SingletonClass instance;
    public int number = 0;

    // Dışarıdan yeni bir instance oluşturulamaması için Constructorı private yaptık
    private SingletonClass() {}

    public static SingletonClass getInstance() {
        if (instance == null) {
            instance = new SingletonClass();
        }

        return instance;
    }
}
```

**App.java**

```java
public class App {
    public static void main(String[] args) {
        SingletonClass instance1 = SingletonClass.getInstance();
        SingletonClass instance2 = SingletonClass.getInstance();

        System.out.println(instance1.number);
        instance2.number = 10;
        System.out.println(instance1.number);
    }
}
```

**Output**

```
0
10
```

Çıktıdada görüldüğü gibi instance1 ve instance2 adında 2 tane nesne oluştursakta bunlar aslında aynı instance a sahipler.

Umarım faydalı olmuştur. Okuduğunuz için teşekkürler.