I remember 5-6 months ago thinking about how I could do everything but UI.
Contracts/backend wasn’t too difficult – just a matter of working through it and meticulously testing the business logic
But creating UIs – oh boy I was really not able to get over this issue.
It seemed like such a massive wall between creating an actual application and learning the puzzle pieces to make it work.
The issues with UI are twofold:
lack of a good foundation to create a UI along with best practices
death by a thousand papercuts
State management issues, etc
Isolated – these were workable issues, but working through a ton of these stalled any momentum with trying to move forward and make a usable React app.
The key breakthrough for me was leveraging AI to help me with learning frontend – so here is a quick overview of my process for using these AIs.
Copilot (Paid, Free if you go to school):
Copilot has two forms – the first is the autocomplete that we all know and love – and the second is the copilot chat.
With the autocomplete, you can do soft prompting by providing some context on what the component is going to do. If you’re going to have a dropdown menu in the navbar, you can add a comment, and it’ll provide a completion for that menu.
However – I do find myself using copilot chat more with UIs in particular, as Copilot often gets much quieter with completions/less useful as the codebase increases in size and complexity (as it can with UI).
Copilot chat is rumored to be GPT 3.5 turbo but finetuned on code to make it more performant. Whatever it is – responses are really quick which is awesome.
“alignment”:
However – Copilot chat is more prone to turning things down which is a huge source of frustration when this happens. It also blocks public code from being shown, which
e.g. I might ask Copilot to insert some Tailwind to ‘justify some content’ and Copilot will just refuse.
Context:
Another gripe is the lack of context – Copilot chat will focus it’s context window on wherever the user’s cursor is at time of chat, and while it supposedly can access multiple files – in practice I’ve never seen this work.
On a more practical note – this lack of context means that given the choice between chat context and code context, Copilot will prefer the chat context – so if you copy and paste some code, modify it in your code, but ask a follow up question, the response will rehash the code from the original response instead of your modified one.
The fix for both refusal or long chat histories is to click the ‘plus’ button to start a new chat or to delete the previous chat.
Rating:
Overall 7/10 – it’s definitely become a Google level replacement and theres not a ton of hallucinations. It’s a speedy boi too – very fast completions.
Phind (Free):
I discovered Phind more recently and have begun using it a lot more – Phind helps me with medium to higher level tasks.
It takes a few more seconds for Phind to respond to queries, and Phind doesn’t have text completion like there is for Copilot.
But it’s much smarter and has a better grasp for context. In other words, if Copilot chat is a like a summarized google search, Phind is like a very junior intern – it’s that good.
You can add and remove context – the context is the killer as when you start to stretch outside of the context window, the AI can’t as easily pinpoint code that you might be talking about and provide suggestions, in other words the helpfulness jumps off a cliff.
However this fine grain is helpful especially for UI work.
I might have a component within a page, and since both are in context, I can ask about interactions between the two.
It’s also more proactive about solutions – it’ll ask clarifying questions or allow you to (with a click of a button) implement the changes directly into your code.
One particularly nice feature is that it already has a bunch of popular software libraries loaded inside for context, and if it doesn’t know it can also conduct a search to serve you the answer.
Theres some parts that are rough around the edges (Unending requests, no completions) but overall I find it nice for tasks that require some more knowledge.
Rating:
Also a 7/10. Wish it had some more polish with the features and faster responses but it’s dang good at what it does and offers some really neat capabilities. I’ve also never really seen any hallucinations which is pretty interesting.
Conclusion:
To an extent I feel like relying on AI is a bit of a crutch – and that I should be more self reliant and learn the system myself – that I’m cheating myself out of a valuable experience just coding things out and learning from first principles.
This is true, AI likes to skew for more verbose completions, or provide weird/incorrect results – but AI gave me the confidence to get over my UI learning curve and help me make cool shit, and that’s something I’m grateful for.