teleren/devto huggingface dataset:
How to create your own custom array methods in JavaScript
Tags: javascript, programming, webdev, tutorial
Published: 2023-10-26 00:49:10

Hey, it's Huferr.

Today, you will learn how to create your own custom array methods in Javascript.

To understand the process of creating a new method, you must first know what `prototype` is.

Before continuing, you must know that is not a good practice to change/add methods into natives objects! BUT, understanding how it works is a great way to learn more about the language itself!


### 🔎 What is `prototype` in JavaScript?

Every object in JavaScript has a built-in property, which is called its **prototype** (or `__proto__` in most browsers).

The prototype is an object, so the prototype will have its own prototype, making what's called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.

Simplifying, It keeps the current object methods and allows you to add new properties and methods to objects.

For example, if you `console.log(Object.prototype)`, you'll see something like this:

![Object methods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksiowzmxz5au71b4m07v.png)

These are basically **object methods** that you can use in a common object in JavaScript!

### 📜 Array object

As you may know, almost everything in Javascript is an object.

It means that we also have an object called `Array`. Every array is an object in JavaScript:

```js
const myArray = [0,1,2]

console.log(typeof myArray) // 'object'
```

### ✅ New array method

Let's create our new custom array method called `duplicate()`.

This method will be responsible for duplicating the current array.

Example:

```js
const numbers = [1,2,3]

const duplicatedNumbers = numbers.duplicate()

console.log(duplicatedNumbers) // [1,2,3,1,2,3]
```

To add this new method, we need to add our function in the **Array object prototype**:

```js
Array.prototype.duplicate = ...
```

Now, we can simply create our function with the needed logic and assign it into this new property we added: `duplicate`.

To do that, we're going to use the `function` statement.

You **can't** use an _arrow function_ in this scenario, since we need the function's `this` keyword, and it's only available for `functions` statements.

So, let's create it:

```js
Array.prototype.duplicate = function() {
  const array = this // Just for readability purposes

  return [...array, ...array] // Duplicating the array
}
```

In this case, the `this` keyword refers to the array you are using the method.

So, if you do `myArray.duplicate()`, `myArray` will be exactly the `this` inside our function.

🥳 Congratulations! I've created your first custom array method, here's the full code:

```js
Array.prototype.duplicate = function () {
  const array = this // Just for readability purposes

  return [...array, ...array] // Duplicating the array
}

const myArray = [1,2,3]

const duplicatedArray = myArray.duplicate()

console.log(duplicatedArray) // [1,2,3,1,2,3]
```

Thanks for reading this article! Help spreading knowledge!

Follow me on:

📹 Youtube => https://www.youtube.com/@thehuferr
🧵 X/Twitter => https://twitter.com/the_huferr
A simple Visual Studio Code plugin that converts html text to React JSX
Tags: converter, html
Published: 2023-10-27 06:36:17

---
title: A simple Visual Studio Code plugin that converts html text to React JSX
published: true
date: 2023-10-26 00:37:00 UTC
tags: Converter,HTML
canonical_url: https://reactjsexample.com/a-simple-visual-studio-code-plugin-that-converts-html-text-to-react-jsx/
---

