teleren/devto huggingface dataset:
Scrimba's JavaScript course...
Published: 2023-03-13 20:09:05

I have never been one of those people who could passively listen to video lessons and learn anything. I usually have to try incredibly hard to keep myself engaged so that I don't space out mid-lesson, but **Scrimba**'s course is anything but passive. The impeccably designed lessons and the interactive videos with amazing _scrims_ invoke a sense of child-like wonder and pushes you to learn more, build more, and continue doing so. The number of projects that I've developed using this course is more than what I've developed during the four years I've spent at college. I would highly recommend this course to anyone trying to learn JavaScript. The link given below can be used to access this course.
[Click here](https://scrimba.com/learn/learnjavascript)
Analyzing the Retention Rates of Bank Customers with Data Science
Tags: datascience, tutorial, machinelearning, python
Published: 2023-03-13 20:01:38

Customer retention is a key factor for any business, and the banking industry is no exception. In this blog post, we'll be using data science techniques to analyze the retention rates of bank customers. We'll be exploring factors that contribute to customer churn and how to use this information to improve customer retention.


**Step 1: Collecting and Preparing Data**
The first step in analyzing customer retention rates is to collect and prepare data. This may involve gathering data from various sources, such as customer transactions, demographics, and satisfaction surveys. Once you have your data, you'll need to clean and prepare it for analysis.

You can use this: [Dataset](https://www.kaggle.com/datasets/mathchi/churn-for-bank-customers)

**Step 2: Exploratory Data Analysis**
Next, we'll perform exploratory data analysis to gain insights into the data. This involves visualizing data using charts and graphs to identify trends and patterns. We'll explore factors that contribute to customer churn, such as age, income, and transaction history.

**Step 3: Building a Predictive Model**
Using the insights from our exploratory data analysis, we'll build a predictive model to forecast customer churn. We'll use machine learning techniques to train our model, such as logistic regression, decision trees, or random forests. Once we have a model, we can use it to predict which customers are likely to churn and take proactive measures to retain them.

**Step 4: Improving Customer Retention**
Finally, we'll use the insights from our analysis to improve customer retention. This may involve implementing new strategies, such as targeted marketing campaigns, personalized offers, or improved customer service. By using data science techniques to analyze retention rates, we can better understand our customers and make data-driven decisions to improve their experience.
TIL: use Maps with React radio inputs
Tags: react, javascript
Published: 2023-03-13 17:38:15

An interesting usage of the object [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) with React is when you use input elements of type [radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio). When you use a Map in your local state, it is enough to set the key as the group name, and its value can be the input value or an object (e.g. the value and the id). The Map acts as a set, so you are assured to have the image of the DOM in our Map, no further ado.

Let's take an example.

We build an input element of type "radio": the "name" attribute will group together theses inputs.

```js
function Input({ name, value, id, handleChange }) {
  return (
    <>
      <input
        type="radio"
        name={name}
        value={value}
        id={id}
        onChange={handleChange}
      />
      <label htmlFor={id}>{id}</label>
    </>
  );
}
```
We setup two groups - named "gp1" and "gp2" of two radio inputs. We display the group name, the key and the value. On change, we update the state with a new Map - based on the old one - where the key is the group name, and the value is an object `{value, id}` here. We now have the image of the DOM in our Map.

```js
export default function App() {
  const [radio, setRadio] = useState(new Map());

  function handleChange(e) {
    return setRadio((radio) =>
      new Map(radio).set(e.target.name, {
        val: e.target.value,
        id: e.target.id
      })
    );
  }
return (
    <div className="App">
      <Input name="gp1" value={1} id="one" handleChange={handleChange} />
      <Input name="gp1" value={2} id="two" handleChange={handleChange} /> |{" "}
      <Input name="gp2" value={3} id="three" handleChange={handleChange} />
      <Input name="gp2" value={4} id="four" handleChange={handleChange} />
      <hr />

      {[...radio.keys()].map((k, i) => (
        <p key={i}>
          group: {k}, {radio.get(k).id}: {radio.get(k).val}
        </p>
      ))}
    </div>
  );
}
```

{% codesandbox friendly-gauss-mryl4e %}
Hi Community I need your help
Tags: webdev, react, nextjs, community
Published: 2023-03-13 19:58:32

Hi Community
I'm frontend Engineer having experience of 1 year 
Tech Stack (React, Redux, NextJs, Tailwind)
I'm struggling to start my freelancing journey
I need your help to guide me about it 

Also I'm open for remote jobs if anyone interested

Thanks for your support
API Requests in Javascript
Tags: api, javascript, node, programming
Published: 2023-03-13 19:46:03

## GET Request

To make a GET request in JavaScript, you can use the following code:

```javascript
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))
```

## POST Request

To make a POST request in JavaScript, you can use the following code:

```javascript
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Shriansh Agarwal',
    email: 'shriansh@example.com'
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))
```


## PUT Request

To make a PUT request in JavaScript, you can use the following code:

```javascript
fetch('https://api.example.com/data/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Shriansh Agarwal',
    email: 'shriansh@example.com'
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))
```

## DELETE Request

To make a DELETE request in JavaScript, you can use the following code:

```javascript
fetch('https://api.example.com/data/123', {
  method: 'DELETE'
})
  .then(response => console.log('Record deleted'))
  .catch(error => console.error(error))
```
Advanced Web Development: Cutting-Edge Technologies for Creating Dynamic Web Experiences
Tags: webdev, cuttingedge, javascript, responsivelayouts
Published: 2023-03-13 19:45:53

The web is constantly evolving and modern web developers must keep up with the latest technologies and trends to ensure that their websites and applications remain competitive. With the rise of mobile and cloud computing, web developers must stay ahead of the curve to create dynamic, interactive and engaging experiences for their users. In this article, we will explore some of the **latest cutting-edge technologies for web development** and how they can help create unique and innovative experiences.

The first technology that can be used to create dynamic web experiences is HTML5. HTML5 is the latest version of the HTML standard and it provides a number of new features that can be used to create stunning designs and rich multimedia experiences. HTML5 also allows developers to create dynamic websites that can be viewed on multiple devices, such as smartphones and tablets.

Another cutting-edge technology for [web development](https://69thedeal.com/) is CSS3. CSS3 is the latest version of the Cascading Style Sheets language and it provides a powerful set of tools for creating visually stunning websites. CSS3 can be used to create responsive layouts, which automatically adjust the page layout based on the size of the user’s device. CSS3 also allows developers to create complex animations and transitions, which can be used to create unique experiences for users.

JavaScript is also a key technology for **[web development](https://69thedeal.com/)**. JavaScript is a high-level scripting language that can be used to create interactive websites and applications. It is a powerful language that can be used to create dynamic and interactive experiences for users. JavaScript can also be used to create single-page applications, which are web applications that are self-contained and do not require the user to reload the page to access new content.

Finally, [web developers](https://69thedeal.com/web-development-laravel/) can use Node.js to create dynamic and interactive web experiences. Node.js is a server-side JavaScript framework that is designed to create powerful and scalable web applications. Node.js can be used to create real-time applications, such as chat applications and data streaming applications. Node.js can also be used to create powerful APIs that allow users to easily interact with web services.

These are just some of the cutting-edge technologies that can be used to create dynamic web experiences. [Web developers](https://69thedeal.com/web-development-laravel/) must stay up-to-date on the latest technologies and trends to ensure that their websites and applications remain competitive. With the right tools and technologies, web developers can create unique and engaging experiences for their users.
Types of Requests in API
Tags: webdev, javascript, api, tutorial
Published: 2023-03-13 19:37:50

An API request consists of two parts: a request method and a URL. 

The request method describes the action that the client application wants to perform, such as retrieving data or updating a record. 
The URL specifies the endpoint where the data or action should be performed.

Types of requests that can be used in API development. 

- **GET:** The GET method is used to retrieve data from the server. When a client application sends a GET request to an API endpoint, the server responds with the requested data.

- **POST:** The POST method is used to create new data on the server. When a client application sends a POST request to an API endpoint, the server creates a new record using the data provided by the client.

- **PUT:** The PUT method is used to update existing data on the server. When a client application sends a PUT request to an API endpoint, the server updates the record with the new data provided by the client.

- **DELETE:** The DELETE method is used to delete data from the server. When a client application sends a DELETE request to an API endpoint, the server deletes the record specified by the client.

- **HEAD:** The HEAD method is similar to the GET method, but it only returns the headers of the response, without the body.

- **OPTIONS:** The OPTIONS method is used to retrieve information about the communication options available for the API endpoint, such as the supported request methods, authentication requirements, etc.

- **PATCH:** The PATCH method is used to partially update existing data on the server. When a client application sends a PATCH request to an API endpoint, the server updates only the specified fields in the record.
A Beginner's Guide to APIs
Tags: api, tutorial, beginners, javascript
Published: 2023-03-13 19:32:45

## API

An API is a set of protocols, tools, and standards for building software applications. It defines how different software components should interact with each other and what data they can exchange. APIs allow developers to create applications that can communicate with each other, regardless of the programming languages, platforms, or devices used.

APIs can be used in many ways. For example, they can be used to retrieve data from a remote server, integrate different software systems, or automate tasks.


## Types of APIs

There are many types of APIs, each with its own set of protocols and uses. Here are a few common types:

- REST APIs: Representational State Transfer (REST) APIs are a type of web API that uses HTTP requests to access and manipulate data. REST APIs are often used to build web applications and mobile apps.

- SOAP APIs: Simple Object Access Protocol (SOAP) APIs are a type of web API that uses XML-based messaging to exchange data between applications. SOAP APIs are often used in enterprise applications.

- GraphQL APIs: GraphQL is a query language for APIs that allows developers to specify the data they need from an API, rather than receiving a predefined set of data. GraphQL APIs are often used to build applications with complex data requirements.


## Uses of APIs

APIs have many uses in software development. Here are a few examples:

- Data retrieval: APIs can be used to retrieve data from a remote server or database, allowing developers to build applications that use data from multiple sources.

- Integration: APIs can be used to integrate different software systems, enabling applications to work together seamlessly.

- Automation: APIs can be used to automate tasks, such as updating a database or sending an email.
Deploy PostgreSQL® services to multiple clouds and regions using Terraform
Tags: postgres, terraform, multicloud
Published: 2023-03-13 19:22:22

How to deploy PostgreSQL services across different cloud providers and across geographies 🤔 ?


{% youtube Y813XfhNDj0 %}


In [this video](https://www.youtube.com/watch?v=Y813XfhNDj0), you will learn  exactly that using [Aiven Terraform Provider](https://registry.terraform.io/providers/aiven/aiven/latest/docs).

You will also learn the benefits of using termination protection functionality to prevent accidental deletion of your cloud resources.

This is the recipe I followed in this video: https://docs.aiven.io/docs/tools/terraform/reference/cookbook/multicloud-postgresql-recipe

Please [reach out](https://www.linkedin.com/in/diahmed/) if you have any questions.
Introduction to programming
Tags: beginners, programming
Published: 2023-03-13 19:18:53

Welcome to the exciting world of programming! If you're new to coding, you might be wondering what it's all about and why it's such a big deal. Fear not, my friend, for I am here to enlighten you in a way that's both hilarious and informative.

So, what is programming exactly? Well, it's basically a way of telling your computer what to do. And by "telling", I mean typing in a bunch of weird symbols and syntax that only other programmers can understand. It's kind of like having your own secret language that lets you control machines. Pretty cool, right?

Now, I know what you're thinking. "But why would I want to learn this stuff? I'm not planning on becoming a robot overlord anytime soon." Fair point, but hear me out. Programming is everywhere these days. All of these devices - from your phone, to your car, to your TV, to your fridge (yes, really) - are powered by code in some way or another. And the people who know how to write that code are in high demand.

But that's not the only reason to learn programming. It's also a way to exercise your brain in ways you never thought possible. You'll learn how to think logically, break down complex problems into smaller parts, and debug your code when things inevitably go wrong. Plus, there's something incredibly satisfying about watching a program you wrote come to life and do exactly what you want it to do.

Of course, learning programming can be daunting at first. There are so many languages, frameworks, and libraries to choose from, it can feel overwhelming. But don't worry, you don't have to become an expert overnight. Start with a simple language like Python or JavaScript and work your way up. There are also tons of resources out there to help you learn, from online courses to programming forums to good old-fashioned books.

So, there you have it. Programming might seem like a foreign language at first, but with time and practice, it can become a valuable skill that opens up a world of possibilities. And who knows, maybe one day you'll be the one writing the code that powers the next big thing. Just remember to thank me in your acceptance speech for the Nobel Prize.

In conclusion, if you want to be a part of the cool kids club, learn programming. It's the secret handshake to the future.
Best practises for loading environment variable in NextJS application
Tags: javascript, nextjs
Published: 2023-03-13 19:18:45

# How to load environment variables in a NextJS application ?

- First, create a new **`.env`** file in the root directory of your Next.js application. Add the environment variables you want to use in your application in the format **`ENV_VARIABLE_NAME=env_value`**. 

For example:

```
API_URL=https://example.com/api
API_KEY=abc123
```

- Next, please install the **`dotenv`** npm package dependency:

```
npm install --save-dev dotenv
```

- Now, in your Next.js application, create a new file named **`next.config.js`** in the root directory. This file will be used to load the environment variables from the **`.env`** file.

```
const dotenv = require('dotenv');
dotenv.config();

module.exports = {
  // Your Next.js configuration 
};

```

- Now you can use the environment variables in your nextjs project. For example, to access the **`API_URL`** environment variable:

```
const apiUrl = process.env.API_URL;
console.log(apiUrl); // prints https://example.com/api
```

For more approach on how to load env file in nextjs application, you can refer this page - [Link](https://nextjs.org/docs/basic-features/environment-variables)

### Things to keep in mind when working with env files. 

- You should never commit your **`.env`** file to git. Env secrets generally contains sensitive information such as API keys and passwords, database secrets.
- You should add it to your **`.gitignore`** file to prevent it from being committed. 

### Here are the best practices you can consider for setting env secrets for your application :

1. Use a secure method to store your secrets: 
  - Avoid storing your secrets in plain text files or hardcoding them in your code. Instead, use a secure method such as environment variables, key vaults, or configuration files.

2. Limit access to your secrets
  - Restrict access to your secrets to only those who need them. Use access controls and permissions to ensure that only authorized users can access your secrets.

3. Avoid storing sensitive data in plain text
  - If you need to store sensitive data such as passwords or API keys, encrypt them before storing them in your secrets store.

4. Rotate your secrets regularly:
 - Regularly rotating your secrets (e.g. passwords, api secret keys) helps to prevent unauthorised access and improve security. 
 - Set up automated processes to rotate your secrets at regular intervals.

5. Use strong, complex passwords: 
 - When creating passwords for your secrets, use strong, complex passwords that are difficult to guess. 
 - Use a password manager to generate and store passwords securely.

6. Use a version control system: 
 - You can use a version control system to manage changes to your secrets, and keep a record of who made changes and when.
As a new developer in the field...
Published: 2023-03-13 19:16:34

Entering into the world of front-end development as a new developer has not been the most clear and straightforward path. With all the new "shiny" and "user-friendly" platforms I needed to learn about, I felt very overwhelmed and didn't know which path to take to begin my learning journey. 

The most confusing thing about platforms, was the fact that they are marketed to be "user friendly" but in reality they add more complex things for new learning developers to try and figure out. Each platforms has their own way of doing things that causes confusion when you are trying to learn multiple platforms at the same time. 

I think the easiest way for web components and VanillaJS standards to be taught is to teach the foundations and the building blocks needed to succeed as a front-end developer. As a new developer myself, I would like to know all the tools or "building blocks" that I have to create better web components. 

Personally, the easiest to work with on the 1st stab was implementing my web-component in React. It was the easiest for me to figure out because I had access to a lot of good information online that allowed me to figure out how to create my web component. Most of the way I was able to start making sense of things was doing a lot of research on lovely Google and watching countless videos on YouTube for explanations.
Anaconda-installation: package for MX-Linux needed - here is a HowTo
Tags: anaconda, python, javascript, beginners
Published: 2023-03-13 18:56:27

since MX-Linux (see http:www.mxlinux.org) does not have added Anaconda to MX Repository package all the many many folks on MX-linux (which is ranked as #1 Linux ( cf. http://www.distrowatch.com ) for years now - all the folks out there do hot have a good anaconda-support. Thats a sad sad story. Can you do anything and help the community.

the only option left - the hacky-solution: The Arch PKGBUILD has some links for the installer that they use to provide the source: https://aur.archlinux.org/cgit/aur.git/tree/?h=anaconda

They say it’s open source, we need that to package it, unless we just provide a routine to the installer. The Tree section shows us list of links like this, with the code behind each link


[code]
Mode Name Size
-rw-r--r-- .SRCINFO 627 logstatsplain
-rw-r--r-- .gitignore 43 logstatsplain
-rw-r--r-- PKGBUILD 1233 logstatsplain
-rw-r--r-- anaconda.install 219 logstatsplain
[/code]


but honestly - i have never been doing installation based only on files - always untill we have some support to the repo-manager of the mx-linux community there is lack of a good method on installing Anaconda on MX-Linux.

remember - the mx-group is ranked as #1 Linux at distrowatch for years now.

btw: there is a solution for debianbased linux-systems: https://problemsolvingwithpython.com/01-Orientation/01.05-Installing-Anaconda-on-Linux/

Use wget to download the bash installer Now that the bash installer (.sh file) link is stored on the clipboard, use wget to download the installer script. In a terminal, cd into the home directory and make a new directory called tmp. cd into tmp and use wget to download the installer. Although the installer is a bash script, it is still quite large and the download will not be immediate (Note the link below includes . the specific release depends on when you download the installer).

[code]
$ cd ~
$ mkdir tmp
$ cd tmp
$ https://repo.continuum.io/archive/Anaconda3<release>.sh
Run the bash script to install Anaconda3 With the bash installer script downloaded, run the .sh script to install Anaconda3. Ensure you are in the directory where the installer script downloaded:
$ ls
Anaconda3-5.2.0-Linux-x86_64.sh
[/code]


now we can run the installer script with bash.

$ bash Anaconda3-5.2.0-Linux-x86_64.sh


[b]update:[/b] tried to install all anaconda-things according the official instruction - went the hard way - on terminal: see these docs: https://docs.anaconda.com/anaconda/install/linux/

a quick walktrough through the steps ended up in fully-fledged installation of Anaconda3

next steps are shown here: https://docs.anaconda.com/anaconda/user-guide/getting-started/


[b]Linux:[/b] Open a terminal window and type anaconda-navigator.

voila - now Anaconda3 starts...

[b]conclusio:[/b] all is fine now..