“Our intelligence is what makes us human, and AI is an extension of that quality.” –Yann LeCun

Introduction

Old Days

In the past, when we worked on the frontend (the part of a website you see and interact with), we focused on things like components or whole websites. No matter the project, whether we got instructions in tools like Jira or in documents, our job was to figure out what was needed. We'd look at screens and designs, often with the help of a designer. Then, armed with the project requirements and designs, the frontend engineer got to work. They used HTML, CSS, and JavaScript to turn those requirements and designs into a website that you can click around on. Let's keep it simple; I won't get into specific frameworks. The goal was to make a website that works well in a browser.

Now that we have these two things, let’s dive into our workflow. As we begin working on a new project, our first step is to organize the file structure. We look for parts of the code that can be reused and separate out CSS styles. Whether we're using a specific framework or crafting our own CSS, we identify common elements and pull them out, building the project bit by bit. This approach helps us minimize repetitive work and steer clear of unnecessary duplication.

When we encounter a problem, our go-to move is to open up Google and start searching for solutions. If Google isn't our cup of tea, we might turn to alternatives like Yandex or Bing – whichever search engine we prefer. Alternatively, we consult reference books. We revisit a specific book, read a relevant chapter, and hunt for solutions. If we can't find the answers we're looking for, we explore articles or reach out to the developer community. We might even tweet about our issue. Essentially, this manual effort is part and parcel of our daily routine, especially when it comes to using Google search or Stack Overflow – the trusted companions of developers worldwide.

Most of the time, you know, the problem was always that time was wasted not in writing the code; rather, it was wasted in preparation and problem-solving. After that, the code would come as the last thing. Someone would start by taking the business requirements, roll up their sleeves, and write the code right away. Maybe people who are excited or just starting out as developers would do this. However, the coding phase is actually the last stage. Before that, there are many preparations that take time – preparations that take up most of the time.

Personally, I search, read books, read articles, go left and right – all to ensure that I implement the business requirements well, supporting maintainability, scalability, and other aspects. So, what happens is that when I face something – let’s say a case – where certain things stand in my way, and there’s no one above me in the hierarchy in the company I work for to consult him, I have to ask people outside the company, and in the community. Usually, this is the normal case, no one around me to ask directly so who can provide me the information in a short time. So, I have to go through this search exercise, which can take a lot of time.

In the end, the solution might be a single line of code or a function. I might not even know if there’s a helper available in a library. So, what I’m saying is that time is burned in searching, preparation, reading business requirements, negotiation, and many other things. Then, finally, you prepare the project – set up the file structure, define your reusable components, define common styles. You might be dealing with single-page application architecture, server-side rendering, micro frontend, or other approaches in the front-end project. After all that, the code comes as the last piece.

Nowadays

AI is something we've been hearing about for a while, and it's always been a contentious topic. It's typically easier for large companies to invest in it, like Google, Microsoft, Amazon, and similar companies, rather than startups, mid-level companies, or even companies with a size of around two thousand employees who may not have the capability to invest time in searching or implementing anything related to AI.

I'm not an expert in AI, but we've never talked about or faced the need to work with AI before. AI used to be at a certain level and with certain people, mainly researchers and scientists, but now there are AI tools almost for free and available to the public, and anyone, regardless of their education or cultural background, can access these tools and ask AI agents questions, for example, and get answers. This wasn't available, for example, a year and a half ago. So, this era we're in now, and AI, is the next big thing.

AI is going to dominate many fields, it's going to replace certain jobs, and all of this has only emerged within the past year and a half or so. Before that, none of this was really a topic of discussion.

It must be part of your work routine

The whole story is that now, no matter what your age or level of education is, you're obligated to keep up with the trend, to go along with AI tools, and to try to benefit from them and use them in your work. They won't necessarily replace you.

After many debates and discussions with many people, they say if we have two developers applying for a job and both have the same development skills, but one knows AI tools and knows how to use them and the other doesn't, naturally people would go with the developer who knows AI tools because it increases productivity and save time.

I remember a friend told me about a company where there was an opportunity open with a salary almost reaching $100,000 a year. They didn't want just any developer; they wanted someone who knows how to work with AI to the extent that the task isn't just about delivering the code only; it's about delivering the code along with the prompt questions were that you asked to the AI agent, which eventually delivers the code. The idea now is that they want someone who understands the process well and is an expert in it, which saves them time, increases productivity in general, instead of wasting time doing a regular search, asking people around, reading articles and all that manual efforts.

AI Assistants

