teleren/devto huggingface dataset:
Use multiple interfaces/types as Props in react with typescript.
Tags: react, typescript, component
Published: 2021-01-15 08:57:11

#### While developing the react component, with respect to class and functional component. The main concern while developing is to pass props inside so that it will be ready to use in projects.

> React functional component
```typescript
const CustomComponent = () => {
   return(<>.....</>);
}
```

🤔 How to pass my props inside the component?

**💡 Let me create an interface for this component that will accept n number of props inside. so that it can be more customize.**

> Custom Props interface
```typescript
interface ICustomComponentProps {
   height: number;
   width: number;
}
```

> Now using these props into the component.

```typescript
const CustomComponent = (props: ICustomComponentProps) => {

   ///Decompose props
   const { width, height } = props;

   /// Handle props

   return(<>.....</>);
}
```

Now props are accessible in the component.

**Now I need to create more components.**

```typescript
const CustomComponentB = () => {
   return(<>.....</>);
}
```

Let me pass the same props inside `CustomComponentB`.

```typescript
const CustomComponentB = (props: ICustomComponentProps) => {

   ///Decompose props
   const { width, height } = props;

   /// Handle props

   return(<>.....</>);
}
```

#### Suddenly I realized that I need to add one more property to the above CustomComponentB. 

🤔 How can I add one more property?

**💡 let me add in the current interface.**

```typescript
interface ICustomComponentProps {
   ....
   fontSize: number;
}
```

Now the new snippet will be like

```typescript
const CustomComponentB = (props: ICustomComponentProps) => {

   ///Decompose props
   const { width, height, fontSize } = props;

   /// Handle props

   return(<>.....</>);
}
```

Cool it's working, but suddenly CustomComponentA is failing.😞

🤔 How to fix it?

> Let me create another interface that will extend the `ICustomComponentProps`

```typescript
interface INewComponentPropsB extends ICustomComponentProps {
   fontSize: number;
}
```

Now the new snippet will be like

```typescript
const CustomComponentB = (props: INewComponentPropsB) => {

   ///Decompose props
   const { width, height, fontSize } = props;

   /// Handle props

   return(<>.....</>);
}
```
Here ComponentB is using INewComponent props that extend the initial props interface.

Cool it's working,

🤔 How to fix it without using `extends` keyword?

**💡 use the `&`**

> Let me modify interface

```typescript
interface INewComponentPropsB {
   fontSize: number;
}
```

Now the new snippet will be like

```typescript
const CustomComponentB = (props: (ICustomComponentProps 
                                 & INewComponentPropsB)) => {

   ///Decompose props
   const { width, height, fontSize } = props;

   /// Handle props

   return(<>.....</>);
}
```

**🎉 It's working !!!**

Many Thanks for Reading this content.

Bonus: You can use `type` definitions also instead of `interface` declartion.
3 password REGEX for your next project
Tags: javascript, node, webdev, programming
Published: 2021-01-15 08:55:17

Regular expressions are cryptic and hard to understand and build one from scratch.
But don't panic with those cryptic symbols, the dev community can help.
Here i am writing 3 password regular expressions to use it at your next JavaScript front end app or your next nodeJs back end application.

```javascript
// PASSWORD REGEX FOR YOUR NEXT JAVASCRIPT APP

// regex for a basic password must be
// more than 8 chars 
const PASSWORD_REGEX_1=  /^[A-Za-z0-9]\w{8,}$/;

// more secure regex password must be
// more than 8 chars 
// at least one number
const PASSWORD_REGEX_2 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;

// more secure regex password must be :
// more than 8 chars  
// at least one number
// at least one special character
const PASSWORD_REGEX_3=  /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}$/;

```

You can combine all 3 regular expressions to show proper warning messages.

