All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8668 bites
Page 259
Color Schemes: The Logic of Color Harmony
A color scheme is a logical combination of colors to achieve a goal, not just a random palette. It's used in UI design for brand consistency, in data viz to encode information, and in safety systems for high visibility.
Rule of Thirds: Guide the Eye, Don't Just Center
Don't center your subject; place key elements along the lines or intersections of a 3x3 grid. This creates a more dynamic, visually interesting composition in photos and UI layouts. The footgun is treating it as a rigid law; sometimes centering is better.
RGB vs. HSL: Two Ways to Tell a Computer 'Color'
RGB tells a computer how to mix light (Red, Green, Blue), while HSL describes color how humans perceive it (Hue, Saturation, Lightness). Use RGB for brand colors and HSL for intuitive variations. The footgun is creating low-contrast UIs that are unreadable.
Anatomy of a Typeface: Why Letters Lie to Your Eyes
Typeface anatomy is a system of optical illusions. Letters are drawn with inconsistent dimensions to appear uniform. This is why a circle must be taller than a square to look the same size. The footgun is trusting bounding boxes over your eyes for alignment.
Cognitive Load: Don't Make Users Think (Too Hard)
Think of a user's brain like a computer with limited RAM; cognitive load is the processing power your UI demands. High load from cluttered interfaces slows users down, causing them to miss details or abandon tasks.
"Miller's Law" is Ambiguous and Often Misused
"Miller's Law" isn't one rule, but a name for four distinct, unrelated principles. This ambiguity causes confusion in fields like psychology and computer science.
Hick's Law: More Choices, Slower Decisions
Hick's Law states that decision time increases logarithmically with the number of choices. It's why complex menus slow users down, forcing them into analysis paralysis.
Fitts's Law: Bigger, Closer Targets Are Faster to Hit
Fitts's Law predicts that the time to hit a target depends on its distance and size. This is why mobile buttons are large and context menus appear at your cursor. The footgun is making everything huge, which sacrifices information density and visual hierarchy.
Jakob's Law: Don't Reinvent the UI Wheel
Users spend most of their time on other sites, so they expect yours to work like everything else they already know. Leverage familiar patterns for navigation, icons, and workflows.
Affordances Are Actions, Signifiers Are Clues
An affordance is what's possible (a door can be pushed), while a signifier is the clue telling you how (the flat plate). In UI, a button's styling is a signifier for its click affordance. The footgun is saying 'affordance' when you mean 'signifier'.
UI Typography for Readability
Good typography isn't about fancy fonts; it's about making content effortless to read by controlling size, spacing, and alignment. It's crucial for body copy, headings, and labels. The footgun is using justified text or lines over 90 characters long.
Color Theory: Harmony, Contrast, and Meaning in UI
Color theory is a system for using contrast, harmony, and symbolism to guide user experience. It's applied in UI to create visual hierarchy, evoke brand emotions, and ensure readability.
Visual Hierarchy: Guiding the User's Eye
Visual hierarchy guides the user's eye by making important things look important. It uses contrast in size, color, and placement to create a path of importance, like a big headline versus small footer text.
Nielsen's 10 Heuristics: Rules of Thumb for UI Design
Nielsen's Heuristics are ten rules of thumb for evaluating if a design is user-friendly. Use them to spot usability issues in any interface, from apps to stovetops. The biggest mistake is treating them as strict laws, not flexible guidelines.
User-Centered Design: Build for Who, Not What
User-Centered Design (UCD) puts the user's goals, tasks, and environment at the core of development. This process shapes software and websites through user personas and real-world testing.
TypeScript Namespaces: The Original Module System
TypeScript namespaces bundle related code under a single global name, preventing name collisions. They are useful for older projects or UMD library types, but the footgun is using them in modern apps; prefer standard ES modules.
Identifying JS Library Structure for TypeScript Types
To type a JS library, first identify its structure: module, global, or UMD. This dictates your .d.ts file's shape. You'll check docs for import/require or <script> usage. The footgun is misidentifying a UMD library, leading to incorrect import types.
Shipping TypeScript Types in package.json
The types field in package.json tells TypeScript where to find your package's type definitions. Use it when publishing a library to enable autocompletion for users. The footgun is putting type dependencies in devDependencies instead of dependencies.
export = : TypeScript's CommonJS Export Syntax
Think of export = as TypeScript's version of module.exports. It replaces a module's entire export with a single value, like a class or function. It's used for compatibility with CommonJS modules. The footgun is mixing it with standard exports.
Module Augmentation: Adding Types to External Libraries
Module augmentation is like monkey-patching for types, letting you add definitions to external modules. Use it to add a user property to Express's Request object.