Dithering Delights: Unleashing Pixel Art with "Dither My Stuff"

#javascript #webdev #programming

Hey everyone!

I'm excited to share a personal project I've been tinkering with: Dither My Stuff! It's a web-based playground for applying cool dithering effects, experimenting with color palettes, and diving into pixel aesthetics – all in real time. Think retro filters meets modern web tech!

What is Dithering, Anyway?

If you're new to the concept, dithering is a technique used to create the illusion of color depth with a limited palette. It's how old-school games and images managed to look so vibrant on displays with only a few colors. And honestly, it still looks awesome today!

With Dither My Stuff, I wanted to build a fun, interactive tool that lets anyone explore this visual magic. You can upload any image and instantly transform it with classic dithering algorithms, custom palettes, and more.

Before dithering

After dithering

Why "Dither My Stuff"? (My Motivation)

Beyond just creating a cool tool, this project was a fantastic opportunity for me to:

Solidify my frontend and design skills: It was a blast focusing on a user-friendly interface and a visually appealing experience.
Dive into collaborative development: I built this project with extensibility in mind, making it easy for others to contribute. (More on this later!)
Practice CI/CD automation: Setting up continuous integration for this project was a key learning goal for me, and it's been incredibly rewarding to see it in action.

A Peek at the Pixel-Powered Features

Dither My Stuff comes packed with features to unleash your inner pixel artist:

Upload any image: Transform your photos, illustrations, or anything you can imagine!
Choose classic dithering algorithms: Experiment with different techniques like Floyd-Steinberg, Atkinson, and more.
Pick from curated palettes: Go retro with GameBoy, get moody with Sepia, or explore vibrant Cyberpunk tones.
Add your own custom palettes: Got a specific color scheme in mind? Just input your hex colors!
Toggle grayscale mode: See how your images look with just black and white pixels.
Control color distance metrics: Fine-tune how colors are matched for unique effects.
Algorithm-specific tweaks: Adjust diffusion, scaling, and other parameters for precise control.
Export the final image: Save your dithered masterpieces exactly as you see them!

Under the Hood: The Tech Stack

For those who love to peek behind the curtain, Dither My Stuff is built with a modern and robust tech stack:

React 18 & Vite: For a speedy and efficient development experience.
TypeScript: To ensure code quality and maintainability.
Mantine UI: For a beautiful and responsive user interface.
Canvas API: The core engine for all the image manipulation magic!

Let's Get Technical: CI/CD in Action

This project was also my playground for implementing Continuous Integration and Continuous Deployment (CI/CD). I've set up GitHub Actions to automate:

Linting and code quality checks: Every pull request goes through a rigorous linting process to maintain consistent code style.
Preview deployments: For every pull request, a live preview of the changes is automatically deployed, making reviews a breeze.
Production deployments: Once a PR is merged to main, the updated application is automatically deployed to GitHub Pages.

This automation has been a game-changer for my workflow and something I'm really proud of. It significantly speeds up development and ensures a high level of code quality.

🧪 Eslint CI Health Check

lint.yml

name: Lint
# This workflow runs ESLint to check for code quality and style issues in the repository.

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  lint:
    name: ✅ Run ESLint
    runs-on: ubuntu-latest

    steps:
      - name: ✨ Checkout Repository
        uses: actions/checkout@v4

      - name: 🛠️ Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: 'yarn'

      - name: ⬇️ Install Dependencies
        run: yarn install --frozen-lockfile

      - name: ✅ Run ESLint
        run: yarn lint

🚀 Deploy to Github Pages

deploy.yml

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    name: 🚀 Deploy to GitHub Pages
    runs-on: ubuntu-latest

    steps:
      - name: ✨ Checkout Repository
        uses: actions/checkout@v4

      - name: 🌐 Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: 'yarn'

      - name: ⬇️ Install Dependencies
        run: yarn install --frozen-lockfile

      - name: 📁 Build Project
        run: yarn build

      - name: 🚀 Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_branch: gh-pages
          publish_dir: ./dist

🔍 Pull Request Preview

preview.yml

name: Preview
# This workflow builds the project for previewing changes before merging to the main branch.

on:
  pull_request:
    branches: [main]

jobs:
  build-preview:
    name: 📁 Build for Preview
    runs-on: ubuntu-latest

    steps:
      - name: ✨ Checkout Repository
        uses: actions/checkout@v4

      - name: 🌐 Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: 'yarn'

      - name: ⬇️ Install Dependencies
        run: yarn install --frozen-lockfile

      - name: 📁 Build Project for PR
        run: yarn build

Contribution Welcome! Let's Build Something Awesome Together

One of my main goals for Dither My Stuff was to make it a collaborative project. I truly believe that open-source contributions make projects stronger and more diverse. Whether you're looking to add new features, improve existing ones, or just fix a bug, your help is super welcome!

How to Contribute:

Fork the repository: Start by forking the project on GitHub.
Clone it locally: git clone https://github.com/luismtns/dither-my-stuff.git
Install dependencies: yarn
Start hacking: yarn dev

I've tried to make the codebase as clear and approachable as possible, and I'm always happy to help new contributors get started. Don't hesitate to open an issue or a discussion if you have questions or ideas!