🔥 Leveraging AI as a front-end developer

Hi there friend!

Mads Brodt here. I’ve decided to make some changes to the newsletter, so the Top 3 in Tech newsletter you know and love is now called Front-End Focus (exciting, right?). I’ve also moved to a new platform, Substack, meaning the emails will look a bit different than you’re used to. But as always, I strive to share the highest quality front-end content with you. So nothing has changed there!

The format will be quite similar, with a short essay on something that caught my attention these past two weeks - combined with a few links to new tools, cool resources or anything else I think is worth knowing as a front-end dev.

So, with that out of the way, let’s dive into today’s main topic:

Using AI in front-end development

You probably know that AI is all the rage right now, and has been for about a year since ChatGPT was released (time flies!). And just last week, OpenAI (the company behind ChatGPT and some other popular AI models) held their first ever developer conference, OpenAI DevDay. It featured tons of cool announcements, like an improved GPT-4 Turbo model with more context, a new API for creating your own assistants, and using DALL·E 3 to generate images programatically.

It’s no secret that the AI space is moving hella fast, and all these new tools are quite neat. But it can sometimes be hard to come up with practical use-cases for how AI can actually speed up your workflow as a front-end developer. I’m quite a big believer in the future of AI though, so I’ve tried to integrate it more into my own day-to-day and have experienced quite a significant improvement with just a few simple tools:

1. GitHub CoPilot. CoPilot has been a serious game changer for me, fundamentally changing the way I program. It’s fast, understands what I’m trying to do (most of the time 👀) and generally just speeds up my productivity. Of course it’s not perfect, but having it autocomplete certain browser or React API’s has been very helpful and saved me lots of trips to the documentation. It’s also great for scaffolding out tests, Storybook stories or other boilerplate-y code.

2. CoPilot Chat. The standard CoPilot extension is fine, but where I really think there’s gains to be had is using CoPilot Chat directly within VS Code. It’s like a ChatGPT window - except it understands your codebase and includes files in its reference context. I find it super helpful when you need a bit more back-and-forth to land on the right solution. One concrete example was where I had an object like this: const obj = { github: true, google: false }, representing the social accounts attached to a user. I wanted to present these in the UI like “Providers: Github” if enabled. I explained the problem to CoPilot Chat, along with the object I was working with, and within 5 seconds had a completed function - iterating over the object keys, filtering to the selected ones, then mapping the connections back to an array of strings, each with a capital letter. The result looks like this:

   

   Could I have written this code myself? Yeah, sure. But it would’ve taken me a few minutes - and that’s assuming I didn’t make some silly mistake like forgetting that the charAt method exists, or that I should also handle if all the connections turn out to be false. Easy win with CoPilot Chat.

3. ChatGPT. Of course ChatGPT is also a very valuable tool by itself. I use it to give me inspiration for higher-level problems, but also to assist in other mundane tasks that all front-end developers also need to do at some point: Writing emails, planning workshops, how to do concrete actions in Excel to cleanup data etc. Lots of use-cases here that might not be obvious at first, but make a big difference once you start using them!

It’s safe to say that AI isn’t going anywhere, and the technology has already improved massively in just the last 12 months. Even though CoPilot still can’t properly add closing brackets - damn you, ‘)) - learning to embrace this new wave and use it to your advantage can provide massive productivity gains. It can also be a great teacher, pointing out solutions you maybe didn’t think of at first, helping to improve your understanding of a given problem.

Of course it’s not perfect, and being critical of any AI-written code should be a given. You also wouldn’t just straight-up copy/paste code from StackOverflow, right 😉?

Building your own projects on top of these AI API’s can also be super fun and a great way to learn more about AI. So I’d also recommend checking out this update from the OpenAI DevDay and using some of the API’s to improve your own products and build some cool stuff:

Check out the update blog post from OpenAI here

Links worth checking out

AI is of course not the only thing moving in the front-end world - so here’s a few links to some cool stuff that’s been happening recently:

1. One of my favourite YouTube channels is called Juxtopposed, and she frequently shares lots of AWESOME design- and code related tutorials with equal amounts insightful and hilarious content. She recently redesigned the entire Steam UI from scratch (that any gamer will know is long overdue…) and it’s a great look into all the UX and UI concerns that are relevant when working with larger platforms/tools/systems like Steam. Watch the video here.

2. TypeScript 5.3 went into RC (Release Candidate), meaning it’s very close to launch. It’s not the most exciting release to be honest with you, but it has some nice quality of life improvements and security updates like Import Attributes, narrowing types when using switch(true) statements and other neat details. Read the blog post here.

3. Fast-track your career: How Jordan Cutler went from Junior to Senior engineer in 2 years. In this article, my friend Jordan shares his journey of moving quickly up the ranks as a software engineer - and some actionable tips you can use to do the same, without getting burned out along the way. Check out the full article here.

That’s all, folks! Please let me know how you like the new format of the newsletter - I read and respond to every single email, and your feedback means a lot to me. Thank you, and have a great day 🙌