Cards Documentation

Overview

Cards is short for Card Against Developers. This project is not affiliated with the popular "Cards Against" card game in any other way.

Cards started out as a simple question: Can I produce a simple HTML + CSS + JS web app that would run in nearly any browser and not require ANY backend services.

How it's Made

HTML + CSS + JS

The goal was to build something that would function without a backend. There are plenty of frameworks like Node.Js and Ruby on Rails that can easily handle this prototype. I built a few prototypes that you can find on the GitLab project space.

My other constraint was no additional frameworks, only native HTML, CSS and JavaScript that is supported by W3C standards. I painted myself into a corner intentionally. The purpose was to force AI, in this case Claude 4.6 to pull every obscure standard and to iterate from scratch.

Because of this you have an extremely light weight web app that runs in most any browser, including Safari. In fact most of these Most technical "tricks" have been supported since 2015.

AI Driven Design

In addition to Claude I used a mix of Perplexity Sonar and xAI's Grok to develop the idea. I also used Meta.ai for card art generation. The typical workflow was:

                            graph TD
                            A[Ideation - Grok] --> B[Prompt Refinement - Sonar]
                            B --> C[Image Generation - Meta AI]
                            C --> D{Acceptable?}
                            D -->|Yes| E[Ship It!]
                            D -->|No| B
                            

By far the most enjoyable part of the process was working with my AI colleagues on concept and design. Grok far exceeds the pack in the ability to respond and iterate on human ideas. I wouldn't call it reasoning, more of a high-tech rubber duck session.🦆

KEY FEATURES

• Display one card at a time: front shows the term, back shows the definition or description.
• Tap or click to flip, with a simple animation or button-driven reveal.
• Navigation controls for Next, Previous, and optional Shuffle/Random.
• Optional basic progress tracking such as cards seen and simple categories for future expansion.
• Data backed by a curated list of Agile terms and definitions sourced from reputable glossaries.

Roadmap

This project was for funsies, but I felt it at least deserved a road map. With the help of my virtual team members, we were able to arrive at the following:

• Static HTML/CSS/JavaScript prototype (completed)
• Alpha launch of AGILE cards (in progress)
• Develop more card sets with unique AI generated art
• Beta testing, feedback, improvement, and iterative releases

Open for extension but closed for modification

I intentionally set this project up as open source since 95% of the code is generated by AI. Per the US copyright office this means that, presently, the code is un-copyrightable.

Extend It

Cards use a JSON-like structure to keep imports and integrations straightforward. Future plans include other sets of card definitions, each with a different theme and unique AI generated artwork.

{
  "term": "Product Backlog",
  "definition": "Prioritized list of features, user stories, and bug fixes maintained by the Product Owner.",
  "category": "Scrum"
}

Each card includes a term, a definition as a short paragraph or bullet list, and an optional category such as Scrum, General, or XP.

Deploy It

You can easily deploy this website to any static site you choose. I prefer to use an AWS static S3 site + CloudFront for caching. When setting up the new site the AI suggested that I also clear the CloudFront cache via script.💡

    #!/bin/bash
    BUCKET="bucketname"
    DIST_ID="cloudfront id"

    echo "Deploying to S3..."
    aws s3 sync ./src s3://$BUCKET/ --delete

    echo "Invalidating CloudFront cache..."
    aws cloudfront create-invalidation --distribution-id $DIST_ID --paths "/*"

    echo "Done! https://yourwebsite.dev/"

Etcetera, etcetera

The Opinionated Part

As part of the process (and we trust the process) I simulated a lightweight project management strategy that leveraged two pretty awesome tools.

The first is Notion, which I've used professional and absolutely love. The creativeness of their product team really shines through. It's easy to use and has lot of nifty features, like linked databases, that competitors can only dream of. (Public Wiki)

I also did a test drive of Basecamp, a product from 37 Signals. I'll admit I'm a paying customer of the Hey Mail system and I've followed DHH as a racing driver longer than as the godfather of Rails ecosystem. Oh and I'm a recovering Windows default boot addict thanks to his Omarchy linux creation.

Finally, I'm hosting the project repositories on GitLab. I'm no Microsoft doomer but they have a bad habit of buying something awesome and letting it slide toward mediocrity. Mid, at best as my son would say.

The Demo

If you made it this far and didn't notice the large orange 🔥 Live Demo button at the top of the page you can always find the latest iteration at https://cards.cloudshock.dev/. I push when I have something worth showing, so stay tuned. If you are on the socials give me a follow the latest updates.