The emergence of AI assistants has revolutionized knowledge access, allowing users to train specialized agents with specific sources like reference books. This accessibility, largely propelled by OpenAI, benefits both users and AI developers, as interactions refine AI models. The continuous input loop enhances AI capabilities, leading to advancements such as ChatGPT iterations and tools like MidJourney, Dall-E, and Sora for generating images and videos. Microsoft's integration of OpenAI technology into products like Copilot and Bing further demonstrates the widespread impact of AI development.

AI Tools

So what are the AI tools available now on the market that can be useful on daily basis for the front end developers? Actualy, There are a lot of tools and every day there is a new tool appear in the markcet trying to fill a specific need or gap, so i tried the following and some other i am still trying

• Github Copilot or tabnine
• Codium AI
• Microsoft Copilot
• Phind
• v0.dev

Github Copilot

GitHub Copilot is an AI coding assistant that helps developers write code. It integrates into a programmer’s development environment and provides autocomplete suggestions by analyzing the file and related files. It uses the OpenAI Codex model to generate relevant code, functions, and algorithms from scratch or from natural language descriptions.

Main features for me

• Autocompelete

GitHub Copilot provides autocomplete-style code completions from an AI pair programmer as you code. As you start writing code or code-related items (comments, test, and more), Copilot presents suggestions automatically in the editor to help you code more efficiently.

• Github Copilot Chat

GitHub Copilot Chat is a chat interface that lets you interact with GitHub Copilot, to ask and receive answers to coding-related questions within GitHub.com and supported IDEs. The chat interface provides access to coding information and support without requiring you to navigate documentation or search online forums.

tabnine

Tabnine is an AI code completion tool that helps developers code faster with fewer errors in all programming languages. Tabnine uses publicly available code and contextual awareness to provide real-time suggestions in your IDE. Tabnine is meant to be a pal, a buddy, a mentor that lives inside your IDE and discovers best practices for you.

What are the key distinctions between GitHub Copilot and Tabnine, as perceived by the average developer?

Mainly, there are two points

• Copilot primarily offers suggestions in the form of code snippets or entire lines, whereas Tabnine goes a step further by seamlessly integrating with your workflow and offering more comprehensive suggestions. Consequently, developers are more inclined to embrace and utilize Tabnine's code suggestions.
• In terms of pricing structure, Tabnine stands out from Copilot. Microsoft currently offers Copilot solely as a commercial product without a free plan. Conversely, Tabnine offers an excellent free plan, enabling developers to leverage its capabilities without any financial obligations.

Codium AI

CodiumAI is a developer tool leveraging AI to produce insightful tests for code written in Python, JavaScript, and TypeScript. It examines code, docstrings, and comments to devise a customized testing strategy, crafting test code that not only verifies functionality but also uncovers edge cases.

// Generated by CodiumAI

describe('logger', () => {

    // logs a message with a given type
    it('should log a message with a given type', () => {
      const consoleSpy = jest.spyOn(console, 'log');
      logger('Hello', 'info');
      expect(consoleSpy).toHaveBeenCalledWith('info', 'Hello');
      consoleSpy.mockRestore();
    });

    // logs a message with undefined type
    it('should log a message with undefined type', () => {
      const consoleSpy = jest.spyOn(console, 'log');
      logger('Hello', undefined);
      expect(consoleSpy).toHaveBeenCalledWith(undefined, 'Hello');
      consoleSpy.mockRestore();
    });
});

Microsoft Copilot

Microsoft Copilot is an AI-powered tool designed to enhance productivity and creativity. It offers a chat experience that helps users understand information better and can be used in various applications, including select Microsoft 365 apps. Copilot includes features like text, voice, and image chat capabilities, summarization of documents and web pages, and image creation

Microsoft Copilot is available on various platforms for a seamless experience. It supports Windows and Mac OS, and is currently supported in Microsoft Edge or Chrome browsers. Additionally, there’s a Copilot app that you can download for a more integrated experience. For mobile users, Copilot’s functionalities can be accessed through compatible web applications.

Microsoft Copilot is powered by Microsoft Azure OpenAI Service. It relies on leading generative AI tools from OpenAI, namely ChatGPT-4 and DALL-E 3. Copilot is more than OpenAI’s ChatGPT embedded into Microsoft 365. It’s a sophisticated processing and orchestration engine working behind the scenes to combine the power of LLMs, including GPT-4, with the Microsoft 365 apps and your business data in the Microsoft Graph. The endgame for Microsoft seems to be to have a general PC copilot that can open and manipulate apps on your device for you.

