DEV Community: Dev By RayRay

Stop Adding PR Reviewers One-by-One in Azure DevOps

Dev By RayRay — Fri, 07 Nov 2025 09:47:15 +0000

Are you still adding your teammates one by one to your Azure DevOps PRs?

You know the drill. You create your pull request, then click and search for Jane. Click, search for Bob. Click, search for Maria. Did you forget someone? Probably.

It's a repetitive task that's slow, tedious, and just gets in the way of merging your code.

There is a much cleaner, more efficient way to handle this. You don't want to manage a list of individuals; you want a single rule that says, "I need one approval from the Dev Team."

Let's build that rule. It's a "set it and forget it" fix using a Branch Policy.

Prerequisite: A Team

This trick relies on having your reviewers grouped into a 'Team' in Azure DevOps. If you haven't done this, it's a one-time setup and makes managing permissions much easier. Check the docs on how to create a team in Azure DevOps.

Your Branch Policy

You set this up once on your target branch (like main or develop), and it works forever.

Go to Project Settings (represented by the gear icon, located in the bottom-left corner).
Navigate to Repositories (under the Repos heading).
Click the repo you want, then the Policies tab.
Scroll to the 'Branch Policies' section and click on the branch you want to protect (e.g., main).
Find the "Automatically include reviewers" section and click the + button.

(If you want to read about all the policy options, you can find the official docs on branch policies here.)

Reviewer policy

Reviewers: Search for and select your team's name (e.g., [MyProject]\Dev Team). Do not add the individuals.
Policy requirement: Set this to Required.
Minimum number of reviewers: This option will now appear. Set it to 1.

Click Save.

What Did You Just Build?

From now on, every new PR to that branch will automatically add the Dev Team as a single, required block.

As soon as one person from that team approves it, the entire team block gets a green checkmark.

No more clicking on individual names. No more forgetting teammates. Your PR is unblocked, and you can get back to your flow. 😌

What's your favorite 'set it and forget it' setting in Azure DevOps? What's one small policy tweak that has removed the most friction for your team? Share it in the comments!

Beyond Vibe Coding: How I Use AI as a Tech Lead to Stay in Control

Dev By RayRay — Thu, 16 Oct 2025 12:45:25 +0000

I'm sure you're familiar with "vibe coding"—that creative process of building things based on a feeling, without a strict plan. It can be fun, but in a team environment, it simply doesn't work. It’s hard to scale, new people get lost, and the results are often messy.

For me, things have changed. I now focus on working with clear specifications, and I use AI as my co-pilot. Many people think using AI means you lose control, but I've found the opposite is true. When used correctly, AI is a powerful partner that helps you apply your knowledge more effectively, giving you more control, not less.

Here are the six main ways I use AI as a tech lead.

1. Supercharging My Git Workflow

I've used Git for a long time, so I'm comfortable with it. But being comfortable with a tool doesn't mean you're using it efficiently. This is where AI, especially GitHub Copilot, has made my daily Git work seamless.

Instead of typing every command by hand, I let AI handle the repetitive parts. It suggests sharp, accurate commit messages based on my changes, and most of the time they're perfect with just a few small tweaks. It can also create branch names for me based on the user story, which keeps everything consistent.

But the real game-changer is writing pull request descriptions. By connecting AI to our Azure DevOps board, it can generate a comprehensive summary of changes, including the rationale behind them, and automatically link to the corresponding user story. This frees me from tedious tasks so I can focus on what really matters: the quality of the code itself.

2. The AI-Powered Second Pair of Eyes: Code Reviews

As a tech lead, I frequently conduct code reviews for multiple teams, which means I don't always have the full context. Previously, it took a lot of time to get up to speed. Now, AI is my starting point.

I can ask it to explain changes in a pull request, identify potential problems I might have missed, or verify that code adheres to our team's coding rules. As long as our rules are written down, AI can handle a large part of the review, and it does it much faster than I ever could.

This approach enables me to focus on the most critical aspects, such as the core logic and architecture. It also helps me give better, fairer feedback. For instance, I can ask AI to "explain why we use dependency injection here." That simple request turns a standard comment into a valuable teaching moment for the whole team.

3. Staying in the Zone with AI and Azure DevOps

Connecting an AI assistant like GitHub Copilot to your project board—whether it's Azure DevOps, Jira, or GitLab—is a massive improvement for any developer's workflow. I can stay in my code editor—my focus zone—and still have a direct connection to our team's plan.

Through my editor, I can request additional information on a user story, seek help in understanding a new bug report, or even write and post comments for product owners. It effectively creates a bridge between the project plan and the actual coding work, ensuring that what I'm building is aligned with the team's goals and that everything is tracked properly.

4. Taming the CI/CD Beast

After years of building CI/CD pipelines in Azure DevOps, I’ve developed a solid understanding of how they work. But every so often, you run into a problem that’s hard to figure out.

"I remember spending two hours debugging a pipeline once, only to find it was a single misplaced character. Last week, a similar issue came up, and by pasting the error into Copilot Chat, I found the fix in less than two minutes."

My process for fixing these issues has completely changed. I just copy the strange error message from the pipeline, paste it into the chat with the AI, and since the AI can read my *.yml file, it often finds the problem right away. It’s this teamwork—my experience guiding the AI’s powerful pattern-matching—that helps me fix problems in a fraction of the time.

5. My Go-To Brainstorming Partner

Honestly, brainstorming is the main way I've used AI from the very beginning. It feels like having a senior architect on call 24/7. I use it for all sorts of things:

Technical ideas: "How can we build a good reusable component?" or "What are the pros and cons of different ways to build a component library?"
Improving code: "Why is this code so slow? Give me three ideas to make it faster."
Team skills: "Can you help me write this PR comment so it sounds helpful, not like an attack?" or "How can I help my interns understand this topic better?"

Regardless of your job, having an AI to help you think through ideas is incredibly useful. It consistently challenges my assumptions and pushes me to make better, more well-rounded decisions.

6. Why Specs Are More Important Than Ever

Using AI to build applications is powerful, but AI without clear specifications is a recipe for disaster. It’s like asking an intern to build a streaming platform in a few weeks. I often compare AI to an intern: you have to give it the right information at the right time. One single prompt is not going to create a perfect application.

The quality of the output you get from AI is a direct reflection of the quality of the input you provide. So, if managers think AI will replace developers, they first need to get much better at clearly defining their requirements.

For us developers, this is a good thing. By creating clear specifications that the team agrees on, we set the rules. We are still in control. We guide the AI to build what we planned, making sure the final product works well, is consistent, and meets the team's goals. Our jobs aren't disappearing; they're evolving.

At the end of the day, "vibe coding" is a relic of the past because modern software demands planning, teamwork, and scalability. AI, when guided by our own knowledge, is the best way to be more productive while staying in control.

How are you using AI in your role as a developer or tech lead? I'd love to hear your favorite tips in the comments below! 👇

Let's Talk About Accessibility (Without the Headache) 🧠😅

Dev By RayRay — Wed, 15 Oct 2025 09:38:58 +0000