Great web sites to check your regular expressions :
1. [regex101](https://regex101.com)
2. [regexr](https://regexr.com)
3. [regextester](https://www.regextester.com)
How to setup java in windows 10
Tags: java
Published: 2021-01-15 08:34:02

Recently i was installing JDK on my system, and i did everything from downloading jdk, jre and setting environment variables but when i went to run java code with the command "java MyProg" Error occurred saying something like "JNI error check your installation and try again" so I went on some online research and below is what i found: -->

JRE(JAVA Runtime Environment):it provides us with minimum stuff required for execution of java application/program, NOTE that it is helpful only in execution, We cannot compile or create byte code with it for that you need jdk.

JDK(JAVA Development Kit): it provides us with everything we need for developing java applications/programs, using jdk we can create byte code as it contains javac
during the online surfing I also came to know that for the versions of jdk older than jdk-11 we used to have JRE folder separately but in JDK-11 we don't need that as JRE is the part of JDK-11 [link to source](https://stackoverflow.com/questions/52584888/how-to-use-jdk-without-jre-in-java-11) 
also before doing anything understand the need means, if you are a developer who writes code you need to have compiler, runtime environment and other stuff but if you are a client or just want to run certain application then only thing you require is JRE that's it [source](https://stackoverflow.com/questions/32988601/do-i-need-both-jdk-and-jre)
#so if you want to install jdk 
1. goto [this](https://jdk.java.net/java-se-ri/11) website.
2. download the JDK
3. unzip the folder in downloads
4. setup the environment variable
5. enjoy : )

#[Here](https://www.journaldev.com/476/java-windows-10-download-install) is the step-by-step guide.
i struggled with this for two days so i thought it is worth sharing!
Trading Bitcoin via API using Python
Tags: tradingbot, pythonpandas, bitcoin, python
Published: 2021-01-19 08:32:40

---
title: Trading Bitcoin via API using Python
published: true
date: 2021-01-15 07:57:14 UTC
tags: tradingbot,pythonpandas,bitcoin,python
canonical_url: https://medium.com/coinmonks/trading-bitcoin-via-api-using-python-8fd86f9999cf
---

[![](https://cdn-images-1.medium.com/max/1920/1*iFEYgvRU-5eJSHZGXPYT9w.jpeg)](https://medium.com/coinmonks/trading-bitcoin-via-api-using-python-8fd86f9999cf?source=rss----721b17443fd5---4)

I’m in the process of developing a crypto trading bot in Python. I’ve been writing a series of articles documenting the progress. The…

[Continue reading on Coinmonks »](https://medium.com/coinmonks/trading-bitcoin-via-api-using-python-8fd86f9999cf?source=rss----721b17443fd5---4)
Prioritizing Work Tasks & Learning Ruby
Tags: devjournal, career, womenintech, codenewbie
Published: 2021-01-15 07:54:09

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

Happy Friday! This week has honestly flown by for me - can't believe I'm already two weeks in to my new job.

Over the course of this week, I've definitely gotten a lot better at leveraging the hours in my day to figure out how to prioritize different items and tasks.

For example, during my workday, I try to spend a bit of time picking up the Ruby language (and will eventually move on to Ruby on Rails!) through an online course - and I've started to block out time right when I start to focus on learning.

If I start in immediately on actual work stuff, I find that the tasks seem to continuously add on to one another, and the to-do item that is 'spend some time working through Chapter 3 in course' gets pushed further and further down the list.

On the other hand, if I make it a priority to get the study time out of the way right at the start, it's something I don't need to worry about at all later on.

I'm currently learning Ruby through the Learn Enough online course. It's really good!

And I always heard this before, but now that I'm experiencing it, I know it's true:

**Learning your first programming language is the toughest mountain to climb; and after that, for your next languages, it's definitely easier!**

I learned JavaScript as my first language, and now that I'm learning Ruby, I'm able to see so many patterns and conventions that are universal across all languages.

Ahhhh, you love to see it! Have a great weekend, friends.


-------

P.S. 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)
What is Gradient Descent in Neural Network?
Tags: deeplearning, machinelearning, datascience
Published: 2021-01-15 07:50:55

Gradient descent is used to minimize the cost function.

**Now, what is the cost function?**

The cost function is a method to calculate the error between the actual output and the predicted output.

The formula of the cost function is-
                 **cost function= 1/2 square(y – y^)**

here, y= actual output
y^=predicted output

The goal of a Neural network is to predict the output which is similar to the actual output.

The lower the cost function, the closer the predicted output is to the actual output.

So to minimize this cost function we use Gradient Descent.

Gradient Descent is of three types-
1. Stochastic Gradient Descent.
2. Batch Gradient Descent.
3. Mini-Batch Gradient Descent.

Stochastic Gradient Descent is used to solve the local minimum problem.

For more details regarding the types of Gradient Descent, you can check this article 👇

**[Stochastic Gradient Descent- A Super Easy Complete Guide!](https://www.mltut.com/stochastic-gradient-descent-a-super-easy-complete-guide/)**
ServiceNow: Using event parm to send custom object or array
Tags: servicenow
Published: 2021-01-15 07:23:37

The gs.eventQueue is a nice way to trigger events, which you can use in a variety of ways. For example trigger a notification. With the parm1 and parm2 you can send strings, which you can use in a mail script. Sometimes we need more information passed to the mail script.

Here we can use our lovely JSON.stringify() to send custom JSON objects or arrays with the help of parm1 and parm2. Both are string fields and have a length of 4000. So plenty of space to send your array or object. 

In the email script you can then use the JSON.parse() to parse the string back to your object or array and then use it however you like.

gs.eventQueue:
![alt text](https://developer.servicenow.com/app_store_learnv2_automatingapps_paris_schedjobevents_images_sje_eventqueue.png "eventQueue Image")
Speed up your Gatsby Build when using GraphCMS
Tags: gatsby, graphcms
Published: 2021-01-15 07:23:35

[Gatsby](https://www.gatsbyjs.com/) in combination with [GraphCMS](https://graphcms.com/) is really cool, but the build time can be quite long. I've searched for some improvements, which I would like to share with you in this post.

## 1. Use Conditional Page Builds

Whenever you run `gatsby build`, all pages are recreated. You can improve the build time by rebuilding only changed pages.

*If you're using GitHub Actions, you can check out my previous post:*

{% post danielbayerlein/incremental-gatsby-builds-with-github-actions-2p7o %}

Use the environment variable `GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES` in your `gatsby build` command to enable conditional page builds and persist the `.cache` and `public` directories between builds.

```shell
GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby develop
```

## 2. Parallel processing of GraphQL queries

The default number of parallel GraphQL queries executed by Gatsby is 4. With the environment variable `GATSBY_EXPERIMENTAL_QUERY_CONCURRENCY` you can increase the number.

```shell
GATSBY_EXPERIMENTAL_QUERY_CONCURRENCY=20 gatsby develop
```

## 3. Use Query Batching

By default, `gatsby-source-graphql` executes each query in a separate network request. The plugin offers a configuration option to batch the requests.

If you set `GATSBY_EXPERIMENTAL_QUERY_CONCURRENCY` to `20` and `maxBatchSize` to `5`, it means that you are running 4 batches in parallel.

```js
{
  resolve: 'gatsby-source-graphql',
  options: {
    typeName: 'GRAPHCMS',
    fieldName: 'graphCmsData',
    url: 'https://api-eu-central-1.graphcms.com/v2/xxxxxx/master',
    batch: true,
    dataLoaderOptions: {
      maxBatchSize: 5
    }
  }
}
```

## 4. Asynchronize your `createPage` function

If you use the `createPage` function to create dynamic pages with GraphCMS, be sure to run this function asynchronously.

```js
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(...)

  const pages = result.data.graphCmsData.pages.map(async (page) => {
    createPage({
      path: page.slug,
      component: path.resolve('./src/templates/Page.js'),
      context: {
        id: page.id
      }
    })
  })

  await Promise.all([pages])
}
```

---

If you have any kind of feedback, suggestions or ideas - feel free to comment this post!
SmolURL Released!
Tags: wedev, showdev, programming
Published: 2021-01-15 07:07:05

---
title: SmolURL Released!
published: true
date: 2021-01-15 07:03:16 UTC
tags: #wedev #showdev #programming
canonical_url: https://germangamboa.com/posts/smol-url-release
---

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

## TL;DR:

I made another URL shortener for the web 👻[https://smolurl.com/](https://smolurl.com/)

- This post's URL shortened: [smolurl.com/kN0CpPuZzf](https://smolurl.com/kN0CpPuZzf)

# Why?

I have a silly experiment in mind where this eventually becomes some sort of marketing tool. The crazier part is I have plans to get people to actually use it, but it has to get a lot better than what it currently is right now. Let's call its current state an early alpha done in 30min on a Sunday night.

## What's the stack?

- Node (Express, typeorm)
- mysql
- nginx
- redis

I'm sure most are shocked that I am not reaching for my good old friend PHP. Don't worry I have some other ideas in mind that will be PHP 😎
Could you help me to create Dynamic template using custom JSON data in angular
Tags: angular, typescript
Published: 2021-01-15 07:03:15

I want to create Dynamic template using custom JSON data that help to create custom forms in angular

{"all_templates":[{"id":"1","label":"name","key":"Name","placeholder":"enter your name","type":"checkbox","tempRef":"temp1",validation"{"required":true,"minLength":5,"maxLength":80}},{"id":"2","label":"Oraganization","key":"temp2","type":"text","placeholder":"organition name","tempRef":"temp2","validation":{"required":true,"minLength":10,"maxLength":100}}]}

and we have template like

<ng-template #temp1>create templte here using JSON data...
</ng-template>
<ng-template #temp2>create templte here using JSON data...
</ng-template>
Looking for good website builder and CMS... Check this one
Published: 2021-01-15 06:45:03

Hi Guys, 
This post is for all developers and companies who are looking for an easy and free way to build websites fast. 
I am sharing with you, our open-source website builder and drag and drop CMS - Microweber. 

Last year we have migrate it to Laravel 7+ and Bootstrap 4.5 so the frameworks are supported. 

You can use it for building websites for clients and own projects.
You can download it from microweber.org website or find it in Digital Ocean marketplace, Alibaba marketplace. We also support cPanel and Plesk plugins and have a white label solution.

Check more on our Blog in microweber.org
Contact us for help and questions

Thank you!

Boris @ Microweber.org
When coding C#, you need to use f for timeScale
Tags: csharp, unity3d, gamedev
Published: 2021-01-15 06:44:43

When working with C#, I found out you can't use seconds for time. Why? I have no idea! Well I had no idea. If you want to slow things down or speed things up, surely you use actual time right?

At first when I tried to code this up, I wasn't using any units. I did however try "s" for seconds which didn't work. I tried it without units, and then I discovered you need to use "f". So I plugged it into my code, and presto!

It works! I love it when things just work. So what's the logic here?

When I was making my character move faster, I simply used 2.0. There was no need to add any units. Same for when my character was running in real-time. I only needed 1.0, no units required. But when working with decimals, it's different.

## TimeScale in Unity

For timing you can use decimal points and 0.X in order to slow down the movement of your character by fractions. However when working in decimal points, you need to add the f. F stands for frames. For example, 0.5f means the movement will go at half the real-time (or normal) speed. Normal speed is 1.0 (note you don't need the f although it's good practice to add it anyway).

0.25f is a quarter of real-time speed. The reason time doesn't work in seconds is because Unity and C# use delta time according to a timescale rather than a single point in time. It's relative. This is magical, because you can fix the time based on another frame rate. It's really awesome and perfect for gaming ie. something happens after something else happens; a spell in _Elder Scrolls Online_ occurring X time after being hit as an example.

If you want to read more about Unity's TimeScale check out the [Unity Docs](https://docs.unity3d.com/ScriptReference/Time-timeScale.html). I am really loving learning all things Unity and C# and can't wait until I finish the [Unity C# Survival Guide](https://learn.unity.com/course/unity-c-survival-guide).

![b2a9c1f3-5543-4e31-9c0d-4bdfdc38a02f_unityblank](https://dev-to-uploads.s3.amazonaws.com/i/3ugqp70yfoc52way1399.png)

## Join the learning journey

What do you want to learn with Unity? What should I learn next?

If you want to follow my coding journey, give me a :heart: on [Twitch](https://www.twitch.tv/MishManners). You can also check out one of my latest [Unity streams](https://www.twitch.tv/videos/812815153) for lots of fun (and a bit of frustration). It's so exciting seeing things work in code, and I can't wait to dive back into live coding for 2021! See you soon.
Pass Props to CSS in styled-components with typescript.
Tags: react, styledcomponents, typescript
Published: 2021-01-15 06:31:37

CSS styling is important to customize any react component. So  [styled-component](https://styled-components.com/) is a very good library for starting.
```typescript
const Container = styled.div`
  ${css`
    width: 240px;
  `}
`;
```
use the above `container` in the React component.

```typescript
return(
  <Container>
    Hello World!
  </Container>
)
```

🤔 How to pass my custom width inside the container?

Thinking and Googling.......

💡 Let me create a `Type` definition with `width` prop.

```typescript
type ContainerType = {
  width?: number; ///Passing Optional Props
};
```

🤔 Now how can I use it in `container`?

```typescript
const Container = styled.div<ContainerType>`
  ${css`
    width: ${(props: ContainerType) =>
      props.width !== undefined ? props.width + "px" : 240px};
  `}
`;
```

Now again render in React
```typescript
return(
  <Container width={300}>
    Hello World!
  </Container>
)
```

🎉 It's working !!!

Many Thanks for Reading this small content.
My first Scrimba web weekly challenge: currency exchange
Tags: webdev, javascript
Published: 2021-01-15 06:06:43

I am currently enrolled in Scrimba's frontend master. I liked the teaching practice of Scrimba as they have an interactive teaching environment.In addition, they are doing a web weekly challenge and this week was a challenge to make a currency exchange page. link to challenge: [link](https://scrimba.com/scrim/coa164702a455306fc9062373?utm_source=discord&utm_medium=social&utm_campaign=wwdc&utm_content=wwdc_leanne_converter)

so in order to solve this problem, I use a javascript query selector to select the input value and assigning the value to a variable.
```
const OriginalCurrencyAmount=document.getElementById('original-currency-amount')
const currencyUnit=document.getElementById('original-currency-unit')
const newCurrency=document.getElementById('new-currency-unit')
const exchangeRate=document.getElementById('exchange-rate')
const button=document.getElementById('exchange')

```
After that, I had to make the button click work, so I added eventlistener in the button so when it is clicked then I will trigger a function to do the calculation and show the money exchange price.

```
button.addEventListener('click',function(){
    
})
```
After that, I checked if the value is filled in the text box for validation. If the user clicked without filling in all the values then it will display a message to fill all values.

```
if(OriginalCurrencyAmount.value ==="" || currencyUnit.value ==="" || exchangeRate.value ==="" || exchangeRate.value ===""){
        document.getElementById('output-text').textContent=" please fill all values 💰"
        
    }
    else
   { var exchange=OriginalCurrencyAmount.value * exchangeRate.value
   document.getElementById('output-text').textContent=" your exchange rate of "+OriginalCurrencyAmount.value+ "💰 "+currencyUnit.value+ " will be "+ exchangeRate.value +" " +newCurrency.value+" currency"}
```
So, if all the values are filled then it will calculate the money exchange value simply by multiplying the exchange rate with input currency value.

so here is my solution to the challenge.
[link](https://scrimba.com/scrim/co4c841a9a41c9781769f9085)
What is mixin in JavaScript?
Tags: javascript, webdev, programming, codenewbie
Published: 2021-01-15 05:52:38

A `mixin` is an object-oriented programming term, a class which contains helper methods for other classes. **Mixin** is a JavaScript object with useful methods, which can be easily merged with the prototype of any class. 

**Usage**: In JavaScript, a class can extend only one other class. JavaScript doesn't support multiple inheritances. But sometimes we require to extend more than one, to overcome this we can use `Mixin` which helps to copy methods to the prototype of another class. 

Example: 

```js
class Menu {
    choose(value) {
        this.trigger("select", value); 
    }
}

//copy the methods
Object.assign(Menu.prototype, eventMixin); 

let menu = new Menu(); 

menu.addEvent("select", value =>
             console.log(`Value selected: ${value}`)); 

menu.choose("123"); 
// Value selected: 123
```



We have used the **eventMixin** objects `addEvent` and `trigger` methods to trigger the event using menu object. 

---

### eventMixin

Now let's make a **Mixin** for real-time usage

```js
class Menu {
    choose(value) {
        this.trigger("select", value); 
    }
}

//copy the methods
Object.assign(Menu.prototype, eventMixin); 

let menu = new Menu(); 

menu.addEvent("select", value =>
             console.log(`Value selected: ${value}`)); 

menu.choose("123"); 
// Value selected: 123
```

We have used the **eventMixin** objects `addEvent` and `trigger` methods to trigger the event using menu object. 

```js
// Area Calculating Mixin
let areaCalculator = {
    calculatorArea() {
        console.log(this.length * this.breadth); 
    }
}; 

// Usage: 
class Rectangle {
    constructor(length, breadth) {
        this.length = length; 
        this.breadth = breadth; 
    } 
}

// copy the methods
Object.assign(Rectangle.prototype, areaCalculator); 

// now Rectangle class can use calculatorArea
new Rectangle(5, 6).calculatorArea(); // 30
```

---

😎Thanks For Reading | Happy Coding📘

%%[bmc]
Hotstar+Disney Clone for Beginners made using React Js
Tags: devops, programming, devjournal, productivity
Published: 2021-01-15 05:41:31

Hey Guys we are dropping our 1st video on YouTube at 10 Am (IST) on 16 January 2020 .Please hit that subscribe button and make sure you smash that like button .Hotstar+Disney is a very famous streaming and entertainment service in India with more than 27 millon paid viewers and 300 millon monthly active users . We would love to hear your response .

https://www.youtube.com/watch?v=4pjpHUN28kk