teleren/devto huggingface dataset:
slay the praise
Tags: gamedev, writing
Published: 2023-12-24 16:21:47

---
title: slay the praise
published: true
date: 2023-12-08 00:00:00 UTC
tags: [ 'gamedev', 'writing' ]
canonical_url: https://onwriting.games/daily/20231208-1612-slay-the-prise/
---

During this week, I've been analyzing various aspects that I think _Slay the Princess_ did very well and found interesting to analyze.

Today, I'm going to take a different approach and try to leave some notes about **two things I didn't like much**.

While playing, I experienced a strong dissonance with how the game implemented progression.

The first time the princess is absorbed by "the hands," she tells you that you need to "bring" three vessels (this is how the game refers to the different incarnations of the princess we encounter when making certain decisions).

Why don't I like this decision of the 3 vessels? It feels **too gamey**.

Promising me progress if I go through the loop 3 times.

It feels as if the designers think **their loops aren't interesting enough** to go through them anyway.

It's almost an **extrinsic motivation** (I've never talked about this, but I will), and extrinsic motivations break my **suspension of disbelief**.

The other thing that struck me quite a bit and took me out of the flow was when the princess is in her "spiritual" form, the writing style suddenly becomes very philosophical.

Not only that, your responses often seem out of tune with the writing altitude that the princess has.

I believe that both your character and the princess should have a similar progression, because, after all, both are being profoundly transformed by the experience.

However, your level of dialogue becomes out of sync with that of the princess in her spiritual mode.

This reminds me a bit of Evangelion, where something similar happens.

There's a trend that believes that by writing things with a spiritual tone (already written a billion times), the game gains "depth".

I don't share the feeling.

I think these two are the things I liked least about the game, and this is where this series ends. Starting tomorrow, onto another topic.

Do you want to tell me what you thought of this series?

Is there any game you would be interested in me analyzing like this?
A React component custom player support video m3u8, mp4
Tags: player
Published: 2023-12-27 18:28:17

---
title: A React component custom player support video m3u8, mp4
published: true
date: 2023-12-08 00:00:00 UTC
tags: Player
canonical_url: https://reactjsexample.com/a-react-component-custom-player-support-video-m3u8-mp4/
---

