teleren/devto huggingface dataset:
Episode #3 of Revisiting Product Engineering - Co creation
Published: 2022-12-19 20:30:21

When two or more multiple people work together to a common problem I refer to this as co creation. In this blog I will try to evaluate this practice from multiple dimensions. This is based on my experience,observations and failures so far which can change in future based on my new learning.
I see this way of working from these dimensions.

1. Creating value individually or together.
2. Changing habits and building new ones.
3. System which empowers this style of working.
4. Group productivity or individual productivity.
5. Culture as everyone's responsibility.
6. Different skills level in the team.
7. Granularity of accountability. 
8. Tactical empathy and team happiness. 
9. The trap of single person knowledge. 
10. Different styles of co creation. 
11. Knowledge transfers in the team.

## Culture as everyone's responsibility

For quite a long time product engineering community has been following the notion of concepts like` best practices`. I think this has effected us so much that it is very easy to fall victim of the notion that`some work should be done some way`. It is the habits which are formed over the period of time. Our reflexes are built this way which we have to fight against. I would propose to call it`context driven decisions`. This enables us to have an understanding that whatever practices we choose is because of the context of we are in. If we change the context the practices might change. This idea gives us an understanding even the style of working is context dependent. What is important is `context driven decisions` which are agreed upon by the team. What I want to highlight here is that culture is not an individual's job. Do we have culture managers or culture owners ? It is everyone's responsibility to put effort and come to decisions based on the culture that we wish to have in the team. This is like gardening. Its not a one time effort. Its a continuous effort made by every member of the team to put effort for the garden they wish to have. Without the collective effort and team agreed upon context driven decisions any practice or any idea will not be able to succeed. Also like gardening is a continuous effort else the plants will die similarly the context is always changing. Culture is an evolving phenomenon which is a side effect of team's effort. [This is the survey which reflects the impact of culture on people](https://www.cnbc.com/2022/04/13/toxic-company-culture-is-the-no-1-reason-workers-are-quitting-jobs.html). I would leave this to you to think `who is the culture owner ? Is it any individual in any role or is it the team as a whole ?`
How to Install MySQL on Linux
Published: 2022-12-19 20:07:23

Read the installation guide for MySQL Server 8.0 and 5.7 on CentOS Linux distribution: install, enable remote connections, remove, upgrade and manage MySQL on Linux both from the command line and from a specialized GUI automation tool - https://www.devart.com/dbforge/mysql/how-to-install-mysql-on-linux/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iom3qgtx8s6z1h4r9cdl.png)
How to use different version of laravel in windows?
Published: 2022-12-19 19:57:13

You can run Laravel using 3 ways 
1. Artisan commands
2. Docker
3. Using Xampp/wampp
4. Using Laragon

The most common way for local development is php artisan for that you need only correct version of php.

**The best way to run multiple version of php is changing them in environment variable.**
For example I have two xampp folders, xampp81 and xampp74 which I only use for php folder. Don't run apache on any of them, "php artisan serve" will alone do the job. 

hence when I run laravel 8 or 9 I change the environment variable to C://xampp81/php
and when I run laravel 6 or 7 I change the environment variable to C://xampp74/php