# Convert HTML to React JSX
 ![A simple Visual Studio Code plugin that converts html text to React JSX](https://reactjsexample.com/content/images/2023/10/Code_2023-10_10-31-51.jpg)

A simple Visual Studio Code plugin that converts html text to React JSX.

Just `ctrl + shift + P` -> `Convert HTML to React JSX` in the document you want to edit and run it.

![A simple Visual Studio Code plugin that converts html text to React JSX](https://user-images.githubusercontent.com/120979437/276374689-7a5162cc-a1c2-4b83-b6d1-ab6fedb69dd9.gif)

## How does it work

It simply replaces html tags with React ones.

Here’s the current list:

```
var mapObj = {
  "class=": "className=",
  "for=": "htmlFor=",
  "-rule": "Rule",
  "stroke-l": "strokeL",
  "stroke-w": "strokeW",
  "<!--": "{/\*",
  "-->": "\*/}",
  tabindex: "tabIndex",
};
```

[Open a pull request](https://github.com/PB2204/Html2React/compare) to add missing rules.

## GitHub

[View Github](https://github.com/PB2204/Html2React?ref=reactjsexample.com)
What's Your Favorite Corporate Jargon?
Tags: discuss, codenewbie, beginner
Published: 2023-10-26 00:00:00

---
published_at : 2023-10-26 00:00 +0000
---
Corporate jargon keeps creeping into our professional discourse, despite its reputation for obfuscation. Share your favorite corporate jargon and let's synergize our core competencies for a game-changing brainstorm!

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*
Installa OpenShift Local con Podman Desktop
Published: 2024-03-21 13:32:03

---
title: Installa OpenShift Local con Podman Desktop
published: true
date: 2023-10-26 00:00:00 UTC
tags: 
canonical_url: https://theredcode.it/devops/podman-desktop-openshift-local/
---

Qualche settimana fa abbiamo parlato di [cosa fosse Podman](https://www.theredcode.it/podman/cos-e-podman/) e del nuovo strumento con interfaccia grafica chiamato [Podman Desktop](https://theredcode.it/devops/podman-desktop).

Una delle caratteristiche uniche di [Podman Desktop](https://theredcode.it/devops/podman-desktop) è la sua integrazione con [Red Hat OpenShift Local](https://theredcode.it/devops/openshift-local-come-installarlo), che consente agli utenti di sviluppare e testare le applicazioni localmente, utilizzando le stesse immagini e lo stesso ambiente di container che utilizzerebbero in un ambiente di produzione su Red Hat OpenShift, ma più in piccolo.

Questo significa che potete assicurarvi che le vostre applicazioni funzionino senza problemi in un ambiente OpenShift prima di distribuirle!

# Configurazione

Podman Desktop 1.0 include un’estensione per OpenShift Local, che si può installare dalla dashboard o attraverso le Impostazioni.

![](https://theredcode.it/img/openshift-local-podman-desktop-extension.png)_Configurazione tramite pagina principale_

![](https://theredcode.it/img/podman-desktop-openshift-local-settings.png)_Configurazione tramite le impostazioni_

Una volta installata, l’estensione consente di configurare le diverse impostazioni utilizzabili per OpenShift Local:

- OpenShift con un singolo nodo alimentato da OpenShift Container Platform: completo, e più impegnativo dal punto di vista delle risorse consumate
- MicroShift: leggero e ottimizzato (ad oggi ancora sperimentale) alimentato da un set di servizi minimo, ma molto veloce e leggero

![](https://theredcode.it/img/podman-desktop-openshift-local-options.png)_Opzioni disponibili per l’estensione di OpenShift_

Con Podman Desktop, è possibile facilitare la transizione di un’applicazione da un ambiente locale a un ambiente OpenShift remoto di produzione!

> Se ti stai chiedendo come funziona per Docker Compose, sappi che esiste un’alternativa: [Podman Compose](https://www.theredcode.it/docker/podman-e-docker-compose/)!
What's Beyond Senior Engineer?
Tags: discuss
Published: 2023-10-26 00:00:00

---
published_at : 2023-10-26 00:00 +0000
---
Is there room for a title above Senior Engineer in the software development industry? What would such a title entail?

Follow the DEVteam for more discussions and online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
How to get the console in raw mode in rust 🖤
Tags: rust, learning, console, programming
Published: 2023-10-25 21:36:35

Rust by default does not have a console management in pure raw mode. If you are looking for a way to handle keyboard events you can add the lightweight [k_board](https://crates.io/crates/k_board) library. Here is an example and the structure offered in the official documentation.

`cargo add k_board`

```rust
use k_board::{Keyboard, Keys};

fn main() {
    for key in Keyboard::new() {
        match key {
            Keys::Up => //code 1
            Keys::Down => //code 2
            Keys::Enter => break,
            _ => {}
        }
    }
}
```

```rust
pub enum Keys {
    Up,
    Down,
    Left,
    Right,
    Enter,
    Space,
    Delete,
    Escape,
    Plus,
    Minus,
    Equal,
    Power,                 ^
    Slash,                 /
    Backslash,             \
    Asterisk,              *
    Point,
    Comma,
    Hashtag,
    Pipe,                  |
    Percent,               %
    Ampersand,
    Currency,              $
    TwoPoints,             :
    Semicolon,             ;
    OpenSquareBracket,     [
    CloseSquareBracket,    ]
    OpenCurlyBrace,        {
    CloseCurlyBrace,       }
    OpenQuestionMark,      ¿
    CloseQuestionMark,     ?
    OpenParenthesis,       (
    CloseParenthesis,      )
    LessThan,              <
    GreaterThan,           >
    Apostrophe,            ' 
    At,                    @
    Home,
    End,
    Tab,
    Backtab,
    Insert,
    Letter(char),
    Number(u8),
    F(u8),
    Ctrl(char),
    Alt(char),
    Null,
}
```
Introduction - Reminder System with Message Templates using Django #1
Tags: django, marketing, python, webdev
Published: 2023-10-25 23:59:50

In this set of insights we will be developing a reminder system from scratch with the possibility of modeling or creating template messages. The system will be developed with Python and Django Framework. But you can use the principles applied here with your favorite framework, you just need to have a certain level of experience enough to adapt certain concepts to your framework.

So, what is a reminder system, and what is its use?…

[Read the full article on uhtred.dev](https://uhtred.dev/insights/introduction-reminder-system-with-message-templates-using-django-1-ucg2)
You know of any cloud or SaaS vendors that offer built-in cost guardrails or automatic spending caps?
Tags: saas, s3, cloudstorage, finops
Published: 2023-10-25 22:49:11

You know of any cloud or SaaS vendors that offer built-in cost guardrails or automatic spending caps?  If yes, please share. 

Cory Quinn at Duckbill Group knows AWS really well and recently he said:
> I want the ability to not be charged unreasonable overages. And I’m not worried about it turning from $20 into $40. I’m worried 
about it turning from $20 into $300,000.

—— —— 
They know how to do it.
When you get any free cloud account those "spending caps" are built in. lol  

—— —— 
Quote at: 
[SCREAMING IN THE CLOUD Episode502 Ask Me Anything with Corey Quinn  10.03.2023](https://www.lastweekinaws.com/podcast/screaming-in-the-cloud/ask-me-anything-with-corey-quinn/) 
Cory at: 
https://www.linkedin.com/in/coquinn/ 

—— —— 
@perchance.org - For image, thank you AI image generator at:  https://perchance.org/ai-text-to-image-generator
Basic and Applied Research: A Friendly Guild
Tags: research, computerscience, softwaredevelopment, webdev
Published: 2023-10-25 22:23:38

Have you ever wondered how the world around us works? Or how we can solve some of the biggest challenges facing humanity today? The answers to these questions lie in the world of **research**.

Research is the process of asking questions and obtaining answers. It's how we learn new things and solve problems. Research can be divided into two main types: basic and applied. In this article,  I will explain what these types of research are, why they are important, and how they work together.

**Basic Research:** Driven by curiosity and the desire to understand the world around us, it's not about solving any particular problem but rather about expanding our knowledge of a specific topic. For example, basic research can help us comprehend how the human brain works, how the universe began, and how climate change affects the environment.

Basic research deals with "**why**" questions, as it seeks to understand the underlying reasons and causes behind an event. For example, why does the human brain function the way it does? Why did the universe originate with a big bang? Why does climate change occur?

**Applied research**: Focuses on solving real-world problems and utilizes key research findings to develop new products, services, or processes. For instance, applied research can aid in the development of new therapies, renewable energy products, or educational programs to enhance student learning.

Applied research deals with "**what**" questions because it aims to find solutions and applications to a problem. For example, what can we do to cure diseases? What can we do with clean energy? What can we teach students to enhance their learning?

Both basic and applied research are essential for improvement. Together, they help us comprehend the world around us and address the challenges we face.

Here are some characteristics of basic and applied research:


| Characteristic    | Basic research                                  | Applied research                                   |
|-------------------|------------------------------------------------|-----------------------------------------------------|
| Purpose           | To advance knowledge                            | To solve a specific problem                         |
| Focus             | Theoretical                                    | Practical                                          |
| Timeframe         | Long-term                                      | Short-term                                         |
| Funding           | Typically comes from government or private foundations | Typically comes from businesses, government agencies, or non-profit organizations |
| Examples          | Developing new theories about how the mind works | Developing new drugs to treat diseases             |


Enjoyed this content? Don't forget to give it a thumbs up 👍 and share it with your friends if you found it valuable. Your support helps us reach more people and continue sharing great content!"
Backlog
Published: 2023-10-25 21:50:58

## **Work Item Prioritized List**
**High Priority**

1. Can interact with things through the wall
2. Sometimes the interact text stays after being away from the object you can interact with
3. Add Keybind documentation for Skin Writing Ability
4. All NPC damage is defaulted to scale with strength currently (including the mage npc's attacks)
5. Fix player's head IK he keeps looking at random places on the ground
6. Golem
	7. Jump ability is broken
	8. Running attack doesnt hit with the 2nd swing 
7. If health is full player should stop using potion
8. You should not be able to drink a potion/switch weapons when knocked down/interupted


**Medium-High Priority**

1. Once out of potions, the icon stays there
   3. Update the toolbelt when out of potions
2. Unequipping item from inventory does not affect what player is wielding
3. Equipping an item when there is already an active item will force the player to equip the active item
5. Show number next to consumable UI showing the number of potions left
6. Will keep rolling/dodging until out of stamina if the movement key is held down while dodging
7. Animator inconsistencies between weapons
	  1. Consume potion, ladders, etc
8. Going up hill slows character down by like 75% speed
9. No penalty when walking in water
10. Animations are jaggy
11. All enemies need hit reactions
12. Weapons need impact effects
13. Damage Text  Add some interesting flare to the animation style (e.g. start out very bright for 0.2 seconds, stay at medium for 0.4 seconds, then fade out)
14. Make damage text different colors depending on the type of attack
	  1. Impact (physical?)
	  2. Damage over time
	  3. Magic
	  4. etc

**Medium Priority**

1. Cleanup World
	  1. Water clips through floor
	    1. New waves are showing above landscape
	    2. Clips above land near castle
	  2. Trees inside of Rocks
	  3. Sticks on the ground float off the ground
2. Add a real Settings menu page
	  1. Features:
	    1. Dynamic keybindings
	  2. Annoying when wanting to control stuff like audio levels
3. When interact shows up, show the key to interact so the player doesn't have to guess
	  1. Show the interact key next to the text
4. Armored Skeleton goes flying sometimes
5. Implement Auto Save
6. Add Lock-On mechanic for combat
7. Add music when combat begins, fade out when it ends
8. Add dust effects on the feet of your characters for their combat animations to sell the power of their movement
9. Enemy abilities

**Medium-Low Priority**

1. Game took 57 seconds to create
	  1. Start loading assets the moment the game is launched
	  2. This is mostly due to the audio library
2. Camera clips through rocks
3. player appears to clip into the floor as player while walking up hills
	  1. Look into IK
4. No fall damage

**Low Priority**

1. Firepit doesn't damage player

## **Fight Mechanics**

**Golem**

- Lots of health but not complex
- Knight fight was better

**Knight**

- More intricate mechanics compared to Golem

**Mage**

- Needs to move around the room more

**Uncategorized**

- Cave location is way too dark to see what is going on clearly
CSS Halloween: Screen Time
Tags: css, halloween
Published: 2023-10-25 21:50:01

It's the season, not just HacktoberFest but Halloween! So let's sit back and watch some scary shows on an old TV.

## Spooky Vision

Similar to my ugly sweater series, I made a frame to help display a subject. [Click to see how the sweater was made.](https://dev.to/jarvisscript/return-of-css-halloween-4idg) This time the frame is a vintage TV set. The subject is a Halloween creature. 

I placed a `subject div` in that `Screen Frame div`. Inside the character div is a div for a specific character for this post it has a class of `ghost_body`. 


## The TV ##

```HTML
 <div class="main">
  <div class="screen_frame">
    	<div class="subject">
    		<div class="ghost_body"></div>
        </div>
  </div>
</div>
```

Outside the Screen div is the panel with the television dials. 

```HTML
<panel>
	<div class="box"><dial></dial></div>
	<div class="box"><dial></dial></div>
</panel>

```

![vintage TV with big dials. There are ghosts on the screen.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgwsjxj3a1j6qd0q17qp.jpg)


## Ghosts ##

The Ghosts themselves are just a few basic shapes. The body, eyes, and mouth are ovals. To make ovals in CSS add `border-radius` to a rectangle.


I used the `eyes class` to make oval eyes. For the mouth I reused the `eyes class` but made the oval larger by expanding width and height.

```HTML
<div class="ghost_body">
    <div class="eyeRow">
    	<div class="eyes"></div>
    	<div class="eyes"></div>
    </div>

   <div class="eyes mouth"></div>
</div>
```

```CSS
.eyes {
  width: 20px;
  height: 30px;
  border-radius: 44%;
  background: var(--Black);
}

.mouth {
  width:  35px;
  height: 90px;
}

```

This is a work in progress. I would like to add some texture to the TV cabinet and maybe the screen. The subject on the screen can be changed. Check the header image of this post for a message.

- Thanks for reading.
ChatGPT Browser Plugin Recommendations
Published: 2023-10-25 21:38:45

As one of the hottest AI chatbots available today, ChatGPT's potential can be better utilized by combining it with some powerful plugins.

## ChatHub

[ChatHub](https://chathub.gg/) is a chatbot aggregation client that works with ChatGPT, Bing, Bard and many more bots at the same time!

Features

- Use multiple chatbots in one application, currently supporting ChatGPT, Bing Chat, Google Bard, Claude, CyberStarfire and several open source models, with more bots being integrated all the time.
- Chat with multiple chatbots at the same time and compare answers easily.
- Supports ChatGPT API, Azure OpenAI service, and GPT-4.
- Prompt library

![](http://s333b2izp.hn-bkt.clouddn.com/chathub.png)

## Flash ChatGPT

Flash Switcher is a plugin that enhances all common browser features.，[Flash ChatGPT](http://kjeek.com/) is a sub-feature of Flash Switcher that synchronizes and indexes ChatGPT chats locally, making it easy to quickly search and view chats in your browser, avoiding duplicate questions and improving the depth and quality of each chat.


![](http://s333b2izp.hn-bkt.clouddn.com/chatgpt-history-keys-compressed.png)

## ChatGPT Everywhere

[ChatGPT Everywhere](https://www.chatgpteverywhere.com/) supports synchronized display of ChatGPT results in Google, Gmail and so on. With ChatGPT Everywhere, ChatGPT is available on every page of Chrome.

![](http://s333b2izp.hn-bkt.clouddn.com/ChatGPT-Everywhere.png)

The combination of these plugins can greatly improve the efficiency and quality of our use of ChatGPT, and provide more possibilities for our creative thinking. In the future, with the continuous development of technology, we can look forward to the emergence of more innovative plug-ins based on ChatGPT, which will bring developers a better working experience.
Alpha v1.0.1
Published: 2023-10-25 21:35:57


## **Change Log**

##`Un-Categorized`
1. **Fixed Weapon woosh/strike audio**
2. **Weapon attacks now freeze the player animator temporarily to sell the effect of phyiscal contact being made**
3. **Test Combat music implemented for some boss npcs (Golem)**

---

##`High Priority`

1. **Disabled entryway to room**
	1. ~~Philosopher Room Black Screen~~
		1. ~~Disable the philosopher room entry until the gateway logic is resolved~~
1. **Hid control until feature is implemented**
    1. ~~Auto-Save does not exist even though death screen shows to load auto-save~~
       1. ~~Rename/hide auto-save option until feature is implemented~~.
1. **Removed from drop tables**
    1. ~~Disable Claymore~~
       1. ~~Add it back later when there's actually a good plan for it~~
1. **Trim "(Clone)" from ends of names | better fix down the road will be to assign name value from json**
	4. ~~Npc names are being displayed with "Clone"~~
1. **Added a 0.25 second input cooldown to control logic speed**
    1. ~~Changing weapons doesn't always work~~
       1. ~~Holding down weapon/consumable cycle keys will keep cycling~~
          1. ~~That should not happen~~
1. **Removed Courtyard key and unlocked door to rocky outcropping**
1. **Fixed dodge for Greatsword**
    1. ~~Dodge does not work with greatsword (doesn't work with any weapon but regular sword right now)~~
1. **Implemented Skin Writing Mechanic Prototype**
	3. ~~Plan out Skin Writing Mechanic~~
		1. ~~ Attacks fill a meter depending on what style of attack it is~~
			1. ~~Melee fills meter with melee power~~
	   		1. ~~Magic fills meter with magic power~~
	    2. ~~Maybe special potions can accentuate the meter to some extent?~~
	        1. ~~I have no clue whether or not accentuate is actually a word~~
		3.  ~~(Idea) Maybe when the meter is full player, can activate their "skin writing power" and receive a boost to their attack styles based on how the meter was filled~~
	       1. If player maxed out meter using only melee, then melee attacks are boosted
	       2. ~~If player maxed out meter using on magic, then magic attacks are boosted~~
	       3. ~~If player maxed out meter using a combination of melee/magic, then melee/magic attacks boosted depending on the meter's ratio of melee/magic~~
	    4. ~~Maybe herb concoctions can be consumed to add additional affects like increased attack/movement speed, increased damage output, incoming damage reduction,~~

---

##**`Medium-High Priority`**

1. Disabled and cleared artificial gravity buildup when rigidbody is set to kinematic
  1.  ~~Ladder teleports the player to the bottom and sometimes the player gets stuck~~
2. Randomized Damage Text
  1. ~~Damage Text Velocity randomized~~