teleren/devto huggingface dataset:
Prop forwarding with Emotion, Material-UI and Material-UI-system
Tags: react, typescript, materialui, emotion
Published: 2021-08-30 18:38:48

Material-ui-system is an awesome library, but when using with `@emotion/styled` there might be a few annoying warnings, complaining that you're passing an invalid property to a DOM node. Here's a quick function to prevent that:

{% gist https://gist.github.com/andrecastelo/d6ed8c341e4e8130060033cdef75262f file=shouldForwardProp.ts %}

And an example overriding an existing Material-UI component:

{% gist https://gist.github.com/andrecastelo/d6ed8c341e4e8130060033cdef75262f file=NewTypography.tsx %}
How to bootstrap JavaScript project with esbuild
Tags: javascript, esbuild
Published: 2021-08-30 18:37:47

This article will present a simple code generator for kicking off a browser project that uses [esbuild](https://esbuild.github.io/) as a bundler.

# Code generator
For generating code, I'm using [degit](https://www.npmjs.com/package/degit). It allows you to start a new project directly from a GitHub repository without dragging anything besides flat files from the original repository. So you can focus on your project instead of cleaning up the starter references.

# Code
The application is greatly simplified, and it's very similar to the minimal code example I use in my blog.

`index.html`:
```HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>webpack</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script defer="defer" src="dist/main.js"></script>
  </head>
  <body></body>
</html>
```

`src/index.js`:
```JS
console.log("Hello!");
```

the build command:
```JSON
    "build": "esbuild --bundle src/index.js --outfile=dist/main.js"
```

# Usage
To start a new esbuild project, you can run:
```shell
npx degit how-to-js/esbuild-starter new-project
npx: installed 1 in 1.968s
> cloned how-to-js/esbuild-starter#HEAD to new-project
```
After getting basic files, we can install dependencies:
```shell
npm install

> esbuild@0.12.24 postinstall /home/marcin/workspace/github/tmp/new-project/node_modules/esbuild
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
added 1 package and audited 1 package in 0.664s
found 0 vulnerabilities
```

and build our code:
```shell
$ npm run build

> esbuild-starter@1.0.0 build /home/marcin/workspace/github/tmp/new-project
> esbuild --bundle src/index.js --outfile=dist/main.js


  dist/main.js  58b 

⚡ Done in 1ms
```

the build output:
```JS
(() => {
  // src/index.js
  console.log("Hello!");
})();
```

# Links
* [esbuild-starter](https://github.com/how-to-js/esbuild-starter)
* [my video course about esbuild](https://bit.ly/esbuild-course)

# Summary
I hope this little code generator will help you start with esbuild.
Maven Build Tool (for Selenium Java)
Tags: testautomation, maven, testing, selenium
Published: 2021-08-30 18:12:33

# What is Maven?
- Softwareproject-Management-Tool to maintain and manage the project
- Build-Management-Tool for Java Frameworks

## Why? 
1.  Central [Maven Repository](https://mvnrepository.com/) to get Dependencies 
Maven visits the website, downloads the needed jars and places it in the build path. 
e.g. Selenium Jars 
just find Selenium Repository 
![Selenium Repo Search](https://i.imgur.com/4gIag6A.png)

1. Maintaining common structure for all
One common template across the organisation 
this is the empty skeleton:
![Selenium Repo Search](https://i.imgur.com/eR0vhAT.png)

1. Flexiblity in integrating with CI Tools 
e.g. Maven Commands wich are supported by Jenkins 

1. PlugsIns for Test Framework execution 
TestNG, JUnit 

###Vocablary
`groupId` : unique identifier (e.g. Selenium)
`artifactId`: sub-project of Group ID (e.g. Selenium-Java, a jar name) 
``` java
<dependency>
    <groupId>org.seleniumhq.selenium</groupId>
    <artifactId>selenium-java</artifactId>
    <version>3.141.59</version>
</dependency>
``` 
You can pass all this details and publish it in Maven, then other persons can simply clone it with groupId and artifactId. 
*Keyword 'test'* has to be at the end of each javaclass-file, e.g. SeleniumTest.java. 
![Selenium Hierachie Folders](https://i.imgur.com/jUyfmr0.png)

#Install & configure Maven
Download [Maven](https://maven.apache.org/download.cgi) and install
## Configure Windows
CLI: mvn (for maven) ---> not found
java -v (for java -version) --> shows you your java version 
navigate to Enviroment Variables and set the Path to the Maven Bin Folder. [further Information](https://maven.apache.org/install.html)


#Create Maven Project in Eclipse
![create Maven Project](https://i.imgur.com/VWH7vwL.png)
Let it use default Workspace
Use maven-archetype-quickstart template
![create Maven Project](https://i.imgur.com/E9qro4q.png)

## Fill your POM.xml -File
1. Get the Dependencies from [Maven Repository](https://mvnrepository.com/)
Go to the maven repository and get each Dependency and put it inside the Dependencies 
1. Integrate [sureFire Plugin](https://maven.apache.org/surefire/maven-surefire-plugin/usage.html)
to execute all your testcases in your project

###### to execute from CLI
(where POM.xml is laying) 
- mvn clean (to clean project) 
- mvn compile (to check for syntax errors) 
- mvn test (first checks dependencies

## Integration of TestNG 
## Switching Test with Maven profiling
In javascript 0 * -1 = -0 !
Tags: javascript, beginners, webdev
Published: 2021-08-30 18:03:21

Do you know when we evaluate this `0 * -1` in javascript we will get `-0` because javascript can hold positive 0 (+0) and negative 0 (-0).

### Why +0 and -0 ?

Because the sign (+ and -) will represent the axis or direction.
15+ Scroll Down Arrow Animation CSS Examples [ New Designs ]
Tags: html, css, beginners, cde
Published: 2021-08-30 17:39:56

***Hello Friends, in this article I will teach you how to create an scroll down arrow animation using html & css, and also I have listed 15+ scroll down arrow animation css examples. Check out these excellent examples which are available on CodePen.***

### #1 SVG Scroll Down Arrow
Simple SVG Scroll Down Arrow Animation using HTML and CSS, which was developed by junjun. Moreover, you can customize it according to your wish and need.

{% codepen https://codepen.io/postor/pen/mskxI %}

### #2 Bounce Scroll Down Arrow
Bounce Scroll Down Arrow Animation using HTML and CSS, which was developed by Wojtek Tymicki. Moreover, you can customize it according to your wish and need.

{% codepen https://codepen.io/panweb/pen/tahfj %}

### #3 Awesome scroll down arrow list
Awesome scroll down arrow list Animation using HTML and CSS, which was developed by priyanka. Moreover, you can customize it according to your wish and need.

{% codepen https://codepen.io/priyankal/pen/zRvNyV %}


### #4 Gooey Scroll Arrow Animation
Gooey Scroll Arrow Animation using HTML and CSS, which was developed by Simone. Moreover, you can customize it according to your wish and need.

{% codepen https://codepen.io/flik185/pen/WxwLdX %}


### #5 Scroll Down Arrow Moving Animation
Scroll Down Arrow Moving Animation using HTML and CSS, which was developed by Joshua MacDonald. Moreover, you can customize it according to your wish and need.

{% codepen https://codepen.io/JoshMac/pen/MaYEmJ %}



#### <a href="https://blog.stackfindover.com/html-css-scroll-down-arrow-examples/">Check All Scroll Down Arrow Animation</a>
Add onclick event to material table react js

Tags: react
Published: 2021-08-30 17:36:35

I need to retrieve data from the server then I display this data in a table and if a user clicks on a button in the table he can download the file

Here is my data :
```
files = [ {name : "file1", created_at: "29/01/2021"},
          {name : "file2", created_at: "20/03/2021"}]
```
table headers :
```
const tableColumns = [
  { title: "name", field: "name" },

  {
    title: "Date",
    field: "created_at",
    type: "date",
    dateSetting: { locale: "en-GB" },
    filterComponent: (props) => <CustomDatePicker {...props} />
  }
];
```
My array : 

```
{file && (
<Fragment>
<MaterialTable
columns={tableColumns}
data={file}
title="Material Table - Custom Filter Component"
options={{search: false, filtering: true }}

actions={[
  {
    icon: 'save',
    tooltip: 'Save User',
    onClick: () => window.open('http://localhost:5000/files/' + file.name, '_blank').focus()
  }
]}
/>
</Fragment>)}
```
I get the error: ENOENT: no such file or directory, stat '/Users/admin//files/undefined'"}

how can i use in react js the link of each file, i tried to use the map function on my data but it doesn't work
Introduction to {Android Development}[Part-1] | Day 1 🔥🚀
Tags: 50daysofcode, android, sharingknowledge, development
Published: 2021-08-30 17:36:02


### Day 1: Intro to Android Development


**1. Which language/tech-stack do we use to develop Android app?**
➡️ In Android, basically, programming is done in two languages JAVA or Kotlin or C++ and XML(Extension Markup Language).

**2.1. What is the use of XML in Android app development?**
➡️ XML help us to add layouts and components in a well structure manner and even designing work of the application is done by XML itself.

**2.2. Is the Android Development similar to Web Development?**
➡️ Yes,you can relate it with web development.Just like HTML in Web Development,XML in Android does the work of structuring the layouts and components in Android app.And the Java/Kotlin/C++ does the work of JavaScript.

**2.3. Ok Now I got the XML does the work of HTML in Android development. Is there any thing related to CSS?**
➡️ Yes, XML itself does the work of HTML as well as CSS.
XML has the styling attributes and properties in Android just like HTML with inline styling in Web Development.

**3. How can I start Android Development work?**
➡️ You need Android Studio IDE which is one stop tool for Android development. 
Note: Android studio IDE requires minimum 8GB ram.
You can also Practice XML using XML visualizer.

**4. Tools and IDE :**
Online XML Visualizer by Udacity (Here you can practice designing App layout)👇
https://labs.udacity.com/android-visualizer/#/android/

Java Development Kit (JDK) 👇
https://www.oracle.com/in/java/technologies/javase/javase-jdk8-downloads.html

Since we use Java for Android we required JDK.

Android Studio IDE👇
https://developer.android.com/studio

**5. Installation Process for Android Studio:**
a) Download and Install JDK first.
b) Then download and Install Android Studio.
The installation process is straight forward.
Installation on Linux Ubuntu 👇
https://youtu.be/x3nVHXv3oyw
Bigdata Analytics Using SageMaker Studio (Serverless) & Athena runtime (PyAthena or RAthena)
Published: 2021-08-30 17:35:20

The idea here is to enable big-data querying using SageMaker Studio notebooks and athena runtime (completely serverless) . The notebook can be configured with python \ R kernel(with pre-packaged libraries pyathena, numpy, pandas, scipy, plotly, jinja2 and tqdm) to augment bigdata analytics querying and visualization. 

The high level design looks something like below 

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

The default instance type configured is "ml.t3.medium (2 vCPU & 4 GiB Memory)". Based on the query performance if required the compute instance can be scaled vertically up as per the query's compute requirement. The instance type can be selected based on the vCPU, Memory & GPU requirements for the query. Please note that the instance with higher vCPU, Memory & GPU will have higher cost associated with it and the instance will be charged for instance-hour consumed while the instance is running. Preferably use the listed fast launch instances which will boot up faster than other instance types. Please refer below screenshot for the list of fast launch instances.

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

Below are list of best practices for cost and query efficiency

Once you are done with the notebook work, please shut down the kernels as shown in the below image. This will save you cost by not running an idle instance. When you come back and launch the studio next time (the next day or a week after) the instances will be launched again. By following this practice you can save a lot of cost associated with compute instance.

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

In the current architecture the the query is delegated to Athena runtime and that will scale as per the queries compute need. But if we do local queries by loading data into a pandas dataframe or inefficient local queries on the dataframe that may not scale on the sagemaker instance and may result into undefined instance behaviour.
State... The Thing Everyone Hates
Published: 2021-08-16 02:00:53

#What is state?
State at its core is a React Hook. A React Hook is a special function that lets you have access to or "hook into" certain React features. The `useState` React Hook lets you add a state to a functional component. This allows you to set certain data to a variable that can be used in the component that you added state too, and its children as well passed down via props.

#How to use State
The first thing you need to do to get state up and running is to import the `useState` React Hook. That would look like so...
```
import React, { useState } from 'react'
// or
import { useState } from 'react'
```
Next, you need to declare your state variable and setter function in an array format with a `const` and set that equal to the `useState` Hook. In my example I will be using state to determine if the app is currently in dark mode or light mode.
```
function App() {
const [darkMode, setDarkMode] = useState(false)

return...
}
```
Inside the parentheses of the `useState` Hook is what the default value of the state you just created. In this example I only need to check if dark mode is on (true) or off (false). Currently it is off due to the default value I gave to the state. Next thing to do is to wright a new function that will change the current value of the state. (This function will be called when the user clicks a button to turn dark mode on.)
```
function App() {
const [darkMode, setDarkMode] = useState(false)

function handleDarkMode() {
  setDarkMode(!darkMode)
}

return(
 <div>
   <button onClick={handleDarkMode}> Dark Mode </button>
 </div>
)
}

``` 
The Function `handleDarkMode` calls our setter function in state `setDarkMode`. In the parentheses of the setter function is what you want the new value of state to be. In the example above, I set the new value of state to be `!darkMode` or "not" `darkMode` which will change the value to true instead of false. With this basic set up I can tell the app to change the overall style of the app if the value of `darkMode` is true or false. 

#Wrapping it all up
This is just the beginning and something very basic that `useState` can be used for. Learning state was not an easy or quick thing to do. I am still working on fully understanding everything that the `useState` React Hook can be used for! Some things that helped me when learning this was that...
* The variable that you declare for your state is just like declaring any other normal const variable. It is a variable that has data stored in it. 
* The setter function is what you use when you want to change the data that is being stored in your variable. 
* Lastly, and probably the most tricky, is to always think about what component you want to declare your state in. If the component you are currently in has no use for the data you need to store in state, you might need to go up or down your app's hierarchy to see what component is best suited to hold that state. 

Keep those simple things in mind and you will be mastering state in no time!
Leetcode: 598.Range Addition II
Tags: python, programming
Published: 2021-08-30 17:11:12

**Problem statement**

You are given an m x n matrix M initialized with all 0's and an array of operations ops, where ops[i] = [ai, bi] means M[x][y] should be incremented by one for all 0 <= x < ai and 0 <= y < bi.

Count and return the number of maximum integers in the matrix after performing all the operations.

***

> **Example 1:**
> **Input:** m = 3, n = 3, ops = [[2,2],[3,3]]
> **Output:** 4
> **Explanation:** The maximum integer in M is 2, and there are four of it in M. So return 4.
> ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/184sixklw3abox8wsxiz.png)
 
***

> **Example 2:**
> **Input:** m = 3, n = 3, ops = [[2,2],[3,3],[3,3],[3,3],[2,2],[3,3],[3,3],[3,3],[2,2],[3,3],[3,3],[3,3]]
> **Output: 4**

***

> **Example 3:**
> **Input:** m = 3, n = 3, ops = []
> **Output:** 9

***

**Constraints:**

* 1 <= m, n <= 4 * 104
* 1 <= ops.length <= 104
* ops[i].length == 2
* 1 <= ai <= m
* 1 <= bi <= n

***

**Idea**
> The problem statement says that we will be given a matrix and an array of matrix cell positions , we need to increment the count of all the cells from (0,0) to each matrix cell position. After completing all these operations we need to find out the count of maximum integer in the matrix.

> So , the question is to find out the count of the maximum integer after performing all the given operations.

> As per the question , a cell **(x , y)** value can be incremented if and only if **(x , y)** is one of the cell from **(0,0)** to the given input **(p , q)**.

> So , the maximum integer will be produced when matrix cell value is incremented more number of times.

> For a matrix cell to be maximum value , we need to figure out the most overlapping cell between the given set of operations/matrix cell positions as the range of cells which overlaps the most will get chance to increment more number of times.

> If you look at the first example , in first operation each cell value is incremented from **(0,0) to (2,2)** , in second operation each cell from **(0,0) to (2,2)** again got incremented as it overlaps with **(3,3)**.

> So , solution is to simple find out the **product of minimum of first co-ordinates of cell and minimum of second co-ordinates of cell**.

> We are taking product because we need to find out the count of the maximum integer in the matrix after performing all the given operations.

***

**Code-Python**

```python
class Solution:
    def maxCount(self, m: int, n: int, ops: List[List[int]]) -> int:
        length = len(ops)
        if length == 0:
            return m*n
        result = [ops[0][0] , ops[0][1]]
        for i in range(1,length):
            result[0] = min(result[0] , ops[i][0])
            result[1] = min(result[1] , ops[i][1])
        return result[0]*result[1]        
```

***

[Link to the question on leetcode](https://leetcode.com/problems/range-addition-ii/)

***

Below git repo contains some important programming questions and solution from **leetcode** and **interviewbit**

{% github dheerajthodupunoori/problem-solving %}
I've just completed a front-end coding challenge from
Tags: frontendmentor, frontend, challenge
Published: 2021-08-30 16:31:10

I've just completed a front-end coding challenge from @frontendmentor! 🎉

You can see my solution here: https://www.frontendmentor.io/solutions/responsive-sunnyside-agency-landing-page-using-flexbox-Dx8DUU2AZ

Any suggestions on how I can improve are welcome!

#FrontendMentor #CodeChallenge
OPPORTUNITIES COVID-19 HAVE CREATED
Published: 2021-08-20 05:59:52

1. Speed and innovation
2. Digital and Contactless Payments
3. Distance Learning
4. Better meetings
5. Remote Work

TOP 3 OF THE LIST

1. Distance Learning
Before mid 2020, a lot of countries announced or implemented school or university closures, impacting 1.57 billion students. Many educational institutions started offering courses online to ensure education was not disrupted by quarantine measures. Technologies involved in distant learning are similar to those for remote work and also include virtual reality, augmented reality, 3D printing and artificial-intelligence-enabled robot teachers.


2. Remote Work
Many companies have asked employees to work from home. Remote work is enabled by technologies including virtual private networks (VPNs), voice over internet protocols (VoIPs), virtual meetings, cloud technology, work collaboration tools and even facial recognition technologies that enable a person to appear before a virtual background to preserve the privacy of the home. In addition to preventing the spread of viruses, remote work also saves commute time and provides more flexibility.
This has really reduced or eradicate the conventional office space for a work force.

3. Digital and Contactless Payments

Central banks in in developed countries have implemented various measures to ensure banknotes are clean before they go into circulation. Now, contactless digital payments, either in the form of cards or e-wallets, are the recommended payment method to avoid the spread of COVID-19. Digital payments enable people to make online purchases and payments of goods, services and even utility payments, as well as to receive stimulus funds faster.
Angular Custom Directives - @HostBinding and @HostListener
Tags: angular
Published: 2021-08-30 16:28:29

`@HostBinding` and `@HostListener` are two decorators in Angular that can be really useful in custom directives. `@HostBinding` lets you set properties on the element or component that hosts the directive, and `@HostListener` lets you listen for events on the host element or component.

Let’s take the real time scenario: when mouse over the host element, only the color of the host element should change. In addition, when the mouse is gone, the color of the host element should change to its previous or else default color. So to do this, we need to handle events raised on the host element in the directive class. In Angular, you do this using `@HostListener()`.

To understand `@HostListener()` in a better way, consider another simple scenario: on the click of the host element, you want to show an alert window. To do this in the directive class, add `@HostListener()` and pass the event ‘click’ to it. Also, associate a function to raise an alert as shown in the listing below:

```
@HostListener(‘click’) onClick() {
window.alert(‘Host Element Clicked’);
}
```

Let’s go back to our requirement change the color to red only when the mouse is hovering, and when it’s gone, the color of the host element should change to black.

To do this, you need to handle the `mouseenter` and `mouseexit `events of the host element in the directive class.
`@HostBinding()` function decorator allows you to set the properties of the host element from the directive class.

Let’s say you want to change the style properties such as `height, width, color, margin, border,` etc., or any other internal properties of the host element in the directive class. Here, you’d need to use the `@HostBinding()` decorator function to access these properties on the host element and assign a value to it in directive class.

```
@HostBinding(‘style.border’) border: string;
```

Complete Example:-
```
import {Directive, ElementRef, Renderer, HostListener, HostBinding} from ‘@angular/core’;
@Directive({
selector: ‘[appChbgcolor]’
})

export class ChangeBgColorDirective {
 constructor(private ele: ElementRef, private renderer: Renderer){
  //this.ChangeBgColor(‘red’);
 }

 @HostBinding(‘style.border’) border: string;
 @HostListener(‘mouseover’) onMouseOver() {
  this.changeBackgroundColor(‘red’);
  this.border = ‘5px solid green’;
 }

 @HostListener(‘click’) onClick() {
  window.alert(‘Element clicked!’);
 }

 @HostListener(‘mouseleave’) onMouseLeave() {
  this.changeBackgroundColor(‘green’);
  this.border = ‘5px solid yellow’;
 }

 changeBackgroundColor(color: string){
  this.renderer.setElementStyle(this.ele.nativeElement, ‘color’, 
  color);
 }
}
```

Cheers!!!