teleren/devto huggingface dataset:
ADD A DISK, INITIALIZE IT AND MAKE IT USEABLE IN AZURE
Tags: devops, azure, beginners, cloudcomputing
Published: 2023-10-14 16:08:34

**Step 1:** After you have launched your virtual machine, come back to your Azure portal and click on **DISK**


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

**Step 2:** Scroll down and click on **create and attach a new disk** 


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

**Step 3:** A new pop up shows just below it. fill in the details. Your disk name, the storage type you want, and the size of the disk you want to create.


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

**Step 4:** Connect back to your virtual machine


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

**Step 5:** After your virtual machine is done loading, go to the search bar and search for **Disk management** and click on **Create and format hard disk partition**


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

**Step 6:** a new tab opens up. scroll down, you will see **Disk 2**, right click on it and click **Simple new volume**.


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

**Step 7:** Follow the installation process by clicking **Next**

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

**Step 8:** When you get to the **Format partition** tab, you select how you want your disk to be formatted 


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

**Step 9:** You click on **Finish** and you are done


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


To check if the disk is installed and ready to use, go to **This PC** on your system, you will see it mounted. 


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

- Note: You can give you disk a name when you are mounting it. Mine is showing **new volume** because I skipped that process.
Hi! I'm new here..
Tags: webdev, powerplatform, newdev, beginners
Published: 2023-11-19 04:12:57

I’m Ryan VerWey, a mid-level developer with a burgeoning passion in the fields of web development and UI/UX design. With my roots firmly planted in SharePoint and Microsoft Power Platform, I've decided to venture into the dynamic world of web development and the creative realm of UI/UX design.

My journey into this new domain is not just a career shift, but a quest to deepen my understanding and skills in a rapidly evolving digital landscape. Through this blog, I aim to share my experiences, challenges, and the valuable lessons learned along the way.

I believe that growth comes from stepping out of our comfort zones. This transition marks a significant leap for me, from a specialized focus to a broader and more inclusive perspective in technology. My goal is to not only enhance my technical capabilities but also to develop a keen eye for design and user experience.

Stay tuned as I navigate through this exciting phase of my career, where every day is a learning opportunity. I look forward to connecting with fellow enthusiasts, exchanging ideas, and growing together in this journey.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6m3equ1u6nb1youez8fw.png)
JavaScript topics for learning react
Tags: webdev, javascript, react, beginners
Published: 2023-11-06 07:23:51

