🔥ChatGPT could not solve my CSS layout issue!! 🤯😱

In partnership with

Daily Issue #123 | Subscribe to DS | Daily Sandbox Pro

Hello Developers!

Discover how asking "What has to be true?" can revolutionize strategy, explore how human-centered design reshapes AI and automation, simplify lazy loading with the Intersection Observer API, optimize performance by reducing network latency, and learn from the evolving open-source world with insights from TresJS and Storyblok.

Discover Hue-Fit, an AI-powered men’s clothing recommendation system, along with forms-flow-ai for workflows and analytics, spark-stack for AI-driven app building, and polis for gathering open-ended feedback. Learn how to refine strategy with the right questions, explore human-centered design in AI, simplify lazy loading with ScrollMargin, and optimize performance by tackling network latency.

Dive in and keep coding!

• What has to be true for your strategy to be true? - Discover the power of asking, "What would have to be true for this to be true?" and transform how your team approaches strategy. This article shares a proven method to identify hidden assumptions, prioritize risks, and uncover fresh insights that can pivot your team toward success. Dive in to learn how this simple question can spark breakthroughs and reinvigorate your strategy!

• Machines to Minds: Human-Centered Design in a Technology-Driven Era - Explore how human-centered design (HCD) is shaping the future of AI and automation, emphasizing empathy and user-focused innovation. This article dives into real-world successes, failures, and actionable strategies for integrating HCD with automation, showcasing how prioritizing users can create inclusive, efficient, and transformative systems.

• Simplify Lazy Loading With Intersection Observer’s ScrollMargin - The new scrollMargin property in the Intersection Observer API is a game-changer for handling elements within scroll containers, offering a seamless solution to long-standing issues with lazy loading. Currently supported in Chrome and Edge 120, it solves the problem where rootMargin fails inside scroll containers, making intersections more predictable and flexible.

• What Are Network Latency And Round Trip Time (RTT)? - Learn how network latency impacts website performance and how Content Delivery Networks (CDNs) can dramatically enhance speed by reducing round trip times (RTT). This article explores latency, its effects on metrics like TTFB, and practical tools like Google Lighthouse and CrUX data to measure and optimize performance.

  

• Navigating The Challenges Of Modern Open-Source Authoring - Discover the dynamic world of modern open-source authoring, where creativity meets collaboration. From the community-driven growth of TresJS to the structured innovation at Storyblok, this article explores the challenges, lessons, and strategies shaping today’s OSS projects.

More news here →

The future of presentations, powered by AI

Gamma is a modern alternative to slides, powered by AI. Create beautiful and engaging presentations in minutes. Try it free today.

Problem: I needed to upgrade my Tailwind CSS layout from a 2-column layout to a 3-column layout on mobile devices. Using my existing HTML code, I asked it to generate the updated layout for me. Here's the prompt I used.

Prompt: 
update the following layout from a 2-column layout to a 3-column layout, make sure the input fields are on the same row on mobile phones

<div class="flex flex-col">
    <input type="text" />
    <small>City</small>
</div>
<div class="grid grid-cols-2 gap-4 md:col-span-2">
    <div class="flex flex-col">
        <select />
        <small>State</small>
    </div>
    <div class="flex flex-col">
        <input type="text" />
        <small>Zip</small>
    </div>
</div>

AI Suggestion: Surprisingly, ChatGPT didn’t provide a workable solution—it ended up placing each input field on its own row instead. 😱😱😱

<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-1 md:mt-4 md:grid-rows-auto">
    <div class="flex flex-col">
        <input type="text" />
        <small>City</small>
    </div>
    <div class="flex flex-col">
        <select />
        <small>State</small>
    </div>
    <div class="flex flex-col">
        <input type="text" />
        <small>Zip</small>
    </div>
</div>

The error was in this line `<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-1 md:mt-4 md:grid-rows-auto">`

Solution: I ended up updating the code myself to achieve the desired result

<div class="grid grid-cols-3 gap-4 mt-1 md:mt-4">

More code snippets here →

Learn how to make AI work for you

AI won’t take your job, but a person using AI might. That’s why 1,000,000+ professionals read The Rundown AI – the free newsletter that keeps you updated on the latest AI news and teaches you how to use it in just 5 minutes a day.

Sign up to start learning.

• Hue-Fit - An AI-Powered Men's Clothing Recommendation System. This project compose of mobile app for men's clothing recommendation and web app for product inventory and order management.

• forms-flow-ai - an open source forms-workflow-analytics solution framework.

• spark-stack - a tool for building web applications through an AI-powered chat interface.

• polis - Open Source AI for large scale open ended feedback

More code libs here →

Remote (USA) - Software Engineer - $225,000 USD.

Remote (USA) - Sr. Software Engineer - $113,200 - $188,600 USD.

📣 HELP SPREAD THE WORD 

🚀 Spread the Code! Love what you read? Share the newsletter with your fellow devs - every recommendation helps power up the community.

💻 Sponsor the Dev Journey! Keep the bytes flowing and the newsletter growing by becoming a sponsor. Your support helps maintain this valuable resource.

💬 Tweet the Deets! Share the latest with your code crew - let’s make this viral, not just a bug!

If you have built anything that you’d like to share with the community, get with me on X @dailysandbox_ 😀