teleren/devto huggingface dataset:
De[v]log#3: Compiling rayilb on powershell!!!
Published: 2023-05-31 12:52:48


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

After 4 flipping days of constant head slamming....I managed to make it work!

These are all the error messages everytime I tried to compile raylib on cli

```
C:/raylib/w64devkit/bin/ld.exe: cannot find ..\../src/raylib.rc.data: No such file or directory
C:/raylib/w64devkit/bin/ld.exe: skipping incompatible ./libraylib.a when searching for -lraylib
C:/raylib/w64devkit/bin/ld.exe: skipping incompatible .\libraylib.a when searching for -lraylib

c:/mingw/bin/../lib/gcc/mingw32/6.3.0/../../../../mingw32/bin/ld.exe: cannot find -lraylib

c:/w64devkit/bin/../lib/gcc/mingw32/6.3.0/../../../../mingw32/bin/ld.exe: cannot find -lraylib
```

I couldn't make it work on cli...so i tried to make things work with vscode yesterday....and it work...but kinda...it only work with c codes and I really want to make it work for c++ too...on side note...I somehow compiled the code without error but the output file isn't compatible for with window for some reason...curious case indeed

after trying everything I can think off....it finally compiled and run...

the method was...
```
https://github.com/raysan5/raylib/wiki/Working-on-Windows
```
one of the section (Build ONE example using gcc/g++) tell you to run w64devkit.exe from raylib/w64devkit folder in C: and navigate to source and compile there...and it work...but it only work when I use w64devkit.exe from raylib/w64devkit folder.it doesn't work when I tried to compile from how do I say this....default w64devkit I installed on my C: drive...that is also the one I setup in my environment path -> C:\w64devkit

The error seems like it couldn't find the library necessary for raylib compilation...so I thought...maybe raylib/w64devkit folder have extra stuffs that default w64devkit I installed on my C: drive doesn't...so like any sane person would...I copy everything from raylib/w64devkit and paste them in default w64devkit...and voila I can now compile raylib source code from anywhere...and thus my problem is resolved....

> For fresh installation:
> * install raylib with window installer
> * remove mingw path if there is any to avoid any conflicts
> * put C:\w64devkit\bin in the path 
>and I guess that is pretty much it

I am so glad the problem is solved and....I can actually start coding...well that is what I want to say at least but now I gotta change astronvim c++ syntax highlight from c++11 to c++20...I somehow managed to do that in my wsl..but I tried so many stuffs in the process...I don't remember which one actually worked...but that is for another day xD...i m just gonna enjoy my little accomplishment and play some katana zero...
Stop using express.js
Tags: typescript, javascript, javascriptlibraries, beginners
Published: 2023-05-31 12:51:15

I'm so tiered of these "Build your first REST-API with Express.js" articles.
Seems like, writing such an article is the first thing you need to do, and the first application you need to implement is an Epress.js application.

But why?
There are so many real cool frameworks out there, which might do a much better job than Express.js, with support for state-of-the-art patterns like async-await and great communities.
Express.js 5 with async-await is announced since years, and the widely used version 4 is legacy code.
Even if version 5 becomes available in some years or centuries, you probably will need to migrate your code base.

Because of this, I will share some cool frameworks with you. Maybe you like to try them out and write your next article about something, which was not written a hundred times before.

## Feathers

Feathers is some kind of unicorn and is focusing on build REST-APIs and real-time applications.
Pretty cool concept and simple to use.