Let's be honest. When you're a full-stack developer, juggling the front-end, back-end, database, and everything in between, "accessibility" can sometimes feel like just one more thing on an endless to-do list. I get it. You want to build great things, and sometimes the finer details of accessibility guidelines can feel a bit overwhelming, especially if you're not a front-end specialist.

For a long time, I treated accessibility as a "nice-to-have," something I'd get to after the core functionality was working. But I had a realization: what's the point of building something amazing if a significant portion of people can't even use it properly? Making the web accessible isn't just about ticking a box; it's about making our work usable for everyone. It’s about being inclusive.

The good news? It doesn't have to be a huge, complicated chore. I found a tool that has completely changed how I approach this, and I think it’ll do the same for you.

Meet Accented.dev: Your New Best Friend for Accessibility

I recently stumbled upon Accented.dev, a fantastic open-source tool that makes spotting accessibility issues incredibly simple. Seriously, it’s a game-changer. (You can also check it out on GitHub!)

What I love about it is how seamless it is. Accented is a frontend library that runs directly in your browser while you're developing. It’s built on the axe-core® engine, which is the gold standard for accessibility testing, so you know you're getting reliable feedback.

Here’s why I think you’ll love it:

See issues in real-time. As you're coding, Accented highlights any accessibility problems right on the page. No more running a separate audit at the end of a sprint. You see a problem, you fix it. Done.
It's super easy to set up. You can get it running with just a few lines of code. It doesn't matter if you're using React, Vue, Svelte, or even a legacy project with no framework. It just works.
No more context switching. The issues are flagged visually on the page and in the console. You can see exactly which element has a problem without having to dig through code to find it.
It’s completely free and open-source. Who doesn’t love that? ❤️

How It Works in Practice

Imagine you're building a new feature. You save your code, the page reloads, and little callouts appear next to a few elements. One might say an image is missing an alt tag, another might point out a button with low color contrast.

Instead of this being a problem you discover weeks later (or worse, never), you can fix it on the spot in a matter of seconds. It turns accessibility from a complex audit into a simple, continuous part of your development workflow. It’s like having a friendly accessibility coach looking over your shoulder.

Give It a Try!

If you've ever felt that accessibility was too complex or time-consuming to focus on, I really encourage you to give Accented.dev a try. It’s one of those rare tools that is not only powerful but also a genuine pleasure to use. It has helped me become a more mindful and inclusive developer without adding any friction to my workflow.

What are your go-to tools for accessibility? Or have you had a similar experience? Share your thoughts in the comments below. Let’s make the web a better place for everyone, one line of code at a time! 🚀

AI or Obsolete: Why Developers Need AI in Their Workflow

Dev By RayRay — Thu, 21 Aug 2025 12:53:26 +0000

Back in 2022, when I first heard the term "AI-powered developer", I pictured a robot typing code while I sat back. Today, that "robot" looks more like a VS Code extension, a CLI plugin, or even a teammate suggesting solutions right when I need them.

If you're still hesitant, I understand. I was curious and a bit uneasy as well. But the data is clear: AI in development isn't optional anymore - it's a must-have. In this post, I'll share why, what happens if you wait too long, what research shows about the impact of tools like GitHub Copilot, and how you can get started with your team.

1. Where We Are Today

AI is already part of daily work

Take a look around GitHub, your IDE marketplace, or even Stack Overflow—AI is everywhere. Tools like GitHub Copilot, Tabnine, and Cursor are no longer experiments; they’re part of how developers actually work.

They’re helping with:

Generating boilerplate code in seconds (Vue components, Pinia stores, composables).
Suggesting meaningful refactors for readability and performance.
Writing unit tests for your components.
Converting code between frameworks (Vue ↔ React) or JavaScript → TypeScript.

And it’s not just developers: managers are already using AI to spot bottlenecks, flag risky PRs, and track velocity more effectively.

What this means for us

This isn’t just hype. Studies confirm the benefits:

Faster coding – GitHub found developers completed tasks 55% faster with Copilot compared to those without it.
Higher satisfaction – In surveys, 60–75% of developers said Copilot made them feel more fulfilled and less frustrated.
Better focus – 73% said Copilot kept them “in the flow,” and 87% said it reduced the mental energy spent on repetitive work.
Quality maintained – Enterprise studies even showed higher PR merge rates and more successful builds with Copilot in the mix.

So, AI is already becoming a productivity layer on top of our existing workflows.

2. The Cost of Waiting

“We’ve managed fine without it.”

This is the line I hear most from experienced developers. But waiting has risks:

The truth is, teams that delay AI adoption risk being outpaced by those who embrace it. The data shows that adoption is quick once teams start: 81% of developers enable Copilot on the day they get access **, and **96% accept suggestions immediately.

3. What the Data Tells Us

Instead of telling stories, let’s look at the real numbers:

55% faster: In GitHub’s study, developers using Copilot finished coding tasks more than twice as quickly.
Better throughput: In an enterprise rollout, pull requests per developer increased by 8.7%, and merge rates were 15% higher with Copilot.
Quality intact: Teams saw **84% more successful CI builds**, meaning fewer regressions slipping through.
Happier developers: 90% of engineers reported feeling more fulfilled, and 95% said they enjoyed coding more with Copilot.
Widespread adoption: 40% of developers worldwide have tried Copilot, and 26% use it regularly, according to JetBrains’ 2024 survey.

These numbers paint a clear picture: Copilot isn’t just saving time—it’s improving quality and making work more enjoyable.

4. How to Get Started with Your Team

Here’s how you can introduce AI coding tools like Copilot without chaos:

1️⃣ Start small – Pick one tool (e.g. Copilot) and try it on a specific workflow, like scaffolding new Vue components or setting up composables.

2️⃣ Set expectations – AI is a co-pilot, not the pilot. Always review and test.

3️⃣ Train the team – Run a short demo, share effective prompts, and talk about pitfalls.

4️⃣ Standardize usage – Don’t let everyone reinvent the wheel. I built a GitHub Copilot Starter project for exactly this reason. It’s a template repository with ready-to-go instructions for coding standards, commit message conventions, accessibility guidelines, testing practices, project structure, and more. By cloning it, your team can keep Copilot usage consistent and aligned with your standards.

5️⃣ Measure impact – Track PR cycle times, test coverage, and run short surveys. GitHub even offers APIs to measure Copilot usage across teams.

6️⃣ Scale gradually – If the pilot is positive, expand. GitHub’s studies show it can take up to ~11 weeks for full benefits to show, so give it time.

5. What’s Next for AI in Development

AI is moving from “assistant” to collaborator. We’ll soon see:

AI-generated architecture diagrams from codebases.
Automated migrations between frameworks.
Assistants that adapt to your team’s coding style and domain knowledge.

The best way to prepare is to keep experimenting, join developer communities, and invest in upskilling. Prompting is quickly becoming as essential as Git.

Wrapping Up

The first time I let AI generate a Vue composable for me, I was skeptical—but it worked perfectly, even with a clear comment on how to reuse it. That’s when it clicked: the tools we use shape the work we do.

So here’s my challenge: on your next ticket, let AI help. Try Copilot, ask it to generate a Vue component with TypeScript support, and see how it feels.

Let’s turn curiosity into skills. 🚀

How to Use Azure DevOps MCP Server with GitHub Copilot in VS Code: Complete Setup Guide

