𝗛𝗼𝘄 𝘁𝗼 𝗰𝗼𝗱𝗲 𝘄𝗶𝘁𝗵 𝗚𝗶𝘁𝗛𝘂𝗯 𝗖𝗼𝗽𝗶𝗹𝗼𝘁?

A recent study by GitHub and Microsoft discovered that AI now authors 46% of new code. They also found that overall developer productivity surged by 55%, leading to more efficient coding processes.

But 𝗵𝗼𝘄 𝗚𝗶𝘁𝗛𝘂𝗯 𝗖𝗼𝗽𝗶𝗹𝗼𝘁 𝘄𝗼𝗿𝗸𝘀?

The process goes in the following steps:

𝟭. 𝗦𝗲𝗰𝘂𝗿𝗲 𝗽𝗿𝗼𝗺𝗽𝘁 𝘁𝗿𝗮𝗻𝘀𝗺𝗶𝘀𝘀𝗶𝗼𝗻: Your prompts are securely sent to Copilot, ensuring data privacy.

𝟮. 𝗖𝗼𝗻𝘁𝗲𝘅𝘁𝘂𝗮𝗹 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴: Copilot analyzes the code around your cursor, the file type, and other open files to offer relevant suggestions.

𝟯. 𝗖𝗼𝗻𝘁𝗲𝗻𝘁 𝗳𝗶𝗹𝘁𝗲𝗿𝗶𝗻𝗴: It filters out personal data and inappropriate content, focusing solely on generating helpful code.

𝟰. 𝗖𝗼𝗱𝗲 𝗴𝗲𝗻𝗲𝗿𝗮𝘁𝗶𝗼𝗻: Based on the intent identified in your prompts, Copilot crafts code suggestions that align with your coding style and project standards.

𝟱. 𝗨𝘀𝗲𝗿 𝗶𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝗼𝗻: Here, we can decide whether to use, tweak, or reject Copilot's suggestions.

𝟲. 𝗙𝗲𝗲𝗱𝗯𝗮𝗰𝗸 𝗹𝗼𝗼𝗽: Copilot learns from your interactions, improving its suggestions. Every time you tweak or reject its ideas, he knows from it. It employs techniques like zero-shot (asking without examples), one-shot (asking with an example), and few-shot learning (providing multiple examples) to adapt to our instructions, whether you provide examples or not.

𝟳. 𝗣𝗿𝗼𝗺𝗽𝘁 𝗵𝗶𝘀𝘁𝗼𝗿𝘆 𝗿𝗲𝘁𝗲𝗻𝘁𝗶𝗼𝗻: It remembers past prompts and interactions, making future suggestions more accurate.

🦺 How to make your web page faster before it even loads

As developers (and as front end developers in particular), we usually talk about web performance in the context of measuring what happens when we start to see things appear in a browser window, and when we can consume content or interact with the page. For example, the following Core Web Vitals guide the discussion on what we can see, use and experience:

First Contentful Paint (FCP), which measures the time from when the user first navigated to the page to when any part of the page's content is rendered,

Largest Contentful Paint (LCP), which is the point in in the page load timeline when the main content of the page has likely loaded, and

Interaction to Next Paint (INP), which measures how quickly a web page responds to user input.

🛢 React.js Performance Guide

Which JS framework is the most performant? React, Vue, Svelte, Angular,…? When trying to answer this question, we often get lost in comparing benchmarks for reactivity, bundle size, memory usage and other factors.

Of course we want to choose the best framework to create performant apps! But your app will only benefit from framework performance if you also follow best practices for performance optimization of web apps in general, and React apps in particular.

So, where to start? What impacts performance? This guide will cover the basics of React performance optimization, and list some tools and resources that will help you dive deeper into this topic.

The rise of vibe coding

In 2024, large language models (LLMs) took a quantum leap in code generation, turning what was once a futuristic dream into a daily reality for developers. From novices hacking together their first apps to seasoned engineers architecting complex systems, these advancements leveled the playing field.

🔎 Why would anyone need JavaScript generator functions?

Generators are an odd part of the JavaScript language. And some people find them a bit of a puzzle. You might be a successful developer for decades and never feel the need to reach for them. Which raises the question, if you can go so long without ever needing them, what are they good for?

🚎 11 HTML best practices for login & sign-up forms

Most websites have login or sign-up forms; they’re a critical part of business conversion. However, even popular sites fail to implement the 11 best practices mentioned in this article, and thus have at least one mistake. So, read on, then check your forms and improve your UX by using HTML technologies the way they should be used.

⚡️ Tooltip Best Practices

In this article, I try to summarize the best practices mentioned by various accessibility experts and their work (like this, this, and this) into a single article that’s easy to read, understand, and apply.

🫀 How to Remove a Specific Item from a JavaScript Array


Removing an item from an array is a common task in JavaScript, but it can be confusing if you’re just starting out. Let’s break down the easiest and most popular ways to do this, explained in plain English!

😱 CSS nesting improves with CSSNestedDeclarations

To fix some weird quirks with CSS nesting, the CSS Working Group resolved to add the CSSNestedDeclarations interface to the CSS Nesting Specification. With this addition, declarations that come after style rules no longer shift up, among some other improvements.

These changes are available in Chrome from version 130 and are ready for testing in Firefox Nightly 132 and Safari Technology Preview 204.

🪡 The most effective ways to improve Core Web Vitals

Over the years, the web community has built up a wealth of web performance optimization knowledge. While any one optimization may improve performance for many sites, all of them at once can feel overwhelming and, realistically, only some of them are applicable to any given site.

🪐 Exploring the browser rendering process

What occurs between typing a URL in your browser and the moment a webpage is displayed? Let's explore the complex rendering process of the browser in an interactive way.

💡 How to Easily Create an Accordion Without JavaScript: A Note for Front-End Developers

🖥 pop() method:

🌟 This method removes the last element of an array and returns the removed element.