Skip to main content

Command Palette

Search for a command to run...

A Screenshot Is Not a Case Study Until It Explains Something

Updated
•4 min read•View as Markdown
F
I am a Fullstack Academy graduate and full-stack developer in Bergen County, New Jersey. I write practical notes on JavaScript, React, APIs, documentation, and dependable systems. I now work in film and television transportation through Teamsters Local 817, building websites and software around my production schedule. Earlier water-treatment field work shaped my approach to troubleshooting, safety, and communication. My projects include Redeemed by Casper, Il Veliero, Greater Expectation, Jukebox Pro, and Book Buddy. The Isaac Wright Jr. advocacy website is in development with his knowledge and approval. Project notes: https://franksmithlll.com/projects. I hold a CDL Class A with Tanker and Passenger endorsements.

A project image answers one narrow question: what did this interface look like in this state? It does not tell me whether an API request succeeded, whether a keyboard user can complete a task, or whether the project is running in production.

When I prepare a developer case study, I try to keep those evidence types separate. Here is a practical way to review one screenshot before it becomes part of a technical article.

Start with one image and one defensible claim

For this exercise, I use the Book Buddy catalog screenshot from my portfolio. My Book Buddy workflow notes describe the React and Vite client, catalog browsing, and API-backed account actions.

The defensible image claim is simple: the screenshot shows a catalog interface. The technology claim belongs to the repository and technical notes. The behavioral claim needs a workflow check. Keeping those three statements separate makes the writing more precise.

A screenshot of a reservation button, for example, would not establish that the reservation succeeded. I would need to inspect the resulting state and relevant request behavior before writing that conclusion. This is a testing example, not a claim that this particular capture demonstrates a completed reservation.

Make a small evidence record

I use a short record rather than a long technology list:

  • Visible state: What can a reader actually see?
  • Implementation source: Which file or repository supports the technical explanation?
  • Behavioral check: What action and resulting state would verify the workflow?
  • Limit: What does this evidence not establish?

For the catalog image, the record can say that the visible interface is shown and that the implementation is discussed in the linked workflow notes. It must leave production reliability, adoption, and accessibility conformance unclaimed. None of those follows from a polished capture.

This record is useful during review because another developer can challenge a specific statement instead of guessing what the image was meant to prove.

Give the caption and alternative text separate jobs

A possible caption is: "Book Buddy's catalog interface provides a visual reference for the React and API workflow discussed in the project notes."

The alternative text can be shorter: "Book Buddy book catalog interface." I would adjust it to the image's actual content and the surrounding explanation. I would not add invisible features or a list of location keywords.

These are proposed descriptions for this exercise, not evidence that every existing page already uses identical wording. The caption connects the image to the argument. The alternative text supplies the meaningful visual information when the image is unavailable to the reader.

Check the image in its real reading context

The source file is not the final reading experience. I check whether the screenshot remains legible at the width used by the article. When fine interface text becomes too small, a link to the full-size image is more useful than pretending the small preview explains everything.

I also check that the image is followed by the relevant explanation, rather than separated from it by unrelated paragraphs. On my own HTML pages, explicit width and height reserve space before loading. On a publishing platform, I review the rendered result instead of assuming that its editor preserves every layout detail.

Before uploading any capture, I inspect it for private information. An authenticated dashboard, customer record, browser tab, or secret in a code editor does not belong in a public case study. A safe public interface is usually enough to explain the decision.

Know when the right image is no image

An API authorization rule is often better explained with a small request-and-response example or a link to a test than with an unrelated dashboard screenshot. I do not add an image merely because an article has space for one.

The same principle applies to unfinished work. A capture can be labeled as a development preview, but it cannot replace a clear statement of what remains incomplete.

My final review question is: could another person tell exactly which claim each piece of evidence supports? If the answer is no, I narrow the claim or improve the source. That gives technical readers something they can evaluate, not just something attractive to scroll past.

This is a focused companion to my full accessible-case-study article. You can also review my project portfolio and GitHub repositories.

I am Frank Smith III, a full-stack developer and Fullstack Academy graduate in Bergen County, New Jersey. My field-operations work reinforces the value of documentation that makes the next person's review easier.