teleren/devto huggingface dataset:
𝐚 𝐜𝐨𝐦𝐩𝐥𝐢𝐜𝐚𝐭𝐞𝐝 𝐦𝐞𝐬𝐡 𝐜𝐮𝐭 𝐟𝐞𝐚𝐭𝐮𝐫𝐞
Published: 2023-04-03 00:32:10

Hello everyone,

I hope this message finds you well. I am working on an academic project and I could use some assistance from you guys.
Specifically, I am creating my first Unity project which is a 𝐕𝐑 𝐬𝐢𝐦𝐮𝐥𝐚𝐭𝐢𝐨𝐧, and I am struggling with a particular issue.

I need to create 𝐚 𝐜𝐨𝐦𝐩𝐥𝐢𝐜𝐚𝐭𝐞𝐝 𝐦𝐞𝐬𝐡 𝐜𝐮𝐭 𝐟𝐞𝐚𝐭𝐮𝐫𝐞 that includes:

-A curved incision only applied on human flesh surface(mesh surface)
-Variable depth based on user interaction
-The ability to insert objects into the incision

I found a video demonstrating exactly what I am trying to achieve, but unfortunately, the source code is not available and the owner has not responded to my requests for assistance.

I am hoping that someone in my network might be able to help me with either the source code or a roadmap on how to achieve this result. Any advice, suggestions or insights would be greatly appreciated. If you are able to help, please feel free to share your thoughts in the comments or send me a private message.

Thank you in advance for your help, and please note that I have a deadline for this project.
Project 2 Week 3 Update
Published: 2023-04-03 00:02:21

I've tried for hours to make progress, but I've come up with nothing. I was sick all week and unable to attend class, and I'm incredibly overwhelmed and stressed about not knowing where to start for wiring up this project. Even though I've made no progress, I'll at least try to answer the questions that don't involve the project. 
#### User interaction diagram:

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

#### Real World Use Case
One business that could benefit from the microservice architecture is Netflix. Microservice architectures allow for developers to instead of working in large teams on one codebase, to divide into smaller teams all working on smaller codebases that each target individual needs (services) of the overall project. Another benefit of microservice architectures is their flexibility in the application lifecycle. It becomes much more of a commitment to migrate towards newer technologies for one service when the entire large codebase has to be updated and redeployed. With a microservice architecture, the code for a specific service can be upgraded on its own without concern for affecting the code of other services, making it much less of a commitment to move to new technology as well as much safer to redeploy. If there are bugs with this service, it will be much faster to locate and fix compared to having to search the entire codebase of a project in a monolithic architecture.
Generating a dynamic sitemap with VitePress
Tags: vitepress, vite, vue, sitemap
Published: 2023-04-05 21:33:16

---
title: Generating a dynamic sitemap with VitePress
published: true
date: 2023-04-03 00:00:00 UTC
tags: VitePress, Vite, Vue, Sitemap
canonical_url: https://laros.io/generating-a-dynamic-sitemap-with-vitepress
---

By including a sitemap on your website, you can ensure that all pages are indexed by search engines, which can improve your site's visibility in search results and make it easier for users to navigate.

## Build Hooks 

