teleren/devto huggingface dataset:
Tauri + React + ShadcnUI
Tags: react, rust, tutorial, learning
Published: 2024-03-25 23:18:00

This is a simple guide to help you setup Tauri with React js and Shadcn UI.

First of all, I will be using npm as my package manager but feel free to use whatever you prefer. Find more info [here](https://tauri.app).

Let's get started...

Run this command to initialize your tauri app, select React (vite) as your frontend and choose TypeScript as your flavor.

```bash
npm create tauri-app@latest
```

You should see a `vite.config.ts` file similar to this one, This is a a little bit different from the one generated when using vite alone with the react preset but it is ok... we are just trying to get things working here.

```typescript
# vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig(async () => ({
  // ...
  // 3. Custom alias defined in ts.config.json
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
}));
```

I've setup an import alias in `tsconfig.json` that matches `vite.config.ts`

```json
{
  "compilerOptions": {
    ...
    /* Aliases */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

Now let's setup tailwindcss, we will be using tailwind / posts [setup guide](https://tailwindcss.com/docs/installation/using-postcss)

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```

You can also follow the official shadcn-ui vite [setup guide](https://ui.shadcn.com/docs/installation/vite)

Now lets initialize shadcn-ui...

```bash
npx shadcn-ui@latest init
```

Be careful to select Typescript, alias as @ and not use server components. This will generate `component.json` file

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/styles.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}
```

Now you can add components from [shadcn-ui](https://ui.shadcn.com/docs/components/accordion) and also use tailwinds classes in our components!

You can see an example here: [@danimydev/markdown-editor](https://github.com/danimydev/markdown-editor)
AI-driven API Design & Development Reviews
Tags: api, apigateway, programming
Published: 2024-03-25 23:13:04

Dear friends,

I'm a long time Dev community member and a blogger.

We're giving away 3 FREE licenses for AI-driven API reviews. Here is our post: https://www.producthunt.com/posts/governance-ai

Direct link to the website:
https://apigovernance.dev/

Please take advantage of this today!
Adding lazy loading of items using htmx
Tags: htmx, rails, phlex, ruby
Published: 2024-03-25 23:11:08

This is a continuation of some testing of these front-end libraries.
I used the [lazy load example here](https://htmx.org/examples/lazy-load/) to add lazy loading of the articles on this index page.

This is how it looks like:

![a spinning animation before showing articles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30qtx2vfu0sgqa59texu.gif)

_Previous to this change, I created an Articles Active Record model, ran migrations, and changed the insert action to create new records._

I added a GET _htmx_ definition in the index view code to fetch the items' partial and added a route and a controller action for this new response.

You can see that there is an extra logic in the `Articles::IndexView` to discern between displaying the lazy load code or the fragment with the list of articles. This is based on an initialization parameter. I'd probably refactor this later, maybe extracting the list block into a new component.

Here is the important code changes:

### Route definition

```ruby
  resources :articles do
    get "items", on: :collection
  end
```

### Controller changes

```ruby
  def index
    render Articles::IndexView.new(nil)
  end

  def items
    articles = Article.all.order(id: :desc)
    sleep 1 # this is to simulate a slow response and should be removed in a real scenario
    render Articles::IndexView.new(articles), layout: false
  end
```

### Changes in the index view class

```ruby
class Articles::IndexView < ApplicationView
...
  def template
    if @articles.nil?
      title_with_add_button
      load_indicator_placeholder
    else
      load_articles_section
    end
  end

  def load_indicator_placeholder
    div("hx-get": items_articles_path, "hx-trigger": "load", class: "flex justify-center") {
      img(alt: "Loading items...",
        class: "htmx-indicator", width: "150", src: "/bars.svg")
    }
  end

  def load_articles_section
    section(id: "article-list", class: "grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4") {
      articles.each { |el| render el }
    }
  end
```

Also available in the [GitHub repo](https://github.com/megatux/rails_sample_bun_tailwind_phlex_htmx)

Happy hacking!
Understanding Lua's lfs Module
Tags: lua, programming, beginners
Published: 2024-03-25 22:50:35

# Introduction

Navigating through files and folders can be very difficult while creating code. Fortunately, the lfs module in Lua offers a useful tool that makes a number of file operations easier. This post will examine the lfs module in Lua in more detail and show you how it makes listing files and directories easy and seamless.

# Index

- Getting to Know Lua's lfs Module
- Listing Files: The Easy Way
- Exploring Directories: Like a Pro
- Wrapping Up

# Getting to Know Lua's lfs Module

Programmers can access a variety of useful functions for managing files and directories with the Lua lfs module.

# Listing Files

Using Lua's lfs module to list files in a directory is simple. Let's investigate the process.

```lua
-- Example: Listing files in a directory using lfs
local lfs = require("lfs")

local dir_path = "/path/to/directory"
for file in lfs.dir(dir_path) do
    if file ~= "." and file ~= ".." then
        print(file)
    end
end
```

Output:
```
file1.lua
file2.txt
subdirectory
```

# Exploring Directories

Using Lua's lfs module to navigate around directories is like navigating a maze - but with a map. Take a look at this example to see how to do it.

```lua
-- Example: Navigating through directories using lfs
local lfs = require("lfs")

local function explore_directory(directory)
    for file in lfs.dir(directory) do
        if file ~= "." and file ~= ".." then
            local file_path = directory .. "/" .. file
            print(file_path)
            if lfs.attributes(file_path, "mode") == "directory" then
                explore_directory(file_path)
            end
        end
    end
end

explore_directory("/path/to/root/directory")
```

Output:
```
/path/to/root/directory/file1.lua
/path/to/root/directory/file2.txt
/path/to/root/directory/subdirectory
/path/to/root/directory/subdirectory/file3.lua
```

# Conclusion

Lua lfs module is like a reliable ally that helps you handle file-related tasks with ease.
Expert guide on advancing responsible AI Maturity
Published: 2024-03-25 22:27:17

Responsible AI is top of mind for every organization and the AI practitioners that work for them, whether it is large or small. One challenge is assessing and identifying what responsible AI risks or harms the AI system can inflict on people or society. Even when the AI risks are discovered, the next dilemma is how to mitigate them.  The solutions are not always straightforward and sometimes tradeoffs need to be made.

✨ Join the **#MarchResponsibly** challenge by learning responsible AI tools and services available to you.

Checkout [best practice guide](https://aka.ms/march-rai/guide-to-advance-ai) from Mihaela Vorvoreanu, a responsible AI researcher at Microsoft, on tips, tools and practices organizations and developers can use to reach responsible AI maturity. The article discusses responsible AI red teaming guide on how to identify potential adversarial attacks for testing security vulnerabilities.  Next, after the harms are identified, how it is important to examine the frequency; putting mitigations in place; and continuously monitoring for the emergence of new harms.  Since all of this requires team collaboration and leadership buy-in, the article recommends great interactive tools and framework for teams to leverage in order to reach higher responsible AI maturity stages.  

The article covers the following practical responsible AI tools & guides:

- Red teaming guide
- Making complex AI harm trade-off
- Human-AI experience (HAX) toolkit
- Human-AI Interaction guide
- Reaching maturity levels

👉🏽 Checkout Mihaela Vorvoreanu's article: https://aka.ms/march-rai/guide-to-advance-ai


🎉Happy Learning :)
Lessons from open-source: Replace zod with superstruct if you do not use zod’s advanced capabilities
Tags: javascript, opensource, react, nextjs
Published: 2024-03-25 22:14:23

This lesson is picked from [Next.js source code](This lesson is picked from Next.js source code. In this article, you will learn how Next.js replaced zod with superstruct.

As I was looking at the [is-error.ts](https://github.com/vercel/next.js/blob/canary/packages/next/src/lib/is-error.ts#L12), I found an import `isPlainObject`.

![nextjs code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0lq44k2x7cml52hx0xu.png)

Technically, I should have looked into [shared/lib/is-plain-object.ts](https://github.com/vercel/next.js/blob/canary/packages/next/src/shared/lib/is-plain-object.ts#L5). But as shown above, unknowingly I clicked on file highlighted with red rectangle in the above image.

> [Practice the exercises based on documentation](https://tthroo.com/) to become an expert in Next.js

This is where I saw [compiled](https://github.com/vercel/next.js/tree/canary/packages/next/src/compiled) folder has [superstruct’s](https://www.npmjs.com/package/superstruct) minified code.

![perf pr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzgrghpwdylkhq2kdboq.png)

[Perf: replace zod with superstruct](https://github.com/vercel/next.js/commit/c2fd08063c804dcfc6e3f12cd454d7a73184504c) this pull request has deeper insights into as to why Next.js chose to replace zod with superstruct.

### Top reasons I found behind this switch:

1. Next.js does not use zod’s advanced capabilities

2. This switch resulted in a 44kb win meaning less size for app-page.runtime.prod.js

3. Reduced lines of code in `flightRouterStateSchema`

![reduced lines of code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eebwn5a1t5blrrbez6xw.png)

## Conclusion

The important lesson here is try all the possible ways to reduce your build size to improve your app performance. Since Next.js did not use all of the advanced capabilities offered by zod, they decided to switch to superstruct, just for 44kb win meaning 44kb less in app-page.runtime.prod.js size that impacts cold boot.

You can choose to go with certain package, but as you research and learn more, you will find something better in the wild and if it helps improve your app performance in any way possible, go for it, assuming you did not break anything along the way ;)
Week on Front-End.
Tags: weeklyretro
Published: 2024-03-25 21:32:38

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

Happy monday!
Don't set a Pomodoro while coding (unless you're learning)
Tags: coding, webdev, gamedev
Published: 2024-03-25 21:32:34

**TLDR: You'll stop yourself from going into "flow state".**




![Photo by Dmitry Ratushny on Unsplash</a>
  ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93d2pleuixtsgsybaf94.jpg)



The Pomodoro Technique and Coding
The Pomodoro Technique involves breaking work into intervals, traditionally 25 minutes in length, separated by short breaks. However, when it comes to coding, this technique might not always be the best fit.

Coding often requires deep concentration and immersion in the task at hand, a state commonly referred to as 'flow'. **This is THE technique/mechanic that will enable you to produce high-quality work** and solve complex problems more efficiently 🚀

I can say that, as a junior dev, **I tried to force this technique on my work, because it's exactly what I used to do at university.** I was simply doing what already worked for me. Here's the issue though, research shows that entering the state of flow will take around 20–50 minutes of working on a given task. The Pomodoro Technique, with its frequent breaks, can disrupt this flow. 

Use this technique to learn how to code, not to actually code at work!
Modular Dependency Injection in .NET
Tags: csharp, dotnet
Published: 2024-03-25 21:09:48

When I was building application with .NET Framework I always used libraries like [Autofac](https://autofac.org/) and [SimpleInjector](https://simpleinjector.org/) for dependency injection. I really liked to create modules (Packages in SimpleInjector) to achieve higher cohesion and lower coupling in my class libraries. I made a module for every class library in which all dependencies inside of that class library were registered. Why should my web application (for example) know if MyBeautifulService in MyBeautifulClassLibrary should be transient or singleton? 

.NET Core 1.0 has built-in dependency injection support but it still lacks modules in later .NET versions (or that's what I thought). While it is possible to use Autofac and SimpleInjector in .NET Core I ran into issues and difficulties pretty quickly when I was building some Azure Functions:
- https://docs.simpleinjector.org/en/latest/azurefunctionsintegration.html
- https://docs.autofac.org/en/latest/integration/azurefunctions.html

I build my own Module feature with the Microsoft dependency injection which was pretty easy to do. But the way I was thinking was much to difficult. Why would I not do it in the same way Microsoft is doing it? So now I do it like this:

```
public static class MyBeautifulClassLibraryExtensions
{
    public static IServiceCollection UseMyBeautifulClassLibrary(this IServiceCollection services)
    {
        services.AddTransient<MyBeautifulService>();
        return services;
    }
}
```
If you prefer you can also create an extension method like this per feature instead of per class library.

Happy coding!
why I left go
Published: 2024-03-25 20:56:32

---
title: why I left go
published: true
description: go lacks a while loop and is very confusing 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-03-25 20:55 +0000
---
Podcast Palooza— What are you listening to? (Best-of-all-time edition)
Tags: podcast, discuss, watercooler
Published: 2024-03-25 20:55:23

Hi hi hi! Welcome back to Podcast Palooza, where I am on a valiant mission to get the people talking about podcasts. 

_If today you are not in the mood to share a podcast, we also have [Music Monday](https://dev.to/michaeltharrington/series/17887) for all your listening-discussion needs! 🎶_

---

## Call for the best podcast you have ever listened to...

This week I am keeping things light, mostly because I have been in a listening lull (finding books are more my jam as of late!) and am searching for some inspiration.

**SO— tell me your favorite episode or series of all time.** This can be what you would show anyone who is looking to start getting into podcasts, your favorite words ever said aloud, or an episode that made you laugh the hardest— broad interpretations encouraged. 

![GIF of Jack Nicholson in an interview saying, "Is that enough for you?"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcjvahuvr97n8ev2ft7k.gif)

---

_PS: We also have a podcast tag for your listening musings, sharing your very special new episodes, and finding new things from other people on the internet. Check it out._

{% embed https://dev.to/t/podcast %}

---

_PPS: CodeNewbie Podcast is on it's 27th season this year!_

Our second episode of this season just came out with our host @saronyitbarek and @aaspinwall, Frontend Engineer at Amazon. Listen to our most recent episode wherever you get your pods:

{% cta https://podcasts.apple.com/us/podcast/codenewbie/id919219256?i=1000649839240 %} Listen on Apple {% endcta %}

{% cta https://open.spotify.com/episode/76IraZdmmCptLg9Nqna577?si=cf64ffd6cbb745de %} Listen on Spotify {% endcta %}

{% cta https://dev.to/codenewbie/s27e2-the-journey-from-sound-engineer-to-software-engineer-alejandro-aspinwall %} Listen right here on DEV {% endcta %}

---

See ya next week!
-**Rachel**
Writing a Hacking Simulator in JavaScript
Tags: gamedev, devlog, javascript
Published: 2024-03-25 20:48:48

## What is this?

<p><a href='https://enderversing.itch.io/moredemo'>More of Us</a> is a hacking simulator game I started working on last year. I don't like the idea of abandoning this project and I want to finish it.<br></p>

## Why work on this?

<p>I am interested in games with deep simulation, such as <a href="https://en.wikipedia.org/wiki/Dwarf_Fortress">Dwarf Fortress,</a> although I don't claim that this game will be as deep as Dwarf Fortress. I am more inspired by <a href="https://en.wikipedia.org/wiki/Zachtronics">Zachtronics</a> games than by <a href="https://en.wikipedia.org/wiki/Dwarf_Fortress">Dwarf Fortress</a>,&nbsp; although I have read <a href="https://www.gameaipro.com/GameAIPro2/GameAIPro2_Chapter41_Simulation_Principles_from_Dwarf_Fortress.pdf">papers</a> and <a href="https://stackoverflow.blog/2021/12/31/700000-lines-of-code-20-years-and-one-developer-how-dwarf-fortress-is-built/">interviews</a> by the creator of Dwarf Fortress.</p>

## Hasn't this been done before?


<p>I like <a href="https://en.wikipedia.org/wiki/Zachtronics">Zachtronics</a> games but I feel that the experience of coding within Zachtronics games could be improved. I would like to combine the open ended problem solving of <a href="https://en.wikipedia.org/wiki/Zachtronics">Zachtronics</a> games with the free wheeling exploration of <a href="https://escholarship.org/uc/item/4kg8g9gd">casual creators</a>.</p>

<p>Part of what defines <a href="https://escholarship.org/uc/item/4kg8g9gd">casual creators</a> is character customization. Today, I spent a few hours adding pronoun and name customization to my game. This is actually the first code I have written that I didn't immediately delete afterward.</p>
<p>I was inspired to add a command palette to my game by <a href="https://uiw.tf/">this user interface designer.</a> <br></p>

<p><img src="https://img.itch.zone/aW1nLzE1NTI3ODA5LmdpZg==/original/LEEotH.gif"><br></p>
<p>I still need to improve the user interface for this game (as well as the logic for data binding), but I am ending my work for today. I am surprised by how much time it takes me to perform even simple tasks - like writing forms - in JavaScript. I consistently underestimate the difficulty of game development.&nbsp;<br></p>

I enjoy making <a href='https://github.com/ivanreese/visual-programming-codex'>visual programming</a> and procedural generation tools. Video games about programming give me an excuse to use those tools. I am excited to continue working on this game and eventually finish.

---


Have you ever played a <a href="https://en.wikipedia.org/wiki/Zachtronics">Zachtronics</a> game? How do you feel about <a href="https://en.wikipedia.org/wiki/Programming_game">programming games</a>?
How to protect PII information from your AI apps?
Published: 2024-03-25 20:45:59

Is your Generative AI app exposing PII information?  With the rise in popularity with creating generative AI apps or building AI solutions, security/privacy tends to be overlooked.  There are many harms that an AI system can cause if PII data is not extracted or masked.  For example, information such as name, race, gender or age can lead to bias in employment decisions-making based on someone's name, race gender or age.  In addition, anyone getting access to people's social security and credit card information can lead to privacy violations or security breach issues.

✨ Join the **#MarchResponsibly** challenge and try out the hands-on tutorial.

Check my colleague @dikosomeleze's [blog tutorial](https://aka.ms/march-rai/pii-extraction) on how to use AI language services and Microsoft Fabric Lakehouse to protect your PII information.  Data is an important part of AI. The blog covers many valuable information from using data cleansing pipelines to handle PII information. In addition, how to identify, extract and mask PII data.

Whether you are using LLMs or training AI models, the tutorial discusses the responsible AI impacts and some of the best practices in protecting your PII information. 

👉🏽 See @dikosomeleze's blog: https://aka.ms/march-rai/pii-extraction

🎉Happy Learning :)
Lunes de música... ¿Qué estás escuchando? 🎵 (25-03-2024)
Tags: music, spanish, discuss, lunes
Published: 2024-03-25 20:42:45

> **"Veo la música como arquitectura fluida"**
_Joni Mitchell_

La música es parte importante de la vida de la mayoría de las personas y una vida no basta para poder escuchar todas las canciones que quisiéramos o conocer a todos los artistas, solistas o bandas.

Últimamente mis gustos musicales han sido muy estáticos y siento que necesito abrir mis horizontes y poder conocer nueva música interesante. 

Este post es la sexta entrega de una serie semanal que lanzaré todos los lunes para que como comunidad podamos compartir y por qué no conocer nuevas melodías. 🎶

Puedes compartir tus sugerencias usando los *liquid tags* de Dev.to, por ejemplo:

* Para compartir un video desde youtube:
```js
{% youtube dQw4w9WgXcQ %} // dQw4w9WgXcQ es el id del video
```

* Para compartir una canción desde spotify:
```js
{% spotify https://open.spotify.com/track/7GBwTrOpTtsLdJN3Dc0U1C?si=ea737b51f47043b6 %} 
```

Mi sugerencia para esta semana es de la banda inglesa de rock **Muse** y su tema **Time is Running Out**.
 
{% spotify https://open.spotify.com/track/0EdMqiKs9LKXhspeQhl4RZ %} 

---

La versión original de este post esta escrito por mi amigo 
@michaeltharrington ve y salúdalo de mi parte con una canción 🎵

{% link https://dev.to/michaeltharrington/music-monday-what-are-you-listening-to-may-23-104p %}

Los respectivos créditos a él por ser tan buena onda. 

{% user michaeltharrington %}

Y dime, ¿qué estás escuchando ahora? Te leo en los comentarios.