Learning React in 2023 requires a solid understanding of various JavaScript concepts, as React is a JavaScript framework for building user interfaces. Here are some of the essential JavaScript topics you should be comfortable with before diving into React:
[Follow me on X](https://bit.ly/3SinH8E)


1. **Callback Functions**: These are functions executed after another function has completed. They're prevalent in JavaScript for handling asynchronous operations, such as events, timers, and after fetching data.

2. **Promises**: To avoid "Callback Hell," which is the nesting of callback functions, promises are used. They allow for writing asynchronous code in a more manageable way and are essential for operations where you expect a future value, such as HTTP requests.

3. **Array Methods**: Understanding methods like `map()`, `filter()`, and `find()` is crucial. `map()` is particularly important in React for rendering lists of elements and can return a new array without altering the size of the original array.

4. **Destructuring**: This is a concise way to extract multiple properties from arrays or objects by unpacking them into distinct variables, which is frequently used in React for props and state management.

5. **Rest and Spread Operators**: These are versatile operators denoted by `...` and are used for several purposes like combining arrays, objects, or extracting their values.

6. **ES2015 Features**: Since React builds on modern JavaScript features introduced with ES2015 (also known as ES6), familiarity with these new syntaxes and capabilities is imperative.

Each of these JavaScript concepts is a foundational block for learning React effectively and will help you understand the more advanced features of the framework as you progress. Moreover, diving into React with a strong grasp of JavaScript will make the learning curve much smoother and enable you to write more robust, maintainable, and efficient code.
GPT-4 Vs Zephyr 7b Beta: Which One Should You Use? 2023
Tags: gpt4, langchain, llamaindex, datascience
Published: 2023-11-06 11:03:22

"zephyr 7b beta" is a fine-tuned version of the mode"Mistral" developed by the Hugging Face H4 team that performs similarly to the previous Chat Llama 70B model in multiple benchmark tests and even better results in "MT Bench''. and is more accurate than Meta's LLama 2

Full Article on My [HomePage](https://quickaitutorial.com/gpt-4-vs-zephyr-7b-beta-which-one-should-you-use/)
Efficient HP Device Support: Resolving Printer, ToucHPad, and Laptop Keyboard Issues Hassle-Free
Published: 2023-11-06 11:33:15

In the ever-evolving world of technology, having reliable support for your devices is crucial. When it comes to <a href="https://www.contact-phone-number.com/hp-support/">HP printers support</a>, our dedicated team of professionals is committed to providing top-notch solutions for all your printer-related concerns. But printers are not the only devices we specialize in. We understand the frustration that arises when your <a href="https://www.contact-phone-number.com/fix-HP-toucHPad-not-working-error/">toucHPad</a> stops working unexpectedly. Our technicians are well-equipped to diagnose and fix the issue promptly, ensuring you can get back to your tasks without any interruptions. Additionally, if you're facing problems with a <a href="https://www.contact-phone-number.com/troubleshoot-HP-laptop-keyboard-locked-issue/">HP laptop keyboard locked</a> situation, worry not. Our experts can <a href="https://www.contact-phone-number.com/troubleshoot-HP-laptop-keyboard-locked-issue/">troubleshoot</a> the problem efficiently, allowing you to regain control of your device. With our reliable support services, you can experience the smooth functioning of your HP devices, making your tech experience hassle-free.
Resizing Your Installed Linux Partition: A Step-by-Step Guide
Tags: linux, tutorial, beginners
Published: 2023-11-06 14:46:12

Resizing your Linux partition can be a bit tricky, especially for new users, especially when you're using a dual-boot setup. To make it clear and concise, here's an updated step-by-step guide using Ubuntu as an example.

Please note that if you're not using Ubuntu, the specific Linux distribution mentioned in this guide (Ubuntu) should be replaced with the name of the Linux distribution you have installed, such as Kali, Fedora, or any other distribution.

**Note:** Always back up your important data before attempting any disk partition changes.

**Step 1:** Insert your bootable Ubuntu USB.

![Inserting bootable usb illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mwkba2ax44ai04srqg1.png)

**Step 2:** Start or restart your computer and access the boot menu. The key to access the boot menu varies depending on your computer's manufacturer, but it's often something like F12 or F2. Consult your computer's documentation or perform an online search to find the correct key for your machine.

**Step 3:** Select "Try Ubuntu without installing" from the boot menu. If you can't find this option, choose "Install Ubuntu" instead. After selecting "Install Ubuntu," you'll be directed to the installation menu, where you should then see the "Try Ubuntu without installing" option.

![Try ubuntu without installing image example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5let21s8kebqmbuyea5z.png)

**Step 4:** Once you're in the live Ubuntu environment, open GParted.

**Step 5:** In GParted, locate your Ubuntu partition (usually identified as ext4 or a similar filesystem), and carefully resize it to create more space. Ensure that you leave enough space for Ubuntu to function correctly; if in doubt, consult with a knowledgeable friend or online resources to determine the optimal size.

That's it! You've successfully resized your Ubuntu partition. After this, you can proceed with the installation or other tasks as needed. Remember to always back up your data and proceed with caution when resizing partitions to avoid data loss.
How to automate an image-based captcha solution in JavaScript
Tags: javascript, captcha, 2captcha, puppeteer
Published: 2023-11-06 18:18:27

This article describes how to automate image-based captcha solving in JavaScript using [Puppeteer](https://pptr.dev/) and the [2captcha](https://2captcha.com/) service. [Puppeteer](https://pptr.dev/) is a Node.js library used for automation. [2captcha](https://2captcha.com/) is a service used to solve captchas. To interact with the [2captcha](https://2captcha.com/) service, the [2captcha-ts](https://www.npmjs.com/package/2captcha-ts) library is used.

## Algorithm of actions:

1. Open the page in Puppeteer and save the captcha image
2. Sending the captcha to the service
3. We get the answer to the captcha
4. We use the received answer on the page

### Step #1 - Open the page in Puppeteer and save the captcha image

For example, let’s open a demo page with a captcha image and save the captcha image:
```js
// Open page
await page.goto("https://2captcha.com/demo/normal");
await page.waitForSelector('img[alt="normal captcha example"]');
const element = await page.$('img[alt="normal captcha example"]');
// Save captcha
await element.screenshot({ path: "./image_captcha.png" });
```
### Step #2 - Sending the captcha to the service
```js
const getCaptchaAnswer = async () => {
  try {
    const base64Captcha = fs.readFileSync("./image_captcha.png", "base64");
    // Sending captcha to 2captcha.com service
    const res = await solver.imageCaptcha({
      body: base64Captcha,
    });
    return res.data;
  } catch (err) {
    console.log(err);
  }
};
```

### Step #3 - We get the answer to the captcha
```js
const captchaAnswer = await getCaptchaAnswer();
console.log("captchaAnswer:" + captchaAnswer);
```

### Step #4 -We use the received answer on the page

```js
// Typing the received answer into the answer field
await page.type("#simple-captcha-field", captchaAnswer, { delay: 500 });
await page.evaluate(() => {
  // Click on 'check' button
  document.querySelector("button[type=submit]").click();
});
```

Full code example available on [GitHub](https://github.com/dzmitry-duboyski/normal-captcha-example/blob/main/index.js)
First Open Source Contribution 🧑‍💻
Tags: hack23contributor
Published: 2023-11-06 19:13:33

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

### Intro
<!-- Share a bit about yourself as a contributor. Is this your first Hacktoberfest, or have you contributed to others? Feel free to embed your GitHub account by using {% embed LINK %} -->

This October was my first Open Source contribution and I am glad to part of it.
I've found a real passion for contributing to open source and am always excited about the opportunity to give back to the community. My journey in Hacktoberfest 2023 led me to explore new projects and collaborate with amazing developers from around the world. Check out my contributions on my GitHub profile.

### Highs and Lows
<!-- What were some of your biggest accomplishments or light-bulb moments this month? Did any problems come up that seemed impossible to fix? How did you adapt in those cases?  -->

One of the highs this month was getting my pull request merged into a project I've been using as a developer for quite some time. The sense of accomplishment was profound, and it reinforced my love for coding and collaboration.

On the flip side, I encountered a particularly stubborn bug in one of my submissions. Despite the initial frustration, this roadblock turned into a learning opportunity. It taught me to reach out more to the community, and with some guidance from seasoned maintainers, I was able to overcome the challenge. This was a reminder of the power of community in open source.

### Growth
<!-- What was your skillset before Hacktoberfest 2023 and how did it improve? Have your learning or career goals changed since working on these new projects? -->

My learning goals have certainly evolved. I now aim to contribute more regularly to open-source projects, not just in October. Professionally, I've become more interested in backend development thanks to the projects I've contributed to. Hacktoberfest has been a catalyst for this growth, and I'm excited to see where these new skills will take me in my career.
Running Open Source Models locally with a TAURI GUI
Tags: ollama, llama, ai, tauri
Published: 2023-11-07 18:07:23


![Ollama Chat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxed50rvow2kgzim22rd.png)

I've always been a fan of the [Ollama Project](https://ollama.ai).

Recently, I created a simple web UI for it. It was just a slap-together of react codes.

I've also developed a desktop application with improved features and user-friendliness. However, I can't share the MacBook executables just yet because I need to sign the app (which I plan to do soon).

My main goal is to share the open-source code with anyone who's interested in experiencing the beauty of running open-source models locally, without requiring any specialized programming skills. I also welcome contributions from the community.

You can find the project on GitHub here: https://github.com/Akintunde102/ollama-chat-desktop-app.
JavaScript Beast on the Block
Published: 2023-11-07 22:02:30

Hello world...

If you are looking to learn from an expert...

And take your programming to the next level...

Or in search of someone to take on your programming projects...

Then look no further because I am the Programming Beast on the block.

I am about to reshape the future with code one line at a time.

I am knowledgeable in JavaScript and React with over four years programming experience.

Having worked with over fifty clients and turned their projects into masterpieces...

I dare say that I have the key to unlock your next programming project.

Ready for the magic?

Just send a DM or an Email and let's get started.

Keep your eyes locked on the TL for more.
Understanding parts of URL
Tags: webdev, javascript, programming, beginners
Published: 2023-11-08 05:31:52

### Understanding parts of an URL

In the context of web development, the URL path refers to the part of the URL that comes after the domain name and includes various parameters and components. These parameters are used to provide additional information to the server or to specify certain resources or actions. Here are some common parameters that can be present in the URL path:

1. **Protocol:**
   - The protocol specifies the communication protocol being used. Common examples include HTTP, HTTPS, FTP, and more.
   - Example: `https://www.example.com`

2. **Domain Name:**
   - The domain name identifies the specific web domain being accessed. It represents the unique address of the website or web application.
   - Example: `https://www.example.com`

3. **Port:**
   - The port number is used to identify a specific process or application on a server. It is often included in the URL to specify the destination port for the communication.
   - Example: `https://www.example.com:8080`

4. **Path:**
   - The path specifies the specific resource or location within the web server. It follows the domain name and may include one or more path segments separated by slashes.
   - Example: `https://www.example.com/products/electronics`

5. **Query Parameters:**
   - Query parameters provide additional data to the server and are appended to the URL after a question mark. They consist of key-value pairs separated by ampersands.
   - Example: `https://www.example.com/search?q=keyword&page=1`

6. **Anchor or Fragment Identifier:**
   - The anchor or fragment identifier is used to identify a specific location within a web page. It is indicated by a hash symbol followed by the anchor name.
   - Example: `https://www.example.com/about#section2`

Understanding these different parameters in the URL path is essential for handling various types of requests, parsing the incoming data, and directing the user to the appropriate resources or actions on the server-side application.
Angular @for
Tags: angular, angular17, typescript
Published: 2023-11-08 17:30:28

## Angular has released the new '@IF' block syntax similar to Javascript
How does this work?
`@For`
> Similar to JavaScript’s `for...of` loops, Angular provides the `@for` block for rendering repeated elements.

![Angular ngFor Alternative](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83z6h7jo5xpzimgrux0y.png)


![Angular ngFor Alternative](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjnxpf0ynr9afo1ievmr.png)

You might've noticed that there's additional `track` keyword.
`track` property

_Why?_ 

> Angular needs to track each element through any reordering, usually by treating a property of the item as a unique identifier or key (Items can later change or move).

![Angular ngFor Alternative](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtqfszith5uwr06udvx8.png)


[Angular docs](https://angular.dev/essentials/conditionals-and-loops)
i am facing an error while integrating mongoose with elysia
Tags: bunjs, elysia
Published: 2023-11-08 17:49:53

error looks like this : 

MongooseServerSelectionError:

1 | (function (...args) { super(...args); }) ^ MongooseServerSelectionError: Failed to connect code: "undefined" at new MongooseError (:1:32) at new MongooseServerSelectionError (:1:32) at _handleConnectionErrors (/home/jka_583/Projects/bun_project_1/backend/node_modules/mongoose/lib/connection.js:805:10) at /home/jka_583/Projects/bun_project_1/backend/node_modules/mongoose/lib/connection.js:780:10 at processTicksAndRejections (:61:76)

find a solution to this issue.....
Is Duolingo the right tool for learning?
Tags: learning, discuss, productivity, career
Published: 2023-11-09 08:42:01

I'd been using Duolingo for learning German for 1-2 months. Was it the right tool for learning new language? Not for me!

Duolingo doesn't take advantage of spaced repetition. I got sick and tired of successfully answering the same word for 15 lessons and then not seeing that word ever again. In total I did 2.5 units, so there was plenty of space for spaced repetition.

Overly gamified. When I do my first lessons of a day, there are so many "achievements" that they distract my focus and learning. Maybe the development could be focused better on the quality of learning instead of throwing tons of fake achievements?

I'm not a native English speaker. So I often ended up writing the longest sentence in English translation and have it marked as "false" just because of forgotten "the". Good job, Duo! You spot me...

The UI is also too primitive. For example, when I need to make a sentence out of multiple separate words provided in flashcards, I can't change the order of the words. I can only add the word to the end of the sentence, but not insert it. This again often results in having to rewrite the whole sentence, when the missing word is in the beginning of the sentence.

The overall feeling of the learning felt slow and boring. In the first weeks I was excited, because I was learning the new language. However, later when I was opening Duolingo, I felt more and more like it was a boring bureaucratic process that I have to go through. Why? Too many lessons of the same topic, too much repetition, too slow. I felt that throwing away 2/3 of the content would result in a 3 times better app.

So while this may be a tool for learning a new language, I consider it a really non efficient, non structured way of learning, having poor UX. I dumped Duolingo ~1 month ago changing my learning strategy. Now I feel more satisfied with my new learning process and feel that I'm improving faster.

What's Your experience learning languages? Have You used Duolingo?
A classic Snake game built using React.js, HTML Canvas, and TypeScript
Tags: games
Published: 2023-11-10 08:58:59

---
title: A classic Snake game built using React.js, HTML Canvas, and TypeScript
published: true
date: 2023-11-10 00:56:00 UTC
tags: Games
canonical_url: https://reactjsexample.com/a-classic-snake-game-built-using-react-js-html-canvas-and-typescript/
---

# Snake Game 🐍
 ![A classic Snake game built using React.js, HTML Canvas, and TypeScript](https://reactjsexample.com/content/images/2023/11/Code_2023-11_19-51-11.jpg)

![A classic Snake game built using React.js, HTML Canvas, and TypeScript](https://github.com/menard-codes/snakes-game/raw/main/README_ASSETS/snake-game-demo.gif)

A classic Snake game built using React.js, HTML Canvas, and TypeScript.

## Demo

You can play the game online at [Snake Game Demo](https://snakes-game-nine.vercel.app/).

## Features

- Classic Snake gameplay.
- Built with React.js and HTML canvas.
- No third-party libraries used.
- TypeScript for type safety.
- Responsive design.
- Score tracking.
- Saves HighScore
- Game over screen with the option to restart.
- Keyboard controls for navigation.

## Getting Started

To run the game locally, follow these steps:

1. Clone this repository:

2. Navigate to the project directory:

3. Install the required dependencies. Yarn is recommended:

4. Run the build script:

5. Start the game by serving the build output:

**NOTE** : The development environment causes the components to re-render, causing the game logic for the canvas to be duplicated and appear buggy. That’s why it’s recommended to build the app and run the build output to avoid the re-renders.

## Game Controls

Use the arrow keys or `W`,`A`,`S`,`D` keys on your keyboard to control the snake’s direction:

- ↑ (Up) or `W` – Move Up
- ↓ (Down) or `S` – Move Down
- ← (Left) or `A` – Move Left
- → (Right) or `D` – Move Right

Others:

- To **Pause** the game – Press `esc` or click anywhere the screen

## License

This project is licensed under the MIT License – see the [LICENSE](https://github.com/menard-codes/snakes-game/blob/main/LICENSE) file for details.

## GitHub

[View Github](https://github.com/menard-codes/snakes-game?ref=reactjsexample.com)