teleren/devto huggingface dataset:
How to find the closing and opening of div/tags in Visual Studio Code ?
Tags: productivity, webdev, vscode, div
Published: 2024-03-31 02:27:26

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

Imagine you're building a website, and your code is like a big puzzle.Each piece, like a <div> tag, fits together to make your webpage work. But sometimes, finding where these pieces start and end can feel like searching for a hidden treasure in a jungle.

In Visual Studio Code, the program you use to write your code, this can be a big headache. You scroll and scroll, trying to spot where a <div> tag begins and where it ends. It's like trying to find the start and finish of a race without a map!

It's frustrating because one wrong move, like missing a closing tag, can mess up your whole webpage. You might spend more time fixing mistakes than actually building your site!

But don't worry! There's a way to make this easier.





To get the content inside a div - Use Balance Inward 

ShortCut - Ctrl + Shift + P and select Balance Inward or you can assign a shortcut for that 



To get the whole openinig and close of a div use Balance Outward 

Shortcut - Ctrl + Shift + P and select
Company Formation in UAE
Tags: company, formation, uae, rakez
Published: 2024-03-31 01:36:00

Rakez is a leading business hub in the UAE, offering streamlined [company formation](https://rakez.com/en/) solutions. With its strategic location and investor-friendly environment, it provides a range of business setup options, including free zone and non-free zone entities. Its simplified processes, modern infrastructure, and attractive incentives make it an ideal choice for entrepreneurs and businesses looking to establish a presence in the UAE.
How to Configure your GitHub Credentials In Visual Studio Code
Tags: git, github, programming, tutorial
Published: 2024-03-31 01:30:00

Version control systems such as Git are extremely popular. GitHub repositories can be hosted locally (e.g. on a developer's computer). They are accessible on developers' development machines. Developers are able to send changes directly to their development machine and perform version control operations like comparison and history without connecting to the Internet.

In this article, I'll demonstrate how to Configure your GitHub credentials In Visual Studio Code.

**Step 01**: Setup and installation of Git

On the official [Git website](https://git-scm.com/), you can install Git-based on your operating system. During installation, make sure to follow the recommended choices. There are a number of configuration options for Git that need to be changed in order to work

![Git (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647666832651/QrvaWA4bG.png align="left")

**Step 02**: Installing Visual Studio Code

You can download and install Visual Studio Code from this [website](https://code.visualstudio.com/download). Simply follow the instructions to complete the installation. VS Code is characterized by its simplicity and many plugins. Additionally, the community and documentation for VS Code are extensive. Thus, almost all problems and issues can be addressed and resolved.

![Download Visual Studio Code - Mac, Linux, Windows.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647667071960/cGPDy611i.png align="left")

**Step 03**: Open the Visual Studio Code application. Here you will be using the Git credential helper, you will save securely the Git credentials used for communicating with GitHub

Open a terminal window by clicking the terminal option in the main menu

![Screenshot (375).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647671083702/q2TvDoZiB.png align="left")

**Step 04**: Run the following command to create a credential helper.

```plaintext
git config --global credential. helper winced
```

**Step 05**: By running the commands below, you'll configure your email address and user name for Git commits. Please substitute your preferred username and email address for the parameters.

```plaintext
git config --global user.the name "Muthu Annamalai"
git config --global user.email muthuannamalai@example.com
```

Now you have successfully added your Configured your Git username/email in Vs code. Now start making projects and show the world what you are doing

> You can now extend your support by buying me a Coffee.😊👇

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png align="left")](https://www.buymeacoffee.com/muthuannamalai)

Thanks for Reading 😊
Trend Worth 📖: Why Graph Neural Networks Will Dominate in 2024 & Beyond
Tags: machinelearning, deeplearning, ai, systemdesign
Published: 2024-03-31 01:26:42

Traditional Deep Learning Models Excel at Grids, but Real World is Messy !

[Full Article](https://medium.com/@learn-simplified/trend-worth-why-graph-neural-networks-will-dominate-in-2024-beyond-ef31ba1acbe8)

🌐 What is this article about?
This article explores the rising prominence of Graph Neural Networks (GNNs) and their potential to revolutionize how we tackle complex, real-world problems. It discusses the limitations of traditional deep learning models in handling relational data and how GNNs offer a powerful solution by leveraging relationships.

📚 Why Read It?
In an increasingly interconnected world, understanding GNNs' capabilities is crucial for staying ahead of the curve. This article provides an overview of this cutting-edge technology, highlighting its applications across domains and its potential to drive innovation.

🥅 The Problem
Traditional deep learning models like Convolutional Neural Networks (CNNs) excel at processing grid-like data (e.g., images) but struggle with complex, non-grid-like data that doesn't fit into rigid structures, leaving valuable insights unexplored.

🧭 The Solution
GNNs embrace the tangled web of connections and relationships that underpin our world. By modeling and learning from graph-structured data (nodes and edges), GNNs can effectively understand and leverage complex real-world systems.

🚀 Why You Can't Miss This
As the world becomes increasingly data-driven and interconnected, harnessing the power of relational data will be a critical competitive advantage. GNNs are poised to revolutionize industries like social networks, drug discovery, and recommendation systems, making them a technology that cannot be ignored.

📖 Let's Go
The article dives deep into the inner workings of GNNs, exploring their principles, architectures, and learning mechanisms. It examines real-world applications and groundbreaking advancements like PinSage and GraphCast.

🧑‍🔬 Let's Get Cooking!
The article explores key challenges faced by researchers and developers, such as scalability, interpretability, and data quality. It discusses ongoing efforts to improve GNN models' efficiency and robustness, as well as the development of standardized frameworks and best practices.

💡 Closing Thoughts
GNNs' ability to capture and leverage complex relational structures offers unprecedented opportunities for innovation and problem-solving across industries. This article aims to provide a deep appreciation for GNNs' transformative power and why they are poised to dominate in 2024 and beyond.
Glam Up My Markup: Camp Activities - by dshaw0004
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-31 00:39:00

_This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities_

## What I Built

For this challenge, I created a dynamic form for camp activity inquiries. I have divided those three input fields into 3 separate page. Users can select their preferred activity from a dropdown menu then in the next page they enter any food allergies they have (if applicable), and then provide additional information to the counsellor.

## Demo

These are the screenshots of the web page.

![page 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tl0tpze718zghvu76whf.png)
![page 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4oplfq71apowtr792hgb.png)
![Page 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctgfz0ves5cxxpxuk8h5.png)

You can find the web through this [link](https://devchallenge1.web.app/)

## Journey

The journey of creating this was very fun. I have only one concern. I have used a image with watermark as background and I don't think anyone would mind anything about this. After all it's a **freepik** image.

## License

Anyone wanted to use my code, feel free to ask me. I will share the source code with you after April 1st.
Building a Simple Game with Unity 3D
Tags: csharp, unity3d, tutorial, programming
Published: 2024-03-31 00:33:21

## Introduction

Unity 3D is a powerful game development engine that has gained popularity in recent years due to its ease of use and versatility. With its user-friendly interface and vast library of assets, Unity 3D has become the go-to tool for developers of all levels. In this article, we will explore the process of building a simple game with Unity 3D and the benefits and drawbacks of using this platform.

## Advantages of Using Unity 3D

1. **Cross-platform Compatibility:** One of the main advantages of using Unity 3D is its ability to easily port games to different platforms, including PC, mobile, and consoles.

2. **Vast Library of Assets and Plugins:** Unity's extensive library makes it easier to create complex and visually stunning games without starting from scratch.

3. **Thriving Community:** Unity boasts a vibrant community of developers who share knowledge, collaborate on projects, and provide support.

## Disadvantages of Using Unity 3D

1. **Cost:** The biggest disadvantage is the subscription cost required for full access to all features of Unity.

2. **Steep Learning Curve:** Unity can be overwhelming for beginners due to its complexity and the necessity of coding knowledge.

## Features of Unity 3D

- **Built-in Physics Engine:** Enables realistic game physics without the need for extensive coding.
- **Animation Tools:** Simplify the process of creating and managing animations within the game.
- **Visual and Audio Effects:** A wide range of effects to enhance the game's aesthetic and immersion.
- **C# Scripting Language:** Allows for complex and interactive gameplay development.
- **Asset Store:** Provides a vast selection of 3D models, textures, and sound effects ready to use in games.

### Example: Creating a New Project in Unity

```plaintext
1. Open Unity Hub and click on the 'New Project' button.
2. Select the template suitable for your game (e.g., 3D, 2D, VR/AR).
3. Name your project and choose the location to save it.
4. Click 'Create' to start building your game in the Unity Editor.
```

## Conclusion

Unity 3D is a powerful and versatile game development engine that offers many advantages and features for creating simple to complex games. Its ease of use and cross-platform compatibility make it a popular choice among developers. However, its cost and the steep learning curve can be challenging for beginners. With a supportive community and a vast library of assets, Unity 3D stands out as an excellent tool for creating visually stunning and engaging games.
One tool that has proven indispensable in my writing endeavors
Published: 2024-03-30 23:43:45

One tool that has proven indispensable in my writing endeavors is a powerful word counting tool. Its simplicity belies its usefulness. Whether I'm crafting an essay, composing a blog post, or fine-tuning a piece of fiction, [https://wordcounter.bot](https://wordcounter.bot) provides an efficient way to track my progress and adhere to word count constraints. Its intuitive interface allows for quick copy-pasting of text, and with just a click, I have an accurate tally of words, characters, and even sentences. Its reliability has made it my go-to companion in any writing project, aiding in maintaining clarity and conciseness. With this tool by my side, I can confidently navigate the intricate landscape of language, ensuring that every word serves its purpose.
Understanding Natural Language Processing (NLP)
Tags: naturallanguageprocessing, ai, deeplearning, machinelearning
Published: 2024-03-30 23:39:54

Natural Language Processing (NLP) is a transformative branch of artificial intelligence that focuses on the interaction between computers and humans using natural language. It encompasses a range of tasks, including translating text, responding to commands, recognizing users through voice, summarizing text, and assessing sentiment, among others​ ([IBM](https://www.ibm.com/topics/natural-language-processing))​. The goal of NLP is to enable computers to understand, interpret, and generate human languages in a manner that is both accurate and meaningful.

#### How NLP Works

NLP models operate by analyzing the structure and elements of language, such as letters, words, and sentences. This involves various processes like data preprocessing, where text is prepared through steps like tokenization, sentence segmentation, and stop word removal. Feature extraction techniques, such as Bag-of-Words or TF-IDF, help transform text into numerical data that models can understand. Advanced models like Word2Vec and GLoVE learn word embeddings that capture the context of words, making NLP models more effective in understanding language​ ([Deeplearning.ai](https://www.deeplearning.ai/resources/natural-language-processing/))​.

#### Applications in Industry

NLP has found applications across numerous industries:

**Healthcare:** Streamlining patient documentation and improving electronic health records.
**Finance:** Conducting sentiment analysis on financial texts to gauge market sentiment.
**Customer Service:** Powering chatbots to provide instant, 24/7 customer support.
**E-Commerce:** Enhancing search functionality by understanding and interpreting user queries, even when misspelled.
**Legal:** Automating document review processes to identify relevant information quickly​.

#### Everyday Uses of NLP

Beyond industry-specific uses, NLP is part of our daily interactions with technology, such as in search engines, virtual assistants (e.g., Siri, Alexa, Google Assistant), real-time translation services, email filtering, and social media monitoring​ ([Learn R, Python & Data Science Online](https://www.datacamp.com/blog/what-is-natural-language-processing))​.

#### Challenges and Future Directions

Despite its advancements, NLP faces challenges like ambiguity, context understanding, sarcasm detection, and cultural nuances. Future developments in NLP aim to address these challenges through techniques like transfer learning, which improves efficiency, and multimodal NLP, integrating NLP with other forms of data input​​.

NLP is a rapidly evolving field, promising even more sophisticated interactions between humans and machines. Its applications span from enhancing consumer convenience to streamlining business operations and breaking down language barriers, making it an indispensable part of modern technology.
API EXPOSED
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-30 23:31:11

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer
<!-- Explain a browser API or feature in 256 characters or less. -->
API stands for Application Programming Interface, a set of rules that allows software programs to communicate with each other. DOM stands for Document Object Model, a programming interface for HTML/XML documents that represents the structure of a document and allows manipulation.

## Additional Context
<!-- Please share any additional context you think the judges should take into consideration as it relates to your One Byte Explainer. -->
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content

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

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image to your post (if you want). -->


<!-- Thanks for participating! -->
How to Reverse Proxy NextJS with NGINX
Tags: nextjs, nginx
Published: 2024-03-30 23:02:21

Sup, let's get straight. Here's a simple tips to run your NextJS Pages (especially in dev environment, but also works on production ofc.) through Nginx. Before we started, I expect we're already have an Nginx configuration set up. 

Then, we're just simply adds these configs:

```
# Proxy NextJS Chunks, exception and websocket for HMR
location ~ ^/_?_next.* {
        proxy_pass [YOUR_NEXTJS_HOST_HERE];
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
```

**Yeah. But why?**
My case might be rare. I wanted to partially merge my NextJS Page into my existing website with different tech stacks (don't ask me why I didn't use NextJS at first start 🥲). So instead of embedding my NextJS page that dependent to my existing my website which takes lot of time to load, those /_next routes which loads JS chunks and another NextJS optimized stuffs could be passed directly into node server so it can reduce the latency. 

**But, it's just not about latency.** 
Previously, to debug my NextJS pages that merged, i have to compile every;single;changes; into production build to make it works. It's makes me frustrated because it's also waste my time since the hot reload and _Webpack_ stuffs doesn't work due to 404 error etc. So, I tried to adds some reverse proxy to my config and that's it! Works like a charm.

If you have the same cases, hope it helps.

PS:
I would also thanks to Farid Inawan (psps.. Check his cool Instagram account [here!](https://www.instagram.com/frd.tech/) He's making content about tech stuffs too) who helped me simplify the configuration. :)
Break me off a piece of that..
Tags: frontendchallenge, devchallenge, css
Published: 2024-03-30 22:51:12




https://codepen.io/Jay-Roche/pen/gOyGJBO?editors=0100
_This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack._

## Inspiration
Kit-Kat

Umm... This will be my first post anywhere ever... sssssoooo... be nice please 😅

Also my first time using codepen... so, hopefully that worked and I embedded it correctly... So, umm yea... Any tips or tricks or advice on literally anything is welcomed and appreciated..

*I don't think I embedded it the right way... so any help with that would be awesome... thanks..

A little while back I saw that you can do "pixel art" with CSS using box shadows on a div and... well.. I thought that was awesome!!! So, I started playing with it. I've made lot's of cool stuff with it. And honestly I probably could have added an animation to this in some way but.. don't really have the time.

I really love doing this.. I have a pikachu face that I did like this that does a cute animation and winks at the end of it.. it is a lot of "work" putting in each and every one of these pixels and it can get monotonous.. but it's still fun haha.

I hope you all enjoy!
Again.. This is my first post anywhere ever so... uhh.. yea haha. 

Umm, I don't know anything about licensing my code or anything... so..... 
You don't have permission to call this your own..
Please? haha..
Glam up my markup challenge
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-30 22:30:29

_This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities_

## What I Built
I decided I wanted to use some of the new features of CSS and see how much interactive and animated features could be built with just CSS.

I've tried to incorporate subtle animations and hints while providing a modern, minimalist, flat interface.

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

Hosted on github pages: https://seanyoung247.github.io/dev-glamup/
https://github.com/seanyoung247/dev-glamup

## Journey
I've been away from coding for a little while, so this was a relatively simple project to get back into.

I went in with a very nebulous idea of what I wanted to achieve. Initially I wanted a single background image with overlays displayed for the activities. However, working with free stock images getting a result that was aesthetic was taking too long. So I changed it to change the entire background image. Now it's done I would prefer perhaps a single background image with iconic images for the different activities. I would also have liked to incorporate a dark/light theme.

It was interesting exploring what can be done in CSS alone without building extra HTML. Also interesting to find the odd little holes that remain in CSS that require patching with JS.

MIT License.
we_coded iMac CSS Art
Tags: frontendchallenge, devchallenge, css, wecoded
Published: 2024-03-30 22:25:01

_This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack._

## Inspiration

My inspiration was apple iMac (Mac in css 😅), although we still celebrating we_coded 2024, so I wonder how could I join both ideas! Create the art and support the great event! 🤓

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

## Demo

source code: https://github.com/pavelee/css_art

{% codesandbox css-art-n6pp56 %}

## Journey

It's my first time creating css art! 🥳

Firstly I thought it's gonna be harder, but step by step I was moving forward. What important I had really fun time! 🤗

Getting good CSS structure is still challenging for me, I used pure CSS without any preprocessors and I could say it's pretty hard to make it clear! 🥲

I thought how could I refractor the code. I tried to create mac's window template, so it's reusable and shared across two windows on my Mac

```html
  <!-- window tempalte -->
  <!-- <div class="window">
    <div class="bar">
      <div class="controls">
        <div class="close"></div>
        <div class="minimize"></div>
        <div class="maximize"></div>
      </div>
      <div class="title"></div>
    </div>
    <div class="body"></div>
  </div> -->
```

For sure it's a good direction to keep it more clear! 🚂

That was a good time 🧑‍💻, thanks for the challange! ♥️
The paraphrasing tool I favor
Published: 2024-03-30 22:13:42

In search of a dependable paraphrasing solution? Well, your quest ends here! The paraphrasing tool I favor https://paraphrasingtools.ai has truly revolutionized my workflow. Its intuitive design and precise outputs set it apart in the market. Whether it's scholarly essays, web content, or any text, this tool adeptly rewords passages while preserving the essence. Moreover, it streamlines my workload, affording me more time for other endeavors. Give it a shot and witness its transformative prowess firsthand!