Dev By RayRay — Tue, 17 Jun 2025 19:31:07 +0000

Ever find yourself juggling VS Code and Azure DevOps browser tabs all day? I know the feeling—every time I switch contexts, I lose my flow. 😩 But guess what: Microsoft just dropped an official Model Context Protocol (MCP) server that plugs Azure DevOps right into GitHub Copilot. Game‑changer, right? 🎉

In this post, I’ll show you how to set up and use the Azure DevOps MCP server with GitHub Copilot in VS Code. You’ll be able to see work items, update tasks, query project info, and more—all without leaving your editor. Let’s dive in!

What You'll Need (Prerequisites)

Before we dive in, make sure you have:

VS Code or VS Code Insiders installed
GitHub Copilot extension is active
Node.js 20 or higher
An Azure DevOps account with appropriate permissions
Azure CLI installed

Step 1: Authenticate with Azure

First, you need to authenticate with Azure DevOps through the Azure CLI (If not installed, follow the docs):

az login

This will open your browser and prompt you to sign in to your Azure account. Ensure you use the same account with access to your Azure DevOps organization.

Step 2: Create the MCP Configuration

In your project root directory, create a .vscode/mcp.json file with the following configuration:

{
  "inputs": [
    {
      "id": "ado_org",
      "type": "promptString", 
      "description": "Azure DevOps organization name (e.g. 'contoso')"
    }
  ],
  "servers": {
    "ado": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@azure-devops/mcp",
        "${input:ado_org}"
      ]
    }
  }
}

This configuration tells VS Code how to connect to the Azure DevOps MCP server using your organization name.

Step 3: Start the MCP Server

Save the mcp.json configuration file
Open the Command Palette in VS Code (Ctrl+Shift+P or Cmd+Shift+P)
Run the MCP server startup command
When prompted, enter your Azure DevOps organization name (just the name, not the full URL)

Step 4: Enable GitHub Copilot Agent Mode

Open GitHub Copilot in VS Code
Switch to Agent Mode
Look for Azure DevOps tools in the available tools list
Select the Azure DevOps MCP server tools

That's it! You're now ready to interact with Azure DevOps directly through GitHub Copilot.

How to Use Azure DevOps MCP with GitHub Copilot

Managing Work Items

View your assigned work items:

This will give you a list of all the assigned work items with your name.

Show me my assigned work items in Azure DevOps

But you can make it more advanced or specific:

Show me my assigned work items in Azure DevOps with the title's based on priority

Create new work items:

Adding new work items has never been easier! Just use a prompt like this, and it will create it for you.

Create a new user story titled "Implement user authentication" with description "As a user, I want to log in securely so that I can access my account"

Or if you want to create a task that belongs to a work item:

Create a set of tasks for work item 875342.
- Implement new auth method
- Update exisiting unit tests
- Create new unit tests

Update work item status:

Updating existing is also very handy! This saves us so much context switching!

Update work item 12345 to "In Progress" and add a comment that I've started working on it

Project and Repository Operations

List your projects:

If you have multiple projects you work on, you can list them easily.

List my Azure DevOps projects and show me the teams for my main project

Repository information:

Show me the repositories in this project and list the recent branches

Pull request management:

You are not just tied to one thing per prompt. Just combine multiple requests to do it.

I just created a PR for my authentication feature. Update work item 12345 to reference this PR and change the status to Code Review

Build and Test Management

Check build status:

Show me the status of recent builds for this project

Test plan information:

List test plans for this project and show me recent test results

Why Azure DevOps MCP in GitHub Copilot is So Powerful

1. No More Context Switching 💪

The biggest productivity killer in development is context switching. Research shows it takes an average of 23 minutes to fully refocus after an interruption. With Azure DevOps MCP, you can:

Check work item details without opening a browser
Update task status while reviewing code
Create follow-up tasks immediately after solving bugs
Query project information within your coding context

2. Natural Conversation with Your Project Data 💬

Instead of clicking through Azure DevOps UI menus, you can have natural conversations:

Show me work items in the current iteration for the Development Team, then create a new task for implementing API authentication

This conversational approach makes project management feel less like administrative overhead and more like a natural part of development.

3. Intelligent Task Updates After Development 🤖

After you create a pull request, you can immediately:

Link the PR to the relevant work item
Update the work item status to "Code Review"
Add implementation details as comments
Create follow-up tasks for testing or documentation

All without leaving VS Code.

4. Rich Context Understanding 🧠

GitHub Copilot with MCP access understands the relationship between your code and Azure DevOps work items. It can:

Help create better commit messages based on work item descriptions
Suggest relevant test cases from the user story acceptance criteria
Help decompose large user stories into smaller, manageable tasks
Provide context about requirements when you're coding

Real-World Example: Complete Development Workflow

Here's how a typical development session looks like that I have with Azure DevOps MCP:

Start the day:

Show me my assigned work items for this sprint

Begin working on a task:

Update work item 12345 to "In Progress" and add a comment that I'm starting the implementation

Need clarification on requirements:

Show me the full description and acceptance criteria for work item 12345

After creating a PR:

Update work item 12345 to reference PR #67 and change status to "Code Review"

Create follow-up tasks:

Create a new task for writing documentation for the authentication feature, link it to user story 12345

All of this happens without ever opening a browser tab or losing focus from your code.

Troubleshooting Common Issues

MCP Server Not Starting:

Ensure you're authenticated with Azure CLI (az login)
Check that your Azure DevOps organization name is correct
Verify Node.js 20+ is installed

Permission Issues:

Make sure your Azure account has appropriate permissions in Azure DevOps
Check that you're a member of the project you're trying to access
If it says you don’t have sufficient authorization, but you know you have. Visit Azure DevOps in the browser, sometimes this will fix it for me.

Connection Problems:

Restart VS Code after configuration changes
Verify the MCP configuration file syntax is correct
Check your internet connection and Azure DevOps service status

The Future of AI-Powered Development

This Azure DevOps MCP integration represents a fundamental shift in interacting with development tools. We're moving away from tool-hopping toward a unified experience where natural language becomes the interface to our entire development ecosystem.

The Model Context Protocol (MCP) is the key enabler here - it's like USB-C for AI integrations. Once a service has an MCP server, any MCP-compatible AI agent can use it without custom development work.

Get Started Today

The Azure DevOps MCP server is open source and available on GitHub at: https://github.com/microsoft/azure-devops-mcp

Setting up takes less than 10 minutes, but the productivity gains compound over time. You'll spend less time navigating tools and more time solving actual problems.

What's Your Experience?

Have you tried integrating MCP servers into your development workflow? What other tools would you love to see with MCP support?

I'd love to hear about your experience! Connect with me on X/Twitter or LinkedIn and let's discuss how AI is transforming our development workflows.

Vibe Coding: Is This the Future of Software Development?

Dev By RayRay — Wed, 26 Mar 2025 10:42:36 +0000

The world of software development is constantly evolving, and the latest buzz? Vibe coding. Its an AI-driven approach thats shaking up how we write code, making it faster, more intuitive, and more fun (not always, hahaha). But is it all hype, or is there something useful here? Lets dive in and see what vibe coding is about and whether its worth your attention.

