47:"/_next/static/chunks/2g8w-80ml0qgh.js" 48:"/_next/static/chunks/0iv56yrji_20j.js" 49:"/_next/static/chunks/26v-2o8eqscfn.js" 4a:"/_next/static/chunks/0lc44eilyyvky.js" 4b:"/_next/static/chunks/1jl6tco-uuy-j.js" 4c:"/_next/static/chunks/1ot1rbfa0d_n4.js" 4d:"/_next/static/chunks/3n7h0f3nk8y8p.js" 4e:"/_next/static/chunks/3k2gyg36fnag_.js" 4f:"/_next/static/chunks/3m0r7x0jt5wm7.js" 50:"/_next/static/chunks/2fohwszm1xz1m.js" 51:"/_next/static/chunks/3bgoyiso1rhn7.js" 52:"/_next/static/chunks/19bc9syhv3w28.js" 53:"/_next/static/chunks/0wa9m1-tphf9u.js" 54:"/_next/static/chunks/0m2d8jznc9t02.js" 55:"/_next/static/chunks/1xu72k8i0p_ma.js" 56:"/_next/static/chunks/2a1rt036gjwtj.js" 57:"/_next/static/chunks/1s05-oinjbm85.js" 58:"/_next/static/chunks/20k3408cq3fwt.js" 59:"/_next/static/chunks/1_lo_qve3gu86.js" 5a:"/_next/static/chunks/3di53f0fz7pw_.js" 5b:"/_next/static/chunks/3m1xjj5kw5fie.js" 5c:"/_next/static/chunks/0so1i35v7xcta.js" 5d:"/_next/static/chunks/082jo-0ajazgr.js" 5e:"/_next/static/chunks/0-a64pg0hn7g7.js" 5f:"/_next/static/chunks/09nq57stwzkgf.js" 60:"/_next/static/chunks/20329i6m_04t6.js" 61:"/_next/static/chunks/0i3-eynrkvqi7.js" 62:"/_next/static/chunks/0oag6lffx7d01.js" 63:"/_next/static/chunks/1nyz-fz1mk3y6.js" 64:"/_next/static/chunks/1dl4k5870muic.js" 65:"/_next/static/chunks/2ozcrjb_hh74t.js" 66:"/_next/static/chunks/18ggtgz2yf759.js" 67:"/_next/static/chunks/1tn-0fivsxsv1.js" 68:"/_next/static/chunks/0hlb44ca7-4a2.js" 69:"/_next/static/chunks/1ch_-e7_eco00.js" 6a:"/_next/static/chunks/40mq7ggq-ozo4.js" 6b:"/_next/static/chunks/2112y_x317i7a.js" 6c:"/_next/static/chunks/2k8pepwc4pxns.js" 6d:"/_next/static/chunks/2hr13i-t0krnb.js" 6e:"/_next/static/chunks/0hy4a31wjpabs.js" 6f:"/_next/static/chunks/2mw79vtbi206x.js" 70:"/_next/static/chunks/253gnmj0-cj17.js" 71:I[593304,["$2d","$2e","$2f","$30","$31","$32","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70"],"OwnedHydration"] 72:T711,// Error hierarchy based on contract violations // Base class for all API errors abstract class ApiError extends Error { abstract readonly category: 'client' | 'server'; abstract readonly retryable: boolean; } // Consumer violated preconditions class PreconditionViolationError extends ApiError { readonly category = 'client' as const; readonly retryable = false; constructor( public readonly parameter: string, public readonly requirement: string, public readonly actual: unknown ) { super( `Precondition violated: ${parameter} must ${requirement}, ` + `but was ${JSON.stringify(actual)}` ); } } // Provider failed to meet postconditions class PostconditionViolationError extends ApiError { readonly category = 'server' as const; readonly retryable = true; // Usually indicates a bug or transient issue constructor(message: string) { super(`Postcondition violated: ${message}`); } } // Usage in implementation function getUserById(userId: number): Promise { // Check preconditions - consumer's responsibility if (!Number.isInteger(userId) || userId <= 0) { throw new PreconditionViolationError( 'userId', 'be a positive integer', userId ); } // Attempt operation const user = database.findUser(userId); // Verify postconditions - our responsibility if (user && user.id !== userId) { // This shouldn't happen - indicates a bug throw new PostconditionViolationError( `Retrieved user.id (${user.id}) doesn't match ` + `requested userId (${userId})` ); } return user; }73:T5e1,// Contract definition (the interface) interface PaymentGateway { /** * Processes a payment transaction. * * PRE: amount > 0, currency is valid ISO 4217 code * POST: Returns transaction ID on success * THROWS: PaymentDeclinedError if card declined * THROWS: InvalidAmountError if amount <= 0 */ processPayment(amount: number, currency: string): Promise; } // Original implementation: Stripe class StripeGateway implements PaymentGateway { async processPayment(amount: number, currency: string): Promise { // Uses Stripe SDK const response = await stripe.charges.create({ amount, currency }); return response.id; } } // New implementation: Different provider class AdyenGateway implements PaymentGateway { async processPayment(amount: number, currency: string): Promise { // Uses Adyen SDK - completely different implementation const response = await adyen.payments.create({ amount: { value: amount, currency } }); return response.pspReference; } } // Consumer code doesn't change at all class CheckoutService { constructor(private gateway: PaymentGateway) {} async checkout(cart: Cart): Promise { // Works with Stripe, Adyen, or any future implementation const txnId = await this.gateway.processPayment( cart.total, cart.currency ); return new Order(cart, txnId); } }74:T535,// Too Low: Exposes implementation details interface StorageService { // Leaks that we use PostgreSQL executeSqlQuery(sql: string): Promise; // Leaks internal file structure writeToFile(path: string, content: Buffer): Promise; } // Too High: Not actionable interface DataService { // What kind of operations? This tells us nothing performOperation(data: unknown): Promise; } // Just Right: Meaningful operations, hidden implementation interface DocumentStore { /** * Stores a document with the given key. * If a document with this key exists, it's replaced. * * PRE: key is non-empty string, document is valid JSON-serializable object * POST: Document is durably stored and retrievable by key */ store(key: string, document: object): Promise; /** * Retrieves a document by key. * * PRE: key is non-empty string * POST: Returns document if found, null if not found * INVARIANT: retrieve(key) returns what was stored at key */ retrieve(key: string): Promise

Usability Principles

Usability Principles