DEV Community: dan

Creating In PatchWorld XR

dan — Sun, 30 Mar 2025 23:52:19 +0000

I love music. If you're into VR, PatchWorld XR is an amazing app that gives you complete creative freedom both musically and visually.

Gemini 2.5 Pro sums it up pretty good.

PatchWorld XR provides an immersive virtual reality platform where users build interactive musical worlds using a visual, block-based system. This method directly introduces fundamental coding concepts, as users learn to connect blocks logically to create sequences, trigger actions, and manage parameters – much like visual programming. Simultaneously, by assembling blocks that generate sounds, control rhythms, and shape melodies, users intuitively explore and grasp core music fundamentals. This hands-on, playful approach makes learning the foundational principles of both coding and music creation engaging and accessible.

Here's a neat minecraft(ish) tool I've been working on.

I'm still working on the grid and how to enable it for only the blocks.

Create a Simple API with Python and Flask

dan — Sun, 30 Mar 2025 23:16:16 +0000

https://github.com/dcs-ink/simple-api-python-flask

I recently requested my data from Indeed because I was curious about the statistics with my recent job search.

I've worked plenty with APIs, but never built one from scratch. I decided to create a simple one using Python and Flask.

It's simple really, only consists of two files - the python script and the json file.

jobs.json
job_api.py

Here's a snippet example of the json file I received from Indeed.

[
    {
      "title" : "Job Title",
      "company" : "CoolCompany",
      "location" : "Cool City, COOL",
      "date" : "date timestamp"
    }
]

Mine had something like 300 entries, but the point remains the same.

Here's the python script

import json
from flask import Flask, jsonify

app = Flask(__name__)

jobs_data = []
try:
    with open('jobs.json', 'r') as f:
        jobs_data = json.load(f)
    print(f"Successfully loaded {len(jobs_data)} jobs from jobs.json")
except FileNotFoundError:
    print("Error: jobs.json not found!")
except json.JSONDecodeError:
    print("Error: jobs.json is not valid JSON!")

@app.route('/api/jobs', methods=['GET'])
def get_all_jobs():
    return jsonify(jobs_data)

@app.route('/api/jobs/titles', methods=['GET'])
def get_job_titles():
    titles = [job['title'] for job in jobs_data]
    return jsonify(titles)

@app.route('/api/jobs/companies', methods=['GET'])
def get_job_companies():
    if not jobs_data:
        return jsonify({"error": "No job data available"}), 500
    companies = list(set(job.get('company', 'N/A') for job in jobs_data))
    return jsonify(companies)

@app.route('/api/jobs/location', methods=['GET'])
def get_job_locations():
    if not jobs_data:
        return jsonify({"error": "No job data available"}), 500
    locations = list(set(job.get('location') for job in jobs_data))
    return jsonify(locations)

if __name__ == '__main__':
    app.run(debug=True, port=8080)

Steps to make it work.
After setup and activating a virtual environment...

pip install flask
pip install jsonify
Create python file and paste above python code
Create json file and paste above json code
Run python script sudo python3 job_api.py
Use curl to test

curl http://127.0.0.1:8080/api/jobs

Response

[
    {
        "company": "CoolCompany",
        "date": "date timestamp",
        "location": "Cool City, COOL",
        "title": "Job Title"
    }
]

Control a servo connected to a Raspberry Pi using an Xbox controller

dan — Mon, 22 Jul 2024 03:52:28 +0000

https://github.com/dcs-ink/raspberry_servo_controller

raspberry_servo_controller

Control a servo connected to a Raspberry Pi using an Xbox controller. Easy setup for testing.

Parts list:

raspberry pi 4
xbox controller
power bank
breadboard
100 µF capacitor
servo
jumper wires

Diagram

Instructions