So, Whats Vibe Coding?

Vibe coding flips the script on traditional development. Instead of painstakingly writing out every line of code, you describe what you want in plain language, and a large language model (LLM) generates the code for you. The concept gained traction after Andrej Karpathy introduced it earlier this year, and its been making waves ever since.

Think of it as having an AI-powered coding buddy that turns your ideas into working code. Its all about making development more conversational, reducing tedious work, and letting developers focus on solving more significant problems instead of getting stuck in syntax details.

https://x.com/karpathy/status/1886192184808149383

Why Its a Big Deal

Vibe coding has the potential to open doors for more people to build software. You no longer need deep technical expertise to get startedif you can describe what you want, you can generate working code. Thats a game-changer for beginners and non-developers who want to bring their ideas to life.

For experienced developers, vibe coding can boost productivity by handling the repetitive, boilerplate-heavy coding parts. Need a quick API call setup? A function to process data? Just describe it, and let AI do the rest. Its also great for rapid prototypingperfect for hackathons, proof-of-concept projects, or testing new ideas without sinking hours into setup.

The Catch: Its Not Magic

Before we get too carried away, lets be honestvibe coding isnt flawless. AI-generated code isnt always clean, efficient, or even correct. Bugs can creep in, requiring careful debugging and validation.

Then theres the issue of understanding. You could have a maintenance nightmare if you rely too much on AI-generated code without understanding its workings. Thats a risk in professional settings where clean, maintainable code is key.

Security is another concern. AI can generate code with vulnerabilities, especially when handling sensitive data or external dependencies. If you dont review it properly, you could introduce security risks without realizing it.

LinkedIn post where they posted this picture.

How to Vibe Code the Right Way

To make the most of vibe coding, use it responsibly:

Always review AI-generated code. Dont trust it blindlydebug and refine as needed.
Start with non-critical projects. Experiment before integrating it into production-level systems.
Use it as a learning tool. Understanding how AI interprets prompts can improve your own coding intuition.

On the SyntaxFM podcast, they also talked about Vibe Coding, and I agree with their opinion. Check the video here:

Final Thoughts

Vibe coding is more than a fleeting trendits a glimpse into the future of software development. It makes coding more accessible, speeds up workflows, and enhances creativity. But its not a replacement for traditional coding skills. Instead, its a tool that, when used wisely, can make development more efficient and enjoyable.

So, are you ready to ride the vibe coding wave? Give it a shot and see where it takes you! 🚀

Happy coding! 💻

Save Hours By Giving GitHub Copilot Custom Instructions for Code and Commit Generation 💡🤖

Dev By RayRay — Thu, 13 Mar 2025 07:58:15 +0000

I've always believed that writing great code isn't just about getting things to work; it's about creating a story in every line and commit.

I was recently diving into the documentation of GitHub Copilot, and I was thrilled to discover that you can teach it using your coding and commit message style.

In this post, I will show you how I set up custom instructions so that Github Copilot generates code similar to my coding style and writes commit messages in our team's language. Trust me, once you get this working, you'll never look at your Git history the same way again!

What are custom instructions?

Custom instructions are like giving GitHub Copilot a guide detailing your coding preferences and committing message rules. Imagine having a teammate who already knows your quirks, whether you love using double quotes in JavaScript or insist on using conventional commit messages.

With custom instructions, whenever you ask GitHub Copilot for help, it automatically writes in your style and follows your guidelines. Its not just about saving time; its about ensuring consistency throughout your project.

1. Create the settings file

First, create a folder (if it's not already there yet) .vscode and create a settings.json file in it.

2. Set up custom instructions for code generation

Then, I create a file called code-style.md in the a docs folder in my repository. I outline my coding style for languages like JavaScript, CSS, and Vue.js in that file.

# Code Style Guide

## General Guidelines
- Keep the code simple and readable.
- Use Prettier for code formatting.

## CSS
- Use class names that are descriptive and follow a consistent naming convention.
- Avoid using IDs for styling.
- Organize CSS properties in a logical order.

## Tailwind CSS- Use utility-first classes to build components.- Avoid using custom CSS when possible.- Group related classes together for better readability.

## JavaScript
- Use `const` and `let` instead of `var`.
- Prefer arrow functions for anonymous functions.
- Use template literals for string concatenation.
- Always use semicolons.- Follow the Prettier configuration for formatting.

## Vue.js
- Use single-file components (SFCs) with the `.vue` extension.
- Organize component structure in this order: `<script>` then `<template>` and lastly `<style>`.
- Use PascalCase for component names.
- Use kebab-case for component file names.
- Keep components small and focused.- Use Vuex for state management.

With these guidelines, GitHub Copilot generates code that seamlessly fits into my projects without needing constant tweaks.

3. Custom instructions for commit message generation

A clear, consistent commit message can be a lifesaver when understanding your codebase's evolution. I create a commit-style.md file in the docs folder. Here's a peek at my commit style guide:

## Commit Style Guide
We follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) style for our commit messages. 

Here are some examples:
- `feat: add new user authentication module`
- `fix: resolve issue with data fetching.`
- `docs: update README with installation instructions`
- `style: format code with Prettier`
- `refactor: improve performance of data processing`
- `test: add unit tests for user service`- `chore: update dependencies`

This way, when I click the Generate Commit Message button, GitHub Copilot produces a message summarizing the changes using our style. This will keep our Git history clean and readable.

4. Reference the docs in the settings file

To tie it all together, I add the path of the markdown files in the settings.json. Here is my configuration:

{ 
   "github.copilot.chat.codeGeneration.instructions": [
       { 
          "file": "docs/code-style.md"// import instructions from file `code-style.md` 
       }
   ], 
   "github.copilot.chat.commitMessageGeneration.instructions ": [
       { 
          "file": "docs/commit-message.md"// import instructions from file `commit-message.md` 
       }
   ]
}

With this setup, my code and commit messages automatically align with my standards. This simple change makes a huge difference in maintaining consistency throughout my projects.

Best Practices and Personal Tips

Over time, I've learned that the key to getting the most out of custom instructions is to keep them simple and iterative. Start with the basics, then refine as you notice what works and what doesn't.

By placing your custom instruction files in your repository, you ensure that everyone on your team is on the same page and speaking the same coding language.

I recorded a quick video that shows precisely what I describe in this blog. Check it out below.

https://www.youtube.com/watch?v=NrSjVO74Lm8

Conclusion

Custom instructions for GitHub Copilot have sped up my workflow. They allow me to write cleaner code and generate commit messages that communicate the story behind my changes.

The Github Copilot custom instructions documentation is in the Visual Studio Code docs.

If you haven't explored this feature yet, I encourage you to do so. You might be surprised at how much time you can save and how consistent your project can become. I'd love to hear about your experiences with custom instructions.

Comment below, share your custom rules, or give this post a thumbs up if you find it helpful. Let's make coding a little more personal and a lot more productive!

Happy coding and committing!

From Hating Public Speaking to DevWorld Amsterdam 2025 (It Took Me 20 Years)

Dev By RayRay — Tue, 04 Mar 2025 09:58:11 +0000

Twenty years ago, speaking in front of a crowd terrified me. I would rather fail skip a class than stand in front of an audience. Fast forward to 2025, and I was on the DevWorld stage in Amsterdam: calm and confident.

