Cool… I’ll be trying it out come Monday. I’m using redis via upstash in my nextjs project for quick social platform oauth integration ( PKcE and all). I’ll definitely give it a try.. thanks

What’s the DX like with valley compared to Redis?

It’s sad 😢… click baits everywhere

Would love to join

🙌

• Combine Flexbox with media queries to adapt layouts on mobile and desktop.

💡 Learning Objective: Master Flexbox properties to build responsive, organized layouts with minimal effort.

#CSS #WebDev #Flexbox #ResponsiveDesign #CodeTips

𝟯. 𝗥𝗲𝘀𝗽𝗼𝗻𝘀𝗶𝘃𝗲 𝗟𝗮𝘆𝗼𝘂𝘁𝘀:

Flexbox shines for responsive design because items adjust automatically to different screen sizes.
• 𝗨𝘀𝗲 𝗳𝗹𝗲𝘅-𝘄𝗿𝗮𝗽: 𝘄𝗿𝗮𝗽; to make items flow to the next line when there’s no space.
Example: Like wrapping groceries into a second bag when one is full.

• 𝗮𝗹𝗶𝗴𝗻-𝘀𝗲𝗹𝗳: Overrides alignment for individual items.

Example: Adjusting one photo on the wall to hang higher or lower.

• 𝗮𝗹𝗶𝗴𝗻-𝗶𝘁𝗲𝗺𝘀: Aligns items vertically (e.g., top, center, or stretch).

Example: Ensuring all your picture frames on a wall are level.

𝟮. 𝗔𝗹𝗶𝗴𝗻𝗺𝗲𝗻𝘁 𝗧𝗲𝗰𝗵𝗻𝗶𝗾𝘂𝗲𝘀:

• 𝗷𝘂𝘀𝘁𝗶𝗳𝘆-𝗰𝗼𝗻𝘁𝗲𝗻𝘁: Aligns items horizontally (e.g., left, center, or
space-between).
Example: Placing books evenly on a shelf.

𝙍𝙚𝙖𝙡-𝙇𝙞𝙛𝙚 𝙀𝙭𝙖𝙢𝙥𝙡𝙚:
Imagine packing a suitcase (flex container) with clothes (flex items). You can arrange the clothes horizontally (row) or stack them vertically (column), and everything adjusts to fit.

• 𝙙𝙞𝙨𝙥𝙡𝙖𝙮: 𝙛𝙡𝙚𝙭; : Activates Flexbox on a container.

• 𝙛𝙡𝙚𝙭-𝙙𝙞𝙧𝙚𝙘𝙩𝙞𝙤𝙣: Controls the direction of the items
(row, column).
• 𝙟𝙪𝙨𝙩𝙞𝙛𝙮-𝙘𝙤𝙣𝙩𝙚𝙣𝙩: Aligns items along the main axis.
• 𝗮𝗹𝗶𝗴𝗻-𝗶𝘁𝗲𝗺𝘀: Aligns items along the cross-axis.

🔑 𝙆𝙚𝙮 𝙄𝙣𝙨𝙞𝙜𝙝𝙩𝙨

1. 𝗕𝗮𝘀𝗶𝗰 𝗙𝗹𝗲𝘅 𝗖𝗼𝗻𝘁𝗮𝗶𝗻𝗲𝗿 𝗣𝗿𝗼𝗽𝗲𝗿𝘁𝗶𝗲𝘀:

Flexbox works by defining a parent element as a "flex container" (display: flex;) and its child elements as "flex items." This allows items to align, space out, and resize dynamically.

💡 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅?

Flexbox (short for Flexible Box Layout) is a CSS layout model designed to arrange items in a container efficiently—even when their sizes are unknown. It’s like organizing items in a toolbox, where each tool adjusts itself to fit neatly.

What’s the coolest way you’ve used the spread or rest operator? Let me know below! 👇

#JavaScript #WebDev #CodeTips #LearningToCode

💡 Learning Objectives
Understand how the ... operator simplifies array and object manipulation.
Learn to combine and clone data structures without mutating them.
Use spread and rest effectively in functions to handle arguments flexibly.

4. Spread for Arguments:

Real-Life Example: You have a collection of ingredients and need to pass them all into a blender (function).

Key Takeaway: Use rest to handle unknown numbers of inputs and spread to pass arrays as individual arguments.