teleren/devto huggingface dataset:
Level Up Your Code with Quokka: Instant Feedback for JavaScript Ninjas!
Tags: javascript, vscode, extensions, beginners
Published: 2024-04-13 03:08:53

Calling all JavaScript warriors! Ever coded like a boss only to be blindsided by a sneaky syntax error? Or maybe you spend ages staring at console.logs, trying to decipher your code's cryptic messages? Fear not, for there's a new weapon in your arsenal: **Quokka**!

getting it is as easy as searching for it within vs code!

![finding the extension](https://cdn.hashnode.com/res/hashnode/image/upload/v1712968169800/83125bf9-f784-4a06-a205-6839f19892a9.gif)


This bad boy isn't your average VS Code extension. It's like **a linter, a debugger, and a psychic code whisperer all rolled into one**. Quokka gives you **instant feedback** as you write, highlighting errors, showing function return values, and even displaying the output of your console.logs – line by line! Think of it as having a tiny coding gremlin perched on your shoulder, constantly giving you thumbs up (or, more likely, pointing out your mistakes).

Now, some of you seasoned veterans might be thinking, "Hey, Node.js has that --watch flag. Isn't that enough?" Sure, Node's --watch can re-run your code when you make changes. But Quokka takes things **way beyond basic reruns**. It shows you the results **in real time**, letting you identify and fix errors on the fly, especially in those **monster-sized, complex projects**.

![using quokka](https://cdn.hashnode.com/res/hashnode/image/upload/v1712968267519/2c1b11a1-72d4-445a-a43f-0b030c04e0c4.gif)

So, is Quokka the ultimate coding sidekick? For **large-scale JavaScript**, it's a definite **game-changer**. The instant feedback and wealth of information it provides can slash your debugging time and make your code sharper than a katana. However, for **smaller coding skirmishes**, Quokka might be a bit like bringing a bazooka to a nerf fight. The trusty --watch flag might be all you need in those cases. (and its good practice)

The bottom line? Quokka is a **powerful tool** that can **supercharge your coding experience**, especially when tackling complex projects. Just remember, like any good weapon, it's all about knowing when and where to wield it for maximum impact. So, grab your keyboard, unleash your inner JavaScript master, and let Quokka be your guide!  
  
**Unleash Quokka's Full Power!**

To experience Quokka's real-time magic with DOM manipulation, you'll need to install an additional plugin (sometimes)

1. Open your terminal and navigate to your Quokka configuration folder using the command:
    

```plaintext
cd ~/.quokka
```

2. Once there, install the `jsdom-quokka-plugin` and `jsdom` package with npm:
    

```plaintext
npm i jsdom-quokka-plugin jsdom
```

That's it! Now, when you use Quokka for projects involving DOM elements, you'll get the full range of its feedback awesomeness.
wsl arch setup for oh my posh
Tags: arch, wsl, ohmyposh
Published: 2024-04-13 02:04:19

## How to Install and Configure Oh My Posh on Arch Linux with Zsh

Upgrading your terminal’s aesthetics and functionality can dramatically improve your coding experience. One way to do this on Arch Linux is by installing Oh My Posh, a prompt theme engine for shell environments. This blog post will guide you through the process of installing Oh My Posh and configuring the Alien theme using Zsh.

### Step 1: Download the Correct Binary

Before anything, you must download the correct Oh My Posh binary suitable for Linux. You can check the latest release and appropriate file link directly from the [Oh My Posh Releases](https://github.com/JanDeDobbeleer/oh-my-posh/releases) page on GitHub. Use the following commands to download and set up the binary:

```bash
# Download the correct binary for Linux (replace the URL with the latest version if needed)
wget https://github.com/JanDeDobbeleer/oh-my-posh/releases/latest/download/posh-linux-amd64 -O oh-my-posh

# Make the binary executable
chmod +x oh-my-posh

# Move the binary to a directory in your PATH
sudo mv oh-my-posh /usr/local/bin/
```

### Step 2: Verify the Installation

After installing, it’s crucial to ensure that the `oh-my-posh` executable is working correctly:

```bash
# Check Oh My Posh version to verify installation
oh-my-posh --version
```

If the command prints the version of Oh My Posh, the tool has been installed successfully.

### Step 3: Configure Oh My Posh for Zsh

With Oh My Posh installed, your next step is to configure it to use with Zsh:

1. **Create a directory for themes (if not already done):**

    ```bash
    mkdir -p ~/.poshthemes
    ```

2. **Download the Alien theme configuration:**

    ```bash
    curl -Lo ~/.poshthemes/alien.omp.json https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/alien.omp.json
    ```

3. **Update your `.zshrc` file to use Oh My Posh:**

    Open your `.zshrc` file in a text editor:

    ```bash
    nano ~/.zshrc
    ```

    Add the following line to the file to initialize Oh My Posh:

    ```bash
    eval "$(oh-my-posh --init --shell zsh --config ~/.poshthemes/alien.omp.json)"
    ```

    Save and close the file. Then, apply the changes:

    ```bash
    source ~/.zshrc
    ```

### Step 4: Check the Configuration

To see the changes, open a new terminal window or tab. The Oh My Posh prompt with the Alien theme should now be active. Ensure your terminal is configured to use a Nerd Font to correctly display all icons and glyphs.

If you encounter any issues, verify that the `oh-my-posh` binary path (`/usr/local/bin/oh-my-posh`) is correctly included in your `PATH` environment variable. Make any necessary adjustments depending on your installation path.

This setup should now display the prompt correctly with the chosen theme, enhancing your terminal’s functionality and aesthetics. Enjoy your new, powerful, and visually pleasing terminal setup!
skillo.me - Trade Skills!
Published: 2024-04-13 01:02:11

🌟 Hello dev.to World! 🌟
[skillo.me](https://www.skillo.me/skill-swaps)

Skillo.me is the most exciting way to evaluate, trade and get discovered your skills! Now you'll not only get to show off your skills, but you'll also have the opportunity to learn and grow further by trading them with others'.

🚀 Skill Exchange: Skillo.me offers the opportunity to exchange your unique skills with other users and mutually learn. What can you offer? Is it a language, a coding skill, perhaps a creative art talent? Skillo.me brings all of these together and offers an incredible trading experience.

💼 Creating a Talent Profile: Your profile is like a work of art that defines you and highlights you. Skillo.me allows you to create an impressive profile that highlights your unique skills and experiences. Whether you're a software developer or a graphic designer, you can express yourself at your best on Skillo.me.

🔍 Discovered by Talent Scouts: Just show your skills and leave the rest to us! Skillo.me offers the most effective way to reach talent scouts who are looking for you and want to collaborate with you. Explore Skillo.me to expand your professional network and discover new opportunities.

Skillo.me is the most modern and effective way to showcase your skills and join a worldwide community. Join today and start sharing your talents with the world!
Optimize feed in ChatCraft
Tags: opensource, feed, programming, cloudflare
Published: 2024-04-13 00:38:49

Last two week, I created share feed for ChatChaft in CloudFlare, this week, I tried to optimize it:

**Refine the Feed Icon**
At first, I just copied the URL after user clicking the Feed Icon on the header, but it is not a good way to show it to users. So I change it to open a new tab.
```
      const currentUrl = window.location.href;
      const parsedUrl = new URL(currentUrl);
      const userFeedUrl = `${parsedUrl.origin}/api/share/${user.username}/feed.atom`;
      window.open(userFeedUrl, "_blank");
```


**The Endeavor to Parse HTML with Linkedom**
Last week, I used cheerio to parse HTML on cloudflare, but it was published 2 years ago and hasn't seen updates since that.
So I try to find a better one library. I turn to use linkedom to parse HTML on cloudflare:
```
      const document = new DOMParser().parseFromString(chatContent, "text/html");

      const getTitle = document.querySelector('meta[property="og:title"]');
      const title = getTitle ? getTitle.getAttribute("content") : "No Title";

      const getSummary = document.querySelector('meta[property="og:description"]');
      const summary = getSummary ? getSummary.getAttribute("content") : "No Summary";

      const getUrl = document.querySelector('meta[property="og:url"]');
      const url = getUrl ? getUrl.getAttribute("content") : "No URL";
      const preContentElement = document.querySelector("pre");
      const preContent = preContentElement ? preContentElement.textContent : "";
```
here I check getTitle first which can solve the some document don't have title sometimes.

**Conclusion**
I think I've finished the feed feature and we almost finish this semester, next week I'll make a conclusion of what I've done this semester on ChatCraft project.
Diary - Building my own social midia - Picking the tech stack - 3/X
Tags: webdev, javascript, programming
Published: 2024-04-13 00:32:24

##Disclaimer

I decide to create this post series as a dairy of my creating my own App journey.

I'm not a expert on web or mobile development,(I work as a BI Consultant by the way) I just love programming and discover how the things works, So be worried that this isn't a 'HOW TO' post.

I just decided write this post because I'm having problems to sleep 🥲,

##The tech stack.

This is one of the most important steps at an project and some decisions madded here could cause severally problems on the future.

But we will just ignore that and choose the easiest way of having the things done. Why? Because it is a POC!! Our objective is just test the idea adherence.

##Points to considerate:

- I'm not a software engineer expert;
- I hate heavy frameworks, I like to keep the things simple;
- The best options would be creating a app, but looks really harder then just build a website;
- Everything must be free(Because I'm poor).

Based on all this points I decided for using the following technologies:

#Restful API:
 - Mustasch Template;
 - _hyperscripy;
 - NodeJS with Express;

#Data API:
 - NodeJS with Express.

#Data Base:
 - MongoDB.

Maybe their is the worst tech stack ever? Maybe but it's keep everything simple and let me focus on the really villain: the problem.

Now let's code it \o/.
How To Create Window 11 Pro with Azure Virtual Machine
Published: 2024-04-13 00:27:58

Azure Virtual Machines is an infrastructure of a range of networking capabilities and related services such as Azure Virtual Network, public and private IP addresses, network security groups, virtual private networks (VPN), and Azure ExpressRoute that enable connectivity and security and ensure high availability for your applications.

Windows 11pro virtual machine is an Azure resource which offers flexibility, convenience, and the ability to explore and test the latest version of windows without making permanent changes to your primary operating system or hardware, with a windows 11pro virtual machine you can create a customized environment to meet your desire or needs.

The following steps below will guide you to create your Azure windows 11pro virtual machine:

i) Sign in to your azure account,( your fee or pay as you go subscription account) type virtual machine on the search bar on your azure account

ii) From the search result, select "Virtual Machine" from the list of resources displayed

iii) Click on the "Create" button

iv.)Select the virtual machine highlighted. Then you will be directed to "Basic"

v) From the Basic, fill in all the required boxes, (particularly the asterisks) ranging form project details, instances details and the rest

