teleren/devto huggingface dataset:
useState hooks in react
Published: 2022-01-18 13:53:30

Hey,
It's my first post in **dev.to**, I am looking forward to learn  different types of technology and their implementations,peoples thoughts etc through this platform.
I am currently learning **Reactjs**

Today i learned about the **useState **hook in reactjs. It was interesting and at the same time it was much confusing but I got the concept behind it and then onwards I was able to code fastly. I also given a try to **useReducer** hook which is an alternative to useState hook and it should be used when a state depends upon the value of another state.It also helps to reduce the number states in the code thus we are able to reduce the code length.And it's the programmer choice to choose useState or useReducer.If the logic is not much complex then useState will be the better choice whereas in the case of complex code useReducer should be apt.

Thank you!
Testing a Text Field component integrating Mui's Text Field with React Hook Form
Tags: reacthookform, mui, testing, react
Published: 2022-01-18 13:46:57

### Subject Under Test

An input component integrating `TextFeild` of  `mui` with React Hook Form. It uses the `Controller` component from React Hook Form(RHF) and configures `TextField` to handle validations and more. I use this component instead of `TextField` from `mui` in all my forms. There are three benefits to this approach(adaptor pattern):

1. It provides RHF integration
2. It is a customised version of `TextField` with some common functions that meet the business requirements
3. It is an adaptor bridging the RHF forms and `mui` so that the form components do not depend `mui`, which made upgrading or replacing `mui` very easy.

### Target Users

The SUT's target users are developers, and it is to be used inside an RHF form only. Therefore the behaviours and tests are focused on the expectations of the developers.

### Behaviours

1. It inherits all the behaviours from `TextField` of `mui` and accepts all `TextField` props as-is.
2. It takes `name`, `formContext` and `defaultValue` required props and registers the `TextField` to the form context of RHF
3. It has two modes: edit mode and read-only mode.  In read-only mode, it is disabled and rendered as a standard(underline) `TextField`. In edit mode, it is rendered as outlined `TextField`.
4. It hides if `hidden` is true.
5. It builds in the `required` validation rule and takes a `required` prop.
6. It accepts validation rules and enforces them.
7. It formats numbers with thousands separator commas by default and accept `numericProps` of type `NumberFormatProps` from `react-number-format` for further customisation.
8. It defaults to size small.
9. It takes an optional `onChange` prop. On change,  it will trigger the given `onChange` method and update input value.

### Code
{%gist
https://gist.github.com/rexebin/5ae75b0a625bb5e126e116357aa8956c
%}
### Notes

1. `TestComponent` shows the usage of the SUT. Its props are extended from the SUT's props so that the tests can configure the SUT on the fly.
2. For good orders, the tests are grouped into four categories: appearance, behaviours, validations and number formatting.
3. Appearance tests depend on how `mui` renders its `TextField` and assert the class names rendered by `mui`.
4. Validation tests depend on RHF's validations and the render helper text of `TextField`.
5. The tests use `userEvent` to mimic end-user browser interactions.
6. `onSubmit` is mocked and cleared before each test.
7. `EpicTextField` is a styled `TextField` with `@emotion/styled`
tsParticles - Start confetti animation with just a click
Tags: codepen, showdev, javascript, html
Published: 2022-01-18 13:44:00

<p>tsParticles - Start confetti animation with just a click</p>

<p>Read more on GitHub: <a href="https://github.com/matteobruni/tsparticles" target="_blank">https://github.com/matteobruni/tsparticles</a></p>

<p>Website: <a href="https://particles.js.org" target="_blank">https://particles.js.org</a></p>