[Feathers.js](https://feathersjs.com)

## Hono

My lovely Hono!
If you're looking for some lightweight and fast way to build HTTP server, you must definitely try out Hono.
If you know Express.js or similar, you will exactly know how to use Hono.
It also supports different runtimes like Bun and Deno and allows you to write software, which benefits from the runtime benefits, without the need to re-write things.

[Hono](https://hono.dev)

## Elysia

Build to get the benefits of Bun runtime, it is a real promising framework.

[Elysia](https://elysiajs.com)

## Fastify, Restify, Hapi

If it comes to REST-API, you should definitly look into the "Three-Kings".
They are made for building REST-APIs, and they are also some kind of "way-to-go" with all these features, modules, plugins and communities.

[Restify](http://restify.com) & [Fastify](https://www.fastify.io)
[Hapi](https://hapi.dev)


## Koa (dead)

Koa was a more modern version of Express.js developed by the team of Express.js developers. It provides support for async-await.
But it seems to be no longer maintained by someone

[Koa](https://koajs.com)

And much, much more is out there!
So please, if you write beginners tutorials, don't stick to legacy Express.js.

If you come around some cool framework - please let me and the world know about it!
The Frontend guys are having so much progress with React, Angular, Vue, Svelte & Co over the last years, and we backend guys are sticking still in 2010?
Avoiding RSI with Python: Automating the Mundane
Tags: python, programming, automation, discuss
Published: 2023-05-31 12:48:28

Welcome to the world of Python, where even the most tedious tasks become a walk in the park. Today, I'll show you how to stave off Repetitive Strain Injury (RSI), and in the process, we'll learn to automate tasks so mundane, they could cure insomnia. By the end of this article, you'll be able to sit back, sip your coffee, and watch as Python does all the heavy lifting. Sounds too good to be true? Let's dive in.

## It All Started with a Click...

Picture this. You're at your desk, clicking away at a mundane task. Click, wait, click, wait, click, wait... Until your hand feels like it's going to fall off, and you're wondering if there's a way to hire a clicker. Well, guess what? There is - and it doesn't require a salary. Meet Python, your new best friend.

## Python – A Friend in Automation

Python, not to be confused with the reptile, is an incredibly versatile programming language. Don't let the name scare you. It doesn't slither, but it will weave its way through repetitive tasks with grace and ease, leaving you free to focus on more pressing matters (like catching up on your favorite Netflix show). 

## RSI – The Silent (Aggravating) Stalker

Before we jump into the coding part, let's talk about RSI – repetitive strain injury. It's the nagging pain that haunts you after hours of monotonous work. And it can be more than just a pain; it can actually lead to long-term injury. But why risk it when Python can do it for you? 

## Code Your Way Out of RSI

Python’s simplicity and readability make it an excellent choice for automating repetitive tasks. By using Python libraries such as PyAutoGUI, you can teach your computer to perform mouse clicks, keyboard strokes, and even capture screen information.

Here’s a simple example that can save your hand from countless mouse clicks. This Python script performs a left mouse click wherever your mouse cursor is positioned on your screen:

```python
import pyautogui

# Perform a simple left click
pyautogui.click()
```

Of course, you can also program Python to do more complex tasks, such as navigating web pages, filling out forms, or even playing your favorite online game (not recommended during work hours). 

## Automate Responsibly

A word of caution - while Python's automation capabilities can be a lifesaver, they can also wreak havoc if not used responsibly. Always make sure you're not violating any rules or regulations when automating tasks, especially at work. Remember, Python is a powerful tool, but with great power comes great responsibility. 

## Conclusion

In a world where time is money, Python is your personal banker, buying you time with every script. The best part? It works overtime without complaint. So, wave goodbye to repetitive strain injury and say hello to Python - your hands will thank you!

If you found this guide helpful, or if Python has saved you from any repetitive task nightmares, share your story in the comments. Now, if you'll excuse me, I'm off to teach Python how to make coffee...
Introduction to Android Studio
Tags: android, coding, developer, development
Published: 2023-05-31 12:45:44

Android Studio is the official Integrated Development Environment (IDE) for developing Android applications.

It provides a comprehensive set of tools and features that assist developers in designing, building, testing, and debugging Android apps.

To Setup a project in Android Studio watch this video:
{% embed https://www.youtube.com/embed/ag4rjGQAupw %}

Here are some key features and components of Android Studio:

User Interface: 

Android Studio offers a user-friendly interface with various panels, such as the Project panel, Editor panel, and Logcat panel, which allow you to navigate and edit your code efficiently.

Gradle Build System: 

Android Studio uses the Gradle build system, which automates the process of building, testing, and packaging your app. It manages your project's dependencies and handles the build process, making it easier to manage complex projects.

Code Editor: 

Android Studio includes a powerful code editor with features like code completion, code refactoring, syntax highlighting, and code templates. It supports multiple programming languages, including Java and Kotlin.

Layout Editor: 

The Layout Editor in Android Studio provides a visual interface for designing user interfaces (UIs) for your app. You can drag and drop UI elements onto a design canvas, and the Layout Editor generates the corresponding XML code.

Emulator and Device Manager: 

Android Studio includes an emulator that allows you to test your app on virtual devices with different Android versions and device configurations. It also provides a device manager for connecting and testing your app on physical devices.

Debugger: 

Android Studio comes with a powerful debugger that helps you find and fix bugs in your code. You can set breakpoints, inspect variables, and step through your code to identify and resolve issues.

Profiler: 

The Profiler tool in Android Studio helps you analyze the performance of your app by monitoring CPU, memory, and network usage. It provides real-time data and performance metrics to optimize your app's efficiency.

Version Control: Android Studio seamlessly integrates with popular version control systems like Git, allowing you to manage your codebase, track changes, and collaborate with other developers.

Extensibility: 

Android Studio supports plugins and extensions, allowing you to customize and extend the IDE's functionality to suit your specific needs.

Android Studio is widely used by Android developers worldwide due to its rich set of features and continuous updates from Google. It provides a robust development environment for building high-quality Android applications efficiently.
What is Dependency Injection + NestJs
Tags: webdev, typescript, node, softwareengineering
Published: 2023-05-31 12:45:06

## Dependency Injection

Dependency injection is a design pattern used in software engineering that involves injecting dependencies, or external objects, into a class or method instead of having the class or method create or find the objects itself.

With dependency injection, the dependencies are provided to the class or method from outside, typically through constructor injection or setter injection. This makes the code more modular and easier to test, as the dependencies can be easily replaced with mock objects or stubs during testing.

Let's say you have a UserService class that needs to interact with a UserRepository to fetch user data. In traditional software development, you might create an instance of the UserRepository class inside the UserService class. However, with dependency injection, you can inject the UserRepository instance into the UserService class instead.

Here's an example of how to do this in NestJS:

```
import { Injectable } from '@nestjs/common';
import { UserRepository } from './user.repository';

@Injectable()
export class UserService {
  constructor(private readonly userRepository: UserRepository) {}

  async getUserById(id: string): Promise<User> {
    return this.userRepository.findById(id);
  }
}
```

In this example, the UserService class has a constructor that takes an instance of the UserRepository class as a parameter. The @Injectable() decorator tells NestJS that this class is injectable and should be managed by the dependency injection system.

Now, when you want to use the UserService class in another class or module, you can simply import it and let NestJS handle the injection of the UserRepository instance:

```
import { Module } from '@nestjs/common';
import { UserController } from './user.controller';
import { UserService } from './user.service';
import { UserRepository } from './user.repository';

@Module({
  controllers: [UserController],
  providers: [UserService, UserRepository],
})
export class UserModule {}
```

In this example, the UserModule imports the UserController, UserService, and UserRepository classes and adds them to the module's providers array. This tells NestJS to create instances of these classes and manage their dependencies using the dependency injection system.

Now, when you call the getUserById method on an instance of UserService, NestJS will automatically inject an instance of UserRepository into the constructor and use that instance to fetch user data. This makes the code more modular and easier to test, as you can easily replace the UserRepository instance with a mock object or stub during testing.
Como ativar animações durante o scroll com JavaScript sem bibliotecas
Tags: webdev, javascript, tutorial, braziliandevs
Published: 2023-05-31 12:30:00

Há algum tempo vinha pesquisando uma maneira de executar animações em CSS ativadas durante o scroll da página no [meu site](https://matheusmisumoto.dev/) usando JavaScript. A ideia foi usar animações simples.

Uma das alternativas era utilizar bibliotecas de animação. No entanto, não fazia sentido sacrificar o tempo de carregamento da página com os arquivos da biblioteca para animações simples.

Encontrei na API IntersectionObserver uma alternativa em poucas linhas de código. Ela fornece uma maneira de observar as alterações de forma assíncrona na interseção de um elemento de destino com um elemento pai ou o viewport da página.

Ou seja, ao invés de observar a rolagem da página, o recurso pode ser usado para observar se algo está atualmente visível na página. A implantação é simples:

```js
function scrollTrigger(selector, animation, options = { threshold: 0.1 }){
    let els = document.querySelectorAll(selector);
    els = Array.from(els);
    els.forEach(el => {
        addObserver(el, animation, options);
    })
}

function addObserver(el, animation, options){
    let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if(entry.isIntersecting){
                entry.target.removeAttribute('style');
                entry.target.classList.add(animation);
                observer.unobserve(entry.target);
            } else if (!entry.isVisible) {
                entry.target.style.opacity = '0';
            }
        })
    }, options);
    observer.observe(el);
}
```

## Entendendo o código JavaScript

A `scrollTrigger` é a função que chamaremos para cada animação ativada por scroll. Ela recebe como parâmetro as variáveis:

- **selector:** os seletores CSS que serão animados. Pode ser um seletor ou vários, separados por vírgulas.
- **animation:** a classe CSS com a animação a ser aplicada.
- **options:** opções da API IntersectionObserver. Neste caso, queremos que a animação seja aplicada quando 10% do elemento for visível na página. Veja as opções na documentação disponível no [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

A função busca pelo seletor CSS e coloca os resultados em um array, e para cada elemento encontrado chama a função `addObserver`, que criará o observador de interseção.

No exemplo acima, se o elemento a ser animado não estiver oculto pelo CSS e se não estiver ao menos 10% visível na página, ele terá o atributo `style` adicionado definindo a opacidade em 0%.

Quando o elemento entrar no viewport e pelo menos 10% do conteúdo for visível, a API IntersectionObserver remove o atributo style adicionado anteriormente, e adiciona a classe com a animação.

Após isso, como a intenção é ativar a animação apenas uma vez, o script remove o elemento do observador, para evitar que a animação seja ativada novamente.
What is the NPM | How It's work?
Tags: webdev, javascript, tutorial, programming
Published: 2023-05-31 12:22:16

## What is NPM? 

NPM stand for node package manager. It is Node.js package manager which is used to download JavaScript module in any JavaScript project.


## What is the need of NPM?

The main advantage of NPM is to be more productive your work.
For e.g. any developer create a module which is use to fetch data by calling API and developer create a method fetch(). Developer write all code to call API you just have to install the node package and call the fetch() function and pass the API end point URL as a parameter.

If you not install the node package manager so you have to write code from start so without wasting time you can use other developer created modules to build project in less time.

![NPM-working-image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5m781826qnlk5kvwt0xh.jpg)


## How we can use NPM package in JavaScript Project?

As we know that NPM is a command line tool so there is some command which is use to install and publish node package on the NPM package manager.

For example we want to install [axios](https://www.npmjs.com/package/axios) package which is use to call API. 

```javascript
 npm install package-name
```

Install axios in React project.

```javascript
 npm install axios
```
Building a Confirmation Dialog Component with React and Material-UI
Tags: react, dialog, materal, javascript
Published: 2023-05-31 12:19:55

## Introduction:

Confirmation Dialogs are a crucial UI component in many applications. They prompt users to confirm or cancel actions that have significant consequences. In this blog post, we will explore how to create a reusable Confirmation Dialog component using React and Material-UI. We will dive into the code and explain its functionality, as well as demonstrate how to use the component in your React applications.

## Code

```
import { useState } from "react";
import {
  Dialog,
  Button,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions,
} from "@material-ui/core";

function ConfirmationDialog(props) {
  //local states
  const [open, setOpen] = useState(false);

  const showDialog = () => {
    setOpen(true);
  };

  const hideDialog = () => {
    setOpen(false);
  };

  const confirmRequest = () => {
    props.response();
    hideDialog();
  };

  return (
    <>
      {props.children(showDialog)}
      {open && (
        <Dialog
          open={open}
          onClose={hideDialog}
          aria-labelledby="alert-dialog-title"
          aria-describedby="alert-dialog-description"
        >
          <DialogTitle id="alert-dialog-title">{props.title}</DialogTitle>
          <DialogContent>
            <DialogContentText id="alert-dialog-description">
              {props.description}
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            <Button onClick={confirmRequest} color="primary">
              Yes
            </Button>
            <Button onClick={hideDialog} color="primary">
              No
            </Button>
          </DialogActions>
        </Dialog>
      )}
    </>
  );
}

export default ConfirmationDialog;

```

## Example usage:

```
import ConfirmationDialog from './ConfirmationDialog';

function MyComponent() {
  const handleConfirmation = () => {
    // Perform action upon confirmation
    console.log('Confirmed!');
  };

  return (
    <ConfirmationDialog
      title="Confirmation"
      description="Are you sure you want to proceed?"
      response={handleConfirmation}
    >
      {(showDialog) => (
        <button onClick={showDialog}>Open Confirmation Dialog</button>
      )}
    </ConfirmationDialog>
  );
}

export default MyComponent;

```

In the above example, we import the ConfirmationDialog component and use it within the MyComponent component. When the user clicks the "Open Confirmation Dialog" button, the Confirmation Dialog will appear with the provided title and description. Upon confirming, the handleConfirmation function will be executed.
New and Amazing JS Array methods from ES2023.
Tags: webdev, javascript, tutorial, news
Published: 2023-05-31 12:10:44

ES2023, also known as ECMAScript 14 (ES14), introduces new array copying methods that make JavaScript programs more predictable and maintainable. These methods, which include **toSorted, toReversed, toSpliced, and with**, allow you to perform operations on arrays without changing the data in place but by making a copy and changing that copy instead 

**Array.prototype.with()**
The Array.prototype.with() method is the copying version of using bracket notation to set the value of an element at a given index in an array. Unlike bracket notation, it doesn't mutate the array it's called upon. It returns a new array, allowing you to chain array methods while performing manipulations without worrying about mutating the original array 

For example, consider the following code snippet:


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

Without the .with() method, you would need to copy the array first, mutate the copy, and then sort the copy


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hb5ki8wht3t91kb39i7.png)
The .with() method simplifies this process, allowing you to chain a call to the .sort() method:

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

The new array methods introduced in ES2023 make JavaScript programs more predictable and maintainable by allowing you to perform operations on arrays without changing the data in place. The with() method, in particular, simplifies the process of chaining array methods without worrying about mutating the original array. As browser support for these methods continues to grow, developers can look forward to more efficient and maintainable code.

**Downside of these methods**
While the ECMAScript 2023 spec is very new, there is already good support for these new array methods. Chrome 110, Safari 16.3, Node.js 20, and Deno 1.31 all support these methods and their corresponding polyfills and shims are available for platforms that don't yet have support