teleren/devto huggingface dataset:
Use TypeScript Generics to enhance your React components and make them reusable
Tags: javascript, typescript, webdev, react
Published: 2022-01-03 06:50:01

Use TypeScript Generics to enhance your React components and make them reusable!

What is TypeScript Generics?

Generics allow us to have a dynamic type for our components. It gives us more flexibility when building components and allows better reusability for the consumers of the components.

Let's have a look at a simple example of Generics:

```
function returnWhatItGets<Type>(arg: Type): Type => arg;
```

The part where we write `< Type>` tells typescript that when we use this function, we will be able to insert a dynamic type that will serve as the Type of our argument (`arg`) and the Type of the return value of this function.

That is how it looks:

```
const numberOutput = returnWhatItGets<number>(5);

const stringOutput = returnWhatItGets<string>("hi");
```

Now that we're all on the same page with Generics, let's implement generics in our React component!


```
1 import React from 'react';
2
3 export type GenericComponentProps<Type> = {
4 data: Type[];
5 };
6
7 export function GenericComponent<Type>({ data }: 8GenericComponentProps<Type>) {
9 return (
10 <>
11 {data?.map((item: Type, index: number) => (
12 <ul key={index}>
13 {(Object.keys(data[0]) as Array<keyof Type>).map((key) => (
14 <li key={key.toString()}>{item[key]}</li>
15 ))}
16 </ul>
17 ))}
</>
);
}
```

It might not look very clear at first glance, but it's really straightforward. Let's go through the code line by line:

On line number 3, we define a Generic type for our component's props (Type).

In line 4, we assume that our props object will have the "data" property. Our data type will be an array of the dynamic Type we will initiate our component.

Moving forward to line 7, we define our functional component with the generic Type that will be passed down to the props object's Type.

Our data is an array with our custom Type, so in line 11, we begin mapping that array. For each object, we output an` <ul> `  attribute.

Now we want to output all the properties values of the given object, so we turn our object to an array of its keys using the Object.keys method and map it to print the value for each property. Notice how we define the type for this array dynamically with the keyof syntax.

Now let's test our component:

```
  <GenericComponent
   data={[
    { name: 'Nitsan', city: 'Harish' },
    { name: 'Abraham', city: 'Beer Sheva' },
   ]}
  />

```
That's it! We get all the benefits of typescript, such as auto-completion and type checking, while creating flexible and reusable components.

Using tools to keep track and build independent components, such as [Bit](bit.dev), our users benefit significantly from such a flexible setup.

---

- For more posts like this [follow me on LinkedIn](https://www.linkedin.com/in/nitsan-cohen/)

- I work as frontend & content developer for [Bit](bit.dev) - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).
Top 3 Automation Testing Tools for 2022
Tags: testing, automation, javascript, opensource
Published: 2022-01-03 06:39:49

Using the right automation testing tools is incredibly beneficial to your software testing efforts and delivery success. Right set of tools will have a greater impact on the efforts we put on development & maintenance of automation frameworks. Here is the list of tools that I found and currently using for **UI Automation**, **API Automation** and **Performance testing**. There are other great tools out there in the market but this article doesn't include or compare with them as this list is purely opinionated.

## UI Automation

**Cypress** is a powerful testing tool that needs no introduction if you have been developing frontend apps recently. The cypress home page starts with the coolest testing quote:

> **The web has evolved. Finally, testing has too.**

With its features, cypress truly stands for what it says.

{% github cypress-io/cypress %}

Cypress makes tests easier as it is interactive and runs alongside your application. This means that the Cypress test runner has full access to your code, and doesn’t run externally like Selenium frameworks do.

## API Automation

Our application is powered by numerous micro-services that are communicating with each other through an API interface. Having automated API testing became paramount for us as they represent the entire application logic. Following the traditional approaches to test the API's will no longer work. We need the **next-gen** tool that aligns with the world of micro-services. After a lot of exploration, we decided to go with **PactumJS**. Considering its features, I believe it is the **most underrated** open source testing tool available in the market.

{% github pactumjs/pactum %}