I find it easier to use Microsoft Copilot instead of ChatGPT. It's because Copilot is already built into Windows, which I use. Also, it works right inside Microsoft Edge, my preferred browser, instead of Google Chrome.

Phind

Before delving into the concept of Phind, let's first clarify what an AI model entails.

An AI model is a mathematical representation of a real-world process, system, or phenomenon designed to perform specific tasks or make predictions based on input data. These models are trained using machine learning techniques, where they learn patterns and relationships from large datasets.

Before we talk about Phind, let's mention two important AI models: ChatGPT and Claude AI.

What is ChatGPT?

ChatGPT is a conversational agent powered by OpenAI's GPT (Generative Pre-trained Transformer) technology. It's an artificial intelligence model designed to understand and generate human-like text based on the input it receives. ChatGPT can engage in conversation, answer questions, provide recommendations, generate creative content, and perform various other text-based tasks. It's trained on a diverse range of internet text, allowing it to have a broad understanding of language and context.

Personally, I have utilized ChatGPT for a many purposes beyond programming. These include seeking assistance in enhancing my writing, crafting my own custom agents, harnessing DALL-E for image generation, refining code, and more.

What is Claude AI?

Claude AI, or the latest version of the model, Claude 3, is Anthropic's version of ChatGPT. Like ChatGPT, Claude 3 is an AI chatbot with a special large language model (LLM) running behind it. However, it is designed by a different company, and thus offers some differences than OpenAI's current GPT model. It's probably the strongest competitor out of the various ChatGPT alternatives that have popped up, and Anthropic continues to update it with a ton of new features and limitations.

"What's the cost for utilizing it? Alright, I opted for Phind!"

Phind

Phind is an intelligent answer engine for developers. Focused on helping you solve challenging problems, it uses generative AI to get you from idea to solution. Connected to the internet and, optionally, your codebase, Phind always maintains the right context.

I'm currently exploring Phind, and it shows great promise to me. Specifically designed for developers, it encompasses search and chat functionalities. Remarkably, it can serve as your primary search engine. In terms of chat capabilities, you have the flexibility to switch between various models. Additionally, it supports VS Code extension, allowing seamless querying of your local code without resorting to copying and pasting into a browser.

Regarding subscription fees, I pay $20 per month and gain access to four models: GPT-4, Claude Opus (Claude 3), Phind-70B, and Phind-34b. This pricing seems quite reasonable when compared to alternatives like ChatGPT, ClaudeAI, and even Microsoft Copilot.

v0.dev

v0 is a generative user interface system by Vercel Labs powered by AI. It generates copy-and-paste friendly React code based on shadcn/ui and Tailwind CSS that people can use in their projects.

For me, v0 serves as an excellent starting point to swiftly generate components or even entire pages. It's built on shadcn/ui and tailwind, which align perfectly with my preferences. Naturally, to access additional credits and higher quality features, upgrading to the $20 pro plan is necessary.

Conclusion

The developer can no longer rely on traditional methods, such as manual searches and article readings, to find specific solutions. They now face the challenge of expending significant effort to achieve desired outcomes, while alternative solutions, such as AI tools, could save them 70% or even 80% of their time.

In today's landscape, developers must familiarize themselves with 2, 3, or however many tools necessary to streamline their workflows. Ultimately, the goal is to adopt tools that enhance efficiency. While some tools may come with a price tag, there are often free or very affordable alternatives available. For instance, GitHub Copilot's counterpart, tabnine, offers a free plan accessible to all. Simply creating an account and integrating the extension into Visual Studio Code should suffice. It's important to note that not all tools require financial investment; experimentation with multiple options until finding the most suitable one is crucial.

When confronted with a problem, the reflexive action might once have been to resort to a search engine like Google. However, the paradigm has shifted. Now, one can turn to ChatGPT or similar AI tools, describe the issue, and pose targeted questions to obtain direct answers. This approach circumvents the need to sift through numerous search results, saving both time and effort. In contrast to traditional search methods, AI enables swift access to accurate information without extensive reading or browsing.

In simple terms, before, people usually found answers on the first page of Google. But finding what you need on the internet is a skill. AI can help save time by asking the right questions and giving helpful answers without needing to look through lots of stuff. And if the answer suggests trying something else, you can ask more questions. The AI remembers what you're talking about, so you'll eventually get a good answer. So, developers should use AI tools, or they might get left behind by others who do.

Note: This article, authored by myself and refined with the assistance of ChatGPT, is a testament to collaborative improvement. Cheers! ✌🏼.