VitePress [build hooks](https://vitepress.dev/reference/site-config#build-hooks) enable you to enhance the functionality of your website, such as adding sitemaps, PWA support, and search indexing. In the examples below we're using the `transformHtml` hook to collect all the links, and `buildEnd` hook to generate the sitemap XML file.

## Dependencies 

Before getting started, make sure to install the `sitemap` npm module. The module allows developers to easily create sitemaps in XML format.

```bash
npm install sitemap -D

```

## Configuring VitePress 

Place the following snippet in your VitePress config file, adjust the URL, and run `vitepress build` to compile a sitemap.

`.vitepress/config.ts`

```ts
import { createContentLoader, defineConfig } from 'vitepress'
import { SitemapStream } from 'sitemap'
import { createWriteStream } from 'node:fs'
import { resolve } from 'node:path'

export default defineConfig({
  lastUpdated: true,
  buildEnd: async ({ outDir }) => {
    const sitemap = new SitemapStream({ hostname: 'https://laros.io/' })
    const pages = await createContentLoader('*.md').load()
    const writeStream = createWriteStream(resolve(outDir, 'sitemap.xml'))

    sitemap.pipe(writeStream)
    pages.forEach((page) => sitemap.write(
      page.url
        // Strip `index.html` from URL
        .replace(/index.html$/g, '')
        // Optional: if Markdown files are located in a subfolder
        .replace(/^\/docs/, '')
      ))
    sitemap.end()

    await new Promise((r) => writeStream.on('finish', r))
  }
})

```

## Clean URLs 

If you have [clean URLs](https://vitepress.dev/guide/routing#generating-clean-url) enabled, use the following regex instead. Everything else can remain the same.

```ts
// If `cleanUrls is enabled`
.replace(/index$/g, '')
// If `cleanUrls` is disabled
.replace(/index.html$/g, '')

```

## Resources 

- [VitePress](https://vitepress.dev/)
- [sitemap.js](https://github.com/ekalinin/sitemap.js)
Adding dynamic meta tags to VitePress
Tags: vitepress, vite, vue, blog
Published: 2023-04-05 21:34:32

---
title: Adding dynamic meta tags to VitePress
published: true
date: 2023-04-03 00:00:00 UTC
tags: VitePress, Vite, Vue, Blog
canonical_url: https://laros.io/adding-dynamic-meta-tags-to-vitepress
---

It is generally recommended to include meta tags on your webpage to ensure that your content can be indexed by search engines and is displayed correctly when shared on social media.

## Build Hooks 

VitePress [build hooks](https://vitepress.dev/reference/site-config#build-hooks) enable you to enhance the functionality of your website, such as adding sitemaps, PWA support, and search indexing. The `transformHead` build hook can be used to add page data dynamically to the `<head>` of the page.

## Configuring VitePress 

In this example we demonstrate how to set some of the Open Graph meta tags using the `transformHead` build hook. However, it can also be used to set the canonical URL, Twitter meta tags, article tags, and more.

`.vitepress/config.ts`

```ts
import { defineConfig, HeadConfig } from 'vitepress'

export default defineConfig({
  transformHead: ({ pageData }) => {
    const head: HeadConfig[] = []

    head.push(['meta', { property: 'og:title', content: pageData.frontmatter.title }])
    head.push(['meta', { property: 'og:description', content: pageData.frontmatter.description }])
    
    return head
  }
})
```

## How to use 

VitePress allows frontmatter in all Markdown files, which must be at the top of the file. Here is an example of a markdown file, which utilizes frontmatter to set the `title` and `description` metadata:

`my-awesome-page.md`

```md
---
title: My awesome page title
description: My awesome page description
---

# My awesome page title
```

One you have added the example page, run the `vitepress build` command. Here is an example of what the output should look like:

`my-awesome-page.html`

```html
<!DOCTYPE html>
<html>
  <head>
    ...
    
    <meta property="og:title" content="My awesome page title">
    <meta property="og:description" content="My awesome page description">
  </head>
  <body>
    ...
  </body>
</html>
```

## Resources 

- [VitePress](https://vitepress.dev/)
- [Open Graph](https://ogp.me/)
The Beginning Of A Journey
Tags: webdev, javascript, programming, beginners
Published: 2023-04-02 23:47:53

Good day internet. I have decided to join a full-stack software engineering bootcamp to three-way handshake with my BSBA in Marketing and Management Information Systems. (I realize that the three-way handshake does not actually happen with 3 parties but only a server and client — thought it was funny)

This journey I will be embarking on will be documented here among other places such as my GitHub and Portfolio. I think it is crucial to share your learning voyage because when you get stuck, someone else might as well. Being able to post about it and find solutions or help someone find solutions is something a good collaborative society would do. (Or in this case, a software engineering team.) As I have grown older, I have learned that succeeding with others is the greatest way of relishing in joy. When you are watching a sport with friends and your team scores, you high-five your friends not yourself, right?

I plan to post my thought-process, struggles, hacks, and outcomes here. I hope to help someone else out and maybe we can all defeat the imposter syndrome that any-year old's experience in this field.

Well, come along now, I do not want to get too far ahead of you. Thanks for joining me!
Have questions about ESLint?
Tags: discuss, javascript, typescript, webdev
Published: 2023-04-02 23:42:34

I'm going to be hanging with @joshuakgoldberg on their stream this Tuesday. We're going to be building out some custom ESLint rules to learn more about how ESLint works under the hood.

{% embed https://twitter.com/JoshuaKGoldberg/status/1641799435050012672 %}

Josh is a maintainer of the typescript-eslint project, so he knows a thing or two about ESLint. 😎

{% embed https://github.com/typescript-eslint/typescript-eslint %}

What are some things that you'd like to know more about in regard to ESLint for JavaScript or TypeScript?

Drop your questions here and start the discussion and/or join us on [Josh's Twitch stream](https://www.twitch.tv/joshuakgoldberg) this Tuesday, April 4th at 6:30 pm UTC (2:30 pm Eastern)!
Drupal, Why Use Custom Content Types?
Tags: webdev, php, beginners
Published: 2023-04-02 23:23:25

Structure Content.

{% embed https://youtu.be/tXug3sR0Vfw %} 

In Drupal, a custom content type is a **predefined structure** used to create and organize content on your website.

Content types define the _fields, layout, and settings_ for the content you want to publish.

## Drupal Core Content Types

By default, Drupal comes with a couple basic content types, Article and Basic Page.

However, you can create custom content types tailored to your specific needs.

Here are some key reasons for a custom content type:

## Specific content structure

As I stated above: Structure. Content.

Custom content types allow you to create unique sets of fields and configurations that cater to particular content needs.

For example, you could create a "Product" content type with fields like price, description, image, and category.

This specific structure helps ensure that all content items within that type have a consistent format and organization.

## Consistency

Custom content types ensures that all content within that type maintains a consistent structure and format.

You can't insert a date into a file field.

This consistency not only improves usability and accessibility for content creators but also provides a better experience for site visitors.

Consistency is key!-ish

## Easier content management

Custom content types can help you better organize and manage your content by categorizing it according to its purpose or function.

This organization makes it easier to find, edit, and update specific content items, ultimately streamlining your content management process.

## Templating and theming

With custom content types, you can create specific templates and styles for different content types.

This allows you to maintain a consistent look and feel across your website, enhancing your site's visual appeal and making it more user-friendly.

## Reusability

Custom content types are reusable, which means you can use them across multiple projects or share them with others in the Drupal community.

This reusability not only saves time and effort but also encourages collaboration and the exchange of ideas within the community.
W12HW
Published: 2023-04-02 23:17:42

- How did you get the relationship between Searching and rendering results working
We don't have the search and the rendering results working yet but the relationship between the two of them is searching will searching everything and renders is just searching in your engine. Like everything you have access to.
- Think of a real world use-case from industry (Media streaming, youtube, corporate, cable company provider, web platform, etc) where micro-service architecture could fit into their business context. How could we use this approach to solve a real problem at a company currently using a monolithic design architecture?
The approach to micro-service architecture would fit in business context because someone could produce a working functioning website and profit from it. With a monolithic design one persons work in one huge file, it could be sold for other people to use and make their own websites or businesses from that. 
- More questions you have / things your stuck on
I think our main thing is to fix our search bar, and the rest of the badges with font, font size and all that.
Week 11: Admin and Sheriff
Tags: opensource
Published: 2023-04-02 23:14:06

## Overview
This week I was focused on delivering admin page functionality while also trying to cover sheriff's responsibilities. 

## Admin page
Admin page was an interesting one, at the beginning I was going to delivery only the layout as I said in my previous blog, but after having a second thought about it and my peers who also underlined that I decided to go ahead and integrate as much of the server side as I can. I ended up having everything, except user impersonating and deletion functionality. That stuff requires way more development than it would be reasonable to deliver. To be honest, I feel like sometimes I have this mental limitation that I am this “front-end guy” and I should not touch the back-end because it is not my business, but with Remix and its seamless transition between front-end and back-end to was easier for me to overcome it. After some reviews and minor adjustments, my PR got merged :) 

## Being a sheriff 
In the beginning, I had mixed feelings about being a sheriff even tho I understand that this is a good experience to have. The interesting part of being sheriff that I enjoyed the most was conducting meetings and making sure that everybody is doing okay and on the right path to deliver their stuff.


## Afterthoughts
This week was good from the productivity perspective, the admin stuff got landed which was big and I am happy that we did it since this is one of the “core” features of the project. I tried my best to focus on starchart the first part of the week since I had some stuff in the second one.
How to cut a desired shape out with desired depth of a mesh on VR ?
Tags: unity3d, vr, mesh, blender
Published: 2023-04-02 23:04:03

I want the player to be able to cut a hole through a human body with a desired depth on VR like this video

[https://www.youtube.com/watch?v=7zhOj0iSXVE&t=1s](https://www.youtube.com/watch?v=7zhOj0iSXVE&t=1s)  
anyone can give me  some advices or share with me some code source or do it for me if he can ?
IST 256- Joseph Vanacore & John Szwarc
Published: 2023-04-02 23:01:01

**Our Progression:**

So far, my partner and I have progressed a lot from knowing nothing about card lists and API's to actually building one for the current project. We completed code front-end wise, working with badge building, making the images work with the badges, create CSS code to make the badge list look appropriate to our assigned project, and currently completing the search bar aspects and build. We still need some work on our collapse methods and API implementation but our progress has been really efficient up to our current point. 

**How did you get the relationship between Searching and rendering results working?**

We haven't been able to successfully figure out a unique way to make the rendering and search results working yet. We have our search feature functionality however we are still working to progress on this relationship. Once the functionality is successful I will include working relationships within our results.

**Draw a diagram on draw.io for user interaction pattern. What happens from user input, through machine sending value, to re-rendering on the page.**


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


**Think of a real world use-case from industry (Media streaming, youtube, corporate, cable company provider, web platform, etc) where micro-service architecture could fit into their business context. How could we use this approach to solve a real problem at a company currently using a monolithic design architecture?**

There are many different companies around the world who use different types of methods and micro-service types into there security business context. They use this by incorporating websites that offer many different digital information such as design, art, descriptions that can help boosts a companies wellbeing. For example, A company such as YouTube lets the users search for there favorite types of videos and works through the front-end coding systems to give out the information requested by the user in the search filters.
Lothar Collatz hypothesis
Tags: python, codenewbie, beginners, maths
Published: 2023-04-02 22:45:01

In 1937, a German mathematician named Lothar Collatz formulated an intriguing hypothesis (it still remains unproven) which can be described in the following way:

1.Take any non-negative and non-zero integer number and name it c0.
2.If it's even, evaluate a new c0 as c0 ÷ 2.
3.Otherwise, if it's odd, evaluate a new c0 as 3 × c0 + 1.
4.If c0 ≠ 1, skip to point 2.

The hypothesis says that regardless of the initial value of c0, it will always go to 1:

```
print("Prove that Lothar Collatz  is wrong!!!!")
c0 = int(input('Enter a non- negative, non-zero integer: '))
step = 0
while c0 != 1:
    if c0 % 2 == 0:
        c0 //= 2
        if c0 != 1:
            step += 1
            print(' New value is ', c0)
            continue
        elif c0 == 1:
            step += 1
            print(' New value is ', c0)
            break
    elif c0 % 2 == 1:
        c0 = c0 * 3 + 1
        if c0 != 1:
            step += 1
            print(' New value is ', c0)
            continue

print('Total Steps: ', step)
print("*"*44)
print("*"*44)
```
As you can see we have transform the whole Collatz idea in to a **while loop** that **print** every step needed to achieve the goal.
At the end we run a **for loop** with a **sleep** command to avoid the program to close abruptly after doing the calculations:
```
import time

for i in range(1,11):
    time.sleep(1)

print("*"*44)
print("*"*44)
```
A Guide to Asynchronous result of React modal
Tags: react, async, result, modal
Published: 2023-04-02 22:37:26

This guide is about to get an asynchronous result from react modal.

Sometimes, we want to wait until user select a choice showing a modal, then proceed the following codes based on the user's choice.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnmapxkd6eo38tr3s0a8.png)
## Create the modal component
Modal.js

```
import React from 'react'
import './modal.css'

export default function Modal({isShow, onClose, message}) {
  return isShow && <div className="modal-overlay">
  <div className="modal">
    {message}
    <div className="modal-action">
      <button onClick={()=>onClose(true)}>OK</button>
      <button onClick={()=>onClose(false)}>Cancel</button>
    </div>
  </div>
  </div>
}
```
Here I created a simple message modal component.
This modal returns a 'true/false' when a user clicks on OK or Cancel buttons.


## Create the Modal Context Provider
context.js
```
import {createContext} from 'react';

export const ModalContext = createContext({
  show: () => {}
})
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41o73bjorlgct0qidf4d.png)
ModalProvider.js
```
import React, {useState, useRef, useCallback, createContext, useEffect} from 'react'
import Modal from './Modal'
import {ModalContext} from './context'


export default function ModalProvider({children}) {
  const [isShow, setIsShow] = useState(false);
  const [message, setMessage] = useState("");
  const promiseRef = useRef();

  const show = useCallback((message) => {
    setIsShow(true);
    setMessage(message);

    return new Promise((resolve, reject) => {
      promiseRef.current = {resolve, reject};
    })
  }, [])  

  return <ModalContext.Provider value={{show}}>
    {children}
    <Modal isShow={isShow} onClose={(response) => {
    setIsShow(false);
    if (promiseRef.current) {
      promiseRef.current.resolve(response)
    }
    promiseRef.current = null
    }} message={message} />
  </ModalContext.Provider>
}
```

app.js
```
import {useContext} from "react"
import './App.css'
import {ModalContext} from './modal/context'

export default function App() {
  const modal = useContext(ModalContext);
  
  const onShowButtonClick = async () => {
    const result = await modal.show("Hello World!");
    alert('result');
  }
  return (
    <main>
      <h1>React Asyncronous Confirm Modal</h1>
      <div>
        <p>Click the button to show a async confirm modal</p>
        <button onClick={onShowButtonClick}>Show</button>
      </div>
    </main>
  )
}
```
## Final Thoughts
This is a simple and useful way I've found to get the user's choice when I have to proceed the following codes related to the user's decision.
[Live Code](https://replit.com/@polarisiota/AsyncModal)
Making Chrome look like the rest of apps
Published: 2023-04-02 22:34:51

When using KDE on Manjaro, Google Chrome window decorations look different than the rest of apps.
So to make it look consistent, there is an option in Settings:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xtcb7h10y82jq82zron.jpeg)

I posted here in case someone needed this.

Regards,
Damian
REDUX OR ZUSTAND?
Tags: redux, zustand, react, webdev
Published: 2023-04-02 22:22:56

𝐑𝐄𝐃𝐔𝐗 𝐎𝐑 𝐙𝐔𝐒𝐓𝐀𝐍𝐃 ?
As a React developer, I have been trying to compare Redux with Zustand . I started my React dev journey with Redux, but along the line, I met Zustand! At first, I thought it would be weird taking Zustand on, but it turned out to be great!

Redux has quite a lot of boilerplate code and requires setting up different 'departments', in terms of actions, reducers, combine-reducers etc ....giving some sort of decentralized vibe. The redux logic flow also involves 'funny' patterns like importing an action, not using it yet, passing it into the connect binder which returns a 'prop action' possessing affiliation with the store, that your component actually uses!

Zustand on the other hand, puts all these 'departments' into one file and uses react hooks, hence is preferably used with function based components.

At first, I still wasn't impressed after having a look at the simplicity of Zustand. I still thought about the react-redux connect binder which lets React components see the redux props as 'part of its state' (prolly in a secondary manner) hence inducing a re-render...hot reload! Well, recently I think I've seen a way Zustand can support that !

So yeah, though Redux might have some in-built advanced features like time-travel debugging, Zustand might just be all you need! Still have a thing for Redux though.