As most of out tech stack was in Node.js, it was simple for developers to contribute to API testing. Instead of having unit tests, developers started writing component tests for their services. 

## Performance Testing

For performance testing we want a tool that is scriptable, version controlled and easy for users to adapt. As all our services communicate over HTTP, we don't need a tool that supports wide range of protocols. Keeping that in mind, we came across **k6**. It is a developer-centric, free and open-source load testing tool built for making performance testing a productive and enjoyable experience.

{% github grafana/k6 %}

Both our UI and API Automation testing tools are in JavaScript. With k6, all our testing needs are met by a single programming language.

> **Cypress**, **PactumJS** & **k6** are the open-source automation testing tools that we have considered as the top 3 for year 2022.
How to update PHP in WordPress?
Tags: wordpress, php, javascript, webdev
Published: 2022-01-03 06:08:18

If you own your web server, you can make changes yourself, but if you have hosted your website via a third-party then you need to contact them for making the required PHP changes. But having a third-party, it will not be your job to manage and maintain the updates, they will do it on their own whenever a new version update is available. Same goes with the plugins, themes, and PHP version.

**Via cPanel**
It also follows the same steps as login into your web hosting account. Then you can look for the software section where you can check the selected PHP version as shown below.

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

Click it and you can see the next page displaying the PHP version. From there, you can select the latest version for the PHP as shown below.

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

You can follow the below-mentioned simple steps to check the PHP version.
You can look for the plugin “Display PHP Version” and install it. You can find it in the WordPress repository as shown below.

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

You can now activate the plugin. Then navigate to the WordPress dashboard-> home-> at a glance.
You will be redirected to the new page where you will be able to see the PHP version on which your website is running.

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

click the Update option available.
 
**Contacting host provider**
If you are using a third-party for hosting your website, then you need to contact them for making the required changes. These host providers have skilled persons for making such changes either via code or via interface depending on the changes.
My first challenge : 100 Days of Code
Published: 2022-01-03 06:08:02

Hello, With 2021 just ended and 2022 started i feel like i have doing nothing in 2021 for improving my self. So i decided to try to make the 100 days of code challenge .


**What i want by doing this** : 
- Making me able to be a freelance dev
- Becoming a DevOps engineer

**My objective are prettie simple**: 
- Improve my basic notion in javascript 
- Improve my MERN Stack knowledge
- Improving my DEVOPS Skills 
- gain on regularity and rigor

**My motivation** :
I want to be a Devops engineer but i love developing. So i decided i am going to do both. DevOps Engineer as my full time job. Fullstack Dev as a freelance 

PS:
- if you see any spelling or grammar mistakes you can notify me, thank you
- This is my first post on the site, if you have any advice, I'm interested
Difference Between A Developer And A Programmer
Tags: tutorial, webdev, programming, developer
Published: 2022-01-03 05:49:43


**If you’re hiring technical staff for your company, you may be asking, what is the difference between a developer, a programmer in an engineer?**

## Developers have a larger scope of responsibility
The basic difference between a developer and a programmer is the scope of their work.
Developers are more involved with and have a greater understanding of the full project scope.
Programmers are involved in a specific part of the project — coding.

## Programmers are also known as engineers and coders
A programmer’s job includes writing code, testing, and fixing bugs.
A programmer converts a design into instructions that a computer can follow. These instructions are coded using one of many programming languages. They usually know several of these languages including Java, C#, PHP, Oracle, SQL Server, JavaScript, etc.

Specialized programmers focus on one type of programming. General programmers write code for many types of software.
Typically, programmers work in groups or teams under a senior programmer (team leader) that supervises their work.

## Types of computer programmers
**Application programmers:** write programs for specific tasks eg. programs to track inventory at a factory
**System programmers:** write programs to maintain computer systems software eg. operating systems, database management systems
**AI/Machine Learning Engineers**
**Game programmers**
**Mobile developers **

## Developers (also referred to as software engineers)
Their job responsibilities include writing code, but they also contribute to many other aspects of the project/software development process. Along with coding, a developer's tasks often include:

