teleren/devto huggingface dataset:
Episerver CMS Cloud 12: Create pagination page with PageData and BlockData(Partial view)
Published: 2023-02-11 06:53:43

Here is the sample code [Github](https://github.com/varund29/episerver-press-releases)
- To create a pagination page in Episerver CMS Cloud 12 using PageData and BlockData (partial view), you can follow these steps:

- Create a custom PageData class for your pagination page. This class should inherit from the Episerver PageData class and include properties for the data you want to display on the page.

- Create a custom BlockData class for your partial view. This class should inherit from the Episerver BlockData class and include properties for the data you want to display in the partial view.

- In your pagination page controller, retrieve the data you want to display on the page using the Episerver content repository. You can use the Episerver Find method to retrieve a list of BlockData items, for example.

- In your pagination page view, use a foreach loop to iterate through the list of data and render the BlockData items using partial views. You can use the Html.Partial method to render the partial view and pass the BlockData item as the model.
JavaScript Tutorial: Data Structures
Tags: javascript, tutorial, beginners, programming
Published: 2023-02-11 06:49:44

This series of tutorials will be based on __Data Structures__ in `Javascript`. Each subject will be explained in individual articles to have a deeper understanding and to help eliminate too much information consumption at once. We will start from the basics and move up to some advanced structures to improve our ability using them. 
_____ 

## Data Structures

1. Array
2. Stack
3. Queue
4. Linked List
5. Hash Table
6. Tree
7. Graph
8. Set
9. Map
10. Heap

_____

> I am creating a __one-stop__ shop for __Data Structures__ in `JavaScript` instead of having to surf through many different platforms and articles when working with one of these.

Due to so many subjects that I'd like to dive into, each article will be released weekly or bi-weekly, depending on the free time. If you'd like to follow along and keep up with these, feel free to book mark this series to stay updated.
This week’s newsletter is out! (11-02-2023) - Just Another TBD
Tags: javascript, tech, webdev
Published: 2023-02-11 06:40:33

---
title: This week’s newsletter is out! (11-02-2023) - Just Another TBD
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Just Another TBD

https://markjgsmith.substack.com/p/mark-smiths-newsletter-11-02-2023

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Excel Sparklines
Published: 2023-02-11 06:23:01

**[Excel Proper](https://www.bizinfograph.com/resource/how-to-create-sparklines-in-excel/)** enables you to create a wide range of data analysis tools for managing and communicating information. With its powerful formulas, charts, pivot tables and macros, Excel Power enables users to handle any task from budgeting, forecasting, tracking performance data and more. Additionally it is a key part of the fast-growing collaborative workspace where your team can interact in real time -- making data sharing simple and seamless.
Ardsley to white Plains Airport Car Service
Published: 2023-02-11 06:21:19

Ardsley to White Plains Airport Car Service: A Comprehensive Guide

Introduction:

Ardsley to White Plains Airport is a popular route for travelers who are looking for a convenient and stress-free mode of transportation. With numerous [Ardsley to Newark Airport Service](https://empirerideinc.com/newark-taxi/) options available, choosing the right car service can be a daunting task. This guide will provide you with all the information you need to make an informed decision.


![Greenwich to Laguardia Car service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x73nuor89fz4osrozaka.jpg)

Types of Car Services:

There are several types of car services available for the Ardsley to White Plains Airport route, including:

Taxis:

Taxis are a traditional mode of transportation that is widely available. However, they can be more expensive than other options and may not offer a guaranteed ride.

Ridesharing Services: Ridesharing services such as Uber and Lyft are a popular choice for travelers. They offer a convenient, affordable, and flexible option, but wait times can be longer during peak hours.

Limousine Services: Limousine services provide a luxury option for those looking for a more comfortable and high-end experience. This option is typically more expensive than other car services but is worth it for the extra comfort and amenities offered.

Factors to Consider:

When choosing a car service, there are several factors to consider, including:

Price: Cost is an important consideration when selecting a car service. It is important to compare prices between different services to find the best deal.


![empirerideinc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjpu8kblqaixxspza6sq.jpg)

Availability: Make sure that the car service you choose is available at the time you need it. Some car services may have limited availability during peak hours or holidays.

Comfort and Amenities: Consider the level of comfort and amenities you want during your ride. For example, some car services offer extra legroom, Wi-Fi, and charging ports.

Driver Experience: Choose a car service with experienced drivers who know the route from Ardsley to White Plains Airport. This will ensure a safe and smooth ride.

Customer Service: Good customer service is important for a stress-free experience. Look for a car service that has a proven track record of providing excellent customer service.

Conclusion:

In conclusion, choosing the right car service for the Ardsley to White Plains Airport route is an important decision. By considering the different types of services available and the factors that are important to you, you can find the best option to meet your needs. Whether you are looking for a cost-effective, comfortable, or high-end experience, there is a car service that is right for you.
Replika AI: A More Comprehensive Look at the Future of Human-Like AI
Tags: chatgpt, openai, gpt3, replikaai
Published: 2023-02-11 05:38:08

Recent advancements in AI technology have led to companies like Replika AI pushing the envelope of what is conceivable. A business called Replika AI focuses on developing artificial intelligence (AI) models that mimic human intelligence. They develop intelligent devices that can interact with people naturally by employing cutting-edge approaches to duplicate various cognitive functions, including perception, decision-making, and learning.

The Replika AI's capacity to learn from encounters is one of its primary characteristics. The AI model learns from a collection of human talks and makes use of this knowledge to comprehend human communication and thought. As a result, the model can react to natural language, comprehend context, and even display emotions. Additionally, it enables the model to gain knowledge from every encounter, enhancing its comprehension and effectiveness over time.

There are many different ways that Replika AI might be used. The company asserts that a variety of fields, including customer service, education, and healthcare, can benefit from the usage of its AI mimics. Their technology is thought to have the potential to significantly alter how AI is utilised and viewed, making it more approachable and advantageous for society.

One example of this is Replika's "pro" version, which aims to be a personal AI companion, where you can talk to your AI like a friend, and it will learn from your conversations, get to know you and help you feel understood.

Another example is Replika for Business, which uses the same technology to provide a more personalized and human-like customer service experience.


Keep in mind that this is an example and you might want to double check facts and figures mentioned in the post. Also, Replika AI is a real company and you should check their website and social media for more information and updates.

Ref : [https://replika.com/](https://replika.com/)
Building a Secure JWT Server with Node.js and jsonwebtoken
Tags: javascript, programming, webdev, beginners
Published: 2023-02-11 05:00:00

In this article, I will show you how to build a JWT server using Node.js and the popular javascript library, jsonwebtoken. The JWT server will allow clients to request and receive JWTs that can be used for authentication.

Here's an example of how to create a JWT server using Node.js and jsonwebtoken:

**Install the required packages**
First, we'll need to install the jsonwebtoken package by running the following command:
```
npm install jsonwebtoken
```
**Import the jsonwebtoken package**
Next, we'll import the jsonwebtoken package in our Node.js file:

```
const jwt = require('jsonwebtoken');
```
**Define a secret key**
The secret key is used to sign and verify the JWT. It should be kept private and secure. For the purpose of this example, we'll define the secret key as a constant in our Node.js file:
```
const secret = 'secretkey';
```
**Create a function to generate JWTs**
We'll create a function that takes in a payload (the information to be encoded in the JWT) and returns a signed JWT. The jsonwebtoken package provides a sign method for this purpose:
```
function generateJWT(payload) {
  return jwt.sign(payload, secret, { expiresIn: '1h' });
}
```
In this example, the JWT will expire after 1 hour.

**Create an endpoint to generate JWTs**
Next, we'll create an endpoint that clients can use to request JWTs. We'll use the express library to create the endpoint:
```
const express = require('express');
const app = express();

app.post('/generateJWT', (req, res) => {
  const payload = req.body;
  const token = generateJWT(payload);
  res.json({ token });
});
```
**Start the server**
Finally, we'll start the server using the listen method provided by the express library:
```
const port = 3000;
app.listen(port, () => {
  console.log(`JWT server running on port ${port}`);
});

```
And that's it! The JWT server is now up and running. Clients can use a POST request to the /generateJWT endpoint to receive a signed JWT.

It's important to note that this is just one example of how to build a JWT server. In a real-world scenario, you'll want to implement additional security measures such as rate limiting and input validation. The jsonwebtoken package also provides methods for verifying JWTs, which can be used to validate incoming JWTs on the server.
What's insecure, buggy, and poorly designed in the following wordpress code?
Tags: wordpress, security, php
Published: 2023-02-11 04:44:48

this is a simple function to handle a number of applicants who were expected to submit their names, emails, and photos.
the following is html form and wordpress function.
but the team manager metioned me that code is insecure, buggy, and poorly designed.

please let me know how to improve my code for security and wordpress WordPress Coding standards 

**Html Code**
```html
<form id="form" method="post" action="#" enctype="multipart/form-data">
    <input type="text" name="name" id="name">
    <input type="email" name="email" id="email">
    <input id="submit" name="submit" type="submit" value="Upload" />
    <input type="file" name="doc_file" id="doc_file"  multiple="false" />
</form>
```

**Wordpress Code**
```php
function saveData(){
    if ( 
        !empty($_POST)
    ) {           
        global $wpdb;
        require_once( ABSPATH . 'wp-admin/includes/image.php' );
        require_once( ABSPATH . 'wp-admin/includes/file.php' );
        require_once( ABSPATH . 'wp-admin/includes/media.php' );
        $d = media_handle_upload( 'doc_file', 0 );
        $r = wp_get_attachment_url($d);
        $wpdb->insert( 
            $wpdb->prefix . 'applicants_table', 
            array( 
                'name' => $_POST['full_name'], 
                'email' => $_POST['email'], 
                'doc_file' => $r
            ) 
        );
        if ( is_wp_error( $d ) ) {
            wp_die( 'Something went horribly wrong. Please try again.' );   
        } 
    } else {
        wp_die( 'Something went horribly wrong. Please try again.' );   
    }
}
```
Default exports & Name exports
Tags: react, javascript, webdev, programming
Published: 2023-02-11 04:30:00

The `export` declaration lets you to export a specific part from JavaScript files which can be imported into other files using `import` declaration for reusing. The `default` prefix marks that function/class as an entry point (main function) in a file. 

The `export default` prefix is a standard JavaScript Syntax(not specific to react). It lets you mark the main function in a file so that you can later import it from other files.

For example:
Exporting a Button component by **Default export**

```react
export default Button
```

Exporting a Button component by **Name export**

```react
export Button
```

- You can use both(default & name) of them in the same file.
- A file cannot have more than one default export but it can have as many named exports.
- How you export your component tells you how to import it because if you try to import a default export the same way you do a named export, it will log an _error_.

## Default export
Export syntax:

```react
export default function Button() {...}
```
Import syntax: 

```react
import Button from ‘./button.js’
```

## Name export
Export syntax: 

```
export function Button() {...}
```
Import syntax:

```
import { Button } from ‘./button.js’
```

- When you are importing a component with `export default`, you can put any name you want after `import`. For example, `import Hello from ‘./button.js’` instead of `import Button from ‘./button.js’`. While in **named imports**, the name has to match on both sides.

## Summary
- Use _default exports_ when you have one component in the file and use _name exports_ when your file exports multiple components. 
- Also, components without names like `export default () => {...}` are discouraged because they make debugging harder.
- To reduce the potential confusion between _default_ and _name_ exports, you can stick to only one style (default or named). For _default export_, each file will need to export only one component. While for _name export_, each file can export multiple components.

## Wrapping up!

That's all for this article, hope you learned something. Thanks for reading, catch you later.

Let’s connect on [LinkedIn](https://www.linkedin.com/in/moazamdev/).

You can also buy me a coffee that would help me grow as a frontend developer :)

<a href="https://www.buymeacoffee.com/moazamdev" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 100px !important;" ></a>

---

{% user moazamdev %}
React cleanup EventerListeners
Tags: react
Published: 2023-02-11 04:19:12


Hello every one!
i just wanna ask does react in new versions add something that clean up eventListeners automaticly ? 
i tried to clean up a event listener but i get an error that the event is null 
## Code : 
`import { useState, useEffect, useRef } from 'react';

function useHover() {
  const [hovered, setHovered] = useState(false);
  const ref = useRef(null);

  function enter() {
    setHovered(true);
  }

  function leave() {
    setHovered(false);
  }

  useEffect(() => {
    ref.current.addEventListener('mouseenter', enter);
    ref.current.addEventListener('mouseleave', leave);
    return () => {
       ref.current.removeEventListener('mouseenter', enter);
       ref.current.removeEventListener('mouseleave', leave);

}
  }, []);

  return [hovered, ref];
}

export default useHover;`

## Error when component unmounted 
Uncaught TypeError: Cannot read properties of null (reading 'removeEventListener')
Why Your React App Should Upgrade to Vite: A Comprehensive Guide
Tags: migration, vite, react
Published: 2023-02-11 03:03:21

## Introduction

React is a popular JavaScript library for building user interfaces, and Create React App (CRA) is the most widely used tool for bootstrapping React applications. However, with the recent advancements in front-end development, new tools have emerged that offer better performance and improved developer experience. One such tool is [Vite](https://vitejs.dev/), which is a fast, zero-config, and developer-friendly build tool for modern web apps.

In this blog post, we'll explore why you should consider upgrading from Create React App to Vite, and what benefits you'll gain from making the switch.

### 1. Faster Build and Development Speed:

One of the biggest advantages of Vite over Create React App is the faster build and development speed. Vite uses a faster and more efficient build process that allows you to compile your code instantly without having to wait for long build times. This means that you can make changes to your code and see the results immediately, leading to a much smoother development experience.

### 2. Improved Performance:

Vite also offers improved performance compared to Create React App. It uses lazy-loading, which means that only the components that are needed for the current view are loaded, leading to faster load times and better performance. In addition, Vite also supports code splitting, which allows you to split your code into smaller chunks that can be loaded on-demand, further improving performance.

### 3. Zero Configuration:

Vite is designed to be zero-config, which means that it doesn't require any configuration files or complex setup. This makes it much easier to get started with Vite compared to Create React App, which often requires a lot of configuration to get started.

### 4. Better Developer Experience:

Vite also offers a better developer experience compared to Create React App. It comes with a built-in development server that provides hot module reloading and error reporting, making it easier to develop and debug your applications. In addition, Vite also has a simpler and more intuitive API, making it easier to understand and use.

### Conclusion:

In conclusion, upgrading from Create React App to Vite offers several benefits, including faster build and development speed, improved performance, zero configuration, and a better developer experience. If you're looking to take your React app to the next level, consider making the switch to Vite today.

This is a high-level overview of the benefits of upgrading to Vite, and I hope it will help you in convincing your team to make the switch. However, I would advise you to also take into consideration any specific requirements or constraints your project may have before making any decisions.

Further Reads: 

[https://vitejs.dev/guide/why.html](https://vitejs.dev/guide/why.html)

Coming up: 

A blog on how to migrate to Vite from existing CRA app
Pull up Pull down
Published: 2023-02-11 02:48:27

When swith turned off, Input gain 1 on pull up system.
![Pull UP_0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fno4yv840ad6ku22rrl7.JPG)
When swith turned on, Input gain 0 on pull up system.
![Pull UP_1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5qnc3zf5dfehhyyar6y.JPG)

How to make Pull UP system
![Pull UP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpngn1yu1gosh5nnii2y.png)



When swith turned off, Input gain 0 on pull down system.
![Pull DOWN_0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzocfl1lkyemamfmcrcq.JPG)
When swith turned on, Input gain 1 on pull down system.
![Pull DOWN_1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94qfimsaxn7gv4r8y75j.JPG)

How to make Pull DOWN system
![Pull DOWN](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/239ye0ut334o62qtzsuy.png)
Stylizing the Scrollbar in Next.js
Tags: webdev, react, css, nextjs
Published: 2023-02-11 02:46:44

> The default appearance of the scrollbar in a browser can be quite dull and boring. In this article, we will look at how we can stylize the scrollbar to match our website's theme using Next.js and CSS.


![screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyi6gomtiq3ol7x8vhvi.gif)


## Importing the styles

To import the styles for the scrollbar, we will create a file in the `styles/globals.css` directory. This file will contain all of our global styles, including the styles for the scrollbar.

## Defining the color variables

We are using CSS variables to define the colors of the scrollbar. The CSS variables are defined in the `:root` block.

```css
:root {
  --primary: #f1f1f1;
  --secondary: rgba(31, 209, 253, 0.4);
  --tertiary: rgba(31, 209, 253, 0.6);
}

```

## Defining the styles

Let's start by defining the styles for **Firefox**.

```css
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--secondary) var(--primary);
}

```

The `scrollbar-width` property specifies the width of the scrollbar. In this case, we are using the value `thin` to make the scrollbar as thin as possible. The `scrollbar-color` property sets the color of the scrollbar and its thumb.

Next, we will define the styles for **Chrome, Edge, and Safari.**

```css
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 17px;
}

*::-webkit-scrollbar-track {
  background: var(--primary);
  border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
  border-radius: 14px;
  border: 3px solid var(--primary);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--tertiary);
}

```

The `width` property sets the width of the scrollbar. In this case, we are using `17px`. The `*::-webkit-scrollbar-track` defines the styles for the track of the scrollbar. The background color is set using the `--primary` variable. The `border-radius` property gives the track a rounded border.

The `*::-webkit-scrollbar-thumb` defines the styles for the thumb of the scrollbar. The background color is set using the `--secondary` variable. The `border-radius` property gives the thumb a rounded border, and the `border` property adds a border to the thumb.

Finally, the `::-webkit-scrollbar-thumb:hover` defines the styles for the thumb when it is hovered over. In this case, the background color is set to `--tertiary`.


Live Demo: {% stackblitz https://stackblitz.com/edit/nextjs-l7ufa6?file=pages/index.js %}

## Final thoughts

And that's it! By following these steps, we can easily stylize the scrollbar in Next.js. You can further customize the styles to match your website's theme. The possibilities are endless!