# VNETWORK Player
 ![A React component custom player support video m3u8, mp4](https://reactjsexample.com/content/images/2023/12/Code_2023-12_23-55-05.jpg)

A React component custom player support video m3u8, mp4

## Demo Player

[Demo in stackblitz](https://stackblitz.com/edit/vitejs-vite-prsdgv?file=src%2FApp.tsx)

## Installation

```
npm i vnetwork-player
# or
# yarn add vnetwork-player
```

## Import

```
import VPlayer from "vnetwork-player";
import "vnetwork-player/dist/vnetwork-player.min.css" // import css
```

## Examples

### Video MP4

```
// mp4 single src

<VPlayer
  source="https://example.com/file-video.mp4"
  color="#ff0000"
  autoPlay
  subtitle={[
    {
      lang: "Fr",
      url: "/fr.vtt"
    },
    {
      lang: "En",
      url: "/en.vtt"
    },
  ]}
/>

// mp4 multiple src

<VPlayer
  source={
    [
      { label: "720p", url: "https://example/file/720.mp4" },
      { label: "1080p", url: "https://example/file/1080.mp4" }
    ]
  }
  color="#ff0000"
  autoPlay
  subtitle={[
    {
      lang: "Fr",
      url: "/fr.vtt"
    },
    {
      lang: "En",
      url: "/en.vtt"
    },
  ]}
/>
```

### Video M3U8

```
npm i hls.js
# or
# yarn add hls.js

import Hls from 'hls.js'

// m3u8 single src

<VPlayer
  source="https://example.com/file-video.mp4"
  color="#ff0000"
  autoPlay
  subtitle={[
    {
      lang: "Fr",
      url: "/fr.vtt"
    },
    {
      lang: "En",
      url: "/en.vtt"
    },
  ]}
  Hls={Hls}
/>

// m3u8 multiple src

<VPlayer
  source={
    [
      { label: "720p", url: "https://example/file/720.mp4" },
      { label: "1080p", url: "https://example/file/1080.mp4" }
    ]
  }
  color="#ff0000"
  autoPlay
  subtitle={[
    {
      lang: "Fr",
      url: "/fr.vtt"
    },
    {
      lang: "En",
      url: "/en.vtt"
    },
  ]}
  Hls={Hls}
/>
```

### Custom Ref

```
const ref = useRef(null)

useEffect(() => {
  console.log(ref?.current) // Video element
}, [ref?.current])

<VPlayer playerRef={ref} />
```

## Player props

[https://github.com/an678-mhg/vnetwork-player/blob/master/src/utils/types.ts](https://github.com/an678-mhg/vnetwork-player/blob/master/src/utils/types.ts)

## GitHub

[View Github](https://github.com/an678-mhg/vnetwork-player?ref=reactjsexample.com)
A Quick List of Accessibility Resources
Published: 2023-12-14 18:49:26

---
title: A Quick List of Accessibility Resources
published: true
date: 2023-12-08 00:00:00 UTC
tags: 
canonical_url: https://gingerkiwi.dev/blog/2023-12-08-quick-list-of-a11y-resources/
---

Web Accessibility Wednesday - Bonus Friday Edition!

Just now in [James Q Quick](https://www.linkedin.com/in/jamesqquick/)'s Learn Build Teach Discord, [Arkar Myat](https://www.linkedin.com/in/arkar-kaung-myat/) said he'd like some Web Accessibility resources both general and image specific, so I thought I'd do a post to help others as well.

It's not an exhaustive list! I also haven't given summaries like I usually do. It's more like my dumping my current **#A11y** brain cache.

Also check out the profiles and blogs of the people and organizations that I've @ Mentioned. They're also great resources.

Hopefully this helps Arkar with his **#Svelte** task and others with their accessibility learning.

1. W3C Web Accessibility Initiative (WAI) / W3C image tutorial: https://www.w3.org/WAI/tutorials/images/

2. The A11Y Project : https://www.a11yproject.com/

3. Smashing Magazine - "Accessible Images For When They Matter Most" by Carie Fisher https://www.smashingmagazine.com/2020/05/accessible-images/

4. What Svelte's accessibility warnings won't tell you by Geoff Rich Senior Software Engineer at Ordergroove https://geoffrich.net/posts/svelte-a11y-limits

5. W3C Web Accessibility Content Guidelines (WCAG) 2.2 https://www.w3.org/TR/WCAG22/

6. Coolors Contrast Checker: https://coolors.co/contrast-checker

7. "How to design visual learning resources for neurodiverse students" by Full Fabric https://www.fullfabric.com/articles/how-to-design-visual-learning-resources-for-neurodiverse-students

8. How to Create High Resolution Images for Users with Low Vision Perkins School for the Blind https://www.perkins.org/resource/how-create-high-resolution-images-users-low-vision-0/

9. How to Write Alt Text and Image Descriptions for the visually impaired Perkins School for the Blind https://www.perkins.org/resource/how-write-alt-text-and-image-descriptions-visually-impaired/

10. Web Accessibility Specialist Body of Knowledge (pdf) IAAP - International Association of Accessibility Professionals https://www.accessibilityassociation.org/resource/WAS\_Certification\_FInal\_2020\_FINAL

11. Articles by Ben Myers

12. Ashlee 🤟🏻 Boyer (deaf)'s blog https://ashleemboyer.com/

13. History of the Disability Pride Flag - talks about accessible colours Columbia University https://www.weinberg.cuimc.columbia.edu/news/history-disability-pride-flag

14. Web accessibility for seizures and physical reactions Mozilla Developer Network docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/Seizure\_disorders

* * *
French Fridays for Developers - 020
Published: 2023-12-14 18:49:39

---
title: French Fridays for Developers - 020
published: true
date: 2023-12-08 00:00:00 UTC
tags: 
canonical_url: https://gingerkiwi.dev/blog/2023-12-08-french-fridays-for-developers-20/
---

# French Fridays for Developers - 020

In March, 2023 I started French for Devs Fridays to celebrate getting to 400 days on Duolingo. Today marks 643 days! Here you'll find weekly useful and/or amusing French phrases for developers.

Today's quote is from the last Toronto JS tech talk for the year.

Today is my:

- 🇫🇷 **678th day of French**
- 🇳🇱 337th day of Dutch,
- 🏴󠁧󠁢󠁷󠁬󠁳󠁿 176th day of Welsh,
- 🇩🇪 98th day of German,
- 🇳🇴 92th day of Norwegian,

Here's this week's French for Devs quote and translation.

Number 19, 08 decembre 2023

> _«La beauté du JavaScript Vanilla est que vous pouvez accéder au DOM avec une tronçonneuse»_ <br> ~ **Paul Gordon** Toronto JavaScript Tech Talk, 06 decembre 2023

English: French for Devs #019, December 08 2023

_"The beauty of vanilla JavaScript is that you get to go into the DOM with a chainsaw._"<br> ~ **Paul Gordon** Toronto JavaScript Tech Talk, 06 decembre 2023
Exploring DevOps as Frontend Developer
Tags: webdev, javascript, devops, aws
Published: 2023-12-07 23:50:35

This series documents my journey in learning DevOps. I plan to create another series focusing on learning Backend in the future. Throughout this series, my goal is to develop a full-stack application and deploy it to AWS. The primary challenge will be exploring the capability of the services I am going to use. As I write this, I will list the current tech stack I am using and update it along the way. The current technologies in use include:

- TypeScript
- React
- Express
- PostgreSQL
- Docker
- Yarn workspace
- Portainer
- AWS - EC2
- AWS - API Gateway
- AWS - S3
- AWS - CloudFront
- AWS - AWS Identity and Access Management (IAM)
- AWS - Route 53
- AWS - AWS Certificate Manager (ACM)
- ...
30 Days of Python
Published: 2023-12-07 23:05:09

## Table of Contents

**Beginner Projects:**
* Number Guessing Game
* Password Generator
* To-Do List App
* Rock, Paper, Scissors Game
* Mad Libs Generator

**Intermediate Projects:**
* Web Scraper
* Currency Converter
* Text Analyzer
* Image Downloader
* File Organizer

**Advanced Projects:**
* Simple Chatbot
* Face Detection
* Music Recommender System
* Stock Price Predictor
* Personal Assistant

**Additional Projects:**
* Sudoku Solver
* Tic-Tac-Toe Game
* Twitter Bot
* Expense Tracker
* Interactive Python Game

**Bonus Projects:**
* Weather Forecast App
* Social Media Sentiment Analysis
* Music Genre Classifier
* E-commerce Website
* Website Traffic Analyzer

**Advanced Bonus Projects:**
* AI Art Generator
* Facial Recognition System
* Medical Diagnosis Assistant
* Self-Driving Car Simulator
* Stock Trading Bot
ObservedObject 对比EnvironmentObject 的优缺点
Tags: swift, swiftui, ios
Published: 2023-12-07 22:54:54

## 前言

在SwiftUI当中，常见的传递数据模型的方式有[`@ObservedObject`](https://developer.apple.com/documentation/swiftui/observedobject)和[`@EnvironmentObject`](https://developer.apple.com/documentation/swiftui/environmentobject)两种。有时候难以决断该用哪个？这里我凭自己的经验简单列举一些二者的异同，帮你抉择。

> 太长不看：需要传数据View的层级超过两层用EnvironmentObject，只有一层就用ObservedObject。

## ObservedObject

1. 常用于局部数据传递

比如在一个多层级的设置页面里，可以在设置的根页面创建一个
```swift
@StateObject private var model = Model()

    // … 在子视图的构造函数里
    SettingsChildView(model: model)
```
然后在设置的子视图`SettingsChildView`里面通过`@ObservedObject`来传参。
```swift
@ObservedObject var model: Model
```
因为传参的范围很小，所以无需超过整个设置页面的层级，也不会影响到其他的视图。

2. 数据的所有权更加清晰

通过将数据模型声明在根视图上，整个数据传递的流向更清晰：所有的子视图只是修改数据，而对数据模型的对象的“最终解释权”还是在根视图里。子视图依赖于根视图的关系更明晰。

3. 更易控制合适更新子视图

通过控制在何种条件下把`ObservedObject`传递给子视图，可以更好地控制子视图更新的时机。比如有些情况下数据模型变了，但是我并不想立马更新所有的子视图，而是希望等到模型中特定的属性改变才更新视图。这时，使用ObservedObject就比
EnvironmentObject简单得多。

## EnvironmentObject

1. 常用于全局数据传递

顾名思义，“环境对象”作用于整个app的环境上。可以把数据模型创建在整个程序的入口处，`App`结构体上
```swift
@main
struct DemoApp: App {
    @StateObject private var model = Model()
    
    var body: some Scene {
        WindowGroup {
            ContentView(samples: Self.samples)
                .environmentObject(model)
        }
    }
}
```
从而在整个app的所有视图中，就可以使用`@EnvironmentObject`来访问这个数据模型了。
```swift
@EnvironmentObject private var model: Model
```
很多时候我们需要一些全局的app数据，比如语言设置、登录状态、页面状态等等。这时用EnvironmentObject就比一层层传参的ObservedObject方便。

2. 使用数据时写法更简单

只要数据在整个页面层级里，就可以随处调用。古人说得好——

> ~~如果上帝不愿意我们使用全局变量，他就不会发明出这个东西。不要让上帝失望，尽量多使用全局变量~~。
[How To Write Unmaintainable Code](https://cs.fit.edu/~kgallagher/Schtick/How%20To%20Write%20Unmaintainable%20Code.html) by Roedy Green

直接搞一个数据模型把所有玩意都往里塞就完事儿了。~~最好再来亿点点单例。~~

玩笑话放在一边，合理地使用EnvironmentObject来传递整个app都需要的数据，能有效地降低数据流的维护成本。刚学习SwiftUI时，Big Nerd Ranch的大哥就给我们展示过他们新开发的餐馆点单app，就把所有订单状态都存在这样一个App结构体上声明的数据模型里面。

3. 数据一更新，所有页面都更新

每一个使用了`.environmentObject(model)` modifier的页面都会随着数据模型更新，确保了数据一致性。

## 如何选择？

- ObservedObject：需要使用数据的页面集中在小范围少层级；需要明确数据的所有权；细致地控制视图更新行为
- EnvironmentObject：传递app全局状态；减少维护数据流的思维负担；~~梭哈就完事了~~

在绝大多数的app里面，这二者都是需要用到的。由于当前的限制，一个app只能有一个同类型的EnvironmentObject，所以尽可能不要把它变成一个一锅端大杂烩。谨慎地使用二者，能让整个app的页面刷新更高效、更流畅。
Why did you get into a tech career?
Tags: coding, career, discuss, programming
Published: 2023-12-07 21:09:15

Okay, so everyone has their own reasons for choosing tech as their career. I will share mine and I hope you all share yours in the comments so that we can all read and get inspired!

- One of the main reasons why I got into tech was the fact that where I live - India, the professions that are hyped up are doctor, engineer, lawyer and CA. So I chose engineering because I could not afford the medicine degree fees. Why I did not choose lawyer or CA was because where I studied - a school in Chennai, Tamil Nadu, most of the students were Tamilians and only some were North Indians and there was a stereotype that north Indians choose commerce whereas Tamilians choose science, I did not want to be part of that stereotype and so I chose science. In our schools we have science streams and commerce streams, so we have to choose any one. And if you choose commerce streams, you can study to be a lawyer or CA in college whereas if you choose science streams, you can study to be a doctor or engineer in college. 

- Another major reason why I chose tech was that I knew that women in STEM are way lesser in numbers than men in STEM. So I wanted to contribute to the number of women in STEM. I know that it would just add one more woman to the list and it won't make much difference but I come from the land of Gandhi who said the lines "Be the change that you want to see in the world."

- Another reason was financial stability. I knew that tech jobs pay well. So why not choose something that pays well, right?

- Next reason is that I was good at mathematics and in grade 6 my mathematics teacher suggested me to become a software engineer. I took her advice seriously and made it come true. 

- Last reason was I thought it would give me a head start. I don't know about other countries but in India, for becoming a full fledged doctor, you need multiple degrees, same goes for teacher, lawyer and any other profession I could think of. And government jobs and CA require really competitive exam scores. But software engineering jobs required just one engineering degree and no competitive exams. So I thought I would save a lot of time + effort.

- Bonus last reason - I saw examples of my own mother and mothers of many of my friends. These mothers had studied commerce at college and were housewives. So I thought that if I wanted to get different results than them, I had to do different things, pursuing engineering would be different than pursuing commerce, so I did that.

Why did you choose tech? Tell us in the comments!
Watermark Remover by Magic Studio
Tags: ai, photoediting, aitools, watermarkremover
Published: 2023-12-07 20:25:06

🚀 Hello Dev!

We're thrilled to introduce Watermark Remover by Magic Studio - our latest product designed for e-commerce merchants who constantly struggle to process the images that come through from their supply chain. You can access our software here: https://removewatermark.ai/?utm_source=dev&utm_medium=launchplatforms&utm_campaign=launch-postings-dec2023

🎯 Key Features:
AI-powered watermark detection and removal.
Simple fast one-click process.
Bulk processing for time-efficient workflow.
Smart reconstruction to maintain image integrity.

👩‍💻 Ideal Users:
If you are an E-commerce merchant looking to clean up your product photos, Watermark Remover is built for you.

💡 Our Story:
We've built this tool after speaking to a bunch of merchants who were looking for an easy-to-use watermark removal tool that don’t compromise on image quality and can remove variety of watermarks. We decided to change that.

We'd love your feedback on features and user experience. Tell us what you think, what we can improve, and what features you'd like to see next!
The Power of Topsmm, Your Ultimate SMM Panel
Published: 2023-12-07 18:04:16

In today's fast-paced digital landscape, capitalizing on the power of social media is critical to staying ahead. Look no further than Topsmm if you're looking for a game-changing SMM panel that provides top-notch quality at unbeatable costs.

Topsmm Unveiling: Where Quality Meets Affordability

Topsmm is redefining the SMM experience. Our platform distinguishes itself as the go-to solution for individuals and businesses looking to boost their social media presence without breaking the budget.

Why Should You Use Topsmm? 

High-Quality Services: 
We design our SMM services with quality in mind. We offer a comprehensive array of services geared to catapult your online presence to new heights, from increasing your follower count to increasing engagement.

Solutions at a Low Cost: Quality does not have to be expensive. At Topsmm, we believe in providing affordable services without sacrificing quality. Your budget should not limit your success.

User-Friendly Interface: Our platform is simple to use. Topsmm's user-friendly layout offers a flawless experience for all users, whether they are social media newbies or seasoned pros.

Topsmm may help you achieve your social media objectives.

Consider the following: more visibility, improved participation, and a vibrant online community. With Topsmm as your SMM partner, your dreams can become a reality.

Are you ready to step up your social media game? Visit [TopSMM ](https://topsmm.club/)to learn more about the endless possibilities that Topsmm has to offer. Join the legions of happy customers who have experienced the transforming power of our SMM services.

Don't just wish for social media success—make it a reality with Topsmm, your trusted digital buddy. [Read more](https://start.me/p/aN5EP6/topsmm)
Unlocking Opportunities: The Appeal of Software Development in South America
Tags: developmenttrends, recruitinginsights, nearshoreoutsourcing, remotehiring
Published: 2024-06-10 15:20:25

---
title: Unlocking Opportunities: The Appeal of Software Development in South America
published: true
date: 2023-12-07 20:19:27 UTC
tags: DevelopmentTrends,RecruitingInsights,nearshoreoutsourcing,remotehiring
canonical_url: 
---

The South American software development market is starting to attract many US businesses. The continent, in particular, is at the forefront of this technology renaissance. Countries like Argentina, Brazil, Chile, and Colombia are leading in the digital transformation that's making the whole region dominant.

The post [Unlocking Opportunities: The Appeal of Software Development in South America](https://blog.nextideatech.com/unlocking-opportunities-the-appeal-of-software-development-in-south-america/) appeared first on [Next Idea Tech Blog](https://blog.nextideatech.com).
Tips for Finding the Best Nearshore Software Development Company
Tags: howtohire, nearshoreoutsourcing, nearshoredevelopers
Published: 2024-06-10 15:20:12

---
title: Tips for Finding the Best Nearshore Software Development Company
published: true
date: 2023-12-07 20:13:54 UTC
tags: HowtoHire,NearshoreOutsourcing,nearshoredevelopers,nearshoreoutsourcing
canonical_url: 
---

This article will provide insights and tips for businesses looking to partner with a nearshore development company. The article will explore key considerations like language proficiency, technological expertise, and project management capabilities to help you navigate the vast options available and get started on the right foot in your nearshore outsourcing journey.

The post [Tips for Finding the Best Nearshore Software Development Company](https://blog.nextideatech.com/tips-for-businesses-looking-to-partner-with-a-nearshore-development-company/) appeared first on [Next Idea Tech Blog](https://blog.nextideatech.com).
How To Hire Nearshore Developers In 2024
Tags: howtohire, nearshoreoutsourcing, recruitinginsights, nearshoredevelopers
Published: 2024-06-10 15:20:03

---
title: How To Hire Nearshore Developers In 2024
published: true
date: 2023-12-07 20:08:33 UTC
tags: HowtoHire,NearshoreOutsourcing,RecruitingInsights,nearshoredevelopers
canonical_url: 
---

As experts in nearshore software outsourcing, we understand the unique requirements of startups and businesses regarding nearshore software development. In this article, we’ll help you navigate these problems effectively, ensuring you hire top developers who deliver top-tier software solutions and have strong work ethics. We’ll explore the tips to locate the best IT talent in LATAM and highlight the vital considerations when choosing nearshore developers. By the end of the article, you’ll have a clear idea of how to make the right choice.

The post [How To Hire Nearshore Developers In 2024](https://blog.nextideatech.com/how-to-hire-nearshore-developers-in-2023/) appeared first on [Next Idea Tech Blog](https://blog.nextideatech.com).
A Comprehensive Guide To Nearshore Agile Development
Tags: developmenttrends, remotework, webdev, agile
Published: 2024-06-10 15:19:54

---
title: A Comprehensive Guide To Nearshore Agile Development
published: true
date: 2023-12-07 20:03:48 UTC
tags: DevelopmentTrends,RemoteWork,WebDevelopment,Agiledevelopment
canonical_url: 
---

Get to know what Nearshore Agile Development is, its importance in the work environment, and how it can help companies navigate the unique challenges posed by remote work, such as the lack of face-to-face interaction, difficulty in collaboration, and lack of physical workspace.

The post [A Comprehensive Guide To Nearshore Agile Development](https://blog.nextideatech.com/a-comprehensive-guide-to-nearshore-agile-development/) appeared first on [Next Idea Tech Blog](https://blog.nextideatech.com).
How to deploy an Express API to Vercel
Tags: webdev, javascript, programming, beginners
Published: 2023-12-07 19:45:13

4. Add vercel.json configuration
After exporting Express, we have to tell Vercel what files to build, how to build them, and how to route them using a vercel.json file.
So create a vercel.json file.

```
touch vercel.json
```
Then using Vercel Platform version 2, specify your index.js file and the NPM module Vercel will use to turn it into a serverless function...

```js
{
  "version": 2,
  "builds": [
    {
      "src": "dist/server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/server.js"
    }
  ]
}

```

```
npm install -g vercel

```

```
npm run build
vercel --prod
```

https://shadowsmith.com/thoughts/how-to-deploy-an-express-api-to-vercel#_4-add-verceljson-configuration
I just published another Medium article! "ModCon: Awesome to the MAX🚀"
Published: 2023-12-07 19:38:52


[December 4th was ModCon 2023. The event not only unveiled a series of groundbreaking announcements but also delivered an array of truly inspirational talks that resonated deeply with the audience...](https://medium.com/@ilya0x/modcon-awesome-to-the-max-dac6bc3f6a57)

[https://medium.com/@ilya0x/modcon-awesome-to-the-max-dac6bc3f6a57](https://medium.com/@ilya0x/modcon-awesome-to-the-max-dac6bc3f6a57)