vi) When you get to the down page, an arrow will direct you to the other page, which is "Disks"

vii) Fill up the required boxes and move to the next page with your toolbar. Continue the process till you get to the last page of "Review + Create"

viii) Once you click on the create button, your resource will go through the deployment process, once that's successful, click on the "Go to Resource" button

ix) Click on the "connect" button, then Click on "Download RDP file"

x)  Open the downloaded RDP file and click "connect"

xi) Input your username and password, click ok, then Yes

xii) Welcome!! You are connected to your Windows 11 Pro.
Exploring the JAMstack: JavaScript, APIs, and Markup
Tags: webdev, javascript, beginners, programming
Published: 2024-04-13 00:25:38

## Introduction

The JAMstack is a modern approach to creating websites and web applications. It stands for JavaScript, APIs, and Markup, and is gaining popularity among developers due to its various advantages. In this article, we will explore the JAMstack in detail, including its key components, features, and its pros and cons.

## Advantages

The JAMstack offers numerous advantages, making it a preferred choice for developers. The separation of presentation and content from the server-side logic allows for better scalability, performance, and security. The pre-rendering of content also ensures fast loading speeds, providing a better user experience. Additionally, JAMstack sites can easily integrate with various services and apps through APIs, allowing for more dynamic and customized content.

## Disadvantages

