teleren/devto huggingface dataset:
How to create a monochromatic color palette for your project?
Published: 2022-09-07 05:14:30

Let's see how to create a color palette step by step for a UI/UX design project.

There are several ways to complete the task. To make a color palette you need software, but no matter what software you are using... I am using Figma to design the user interface, so I will show it on Figma.

Let's get started
**Step 1:** Choose a base color and change the color mode from HEX to HSB. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/587si5ycxrnyys8k6apy.png)

Everyone knows about the HSB (H-Hue, S-Saturation, B-Brightness). When we want to increase our color intensity, then we should increase the saturation, and if you want to create a shade, decrease the brightness.


**Step 2:** Apply the color to the shape on your canvas or frame. You can use a circle or a rectangle as a shape.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmzcs3q8qeguluvk6qe0.png)

**Step 3:** Duplicate (Ctrl+D) the shape five times. So the total number of shapes is now 6. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jq9ik5be3qhvzuhzehug.png)

**Step 4:** Choose the shape near the base color and modify only the saturation or brightness to get two supportive dark shades of the base color. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8158rkkt0oa0jesvw9j.png)

I reduced the brightness from 95 to 75 and from 75 to 50 to make these two supportive dark shades of the base color.

**Step 5:** Now make two neutral colors by adding gray and white. I have changed the S and B to add gray and white to make 2 neutral colors. Have a look at the below image and compare the colors with the base color. You can see the changes in S and B.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hupda5a0sdpijbfmjlni.png)

If you think this is hard to understand for you, then no worries. You just drag your color pointer to the left to gray, and for the last one, just drag it to white. Then you will get two neutral colors, which are close to gray and white.

**Step 6:** Finally, add a dark tone to your color by adding more dark and gray or moving the color pointer to the dark and gray.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94naxhw95uqoaq3iyh40.png)

Hurrah! This is the color palette. As you see, this is a single color-based color palette called a Monochromatic color palette. You can design a complete interface by using this single color-based color palette. 

Let's see an example below...

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ftc8vtiqfyao1oezdm1y.png)

So, you can try now by following these instructions. 

