🔥ChatGPT helps with code, but struggles with CSS

In partnership with

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

Hello Developers!

Discover how conversational AI is transforming data collection with tools like FormChat, learn how open source projects can reshape your programming journey, and explore the pros and cons of Bash, Fish, and Zsh to choose your ideal shell. Dive into a step-by-step guide to becoming an AI developer in 2025 and master essential Linux commands every DevOps engineer should know.

Dive in and keep coding!

GenAI Secret Sauce for Chat-Based Forms - The future of data collection is conversational, replacing static forms with engaging, AI-driven chat experiences. From dynamic job applications to real-time feedback gathering, conversational AI transforms how we interact with users, offering tailored follow-ups and deeper insights. Explore FormChat, a proof-of-concept tool built with React and Node.js, and see how it brings this vision to life with natural conversations, smart validation, and easy data exports.

How Open Source Projects Changed My Perspective as a Programmer - Discover how diving into open source transformed my perspective on programming from a solitary activity to a collaborative and enriching experience. From learning the value of teamwork and mentorship to solving real-world problems and building confidence through small contributions, open source has been a game-changer.

Bash, Fish, and Zsh: Choosing Your Shell - When it comes to choosing a shell, Bash, Fish, and Zsh are the heavy hitters. They all have their fanbases, quirks, and strengths, but which one is right for you? Let’s break it down—no fluff, just real talk about their pros and cons. (I personally use Zsh, and I have nothing to complain about)

How to Become an AI Developer in 2025 - This guide provides a step-by-step approach to becoming an AI developer, starting with learning programming, math, and machine learning basics. It highlights essential tools like TensorFlow, PyTorch, and Scikit-learn, as well as the importance of data preprocessing and exploratory data analysis. The focus is on building foundational skills and gradually advancing with practice.

Essential Linux Commands for DevOps Engineers - As a DevOps engineer, mastering Linux commands is fundamental for managing infrastructure, automating tasks, and ensuring seamless deployments. This blog highlights critical Linux command categories that every DevOps professional should know.

More news here →

Hire Ava, the Industry-Leading AI BDR

Ava automates your entire outbound demand generation so you can get leads delivered to your inbox on autopilot. She operates within the Artisan platform, which consolidates every tool you need for outbound:

• 300M+ High-Quality B2B Prospects

• Automated Lead Enrichment With 10+ Data Sources Included

• Full Email Deliverability Management

• Personalization Waterfall using LinkedIn, Twitter, Web Scraping & More

Book a demo to see what Ava can do.

Problem: I was working on updating the same layout from a couple of days ago, as per my client’s request. I was asked to move the labels from below the input fields to above them, effectively covering the input field border to make it appear as if it were a <fieldset> legend. So, I figured that asking ChatGPT would save me time, and manual work.

Prompt: 
Update the following layout CSS by moving the <small> tag above the corresponding input field. Position it in the left upper corner, give it a white background that should partially cover the input field border

HTML:
<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: ALMOST WORKED!!! 🤔 The CSS that ChatGPT provided looked good at first, but unfortunately the final result was not what I had expected. See the screenshot below.

small {
    position: absolute;
    top: -0.5rem; /* Adjust based on the design */
    left: 0.75rem; /* Adjust based on the input padding */
    background: white;
    padding: 0 0.25rem;
    z-index: 1; /* Ensure it is above the input */
}

The labels have disappeared altogether!

Solution: After thinking about this for a little bit, I realized that the parent .flex-col class was missing position: relative to contain the <small> tag that had now its position set to absolute.

.flex-col {
   position: relative;
}

Even though ChatGPT did not provide a complete solution to the problem, it did point me in the right direction, which saved me time and effort. It is a tool to be used in programming as a helper to alleviate some of the workload. However, a human counterpart is still very much invaluable, and will be for a very long time!

More code snippets here →

There’s a reason 400,000 professionals read this daily.

Join The AI Report, trusted by 400,000+ professionals at Google, Microsoft, and OpenAI. Get daily insights, tools, and strategies to master practical AI skills that drive results.

Sign up now for free and work smarter, not harder.

• formchat - Transform your boring forms into engaging conversations! FormChat is an AI-powered form builder that turns traditional form-filling into natural, dynamic chat experiences. Say goodbye to rigid form fields and hello to conversational data collection that users actually enjoy.

• postal-mime - is an email parsing library that runs in browser environments (including Web Workers) and serverless functions (like Cloudflare Email Workers). It takes in a raw email message (RFC822 format) and outputs a structured object containing headers, recipients, attachments, and more.

• happy-dom - A JavaScript implementation of a web browser without its graphical user interface

• Gridstack.js v11.3.0 - Mobile-friendly modern Typescript library for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Has multiple bindings and works great with Angular (included), React, Vue, Knockout.js, Ember and others

• PowerGlitch - a standalone library with no external dependencies. It leverages CSS animations to glitch anything on the web, without using a canvas.

More code libs here →

Remote (USA) - Sr. Mgr, Software Engineering, Copilot Workspace - $112,800 - $299,300 USD.

Remote (USA) - Software Engineer - $86,000 – $103,000 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_ 😀