[ { "term": "Above the Fold", "category": "Data", "definition": "The portion of a webpage visible without scrolling. Critical for first impressions, this area typically contains the primary headline, value proposition, and main call to action.", "example": "Keep the headline, subhead, and primary CTA above the fold so users see them immediately.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "
Above the fold ↑

Ship products faster

The best teams use our platform to go from idea to launch in days.

Below the fold ↓

Secondary content, social proof, features...

", "area": "UX & Layout" }, { "term": "Accordion", "category": "UI Component", "definition": "A vertically stacked list of collapsible sections. Clicking a header expands its content while optionally collapsing others. Useful for FAQs and dense content.", "example": "Create an accordion for the FAQ section where only one answer is visible at a time.", "discipline": [ "Composition", "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n What is your return policy?\n

You can return items within 30 days of purchase for a full refund.

\n
\n
\n How long does shipping take?\n

Standard shipping takes 5-7 business days.

\n
\n
\n Do you ship internationally?\n

Yes, we ship to over 50 countries worldwide.

\n
\n
", "area": "Interface" }, { "term": "Add Human Interest", "category": "Technique", "definition": "People add life and scale.", "example": "Lone pedestrian traversing historic bridge.", "discipline": [ "Composition" ], "medium": [ "Photo", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Aesthetic Photography", "category": "Style/Aesthetic", "definition": "Style-forward images using color/lighting/composition.", "example": "Low-key gritty palette with desaturation.", "discipline": [ "Style", "Color", "Lighting" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Aesthetics" }, { "term": "Affordance", "category": "Data", "definition": "A visual or interactive cue that suggests how an element should be used. Good affordances make interfaces intuitive by signaling actions like clicking, dragging, or scrolling.", "example": "The raised appearance of that button provides strong affordance—users instinctively know to click it.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "", "area": "UX & Layout" }, { "term": "API", "category": "Data", "definition": "Application Programming Interface. A set of rules and protocols that lets different software applications communicate with each other. APIs define how requests and responses should be structured so one system can use another's functionality.", "example": "Use the Stripe API to process payments in your app...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "fetch('https://api.example.com/movies')\n .then(res => res.json())\n .then(data => console.log(data));", "area": "Web & Code" }, { "term": "API Endpoint", "category": "Data", "definition": "A specific URL path that an API exposes for clients to interact with. Each endpoint typically maps to a particular resource or action (e.g., /api/users or /api/movies/search).", "example": "Call the /api/movies endpoint to get a list of all movies...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// Base URL + endpoint\nhttps://api.example.com/v1/movies\nhttps://api.example.com/v1/movies/42\nhttps://api.example.com/v1/movies/search?q=inception", "area": "Web & Code" }, { "term": "API Gateway", "category": "Data", "definition": "A single entry point that sits in front of multiple back-end services and routes requests to the right one. It handles cross-cutting concerns like authentication, rate limiting, logging, and request transformation in one place.", "example": "Route all API requests through an API gateway that handles auth before forwarding to services...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "# API Gateway routing\n/api/auth/ → Auth Service (port 3001)\n/api/users/ → User Service (port 3002)\n/api/payments/* → Payment Service (port 3003)\n\nAll routes: rate limiting, JWT validation, logging", "area": "Web & Code" }, { "term": "API Key", "category": "Data", "definition": "A unique string used to identify and authenticate a client making API requests. API keys are simpler than OAuth but less secure — they act as a basic password for machine-to-machine communication.", "example": "Pass your API key in the request header to authenticate with the service...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// Using an API key in a request header\nfetch('https://api.openai.com/v1/chat/completions', {\n headers: {\n 'Authorization': 'Bearer sk-abc123...',\n 'Content-Type': 'application/json'\n }\n});", "area": "Web & Code" }, { "term": "Architecture Photography", "category": "Technique", "definition": "Depicting buildings with attention to lines/composition.", "example": "Tall structure shot with corrected verticals.", "discipline": [ "Composition" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Asymmetric Layout", "category": "Technique", "definition": "A deliberately unbalanced composition where elements are not mirrored or evenly distributed. Creates visual interest and directs attention through intentional imbalance.", "example": "Design an asymmetric layout with a large image taking 60% width and text content in the remaining 40%.", "discipline": [ "UI/UX", "Composition", "Style" ], "medium": [ "Code" ], "essential": false, "sample": "

Big Left

The dominant side draws focus, creating tension and movement.

Small Top
Taller Bottom
", "area": "UX & Layout" }, { "term": "Aurora UI", "category": "Style/Aesthetic", "definition": "A design trend using flowing gradient backgrounds that mimic the northern lights, with smooth color transitions and ethereal, glowing effects.", "example": "Add an aurora gradient background with purple, blue, and teal flowing behind the hero section.", "discipline": [ "UI/UX", "Style", "Color" ], "medium": [ "Code" ], "essential": false, "sample": "
✨

Aurora Card

Flowing gradients with ethereal glow effects.

", "area": "Aesthetics" }, { "term": "Authentication", "category": "Technique", "definition": "The process of verifying who a user or system is — confirming identity. Common methods include passwords, API keys, OAuth tokens, and biometrics. Answers the question: 'Who are you?'", "example": "Add authentication to your API so only registered users can access it...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// Bearer token authentication\nfetch('/api/data', {\n headers: {\n 'Authorization': 'Bearer eyJhbGciOi...'\n }\n});", "area": "Web & Code" }, { "term": "Authorization", "category": "Technique", "definition": "The process of determining what an authenticated user or system is allowed to do. It controls access to resources based on roles, permissions, or policies. Answers the question: 'What can you do?'", "example": "Set up role-based authorization so only admins can delete records...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// Middleware that checks user role\nfunction requireAdmin(req, res, next) {\n if (req.user.role !== 'admin') {\n return res.status(403).json({ error: 'Forbidden' });\n }\n next();\n}", "area": "Web & Code" }, { "term": "Avatar", "category": "UI Element", "definition": "A circular or rounded image representing a user, typically showing a profile photo or initials as a fallback. Often used in headers, comments, and user lists.", "example": "Display user avatars in a stacked row showing who else is viewing the document.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
JD
\n
\n
👤
\n
", "area": "Interface" }, { "term": "Background Context", "category": "Technique", "definition": "Slightly blurred backdrop that identifies setting.", "example": "Seagull with recognizable city street behind.", "discipline": [ "Composition" ], "medium": [ "Photo", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Badge", "category": "UI Element", "definition": "A small visual indicator attached to another element, typically showing a count, status, or label. Often used for notifications, categories, or unread items.", "example": "Add a red notification badge to the inbox icon showing the unread message count.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
New✓ VerifiedPending🔔3
", "area": "Interface" }, { "term": "Balance Elements", "category": "Technique", "definition": "Secondary subject counterweights off-center primary.", "example": "Lamppost balanced by distant Eiffel Tower.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Bento Grid", "category": "Style/Aesthetic", "definition": "A layout style inspired by Japanese bento boxes, featuring asymmetric grids with varied card sizes that create visual interest while maintaining organization. Popular for dashboards and portfolios.", "example": "Design a bento grid layout for the features section with mixed-size cards highlighting different product capabilities.", "discipline": [ "UI/UX", "Style", "Composition" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n

Revenue

\n
$42.5k
\n
\n
\n

Users

\n
1,234
\n
\n
\n

Growth

\n
+24%
\n
\n
", "area": "Aesthetics" }, { "term": "Bento Menu", "category": "UI Element", "definition": "Grid-based menu of actions or links.", "example": "App home screen with tiled feature cards.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Black & White Photography", "category": "Technique", "definition": "Monochrome tonality emphasizing contrast/form.", "example": "Converting harsh daylight scenes to emphasize texture.", "discipline": [ "Style", "Color" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Body Copy", "category": "Data", "definition": "The main readable text of a page, typically set at 14–18px. Prioritizes legibility and comfort over visual flair, with optimal line length and spacing.", "example": "Set the body copy at 16px with a 65-character line length for comfortable reading.", "discipline": [ "Typography", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "

The Art of Body Copy

By Design Weekly · 5 min read

Good body copy is invisible. It doesn't call attention to itself—it simply communicates. Set between 14 and 18 pixels, with a line height of 1.5 to 1.7 and a measure of 45–75 characters, it creates a rhythm that keeps the reader moving.

Serif fonts like Georgia add warmth and tradition. Sans-serif fonts like Inter feel modern and clean. The best body copy pairs the right typeface with generous spacing.

", "area": "Typography" }, { "term": "Box Shadow", "category": "Technique", "definition": "A CSS effect that adds a shadow around an element's frame, creating depth and separation from the background. Can be customized with offset, blur, spread, and color values.", "example": "Add a subtle box shadow to the card container: 0 4px 12px rgba(0,0,0,0.1).", "discipline": [ "Typography", "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n

Box Shadow

\n

A subtle shadow adds depth

\n
\n
", "area": "Typography" }, { "term": "Brand Photography", "category": "Technique", "definition": "Visuals expressing a company's identity.", "example": "Lifestyle images aligning with brand values.", "discipline": [ "Style" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Breadcrumb", "category": "UI Component", "definition": "A secondary navigation pattern that shows the user's current location within a site hierarchy, typically displayed as a horizontal trail of links.", "example": "Add a breadcrumb above the product title so users can easily navigate back to the category page.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "", "area": "Interface" }, { "term": "Break the Pattern", "category": "Technique", "definition": "Single anomaly to create emphasis.", "example": "One red candle among vanilla ones.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Brutalism", "category": "Style/Aesthetic", "definition": "A raw, bold web design style characterized by stark typography, unconventional layouts, clashing colors, and intentionally rough or unpolished elements. Rejects traditional design conventions.", "example": "Design a brutalist portfolio site with oversized monospace type, harsh contrasts, and asymmetric layouts.", "discipline": [ "UI/UX", "Style", "Typography" ], "medium": [ "Code" ], "essential": false, "sample": "
\n

RAW DESIGN

\n

Unpolished, bold, and intentionally rough aesthetics.

\n \n
", "area": "Aesthetics" }, { "term": "Button", "category": "UI Element", "definition": "Clickable control to trigger actions.", "example": "\"Submit\" on a checkout form.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "
\n \n \n \n \n
", "area": "Interface" }, { "term": "Caching", "category": "Technique", "definition": "Storing a copy of data in a faster-access location so future requests can be served without hitting the original source. Reduces latency, server load, and API costs. Common tools include Redis, CDNs, and browser caches.", "example": "Cache API responses in Redis so repeated queries don't hit the database...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// Redis caching example\nconst cached = await redis.get('movies:top10');\nif (cached) return JSON.parse(cached);\n\nconst movies = await db.query('SELECT * FROM movies LIMIT 10');\nawait redis.set('movies:top10', JSON.stringify(movies), 'EX', 3600);\nreturn movies;", "area": "Web & Code" }, { "term": "Card", "category": "UI Component", "definition": "A rectangular container that groups related information and actions about a single subject. Cards are modular, scannable, and work well in grid layouts.", "example": "Display each blog post as a card with thumbnail, title, excerpt, and publish date.", "discipline": [ "Composition", "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "
\n
\n
\n

Premium Plan

\n

Everything you need to grow your business.

\n \n
\n
", "area": "Interface" }, { "term": "Carousel", "category": "UI Component", "definition": "A slideshow component that cycles through multiple pieces of content—images, cards, or text—in a horizontal or vertical sequence. Users can navigate manually or let it auto-advance.", "example": "Add a testimonial carousel that shows one quote at a time with navigation arrows and dots.", "discipline": [ "Animation", "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
⭐

“This product completely changed how our team works. We shipped 3x faster.”

— Sarah Chen, CTO

", "area": "Interface" }, { "term": "Centered Composition & Symmetry", "category": "Technique", "definition": "Balanced subject placement exploiting reflection/axes.", "example": "Bridge centered with symmetrical water reflection.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "CFG Scale", "category": "Parameter", "definition": "Classifier-Free Guidance scale. Controls how closely the AI follows your prompt versus allowing creative freedom. Higher values = stricter adherence; lower values = more variation.", "example": "\"Set CFG scale to 7 for balanced creativity, or 12+ for precise prompt matching.\"", "discipline": [ "Prompting", "Technical" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": true, "sample": "", "area": "Aesthetics" }, { "term": "Checkbox", "category": "UI Element", "definition": "Square input for multi-select options.", "example": "Choose interests: Art, Music, Sports.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Chiaroscuro", "category": "Style/Aesthetic", "definition": "A dramatic lighting technique using strong contrasts between light and dark areas. Originally from Renaissance painting, now a popular prompt term for moody, cinematic imagery.", "example": "\"Portrait with chiaroscuro lighting, deep shadows, Caravaggio-inspired\"", "discipline": [ "Lighting", "Style", "Composition" ], "medium": [ "Photo", "Illustration" ], "essential": false, "sample": "

Chiaroscuro

Dramatic contrast. Light emerges from darkness. Caravaggio-inspired depth.

", "area": "Aesthetics" }, { "term": "Chip", "category": "UI Element", "definition": "A compact, pill-shaped element used to display tags, filters, or selections. Often dismissible with an X button and can be interactive for filtering content.", "example": "Show selected filters as chips above the product grid with an X to remove each filter.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
Design ✕🎨 Color ✕Typography ✕Layout+ Add filter
", "area": "Interface" }, { "term": "Chunking", "category": "Technique", "definition": "Grouping related pieces of information into digestible units (chunks) to aid memory and comprehension. Common examples include phone numbers (555-123-4567) and card number fields split into groups of 4.", "example": "Apply chunking to the pricing table: group features under clear category headers like 'Collaboration,' 'Security,' and 'Support.'", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "
\n
\n

Collaboration

\n \n
\n
\n

Security

\n \n
\n
", "area": "UX & Layout" }, { "term": "CI/CD", "category": "Technique", "definition": "Continuous Integration / Continuous Deployment. A practice where code changes are automatically tested (CI) and deployed (CD) through a pipeline. Tools like GitHub Actions, Jenkins, and CircleCI automate the build-test-deploy cycle.", "example": "Set up a CI/CD pipeline so every push to main automatically runs tests and deploys...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "# GitHub Actions CI/CD workflow\nname: Deploy\non:\n push:\n branches: [main]\njobs:\n deploy:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - run: npm install\n - run: npm test\n - run: npm run build\n - run: deploy-to-production", "area": "Web & Code" }, { "term": "Claymorphism", "category": "Style/Aesthetic", "definition": "A soft, playful design style featuring 3D clay-like elements with rounded edges, pastel colors, and subtle inner shadows. Creates a tactile, approachable feel.", "example": "Create claymorphic buttons and icons with soft rounded shapes and pastel gradients for a friendly app interface.", "discipline": [ "UI/UX", "Style", "3D" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
🫧

Clay Card

Soft, tactile shapes with pastel tones.

", "area": "Aesthetics" }, { "term": "Cognitive Load", "category": "Data", "definition": "The mental effort required to process information or complete a task. Good design minimizes extraneous cognitive load by reducing clutter, using familiar patterns, and presenting information clearly.", "example": "Reduce cognitive load: limit the form to 5 fields max, use inline validation, and pre-fill defaults where possible.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "
\n
\n

High Load ✗

\n

Too many options, colors, and dense text overwhelm users.

\n
\n
\n

Low Load ✓

\n

Simple choices, clear hierarchy, and breathing room.

\n
\n
", "area": "UX & Layout" }, { "term": "Color Combinations (Complementary)", "category": "Technique", "definition": "Use color theory for striking contrast.", "example": "Yellow-lit façade vs deep blue sky.", "discipline": [ "Composition", "Color" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Column", "category": "Data", "definition": "The vertical slices of a table, also called a field or attribute. Columns define the type of data stored (e.g., poster, rating, runtime).", "example": "Select the summary and rating columns... / Filter by the platforms field...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "SELECT summary, rating FROM movie_cache;", "area": "Web & Code" }, { "term": "Command Palette", "category": "UI Component", "definition": "A searchable overlay triggered by a keyboard shortcut (often Cmd+K or Ctrl+K) that lets users quickly navigate, search, or execute actions without using the mouse.", "example": "Build a command palette that opens on Cmd+K, showing recent pages, quick actions, and a search field for site-wide navigation.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n
\n 🔍\n \n Esc\n
\n
\n
\n 📄 New Document⌘N\n
\n
\n 🔍 Search Files⌘F\n
\n
\n
\n
", "area": "Interface" }, { "term": "Comments", "category": "UI Component", "definition": "Chronological user-submitted messages.", "example": "Blog post discussion thread.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Commercial Photography", "category": "Technique", "definition": "Product/brand-driven imagery for advertising.", "example": "Studio-lit sneaker campaign shot.", "discipline": [ "Style" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Conceptual Photography", "category": "Technique", "definition": "Idea-led visuals summarizable in one concept.", "example": "\"Swimming across the street\" surreal scene.", "discipline": [ "Style", "Composition" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Continuity Editing", "category": "Technique", "definition": "Seamless time/space/action matching across cuts.", "example": "Close-up to wide as character stands smoothly.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Contrast Photography", "category": "Technique", "definition": "High dynamic difference between blacks/whites.", "example": "Stark shadow/highlight street scene.", "discipline": [ "Lighting", "Style" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Cookie Banner", "category": "UI Component", "definition": "A notification bar or modal informing users about cookie usage and requesting consent. Typically fixed to the bottom or top of the viewport with accept/reject options.", "example": "Add a cookie banner at the bottom of the page with 'Accept All,' 'Manage Preferences,' and a link to the privacy policy.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n 🍪 We use cookies to improve your experience. Learn more\n
\n \n \n
\n
\n
", "area": "Interface" }, { "term": "Corporate Clean", "category": "Style/Aesthetic", "definition": "A professional, polished aesthetic using structured layouts, conservative colors, ample white space, and readable typography. Conveys trust, stability, and competence.", "example": "Design a corporate clean homepage with a blue accent color, professional photography, and clear navigation.", "discipline": [ "UI/UX", "Style", "Composition" ], "medium": [ "Code" ], "essential": false, "sample": "
A
Acme Corporation
Enterprise Solutions

Professional Service

Trusted by 500+ companies worldwide. Clear value, proven results.

", "area": "Aesthetics" }, { "term": "CORS", "category": "Data", "definition": "Cross-Origin Resource Sharing. A browser security mechanism that controls which websites can make requests to your API. By default, browsers block requests from a different domain — CORS headers tell the browser which origins are allowed.", "example": "Enable CORS on your API so your front-end app on a different domain can access it...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// Express CORS setup\nimport cors from 'cors';\napp.use(cors({\n origin: 'https://myapp.com',\n methods: ['GET', 'POST'],\n credentials: true\n}));", "area": "Web & Code" }, { "term": "Cross Dissolve", "category": "Technique", "definition": "Gradual blend from one shot to another.", "example": "Slow dissolve between locations in The Shining.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Cross-Cutting", "category": "Technique", "definition": "Interleaving simultaneous events to build tension.", "example": "Rescue racing vs. house fire.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "CTA Button", "category": "UI Element", "definition": "A prominent button designed to drive a specific user action. Typically styled distinctively with contrasting colors, larger size, or visual emphasis.", "example": "Add a primary CTA button with 'Start Free Trial' in the hero section.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "

CTAs use contrast, size, and urgency to drive action.

", "area": "Interface" }, { "term": "Cutaway (Insert)", "category": "Technique", "definition": "Shot that departs main action for detail/context.", "example": "Insert of a letter inside a drawer.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Cyberpunk", "category": "Style/Aesthetic", "definition": "A futuristic aesthetic combining neon colors (pink, cyan, yellow) against dark backgrounds with glitch effects, tech imagery, angular shapes, and dystopian vibes.", "example": "Design a cyberpunk gaming site with neon pink accents, glitch animations, and a dark grid background.", "discipline": [ "UI/UX", "Style", "Color" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
⚡

Neon_Card

SYSTEM://OVERRIDE. Dark grids, neon glow, dystopian future.

", "area": "Aesthetics" }, { "term": "Dark Mode", "category": "Style/Aesthetic", "definition": "A color scheme using dark backgrounds with light text and UI elements. Reduces eye strain in low light, saves battery on OLED screens, and creates a sleek, modern appearance.", "example": "Build a dark mode dashboard with a near-black background, muted accent colors, and high-contrast text.", "discipline": [ "UI/UX", "Style", "Color" ], "medium": [ "Code" ], "essential": false, "sample": "
\n

Dark Mode Card

\n

Reduces eye strain in low-light environments.

\n \n
", "area": "Aesthetics" }, { "term": "Data Table", "category": "UI Component", "definition": "A structured table displaying rows and columns of data, often with sorting, filtering, pagination, and inline actions. Common in dashboards and admin panels.", "example": "Build a data table for orders with columns for Order ID, Customer, Status, and Date—sortable by any column with a search filter.", "discipline": [ "UI/UX" ], "medium": [ "Code", "Data Viz" ], "essential": false, "sample": "
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Order IDCustomerStatusAmount
#1234Jane CooperCompleted$249.00
#1235Wade WarrenPending$89.00
\n
", "area": "UX & Layout" }, { "term": "Data-Ink Ratio", "category": "Data", "definition": "Edward Tufte's principle that maximizes the share of ink (or pixels) devoted to displaying data versus non-data elements like borders, backgrounds, and decoration. Higher ratio means cleaner, more efficient visualizations.", "example": "Maximize the data-ink ratio: remove gridlines, use subtle axis labels, and eliminate chart borders—let the data speak.", "discipline": [ "Composition", "Style" ], "medium": [ "Code", "Data Viz" ], "essential": false, "sample": "
❌ Low Ratio
Q1Q2Q3Q4

Borders, gridlines, gradients, outlines…

✓ High Ratio
Q1Q2Q3Q4

Just the data. Clean and clear.

", "area": "UX & Layout" }, { "term": "Database", "category": "Data", "definition": "The entire collection of data. It holds all your tables, views, and stored procedures. Think of it as a warehouse that organizes everything in one place.", "example": "I am working with a database for a movie streaming app...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "CREATE DATABASE movie_app;", "area": "Web & Code" }, { "term": "Date Picker", "category": "UI Component", "definition": "A calendar-style input that lets users select a date or date range. Often includes month/year navigation and preset options like 'Today' or 'This week.'", "example": "Add a date picker to the booking form that disables past dates and highlights available slots in green.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n \n January 2026\n \n
\n
\n SMTWTFS\n 1234\n 567891011\n 12131415161718\n
\n
", "area": "Interface" }, { "term": "DDoS Attack", "category": "Data", "definition": "Distributed Denial of Service. An attack that floods a server or network with massive traffic from many sources to overwhelm it and make it unavailable to legitimate users. Mitigated with CDNs, rate limiting, and services like Cloudflare.", "example": "Put your site behind Cloudflare to protect against DDoS attacks...", "discipline": [ "Technical" ], "medium": [ "Code" ], "essential": false, "sample": "# How DDoS works (conceptual)\nNormal traffic: 100 requests/sec → Server handles fine\nDDoS attack: 1,000,000 requests/sec → Server overwhelmed\n\n# Mitigation layers:\n1. CDN / Edge network (Cloudflare, AWS Shield)\n2. Rate limiting per IP\n3. Traffic analysis & bot detection\n4. Auto-scaling infrastructure", "area": "Web & Code" }, { "term": "Decisive Moment", "category": "Technique", "definition": "Timed capture of fleeting peak action/expression.", "example": "Cyclist perfectly aligned before car reaches bridge.", "discipline": [ "Composition" ], "medium": [ "Photo", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Design System", "category": "UI Component", "definition": "A collection of reusable components, guidelines, and standards that define the visual language and interaction patterns of a product or brand. Includes tokens (colors, spacing, typography), UI components (buttons, inputs, cards), and documentation for consistent implementation across teams and platforms.", "example": "Reference the design system tokens for button colors and spacing instead of hardcoding values...", "discipline": [ "UI/UX", "Style" ], "medium": [ "Code" ], "essential": false, "sample": "
Color Tokens
Primary
Secondary
Success
Error
Typography
Heading
Body text at 16px
Caption at 13px
Components
Badge
", "area": "Interface" }, { "term": "Diagonals & Triangles", "category": "Technique", "definition": "Angled forms adding dynamic tension.", "example": "Bridge cables forming implied triangles.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Display Type", "category": "Data", "definition": "Large, decorative typography designed for headlines and short text rather than body copy. Often features unique character details that shine at bigger sizes.", "example": "Use a bold display typeface for the hero headline to create strong visual impact.", "discipline": [ "Typography", "Style" ], "medium": [ "Code" ], "essential": false, "sample": "
Display Type
Big. Bold. Beautiful.
Serif
THIN
MONO
", "area": "Typography" }, { "term": "DIY Lighting Hacks", "category": "Technique", "definition": "Low-cost setups to shape light creatively.", "example": "Homemade diffusers/reflectors for portraits.", "discipline": [ "Lighting" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Docker / Container", "category": "Data", "definition": "A container is a lightweight, standalone package that bundles an application with everything it needs to run (code, runtime, libraries). Docker is the most popular tool for building and running containers. Containers ensure your app runs the same everywhere.", "example": "Containerize your Node app with Docker so it runs identically in dev and production...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "# Dockerfile\nFROM node:20-alpine\nWORKDIR /app\nCOPY package*.json ./\nRUN npm install\nCOPY . .\nEXPOSE 3000\nCMD [\"node\", \"server.js\"]\n\n# Build and run\ndocker build -t my-app .\ndocker run -p 3000:3000 my-app", "area": "Web & Code" }, { "term": "Drop Shadow", "category": "Technique", "definition": "A visual effect that creates a shadow offset from an object, simulating light casting a shadow. Unlike box shadow, drop shadow follows the shape of the content including transparency.", "example": "Apply a drop shadow to the logo so it pops off the textured background.", "discipline": [ "Typography", "Composition" ], "medium": [ "Photo", "Illustration", "Code" ], "essential": false, "sample": "
\n
\n \n \n \n
\n

Drop shadow follows the shape

\n
", "area": "Typography" }, { "term": "Dropdown", "category": "UI Element", "definition": "List that expands to select one option.", "example": "Country selector in a profile form.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Dropdown Menu", "category": "UI Component", "definition": "A toggleable menu that expands downward when triggered, revealing a list of options or links. Common for navigation, settings, and form selects.", "example": "Add a dropdown menu under 'Products' that shows three category links on hover.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n \n
\n Electronics\n Clothing\n Home & Garden\n
\n
\n\n", "area": "Interface" }, { "term": "Döner Menu", "category": "UI Element", "definition": "Vertical three-line filters menu (varying lengths).", "example": "Filter panel icon on mobile search.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Editorial Photography", "category": "Technique", "definition": "Story-driven images for journalism/features.", "example": "Portrait that accompanies magazine profile.", "discipline": [ "Style" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Embossed Text", "category": "Technique", "definition": "A typography effect that makes text appear raised or stamped out from the surface. Achieved using carefully positioned light and dark shadows to simulate 3D depth.", "example": "Apply an embossed effect to the logo text for a premium, tactile appearance.", "discipline": [ "Typography", "Style" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
\n

EMBOSSED

\n
", "area": "Typography" }, { "term": "Empty State", "category": "UI Component", "definition": "A placeholder view shown when a list, page, or section has no content to display. Typically includes an illustration, message, and a call to action.", "example": "Design an empty state for the projects list with an illustration and a 'Create your first project' button.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
\n
📬
\n

No messages yet

\n

When you receive messages, they'll appear here.

\n \n
", "area": "Interface" }, { "term": "Encryption", "category": "Technique", "definition": "The process of converting readable data (plaintext) into an unreadable format (ciphertext) using an algorithm and key. Only someone with the correct key can decrypt it. Protects data at rest (stored) and in transit (moving over a network).", "example": "Encrypt user data at rest using AES-256 before storing it in the database...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// Node.js encryption example\nimport crypto from 'crypto';\nconst key = crypto.randomBytes(32);\nconst iv = crypto.randomBytes(16);\nconst cipher = crypto.createCipheriv('aes-256-cbc', key, iv);\nlet encrypted = cipher.update('secret data', 'utf8', 'hex');\nencrypted += cipher.final('hex');", "area": "Web & Code" }, { "term": "Environment Variable", "category": "Data", "definition": "A key-value pair stored outside your code, typically in the operating system or a .env file. Used to keep sensitive data (API keys, database URLs) out of source code and to configure apps differently per environment.", "example": "Store your database password in an environment variable instead of hardcoding it...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "# .env file\nDATABASE_URL=postgres://user:pass@localhost:5432/mydb\nAPI_KEY=sk-abc123\nNODE_ENV=production\n\n# Access in Node.js\nconst dbUrl = process.env.DATABASE_URL;", "area": "Web & Code" }, { "term": "Event Photography", "category": "Technique", "definition": "Live coverage of non-repeatable moments.", "example": "Candid toast at a gala.", "discipline": [ "Technical" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "F-Pattern", "category": "Technique", "definition": "A reading pattern where users scan horizontally across the top, then move down and scan a shorter horizontal line, creating an F-shape. Common for text-heavy pages like blogs and search results.", "example": "Structure the article page for F-pattern scanning with a strong headline, bold subheads, and left-aligned content.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": false, "sample": "

Users scan horizontally first across the top

Then they drop down and scan a shorter horizontal line. This creates the distinctive F-shape pattern.

Second scan line is shorter

Attention fades as the eye moves down the page.

By here, users mostly scan the left edge only. Bold subheads and front-loaded keywords help.

", "area": "UX & Layout" }, { "term": "Feed", "category": "UI Component", "definition": "Stream of content sorted by time.", "example": "Social timeline of posts.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Fill the Frame", "category": "Technique", "definition": "Subject dominates, minimizing distractions.", "example": "Tight crop on cathedral façade details.", "discipline": [ "Composition" ], "medium": [ "Photo", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Film Photography", "category": "Technique", "definition": "Analog image capture with distinct aesthetic.", "example": "35mm grainy street scene.", "discipline": [ "Technical", "Style" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Fine Art Photography", "category": "Technique", "definition": "Reality-subverting, interpretive imagery.", "example": "Butterflies composited around subject.", "discipline": [ "Style" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Firewall", "category": "Data", "definition": "A network security system that monitors and controls incoming and outgoing traffic based on predefined rules. Acts as a barrier between trusted internal networks and untrusted external ones. Can be hardware, software, or cloud-based.", "example": "Configure the firewall to only allow traffic on ports 80, 443, and 22...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "# UFW (Uncomplicated Firewall) on Linux\nsudo ufw default deny incoming\nsudo ufw default allow outgoing\nsudo ufw allow 22/tcp # SSH\nsudo ufw allow 80/tcp # HTTP\nsudo ufw allow 443/tcp # HTTPS\nsudo ufw enable", "area": "Web & Code" }, { "term": "Flat Design", "category": "Style/Aesthetic", "definition": "A minimalist style using simple 2D elements without shadows, gradients, or textures. Emphasizes clean shapes, bold colors, and crisp typography for clarity and fast load times.", "example": "Design flat UI icons using solid colors, geometric shapes, and no drop shadows or bevels.", "discipline": [ "UI/UX", "Style", "Composition" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
\n
\n
\n
\n
\n
\n

Flat Design

\n

No shadows, gradients, or textures. Pure color and shape.

\n
", "area": "Aesthetics" }, { "term": "Flexbox", "category": "Technique", "definition": "A one-dimensional layout method for arranging items in rows or columns with flexible sizing, alignment, and distribution of space. Ideal for navigation, cards, and component internals.", "example": "Use flexbox to center the logo and nav links horizontally with space-between alignment.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "
\n
1
\n
2 (flex:2)
\n
3
\n
", "area": "UX & Layout" }, { "term": "Floating Action Button", "category": "UI Component", "definition": "A circular button that floats above the interface, usually in the bottom-right corner. Triggers a primary action like composing a message or adding an item.", "example": "Add a floating action button with a plus icon that opens a quick-add task modal when tapped.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n \n
", "area": "Interface" }, { "term": "Font Pairing", "category": "Technique", "definition": "The practice of combining two or more complementary typefaces—typically a display font for headings and a readable font for body text—to create visual contrast and harmony.", "example": "Pair Playfair Display for headings with Source Sans Pro for body text.", "discipline": [ "Typography", "Style" ], "medium": [ "Code" ], "essential": true, "sample": "
Serif + Sans
Georgia headlines with system-ui body text. Classic and readable.
Mono + Sans
Monospace headlines feel technical and structured against clean sans-serif body.
Italic Serif + Sans
An italic serif headline adds elegance and editorial personality.
", "area": "Typography" }, { "term": "Footer", "category": "UI Component", "definition": "The bottom section of a webpage containing secondary navigation, contact info, social links, legal text, and other supplementary content.", "example": "Create a four-column footer with links, a newsletter signup form, social icons, and copyright text.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": false, "sample": "", "area": "Interface" }, { "term": "Foreground Interest & Depth", "category": "Technique", "definition": "Near elements add 3D feel and lead viewer inward.", "example": "Dock cleat in foreground before city skyline.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Foreign Key", "category": "Data", "definition": "A column that links to the primary key of another table, creating a relationship between the two. For example, a director_id column in a movies table that points to a directors table.", "example": "Link the movie table to the director table using the foreign key...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "CREATE TABLE movies (\n movie_key INT PRIMARY KEY,\n title TEXT,\n director_id INT,\n FOREIGN KEY (director_id) REFERENCES directors(id)\n);", "area": "Web & Code" }, { "term": "Form", "category": "UI Component", "definition": "Grouped inputs for structured submission.", "example": "Shipping address and payment details.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Form Field", "category": "UI Component", "definition": "An input element with associated label, placeholder text, helper text, and validation states. Includes text inputs, selects, checkboxes, and other form controls.", "example": "Create form fields for email and password with inline validation that shows errors below each input.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n \n \n

We'll never share your email.

\n
", "area": "Interface" }, { "term": "Frame Within the Frame", "category": "Technique", "definition": "Natural/manmade borders to guide focus/depth.", "example": "Archway framing basilica across piazza.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Freeze Frame", "category": "Technique", "definition": "Pause on a still to emphasize narration/moment.", "example": "Goodfellas explosion frozen for VO.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Full Bleed", "category": "Technique", "definition": "A layout where images or background colors extend edge-to-edge without margins, creating an immersive, expansive feel. Often used for hero sections and feature highlights.", "example": "Make the hero section full bleed with the background image spanning the entire viewport width.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": false, "sample": "
Edge to edge — no margins

Full Bleed

Content stretches to every edge of the viewport, creating an immersive, borderless experience.

", "area": "UX & Layout" }, { "term": "Gestalt Principles", "category": "Data", "definition": "A set of perceptual laws describing how humans group visual elements. Key principles include proximity (close items seem related), similarity (like items seem grouped), and closure (we complete incomplete shapes).", "example": "Use Gestalt proximity: place the label directly above its input field with minimal spacing, and add more space between separate form groups.", "discipline": [ "Composition", "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Proximity\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Similarity\n
\n
", "area": "UX & Layout" }, { "term": "Glamour Photography", "category": "Technique", "definition": "Beauty-centric, flattering depiction of subjects.", "example": "Fashion model with soft light and styling.", "discipline": [ "Lighting", "Style" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Glassmorphism", "category": "Style/Aesthetic", "definition": "A design trend featuring frosted glass effects with background blur, transparency, and subtle borders. Creates depth through layered, translucent surfaces that reveal blurred content behind them.", "example": "Design glassmorphic cards with a frosted blur effect, white border, and soft drop shadow over a gradient background.", "discipline": [ "UI/UX", "Style" ], "medium": [ "Code" ], "essential": false, "sample": "
\n

Glass Card

\n

Frosted glass effect with blur and transparency.

\n
", "area": "Aesthetics" }, { "term": "Glow Effect", "category": "Technique", "definition": "A luminous halo or aura surrounding text or elements, creating a neon or ethereal appearance. Often achieved with multiple layered text shadows or box shadows with high blur values.", "example": "Add a cyan glow effect to the headline for a futuristic neon sign aesthetic.", "discipline": [ "Typography", "Color", "Style" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
\n

NEON GLOW

\n
", "area": "Typography" }, { "term": "Golden Ratio (Phi/Spiral)", "category": "Technique", "definition": "Fibonacci spiral guiding visual flow.", "example": "Venice bridge leading spiral to seated figures.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Golden Triangles", "category": "Technique", "definition": "Diagonal grid guiding placement via right-angle splits.", "example": "Light trails aligning corner-to-corner diagonal.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Gradient Text", "category": "Technique", "definition": "A design technique that fills text with a color gradient instead of a solid color. Achieved in CSS using background-clip with a gradient background.", "example": "Apply a blue-to-purple gradient to the main headline for a modern tech feel.", "discipline": [ "Typography", "Color", "Style" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
\n

Gradient Text

\n
", "area": "Typography" }, { "term": "GraphQL", "category": "Technique", "definition": "A query language and runtime for APIs that lets clients request exactly the data they need in a single request. Unlike REST, the client defines the shape of the response, reducing over-fetching and under-fetching.", "example": "Use a GraphQL query to fetch only the title and rating for each movie...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "query {\n movies(limit: 10) {\n title\n rating\n director { name }\n }\n}", "area": "Web & Code" }, { "term": "Grid Layout", "category": "Technique", "definition": "A two-dimensional layout system using rows and columns to organize content. CSS Grid enables complex, responsive layouts with precise control over alignment and spacing.", "example": "Use a 12-column grid layout with content spanning different column widths at each breakpoint.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "
\n
1
\n
2
\n
3
\n
4
\n
5
\n
6
\n
", "area": "UX & Layout" }, { "term": "Hamburger Menu", "category": "UI Component", "definition": "A navigation icon consisting of three horizontal lines that, when tapped, reveals a hidden menu. Common on mobile interfaces to conserve screen space.", "example": "On mobile, collapse the navigation into a hamburger menu in the top-left corner.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
Logo
HomeProductsAboutContact
", "area": "Interface" }, { "term": "Hashing", "category": "Technique", "definition": "A one-way function that converts data into a fixed-length string of characters. Unlike encryption, hashing cannot be reversed. Used for password storage, data integrity checks, and digital signatures. Common algorithms: bcrypt, SHA-256.", "example": "Hash user passwords with bcrypt before storing them in the database...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// Password hashing with bcrypt\nimport bcrypt from 'bcrypt';\n\n// Hash a password\nconst hash = await bcrypt.hash('myPassword123', 10);\n// → $2b$10$N9qo8uLOickgx2ZMRZoMye...\n\n// Verify a password\nconst match = await bcrypt.compare('myPassword123', hash);\n// → true", "area": "Web & Code" }, { "term": "HDR (High Dynamic Range)", "category": "Technique", "definition": "Combining exposures to extend tonal range.", "example": "Surreal yet detailed cityscape from bracketed shots.", "discipline": [ "Technical" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Hero Section", "category": "UI Component", "definition": "The prominent, above-the-fold area at the top of a webpage, typically featuring a large image or video, headline, and primary call to action.", "example": "The hero section should immediately communicate the value prop with a bold headline and demo video.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Photo", "Video", "Code" ], "essential": true, "sample": "
\n

Build faster with AI

\n

Create stunning websites in minutes, not hours. No coding required.

\n \n \n
", "area": "Photography" }, { "term": "High-Speed Photography", "category": "Technique", "definition": "Capturing fast events with short exposures/triggers.", "example": "Popping balloon mid-burst.", "discipline": [ "Technical" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "HTTP Method", "category": "Data", "definition": "The verb in an HTTP request that tells the server what action to perform. The main methods are GET (read), POST (create), PUT (replace), PATCH (partial update), and DELETE (remove).", "example": "Use a POST method to create a new user record...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "GET → Read data (safe, no side effects)\nPOST → Create a new resource\nPUT → Replace an entire resource\nPATCH → Update part of a resource\nDELETE → Remove a resource", "area": "Web & Code" }, { "term": "HTTP Status Code", "category": "Data", "definition": "A three-digit number returned by a server to indicate the result of an HTTP request. Grouped by hundreds: 2xx (success), 3xx (redirect), 4xx (client error), 5xx (server error).", "example": "Return a 201 status code after successfully creating a resource...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "200 OK → Request succeeded\n201 Created → Resource created\n400 Bad Request → Invalid input\n401 Unauthorized → Not authenticated\n403 Forbidden → Not authorized\n404 Not Found → Resource doesn't exist\n500 Internal Error → Server broke", "area": "Web & Code" }, { "term": "HTTPS / TLS", "category": "Technique", "definition": "HTTPS (Hypertext Transfer Protocol Secure) is HTTP encrypted with TLS (Transport Layer Security). It encrypts data in transit between client and server, preventing eavesdropping and tampering. The padlock icon in your browser means TLS is active.", "example": "Enforce HTTPS on all API endpoints to encrypt data in transit...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// Redirect HTTP to HTTPS in Express\napp.use((req, res, next) => {\n if (!req.secure) {\n return res.redirect('https://' + req.headers.host + req.url);\n }\n next();\n});", "area": "Web & Code" }, { "term": "Icon", "category": "UI Element", "definition": "Small graphic representing actions/content.", "example": "Magnifying glass for search.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Infinite Scroll", "category": "UI Component", "definition": "A loading pattern that automatically fetches and appends new content as the user scrolls near the bottom of the page, eliminating traditional pagination.", "example": "Implement infinite scroll on the blog archive so new posts load seamlessly as readers reach the end of the visible list.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "", "area": "Interface" }, { "term": "Information Architecture", "category": "Technique", "definition": "The practice of organizing, structuring, and labeling content so users can find what they need and understand where they are. Defines the skeleton of an app or site before visual design begins.", "example": "Use clear information architecture: group settings by function (Account, Notifications, Privacy) with descriptive labels and logical nesting no more than 3 levels deep.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "", "area": "UX & Layout" }, { "term": "Infrared Photography", "category": "Technique", "definition": "Imaging beyond visible spectrum; often heavy post.", "example": "IR landscapes with surreal foliage tones.", "discipline": [ "Technical", "Style" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Infrastructure as Code (IaC)", "category": "Technique", "definition": "Managing and provisioning servers, networks, and cloud resources through code files instead of manual setup. Tools like Terraform, Pulumi, and AWS CloudFormation let you version-control your infrastructure like application code.", "example": "Define your AWS infrastructure in Terraform so it's reproducible and version-controlled...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "# Terraform example\nresource \"aws_instance\" \"web\" {\n ami = \"ami-0c55b159cbfafe1f0\"\n instance_type = \"t3.micro\"\n tags = {\n Name = \"web-server\"\n }\n}", "area": "Web & Code" }, { "term": "Input Field", "category": "UI Element", "definition": "Text-entry control for user data.", "example": "Email field in signup.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Invisible/Hidden Cuts", "category": "Technique", "definition": "Concealed edit via whip pans/occlusions/VFX.", "example": "Birdman/1917 \"one-shot\" stitching in darkness.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Isolate the Subject (Shallow DoF)", "category": "Technique", "definition": "Wide aperture blurs background to focus attention.", "example": "Cat sharp, background soft bokeh.", "discipline": [ "Composition", "Technical" ], "medium": [ "Photo", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "J Cut", "category": "Technique", "definition": "Next video follows previous audio start.", "example": "Hearing a reply before cutting to speaker.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "JSON", "category": "Data", "definition": "JavaScript Object Notation. A lightweight text format for structuring data as key-value pairs and arrays. The standard data format for APIs and configuration files because it's easy for both humans and machines to read.", "example": "Send the request body as JSON with the movie title and rating...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "{\n \"title\": \"Inception\",\n \"rating\": 4.5,\n \"genres\": [\"Sci-Fi\", \"Thriller\"],\n \"director\": {\n \"name\": \"Christopher Nolan\"\n }\n}", "area": "Web & Code" }, { "term": "Jump Cut", "category": "Technique", "definition": "Intentional temporal/spatial skips to compress or energize.", "example": "Fixed-camera packing sequence with time jumps.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Juxtaposition", "category": "Technique", "definition": "Contrast/complement elements to tell a story.", "example": "Rough bookstalls vs ordered cathedral.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "JWT (JSON Web Token)", "category": "Data", "definition": "A compact, URL-safe token format used to securely transmit information between parties as a JSON object. JWTs are signed (and optionally encrypted) and commonly used for authentication and session management.", "example": "Generate a JWT after login and include it in the Authorization header for subsequent requests...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// A JWT has three parts: header.payload.signature\neyJhbGciOiJIUzI1NiJ9. // header\neyJ1c2VyX2lkIjoxMjN9. // payload\nSflKxwRJSMeKKF2QT4fw... // signature\n\n// Decoded payload:\n{ \"user_id\": 123, \"role\": \"admin\", \"exp\": 1700000000 }", "area": "Web & Code" }, { "term": "Kebab Menu", "category": "UI Element", "definition": "Three vertical dots for more options.", "example": "Overflow actions on a card.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Kerning", "category": "Data", "definition": "The adjustment of space between individual letter pairs to achieve visually balanced spacing. Poor kerning creates awkward gaps or collisions between specific character combinations.", "example": "Adjust the kerning between the 'A' and 'V' in the logo—they look too far apart.", "discipline": [ "Typography" ], "medium": [ "Code", "Illustration" ], "essential": true, "sample": "
❌ Poor Kerning
AV To YA
✓ Good Kerning
AV To YA

Kerning tightens or loosens space between specific letter pairs for visual balance.

", "area": "Typography" }, { "term": "Kubernetes (K8s)", "category": "Data", "definition": "An open-source platform for automating the deployment, scaling, and management of containerized applications. It groups containers into logical units called pods and manages them across a cluster of machines.", "example": "Deploy your app to a Kubernetes cluster so it auto-scales based on traffic...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "# Kubernetes deployment manifest (YAML)\napiVersion: apps/v1\nkind: Deployment\nmetadata:\n name: my-app\nspec:\n replicas: 3\n selector:\n matchLabels:\n app: my-app\n template:\n metadata:\n labels:\n app: my-app\n spec:\n containers:\n - name: my-app\n image: my-app:latest\n ports:\n - containerPort: 3000", "area": "Web & Code" }, { "term": "L Cut", "category": "Technique", "definition": "Previous audio continues after video cuts away.", "example": "Staying on listener while dialogue continues.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Landscape Photography", "category": "Technique", "definition": "Natural/manmade vistas emphasizing place.", "example": "Purposeful sunset with foreground silhouette.", "discipline": [ "Composition" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Large Format Photography", "category": "Technique", "definition": "Cameras 4×5 to 8×10 producing ultra-detailed images.", "example": "8×10 portrait with shallow DoF and fine tonality.", "discipline": [ "Technical" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Layers in the Frame", "category": "Technique", "definition": "Foreground/midground/background for depth.", "example": "Canal bridge, riverside buildings, distant tower.", "discipline": [ "Composition" ], "medium": [ "Photo", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Leading", "category": "Data", "definition": "The vertical space between lines of text, measured from baseline to baseline. Proper leading improves readability and prevents text from feeling cramped or disconnected.", "example": "Increase the leading on body text to 1.6 for better readability on long-form content.", "discipline": [ "Typography" ], "medium": [ "Code" ], "essential": true, "sample": "
❌ Tight Leading (1.0)
Typography is the art and technique of arranging type to make written language legible, readable, and appealing.
✓ Comfortable Leading (1.6)
Typography is the art and technique of arranging type to make written language legible, readable, and appealing.
⚠ Loose Leading (2.4)
Typography is the art and technique of arranging type to make written language legible, readable, and appealing.
", "area": "Typography" }, { "term": "Leading Lines", "category": "Technique", "definition": "Lines guiding eyes to the subject.", "example": "Paving patterns pointing to Eiffel Tower.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Left-to-Right Rule", "category": "Technique", "definition": "Motion flowing in reading direction (culture-dependent).", "example": "Dog walker crossing left to right in gardens.", "discipline": [ "Composition" ], "medium": [ "Photo", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Let the Eye Wander", "category": "Technique", "definition": "Dense scenes inviting exploration.", "example": "Busy nightlife street full of characters.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Ligatures", "category": "Data", "definition": "Special glyphs that combine two or more characters into a single form for better aesthetics or readability. Common ligatures include fi, fl, and ff combinations.", "example": "Enable ligatures on the body text to improve the flow of letter combinations like 'fi' and 'fl'.", "discipline": [ "Typography" ], "medium": [ "Code" ], "essential": false, "sample": "
\n

fi fl ff ffi — ligatures OFF

\n

fi fl ff ffi — ligatures ON

\n
", "area": "Typography" }, { "term": "Lightbox", "category": "UI Component", "definition": "An overlay that dims the page background and displays enlarged images, videos, or galleries in focus. Typically includes navigation arrows and a close button.", "example": "When the user clicks a thumbnail, open a lightbox showing the full-size image with left/right arrows to browse the gallery.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
Enlarged Image
", "area": "Interface" }, { "term": "Load Balancer", "category": "Data", "definition": "A system that distributes incoming network traffic across multiple servers so no single server gets overwhelmed. Improves availability, reliability, and performance. Can operate at the network layer (L4) or application layer (L7).", "example": "Put a load balancer in front of your servers to distribute traffic evenly...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "# NGINX load balancer config\nupstream backend {\n server app1:3000;\n server app2:3000;\n server app3:3000;\n}\nserver {\n listen 80;\n location / {\n proxy_pass http://backend;\n }\n}", "area": "Web & Code" }, { "term": "Loader", "category": "UI Element", "definition": "Indicator that a process is running.", "example": "Spinner during file upload.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Long Take / Not Cutting", "category": "Technique", "definition": "Extended uninterrupted shot to immerse/shape pace.", "example": "The Bear episode-long moving master.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Long-Exposure Photography", "category": "Technique", "definition": "Slow shutter emphasizing motion/light trails.", "example": "Night city light trails on highways.", "discipline": [ "Technical" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Macro Photography", "category": "Technique", "definition": "Extreme close-up, often 1:1 magnification.", "example": "Insect eyes filling the frame.", "discipline": [ "Technical" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Masonry Layout", "category": "Technique", "definition": "A grid layout where items of varying heights stack vertically like bricks, filling gaps efficiently. Popular for image galleries, portfolios, and Pinterest-style feeds.", "example": "Display the portfolio thumbnails in a masonry layout so images of different aspect ratios fit together seamlessly.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": false, "sample": "
A
B
C
D
E
F
", "area": "UX & Layout" }, { "term": "Match Cut", "category": "Technique", "definition": "Cut aligning composition/motion across time/place.", "example": "Door closing matches another door opening in a new scene.", "discipline": [ "Technical", "Composition" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Material Design", "category": "Style/Aesthetic", "definition": "Google's design system combining flat design principles with subtle depth cues like shadows and motion. Uses a grid-based layout, responsive animations, and a bold color palette.", "example": "Build a Material Design app interface with floating action buttons, card elevation, and ripple effects on tap.", "discipline": [ "UI/UX", "Style", "Animation" ], "medium": [ "Code" ], "essential": false, "sample": "
\n

Material Card

\n

Depth via elevation, bold colors, and motion.

\n \n
", "area": "Aesthetics" }, { "term": "Maximalism", "category": "Style/Aesthetic", "definition": "A bold, visually dense design style embracing complexity, layered elements, vibrant colors, mixed patterns, and abundant decoration. The opposite of minimalism—more is more.", "example": "Design a maximalist fashion site with overlapping images, bold typography, animated elements, and clashing colors.", "discipline": [ "UI/UX", "Style", "Composition", "Color" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
🎭✨🌈

MORE IS MORE!

Layers, patterns, clashing colors, bold decoration everywhere.

", "area": "Aesthetics" }, { "term": "MCP (Model Context Protocol)", "category": "Technique", "definition": "An open protocol that standardizes how AI applications connect to external tools, data sources, and services. It provides a universal interface so AI models can interact with the outside world in a consistent way.", "example": "Use MCP to let your AI assistant read and write files on your local machine...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// MCP defines a standard JSON-RPC interface\n// Clients discover tools via the protocol\n{\n \"method\": \"tools/list\",\n \"params\": {}\n}", "area": "Web & Code" }, { "term": "MCP Server", "category": "Data", "definition": "A lightweight program that exposes specific capabilities (tools, resources, prompts) to AI applications via the Model Context Protocol. Each server typically wraps one system — a database, file system, API, or service.", "example": "Run an MCP server that gives Claude access to your Postgres database...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// A minimal MCP server (Node.js SDK)\nimport { McpServer } from '@modelcontextprotocol/sdk';\nconst server = new McpServer({ name: 'my-server' });\nserver.tool('get_weather', { city: z.string() },\n async ({ city }) => {\n return { text: Weather in ${city}: 72°F };\n }\n);\nserver.listen();", "area": "Web & Code" }, { "term": "MCP Tool", "category": "Data", "definition": "A function exposed by an MCP server that an AI model can call to perform an action — like querying a database, sending an email, or fetching data from an API. Tools have a defined name, input schema, and return value.", "example": "Register an MCP tool that lets the model search your knowledge base...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "server.tool(\n 'search_docs',\n { query: z.string(), limit: z.number().default(10) },\n async ({ query, limit }) => {\n const results = await db.search(query, limit);\n return { text: JSON.stringify(results) };\n }\n);", "area": "Web & Code" }, { "term": "Measure", "category": "Data", "definition": "The length of a line of text, typically measured in characters. Optimal measure for body text is 45–75 characters per line to maintain readability.", "example": "Constrain the article width to keep the measure around 66 characters for comfortable reading.", "discipline": [ "Typography", "Composition" ], "medium": [ "Code" ], "essential": false, "sample": "
❌ Too Wide (~100+ chars)
When a line of text is too wide, the reader's eye has to travel a long distance from the end of one line to the beginning of the next, making it easy to lose your place and reducing reading speed significantly.
✓ Ideal Measure (~60 chars)
The ideal line length sits between 45 and 75 characters. This lets the eye comfortably track from line to line.
⚠ Too Narrow (~25 chars)
Lines this short break up the reading rhythm with too many line returns.
", "area": "Typography" }, { "term": "Meatballs Menu", "category": "UI Element", "definition": "Three horizontal dots for extra actions.", "example": "Post settings on social media.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Mega Menu", "category": "UI Component", "definition": "A large, multi-column dropdown menu that expands from the navigation bar, displaying grouped links, images, or featured content. Used on sites with extensive navigation.", "example": "Design a mega menu for 'Shop' that shows four product categories in columns with thumbnail images and 'View All' links.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
Electronics
PhonesLaptopsAudioCameras
Clothing
MenWomenKidsSale
Home
FurnitureDecorKitchenGarden
", "area": "Interface" }, { "term": "Memphis Design", "category": "Style/Aesthetic", "definition": "A bold 1980s style featuring geometric shapes, squiggles, clashing colors, and playful patterns. Named after the Memphis Group design collective.", "example": "Add Memphis-style decorative elements with colorful geometric shapes and zigzag patterns.", "discipline": [ "UI/UX", "Style", "Color", "Composition" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
◆●▲

MEMPHIS

Squiggles, shapes, clashing 80s energy.

", "area": "Aesthetics" }, { "term": "Message Queue", "category": "Data", "definition": "A system that lets services communicate asynchronously by sending messages to a queue, where they wait until a consumer processes them. Decouples services and handles traffic spikes gracefully. Examples: RabbitMQ, AWS SQS, Kafka.", "example": "Push email jobs to a message queue so the API responds instantly and emails send in the background...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// Producer: add job to queue\nawait queue.send({\n type: 'send_email',\n to: 'user@example.com',\n subject: 'Welcome!'\n});\n\n// Consumer: process jobs\nqueue.on('message', async (msg) => {\n await sendEmail(msg.to, msg.subject);\n});", "area": "Web & Code" }, { "term": "Microinteraction", "category": "Technique", "definition": "Small, contained animations or responses triggered by user actions. They provide feedback, guide tasks, and add personality to interfaces.", "example": "That subtle bounce when a task is checked off is a nice microinteraction—it makes completing items feel satisfying.", "discipline": [ "UI/UX", "Animation" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n \n
Like
\n
\n
\n \n
Done!
\n
\n
", "area": "UX & Layout" }, { "term": "Microservice", "category": "Technique", "definition": "An architectural pattern where an application is built as a collection of small, independent services that each handle one specific function (e.g., auth, payments, email). Each service can be deployed, scaled, and updated independently.", "example": "Split the monolith into microservices so the auth service can scale independently...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// Microservice architecture example\nAuth Service → /api/auth/ (port 3001)\nPayment Service → /api/payments/ (port 3002)\nEmail Service → /api/email/* (port 3003)\nAPI Gateway → routes requests to the right service", "area": "Web & Code" }, { "term": "Middleware", "category": "Data", "definition": "A function that sits between the incoming request and the final response in a server application. Middleware can inspect, modify, or reject requests — used for logging, authentication, error handling, and more.", "example": "Add logging middleware to track every incoming request to your API...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// Express middleware chain\napp.use(logger); // 1. Log request\napp.use(authenticate); // 2. Check auth\napp.use(rateLimit); // 3. Rate limit\napp.get('/api/data', // 4. Handle request\n (req, res) => res.json({ ok: true })\n);", "area": "Web & Code" }, { "term": "Minimalism", "category": "Style/Aesthetic", "definition": "A design approach that emphasizes simplicity through generous white space, limited color palettes, clean typography, and only essential elements. Prioritizes clarity and focus.", "example": "Create a minimalist landing page with a single headline, one image, and a centered CTA button.", "discipline": [ "UI/UX", "Style", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "
\n

Less is more

\n

Clean typography, ample white space, and essential elements only.

\n Learn more →\n
", "area": "Aesthetics" }, { "term": "Modal", "category": "UI Component", "definition": "An overlay dialog that appears on top of the main content and requires user interaction before returning to the underlying page. Also called a dialog or lightbox.", "example": "Use a confirmation modal before permanently deleting a user's account to prevent accidental data loss.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "
\n
\n
\n
\n

Confirm Action

\n \n
\n

Are you sure you want to delete this item? This action cannot be undone.

\n
\n \n \n
\n
\n
\n
", "area": "Interface" }, { "term": "Modular Scale", "category": "Technique", "definition": "A sequence of harmonious sizes generated by multiplying a base value by a consistent ratio (e.g., 1.25 or 1.618). Creates visual rhythm and hierarchy for typography, spacing, and component sizing.", "example": "Apply a modular scale with ratio 1.25: base text at 16px, then 20px, 25px, 31px, 39px for heading levels.", "discipline": [ "Typography", "Composition" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n 39px\n 31px\n 25px\n 20px\n 16px\n
\n

Scale: 1.25 ratio × 16px base

\n
", "area": "Typography" }, { "term": "Monochrome", "category": "Style/Aesthetic", "definition": "A design approach using a single color in various shades and tints, creating visual harmony and sophistication. Often paired with black, white, and gray.", "example": "Design a monochrome portfolio using only shades of deep blue against white backgrounds.", "discipline": [ "UI/UX", "Style", "Color" ], "medium": [ "Code" ], "essential": false, "sample": "

Monochrome

One color family. Infinite depth through shades and tints.

", "area": "Aesthetics" }, { "term": "Monolith", "category": "Data", "definition": "An application architecture where all functionality (auth, payments, email, etc.) lives in a single codebase and deploys as one unit. Simpler to start with than microservices but harder to scale independently as the app grows.", "example": "Start with a monolith and split into microservices only when you hit scaling bottlenecks...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// Monolith: everything in one app\napp.use('/auth', authRoutes);\napp.use('/users', userRoutes);\napp.use('/payments', paymentRoutes);\napp.use('/email', emailRoutes);\n// All share one database, one deploy", "area": "Web & Code" }, { "term": "Montage", "category": "Technique", "definition": "Music-led sequence compressing time via many shots.", "example": "Training or preparation sequence.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Motion Blur", "category": "Technique", "definition": "Visual streaking from subject/camera movement.", "example": "Long-exposure waterfalls rendered silky.", "discipline": [ "Technical" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Natural Light Photography", "category": "Technique", "definition": "Sun/moonlight used without artificial sources.", "example": "Golden-hour outdoor portrait with bounce.", "discipline": [ "Lighting" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Nature Photography", "category": "Technique", "definition": "Broad natural subjects beyond wildlife.", "example": "Macro of dew on leaf; mountain panorama.", "discipline": [ "Composition" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Navigation Bar", "category": "UI Component", "definition": "A horizontal bar at the top of a website containing the logo, main navigation links, and often a CTA or search. Serves as the primary wayfinding tool across pages.", "example": "Create a navigation bar with logo on the left, five text links centered, and a 'Get Started' button on the right.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "", "area": "Interface" }, { "term": "Negative Prompt", "category": "Technique", "definition": "Instructions telling an AI image generator what to exclude from the output. Helps refine results by specifying unwanted elements, styles, or artifacts.", "example": "\"Negative prompt: blurry, low quality, extra limbs, watermark\"", "discipline": [ "Prompting" ], "medium": [ "Photo", "Illustration" ], "essential": true, "sample": "", "area": "Aesthetics" }, { "term": "Negative Space", "category": "Technique", "definition": "Open areas simplify and spotlight subject.", "example": "Statue isolated against clear sky.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Neomorphism", "category": "Style/Aesthetic", "definition": "A soft, extruded design style that uses subtle shadows and highlights to create the illusion of elements pushing out from or pressing into the background. Combines flat design with realistic depth.", "example": "Create neomorphic buttons with soft inset shadows that look like they're molded from the background.", "discipline": [ "UI/UX", "Style", "Lighting" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n

Soft UI

\n

Extruded shapes with soft shadows.

\n
\n
", "area": "Aesthetics" }, { "term": "Night Photography", "category": "Technique", "definition": "Low-light shooting with longer exposures/unique lighting.", "example": "Moonlit abandoned sites with light painting.", "discipline": [ "Technical", "Lighting" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Notification", "category": "UI Element", "definition": "Status alerts (success, error, new items).", "example": "Red badge on messages icon.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "OAuth", "category": "Technique", "definition": "Open Authorization. A standard protocol that lets users grant third-party apps limited access to their accounts (e.g., 'Sign in with Google') without sharing their password. Uses access tokens instead of credentials.", "example": "Implement OAuth 2.0 so users can sign in with their Google account...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// Simplified OAuth 2.0 flow\n1. User clicks 'Sign in with Google'\n2. App redirects to Google's auth page\n3. User grants permission\n4. Google redirects back with an auth code\n5. App exchanges code for access token\n6. App uses token to call Google APIs", "area": "Web & Code" }, { "term": "Organic Design", "category": "Style/Aesthetic", "definition": "A nature-inspired aesthetic using soft curves, irregular shapes, earthy color palettes, natural textures, and fluid layouts that feel handcrafted and human.", "example": "Create an organic landing page with blob shapes, earth tones, leaf illustrations, and flowing section dividers.", "discipline": [ "UI/UX", "Style", "Composition", "Color" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
🌿

Organic Card

Soft curves, earth tones, natural textures. Handcrafted feel.

", "area": "Aesthetics" }, { "term": "Overdub (VO/Subtitles)", "category": "Technique", "definition": "Hearing one track while seeing another.", "example": "Character inner monologue over live action.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "OWASP", "category": "Data", "definition": "Open Worldwide Application Security Project. A nonprofit that publishes free resources, tools, and standards for web application security. Best known for the OWASP Top 10 — a list of the most critical security risks for web apps.", "example": "Audit your app against the OWASP Top 10 before going to production...", "discipline": [ "Technical" ], "medium": [ "Code" ], "essential": false, "sample": "# OWASP Top 10 (2021)\n1. Broken Access Control\n2. Cryptographic Failures\n3. Injection (SQL, XSS)\n4. Insecure Design\n5. Security Misconfiguration\n6. Vulnerable Components\n7. Authentication Failures\n8. Data Integrity Failures\n9. Logging & Monitoring Failures\n10. Server-Side Request Forgery (SSRF)", "area": "Web & Code" }, { "term": "Pagination", "category": "UI Component", "definition": "A navigation pattern that divides content into discrete pages with controls to move between them. Shows page numbers, previous/next buttons, or both.", "example": "Add pagination below the blog grid showing 10 posts per page with numbered page links.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n \n \n \n \n ...\n \n \n
", "area": "Interface" }, { "term": "Panoramic Photography", "category": "Technique", "definition": "Stitching adjacent frames into wide vistas.", "example": "Mountain panorama from multiple shots.", "discipline": [ "Technical", "Composition" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Parallel Editing", "category": "Technique", "definition": "Intercut narratives to compare/contrast arcs.", "example": "One character's rise vs another's fall.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Patterns & Textures", "category": "Technique", "definition": "Repetition and surface detail for visual harmony.", "example": "Arched colonnade; textured stonework.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Payload", "category": "Data", "definition": "The data sent in the body of an HTTP request or response. In a POST request, the payload is the data you're sending to the server (e.g., a JSON object with user details). In a response, it's the data the server sends back.", "example": "Send a JSON payload with the user's name and email in the POST request...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "// Request payload\nfetch('/api/users', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n name: 'Braveen',\n email: 'hello@example.com'\n })\n});", "area": "Web & Code" }, { "term": "Penetration Testing", "category": "Technique", "definition": "An authorized simulated cyberattack on a system to find security vulnerabilities before real attackers do. Pen testers use the same tools and techniques as hackers but report findings to the organization so they can be fixed.", "example": "Hire a pen testing firm to audit your app's security before launch...", "discipline": [ "Technical" ], "medium": [ "Code" ], "essential": false, "sample": "# Common pen testing phases\n1. Reconnaissance — gather info about the target\n2. Scanning — identify open ports and services\n3. Exploitation — attempt to exploit vulnerabilities\n4. Reporting — document findings + severity\n\n# Tools: Burp Suite, Nmap, Metasploit, OWASP ZAP", "area": "Web & Code" }, { "term": "Phishing", "category": "Data", "definition": "A social engineering attack where attackers impersonate trusted entities (banks, colleagues, services) through fake emails, messages, or websites to trick victims into revealing sensitive information like passwords, credit card numbers, or API keys.", "example": "Train your team to recognize phishing emails that impersonate internal tools...", "discipline": [ "Technical" ], "medium": [ "Code" ], "essential": false, "sample": "# Red flags in phishing attempts\n- Urgent language: \"Your account will be suspended!\"\n- Mismatched sender: support@g00gle.com (not google.com)\n- Suspicious links: hover to check real URL\n- Unexpected attachments\n- Generic greetings: \"Dear Customer\"\n\n# Defenses: email filtering, MFA, security training", "area": "Web & Code" }, { "term": "Picker", "category": "UI Element", "definition": "Structured selector (dates, times, values).", "example": "Date-of-birth calendar widget.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Planned Transitions", "category": "Technique", "definition": "Compositional/VFX-driven shot bridges designed in advance.", "example": "Scott Pilgrim stylized scene transitions.", "discipline": [ "Technical", "Composition" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Portrait Photography", "category": "Technique", "definition": "Focus on people/animals as main subject.", "example": "Character-defining headshot.", "discipline": [ "Composition", "Lighting" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Primary Key", "category": "Data", "definition": "A column (or combination of columns) that acts as the unique identifier for every row in a table. No two rows can share the same primary key value.", "example": "Join these tables on the primary key...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "CREATE TABLE movie_cache (\n movie_key INT PRIMARY KEY,\n title TEXT\n);", "area": "Web & Code" }, { "term": "Progress Bar", "category": "UI Component", "definition": "A horizontal bar that visually indicates the completion status of a task or process. Can be determinate (showing percentage) or indeterminate (showing activity).", "example": "Show a progress bar at the top of the multi-step form indicating the user is on step 2 of 4.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n Uploading...\n 65%\n
\n
\n
\n
\n
", "area": "Interface" }, { "term": "Progressive Disclosure", "category": "Technique", "definition": "A design pattern that reveals information or options gradually, showing only what's needed at each step. Reduces overwhelm by hiding complexity until the user needs it.", "example": "Apply progressive disclosure: show basic options by default, and reveal advanced settings only when the user clicks 'Show more options.'", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": false, "sample": "
\n

Export Options

\n \n \n
\n Advanced options ▾\n
\n \n \n
\n
\n
", "area": "UX & Layout" }, { "term": "Query", "category": "Data", "definition": "The actual code or request you send to a database to retrieve, insert, update, or delete information. Written in SQL (Structured Query Language).", "example": "Write an SQL query to fetch...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "SELECT title, rating FROM movie_cache WHERE rating > 4.0 ORDER BY rating DESC;", "area": "Web & Code" }, { "term": "Radio Buttons", "category": "UI Element", "definition": "Circular single-select options.", "example": "Choose one: Small, Medium, Large.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Rate Limiting", "category": "Technique", "definition": "A technique that restricts how many requests a client can make to an API within a given time window (e.g., 100 requests per minute). Protects servers from abuse, brute-force attacks, and accidental overload.", "example": "Add rate limiting to your API to prevent abuse — max 100 requests per minute per user...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// Express rate limiter\nimport rateLimit from 'express-rate-limit';\napp.use(rateLimit({\n windowMs: 60 * 1000, // 1 minute\n max: 100, // limit per window\n message: 'Too many requests'\n}));", "area": "Web & Code" }, { "term": "RAW Processing", "category": "Technique", "definition": "Developing sensor-native files for maximum latitude.", "example": "Workflow in Capture One/Lightroom.", "discipline": [ "Technical" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "RBAC (Role-Based Access Control)", "category": "Technique", "definition": "A method of restricting system access based on user roles (e.g., admin, editor, viewer). Permissions are assigned to roles, and users are assigned to roles — instead of granting permissions to each user individually.", "example": "Implement RBAC so editors can update content but only admins can delete it...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// Define roles and permissions\nconst roles = {\n admin: ['create', 'read', 'update', 'delete'],\n editor: ['create', 'read', 'update'],\n viewer: ['read']\n};\n\n// Check permission\nfunction canAccess(role, action) {\n return roles[role]?.includes(action);\n}\ncanAccess('editor', 'delete'); // false", "area": "Web & Code" }, { "term": "Real Estate Photography", "category": "Technique", "definition": "Property visuals emphasizing clarity and layout.", "example": "Wide-angle, well-lit interior room overview.", "discipline": [ "Technical", "Composition" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Responsive Design", "category": "Technique", "definition": "An approach where layouts adapt fluidly to different screen sizes and devices. Uses flexible grids, images, and CSS media queries to ensure usability across viewports.", "example": "Make sure the dashboard uses responsive design so it works on tablets and phones, not just desktop.", "discipline": [ "UI/UX", "Technical" ], "medium": [ "Code" ], "essential": true, "sample": "
\n
\n
Desktop\n>1024px
\n
Tablet\n768-1024px
\n
Mobile\n<768px
\n
\n
", "area": "UX & Layout" }, { "term": "REST API", "category": "Technique", "definition": "Representational State Transfer API. An architectural style for building APIs that uses standard HTTP methods (GET, POST, PUT, DELETE) and treats data as resources identified by URLs. The most common API pattern on the web.", "example": "Build a REST API with endpoints for creating, reading, updating, and deleting users...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "GET /api/movies → List all movies\nPOST /api/movies → Create a movie\nGET /api/movies/:id → Get one movie\nPUT /api/movies/:id → Update a movie\nDELETE /api/movies/:id → Delete a movie", "area": "Web & Code" }, { "term": "Result Set", "category": "Data", "definition": "The data that comes back after you run a query. It is a temporary table of rows and columns that match the conditions you specified.", "example": "Order the result set by date...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "SELECT * FROM movie_cache ORDER BY release_date DESC;", "area": "Web & Code" }, { "term": "Retro/Vintage", "category": "Style/Aesthetic", "definition": "Design styles that evoke nostalgia through references to past eras—whether 70s groovy, 80s neon, 90s web, or Y2K futurism. Uses period-appropriate colors, fonts, and visual motifs.", "example": "Create a 90s retro homepage with pixel art, animated GIFs, bright colors, and a hit counter.", "discipline": [ "UI/UX", "Style", "Typography", "Color" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "

~RETRO~

Under construction! 🚧 Best viewed in Netscape Navigator 4.0

★ Welcome to my page! ★
Visitors: 000,042
", "area": "Aesthetics" }, { "term": "Reverse Proxy", "category": "Data", "definition": "A server that sits in front of your application servers and forwards client requests to them. It handles tasks like SSL termination, caching, compression, and load balancing so your app servers don't have to. NGINX and Cloudflare are common examples.", "example": "Set up NGINX as a reverse proxy to handle SSL and forward traffic to your Node app...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "# NGINX reverse proxy\nserver {\n listen 443 ssl;\n server_name myapp.com;\n ssl_certificate /etc/ssl/cert.pem;\n ssl_certificate_key /etc/ssl/key.pem;\n location / {\n proxy_pass http://localhost:3000;\n }\n}", "area": "Web & Code" }, { "term": "Row", "category": "Data", "definition": "The horizontal slices of a table, also called a record or entry. One row represents one single item (e.g., one specific movie with all its details).", "example": "Return the top 10 rows... / Delete the record where the ID is...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "SELECT * FROM movie_cache LIMIT 10;", "area": "Web & Code" }, { "term": "Rule of Odds", "category": "Technique", "definition": "Odd-numbered subjects feel more natural.", "example": "Three arches and three people in frame.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Rule of Space", "category": "Technique", "definition": "Leave space ahead of gaze/motion direction.", "example": "Boat placed left moving into right-side space.", "discipline": [ "Composition" ], "medium": [ "Photo", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Rule of Thirds", "category": "Technique", "definition": "3x3 grid placing key elements on lines/intersections.", "example": "Horizon on top third; subject on right intersection.", "discipline": [ "Composition" ], "medium": [ "Photo", "Illustration", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Sans-Serif", "category": "Data", "definition": "A typeface category without decorative strokes, featuring clean, simple letterforms. Associated with modernity, clarity, and digital interfaces.", "example": "Use a sans-serif font like Inter for the UI to keep the interface clean and modern.", "discipline": [ "Typography", "Style" ], "medium": [ "Code" ], "essential": true, "sample": "", "area": "Typography" }, { "term": "Scannability", "category": "Data", "definition": "How easily users can glance at content and extract key information without reading every word. Improved by clear headings, bullet points, bold keywords, short paragraphs, and visual hierarchy.", "example": "Optimize for scanability: use bold for key terms, keep paragraphs under 3 lines, and add descriptive subheadings every 2-3 paragraphs.", "discipline": [ "Typography", "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "
\n

How to Get Started

\n

Follow these three simple steps to begin:

\n \n
", "area": "Typography" }, { "term": "Schema", "category": "Data", "definition": "The blueprint or structure of a database, including column names, data types, and rules. It defines how data is organized without containing the data itself.", "example": "Here is the schema for my table... (followed by your CREATE TABLE code).", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "CREATE TABLE movie_cache (\n movie_key INT PRIMARY KEY,\n title VARCHAR(255) NOT NULL,\n rating DECIMAL(2,1),\n runtime INT\n);", "area": "Web & Code" }, { "term": "SDK", "category": "Data", "definition": "Software Development Kit. A collection of tools, libraries, and documentation that makes it easier to build with a specific platform or API. Instead of writing raw HTTP requests, you call pre-built functions.", "example": "Install the Stripe SDK to handle payments without writing raw API calls...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// Using Stripe's Node SDK vs. raw API\n// With SDK:\nconst stripe = new Stripe('sk_test_...');\nconst charge = await stripe.charges.create({\n amount: 2000, currency: 'usd'\n});\n\n// Without SDK: manual fetch, headers, error handling...", "area": "Web & Code" }, { "term": "Search Bar", "category": "UI Component", "definition": "An input field that allows users to search for content within a site or application. Often includes an icon, placeholder text, and autocomplete suggestions.", "example": "Add a search bar in the header with autocomplete that suggests results as the user types.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "
\n
\n 🔍\n \n \n
\n
", "area": "Interface" }, { "term": "Search Field", "category": "UI Element", "definition": "Input optimized to find items in-system.", "example": "Site-wide search bar.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Secrets Management", "category": "Technique", "definition": "The practice of securely storing, accessing, and rotating sensitive credentials like API keys, passwords, and tokens. Dedicated tools (e.g., AWS Secrets Manager, HashiCorp Vault) prevent secrets from being exposed in code or logs.", "example": "Use a secrets manager to store production API keys instead of .env files...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// AWS Secrets Manager example\nimport { SecretsManager } from '@aws-sdk/client-secrets-manager';\nconst client = new SecretsManager();\nconst secret = await client.getSecretValue({\n SecretId: 'prod/api-keys'\n});", "area": "Web & Code" }, { "term": "Sepia Tone Photography", "category": "Style/Aesthetic", "definition": "Warm monochrome evoking historical feel.", "example": "Turn-of-century styled portrait.", "discipline": [ "Style", "Color" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Aesthetics" }, { "term": "Serif", "category": "Data", "definition": "A typeface category featuring small decorative strokes (serifs) at the ends of letter stems. Often associated with tradition, elegance, and long-form reading.", "example": "Use a serif font like Georgia for the blog body text to create a classic editorial feel.", "discipline": [ "Typography", "Style" ], "medium": [ "Code" ], "essential": true, "sample": "", "area": "Typography" }, { "term": "Server", "category": "Data", "definition": "A computer or program that listens for incoming requests and sends back responses. In back-end development, a server runs your application code, handles API requests, connects to databases, and serves data to clients.", "example": "Deploy your server to handle API requests from the front-end...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// Minimal Express server\nimport express from 'express';\nconst app = express();\napp.get('/api/hello', (req, res) => {\n res.json({ message: 'Hello world' });\n});\napp.listen(3000);", "area": "Web & Code" }, { "term": "Serverless", "category": "Technique", "definition": "A cloud computing model where the provider manages the servers and you only write functions that run in response to events. You pay per execution, not for idle servers. AWS Lambda, Vercel Functions, and Cloudflare Workers are common platforms.", "example": "Deploy a serverless function that resizes images on upload...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// AWS Lambda handler\nexport const handler = async (event) => {\n const { name } = JSON.parse(event.body);\n return {\n statusCode: 200,\n body: JSON.stringify({ message: Hello, ${name} })\n };\n};", "area": "Web & Code" }, { "term": "Shoot from Above", "category": "Technique", "definition": "High vantage for context/geometry.", "example": "City grid from tower rooftop at blue hour.", "discipline": [ "Composition" ], "medium": [ "Photo", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Shoot from Below", "category": "Technique", "definition": "Low angle for dramatic scale/perspective.", "example": "Eiffel Tower from base looking up.", "discipline": [ "Composition" ], "medium": [ "Photo", "Video" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Sidebar", "category": "UI Component", "definition": "Lateral area for navigation/content.", "example": "Left rail with section links.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "
\n \n
\n

Welcome back!

\n

Here's what's happening today.

\n
\n
", "area": "Interface" }, { "term": "Sidebar Navigation", "category": "UI Component", "definition": "A vertical navigation panel positioned along the left or right edge of the screen. Can be fixed, collapsible, or toggle between icon-only and expanded states.", "example": "Build a collapsible sidebar nav that shows icons only when collapsed and full labels when expanded.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "", "area": "Interface" }, { "term": "Signal-to-Noise Ratio", "category": "Data", "definition": "The proportion of meaningful content (signal) versus distracting or irrelevant elements (noise). High signal-to-noise means users focus on what matters without visual or informational clutter.", "example": "Increase signal-to-noise: remove decorative icons that don't aid comprehension, simplify the color palette, and cut the copy by 30%.", "discipline": [ "Composition", "UI/UX" ], "medium": [ "Code", "Data Viz" ], "essential": false, "sample": "", "area": "UX & Layout" }, { "term": "Simplicity & Minimalism", "category": "Technique", "definition": "Clean backgrounds and few elements.", "example": "Lone tree at dawn with mist.", "discipline": [ "Composition", "Style" ], "medium": [ "Photo", "Illustration" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Single Column", "category": "Technique", "definition": "A linear layout presenting content in one vertical column, maximizing readability and focus. Common for articles, landing pages, and mobile-first designs.", "example": "Use a single-column layout for the blog post with a max-width of 720px centered on the page.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "", "area": "UX & Layout" }, { "term": "Skeleton Loader", "category": "UI Component", "definition": "A placeholder UI that mimics the layout of content while it loads. Uses animated gray shapes to indicate where text, images, and elements will appear.", "example": "Show a skeleton loader with pulsing rectangles while the user profile data fetches from the API.", "discipline": [ "UI/UX", "Animation" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n
\n
\n
\n
\n", "area": "Interface" }, { "term": "Skeuomorphism", "category": "Style/Aesthetic", "definition": "A design approach that mimics real-world objects with realistic textures, shadows, and details. Buttons look like physical buttons, notebooks have paper textures, and switches toggle like hardware.", "example": "Design a skeuomorphic audio player with brushed metal textures, embossed buttons, and a realistic volume knob.", "discipline": [ "UI/UX", "Style", "3D" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
📱

Skeuomorphic UI

Realistic textures. Physical metaphors. Tactile buttons.

", "area": "Aesthetics" }, { "term": "Slider", "category": "UI Element", "definition": "Drag control to set a value/range.", "example": "Price range slider on marketplaces.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Small Caps", "category": "Technique", "definition": "A typographic style where lowercase letters are replaced with smaller uppercase letters. Used for acronyms, subheadings, or elegant body text treatments to maintain even color on the page.", "example": "Set the author byline in small caps to differentiate it from the article title.", "discipline": [ "Typography", "Style" ], "medium": [ "Code" ], "essential": true, "sample": "
\n

The Art of Typography

\n

Written by Jane Doe — January 2026

\n
", "area": "Typography" }, { "term": "Small Multiples", "category": "Technique", "definition": "A series of similar charts or graphics using the same scale and axes, displayed side by side for easy comparison. Lets viewers spot patterns, differences, and trends across categories or time periods.", "example": "Display sales by region using small multiples: create a row of identical line charts, one per region, so trends are instantly comparable.", "discipline": [ "Composition" ], "medium": [ "Code", "Data Viz" ], "essential": false, "sample": "", "area": "UX & Layout" }, { "term": "Smash Cut", "category": "Technique", "definition": "Abrupt high-contrast cut (tone/volume/action).", "example": "Scream cuts to screeching train brakes and calm scene.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Smoke Art Photography", "category": "Technique", "definition": "Controlled smoke forms captured and stylized.", "example": "Studio smoke patterns against black backdrop.", "discipline": [ "Technical", "Style" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Snackbar", "category": "UI Component", "definition": "A brief, non-blocking message that appears at the bottom of the screen to confirm an action or show a status update. Auto-dismisses after a few seconds.", "example": "Show a snackbar saying 'Item added to cart' with an 'Undo' link after the user clicks 'Add to Cart.'", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n Item added to cart\n \n \n
\n
", "area": "Interface" }, { "term": "Split Screen", "category": "Technique", "definition": "A layout dividing the viewport into two equal or weighted vertical sections, often used to present two options, combine imagery with text, or create visual tension.", "example": "Create a split-screen hero with a product image on the left and headline with CTA on the right.", "discipline": [ "Composition", "Technical", "UI/UX" ], "medium": [ "Code", "Video" ], "essential": false, "sample": "
\n
\n

Left Side

\n

Content or image on one half.

\n
\n
\n

Right Side

\n

Complementary content on other half.

\n
\n
", "area": "Film & Video" }, { "term": "Sports Photography", "category": "Technique", "definition": "Fast action captured with long/fast lenses.", "example": "Freeze a game-winning goal mid-kick.", "discipline": [ "Technical" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "SQL Injection", "category": "Technique", "definition": "A security vulnerability where an attacker inserts malicious SQL code into user inputs (like form fields) to manipulate the database. One of the most common and dangerous web attacks. Prevented by using parameterized queries.", "example": "Use parameterized queries to prevent SQL injection on your login form...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// VULNERABLE — never do this\nconst query = SELECT * FROM users WHERE name = '${userInput}';\n// Attacker input: ' OR 1=1 --\n// Becomes: SELECT FROM users WHERE name = '' OR 1=1 --'\n\n// SAFE — parameterized query\nconst query = 'SELECT FROM users WHERE name = ?';\ndb.execute(query, [userInput]);", "area": "Web & Code" }, { "term": "SSH", "category": "Data", "definition": "Secure Shell. A protocol for securely connecting to and controlling remote servers over an encrypted connection. Used to run commands, transfer files, and manage infrastructure. Authentication typically uses key pairs instead of passwords.", "example": "SSH into your production server to check the application logs...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "# Connect to a remote server\nssh user@192.168.1.100\n\n# Connect with a specific key\nssh -i ~/.ssh/my-key.pem user@server.com\n\n# Generate an SSH key pair\nssh-keygen -t ed25519 -C \"your@email.com\"\n# Creates: ~/.ssh/id_ed25519 (private) + .pub (public)", "area": "Web & Code" }, { "term": "SSL Certificate", "category": "Data", "definition": "A digital certificate that proves a website's identity and enables HTTPS encryption. Issued by Certificate Authorities (CAs). When your browser shows a padlock icon, it means the site has a valid SSL/TLS certificate. Let's Encrypt offers free certificates.", "example": "Install an SSL certificate on your domain so traffic is encrypted over HTTPS...", "discipline": [ "Technical" ], "medium": [ "Code" ], "essential": false, "sample": "# Get a free SSL certificate with Let's Encrypt\nsudo certbot --nginx -d myapp.com -d www.myapp.com\n\n# Certificate files:\n/etc/letsencrypt/live/myapp.com/fullchain.pem # certificate\n/etc/letsencrypt/live/myapp.com/privkey.pem # private key\n\n# Auto-renews every 90 days", "area": "Web & Code" }, { "term": "Stepper", "category": "UI Component", "definition": "A navigation component that guides users through a multi-step process, showing numbered or labeled steps with visual indicators for completed, current, and upcoming stages.", "example": "Build a checkout stepper with steps for Cart, Shipping, Payment, and Confirmation.", "discipline": [ "Composition", "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "
\n
\n
✓
\n Details\n
\n
\n
\n
2
\n Payment\n
\n
\n
\n
3
\n Confirm\n
\n
", "area": "Interface" }, { "term": "Sticky Header", "category": "UI Component", "definition": "A navigation header that remains fixed at the top of the viewport as the user scrolls down the page. Maintains access to navigation without scrolling back up.", "example": "Build a sticky header with the logo on the left, nav links centered, and a CTA button on the right.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "", "area": "Interface" }, { "term": "Street Photography", "category": "Technique", "definition": "Candid everyday scenes with spontaneity.", "example": "Unposed city moments revealing social life.", "discipline": [ "Style", "Composition" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Strikethrough", "category": "Technique", "definition": "A horizontal line drawn through text, indicating deletion, completed items, or deprecated content. CSS offers control over color, thickness, and style variations.", "example": "Apply strikethrough to completed tasks in the checklist for clear visual feedback.", "discipline": [ "Typography", "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "
\n

$99.00 Original Price

\n

$49.00 Sale Price

\n

\n Strikethrough with custom color\n

\n
", "area": "Typography" }, { "term": "Swiss Design", "category": "Style/Aesthetic", "definition": "A clean, grid-based approach emphasizing clarity, readability, and objectivity. Features strong typography hierarchy, asymmetric layouts, and mathematical precision.", "example": "Build a Swiss-style portfolio with a strict grid, Helvetica typography, and generous white space.", "discipline": [ "UI/UX", "Style", "Typography", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "

Swiss\nDesign

Grid-based. Objective. Mathematical precision in typography.

ClarityFunctionOrder
", "area": "Aesthetics" }, { "term": "Tab Bar", "category": "UI Component", "definition": "A horizontal set of labeled tabs that switch between different views or content sections without leaving the page. Only one tab is active at a time.", "example": "Use a tab bar to switch between Overview, Features, and Pricing sections on the product page.", "discipline": [ "Composition", "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "
\n
\n \n \n \n \n
\n
", "area": "Interface" }, { "term": "Table", "category": "Data", "definition": "A specific collection of data organized in rows and columns, similar to a spreadsheet. Each table stores one type of entity (e.g., movies, users, orders).", "example": "Write a query for the movie_cache table...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "CREATE TABLE movie_cache (\n movie_key INT PRIMARY KEY,\n title TEXT,\n rating DECIMAL,\n runtime INT\n);", "area": "Web & Code" }, { "term": "Tag", "category": "UI Element", "definition": "Keyword label for categorization.", "example": "Chips showing \"Design\", \"Photography\".", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Text Masking", "category": "Technique", "definition": "A technique where text acts as a mask revealing an underlying image, video, or pattern. The text shape clips the background, creating visually striking headlines.", "example": "Mask the hero headline with a looping video of ocean waves for an immersive effect.", "discipline": [ "Typography", "Style", "Composition" ], "medium": [ "Code", "Video" ], "essential": false, "sample": "
\n

OCEAN

\n
", "area": "Typography" }, { "term": "Text Shadow", "category": "Technique", "definition": "A CSS property that adds shadow effects specifically to text characters. Useful for improving readability over images or creating stylized typography effects.", "example": "Add a soft text shadow to the hero headline so it reads clearly over the background image.", "discipline": [ "Typography", "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "
\n

Text Shadow\nReadable over any background

\n
", "area": "Typography" }, { "term": "Text Stroke", "category": "Technique", "definition": "An outline applied to the edges of text characters. Creates hollow or outlined typography effects, often used for bold display headlines or layered text treatments.", "example": "Use a white text stroke on the dark headline to create an outlined display effect.", "discipline": [ "Typography", "Style" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
\n

OUTLINED

\n
", "area": "Typography" }, { "term": "Tilt-Shift Photography", "category": "Technique", "definition": "Lens movements to control plane of focus/lines; miniature faking.", "example": "City scene made to look like a model.", "discipline": [ "Technical", "Composition" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Toast Notification", "category": "UI Component", "definition": "A brief, non-blocking message that appears temporarily to provide feedback about an action. Typically slides in from a corner and auto-dismisses.", "example": "Display a success toast in the bottom-right corner when the form submits successfully.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": true, "sample": "
\n
\n ✓\n Changes saved successfully!\n
\n
", "area": "Interface" }, { "term": "Toggle", "category": "UI Element", "definition": "On/off switch for binary state.", "example": "Dark mode toggle.", "discipline": [ "UI/UX" ], "medium": [], "essential": false, "sample": "", "area": "Interface" }, { "term": "Tooltip", "category": "UI Component", "definition": "A small popup that appears when hovering over or focusing on an element, providing additional context or explanation without cluttering the interface.", "example": "Add a tooltip to the info icon that explains what the setting does on hover.", "discipline": [ "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n
\n \n
\n This is a helpful tooltip!\n
\n
\n
\n
", "area": "Interface" }, { "term": "Tracking", "category": "Data", "definition": "The uniform adjustment of letter spacing across an entire word, line, or block of text. Unlike kerning, tracking affects all characters equally.", "example": "Add loose tracking to the all-caps subheading to improve legibility.", "discipline": [ "Typography" ], "medium": [ "Code" ], "essential": true, "sample": "", "area": "Typography" }, { "term": "Two-Factor Authentication (2FA)", "category": "Technique", "definition": "A security method that requires two different forms of verification to log in: something you know (password) and something you have (phone, hardware key) or something you are (fingerprint). Blocks most account takeover attacks.", "example": "Enable 2FA on all admin accounts using an authenticator app...", "discipline": [ "Technical" ], "medium": [ "Code" ], "essential": true, "sample": "# 2FA factors\n1. Something you know → password, PIN\n2. Something you have → phone (TOTP app), hardware key (YubiKey)\n3. Something you are → fingerprint, face scan\n\n# Common implementations:\n- TOTP (Time-based One-Time Password) — Google Authenticator\n- SMS codes (less secure)\n- Hardware keys — FIDO2 / WebAuthn", "area": "Web & Code" }, { "term": "Type Hierarchy", "category": "Technique", "definition": "The visual organization of text using size, weight, color, and spacing to establish importance and guide readers through content in a logical order.", "example": "Establish a clear type hierarchy with H1 for the page title, H2 for sections, and body text for paragraphs.", "discipline": [ "Typography", "Composition" ], "medium": [ "Code" ], "essential": true, "sample": "
\n

Heading 1

\n

Heading 2

\n

Heading 3

\n

Heading 4

\n

Body text with comfortable line height for readability.

\n
", "area": "Typography" }, { "term": "Underline Styles", "category": "Technique", "definition": "Decorative line treatments beneath text, beyond the default browser underline. CSS allows control over color, thickness, offset, and style (solid, dashed, wavy, dotted).", "example": "Use a wavy underline in the brand color beneath key terms for playful emphasis.", "discipline": [ "Typography", "UI/UX" ], "medium": [ "Code" ], "essential": false, "sample": "
\n

Solid underline

\n

Wavy underline

\n

Dotted underline

\n
", "area": "Typography" }, { "term": "Value", "category": "Data", "definition": "The specific piece of data located at the intersection of a column and a row (e.g., '120 mins' or 4.5). Also referred to as a cell.", "example": "Find rows where the value in the runtime column is greater than 90...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "SELECT * FROM movie_cache WHERE runtime > 90;", "area": "Web & Code" }, { "term": "Vaporwave", "category": "Style/Aesthetic", "definition": "A retro-futuristic aesthetic blending 80s/90s nostalgia with surreal imagery—pink and teal gradients, Roman busts, palm trees, old tech, and glitchy visuals.", "example": "Create a vaporwave landing page with sunset gradients, Greek statue imagery, and retro computer elements.", "discipline": [ "UI/UX", "Style", "Color" ], "medium": [ "Code", "Illustration" ], "essential": false, "sample": "
🏛️
🌴
A E S T H E T I C

Vaporwave

リサフランク420 / 現代のコンピュー\nSunset gradients. Greek busts. Digital nostalgia.

", "area": "Aesthetics" }, { "term": "VPN", "category": "Data", "definition": "Virtual Private Network. Creates an encrypted tunnel between your device and a remote server, hiding your traffic from outside observers. Used to access private networks securely, bypass geo-restrictions, and protect data on public Wi-Fi.", "example": "Connect to the company VPN to access internal services from home...", "discipline": [ "Technical" ], "medium": [ "Code" ], "essential": true, "sample": "# How a VPN works (conceptual)\nWithout VPN:\n You → [open internet] → Website\n (ISP can see your traffic)\n\nWith VPN:\n You → [encrypted tunnel] → VPN Server → Website\n (ISP sees encrypted traffic to VPN only)\n\n# Common protocols: WireGuard, OpenVPN, IPSec", "area": "Web & Code" }, { "term": "Webhook", "category": "Technique", "definition": "A mechanism where one application sends an automatic HTTP POST request to another when a specific event occurs. Think of it as a reverse API — instead of you asking for data, the data comes to you.", "example": "Set up a webhook so Stripe notifies your server whenever a payment succeeds...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// Express endpoint that receives a webhook\napp.post('/webhooks/stripe', (req, res) => {\n const event = req.body;\n if (event.type === 'payment_intent.succeeded') {\n // handle successful payment\n }\n res.status(200).send('OK');\n});", "area": "Web & Code" }, { "term": "WebSocket", "category": "Technique", "definition": "A communication protocol that provides a persistent, two-way connection between a client and server. Unlike HTTP (request-response), WebSockets let the server push data to the client in real time (e.g., chat apps, live dashboards).", "example": "Open a WebSocket connection to stream live price updates...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": false, "sample": "const ws = new WebSocket('wss://api.example.com/live');\nws.onmessage = (event) => {\n console.log('Update:', event.data);\n};", "area": "Web & Code" }, { "term": "Wedding Photography", "category": "Technique", "definition": "Events documenting couples and ceremonies.", "example": "Creative couple portrait reflecting personality.", "discipline": [ "Style" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "White Space", "category": "Technique", "definition": "The empty or negative space between design elements. Proper use of white space improves readability, visual hierarchy, and overall composition.", "example": "Add more white space around the CTA button so it stands out from the surrounding content.", "discipline": [ "UI/UX", "Composition", "Typography" ], "medium": [ "Illustration", "Code" ], "essential": true, "sample": "
\n
\n

Generous Spacing

\n

White space lets content breathe and improves readability.

\n
\n
\n

Visual Clarity

\n

Empty space creates focus and reduces cognitive load.

\n
\n
", "area": "Typography" }, { "term": "Wildlife Photography", "category": "Technique", "definition": "Animals in natural habitats, often remote.", "example": "Telephoto shot of hunting predator.", "discipline": [ "Technical", "Composition" ], "medium": [ "Photo" ], "essential": false, "sample": "", "area": "Photography" }, { "term": "Wipe", "category": "Technique", "definition": "Transitional reveal via directional image wipe.", "example": "Star Wars-style screen wipe following character motion.", "discipline": [ "Technical" ], "medium": [ "Video" ], "essential": false, "sample": "", "area": "Film & Video" }, { "term": "Wireframe", "category": "Technique", "definition": "A low-fidelity visual guide showing the skeletal framework of a page or screen. Wireframes focus on layout and content hierarchy without styling details.", "example": "Let's start with a wireframe to nail the information architecture before moving into high-fidelity mockups.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Illustration" ], "essential": true, "sample": "", "area": "UX & Layout" }, { "term": "XSS (Cross-Site Scripting)", "category": "Technique", "definition": "A vulnerability where an attacker injects malicious scripts into web pages viewed by other users. The script runs in the victim's browser and can steal cookies, sessions, or data. Prevented by sanitizing and escaping user input.", "example": "Sanitize all user-generated content to prevent XSS attacks on your forum...", "discipline": [ "Technical", "Programming" ], "medium": [ "Code" ], "essential": true, "sample": "// VULNERABLE — renders raw user input\nelement.innerHTML = userComment;\n// Attacker input: \n\n// SAFE — escape HTML\nfunction escapeHtml(str) {\n return str.replace(//g, '>');\n}\nelement.textContent = userComment; // also safe", "area": "Web & Code" }, { "term": "Z-Pattern", "category": "Technique", "definition": "A layout strategy based on the natural eye movement across a page: top-left to top-right, then diagonally down to bottom-left, then across to bottom-right. Effective for pages with minimal text.", "example": "Arrange the hero with logo top-left, CTA top-right, supporting image bottom-left, and signup bottom-right following a Z-pattern.", "discipline": [ "UI/UX", "Composition" ], "medium": [ "Code" ], "essential": false, "sample": "", "area": "UX & Layout" }, { "term": "Zero Trust", "category": "Technique", "definition": "A security model that assumes no user, device, or network should be trusted by default — even inside the corporate network. Every request must be authenticated, authorized, and continuously validated. 'Never trust, always verify.'", "example": "Adopt a zero trust architecture so every internal service verifies requests...", "discipline": [ "Technical" ], "medium": [ "Code" ], "essential": false, "sample": "# Zero Trust principles\n1. Verify explicitly — authenticate every request\n2. Least privilege — give minimum access needed\n3. Assume breach — design as if attackers are inside\n\n# In practice:\n- No implicit trust for internal traffic\n- Micro-segmentation between services\n- MFA everywhere, short-lived tokens", "area": "Web & Code" } ]