One of the drawbacks of using the JAMstack is the lack of dynamic functionalities, as it heavily relies on client-side rendering. This can be a challenge for websites that require frequent updates and changes. Another disadvantage is the learning curve for developers who are not familiar with the technologies used in the JAMstack, such as static site generators.

## Features

The key components of the JAMstack include:

- **JavaScript:** Handles the dynamic functionalities of the site.
- **APIs:** Connect the website to external services and applications.
- **Markup:** Utilizes HTML and CSS for structuring and styling the website.

Modern tools and frameworks such as React, Vue.js, and Gatsby are commonly used to build JAMstack sites, making the process more efficient and flexible.

### Example: Building a Simple JAMstack Site

```bash
# Using Gatsby to create a new JAMstack site
gatsby new my-jamstack-site

# Navigate into your new site’s directory and start it up.
cd my-jamstack-site
gatsby develop
```

This example demonstrates how to quickly start a JAMstack project using Gatsby, a popular static site generator that integrates seamlessly with React.

## Conclusion

The JAMstack offers a new and efficient way of building websites by leveraging the power of JavaScript, APIs, and Markup. While it has its limitations, the various advantages it offers make it a promising approach for the future of web development. With the continuous advancements in technology and growing community support, the JAMstack is definitely worth exploring for developers looking to build fast, secure, and flexible websites.
Caption This! 🤔💭
Tags: watercooler, discuss
Published: 2024-04-13 00:00:00