{% codepen https://codepen.io/matteobruni/pen/YzrMVew %}

{% github matteobruni/tsparticles %}

{% link https://dev.to/matteobruni/tsparticles-1390-released-2111 %}
Do you know docker can slove ssl certificat issue
Tags: docker, certbot, devops
Published: 2022-01-18 13:39:10

Thanks to the cerbot team and there official docker image 
https://hub.docker.com/r/certbot/certbot/

We have been able to solve the let's encrypt root certificate change without changing anythings on our device. 
https://letsencrypt.org/docs/dst-root-ca-x3-expiration-september-2021/


More info on my blog here

https://fredlagage.fr/certificat-ssl/

thanks for reading.
Senior versus Junior Developers
Tags: beginners, career, leadership, motivation
Published: 2022-01-18 13:34:11

---
title: Senior versus Junior Developers
published: true
description: I'm so tired of people treating me like a high school kid who just wrote her first hobby program on this platform. This affects me for the worse.
tags: Beginners, Career, Leadership, Motivation
series: Better Practices
//cover_image: https://direct_url_to_image.jpg
---

I've been switching teams with a bit more frequency recently and have seen a few things that kept bouncing around in my head.

Then, I came across a [tweet](https://twitter.com/rakyll/status/1465826318998593542?s=20) that went something like this, "I'm so tired of people treating me like a high school kid who just wrote her first hobby program on this platform. This affects me for the worse." There was more, but you get the idea.

## The Problem

What I've seen is that there is a clear scale of assumptions that we make as developers about other developers.

| Assumed Skillset | Reality | Assumed Skillset |
|------------------|---------|------------------|
| Developers that assume that no one else has the skillset they do. | Everyone | Developers that assume that other developers are at their skill level or better. |

It took a while for this to crystalize for me because I often work on teams with individuals from my own company. My assumption there is that they know what they are doing; that assumption is almost always spot on.

## The History

A few months back, my team (mostly co-workers from my company with a few full time employees from the client) shifted focus to work on a new product.

In our introductions, I heard one of the Junior Developers mention that he wanted to learn more front-end development. Since this is my area and I had been working with him for several months, I saw this as my failure.

I had, quite simply, assumed he had the skillset or no interest in improving the skillset.

I quickly started training and pairing sessions.

Now, I've switched teams and and making a concerted effort not to make assumptions about what my new team members (all client full time employees) know or are interested in.

There will be training and pairing sessions for those that are interested.

## Conclusion

Then, I came across the post I mentioned above.

I realized that I had been bouncing all around this scale as a Senior Developer (and probably have been for a while).

I pride myself on being an instructor, writer, and presenter ... now I need to work on being a better Senior and work with those I am right next to, providing what they need more effectively without all the assumptions.
Simple Quiz Project Using Vue
Tags: vue, javascript, quiz
Published: 2022-01-18 13:21:49

Simple Quiz app using vue js

#### Link To Code

[Github Link](https://github.com/medanincode/vue-simple-quiz)

#### Additional Resources / Info

Project is demo on [https://simple-quiz-vue.netlify.app/](https://simple-quiz-vue.netlify.app/)


![Simple Quiz](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ofznbdms8dbjhl73mim.png)
How to get the ASCII value of a character in C++?
Tags: cpp, ascii
Published: 2022-01-18 13:20:21

Have you ever wondered how does the computer understands what key we have pressed on the keyboard? The computer cannot understand the human language i.e. English or any other language. It just understands the numerical language, so every character on the keyboard has a numerical code behind it which is called ASCII code. In this article, we are going to see how to find the ASCII code of a character in C++ but before that, let’s see what an ASCII code is. 

ASCII Code:
ASCII stands for American Standard Code for Information Interchange. It is an encoding standard for electronic communication and represents text in computers and other electronic devices. This code is used to represent information in computers as computers can only understand the numerical language. Whenever you press a key on the keyboard, the ASCII code associated with that key is sent to the CPU which is then converted to the binary representation, and operations are performed on it.

Now that we understand what an ASCII code is, let’s move to the program to find the ASCII code of a character in C++:

Find ASCII Value of a Character in C++:
To find the ASCII value of a character, we just need to convert the character to an integer using explicit typecasting. Type Casting refers to converting one type of data to another. The syntax for converting a character to an integer is as follows:

int variable = (int)character;
Program:

#include <iostream>
#include <conio.h>

using namespace std;

int main()
{
    char ch = 'a';
    int ASCII = (int)ch;
    
    cout<<"Character: "<<ch<<endl<<"ASCII Code: "<<ASCII;

    return 0;
}
Output:

Character: a
ASCII Code: 97
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9q5o5qijfnbhvcuo8qwo.jpg)
A Complete React Todo App using React, Redux, Framer Motion
Tags: react, javascript, redux, beginners
Published: 2022-01-18 13:09:09

## React Todo App.

A complete todo application with all features.

Made with ❤️ by [Shaif Arfan](http://instagram.com/shaifarfan08/)

**live demo: [https://wc-react-todo-app.netlify.app/](https://wc-react-todo-app.netlify.app/)**

**Watch On Youtube: [https://youtu.be/W0Uf_xu350k](https://youtu.be/W0Uf_xu350k)**

**More Projects on [https://github.com/ShaifArfan/wc-project-tutorials](https://github.com/ShaifArfan/wc-project-tutorials)**

---
{% youtube W0Uf_xu350k %}

---

## Project Description

In the project, we will be creating a Complete Todo Application with all features. We will do all the CRUD operations. We will to use `React.js` and to manage our states, we will use `Redux`. Also we will learn to make simple animations using `Framer Motion`. This will be a complete `beginner` friendly app. Hope you enjoy it.

## What we are going to learn/use

- [React](https://reactjs.org/)
- [React Redux](https://redux.js.org/)
- [Framer Motion](https://framer.com/motion/)
- [React icons](https://react-icons.netlify.com/)
- [React Hot Toast](https://react-hot-toast.com/)
- More...

## Requirements

- Basic ReactJs knowledge
- Basic HTML, CSS knowledge

## Starter files

You can find all the starter files in `starter-files` branch. You can to go to the `starter-files` branch and `download zip` the the starter files or You can clone the project and git checkout to `starter-files` branch.

## Getting Started

The recommended way to get started with the project is Follow the [YouTube tutorial](https://youtu.be/W0Uf_xu350k). You will find all the step-by-step guides. Or you Can start the project on your own by following the guide below.

After getting the starter files, you need to go the file directory and run

```shell
npm install
```

and after that start the dev server.

```shell
npm start
```

## Tools Used

1. Favicon: [Flaticon.com](https://www.flaticon.com/)
1. Code Editor: [VS Code](https://code.visualstudio.com/)

---

## FAQ

### Q: How can i get started?

You can get started by following the [YouTube tutorial](https://youtu.be/W0Uf_xu350k) of this project. Here is the full tutorial video link: [coming soon].

### Q: What i need to start the project?

Just open your favorite code editor and follow along with the [YouTube tutorial](https://youtu.be/W0Uf_xu350k).

### Q: Who the project is for?

The project is for the people who wanna get more skilled in `ReactJs`.

---

## Feedback

If you have any feedback, please reach out to us at [@web_cifar](http://instagram.com/web_cifar)

## Support

For support, join our [Community Group](http://facebook.com/groups/webcifar).

## License

[MIT](https://choosealicense.com/licenses/mit/)

**More Projects on [https://github.com/ShaifArfan/wc-project-tutorials](https://github.com/ShaifArfan/wc-project-tutorials)**

Happy Coding! 🚀
How to pass multiple parameters in URL laravel ?
Tags: laravel, php
Published: 2022-01-18 13:03:02

Today we are going to know How to pass multiple parameters in URL laravel. I would like to show you how to create functionality to pass multiple parameters in the laravel application.

## First, what we’re doing here, This is the example :


![pass multiple parameters in URL in laravel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6yft77net20e57gltdh.PNG)

Please See below code - [https://8bityard.com/pass-multiple-parameters-in-url-laravel](https://8bityard.com/pass-multiple-parameters-in-url-laravel)

Follow for More Related Laravel Tutorials : [https://8bityard.com/](https://8bityard.com/)
Deprecation of addHook and clearHooks
Tags: iot, cumulocity, iotpatform
Published: 2022-01-19 13:45:02

---
title: Deprecation of addHook and clearHooks
published: true
date: 2022-01-18 12:55:12 UTC
tags: iot, cumulocity, iotpatform
canonical_url: https://tech.forums.softwareag.com/t/deprecation-of-addhook-and-clearhooks/254548
---

 **Device registration**

Registering devices to the Cumulocity-IoT platform is one of its essentials. While bringing the UI in that area to the next level and migrating parts of it, we found two methods (addHook, clearHooks) that are completely unused in our code-base.

```
function addHook(injectionFunction) {
      registrationHooks.push(injectionFunction);
      return function () {
        const ix = registrationHooks.indexOf(injectionFunction);
        if (ix > -1) {
          registrationHooks.splice(ix, 1);
        }
      };
    }

function clearHooks() {
      registrationHooks.length = 0;
    }

```

When using `addHook` you can provide a method that would be invoked whenever a new registration to the platform happens. A “new registration” would be every creation of a managedObject while accepting the new device registration request.

The clearHooks method simply sets the length of added hooks to zero. Given checks .length > 0 will return false and therefore not run any code.

Why we are deprecating these methods?  
In connection with scalability, we want to avoid wildcard-subscriptions as much as possible. Deprecating these methods is one step in that direction. Already mentioned: our internal code-base is not using addHook and clearHooks anymore.

You need a realtime listener to /managedObject/\*  
Again: our recommendation is to avoid it, but in case you need this you can use the [RealtimeService](http://resources.cumulocity.com/documentation/websdk/ngx-components/classes/RealtimeService.html) or better [ManagedObjectRealtimeService](http://resources.cumulocity.com/documentation/websdk/ngx-components/injectables/ManagedObjectRealtimeService.html) which already extends the RealtimeService.

_You have doubts to deprecate and delete these methods in the future? Comment on the
[original article] (https://tech.forums.softwareag.com/t/deprecation-of-addhook-and-clearhooks/254548) in the Software AG Tech Community and they´ll get back to you._
Apply Filter while redirecting links using React.JS and Umi.JS
Tags: react, javascript, routing, webdev
Published: 2022-01-18 12:35:15

Recently, working on a project (Which is built using ReactJS and routing is based on Umi.JS). And, I got a scenario where, I created a statistics page (in which I am showing the count of every different type of data of a particular category), and then I have to create a button of each category, which should push to that particualr category page (using history.push()).


![Branch Statistics page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5ng6dpp66mnl615aftb.png)

Now, initially, when I click over "View Complaints" button then it used to just take me to _Complaints_ page. 

![View Complaints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vetkegyua1hph3pk7mq1.png)

Now, what I want to do is when I click on the "View Complaints" then instead of just pushing the history to that specific page, it should even pass the specific `branchId` as a `query`, which will behave as a filter over the pushed page (complaints page). 

## What I did?
At first, I focused on the button to be clicked, which means "View Complaints" Page. 

At first, my button code was looking like this...

```javascript
 <Button
  type="primary"
  onClick={(event) => {
  event.stopPropagation();
  history.push(`/complaints/all`);
  }}>
  View Complaints
 </Button>
```
As, I already mentioned that I have to send branchId as a query to apply filter, so I have to send the query with the path, inside `history.push()` and now, it looks like this. 

```javascript
<Button
type="primary"
onClick={(event) => {
event.stopPropagation();
history.push({
pathname: `/complaints/all`,
query: {
branchId: profileId,
  },
 });
}}>
View Complaints
</Button>
```
and now with this thing, it will pass query, when you click on the button. 

![query id](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7tmprd005vdz0xzclwa.png)

But, this will still not apply the filter, and for that, I have to pass query to the filter function, which is eventually getting the filtered data from the API. 

```javascript
import { useLocation } from 'umi';

const { pathname, query: branchQuery } = useLocation();
```

and then, I am calling the query inside the function, where we are dispatching the API, with the query as a payload. 

```javascript
const getFinishedComplaints = () => {
    let query = {
      statusId: 'CRQ_CLOSED',
      customerId: currentUser?.personal_details?.organizationDetails?.orgPartyId,
      keyword: searchText,
      startIndex: completeStartIndex,
      viewSize: completeViewSize,
    };

    if (branchQuery?.branchId) {
      query = { ...query, branchId: branchQuery?.branchId };
    }

    dispatch({
      type: 'product/getFinishedComplaints',
      payload: {
        query,
      },
    });
  };
```

And, in this way, you can easily apply filter functionality, by passing query using history.push() of Umi.js. 

## Alternative way 
You can even use `react-router-dom` for above given functionality.
Laravel 9: Stub Migrations!
Tags: laravel, php, webdev, laravel9
Published: 2022-01-18 12:34:03

Soon, Laravel 9 wil release and there are some new features that we can use them. 

This series is going to be a sequel about Laravel framework version 9 and in each article we will review a new feature!

### 1. Laravel 9: Stub Migration

Since Laravel 8.37, there is no need to create a migration with a specific class name. If we have so many migrations and probably forgot about their class name or we are afraid to have collisions in new migration, this feature coming handy and nice.

According to the [pull request](https://github.com/laravel/framework/pull/36906) on github this feature is backward compatible.

##### So how do we can create it?

Just run this command: `php artisan make:migration` and it will give you this:

``` php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 

return new class extends Migration {
    /**
     * Run the migrations.
     *
     * @return void
     */

    public function up()
    {
        Schema::table('users', function (Blueprint $table) {

            $table->string('nick_name')->nullable();
        });
    }
};

```
It's an anonymous migration which will do any things to any model you decide, just you have no worries about class names anymore.

That's it... Any question?
GitLab CI/CD Tutorial For Beginners | Learn GitLab In 1 Hour
Tags: beginners, programming, tutorial, gitlab
Published: 2022-01-18 12:29:47

{% youtube B68jcGfH4C8 %}

In this GitLab Tutorial for beginners and experienced QA engineers, deep dive into the fundamentals of CI/CD, which helps you understand what is CI/CD in DevOps, what is CI/CD Pipeline and the difference between Continuous Delivery and Continuous Deployment. Further, this video explains what is GitLab trigger, what are GitLab environment variables, and how to set environment variables in GitLab. By the end of this video, you will be able to build and run an automated tested GitLab CI/CD pipeline and perform cross browser testing using Lambda Test. 

Also Learn:

- What is CI/CD in GitLab?
- How do you write CI/CDs in GitLab? 
- How do you create a GitLab CI CD pipeline?
- What is Gitlab trigger?
- How do I run a GitLab pipeline?
- How do you run CI/CD pipeline?

Key Takeaway:
◦ You will learn what is CI/CD and the fundamentals of Continuous Integration, Continuous Deployment, and Continuous Delivery.
◦ You will learn the benefit of GitLab CI/CD and GitLab CI/CD Pipeline
◦ You will learn about environment variables, cached dependencies, triggers, and parameters in GitLab CI/CD
◦ You will learn to configure a CI/CD pipeline with GitLab CI/CD using LambdaTest
Software Development Outsourcing: How to Choose the Right Model?
Tags: outsourcing, softwaredevelopment, development, teamextension
Published: 2022-01-18 12:28:41

{% youtube RleIkbugKiU %}
Hi!
Let's talk about software development outsourcing models. What is the best way to cooperate with a software studio or other software development outsourcing companies? Team extension or Dedicated development team? Is there an alternative for them? What are the pros and cons? Which software team model fits your company? Get your questions answered.

Learn about:
🟣 Cooperation with software studios and how to choose the right model of cooperation with developers
🟣 Team extension model
🟣 Dedicated development team
🟣 Hiring freelancers
🟣 How to choose the right outsourcing software development model for the business?
🟣 What to pay attention to choosing the cooperation model?
🟣 Story of a software development outsourcing partner

Enjoy! You can also read the article at [Frontend House](https://frontendhouse.com/experts-zone/software-development-outsourcing-how-to-choose-experts-zone-talks-15)
Java Main Method ve “Merhaba Dünya”
Tags: java, main, helloworld
Published: 2022-01-18 12:28:24

JVM tarafından bir Java uygulamasının çalışabilmesi için “main methodunun” olması zorunlu kılınmıştır.

**Main method’unun temel özellikleri**

- Public olmalıdır.
- Method adı “main” olmalıdır.
- Static olmalı ve dönüş tipi void olmalıdır. (Program işini bitirse bile, JVM çalışmaya devam edebileceğinden, dönüş değerinin bir önemi  olmayacaktır. Bu sebeple void olmalıdır.)

**Örnek program**

```
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Merhaba Dunya"); 
    }
}
```

**Program Çıktısı**
“.java” uzantılı dosyanın javac ile derlenmesi ve sonrasında “.class” uzantılı dosyanın çalıştırılması.

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