\n Software Design Red Flags\n

\n Flip the card to see the description of each red flag\n

\n\n

\n Loading...\n

Click to flip

Click to flip back

\n\n

\n \n Previous\n \n

\n 0 / 0\n

\n \n Next\n \n

\n\n

\n \n Shuffle Cards\n \n \n Reset Order\n \n

\n\n \n\n \n \n",[],[151,170],[151],{"_102":180,"_95":181,"_152":182,"_154":-5,"_155":137,"_156":173,"_158":159,"_104":183,"_99":32,"_161":174,"_163":184,"_164":22,"_165":-5,"_166":185,"_98":186},"f45f6908-351d-11f0-9433-9e149126039e","README.md","f45f6a0c-351d-11f0-9433-9e149126039e",["D",1747706321863],"# Software Design Red Flags Flashcard App\n\nA simple flashcard application to help learn about common software design red flags.\n\n## Features\n\n- Interactive flashcards with flip animation\n- Navigation between cards (previous/next)\n- Progress tracking\n- Shuffle functionality\n- Keyboard navigation (arrow keys and space/enter)\n- Responsive design\n\n## How to Use\n\n1. Click on a card to flip it and see the description\n2. Use the \"Previous\" and \"Next\" buttons to navigate between cards\n3. Use the \"Shuffle Cards\" button to randomize the order\n4. Use the \"Reset Order\" button to restore the original order\n5. Track your progress with the progress bar\n\n## Keyboard Shortcuts\n\n- Left Arrow: Previous card\n- Right Arrow: Next card\n- Space or Enter: Flip the current card\n\n## Technical Details\n\n- Built with vanilla JavaScript and Tailwind CSS (via CDN)\n- Uses Hono for the backend server\n- Data stored in a JSON file\n- Responsive design works on mobile and desktop\n\n## File Structure\n\n- `/index.ts` - HTTP trigger to serve the app\n- `/data.json` - JSON data containing the red flags\n- `/frontend/index.html` - Main HTML file with embedded JavaScript and CSS",[],[181],{"_102":188,"_95":189,"_152":190,"_154":-5,"_155":137,"_156":191,"_158":159,"_104":192,"_99":32,"_161":174,"_163":193,"_164":22,"_165":-5,"_166":194,"_98":195},"ca241bf2-351d-11f0-b104-9e149126039e","data.json","ca241cb0-351d-11f0-b104-9e149126039e",1,["D",1747706251011],"{\n \"redFlags\": [\n {\n \"title\": \"Shallow Module\",\n \"description\": \"A shallow module is one whose interface is complicated relative to the functionality it provides. Shallow modules don't help much in the battle against complexity, because the benefit they provide (not having to learn about how they work internally) is negated by the cost of learning and using their interfaces. Small modules tend to be shallow.\"\n },\n {\n \"title\": \"Information Leakage\",\n \"description\": \"Information leakage occurs when the same knowledge is used in multiple places, such as two different classes that both understand the format of a particular type of file.\"\n },\n {\n \"title\": \"Temporal Decomposition\",\n \"description\": \"In temporal decomposition, execution order is reflected in the code structure: operations that happen at different times are in different methods or classes. If the same knowledge is used at different points in execution, it gets encoded in multiple places, resulting in information leakage.\"\n },\n {\n \"title\": \"Overexposure\",\n \"description\": \"If the API for a commonly used feature forces users to learn about other features that are rarely used, this increases the cognitive load on users who don't need the rarely used features.\"\n },\n {\n \"title\": \"Pass-Through Method\",\n \"description\": \"A pass-through method is one that does nothing except pass its arguments to another method, usually with the same API as the pass-through method. This typically indicates that there is not a clean division of responsibility between the classes.\"\n },\n {\n \"title\": \"Repetition\",\n \"description\": \"If the same piece of code (or code that is almost the same) appears over and over again, that's a red flag that you haven't found the right abstractions.\"\n },\n {\n \"title\": \"Special-General Mixture\",\n \"description\": \"This red flag occurs when a general-purpose mechanism also contains code specialized for a particular use of that mechanism. This makes the mechanism more complicated and creates information leakage between the mechanism and the particular use case: future modifications to the use case are likely to require changes to the underlying mechanism as well.\"\n },\n {\n \"title\": \"Conjoined Methods\",\n \"description\": \"It should be possible to understand each method independently. If you can't understand the implementation of one method without also understanding the implementation of another, that's a red flag. This red flag can occur in other contexts as well: if two pieces of code are physically separated, but each can only be understood by looking at the other, that is a red flag.\"\n },\n {\n \"title\": \"Comment Repeats Code\",\n \"description\": \"If the information in a comment is already obvious from the code next to the comment, then the comment isn't helpful. One example of this is when the comment uses the same words that make up the name of the thing it is describing.\"\n },\n {\n \"title\": \"Implementation Documentation Contaminates Interface\",\n \"description\": \"This red flag occurs when interface documentation, such as that for a method, describes implementation details that aren't needed in order to use the thing being documented.\"\n },\n {\n \"title\": \"Vague Name\",\n \"description\": \"If a variable or method name is broad enough to refer to many different things, then it doesn't convey much information to the developer and the underlying entity is more likely to be misused.\"\n },\n {\n \"title\": \"Hard to Pick Name\",\n \"description\": \"If it's hard to find a simple name for a variable or method that creates a clear image of the underlying object, that's a hint that the underlying object may not have a clean design.\"\n },\n {\n \"title\": \"Hard to Describe\",\n \"description\": \"The comment that describes a method or variable should be simple and yet complete. If you find it difficult to write such a comment, that's an indicator that there may be a problem with the design of the thing you are describing.\"\n },\n {\n \"title\": \"Nonobvious Code\",\n \"description\": \"If the meaning and behavior of code cannot be understood with a quick reading, it is a red flag. Often this means that there is important information that is not immediately clear to someone reading the code.\"\n }\n ]\n}",[],[189],{"_102":197,"_95":198,"_152":199,"_154":-5,"_155":137,"_156":200,"_158":159,"_104":201,"_99":191,"_161":202,"_163":203,"_164":22,"_165":-5,"_166":204,"_98":205},"f74aab28-351d-11f0-8e81-9e149126039e","index.ts","d197ff0c-351d-11f0-afdf-9e149126039e",5,["D",1747706326759],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve the main HTML page\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Serve the data.json file\napp.get(\"/data.json\", async (c) => {\n const data = await readFile(\"/data.json\", import.meta.url);\n return c.json(JSON.parse(data));\n});\n\n// Serve static files from the frontend directory\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\nexport default app.fetch;",[],[198],"files",[149,168,179,187,196],"counts",{"_210":32,"_211":191,"_212":32,"_213":214},"pulls","branches","forks","envVars",{"_215":32,"_216":32},"count","emptyCount","contents",[219,222,225,228],{"_102":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":220,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":221},["D",1747706310128],[151],{"_102":180,"_95":181,"_152":182,"_154":-5,"_155":137,"_156":173,"_158":159,"_104":223,"_99":32,"_161":174,"_163":184,"_164":22,"_165":-5,"_98":224},["D",1747706321863],[181],{"_102":188,"_95":189,"_152":190,"_154":-5,"_155":137,"_156":191,"_158":159,"_104":226,"_99":32,"_161":174,"_163":193,"_164":22,"_165":-5,"_98":227},["D",1747706251011],[189],{"_102":197,"_95":198,"_152":199,"_154":-5,"_155":137,"_156":200,"_158":159,"_104":229,"_99":191,"_161":202,"_163":203,"_164":22,"_165":-5,"_98":230},["D",1747706326759],[198],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":239,"_213":244},{"_102":103,"_95":96,"_104":240,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":241,"_131":242,"_134":243,"_146":22},["D",1747706184493],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_99":136,"_95":43,"_102":137,"_138":103,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},[],"actionData","errors"]

mgmarlow

aposd-red-flags

Environment variables