Prep Raspberry Pi (I used Raspberry OS Lite but I imagine most OS's should work)
Install dependancies

   sudo apt-get install -y evtest evdev

Pair controller

   bluetoothctl
   scan on
   pair XX:XX:XX:XX:XX:XX
   trust XX:XX:XX:XX:XX:XX
   connect XX:XX:XX:XX:XX:XX

Make note of the ID; eventX

Look at controller output

   sudo evtest /dev/input/eventX

Create python script

   vim ServoController.py

copy paste (be sure to change 'eventX' to your controller id

   import evdev
   import RPi.GPIO as GPIO
   import time

   GPIO.setmode(GPIO.BOARD)
   GPIO.setup(11,GPIO.OUT)
   servo = GPIO.PWM(11,50)
   servo.start(0)

   controllerInput = evdev.InputDevice("/dev/input/event0")

    for event in controllerInput.read_loop():
      if event.type == evdev.ecodes.EV_ABS:
        if event.code == evdev.ecodes.ABS_X:
          angle = 2 + (event.value / 6553.5)
          servo.ChangeDutyCycle(angle)
          print(angle)

Run script

   python3 ServoController.py

Thanks to Berardinux for the code and guide! XboxController_Servo_RaspberryPi
https://youtu.be/3Z6Bf0uV7tc?si=rzX2nBYM4o1anVEc

Installing with PNPM is 56% faster than NPM

dan — Mon, 03 Jun 2024 17:23:13 +0000

I'm surprised I don't see recommendations to use PNPM over NPM more often. Over the past couple of months, I've been reading guides and tutorials daily, and I've only seen it recommended in one project, homepage.

Since I started using PNPM while learning React, I've noticed a significant speed increase. PNPM conducts a daily benchmark comparing its performance to NPM. You can check it out here: PNPM Benchmarks.

Have a great day!

React Styling: Navigating CSS Specificity and Precedence

dan — Sat, 18 May 2024 21:28:59 +0000

In trying to figure out why an image wasn't centering where I thought it should be I built a little flowchart that shows the styling precedence for a typical React webapp.

Open Interpreter Quick Setup Guide

dan — Sat, 18 May 2024 21:17:47 +0000

I've been using Open Interpreter quite a bit in building a React website. If you haven't heard of it, Open Interpreter lets LLMs run code on your computer to complete tasks. This has a major advantage over the average AI web interface in that it can see entire directories rather than being limited to a code snippet or single page. I admit it has been a while since I used Copilot, so I'm not sure if it has that capability yet. However, Open Interpreter also has the ability to run apps and take over your screen/keyboard, among some other really cool things.

I'm using WSL and it works great. Here's a quick setup guide:

Create a virtual environment

python -m venv venv

Activate it

source venv/bin/activate

Install Open Interpreter

pip install open-interpreter

Start the interpreter

interpreter

Some additional notes

You will need an OpenAI API key, so head over to their site if you don't have one yet.
There are many flags and custom prompts that can be used; head over to the official documentation for further use: Open Interpreter Documentation.
In WSL, conversations are saved in /home/user/.config/open-interpreter/conversations.
The list of supported models can be found here: Supported Models.

I've been really impressed with GPT-4O, but I'd love to hear about others' experiences.

Simplifying Imports in React with Base URL Configuration

dan — Sun, 12 May 2024 23:52:05 +0000

Managing imports in a React project can get tricky, especially as your application scales and directories get deeper. Struggling with this myself, I asked chatGPT for some advise and discovered base URLs.

Using a base URL allows you to use absolute paths instead of relative ones, making your code cleaner and easier to maintain.

Why Use a Base URL?

Using complex relative paths like ../../../../components/MyComponent is error-prone and hard to maintain. With a base URL, you can import components using straightforward paths:

import MyComponent from 'components/MyComponent';

How to Set Up a Base URL

You can configure a base URL in your React project by editing the jsconfig.json. (Sidenote: when using 'create-react-app' the file is not automatically created so you will need to create one at the base of your project.)

Here's a simple config for jsconfig.json.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src/**/*"]
}

This configuration tells your compiler that any imports should be resolved starting from the src directory, simplifying your import statements across the project.

Hope this helps, have a great day!

Next.js: App Router vs Pages Router

dan — Tue, 05 Mar 2024 11:32:44 +0000

Let's talk about setting up a Next.js project, focusing on choosing between the App Router and the Pages Router. As I've been delving into React, I initially got to know the 'create-react-app' command, which made the setup process and understanding the basic file structure extremely easy. However, upon discovering that 'create-react-app' is no longer recommended, I was led to Next.js.

Transitioning to Next.js has proven to be a steeper learning curve, highlighting the complexity of its setup compared to 'create-react-app'. Here's a lit of the questions you are asked when running 'create-next-app'.

npx create-next-app@latest mysite
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
? Would you like to use App Router? (recommended) › No / Yes

When you're new to Next.js, deciding between using the Pages Router and the App Router can be confusing, and understanding how each affects your project's file structure isn't immediately clear.

Pages Router

Initially encountering Next.js, the Pages Router seems like a straightforward choice. It operates on a simple principle: the pages directory. You create a file within this directory, and just like that, you've created a new webpage (or route) for your site. This process is very beginner-friendly, relying on conventions that directly link the file structure to your website's URL paths. For example, if you want to add a /contact page to your site, you would simply create a contact.js file in the pages directory. However, as a beginner, it might not be immediately obvious how this choice between routers affects the organization and scalability of your project in the long run.

Here is the pages router structure (no src directory)

Pages/
├── _app.js
├── _document.js
└── index.js
Styles/
├── global.css
├── Home.module.css

App Router

The App Router, introduced in later versions of Next.js, provides a more explicit approach to routing. Unlike the Pages Router, where routes are implicitly created based on file names in the pages directory, the App Router requires you to define your routes using a JavaScript API within an app directory. This method grants more control and flexibility, particularly for projects with complex routing needs or dynamic content. For beginners, the App Router introduces a level of complexity and requires a deeper understanding of Next.js concepts right from the start. It's a hands-on approach that might not be clear at first, especially when trying to grasp how it differs from the simplicity of the Pages Router and how it influences the structure and development of your application.

Here is the app router structure (no src directory)

app/
├── favicon.ico
├── global.css
├── layout.js
├── page.js
└── page.module.css

Key Differences for Beginners

Simplicity vs. Control: Pages Router wins if you're after simplicity. It's great for static sites or apps with straightforward routing needs. App Router, however, gives you more control and is better suited for complex routing scenarios.

Convention vs. Configuration: With Pages Router, you follow a convention (file names and structures). App Router is more about configuration, where you define routes through code.

Dynamic Routing: Both routers support dynamic routes, but App Router provides a more explicit approach, which might be easier to manage and understand for complex cases.

Learning Curve: Pages Router is generally easier for beginners to grasp. App Router introduces concepts that might be more familiar to those with experience in other JavaScript frameworks or more complex routing needs.

Which One Should You Choose?

If you're just starting out, dipping your toes with the Pages Router might be the way to go. It's less to manage upfront, and you can get a site up and running quickly. As you grow more comfortable with Next.js or if your project's routing needs become more sophisticated, considering the App Router could be a game-changer, offering you the flexibility and power to manage more complex routing patterns.

For more details be sure to check out the official documentation. Next.js Project Structure

How to Set Up the OpenAI API with Python and Flask

dan — Wed, 28 Feb 2024 18:50:01 +0000

I found it intriguing to develop a user-friendly front end for OpenAI's API to enhance customization. This project marks the initial stages of that project.

The primary focus was on establishing a strong foundation, given my intent to integrate this tool into my daily routine. By following this guide, you can create a simple web interface for interacting with OpenAI's chatGPT. As a learner myself, I understand some of the challenges in finding guides, so I tailored this content with beginners in mind but also short and to the point.

Moving forward, my goal is to expand this project by adding features like a chat history and individual user accounts. This serves as the first installment of the project.

How to Set Up the OpenAI API with Python and Flask

Create your project folder.

mkdir homeGPT
cd homeGPT

Create your virtual environment

python3 -m venv homeGPT

Activate the virtual environment

source homeGPT/bin/activate

Install flask, requests, python-dotenv

pip install flask requests python-dotenv

Create file app.py. I use vim.

vim app.py

Add this code to app.py

from flask import Flask, render_template, request
import os
from openai import OpenAI
from dotenv import load_dotenv

load_dotenv()  # Load environment variables from .env
OPENAI_API_KEY = os.getenv('OPENAI_API_KEY')
client = OpenAI(api_key=OPENAI_API_KEY)

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        prompt = request.form['prompt']
        response = client.chat.completions.create(
            model="gpt-3.5-turbo",
            messages=[
                {"role": "system", "content": "You are a poetic assistant, skilled in explaining complex programming concepts with creative flair."},
                {"role": "user", "content": prompt}
            ]
        )
        return render_template('home.html', prompt=prompt, response=response.choices[0].message.content)
    else:
        return render_template('home.html')

if __name__ == '__main__':
    app.run(debug=True)

Create a templates folder

mkdir templates

Create a file home.html within templates

vim home.html

Add this code to home.html

<!DOCTYPE html>
<html>
<head>
    <title>HomeGPT</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h1>HomeGPT</h1>
        <form method="POST">
            <div class="form-group">
                <input type="text" name="prompt" class="form-control" placeholder="Enter your prompt">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>

        {% if response %}
            <div class="mt-3">
                <h2>The AI Says:</h2>
                <pre class="bg-light p-3">{{ response }}</pre>
            </div>
        {% endif %}
    </div>
</body>
</html>

Your file structure should look like this.

 project_folder/
 ├── app.py
 ├── templates/
 │   └── home.html

Grab your OpenAI API key Link

Set it as an environment variable

vim ~/.bashrc

Add this line at the end with your own api key.

export OPENAI_API_KEY="yourAPIkey"

This will let you use your new key.

source ~/.bashrc

Now let's test, you should see your api key.

echo $OPENAI_API_KEY

Startup the app

flask run

DEV Community: dan

Creating In PatchWorld XR

Create a Simple API with Python and Flask

Control a servo connected to a Raspberry Pi using an Xbox controller

raspberry_servo_controller

Control a servo connected to a Raspberry Pi using an Xbox controller. Easy setup for testing.

Diagram

Instructions

Installing with PNPM is 56% faster than NPM

React Styling: Navigating CSS Specificity and Precedence

Open Interpreter Quick Setup Guide

Create a virtual environment

Activate it

Install Open Interpreter

Start the interpreter

Some additional notes

Simplifying Imports in React with Base URL Configuration

Why Use a Base URL?

How to Set Up a Base URL

Next.js: App Router vs Pages Router

Pages Router

App Router

Key Differences for Beginners

Which One Should You Choose?

How to Set Up the OpenAI API with Python and Flask

How to Set Up the OpenAI API with Python and Flask

Create your project folder.

Create your virtual environment

Activate the virtual environment

Install flask, requests, python-dotenv

Create file app.py. I use vim.

Add this code to app.py

Create a templates folder

Create a file home.html within templates

Add this code to home.html

Your file structure should look like this.

Grab your OpenAI API key Link

Set it as an environment variable

Add this line at the end with your own api key.

This will let you use your new key.

Now let's test, you should see your api key.

Startup the app

Assuming no errors, you should see this!

What day is it?

chatGPT, create a diagram of a light switch