This isnt a story about flawless rehearsals or perfectly scripted talks its a honest journey filled with mishaps, genuine learning, and unexpected moments of triumph.

In this blog I want to highlight my lessons learned with some tips & tricks for you to apply in your own journey.

Tip 1: Start with a Buddy

My first talk was back in 2012, when responsive design was the latest buzzword. I teamed up with a colleague at our small web agency, and we took our first plunge into public speaking.

I still remember the nervesfumbling with my slides and accidentally swapping min-width with max-width. Despite my shaky start, having my buddy on stage helped ease the tension. We could cover for each other and even laugh off our mistakes in real-time.

Sharing the spotlight reduces the pressure. The journey feels less daunting and more collaborative when you have someone by your side.

The audience, too, plays an essential role in this dynamic. They are often more invested in the genuine learning process than in pursuing flawlessness. When they witness teamwork in action, they appreciate the authenticity behind the effort. It humanizes the experience and makes the endeavor relatable.

Tip 2: Embrace Your Unknowns

In 2015, I decided it was time to go solo with a talk on the JavaScript Web Speech API. Facing an audience of mostly experienced developers, I felt the weight of expectations to deliver something technical and in-depth.

When a question about accented speech caught me off guard, instead of scrambling for an answer, I admitted, I dont know but lets figure this out together after my talk! That honest response opened up a collaborative dialogue, changing a moment of panic into a learning opportunity for everyone.

Practicing honesty lays the foundation for trust. When you openly acknowledge your areas of uncertainty, it enhances the authenticity of your presentation.

This vulnerability not only makes your message more relatable but also encourages your audience to actively participate in exploring new ideas with you. Inviting them into this shared discovery journey creates a more engaging and dynamic atmosphere that fosters connection and collaboration.

Tip 3: Let Teaching Expose Your Gaps

By 2018, I mentored interns and taught courses on HTML, CSS, Flexbox, Grid, JavaScript, React, Angular, and more.

One session stands out: a bright intern asked, What is a ternary operator in JavaScript? I didnt have a ready answer then, but rather than feeling embarrassed, I saw it as an opportunity to learn together.

We dove into the topic, and the discussion turned into a mini-workshop that benefited everyone in the room.

Teaching goes beyond sharing knowledge. It embodies the journey of learning side by side with your students. Rather than presenting oneself as the sole authority, acknowledging one's areas of uncertainty can transform each educational session into a shared expedition of discovery.

This collaborative approach enhances understanding and creates a rich environment where participants feel empowered to contribute their insights and experiences.

In this way, every discussion evolves into a great experience of ideas and perspectives, deepening the collective knowledge of both the instructor and the audience.

Dont stress if things dont go as planned most people wont know your original plan.

Tip 4: Use Real-World Projects for Content

During 2023 and 2024, I partnered with my buddy Marco two talks on cutting-edge topics like GitHub Copilot for .NET projects. Back then it was pretty new for quite some developers.

I even showed how you can make ChatGPT be rude toward a notoriously rude recruiter. We practiced our presentation more than four or five times, receiving invaluable feedback from colleagues, interns, and trainees.

Basing your presentation on real-world projects make them highly relatable for the audience. Each practice round gave us more and more constructive feedback, which allowed us to improve our session.

Embrace every practice session as a chance to fine-tune your delivery, experimenting with different approaches based on real-life experiences and scenarios. By integrating these hands-on experiments into your preparation, you can craft talks that resonate with your audience, leaving a lasting impression.

Tip 5: Let Passion Outshine Perfection

In February 2025, I took the stage at DevWorld for my solo talk on local AI tools like Ollama, LM Studio, and Continue.dev a genuinely passionate topic.

I prepared extensively with the support of trainees and colleagues, rehearsing and iterating my demos. While there were no demo glitches, the unpredictable nature of LLMs kept the audience engaged. I even showcased earlier tryouts of conversational demos to highlight the evolution of my work.

Preparation is key. Dont stress if things dont go as planned most people wont know your original plan. Plan for failure, be ready for unexpected twists and remember that passion will always outshine a quest for flawless perfection.

You can find my presentation https://dw2025.byrayray.dev/

Your Turn to Start

Every stumble from mixing up media queries to facing unexpected questions has shaped the speaker I am today.

My journey wasnt about flawless delivery; it was about taking that first step, learning from each experience, and letting my passion lead the way.

If youre hesitating to give that first talk, remember: your voice matters, and every mistake is a stepping stone toward improvement.

Ready to take the plunge?

Whats your funniest speaking fail? Share your story below, and lets learn from each other after all, every great speaker once started with a shaky first step!

]]>

How to use Angular Signals

Dev By RayRay — Wed, 21 Jun 2023 15:33:50 +0000

Angular Signals are hot right now! Even if you still need to start using them because you're not on Angular 16, Making your Angular development more straightforward and future-proof is worth your time.

Do you find RxJS complex? Well, you are not the only one. So many others think that way. Well, Angular Signals solves that problem for so many developers. So let's dive into it together.

Sources:

Signals

Angular Signals are reactive properties in your Angular component, directive, or service. They update their value automatically; you don't need to listen to changes. No, they are doing all of that for you. Let's start with creating a Signal and showing it in the view.

Get the value

Let's start simple. Getting a value from a signal is pretty straightforward.

If we want to show the value of a signal in the view, we need to define it first in the component.

@Component({...})
export class Component {
    count = signal<number>(0)
}

Then in the view, we can output it in an expression like this:

<div>{{ count() }}</div>

It is that easy. But how do we use a value of a signal in our component?

How to get a value in a component class

The class of your component is also slightly different. The Signal value can be retrieved as easily as this.count().

@Component({...})
export class Component {
    count = signal<number>(0)

    private logCount(): void {
        console.log('Count: ', this.count())
    }
}

Since signals are built for reactivity in Angular, we want to set and update a value in a signal. Let's dive into that.

Setting and updating the value

Reading the values of a Signal is simple. But if you are used to RxJS with Observables and Behavioursubjects, for example, this is a bit different, but I know you will love the simplicity!

By default, you can give a signal a value (just like the BehaviourSubject). When the value is changed, the view is updated automatically. Setting the value of a signal can be done with

@Component({...})
export class Component {
    count = signal<number>(0)

    private changeCount(): void {
        this.count.set(30)
    }
}

How to update a value in a Signal based on the previous value

If you want to update your Signal based on the previous value, use the update() method.

count = signal(25)

// Update value
this.signal.update(prevValue => prevValue + 10) // 35

When the update has been done, it will automatically be reflected in the view.

How to update a signal with an array of objects

Updating an Array of Objects is equally simple with Signals. For this, we will use the .mutate() method.

Let's say we have an Array of Objects. Each Object has a price property. What if we want to update the first price, we can do that with .mutate() like this.

export class SignalsUpdatesArrayComponent {
    prices = signal<Obj[]>([
      { price: 10 }, 
      { price: 20 }, 
      { price: 30 }
    ])

    updatePrice(): void {
        this.prices.mutate(value => (value[0].price = this.getRandomPrice()))
    }