---
published_at : 2024-04-13 00:00 +0000
---
Can you come up with the wittiest caption to explain what's happening here?

![A cactus formed into a face](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjajd1yxne9qysfq2z6l.jpg)

Follow the DEVteam for more online camaraderie!

{% embed [https://dev.to/devteam](https://dev.to/devteam) %}
Caption This! 🤔💭
Tags: watercooler, discuss
Published: 2024-04-13 00:00:00

---
published_at : 2024-04-13 00:00 +0000
---
Calling all clever minds! Put your thinking caps on and drop the most hilariously brilliant caption to unravel the story hiding in this snap.

![Image of a bunch of eggs smiling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h804p8h81culvyb6s3nu.jpg)
I want my default mode network back.
Tags: ai, development, psychology
Published: 2024-04-12 23:44:15

I turned off all my AI code assistants.

I expected to feel a huge slowdown in my productivity. I was fearing an anxiety buildup as I plodded along on the keyboard. What I discovered instead was a sense of peace. I felt like I was returning to an old favorite hobby that I had given up for lack of time.

When I first started using Co-Pilot and then later Codeium I felt like I had a new superpower. Those lines of code would literally write themselves and my productivity was through the roof. But something felt off. It was like someone else was stealing my Asana tickets and completing them behind my back. Sure, there was code there, it looked right, and it seemed to work right, but I didn't know it. It was "stranger code".

Here is what I think happened. Our brains have something called the ["Default mode network"](https://en.wikipedia.org/wiki/Default_mode_network). This part of our brain is where we daydream, process past information, and plan for the future. The DMN can activate for short bursts of time even when we blink. My theory is that it also activates when we do things like take the time to type out a whole block of code by hand. By tab-keying out AI generated code we are canceling these small windows of time where our brain could process big picture thoughts. We lose sight of the problem we are solving and the code we are solving it with.

My theory is that producing more code with less thoughtfulness will eventually result in a loss of productivity. What do you think?
Announcing LagoonCon Portland 2024!
Published: 2024-04-12 23:16:21

If you're heading to DrupalCon or in the area, don't miss LagoonCon 2024! 


## We invite you to join us at LagoonCon and learn more about:

- What Lagoon is 
- Why it’s changing developers’ lives 
- The benefits of open source application delivery 
- How to upgrade your hosting and application delivery strategy
- How to contribute to the Lagoon project

## Who should attend?

Anyone who wants a better delivery experience from start to finish. From CTOs, developers, site builders, project managers, and product owners – especially if you’re working with decoupled and composable architecture. If you want to learn more about the benefits of a delivery platform like Lagoon, we’d love to have you!

**Date**: Monday, May 6, 2024
**Venue**: Willamette 1 Room, Hyatt Regency Portland at the Oregon Convention Center
**Time**: 6:30 PM – 10:00 PM PDT
**Cost**: FREE with Registration

[Learn more about the schedule and speakers and register for free today!](https://www.amazee.io/lagooncon-portland-2024)
Qisqasi C# Kasr
Published: 2024-04-12 23:06:46

Agar ushbu maqola sizni qiziqtirgan bo'lsa, bu mening maqsadim.
Qiziqarli holatlardan biri Console.WriteLine(10); Agar biz uni ekranda chop etishni so'rasak, u men int ga tegishli man deydi, ya'ni Int32,
shuning uchun default xolatda har qanday raqam Int32 sifatida qabul qilinadi.

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

Buxgalteriya holatlarida Float, Double da ishlatilmaydi.
Float, Double yaxshilangan Decimal formati

Vaqt o'tishi bilan men ushbu maqolani albatta yaxshilab boraman
The Journey to 1000 Followers : Lessons Learned and Future Directions
Published: 2024-04-12 23:03:32

#Introduction
Recently, I reached **1000** followers on dev.to! First and foremost, I would like to deeply thank everyone who regularly reads my articles.
In this article, I will write about why I started blogging, what I have learned, and the future direction of my blog.

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

#Why I Started Blogging
I am currently a college student who studies web development. I began writing blogs in early spring of 2023 as a way **to output my daily learnings**. For my own growth, I committed to posting weekly articles on dev.to about web development, life hacks, and personal development. This weekly posting schedule has become a self-imposed duty, and **I have maintained it for about a year now**.

Additionally, I am originally from Japan but have been living in Canada since 2022. Writing the blog articles also serves as a way to improve my English proficiency.


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



#What I Learned Through Blog Writing

##The Importance of Consistency
Even if the articles are short or the content is simple, <u>regularly updating a blog requires a great deal of effort</u>.

I managed to write one article every week for a year. Being able to maintain this consistent effort over a long period is a source of great pride for me. Through this experience, I learned the importance of persistence in everything I do.

##Deepening Understanding Through Output
The insights and learnings obtained in daily life are quickly forgotten unless they are consciously retained.

Over the past year, I have selected particularly memorable events and insights to record in this blog, organizing them to ensure they resonate more deeply within me. This process has helped anchor important learnings and insights deep within my heart.

##Contributing to Others
Even articles written to deepen my own understanding can be useful to others when I share the process of learning.

While my main motivation for writing the blog is personal growth, knowing that it also helps others brings me great joy.


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


#Future Direction of the Blog
I am currently job hunting and my life is quite unstable, which makes blogging a challenge. If I secure a job, it might become easier to find time...

However, I hope to continue writing at a pace of one post per week for the foreseeable future.

Furthermore, I want to continue enhancing the quality of my blog articles as much as possible. I will keep enriching my knowledge so that I can create content that my readers enjoy reading.

Once again, I deeply thank everyone who regularly reads my articles. Have a great day :)