**Second way is docker.**
On docker you could run any image nginix, apache, php-fpm.
The problem with docker I feel is you require more ram and processing, and also there's little extra effort needed for running laravel 9 with vite.
On docker you can also use artisan image directly
Or you can use my repo to run different versions, Just change the env file and enjoy
https://github.com/yogeshgalav/dompp
If you are new to docker I also have blog explaining this repo as well, [Check here ](https://dev.to/yogeshgalav7/title-fjb) .

**Third way is to use Xampp.**
If you use Xampp run apache server of xampp81 and xampp74 on different ports.
For example let xampp81, apache run on port 80 and change the port of xampp74, apache to 8081
For this you need to change port 80 to 8081 in xampp74/apache/httpd.conf and xampp74/apache/httpd-ssl.conf files.
However I found that most of the time xampp apache or mysql gives error that are resolvable but through tedious process.

**Best way is to use Laragon.**
My new preference is Laragon, I heard about it late hence editing this post and writing about it, it's the best in performance, DX, version switching and no more xampp like errors. it also provides folder based url like laravelApp.test which can be accessed directly without running any artisan command.

You can also automate the task of running same npm or similar commands by using vscode extension: [Restore Terminal](https://marketplace.visualstudio.com/items?itemName=EthanSK.restore-terminals) 

I hope you enjoyed reading this.
Please give your love and support to my Github open source repositories.

Thank You and Have Nice Day!
Star Rating Feedback using Javascript
Tags: javascript, css, react, beginners
Published: 2022-12-19 19:48:08

In this tutorial has helped you learn how to create star rating feedback using javascript

First of all, create simple form

```
<form method="GET" name="feedback" action="#" onsubmit="feedBack(); return false">
      <input type="radio" name="star" id="rate" value="">
      <textarea cols="30" id="comment" placeholder="Describe your comment"></textarea>
</form>
```

while development use the [fontawesome icons](https://fontawesome.com/icons) and [google fonts](https://fonts.google.com/)

Now get the input values using **javascript**
```
function feedBack() {
 var rating_Count = document.querySelector("input[name=star]:checked").value;
    var comment = document.getElementById('comment').value; 
document.getElementById('comment_text').innerHTML = comment;
    document.getElementById('star_count').innerHTML = rating_Count;
  }
```

Adding simple validation

`
document.getElementById('comment').value === ''
`
if value is empty shown error message.



Youtube Video : https://youtube.com/shorts/2LLre0ld1pk?feature=share
Demo : https://star-rating-feedback.vercel.app/
Portfolio : https://rajamanickam.vercel.app/
Github : https://github.com/erajamanickam/star-rating-feedback
Codepen : https://codepen.io/erajamanickam/pen/dyjydOj
An Ultimate Guide on MariaDB and MySQL Database Backup | dbForge Studio for MySQL
Published: 2022-12-19 19:44:58

Check out this illustrated and detailed guide to backing up and restoring one or more MariaDB databases using the intuitive graphical user interface - dbForge Studio for MySQL - https://riptutorial.com/misc/topic/10000023/an-ultimate-guide-on-mariadb-and-mysql-database-backup---dbforge-studio-for-mysql

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84vrhq1pkehmdyh8yebg.png)
Split and Join: The Dichotomy of Strings and Arrays
Tags: javascript, strings, arrays
Published: 2022-12-19 19:38:13

---
title: Split and Join: The Dichotomy of Strings and Arrays
published: true
description: The functional dichotomy of string split and array join
tags: JavaScript, strings, arrays
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-16 21:08 +0000
---
I was working another project this week and I wanted to talk about the `.splice()` function in JavaScript...but then I started down a rabbit hole of having to write about other things, because there's some other things you should probably understand before using `.splice()`.

For starters, let's talk about the relationship between Strings and Arrays in JavaScript.  This will likely be a short series of articles.  It might have been written before by someone else, but I'd like to give my own interpretation.


Strings and Arrays are like Yin and Yang.  You use `.split()` to split an string into an array. You use `.join()` to join arrays into strings.

If you can exercise this dichotomy of two fundamental JavaScript types, you can understand the relationship between strings and array.

## String `split()`, Array `join()`

Whenever there is an array of strings requested, it is probably better to simply use `.split()` rather than tediously adding every quotation mark and comma.

> In these examples, there will be two comments. One showing the return value, and one showing the value of `arr`, `str`, or other variables. This will be important to note throughout the examples

```javascript
let arr;
// Returns 'undefined'
arr = "Whoever controls the splice controls the universe".split(" ");
// Returns: ["Whoever", "controls", "the", "splice", "controls the", "universe"]
// arr:     ["Whoever", "controls", "the", "splice", "controls the", "universe"]
```

Conversely, what happens when we take that array and put it back together?

```javascript
let str;
// Returns 'undefined'
str = ["Whoever", "controls", "the", "splice", "controls the", "universe"].join(" ");
// Returns: "Whoever controls the splice controls the universe"
// str = "Whoever controls the splice controls the universe"
```

You may have noticed that when we declare a variable.  If we do our declarations on the same line as the assignment, the `undefined` is returned, but `arr` and `str` have value.

```javascript
let str = ["Whoever", "controls", "the", "splice", "controls the", "universe"].join(" ");
// Returns: undefined
// str = "Whoever controls the splice controls the universe"
```

For clarity, I will declare variables separate when we can in this sprint of short articles.

In the next article, I will talk about concatenation.
Chunk multidimensional array by value in Laravel
Tags: laravel, php, array
Published: 2022-12-19 19:37:58

Have you ever needed to put arrays with same value together? It's super easy using collections in Laravel!

Just imagine you have the following array:

```
$people = [
    ['name' => 'Alex', 'age' => 25],
    ['name' => 'Martin', 'age' => 32],
    ['name' => 'John', 'age' => 25]
];
```

And want to put people with same age into same groups. Using collection in Laravel you can do it in one line:

```
$chunkedByAge = collect($people)->chunkWhile(fn($v, $k, $c) => $v['age'] == $c->last()['age']);
```
Happy coding!
How to setup Vitest with React Testing Library
Tags: react, webdev, javascript, beginners
Published: 2022-12-19 19:27:05

Vitest is a fast unit testing framework, like jest but faster. For React applications you can use Vitest too and obviuosly together with React Testing Library is possible too. In this video we will see how you can setup up both Vitest and React Testing Library to work together.

{% youtube zU_RZ5SCUzs %}
How to configure Provider in Terraform
Tags: terraform, cloud, cloudnative, cloudskills
Published: 2022-12-19 19:00:00

Terraform is a multi-cloud viable IaC technology and breaks the functionality to communicate with specific cloud provider APIs (SaaS providers or other APIs) down to providers.

A provider is a logic module that you use to interact with a specific cloud provider like AWS.

Terraform providers can be categorized into community-driven providers and those providers maintained by the Hashicorp team directly.

## Specifying a Provider

A provider must be specified in the root module of a Terraform project. 

It is a best practice to define the provider in a `[providers.tf](http://providers.tf)` separate from the actual IaC scripts in the root module. This makes it easier to locate the provider configuration in a Terraform project.

But it is theoretically possible to place a provider configuration in one of the Terraform scripts of the root module.

It is a best practice to expose credentials and configuration values through variables in the provider configuration, so you don’t have to hard code any values or potentially commit them to Github.

### AWS Provider

The AWS provider can be configured with a profile or direct technical user credentials through the `AWS_SECRET_KEY` and `AWS_SECRET_ACCESS_KEY` .

The provider requires basically two things

- your `region`
- credentials for your AWS account (technical IAM user)

### Specify Credentials through AWS Profile

Providing the credentials through the `~/.aws/credentials` file that stores one or multiple access and secret access keys for AWS profiles is a good practice. You may change the profile in the future or rotate the AWS credentials of the technical users which has an immediate effect on the provider.

This has also the added benefit that you don’t have any hard credential values in your code files.

The Terraform provider config will assume that your AWS credentials file is on path `~/.aws/credentials` by default, but you can specify a custom path with `shared_credentials_file` .

```jsx
terraform {
  required_providers {
    aws = {
      source = "hashicorp/aws"
      version = "4.41.0"
    }
  }
}

provider "aws" {
  region = "${var.region}"
  profile = "${var.profile}"
}
```

### Specify Credentials directly

You can specify an AWS IAM user directly in the provider configuration through the `access_key` and `secret_key` parameters.

Do not hard-code any secrets into the provider config in this case and make sure you use environment variables and declare variables (without default value) for these credentials.

```jsx
terraform {
  required_providers {
    aws = {
      source = "hashicorp/aws"
      version = "4.41.0"
    }
  }
}

provider "aws" {
  region = "${var.region}"
  access_key = "${var.access_key}"
  secret_key = "${var.secret_key}"
}
```

The variables in this case can be defined through

- the CLI: `-var access_key="..." -var secret_key=".."`
- environment variables: `export TF_VAR_access_key="..."; export TF_VAR_secret_key="..."`
How to design a cool form in React js
Published: 2022-12-19 18:31:49

Hi today we are going to create a login form in [Reactjs](https://reactjs.org)

1.  First we define our component in our [login.componentn.jsx](https://github.com/login)

```
import {
    signInWithGooglePopup,
    createUserDocumentFromAuth,
  } from '../../utils/firebase.utils';
import Register  from '../register/register.component'

const Login = () => {
    const logGoogleUser = async () => {
        const { user } = await signInWithGooglePopup();
        const userDocRef = await createUserDocumentFromAuth(user);
      };

    return (
        <section>
            <h1>Sign In</h1>
            <button onClick={logGoogleUser}>Sign in with google Popup</button>
            <Register />
        </section>
    );
}

export default Login;
```

2 Run `npm start` and see what you have done
What is ChatGPT and why should you care?
Tags: programming, beginners, machinelearning
Published: 2022-12-19 18:23:41

ChatGPT is a cutting-edge language processing model created by OpenAI, a company famous for its AI-based products like GPT-3 or DALL-E.

In this video you will learn:

- What ChatGPT is capable of
- What ChatGPT is less suited for
- Why ChatGPT can be dangerous
- Will ChatGPT replace programmers?

{% embed https://youtu.be/SyT4FCyKUiE %}
How to implement Paystack payment integration in Nodejs
Tags: payment, node, paystack, webdev
Published: 2022-12-19 18:07:08

Here is a general outline of the steps you can follow to integrate Paystack payment into a Node.js application:

1. Sign up for a Paystack account and obtain your API keys from the Paystack dashboard.

2. Install the Paystack Node.js library by running the following command in your project's root directory:

```
npm install --save paystack

```
3. Import the Paystack library in your Node.js file:

```
const Paystack = require('paystack')('your_secret_key');

```
4. Use the Paystack library to initiate a transaction. For example:

```
Paystack.transaction.initialize({
  email: 'customer@email.com',
  amount: 10000 // in kobo
}).then(function(body){
  // send the authorization_url in the response to the client to redirect them to
  // the payment page where they can make the payment
  res.redirect(body.data.authorization_url);
});

```
5. After the customer completes the payment on the Paystack payment page, they will be redirected back to your application's callback URL. At this point, you can verify the transaction using the Paystack library and complete the payment process by marking the transaction as successful.
This is just a high-level overview of the process. You can find more detailed documentation and examples on the Paystack website (https://developers.paystack.co/docs/getting-started).
AWS is powering the continued advancement of Autonomous Vehicle (AV) development.
Tags: webdev, aws, selfdrivingca, cloudnative
Published: 2022-12-19 17:53:10

Developing and deploying Advanced Driver-Assistance Systems (ADAS) and AV Systems requires a development platform with highly scalable compute, storage, networking, as well analytics and deep learning frameworks. This platform requires capabilities that allow for the collection, ingestion, storage, processing and analytics, labeling and annotation, map development, algorithm and model development, simulations, verification and validation, and workspace management functions (inclusive of MLOps and DevOps). Leading automotive customers turn to AWS as their ADAS/AV development platform for our breadth and depth of managed services, solutions, experience, and partner community to deliver the architecture and technology required for to develop safe, reliable, and cost-optimized autonomous and ADAS systems.
Benefits
Unmatched compute storage and network scale
AWS solves petabyte-scale data processing, storage, and management needs by delivering thousands of cores of compute for development and validation.
Accelerate time to market
Building on AWS helps customers optimize their software engineering to be more agile, reducing development and validation costs and supporting a faster time to market.
Multiple ways to control cost
AWS has the most classes of storage of any cloud resulting in increased cost efficiency because data can be configured and paid for based on the frequency of access, durability, and availability requirements.

Thanks & Regards,
Nashet Ali.
Cloud Expert.
Difference between GraphQL and Apollo-GraphQL..
Tags: graphql, programming
Published: 2022-12-19 17:50:00

_GraphQL is a query language for your API that allows clients to request specific data from the server. It provides a flexible and efficient way for client applications to retrieve and manipulate data from the server, without having to know the underlying database structure or API endpoints.

Apollo is a suite of tools for working with GraphQL, which includes the Apollo Server and Apollo Client libraries. Apollo Server is a server-side JavaScript library that helps you build GraphQL APIs, while Apollo Client is a client-side JavaScript library that allows you to consume those APIs from your front-end application.

In other words, GraphQL is the language you use to define your API and query data, while Apollo is a set of tools that make it easier to implement and use GraphQL in your application.

Here are some key differences between GraphQL and Apollo:

GraphQL is a query language, while Apollo is a set of tools for working with GraphQL.
GraphQL defines the structure and capabilities of your API, while Apollo helps you implement and use that API in your application.
GraphQL is used to request data from the server, while Apollo provides a way to consume that data in your client application._
To set up a Node.js server with the Express web framework and a MongoDB database using Mongoose and MongoDB Atlas.
Tags: node, mongodb, express
Published: 2022-12-19 17:43:23

1. First, make sure you have Node.js and the MongoDB Atlas CLI (command line interface) installed on your system. If you don't have them already, you can download and install them from their respective websites.

2. Create a new Node.js project by running the following command in your terminal:

```
npm init -y

```
3. Install the required dependencies by running the following command:

```
npm install express mongoose

```
4. Create a new file called server.js and add the following code to it:

```
const express = require('express');
const mongoose = require('mongoose');

const app = express();

// Connect to the database
mongoose.connect('mongodb+srv://<username>:<password>@cluster0.mongodb.net/test?retryWrites=true&w=majority', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
  console.log('Connected to MongoDB Atlas');
});

// Define your model(s)
const User = mongoose.model('User', {
  firstName: String,
  lastName: String
});

// Start the server
app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

```
5. Replace <username> and <password> with the appropriate values for your MongoDB Atlas account. You can find these values in the "Connect" section of your cluster in the MongoDB Atlas dashboard.

6. Run the server by executing the following command:

```
node server.js

```
7.Your server should now be up and running, and you should be able to interact with the database using Mongoose. You can use the User model to create, read, update, and delete records in the users collection.
For example, you can add the following code to your server file to create a new user in the users collection:

```
app.post('/users', (req, res) => {
  const user = new User({
    firstName: 'John',
    lastName: 'Doe'
  });

  user.save((err, user) => {
    if (err) return console.error(err);
    res.send(user);
  });
});

```
That will be all, hope you found it helpful ? happy coding...
How to create a simple range function in JS?
Tags: javascript, functional, programming, coding
Published: 2022-12-19 17:39:34

**
## Functions in JavaScript:
**
The range function:
Write a range function that takes three arguments, start,end and step. And returns an array containing all the numbers from start up including the end.
--With the step argument:
If no step is given, the elements go up by increments of one, corresponding to the old behavior. The function call range(1, 10, 2) should return [1, 3, 5, 7, 9].

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