    getRandomPrice(): number {
        return Math.round(Math.random() * 100)
    }
}

We call the updatePrice() in the template, and it will be performed.

But what if we want to add an Object to the Array on the fly? Well just as easy. Push a new Object in the mutate() method.

export class SignalsUpdatesArrayComponent {
    prices = signal<Obj[]>([
      { price: 10 }, 
      { price: 20 }, 
      { price: 30 }
    ])

    updatePrice(index: number): void {
        this.prices.mutate(value => (value[index].price = this.getRandomPrice()))
    }
    addPrice(): void {
        this.prices.mutate(value => value.push({ price: this.getRandomPrice() }))
    }

    getRandomPrice(): number {
        return Math.round(Math.random() * 100)
    }
}

I created an example so you can see that it works by easily updating the Array.

If you want to learn more about RxJS Subjects, BehaviourSubjects and more? Then read the post I wrote about that in detail.

Effect

Listen to value updates with effect()

Listening to changes can easily be done with effect() . But it's not equal to the behavior of listening to changes of an Observable or BehaviourSubject in RxJS. So let's see what the difference is.

The effect() method with Signals is mostly for updating logging, saving data to local storage, or updating your canvas. By default, you are not allowed to update a signal within the effect().

For example, we create a component where we want to log when the price is updated. In the constructor, we have added the effect() to show that the price has been updated. In the HTML, we create a button to update the price.

@Component({...})
export class SignalsGetUpdatesComponent {
  price = signal<number>(10);
  priceUpdated = signal<boolean>(false);

  constructor() {
    effect(() => {
      console.log(`Price updated ${this.price()}`);
    });
  }

  updatePrice() {
    this.price.update((price) => price + 30);
    this.priceUpdated.set(true);
    setTimeout(() => {
      this.priceUpdated.set(false);
    }, 2000);
  }
}


<div>
    <h2>Get updates</h2>
    <p>
        Add {{30 | currency: 'EUR'}} to the price <br />
        of {{10 | currency: 'EUR'}} and notify.
    </p>

    <p><strong>Is price updated: </strong> {{priceUpdated() ? "👍" : "👎"}}</p>
    <p><strong>Price: </strong> {{price() | currency:'EUR'}}</p>
    <button (click)="updatePrice()" [ngClass]="{'is-updated': priceUpdated()}">Add {{30 | currency: 'EUR'}}</button>
</div>

In this case, I update the priceUpdated signal in the updatePrice() method while updating the price. When you use RxJS with a BehaviourSubject, you could have done that in the subscribe() method. This is a matter of taste on what you prefer.

If you know what you do and are aware of creating possibly an infinite loop with updating signals in the effect(), you can do that by passing a second parameter { allowSignalWrites: true }.

@Component({...})
export class SignalsGetUpdatesEffectUpdateComponent {
    price = signal<number>(10)
    priceUpdated = signal<boolean>(false)

    constructor() {
        effect(
            () => {
                console.log(`Price updated ${this.price()}`)

                this.priceUpdated.set(true)
                setTimeout(() => {
                    this.priceUpdated.set(false)
                }, 2000)
            },
            { allowSignalWrites: true }
        )
    }

    updatePrice() {
        this.price.update(price => price + 30)
    }
}


<div>
    <h2>Get updates and overwrite signal in effect</h2>
    <p>
        Add {{30 | currency: 'EUR'}} to the price <br />
        of {{10 | currency: 'EUR'}} and notify.
    </p>

    <p><strong>Is price updated: </strong> {{priceUpdated() ? "👍" : "👎"}}</p>
    <p><strong>Price: </strong> {{price() | currency:'EUR'}}</p>
    <button (click)="updatePrice()" [ngClass]="{'is-updated': priceUpdated()}">Add {{30 | currency: 'EUR'}}</button>
</div>

The effect will run when the component is initialized, like the ngOnInit.

Computations

Let's talk about computations. You use a computation when calculating or doing string concatenation based on changing one or more values.

Get the value from the computation

// Signal
getDoubleCount() {
    console.log(this.doubleCount())
}

// BehaviourSubject
getDoubleCount() {
    this.doubleCount.subscribe((value) => console.log(value))
}

And this is where getting the simplest thing, as getting the double-count value, is going to be less straightforward with the BehaviourSubject if you compare it with the Signal.

Because with the BehaviourSubject, you want to ensure the subscription is removed when it's not needed anymore.

With signals, Angular handles many things for you, more than using RxJS. With RxJS, we can often get buried in complex and hard-to-read code, especially for people who have yet to get used to Angular or RxJS.

For example, with RxJS, we need to clean our subscriptions ourselves; with signals, we don't have that because Angular handles that for us.

// Inside a component class
// ...
destroy$ = new Subject<void>();

ngOnDestroy() {
    this.destroy$.next();
}

getDoubleCount() {
    this.doubleCount
        .pipe(takeUntil(this.destroy$))
        .subscribe((value) => console.log(value))
}
//...

No, signals bring a lot of simplicity while using reactivity. Developers coming from Vue will be used to a very similar way of handling reactive properties.

For example, let's update a first name and show the user the full name. We will use computed() to help us with that.

@Component({...})
export class SignalsComputeValueComponent {
  firstName = signal('Bart')
  lastName = signal('The Great')

  fullName = computed(() => this.firstName() + ' ' + this.lastName())

  changeFirstName() {
    this.firstName.set('Ray')
  }
}


<div>
    <h2>Get updates and overwrite signal in effect</h2>

    <p>
        <strong>Firstname:</strong> {{ firstName() }} <br />
        <strong>Lastname:</strong> {{ lastName() }}
    </p>
    <p><strong>Fullname computation:</strong> {{ fullName() }}</p>

    <p>
        <button (click)="changeFirstName()">Update firstname</button>
    </p>
</div>

As you can see, the fullName property merges two strings in the computed() method. When the firstName is updated, the fullName will be updated automatically, and you can see it directly in the view. It is that simple!

Thanks

Now you are entirely up to date with how to use Angular Signals. I hope you can start using them right away.

After reading this story, I hope you learned something new or are inspired to create something new! 🤗 If I left you with questions or something to say as a response, scroll down and type me a message, send me a DM on Twitter @DevByRayRay

Want to receive new posts in your mailbox? No, not only a link, just the whole article without any ads 🤗 or other stuff. Then subscribe to my newsletter 👍. I promise I wont spam you, only the most important and best-quality content will be sent to you .

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

5 Ways to Improve Your Coding Skills with ChatGPT: Tips and Tricks for Developers

Dev By RayRay — Wed, 05 Apr 2023 09:03:49 +0000

Are you a developer looking to improve your craft? Look no further than ChatGPT! In this blog post, we'll outline five tips for using ChatGPT to become a better developer, including brainstorming solutions to application problems, spotting errors in code, explaining code functionality, writing better tests, and improving code readability.

ChatGPT helps you brainstorm why a problem is caused in your application

My team and I encountered an issue in our application where data needed to be included, and models still needed to update. We work in an Angular environment.

Let me share a situation where I discovered the power of discovering solutions and problems in an application.

Situation: Subscription didn't exist

