Skip to content

cool-code.md

Latest commit

 

History

History
147 lines (123 loc) · 4.64 KB

cool-code.md

File metadata and controls

147 lines (123 loc) · 4.64 KB
Raw

Cool Code Patterns & Solutions

Dynamic Message Alignment with Template Literals

The Code

<div class="message ${message.sender_id === currentUserId ? 'sent' : 'received'}">

How It Works (Beginner's Guide)

  1. Template Literals (${...}):

    • Think of these as "smart strings" in JavaScript
    • Regular strings use quotes: "hello" or 'hello'
    • Template literals use backticks: `hello`
    • The ${} is like a window where you can put JavaScript code inside a string
    • Example: `Hello ${userName}` might output "Hello John"

  2. Ternary Operator (condition ? valueIfTrue : valueIfFalse):

    • This is a shortcut for an if/else statement
    • Regular if/else: 
      let className;
if (message.sender_id === currentUserId) {
    className = 'sent';
} else {
    className = 'received';
}
    • Same thing with ternary: 
      let className = message.sender_id === currentUserId ? 'sent' : 'received';

  3. Dynamic Class Assignment:

    • Classes in HTML control how elements look (via CSS)
    • Instead of having fixed classes, we can change them based on conditions
    • Example: A message bubble appears blue and on the right if you sent it, or gray and on the left if someone else sent it

Real-World Application (Simple Example)

Imagine a chat app like WhatsApp:

  1. When you send a message:

    • You see your message on the right side (blue bubble)
    • This happens because message.sender_id === currentUserId is true
    • So the class becomes message sent

  2. When you receive a message:

    • You see their message on the left side (gray bubble)
    • This happens because message.sender_id === currentUserId is false
    • So the class becomes message received

CSS Implementation Explained

/* Base styles for all messages */
.message {
    position: relative;     /* Allows positioning relative to its normal position */
    max-width: 70%;        /* Message bubbles won't be wider than 70% of container */
    margin-bottom: 10px;   /* Space between messages */
    display: flex;         /* Uses flexbox for layout */
    flex-direction: column; /* Stacks children vertically */
}

/* Styles for messages you sent */
.message.sent {
    align-self: flex-end;  /* Pushes message to the right side */
}

/* Styles for messages you received */
.message.received {
    align-self: flex-start; /* Pushes message to the left side */
}

/* The actual message bubble when you sent it */
.message.sent .message-content {
    background-color: #007bff; /* Blue background */
    color: white;              /* White text */
}

/* The actual message bubble when you received it */
.message.received .message-content {
    background-color: #e0f7fa; /* Light blue background */
    color: #333;              /* Dark gray text */
}

Why It's Cool (Explained)

  1. Concise:

    • Does a lot with very little code
    • Without this, you'd need many lines of if/else statements

  2. Declarative:

    • The class names clearly show what they do
    • sent and received are easy to understand
    • Better than cryptic names like msg-type-1

  3. Maintainable:

    • Want to change how messages look? Just update the CSS
    • No need to touch the JavaScript code
    • Makes design changes quick and easy

  4. Reusable:

    • This same pattern works for many similar situations
    • Any time you need something to look different based on a condition
    • Examples: online/offline status, dark/light mode, etc.

  5. Performance:

    • CSS is faster than JavaScript for visual changes
    • Browsers are optimized for CSS class changes
    • Smoother user experience

Similar Use Cases (With Examples)

  1. Toggle Buttons:

    <button class="button ${isPlaying ? 'playing' : 'paused'}">
  ${isPlaying ? '⏸️ Pause' : '▶️ Play'}
</button>

  2. Status Indicators:

    <div class="user ${isOnline ? 'online' : 'offline'}">
  ${userName} is ${isOnline ? 'available' : 'away'}
</div>

  3. Form Validation:

    <input class="input ${isValid ? 'valid' : 'invalid'}"
       value="${userInput}"
       placeholder="Enter email">

  4. Theme Switching:

    <body class="theme ${isDarkMode ? 'dark' : 'light'}">
  <!-- page content -->
</body>

Common Gotchas (Things to Watch Out For)

  1. Remember to use backticks (`) not quotes (' or ")
  2. The condition must return true/false
  3. CSS classes must be defined in your stylesheet
  4. Test both conditions to make sure both states work

[More patterns will be added as we discover them...]