software design
development
research
writing documentation and specs
maintenance
testing software
core implementation
analysis

Basically, a developer is a programmer first and foremost but with larger scope of responsibility for other aspects of the project.

#Github: https://github.com/Mohammad-Asif-Web
#portfolio: https://muhammadasif10.blogspot.com/
[Day 2] Making a Dapp pt2
Tags: 100daysofcode, blockchain
Published: 2022-01-03 05:28:41

Hey hey hey! It's day 2 of my 100 Days of Code challenge and I am super excited! I hope you all are having an incredible start to 2022, I know I for sure am. All of my code can be found at this [Github Repo]("https://github.com/ChaseStruse/EthMarketplace")

## What did I do? 

- Got smart contract to load to front end
- Fixed issue from last night regarding webpack
- Refactored and made some code prettier
- Started to get the hang of ReactJs again after being in angular

## What did I learn?

- Learned how to connect a metamask profile to the application
- Learned how to access a smart contract from the front end
- Learned some more ReactJs basics
- Learned more about web3 and getting account information

## Any Side Notes? 

- It seems like smart contracts are a big part of the backend when it comes to web3 applications
- Smart contracts are small and powerful
- Connecting metamask to an application is surprisingly easy
What is binary search in data structure? 
Tags: programming, javascript, python, java
Published: 2022-01-03 05:24:16

Binary search is an algorithm for finding the desired element from the sorted list of items. It works in a repetitive manner by dividing the list in two half that could contain the item. To know about binary search in data structure and how it works, visit Help me study bro. Help me study bro is the best platform to get detailed learning of binary search in the data structure. 
Visit - https://www.helpmestudybro.com/problems-on-binary-tree/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anfwzzice2xdqzp2sfao.jpg)
Rene Dub Expert in computer Repair
Tags: beginners, tutorial, productivity, career
Published: 2022-01-03 05:20:57

**Rene Dub** is a #computer #consultant and has been in the #business for over 10 years. His first priority is to make sure you and your business are up and running, no matter the cause of the problem. From clean-ups, virus removal, to installing devices, he does it all!
 
Read more about **[Rene Dub](https://renedub.medium.com/)**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngrkrrq3eq6nsxbyydvr.jpg)
My Chrome Extension
Tags: chrome, extension, javascript, html
Published: 2022-01-03 04:57:07

It is my first Chrome Extension pls install it and use it, I am 100 % sure it will give you better experience so use it now from the given link !!!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr56hhk1pkpe3iwh1dcc.PNG)
COMPLETE INTERNET MARKETING SOLUTIONS
Tags: webdev, devops, mobile, design
Published: 2022-01-03 04:52:03