After manually searching for what could happen, we took the leap and started asking questions to ChatGPT. We started with this question. (sorry, I can't show you a screenshot because it's lost with an error of ChatGPT lately 🥲)

We are using RxJS; we have a BehaviourSubject, but at the start, the data is received by the subscribe method, but later it isn't. What could be the problem?

After this question, ChatGPT started answering them with possible situations. Last, it suggested we check if the subscription still exists. It also provided us with a solution to check it.

Well, that worked 😅🎉. Finally, we found the cause, and we could fix the issue 👍

ChatGPT helps spot problems with failing tests

In the last couple of months, I have incorporated ChatGPT into all the work in my team.

Sometimes you can have failing tests that don't make sense in the first place. ChatGPT can help you discover the problems and help find the solution.

Just like this situation I encountered lately with my team.

Situation: Date function wrongly calculated date with Vanilla JavaScript

The other day we replaced an old date library with a new one. But we needed to create some translation layer so our dependencies still work.

After we did that, we checked the end-to-end tests. And what was the case? One error! A method that used to work before, but now it doesn't.

getCalculatedDate(days: number, months: number, years: number) {
    const today: Date = new Date();
    const calculatedDate = new Date(
      today.getFullYear() + years,
      today.getMonth() + months,
      today.getDate() + days
    );
    const days = String(calculatedDate.getDate()).padStart(2, '0');
    const months = String(calculatedDate.getMonth() + 1).padStart(2, '0');
    const years = String(calculatedDate.getFullYear());
    const formattedDate = days + '-' + months + '-' + years;
    return formattedDate;
  }

The issue was a difference of 1 hour time difference. Even though we didn't change the method's input, the comparison function output did.

After trying for a while, we started asking questions like:

What if I add 3 months and 1 day to today? What date is that?
Explain the calculation
Would the answer be different if adding days first in the calculation?
And so on.

Eventually, we dropped the function and asked what was going wrong here. It helped us discover that you should first add a day to the date in vanilla JavaScript. Then create a new date and add the month and year.

The funny thing was, it happened on the 31st day of the month. And there seem to be quirky things with Dates in JavaScript (as many of us know)

In the end, we got it fixed. But this shows you that if you're asking many questions, it will explain many things and eventually help resolve them.

ChatGPT explains a piece of code

As I work in a large codebase, developed and maintained by changing team members, the code can not always be as clear as you wish 😅.

ChatGPT got you covered on this as well.

This one is simple and helped me understand and re-write functionality much more simpler.

Just drop in a piece of the code and ask for an explanation. It's that simple 👍

Like in this example:

Ask to explain

Answer

ChatGPT can help you write better tests

For many developers, writing tests for our code is a challenging task. After more than a decade of experience, it still keeps me wondering sometimes:

What tests do I need?
How many test cases should I create?
Did I cover all the edge cases?
And many more

Well, ChatGPT has got me covered as well.

Sometimes I use it to brainstorm and ask for additional test cases I missed.

It really helped my team and me, and I wrote better code for testing 💪

ChatGPT can re-write your code for better readability

Sometimes you find these code examples online and wonder how it works and if there is an easier way to write them.

Please drop in your code and ask it to re-write it for you. It's that simple and really helps!

Example

Let's say we have a complex product structure in our API.

{
  "products": [
    {
      "id": 1,
      "name": "Product A",
      "category": {
        "id": 10,
        "name": "Electronics",
        "properties": {
          "warranty": "1 year",
          "returnPolicy": "30 days"
        }
      },
      "brand": {
        "id": 100,
        "name": "Brand X",
        "properties": {
          "country": "USA",
          "established": "1995"
        }
      },
      "properties": {
        "color": "black",
        "weight": "1.2 kg"
      }
    },
    {
      "id": 2,
      "name": "Product B",
      "category": {
        "id": 11,
        "name": "Furniture",
        "properties": {
          "material": "wood",
          "assemblyRequired": "yes"
        }
      },
      "brand": {
        "id": 101,
        "name": "Brand Y",
        "properties": {
          "country": "Germany",
          "established": "2001"
        }
      },
      "properties": {
        "dimensions": "100x50x30 cm",
        "color": "brown"
      }
    }
  ]
}

We want to sort the products based on the returnPolicy property. Another developed this function long ago; it's not easy to read, so we want to make it more readable and add TypeScript.

function s(p){
  return p.sort((a,b)=>a.category.properties.returnPolicy.localeCompare(b.category.properties.returnPolicy))
}

We can ask ChatGPT to make it more readable and add types. So this is the result it comes up with:

interface Properties {
  returnPolicy?: string;

}

interface Category {
  id: number;
  name: string;
  properties: Properties;
}

interface Product {
  id: number;
  name: string;
  category: Category;

}

/**
 * Sort an array of products based on the "returnPolicy" property.
 * @param {Product[]} products - The array of products to be sorted.
 * @return {Product[]} - The sorted array of products.
 */
function sortProductsByReturnPolicy(products: Product[]): Product[] {
  return products.sort((productA, productB) => {
    return productA.category.properties.returnPolicy.localeCompare(
      productB.category.properties.returnPolicy
    );
  });
}

As you can see, it wrote a Product, Category, and generic Properties interface and applied it to the function. But also added some explicit comments to it.

So refactoring becomes a lot easier with ChatGPT!

In short, ChatGPT can help developers in many ways. Whether you're just starting out or have been developing for years, ChatGPT can help you improve. This blog post provides seven tips for using ChatGPT, covering problem-solving and code readability. By using ChatGPT, you can write code faster and with fewer mistakes.

One of the best things about ChatGPT is that it can find errors in code. Even experienced developers make mistakes, and finding them can be tricky. ChatGPT makes it easy to find errors and fix them. ChatGPT can also help you explain what your code is doing and write better tests.

ChatGPT is also good at making code easier to read. Large codebases can be hard to maintain, primarily if the code needs better written. Using ChatGPT to improve code readability, you can make your code more accessible for other developers to understand.

One of the most powerful things about ChatGPT is that it can help developers work together better. Developers can work more effectively using ChatGPT to brainstorm solutions, find errors, and improve code quality. When combined with human experience, ChatGPT can help developers deliver better results and drive innovation.

In conclusion, ChatGPT is a valuable tool for developers of all levels. By following the tips in this blog post and using ChatGPT in your work, you can write better code, save time, and get better results. Whether you're a beginner or an expert, ChatGPT is worth exploring to see how it can help you and your team.

Thanks!

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

ChatGPT + Bing = Awesome 🔥

Dev By RayRay — Thu, 09 Feb 2023 15:46:36 +0000

Ladies and Gentlemen, hold on tight: the search game is about to change forever! Bing, the popular search engine, has just become even better with the integration of ChatGPT, and it's nothing short of extraordinary! In this blog post, we'll explore why the combination of Bing and ChatGPT is a game-changer and how it will make your search experience even more impressive.

ChatGPT

ChatGPT is an advanced language model developed by OpenAI that understands natural language queries. It understands the context of your search and delivers precise, relevant results tailored to you. This makes it an excellent choice for search engines like Bing, as it eliminates the need to sift through irrelevant results and helps you find what you need more quickly.

ChatGPT + Search engine = 🔥