You can follow me if you wanna see more articles like this. 
Follow me on
[Dribbble](https://dribbble.com/Hachib) | [Behance](https://www.behance.net/mdhachib02) | [LinkedIn](https://www.linkedin.com/in/md-hachibur-rahaman-5913a5139/) | [Instagram](instagram.com/hachib_design/)
useReducer in React
Tags: webdev, beginners, tutorial, react
Published: 2022-09-07 05:14:23

useReducer is basically an alternative to useState hook.
useReducer is used to manage the states of the application. The state reducer pattern enables us to properly manage our state’s updates based on criteria that the user provides

useReducer accepts **two arguments** :

 1. **Reducer**

 2. **Initial state**

And returns the following :

 1. **Current state**

 2. **Dispatch**

## Reducer

A Reducer is a pure function that takes in a current state and objects returning what the user did, called actions and returns a new state.
**Initial State:** As the name suggests, it is the value that the user has provided in the initial phase of the state
**Current state:** It represents the current state.
**Dispatch:** This is a function used to update the state by calling the action object.

## How to import useReducer:

To import the useReducer Hook we use the following code in the top level of the code

![](https://cdn-images-1.medium.com/max/2000/0*nZdYz8XYcC-MP67A.png)

## Using useReducer:

The syntax for using useReducer is given as follows :

![](https://cdn-images-1.medium.com/max/2000/0*75q0ct0n4HH1MYAv.png)

Here, we are trying to create a counter.
Here the **currentState** will be a variable that will keep a **record of the current count of the number.**
**Dispatch** will let us **change the state in response to interaction** i.e. when we click the button, an onClick event including the dispatch function will occur.

![](https://cdn-images-1.medium.com/max/2368/0*dgE3BzZvoZT2-BPN.png)

React will pass the current state and the action to your reducer function. Your reducer will calculate and return the next state. React will store that next state, render your component with it, and update the UI.
Here the reducer function takes in two arguments, state, and action. The **switch statement** is generally used, by convention, for carrying out the calculations and returning the next state.

![](https://cdn-images-1.medium.com/max/2000/0*hIWqhywvuTCqyZQI.png)

Here, we have used two cases : “**increment_number**” and “**decrement_number**” which adds 1 and subtracts 1 from the current state variable respectively and returns it.

Lastly, we define the **initial state of the counter**,

![](https://cdn-images-1.medium.com/max/2000/0*o6-X3aHioylZDXA7.png)

![](https://cdn-images-1.medium.com/max/2000/0*x2lBipXrKUR0mAil.png)

In the return function, we create **two button tags** where in the onClick eventHandler we **call the dispatch function **and then **specify the type**. “increment _number” for the increment button and “decrement_number for the decrement button.

You can find the entire working code in the following code sandbox link:
[https://codesandbox.io/s/use-reducer-tt2unh](https://codesandbox.io/s/use-reducer-tt2unh)
What's up with rfd!?
Tags: javascript, react, news, showdev
Published: 2022-09-07 05:02:19

> **TL;DR**
> - `@react-forked/dnd` found a new home and has moved to a new organization. You should install [`@hello-pangea/dnd`](https://github.com/hello-pangea/dnd) instead if you want new features and bug fixes.
> - The latest version now supports [react 18](https://github.com/hello-pangea/dnd/issues/293)! :tada:
> - We're welcoming [@Xhale1](https://github.com/Xhale1) as a new maintainer. _(We are now two on the team!)_

---

Hello to all of the `@react-forked/dnd` users :wave:,

As some of you might have noticed, it can be difficult to manage a complex open source project alone and it can have an impact on how long it takes to fix issues. Like for the issue with [react 18](https://github.com/hello-pangea/dnd/issues/293)! Again sorry to have kept you waiting for weeks without any answer. :disappointed:

To make sure it doesn't happen again and to help with all the work ahead of us on this project, we are welcoming a new maintainer [@Xhale1](https://github.com/Xhale1) :tada: Thanks to him we have a working version with [react 18](https://github.com/react-forked/dnd/issues/293). (I love the open source community :heart:)

We also plan in the future (sooner than later) to give second life to other un-maintained projects we like and want to keep alive. Some of those projects might not be react related. For this reason we'll rename and move the project to a new organization. This organization is named hello-pangea! If you want new features and bug fixes, you should plan to migrate to `@hello-pangea/dnd`. The migration will be as simple as doing a find and replace!

If you want to be a part of this new adventure let us know on discord :point_right: https://discord.gg/zKhPpmvCEv

Thank you for your support!
Sealed modifier for C#
Tags: csharp
Published: 2022-09-07 04:43:45

今天想記錄 `sealed` （密封）修飾詞，它的定義很簡單，當你將 `sealed` 應用到類別時，`sealed` 修飾詞會防止其他類別繼承該類別，該類別則可繼承其它非 `sealed` 的類別

例如 `Manager` 類別使用 `sealed` 修飾詞，`Manager` 類別可繼承 `Employee` 類別，`Employee` 類別不可繼承 `Manager`，當然，任何類別都不可繼承 `Manager`

```csharp
class Employee { }

sealed class Manager : Employee { }
```

所以使用 `sealed` 修飾詞的類別不會有子類別，也不適合作為父類別使用，該類別也不可為抽象類別，因為 `abstract` 類別提供可實作的方法或屬性，其他子類別必須繼承 `abstract` 類別進行實作，所以當你將 `sealed` 和 `abstract` 一起使用時會產生錯誤

![pic-007](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pktryd0mibbmsgm7vevk.png)

**上圖錯誤清楚表示抽象類型不可以是密封或是靜態**

`sealed` 也可以使用在可覆寫父類別中的虛擬方法或屬性，該類別允許其他類別繼承，但可防止他們覆寫特定的虛擬方法或屬性

```csharp
class X
{
	protected virtual void M1() { }
	protected virtual void M2() { }
}

class Y : X
{
	// sealed 可使用於可覆寫方法
	protected sealed override void M1() { }
	protected override void M2() { }
}

class Z : Y
{
	// 此時無法覆寫密封方法
	//protected override void M1() { }
	protected override void M2() { }
}
```

由於 `Y` 類別覆寫了 `M1` 方法並設置為 `sealed` ，所以當 `Z` 類別繼承 `Y` 類別時，`Z` 類別將無法覆寫 `M1` 方法，如果強制覆寫則會產生錯誤

![pic-008](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ia25z026xlqzbjiehkxw.png)

需要特別注意的地方：不是所有方法都可做為密封方法，要作為密封方法的話，必須覆寫父類別的虛擬方法並實作該方法，所以在密封方法中 `sealed` 和 `override` 修飾詞會同時使用

### Reference
[sealed](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/sealed)

---

Thanks for reading the article :tulip: :sunflower: :blossom:

If you like it, please don't hesitate to click heart button :heart:
or follow my [GitHub](https://github.com/FakeStandard) :star:
or buy me a coffee :arrow_down: I'd appreciate it.

[![Buy-me-a-coffee][1]][2]

[1]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h077sxd0vx1hix4t7lw8.png
[2]: https://www.buymeacoffee.com/FakeStandard
How to use JDownloader in headless mode and in remote server
Tags: java, linux, vps, jdownloader
Published: 2022-09-07 04:41:27

JDownloader it's a downloder files supported Dozen of file hosting websites like mega.nz fileupload.com etc etc ...

if you a old pirate of internet you should know it. Because it's the only descent java application desktop i really know! And deserve spending my memory ram on it.

Like a desktop app only can run locally using your actual speed. In countries of Latin America we can support medium Internet speed.

The jDownloader have a web-application in my.jdownloader.org that use `<my-ipaddress>.mydns.jdownloader.org:33561`, very rare because a lot of software in that kind, have integrated a daemon what serve the web application like qBitorrent or Transmission.

Let's do the trick... For this I will need a cheap vps with java/openjdk installed and a ssh client.

you should follow the tutorial showed here: https://support.jdownloader.org/Knowledgebase/Article/View/install-jdownloader-on-nas-and-embedded-devices

```
$ wget http://installer.jdownloader.org/JDownloader.jar
$ java -jar JDownloader.jar -norestart
....
|---------------------------Headless Information-------------------------------
|       MyJDownloader
|       Los datos de la cuenta de 'My.JDownloader' no son correctos.
|       Compruebe su Nombre de Usuario/Correo Electrónico y Contraseña!
|       Enter y -> Enter Logins
|       Enter n -> Exit JDownloader
y
|       Please Enter your MyJDownloader Email:
|>
|       Please Enter your MyJDownloader Password(not visible):
|>

|------------------------------------------------------------------------------

```
As you can see, the jdownloader will prompt a login, now it's when you go to https://my.jdownloader.org and register an account with a email.

introduce the same login in both side, on the website and the terminal.

After doing that we will use a little trick called ssh tunnel. where you can redirect all your local connections to the server like simulating are running locally executing:

` ssh ubuntu@myvps -L 33561:localhost:33561 `

Doing that you have creating a connection from ipLocal:33561 to your ipaddressVps:33561 when you reload the https://my.jdownloader.org will connect to `<my-ipaddress>.mydns.jdownloader.org:33561` doing the same and PUM! You have your jdownloader using remotely.


![jdownloader remote](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo2egjm590fsl50w6jcb.png)

The same trick works for windows using putty, only use 33561 instead of 8080.

![Putty with ssh tunnel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsay1mb8x3i2b1pehgg4.png)

** WARNING:

take it very seriously this. Executing jdownloader remotely expose the port  33561 to internet what it mean anybody might connect to you without authentication and use jdownloader for download something malicious.

```
tcp        0      0 0.0.0.0:33561           0.0.0.0:*               LISTEN      3007624/java         off (0.00/0/0)

```
Laravel 8 One To Many Relationship Example
Tags: laravel8, php, relationship, mysql
Published: 2022-09-07 04:36:27

In this article, we will see laravel 8 one to many relationship example. Also, you can use one to many relationship in laravel 6 and laravel 7. 

A one to many relationships is used to define relationships where a single model is a parent to one or more child models. 

For one to many relationships use hasMany and belongsTo the method in the model for access to each other model. Also, we will create migration with a foreign key, retrieve records using the model, insert new records, sync with a pivot table, etc.

So, let's see one to many relationship in laravel 6/7/8 or laravel 8 hasMany example.

Now, We will create Articles and Comments tables. Connect both tables with each other and create one to many relationships with each other by using the laravel model. 

To define this relationship, we will place a comments functions on the Article model. The comments function should call the hasMany method and return its result.
How do you give arguments to a docker container? What is CMD & ENTRYPOINT in a docker file ?
Published: 2022-09-07 04:34:36

Check my blog [https://belowthemalt.com/2022/09/06/how-do-you-give-arguments-to-a-docker-container-what-is-cmd-entrypoint-in-a-docker-file/](https://belowthemalt.com/2022/09/06/how-do-you-give-arguments-to-a-docker-container-what-is-cmd-entrypoint-in-a-docker-file/) on how to pass arguments to containers and understand the difference between ENTRYPOINT & CMD
About me
Published: 2022-09-07 04:22:35

Hi, my name is Jose. What to tell about me?

Well I am from Ecuador so I’m new here in Canada.  I decided to came to Canada to study “Web & Mobile App Development”. 
So in Ecuador I studied “Multimedia and Audiovisual Production” I finished that career and had nothing to do, there was really difficult to get a permanent job in Ecuador so I spend a whole year doing little things and some internships.

I decide to study “Web & Mobile App Development” because for me it has something to do with my bachelor’s degree, and it is a good opportunity to have more experience and get out of your comfort zone.

And my goals, to be honest I never think about it, I don like to think about the future so…  yeah I don’t know what to tell you.
VS Code Tip of the week: vscode.dev
Tags: vscode, vscodetips
Published: 2022-09-07 04:21:56

This came out a while ago, but I wanted to bring it up again because it's a great collaboration tool or editor. [vscode.dev](https://vscode.dev/) is a full-blown VS Code Editor that runs in the browser. For web-based projects, it's a great option if you need to code in the browser for whatever reason.

![vscode.dev showing the welcome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp7ugiabk2v1xip1kpfr.png)



Another cool thing about it is that you can use LiveShare to connect and collaborate with others! Also, you can [sync your settings as you do in VS Code for your desktop](https://code.visualstudio.com/docs/editor/settings-sync)!

And lastly, if you want the bleeding edge, there's [insiders.vscode.dev](https://insiders.vscode.dev/).

Happy VS Coding!
Introduction to Babel,ES and npm
Tags: beginners, webdev, tutorial, react
Published: 2022-09-07 04:07:28


## Introduction to Babel, ES, and npm

## What is ES?

ES is an abbreviation used for **ECMA Script**. It is a standard for different scripting languages such as JS (JavaScript) made by ECMA.
ECMA is an abbreviation used for European Computer Manufacturers Association. It is a standard organization based out of Switzerland which takes care of ES. ES11 (2020) is updated in June 2020 and its nomenclature is like that the year in which the update is released then the name will be a year plus one such as ES10 (2019).
In ECMA Script6 also called ES6 and ECMAScript 2015 various new features were added:

**The features are listed below:**

* The let keyword

* The const keyword

* Arrow functions

* Classes

* Modules

* The Rest Parameters

* The Spread Operator

* Destructuring Assignment

* The Object Destructuring Assignment

* Default values for Function Parameters

* Template Literals

* The for…of Loop

## What is Babel?

It is a term that you will listen to many times but will find difficult to understand. I will tell you only the overview of this because manually you will not indulge in Babel but automatically things will take place by Babel.

**Babel is a free and open-source JavaScript Transcompiler **that is mainly used to convert ES6 (2015) and above code into backward compatible code that can be run by older JS engines. Babel deploys a technique called Polyfill which basically means to fill many areas.

## What is npm?

npm is an abbreviation used for the node package manager. **It is a package manager for JavaScript**. It is the default package manager that comes with NodeJS when you install it. It consists of a command-line interface and an online database of public packages and private packages that are paid which is called the npm Registry.
Construct String from Binary Tree
Tags: python, programming, leetcode
Published: 2022-09-07 04:05:48


Given the root of a binary tree, construct a string consisting of parenthesis and integers from a binary tree with the preorder traversal way, and return it.

Omit all the empty parenthesis pairs that do not affect the one-to-one mapping relationship between the string and the original binary tree.

```java

/**
 * Definition for a binary tree node.
 * public class TreeNode {
 *     int val;
 *     TreeNode left;
 *     TreeNode right;
 *     TreeNode(int x) { val = x; }
 * }
 */
public class Solution {
    public String tree2str(TreeNode t) {
        if(t==null)
            return "";
        if(t.left==null && t.right==null)
            return t.val+"";
        if(t.right==null)
            return t.val+"("+tree2str(t.left)+")";
        return t.val+"("+tree2str(t.left)+")("+tree2str(t.right)+")";   
    }
}


```
Detect When Users Switch Tabs using JavaScript
Tags: javascript, webdev, tutorial, beginners
Published: 2022-09-07 04:00:01

In this article, I'll show you how to find out when users change tabs in browsers using JavaScript. It's going to be fun, it's helpful to see how often the user loses his attention. You can even use it to add the data to the database (it is out of the scope of this article).

There are two ways I know how to solve this problem. So, I'll be showing you both of them.

## Method - 1

In this method, we will use two event listeners [focus](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) (when the user focuses on your website or window) and [blur](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) (when the user loses focus)

We don't need HTML actually, because when users are on another tab so they won't see your website page. Only JavaScript will do:

```js
// when the user loses focus
window.addEventListener("blur", () => {
    document.title = "Breakup";
});

// when the user's focus is back to your tab (website) again
window.addEventListener("focus", () => {
    document.title = "Patch Up";
});
```

![Demo-1](https://i.imgur.com/jaCoow0.gif)


## Method - 2
In this method, we only need one event listener ([visibilitychange](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event)). It has a property called `visibilityState` which we can use to detect the window switching state.


```js
document.addEventListener("visibilitychange", () => {
    // it could be either hidden or visible
    document.title = document.visibilityState;    
});
```

![demo-2](https://i.imgur.com/35DvjFq.gif)

You can use these to add many functionality to your website such as stop music or video when the user loses focus:

```jsx
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === 'visible') {
    music.play();
  } else {
    music.pause();
  }
});
```

If you want to try it yourself then check out [**LIVE**](https://detect-tab-switch.netlify.app/)

## Wrapping up:
That's all you need to detect when users switch tabs. Both methods work as expected. You can use any of them. If you enjoyed this article, then don't forget to give ❤️ and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

### 🌐 Connect with me:
[Twitter](https://twitter.com/j471n_)
[Github](https://github.com/j471n)
[Instagram](https://www.instagram.com/j471n_/)
[Newsletter](https://www.getrevue.co/profile/j471n)
[LinkedIn](https://www.linkedin.com/in/j471n/)
[Website](https://j471n.in)
[Buy me a Coffee](https://buymeacoffee.com/j471n)
Vue.js Basics Part 8 | Emit
Tags: vue, javascript, webdev, programming
Published: 2022-09-07 03:38:32

Today, I will be talking about `emit` in Vue.js. 

_This is part 8 of my Vue.js Basics series, to read part 7, please click [here](https://dev.to/ahmetmeliksah/vuejs-basics-part-7-props-6g6)_

Emit is the opposite of `props`. That means, we send (emit) events from child component to parent component. So, how it works:

```javascript
<script>
export default {
  emits: ['response'],
  created() {
    this.$emit('response', 'hello from child')
  }
}
</script>

<template>
  <h2>Child component</h2>
</template>
```
As you can see from the code above, we use `emits:` array to emit something. After that we use the `created(){}` property. 
`this.$emit('response', 'hello from child')` this takes multiple arguments: first, event name; second, any additional arguments are passed to the **event listener**. So, when we use `emit` in parent component, we do that by using `@` (`v-on:`).

Here's parent component:
```javascript
<script>
import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      childMsg: ''
    }
  }
}
</script>

<template>
  <ChildComp @response="(x) => childMsg = x"/>
  <p>{{ childMsg }}</p>
</template>
```

First, we import the component like so:`import ChildComp from './ChildComp.vue'`, remember syntax `import <something> from <path>`. Afterwards, register imported component in `components` option. Here, we've a data that has key property of `childMsg`, and its value is an empty string initially. However, since we `emit` something from child component, we can receive that with `@something`. Since we coded 
`emits: ['response']` and `this.$emit('response', 'hello from child')`, we receive by using `@response`

`"(x) => childMsg = x"` this line of code assigns `childMsg` data's value to `x` parameter in this arrow function. And it comes from child component `this.$emit('response', 'hello from child')`. Remember, the first argument is the event name, other arguments are passed in arguments to event listener, so it passes `'hello from child'`.

To sum it up, today we talked about how to pass events from chiled to parent component. Next, I will be talking about slots in Vue.