At RG Infotech, we care for those and modified our **[Digital Marketing strategies](https://www.rginfotech.com/services/digital-marketing/)** according to the biz requirements to achieve desired results within the specific time-frame. We’ve achieved the tag of the prominent digital marketing company through serving more than 100+ global clientele in the last few years.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/im39fc89uudcpun0nq0c.jpg)
JavaScript Function Composition: What is Composition Function?
Tags: javascript, beginners, webdev, programming
Published: 2022-01-03 04:32:31

**Function Composition**: 

Just like real function in Mathematics that looks like **f(x)** so also this is found in programming languages like JavaScript.

JavaScript according to Wikipedia is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use JavaScript on the client-side for web page behaviour, often incorporating third-party libraries.

Function Composition is the combination of several functions into a smaller function. It is also an approach where the result of one function is passed on to the next function, which is passed to another until the final function is executed for the final result. Function compositions can be composed of any number of functions. Or better still, the composition function takes any number of functions and invokes them all one after the other.


```
function add (a, b) {
  return a + b;
}

add(2, 3)

// output: 5
``` 
The above code snippet is a simple form to write a function in JavaScript. That being done,
let's create several functions to the very end we have a smaller function in order to achieve function composition.

```
var addTwo = (a) => {
 return a + 2;
}

var addThree = (b) => {
 return b + 3;
}

addTwo(addThree(2))

// output: 7
```


**addTwo** function takes a value of a while **addThree** is a function that takes a value of b. Composing the two functions together JavaScript performs firstly the statement of a function that is inside another function i.e **addThree** function, the statement is b (which is 2 in this case), return 2 + 3 which results in 5.

Now, we have addTwo(5) since the addThree function has been performed.

addTwo(5) performs the function by adding two (2) to 5 which gives 7 hence our result.

*Importance of Composition Function*

There is importance to the usage of composition function which is the reusability of functionality at a very high level.

*Libraries for function composition*

1. [Lodash](https://lodash.com): One of the most popular libraries used by developers today. It is a JavaScript library that provides utility functions for common programming tasks using the functional programming paradigm.

2. [Ramda](https://ramdajs.com): A practical functional library for JavaScript programmers.

These libraries can be used to avoid implementing either function so you can focus​ on its uses of it.
"zsh: command not found: mysql" Macbook M1
Tags: mysql, zsh, macbookm1, mysqlserver
Published: 2022-01-03 04:01:17

If you are getting problem while opening mysql terminal using 

```
mysql -u root -p

"zsh: command not found: mysql" 
```

I have done whole soution how you can install on zsh shell go through this video : 

{% youtube 5jOyw1JGUOo %}
setup database for remote connect in vps
Tags: vps, beginners
Published: 2022-01-03 03:58:54

***beware of security***
mysql> CREATE USER 'root'@'%' IDENTIFIED BY 'PASSWORD';
mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION;
mysql> FLUSH PRIVILEGES;


if there’s a firewall installed, one should open the port on the firewall;

Ubuntu:
`sudo ufw allow 3306/tcp
sudo service ufw restart`

Run this:

`netstat -plant|grep ":3306"|grep "LISTEN"`

If it comes back with something like this:

`tcp        0      127.0.0.1:3306              0.0.0.0:*               LISTEN      1881/mysql`
This means that it’s bound to local only. To fix this, follow the appropriate guide below for your distro.

If it shows something like this:

`tcp        0      0.0.0.0:3306              0.0.0.0:*               LISTEN      1881/mysql`
This means it’s a firewall issue. Follow the Firewall guide below for your distro.

For 127.0.0.1 result

Ubuntu:

edit /etc/mysql/my.cnf, and look for this:
(in my case my ubuntu version is 20.* so my.cnf is /etc/mysql/mysql.conf.d/mysqld.cnf )

`bind-address=127.0.0.1`

and change it to this:
`bind-address=0.0.0.0`

Restart MySQL:
`service mysql restart`
And you should be good to go
I Accidently build a start-up for Gamers 😬 | Azuuk
Tags: showdev, javascript, react, python
Published: 2022-01-03 03:44:43

Few months back, I was looking into `Discord API` 🤩 **(Still One of the best API Documentation)**. There is nothing that you can't do with the Discord API, Just like YouTube API, Discord also have much more APIs then functionalities on their own platforms.

I created a new project called *Azuuk* (The name was totally random) (*I literally mean, totally RANDOM. I created a python script to generate random domain names*)

Started with 2 commands

- `npx create-react-app client`
- `django-admin startproject core ./server`

Now, at the present time, the project is live at [**azuuk.com**](https://azuuk.com/)

## What is in the Project?

Azuuk is a platform for **Youtubers**, **Streamers**, and other such **creators** who want to build their **subscriber base**.

## How does it works?

> [Login](https://azuuk.com/auth) with Discord first.

![Azuuk Login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xetwyx1fczk8f5yatn5n.png)

After you've successfully logged in, You must have been added to the `Azuuk's Discord Server`.

![Azuuk Discord Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19vduxq4zmgu7i6g1afc.png)

---

> Conduct a **Giveaway**

![Azuuk Giveaway](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ggxo50h7cflyymvol2e.png)

After Completely setting up the Giveaway. Just Post the giveaway by making it **Public**. A post on your behalf has now been posted in [Azuuk's Discord Server](https://discord.gg/n2MHnTTshv) (#giveaways channel). Azuuk's existing members can look into your post and can be redirected to your content (stream, YouTube video, etc.)

Now, you'll get a **Secret 6-digit code**. This is the code, using which your audience can participate into the giveaway.

After a desired number of participation, you can just complete the giveaway, by announcing the results inside `Winners` section.

**NOTE:** Result announcement is completely random.

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

---

> Results announcement

After you announce the results, another post have been sent to the Discord Server (#results channel), with Winners names.

Also, Winners get DM on Discord from a bot.

![Results announcement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66fg9m58qdalkyvjnl2r.png)

---

This is all about [Azuuk](https://azuuk.com/) a **Platform for Gamers, build by Gamers**

You guyz can try out Azuuk once.

Thank you

Cheers
InVision Studio Usability Survey
Tags: ux, webdev, invision, design
Published: 2022-01-03 03:41:26


So it's one of those things you just put out there.
## RMIT User Centred Design Survey ##
And yay, just hoping someone can help me out with this quick 5 minute survey to do with the usability of InVision Studio for Windows. 

It would be greatly appreciated. 
[Survey lives here](https://forms.office.com/r/acbCSLsnQH)
DAO 101 (Twiter Space Links)
Tags: web3, blockchain, twitter, daos
Published: 2022-01-03 03:13:28


Here are the Jumbotron Links from [@syzygiess](https://twitter.com/syzygiess) and co-host [@courtready](https://twitter.com/courtready)'s DAO 101 Twitter Space tonight (Jan 2nd, 2020). I recommend following not only our host but some of the co-hosts and speakers, you can see all of them by visiting the [finished space on Twitter](https://twitter.com/i/spaces/1jMJgeDrVbmKL/peek).

- [What Is A DAO And How Do They Work?](https://consensys.net/blog/blockchain-explained/what-is-a-dao-and-how-do-they-work/)
- [Dissecting DAOs w/ 2022 projections for investors, creators, and developers](https://twitter.com/CECdontCEASE/status/1477780023964745733)
- [DAO Landscape](https://twitter.com/thelifela/status/1477786117281751040)
- [Unlearning DAOs & Discord Link](https://twitter.com/unlearningx/status/1477784994856804354)
- [Learning about DAOs](https://twitter.com/NFTflea/status/1438531919843663873)
- [Decrypt's 11 most interesting DAOs of the year](https://twitter.com/decryptmedia/status/1477028002642874368)
- [Mirror Protocol supports a full suite of tools for running a “Media DAO”](https://twitter.com/bully_btc/status/1463215411680452610)
- [What is a DAO recording](https://twitter.com/WOLF_Financial/status/1473797288690696207)
- [World hunger #DAO @TheMon3yMom](https://twitter.com/BrownMoneyDoll1/status/1467180875947384832)
- [Copenhagen Consensus Center](https://twitter.com/thelifela/status/1477794147574505473)
- [Layer 1 flywheel, building community’s](https://twitter.com/thelifela/status/1477796076698554370)
- [Coopahtroopa | Social Tokens: Infusing DAOs with Purpose & Culture ](https://twitter.com/thelifela/status/1477800584522567681)
- [Mapping the Net-a-Porter of NFT marketplaces](https://twitter.com/thelifela/status/1477805279760699397)
- [Beyond anti‐bias education: changing conceptions of diversity and equity...](https://twitter.com/thelifela/status/1477811800041132034)
- [A Simple Tactic That Could Help Reduce Bias in AI](https://twitter.com/thelifela/status/1477812441706758147)
- [The Bias Blind Spot: People Are Often Unaware of Their Own Biases](https://twitter.com/willow_peNFT/status/1477812982352515073)
- [Can independent commissions create fair voting districts?](https://twitter.com/willow_peNFT/status/1477817441623285764)
- [Unlearning Discord](https://twitter.com/syzygiess/status/1477795248331898881)
- [Decentralized governance is…](https://twitter.com/willow_peNFT/status/1477831459880775687)
- [“De-schooling society” - book](https://twitter.com/willow_peNFT/status/1477837699235123200)