"Have you ever been so reliant on a tool that you forgot how to function without it? Yeah, me neither... until I met Gemini."
Okay, so, recently, I think some of you might have experienced something quite similar - there is some kind of issue regarding the clipboard functionality of Gemini Pro. I must admit that Gemini/ChatGPT has become a deeply integrated part of my life so much so that I stopped working on my current showcase project when the copy-and-paste feature wasn't working. I felt...stuck. Yeah, I know it sounds silly now when I say it out loud, but for a few days, I didn't touch the coding (plus, I was also dealing with something on the personal front).
My point is that this was one of those examples of what I want to discuss today—our overreliance on specific tools to the point that we can no longer do what we're supposed to know how to do when we didn't have those tools. Do you remember a time before we had Gemini? Or Lovable? Or Firebase Studio? I do.
The StackOverflow Copy-and-Paste Era
Remember those days when we'd frantically Google coding solutions, praying for a Stack Overflow answer that would magically fix everything? Yeah, those were the days... or were they? I'll admit, I've been guilty of blindly copying and pasting code snippets more times than I'd like to admit. There was this one time I was wrestling with a particularly nasty JavaScript bug... like the early days of trying to customise a JS DatePicker so that it would display as "dd/MM/YYYY" when the only JS DatePicker was based on the US formatting of "MM/dd/yyyy". Let's just say it involved a lot of head-scratching, a few choice curse words, and a renewed appreciation for the importance of reading documentation.
The thing is, readily available solutions can be a double-edged sword. On one hand, they're incredibly helpful for saving time and learning from others. But on the other hand, they can lull us into a false sense of security. It's easy to think, "Someone else has already solved this, so I don't need to strain my brain cells." Add to that the rise of "vibe coding" – where the focus is on flow state and coding to chill beats – and it's no wonder some of us might be tempted to take the easy way out.
Don't get me wrong, I'm all for finding a groove and enjoying the process! But even in a state of blissful coding zen, we can't forget that AI tools – powerful as they may be – are still tools. They're extensions of our intentions, not replacements for them.
AI and Devs: The Ultimate Coding Power Couple (Think Mulder and Scully, But With Less Aliens)
Think of it like this: you wouldn't walk into a restaurant and say, "Bring me food!" and expect a perfectly prepared, five-course meal tailored to your exact tastes, would you? (Okay, maybe some of us would, but you get the point!). It's the same with AI coding assistants. If we're not clear about what we want, down to the specific ingredients, flavours, and presentation, we can't expect the AI to conjure up our ideal solution magically.
Take the other day, for example. I was trying to build out the Stats view for my AceIt dashboard and asked Gemini (my official AI best buddy, by the way!) for some help. But I was slightly distracted and kept leaving some minor details out. We ended up going back and forth for almost four hours, and I still couldn't solve the problem. But as soon as I figured out what was missing, the solution immediately became simple.
This recent experience reminded me that, at the end of the day, a developer still has to understand not just the problem and the solution but also how to get there.
Flexing My Tailwind CSS Prowess: Why Sometimes the Best Code is the Code You Write Yourself
While working on the Assignments Listing view today, I could've relied upon Gemini to help generate the entire piece of code. If time were of the essence, I probably would've gotten Gemini's help for sure.
But nope! I wanted to take this opportunity to challenge myself. I've been aiming to deepen my skills in tailwindcss for some time. And there is no better time than right now. So I spent a few hours writing the UI's code, line-by-line on my own.
<div
className="flex items-center w-full section-header-wrapper"
onClick={() => setIsOngoingExpanded(!isOngoingExpanded)}
>
<div className="flex flex-col justify-center items-center w-5 aspect-square transition-transform duration-250 ease-in-out">
<ChevronRight
className={`h-4 w-4 ${isOngoingExpanded && "rotate-90"}`}
/>
</div>
<div className="flex-1 flex-col justify-start items-center">
<h2 className="section-header">On-going Assignments:</h2>
</div>
</div>
{isOngoingExpanded ? (
<div className={`flex items-center w-full h-max mb-16`}>
{/* Ongoing Assignments Section starts here. */}
<ListView
data={assignmentsData.filter(a => a.status === "ongoing")}
item={assignmentsRender}
style={{ width: '100%', height: (assignmentsData.filter(a => a.status === "ongoing").length * 110) + 2 }}
/>
{/* Ongoing Assignments Section ends here. */}
</div>
) : (<div className="flex h-16 w-full" />)}
The part of the UI that I am most pleased with is the ListView item render function. While working on the first sub-section of the UI, I had this inspiration and idea to make use of the .filter() method to pass only the relevant records to the assignmentsRender() function. That way, I won't have to write multiple render functions for each sub-section of the Assignments Listing view.
const assignmentsRender = (props: ListViewItemProps) => {
const item = props.dataItem;
return (
<ListViewItemWrapper
className="p-8 h-[100px]"
style={{ borderBottom: "1px solid lightgrey" }}
>
<div className="flex flex-row w-full h-[80px] mt-[10px] mb-[10px]">
<div className="flex flex-col items-center justify-start w-[68%] h-full">
<div className="flex-1 text-2xl font-bold w-full items-center">
{item.assignmentTitle}
</div>
<div className="flex text-md font-normal w-full h-max items-center">
Next Milestone: {item.milestone.title} ({item.milestone.date})
</div>
</div>
<div className="flex flex-col w-[32%] items-center justify-end h-full">
{item.status === "ongoing" || item.status === "submitted"
? (
<div className="flex text-lg font-normal w-full items-center justify-end pr-4 h-1/2">
<div className="mr-2 w-16">
<ProgressBar
value={item.progressPercent * 100}
labelVisible={false}
min={0}
max={100}
progressStyle={{ borderRadius: "2px" }}
style={{
borderRadius: "2px"
}}
/>
</div>
<div className="w-8 justify-end pr-4">
{Math.round(item.progressPercent * 100)}%
</div>
</div>
) : (
<div className="flex text-xl font-semibold text-green-800 w-full items-center justify-end pr-2 h-1/2">
COMPLETED
</div>
)
}
<div className="flex text-lg font-normal w-full items-center justify-end pr-2 h-1/2">
<ChipList
selection={'single'}
defaultData={item.tags}
chip={(props: ChipProps) => {
const { dataItem } = props;
return (
<Chip
text={dataItem.tagTitle}
value={dataItem.id}
style={{
backgroundColor: "#e51a5f",
color: "#efefef"
}}
/>
);
}}
/>
</div>
</div>
</div>
</ListViewItemWrapper>
);
};
While the UI doesn't look perfect [yet], I walked away from this experience with a new sense of confidence in my skills as a front-end engineer. I am glad that I didn't take the easy way out today. I could've, but I didn't. And that is also precisely the same reason that enabled me to become the world's top front-end developer.
While others had relied on solutions and ideas that have been pre-generated, I've always sought to break those solutions and ideas down into smaller parts so that I could figure out how they came up with the solution/answers. Sometimes, I would even take things a step further, create a better solution, and repost what I've learned/created.
Some Final Closing Thoughts
I love AI tools. I love Gemini Pro. They are the best creations ever made for devs because now, we can automate a lot of the repetitive coding that we used to have to write by hand. Thank God for that.
But I will still find the greatest fulfilment when writing my code, especially when it comes to creating something a little more complex, or customized.
So, the next time you're tempted to hit the "Generate Code" button, take a moment to consider the alternative. Challenge yourself. Embrace the struggle. You might be surprised by what you can achieve and the confidence you'll gain.