teleren/devto huggingface dataset:
telepathy and narrative agency
Tags: gamedev, writing
Published: 2024-02-25 21:27:50

---
title: telepathy and narrative agency
published: true
date: 2024-01-22 00:00:00 UTC
tags: [ 'gamedev', 'writing' ]
canonical_url: https://onwriting.games/daily/20240122-2142-telepathy-and-narrative-agency/
---

A few days ago, Tony Howard-Arias (writer of Slay the Princess) [wrote an article](https://www.gamedeveloper.com/design/deep-dive-player-centered-narrative-design-in-slay-the-princess) talking about details of the game.

Some of the things he mentions are what I discussed in the list: the use of variables to reduce combinatorial explosion, that narrative is enough to make a game fun, etc.

But there's something that caught my attention:

> [...] we as game writers don't have a direct pathway to our players' thoughts, which put us in a difficult position where we could either ask our players for those thoughts (a big, immersion-breaking no-no in our book) or to find a way to vocalize thoughts that were at least tangential to whatever decisions the player has just made.

While Stephen King gave us the image that writing is a form of telepathy, when it comes to video games, misused telepathy can **break the immersion**.

The attempt to force the designer's ideas onto the player is the main criticism that is made to graphic adventures **as a genre**.

That kind of telepathy, the one that takes away agency, is the one **we have to avoid**.

I hadn't realized that The Voices of Slay the Princess were a design element to solve the problem of communicating ideas to the user without taking away agency.

Genius 👏
Tailwind CSS workshop recording
Published: 2024-01-26 20:33:54

---
title: Tailwind CSS workshop recording
published: true
date: 2024-01-22 00:00:00 UTC
tags: 
canonical_url: https://www.oliverdavies.uk/archive/2024/01/22/tailwind-css-workshop-recording
---

At Saturday's hackathon that I mentioned in yesterday's email, most of the squads decided to try Tailwind CSS in their applications.

I've been using Tailwind since it was released, and first gave [a Tailwind CSS talk](https://www.oliverdavies.uk/talks/taking-flight-with-tailwind-css) in January 2018.

It's one of my most popular talks and, during COVID lockdowns, I also gave a workshop/webinar on Tailwind CSS for some online conferences.

[Here's a recording](https://www.youtube.com/watch?v=phFDKF-9j0Y) of the session I gave for DrupalCamp Florida, in which I cover some Tailwind CSS concepts and show how to install and customise Tailwind before rebuilding the Florida DrupalCamp website live.

If this helps anyone on their Tailwind CSS learning journey, please reply and let me know!

P.S. If you'd like your own workshop on Tailwind CSS, Drupal, automated testing or something else, I offer private talks and workshops and [team coaching](https://www.oliverdavies.uk/team-coaching) or, if you need something more hands-on, monthly [Drupal development subscriptions](https://www.oliverdavies.uk/subscription).
Keep Homebrew Tidy With `brew leaves`
Tags: homebrew, macos, shell
Published: 2024-01-23 21:09:08

---
title: Keep Homebrew Tidy With `brew leaves`
published: true
date: 2024-01-22 00:00:00 UTC
tags: homebrew, macos, shell
canonical_url: https://nelson.cloud/keep-homebrew-tidy-with-brew-leaves/
---

Homebrew has a `brew leaves` command that shows all installed packages with no dependencies. That means that they can be uninstalled without causing issues to other installed Homebrew packages. It’s good to regularly run this command to keep Homebrew from getting too bloated.

Here’s what my `brew leaves` output looks like at the time of this writing:

```shell
$ brew leaves

automake
bat
black
coreutils
ffmpeg
go
htop
hugo
jq
libksba
libpq
libtool
libyaml
node
openssl@1.1
pkg-config
postgresql@14
python-typing-extensions
tldr
tree
yt-dlp
zlib
```

In my case, I know I don’t need the `libpq` package anymore. So I can remove this package and then run `brew leaves` again to confirm it’s gone.

```shell
$ brew remove libpq

Uninstalling /opt/homebrew/Cellar/libpq/16.1_1... (2,380 files, 29.9MB)
```
```shell
$ brew leaves

automake
bat
black
coreutils
ffmpeg
go
htop
hugo
jq
libksba
libtool
libyaml
node
openssl@1.1
pkg-config
postgresql@14
python-typing-extensions
tldr
tree
yt-dlp
zlib
```

And now `libpq` is gone! Try out `brew leaves` yourself. You may be surprised at the amount of things installed that you may not actually need.
Babylon.js Browser MMO - DevLog #8 - Monsters
Tags: babylonjs, gamedev, indie, mmo
Published: 2024-01-21 23:58:27

Hello,
The last episode from the prototyping phase. This time I'll present how I implemented monsters which are able to chase players. 
Players gained two attacks: melee and range. There's no combat mechanics so monsters are instantly killed.

If You're interested check my video! 

{% youtube HRGel_JegvE %}
Download and Setup Guide for Proxifier
Published: 2024-01-21 10:24:20

Proxifier is a proxy client that allows programs without native proxy support to function correctly. It supports various operating systems and proxy protocols, offering customizable port and application proxy settings. 

**To set up Proxifier, follow these steps:**

1. Download and Install Proxifier:
Visit the official [Proxifier website](https://www.okeyproxy.com/proxy/how-to-use-proxifier-with-okey-proxy-in-2024/) and download the installation package suitable for your operating system. Choose the version compatible with your OS, such as the Mac version for Mac users. Once the download is complete, locate the downloaded file and double-click to initiate the installation process. 

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

2. Configure Proxy Servers:
Launch Proxifier and click on "Proxy Servers." To add a proxy, click on "Add." Access your OkeyProxy dashboard or the corresponding client for your chosen proxy. Generate the proxy information, including the Proxy IP Type (rotating residential proxies, [static residential proxies](https://www.okeyproxy.com/en/static-residential-proxies), or data center proxies). Select the "user name password" option and choose the "endpoint generator." Specify the desired country and city for proxy generation. OkeyProxy supports over 200 countries. Enter the number of proxies required and click "generate" to receive the proxy information, including IP addresses, port numbers, username and password.

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

3. Enter Proxy Information:
Enter the proxy information obtained from the OkeyProxy dashboard into Proxifier. If your IP is whitelisted, authentication is not necessary. Click "Check" to verify the successful connection of the proxy. If the detection is successful, click "OK" to save the proxy settings.

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

- FreeCap: A reliable free alternative supporting HTTP and SOCKS proxies. It provides transparent connection redirection and is specifically designed for Windows, featuring an intuitive interface suitable for new users.

- Redsocks: Designed for Linux users, Redsocks allows routing of any TCP connection through a proxy server, supporting both HTTP and SOCKS proxies. It is available for Ubuntu, Debian, Gentoo, and Archlinux AUR.

- Proxycap: Starting at $39.61 per license with a 30-day free trial, Proxycap offers advanced features.
......

please refer to the original text for additional information: 
https://www.okeyproxy.com/proxy/how-to-use-proxifier-with-okey-proxy-in-2024/
How to create and setup a Node.js server port 🌐
Tags: webdev, node, beginners
Published: 2024-01-21 22:26:17

#What is Node.js?

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment designed to execute JavaScript code outside a web browser. It allows developers to build scalable network applications using JavaScript.

## Install Node and npm

First, you have to download [Node ](https://nodejs.org/en/download/)and [npm ](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)from these links.

## Get package.json file

Create a folder for your app, add a `server.js` file inside, and navigate to that folder. Run npm init in the terminal, providing information like version and description. Make sure to set `server.js` as the entry point.

```
npm init
```

**

## Install dependencies
**

Install Express (a Node.js framework for building RESTful APIs), Mongoose (a library for connecting MongoDB and Node.js), and Nodemon (a tool for restarting the server on file changes)

```
npm install express mongoose
npm install -D nodemon
```

## Write a script

Add the following scripts to your package.json file:

```
"scripts": {
  "start": "node server.js",
  "server": "nodemon server.js"
},
```

## Create a port

Now, in the end, type this code in your server.js file

```
const express = require('express');
const port = 8000;
const app = express();

app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});
```

and to get the results, run this command in the terminal

```
npm run server
```

You’ll get the running port in the terminal just like this


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

This setup lets you quickly create a Node.js server using Express, connect to MongoDB using Mongoose, and automatically restart the server during Nodemon development.

> “Keep coding, keep sharing, stay motivated. The source code of success lies in persistence, passion, and a dash of creativity. Happy coding journey!”

Thank you for reading! 😍
Feel free to connect on [Linkedin](https://www.linkedin.com/in/arslan-malik-/) ✨
All That You Should Know About - AWS Re:Invent 2023
Tags: aws, awscommunitybuilders, reinvent2023, keynote
Published: 2024-01-21 22:23:12

🌟Navigating AWS Re:Invent 2023: Your Comprehensive Guide🌟

AWS Re:Invent 2023 stands out as a highlight in cloud computing, filled with engaging sessions and key insights. Exploring it, however, can be like searching for hidden gems in a huge sea of tech innovations. To streamline this journey and ensure you access the most pivotal, concise, and vital insights from AWS ReInvent 2023, I've compiled a series of insightful articles and a summary tailored to different reader interest groups.
Dive into the essence of AWS ReInvent 2023 through this link and enrich your understanding. 🚀🚀🚀
Your reads, shares, likes, and constructive feedback are highly appreciated!

https://shweta-vohra.medium.com/navigating-aws-re-invent-2023-your-comprehensive-guide-80c04e6fdfa8

#aws #awsreinvent2023 #communitybuilders #keynote #serverless
4 Reasons Why Substack Is The Most Underrated Platform For Junior To Mid-Level Developers Looking To Advance Their Career
Tags: beginners, webdev, career, mentorship
Published: 2024-01-21 22:04:44

Substack is seriously **underrated**.

If you're on it, you know exactly what I'm talking about.

But if you aren't, here's why:

## Reason #1: You get direct access to practical advice from accomplished developers

Twitter is great for inspiration, and Reddit is excellent for finding help.

However, if you are a developer who has just started their career and wants to excel, check Substack. The advice is direct, tailored to your daily tasks (no pointless debates about the best framework), and comes from developers with a proven track record like @GergelyOrosz, @highgrowtheng, @gregorojstersek.

## Reason #2: You can access a lot of great content for free (even if you can subscribe for more)

While some newsletters may require a subscription, many already provide free access. Even paid newsletters often offer complimentary posts.

## Reason #3: You can continue interacting with more people through Substack notes

I recently stumbled upon this, and I'm loving it. It's perfect for staying updated on what's new and connecting with fellow developers.

## Reason #4: No built-in ads on the Substack platform

If, like me, you're fed up with annoying or irrelevant ads cluttering your feed, you will love Substack. Enjoy scrolling through notes without the hassle of any ads 😉.

---

Thank you for reading this post 🙏.

Leave a comment 📩 to share what you think about it.

And Don't forget to Drop a "💖🦄🔥".

If you like articles like this, join my **FREE** newsletter, **[FrontendJoy](https://frontendjoy.substack.com/)**, or find me on [X/Twitter](https://twitter.com/_ndeyefatoudiop).
Sun-Kissed Safely: Navigating the Radiant World of Arvelon's UV Defense Sunscreen
Published: 2024-01-21 22:02:23

Step into the radiant embrace of Arvelon's UV Defense Sunscreen, where protection becomes a luxurious ritual and skincare transcends mere necessity. In this sunlit exploration, we unfurl the secrets behind this skincare essential, guiding you through the enchanting journey of shielding your skin while basking in the glow of safe, sun-kissed beauty.

**Embracing the Sun Safely:**

As we navigate the sunlit landscapes, it's imperative to appreciate the delicate dance between our skin and the sun. Arvelon's UV Defense Sunscreen emerges as the guardian, providing a shield against the sun's rays while celebrating the warmth and radiance it imparts. For an in-depth revelation of this sun-kissed secret, explore our dedicated blog .

**The Alchemy of Sun Protection:**

Arvelon's UV Defense Sunscreen is crafted with precision, blending science and nature into a harmonious elixir. Delve into the alchemy of its formulation, where advanced UV filters meet skin-loving ingredients, resulting in a potion that not only safeguards but also pampers your skin. Learn more about the alchemy .

**Beyond the Basics: Multi-Faceted Protection:**

This sunscreen transcends the ordinary, offering more than just sun protection. Dive into the multifaceted benefits, from preventing premature aging to creating a smooth canvas for makeup application. Uncover the layers of care woven into each application .

**Sun-Kissed Elegance:**

Arvelon's UV Defense Sunscreen isn't just a shield; it's a touch of elegance in your daily skincare routine. Its lightweight texture and non-greasy finish redefine the sunscreen experience, inviting you to revel in sun-kissed moments without compromise. Explore the elegance .

**Customizing Your Sunscreen Symphony:**

Much like crafting a skincare regimen, the application of sunscreen is an art. Discover the nuances of customization—whether you prefer it under makeup, as a standalone glow, or as a protective base for your outdoor adventures. Tune into the symphony of possibilities.

**An Ode to Sun-Kissed Beauty:**

In this sunlit ode, Arvelon's UV Defense Sunscreen takes center stage, offering not just protection but a celebration of sun-kissed beauty. Click [here] to immerse yourself in the radiance, as we unravel the secrets of safe sun exposure and guide you through the sun-kissed realms of skincare.

*To explore the radiant world of Arvelon's UV Defense Sunscreen, click [here](https://arvelonskin.blogspot.com/2024/01/sun-protection-more-than-just-spf.html) and bask in the elegance of sun-kissed protection.*
PM2 Cheatsheet
Tags: webdev, javascript, node, nextjs
Published: 2024-01-21 21:24:51

Hello friends,
I've created another cheatsheet, it's for pm2, which is actually my personal notes like the other articles. It could be helpful for you too.

### What's PM2
PM2, or Process Manager 2, is a versatile and powerful process manager for Node.js applications. It's designed to simplify the deployment, management, and monitoring of Node.js applications in production environments. 

### PM2 comes with a range of features:
Process Management
Monitoring
Logging
Cluster Mode
Startup Script Generation
Environment and Configuration
Version Management
Security
Update Management
Global CLI



I personally utilize it primarily for managing processes and logging, allowing you to start, stop, and automatically restart Node.js processes.

### Here's a list of commonly used PM2 commands along with examples:

- Start a Node.js application with PM2:

```
pm2 start app.js
```

- Start a NextJs application with a specific name:

```
pm2 start npm --name app-name -- start
```

- List all PM2 processes:
```
pm2 ls
```

- Show detailed information about a specific process:
```
pm2 show your-app-name
```

- View real-time logs of a specific process:

```
pm2 logs your-app-name
```

- Monitor system resources for all PM2 processes:

```
pm2 monit
```

-Stop a PM2 process:
```
pm2 stop your-app-name
```

- Restart a PM2 process:

```
pm2 restart your-app-name
```

- Delete a PM2 process:

```
pm2 delete your-app-name
```
 
- Reload a PM2 process (restarting without downtime):

```
pm2 reload your-app-name
```

- Save the list of PM2 processes for automatic startup:
```
pm2 save
```

- Startup PM2 on system boot:
```
pm2 startup
```
- View detailed status of all PM2 processes:
```
pm2 status
```

- Clear logs for a specific process:
```
pm2 flush your-app-name
```


These commands should cover most of the common tasks you need to perform when working with PM2. For more detailed information, you can always refer to the official PM2 documentation.

Also if you're looking to deploy NextJS Website From Scratch (with Ubuntu, NGINX and pm2) these videos would be helpful:
- https://www.youtube.com/watch?v=IwWQG6lEdQQ
- https://www.youtube.com/watch?v=DbREUJNgxqw

## refs 
- https://pm2.keymetrics.io/docs/usage/quick-start/
Understanding List, Tuple, Dictionary, and Set Differences in Python
Tags: apacheage, postgres, datascience, python
Published: 2024-01-21 21:23:42

**Introduction**
Python, a versatile and dynamic programming language, provides developers with various data structures to efficiently organize and manipulate data. Among these, lists, tuples, dictionaries, and sets are fundamental structures that serve distinct purposes. In this article, we'll delve into the differences between them, exploring their unique characteristics and use cases.

**Lists:**
Lists are mutable sequences, allowing the storage of heterogeneous elements. Elements can be added, removed, or modified, making lists a flexible choice for dynamic data.

```
my_list = [1, 2, 3, 4, 5]

```
 
**Tuples:**
Tuples are similar to lists but with one crucial difference: they are immutable. Once created, the elements within a tuple cannot be changed. This immutability provides stability, making tuples suitable for situations where the data should remain constant. 

```
my_tuple = (1, 2, 3, 4, 5)

```

**Dictionaries:**
Dictionaries, or dicts, are collections of key-value pairs, allowing for efficient data retrieval. Keys are unique and immutable, while values can be of any data type. This structure is particularly useful for mapping relationships between items.

```
my_dict = {'one': 1, 'two': 2, 'three': 3}

```

**Sets:**
Sets are unordered collections of unique elements. They are helpful when dealing with distinct items and operations like union, intersection, and difference. 

```
my_set = {1, 2, 3, 4, 5}

```

**Differences and Use Cases:**
**Mutability:**

Lists are mutable; elements can be modified after creation.
Tuples are immutable; their elements cannot be changed once defined.
**Uniqueness:**

**Lists and tuples allow duplicate elements.**
Sets only store unique elements, automatically eliminating duplicates.

**Key-Value Mapping:**

Dictionaries store data as key-value pairs, enabling efficient data retrieval.
Lists, tuples, and sets don't have key-value relationships.
Order:

Lists and tuples maintain order, preserving the sequence of elements.
Sets do not guarantee order, as they are unordered collections.
Dictionaries, introduced in Python 3.7+, maintain the insertion order.
Braces or Brackets:

Lists and dictionaries use square brackets **([]).**
Tuples use parentheses **(()).**
Sets use curly braces **({}).**
In summary, choosing the right data structure depends on the specific requirements of your program. Lists and tuples provide ordered sequences, dictionaries offer key-based retrieval, and sets ensure uniqueness. Understanding these differences allows developers to make informed decisions, optimizing code for efficiency and clarity.
Facing issue with ModalBottomSheet in Jetpack Compose.
Tags: jetpack, jetpackcompose, compose, android
Published: 2024-01-21 20:38:50

I am using ModalBottomSheet but I am facing two issues:

1) There is a white line on the right corner of the scrim.
2) The scrim color is not animating while opening and closing of ModalBottomSheet.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fbovf1fstv2n6gr5vy0.jpg)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22qtd9a1rkoj9ucsr52f.jpg)

```
val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Button(onClick = {
    showBottomSheet = true
}) {
    Icon(Icons.Filled.Add, contentDescription = "")
    Text("Show bottom sheet")
}

if (showBottomSheet) {
    ModalBottomSheet(
        onDismissRequest = { showBottomSheet = false },
        sheetState = sheetState,
        dragHandle = { Text(text = "") },
        scrimColor = Color.Black.copy(alpha = 0.63f),
        containerColor = Color.White,
        modifier = Modifier.height(280.dp),
        windowInsets = WindowInsets(0,0,0,0)
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxSize().padding(16.dp)
        ) {
            Text(text = "This is a bottom sheet")
            Spacer(modifier = Modifier.height(16.dp))
            Button(onClick = {
                scope.launch { sheetState.hide() }.invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        showBottomSheet = false
                    }
                }
            }) {
                Text("Hide bottom sheet")
            }
        }
    }
}
```
React Query Tanstack, axios and customised hooks
Tags: typescript, graphql, api, frontend
Published: 2024-01-21 20:33:54

Hello guys!😀

Thank you for reading my article!

This one is short but I hope you find some value to it and give you some ideas to be more creative with your code ❤️ 

The concept is to create the connection between the frontend app + graphql + server for transferring data back and forth. I am gonna share an example doing a GET request.

Firstly we need to set up our ``http-client``

```js

const instance = axios.create({
  baseURL: config.ApiBaseUrl,
  headers: {
    'Content-type': 'application/json',
  },
})

export default setupYourInterceptors(instance)
```
In the code below your ``ApiBaseUrl`` could be your actual API. In the case below I am storing it in this format.

```js

const { YOUR_API_BASE_URL } = = import.meta.env

const config: Configuration = {
  ApiBaseUrl: 'YOUR_API_BASE_URL' || 'default'
}

```

Axios interceptors allow you to run your code or modify the request and/or response before the request is sent or after the response is received.

- ``onRequest`` is a function that will be called before each request is sent. It can modify the request configuration.

- ``onResponseError`` is a function that will be called if the response results in an error. This allows for centralized error handling.

```js

function setupYourInterceptors(axiosInstance: AxiosInstance): AxiosInstance {
  axiosInstance.interceptors.request.use(onRequest, undefined)

  axiosInstance.interceptors.response.use(undefined, onResponseError)

  return axiosInstance
}

```

Now lets create a book service. Lets say we are searching for books.

```js

const endpoint: string = '/books'

const getBooks = async (): Promise<BooksResponse[]> => {
  const { data: response } = await httpClient.get<BooksResponse[]>(`${endpoint}`)
  if (response) {
    return response.items
  }
  throw new Error('Data is undefined')
}

export default getBooks

```

Lastly our customisable hook for fetching books.

```js
function useGetBooks() {
  return useQuery({
    queryKey: ['books'],
    queryFn: () => getBooks(),
  })
}

```

Thank you for reading it 😀