Now, let's explore why this integration is so great! Firstly, ChatGPT understands the context of your search, so you'll get more relevant results. This means you don't need to waste time looking through irrelevant search results, and you can find what you need more quickly.

One of the lovely details is that Bing will present the origin of the data it found. So it will still be valuable for us content creators to create that content.

You can find some examples on the special Bing website. Sadly enough, we still have to wait to try it out. But you can join the waiting list.

Q&A in Bing

The Bing + ChatGPT integration has an excellent Q&A feature. You must type your question as if you were asking a friend, and ChatGPT will give you the best answer.

Bing is doing something unique by integrating ChatGPT into its search engine. It shows that the competition between search engines Bing and Google are getting tougher.

Search engine competition war!

Google should be worried. Bing and ChatGPT joining together give people a search engine that works better and is more personalized. ChatGPT can understand words people type in, give more exact results, and offer advice tailored to the person. This combination makes Bing + ChatGPT a serious threat to Google.

Furthermore, ChatGPT being incorporated into Bing shows a change in the search market towards more advanced and intelligent search experiences. As technology progresses, other search engines will likely do the same and add similar technology to their services. If Google does not keep up, it could be left behind in the search market and no longer be the leading search engine.

NLP in search engines is very beneficial

Last but not least, Bing + ChatGPT makes search simpler than ever. ChatGPT understands natural language queries, making it easy for everyone to get the answers they need, regardless of age, background, or tech knowledge. Teenagers who are tech-savvy and grandparents who are just beginning to explore search will find it easier to get the information they need.

If you want to see the presentation where ChatGPT gets introduced with Bing, check the Youtube video:

https://youtu.be/rOeRWRJ16yY

Conclusion

In the end, adding ChatGPT to Bing is a game-changer that's making search even better. ChatGPT can understand natural language questions, give more exact results, and make the search easier. Bing + ChatGPT can take you on the most fantastic search journey ever! Why wait? Get ready to have a great time!

Thanks!

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

Revolutionize Your Programming with AI, ChatGPT & GitHub Copilot

Dev By RayRay — Sun, 08 Jan 2023 14:15:25 +0000

Are you a developer looking to stay ahead of the curve? Incorporating artificial intelligence (AI) into your work is no longer a luxury but necessary. This blog post will discuss the top five benefits of embracing AI and how it can revolutionize your programming skills. Plus, we'll introduce you to a tool that makes it easy to use AI in your workflow. Don't get left behind start incorporating AI into your projects today.

Originally published on ByRayRay.dev .

For a few months, I've been investigating what AI can do for developers like myself. It took my interest when Github Copilot was launched by Github. Then I didn't know that it was driven by a product called OpenAI Codex, which seems to be very powerful.

But especially since ChatGPT came by storm around November 2022, I'm incorporating it into my workflow. Because of that experience, I will predict the following.

Incorporating AI into your work as a developer is no longer optional. Those who refuse to adapt will eventually become obsolete as the industry moves forward with those who are utilizing AI to its full potential

TLDR;

Incorporating AI into your work as a developer is essential for staying competitive in the industry
AI can increase efficiency, enhance accuracy, improve decision-making, enhance collaboration, and future-proof your skills
GitHub Copilot is a tool that makes it easy to incorporate AI into your workflow
Don't get left behind start using AI to revolutionize your programming skills today

AI Revolution For Developers

AI will revolutionize the way we approach software development. It can help automate tasks, analyze data, and generate code. Incorporating AI into your work is seamless and straightforward with the right tools.

One such tool is GitHub Copilot, a plugin for your integrated development environment (IDE) that allows you to incorporate AI into your workflow easily. With GitHub Copilot, you can easily access AI models and incorporate them into your projects without leaving your IDE.

5 Reasons Why Developers Should Embrace AI

Last few years, there have been so many people saying that I would lose my job to AI. They predicted companies would no longer need developers because AI would all take over.

When you start using ChatGPT, you will soon find that you need to be specific in what you want. That's not the case. It would be best to tell it clearly and in-depth to get what you want.

Since most developers will know what they want and how to write the code or how the code should look, it's super helpful to let an AI help you as a coding buddy.

But beyond just the convenience factor, there are reasons why every programmer should embrace AI and incorporate it into their work. Here are five pros to consider:

Efficiency: AI can automate tasks and processes and saves time for you to focus on more critical tasks.
Accuracy: AI can analyze data and make accurate decisions that humans may not be able to achieve on their own. For example, at this date, ChatGPT has data from the beginning of the internet until 2021. So all the things written since then are used to help you make decisions. ( Yes, I know ChatGPT is not always giving the correct answer, but that will improve )
Improved Decision-Making: AI can help you make more informed decisions by providing insights and recommendations based on data analysis.
Enhanced Collaboration: AI can help teams collaborate more effectively by providing real-time analysis and insights.
Future-Proofing Your Skills: As AI advances, those familiar with it will have a competitive edge in the job market.

3 Risks Of Not Using AI As Developers

Of course, when there are good reasons to use AI as a developer, but there are also reasons why you shouldn't use it (yet). Let's discuss them.

Initial Investment: Implementing AI into your workflow may require an initial investment in tools and resources. Right now, using Github Copilot requires a subscription of 100$ a month. In my opinion worth the money, but you can check it out for yourself with two months for free 👍
Complexity: AI can be complex and may require a learning curve to utilize its capabilities thoroughly. But to use AI in your flow, you don't need to learn all the details of AI. It's nice that you know some of the basics of how AI works. (this video by WIRED explains AI in 5 ways of difficult what machine learning is. ML is the technology that helps AI learn from mistakes and improve problem-solving.)
Dependence on Technology: Relying on AI can create a dependence on technology, which could be problematic if it fails. So is relying on any technology we use in our life. It is also problematic if there is a bug in a Linux kernel, Visual Studio Code, Github actions, or the Azure servers we use for our pipelines. It's more problematic if the power goes off, but our civilization relies on technology daily.

But after all, the pros of incorporating AI into our work as developers outweigh the cons. Better said, all these cons are things we should keep in mind and not real cons.

There is a higher risk if you are not using AI in your work. Because in the future, you will lose your job to developers embracing AI in their work.

3 Ideas To Use ChatGPT In Our Work

I already told you that Github Copilot is one way to use AI in your workflow as a developer. But I'm also using ChatGPT to help me explain things, give examples, and more. Here are a few ideas of what you can use.

1. Ask For Unit Tests

Ask to write a unit test for a particular piece of code and let it explain why it does it. For example, I gave a piece of code and asked to write a unit test for it with Jest. Yes, I could have done it myself, but this helped me to give an idea.

The answer was:

2. Ask To Explain

I asked ChatGPT to explain how to write a unit test for a BehaviourSubject in the RxJS library.

The extensive answer was pretty good.

3. Ask To Do Certain Things

I'm also frequently asking ChatGPT how I can do this or that. That is super useful. Because when you are going to Google the same thing, you have to scroll through so many results searching for that one clear example.

Here is an example:

The answer:

As you can see, this long answer helped my team and me a lot!

Conclusion

So don't be left behind. Embrace AI and see how it can benefit your work as a developer. Incorporating AI into your projects can be seamless and straightforward with the right tools and a willingness to learn.

Thanks!

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