(Note: To protect everyone's privacy, I will not be naming the organization, the projects, the managers, or the teams involved in this story. The lessons are universal, and that's what matters.)

The "Efficient" Promise

It was my first major project in a new capacity. I was in the middle of transitioning from being a developer in a team to a Tech Lead overseeing teams.

The project seemed straightforward: rebuild a website with new tech. We were finally decoupling the front-end from the back-end (yes, I know, it's amazing this is still a 'new' thing in some organizations) and using GraphQL. It was exciting.

The budget and deadline, of course, had already been set by management.

Then came the meeting. The 'Big Idea' meeting.

A project leader pointed out, "You know, Website B uses 90% of the same data as Website A. It would be incredibly efficient if we just... build them both at the same time? In the same project?"

The non-technical managers in the room nodded. They saw spreadsheets. They saw synergy. They saw a '2-for-1' deal.

My teammate and I looked at each other. We saw the disaster from miles away.

We knew we had to speak up, even though we didn't want to be the "party poopers." We explained that architecturally this wasn't a good idea. That forcing two different teams with two different goals into one repo would create massive challenges.

And then we fell into the classic developer's trap.

A manager asked, "But... setting the challenges aside, is it technically possible? Can you manage it?"

As engineers, we answered honestly: "Well... technically... yes, we can make it work. But it's not the right way to do it."

They only heard the "yes." They ignored the rest.

Our technical honesty—the distinction between what is possible and what is wise—was just used as a green light. They heard "technically manageable." We meant "architectural nightmare."

That was the real "Oh... SHIT" moment. The decision was made.

The Setup: Two Teams, One Arena

Here was the fatal structure the non-technical managers had designed:

• The Arena: A single mono-repo. (Because: 'shared code' = 'efficient').

• Team A (Internal): My team. Our Goal: Build a sustainable, scalable, and maintainable solution. We were the craftsmen. We would own the platform long-term.

• Team B (External): The hired guns. Their Goal: Hit the deadline, at all costs. They would send an invoice and then disappear.

They had put two teams with exact-opposite incentives in the same cage and expected them to collaborate.

The Conflict: The Mono-Repo War

This wasn't an immediate explosion. It was a slow-motion tragedy in three acts.

Act 1: The First Cracks To be fair, it didn't start as a war. The first few sprints were actually collaborative. We were all figuring out the new architecture, communicating, and building.

The cracks began to show when my team (Internal) started building the core, sustainable, shared components. As craftsmen, we were building them properly—thinking about accessibility, scalability, and reusability. This is the crucial work that saves you from a year of pain later.

But this kind of "doing it right" takes time.

The external team, and the PO, didn't see 'quality'. They saw 'slowness'. They had a deadline to hit. Our craft was a blocker for their velocity.

This was the first real crack. Frustrated, Team B did what they were incentivized to do: they started cutting corners to get around our "slow" process. They began writing one-off, unsustainable code to 'just get the feature out'.

Act 2: The Political Coup The conflict quickly escalated from the code editor to the meeting room. And let's be clear: I don't blame the external team. They were simply executing on their goal (speed). The friction was inevitable because their goal was fundamentally in conflict with our goal (sustainability).

The manager of the external team, frustrated by our 'quality gates', went directly to the Product Owner (PO).

Their argument was as simple as it was deadly: "The internal team is blocking us. They are the reason we're going to miss the deadline."

They had successfully reframed the narrative. Our quality control wasn't 'guarding the architecture' anymore; it was 'a blocker to progress'.

And the PO, who was under immense pressure to hit the (already unrealistic) deadline, zwichtte. They made a fatal error: as the owner of functional priorities (the "what"), they stepped out of their role and made a technical decision (the "how").

They chose speed.

Act 3: The Banishment It all culminated in a meeting I will never forget. The PO, now fully allied with the 'speed-at-all-costs' manager, made the final call.

My teammate and I—the two developers fighting hardest for the long-term sustainability of the platform—were officially removed from the project by the Product Owner.

We were the problem. The 'difficult' developers who were 'slowing things down'.

The Reckoning: The Real Cost of "Efficiency"

With 'the blockers' (us) out of the way, the external team had free rein. They slammed the code through. They 'hit' the deadline (with massive stress and overtime). The manager was 'satisfied'. The PO was 'relieved'.

And now, months later, the real bill is here.

Team B is long gone.

And the backlog from the external team? That's our backlog now. A toxic, open sewer of bugs, performance issues, and architectural sins that my internal team now has to live and work in, every single day.

The "fast" solution created an endless maintenance burden.

The only saving grace? The internal developers who remain. They are, to a person, craftsmen who believe in building sustainable solutions, and I am incredibly lucky to work with them. But they are the ones now paying the price, forced to clean up a mess they never made.

The Lesson: The Birth of My Role as a Tech Lead

This disaster wasn't just a 'bad project.' It was the end of my role in a team and the beginning of my role as a Tech Lead.

My own team leader was furious. He saw exactly what had happened:

1. A non-technical manager had created an architectural disaster by forcing two conflicting goals into one codebase.

2. A Product Owner had stepped out of their role, making a technical decision (speed/debt) instead of a functional one (priority).

3. Craftsmanship had been sacrificed for short-term politics.

His solution was to create my new role. A Tech Lead, positioned outside the project silos, with one clear, organization-wide mandate:

"This can never happen again."

My Lesson for Every Manager

My role was born from that conflict. And that is what I, and the amazing internal team, are fixing to this day. We're not just cleaning up the mess; we're building a better way to work.

We are defining our quality standards. Not "perfection"—perfection is a trap. We are defining sustainable and stable standards. We are building the guardrails that make it easier for teams to maintain quality, even when project pressure builds.

Here is my simple, yet unbreakable, lesson for every manager, project leader, and Product Owner out there.

Never. Ever. Make a technical decision.

That's what your Tech Leads and developers are for. They are more than capable of handling it.

And if your tech team does ask you to make a choice—like "Do we choose Speed or Quality?"—your only job is to let them advise you. Ask them to explain the consequences. They are the only ones who truly understand the long-term technical effects of each choice.

Listen to them. Trust their craft. You may not hear the answer you want, but you'll hear the one that's true. And you'll save yourself from starting a war you can't win.

What do you think? Have you seen a "logical" decision doom a project? How do you guard the line between technical and non-technical decisions in your organization?

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.

1. Go to Project Settings (represented by the gear icon, located in the bottom-left corner).

2. Navigate to Repositories (under the Repos heading).

3. Click the repo you want, then the Policies tab.

4. Scroll to the 'Branch Policies' section and click on the branch you want to protect (e.g., main).

   

5. 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!

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 improve significantly 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! 👇

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 discovered Accented.dev, a fantastic open-source tool that simplifies spotting accessibility issues. 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 code, Accented highlights any accessibility problems directly 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 transforms accessibility from a complex audit into a seamless, ongoing 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! 🚀

If you're still hesitant, I understand. I was curious and a bit uneasy as well. However, the data is clear: AI in development is no longer optional - 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 maintain consistent and aligned Copilot usage 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 that it can take up to ~11 weeks for full benefits to be effective, so give it time.

5. What’s Next for AI in Development

AI is evolving from an “assistant” to a 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.

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

Let’s turn curiosity into skills. 🚀

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

1. Save the mcp.json configuration file

2. Open the Command Palette in VS Code (Ctrl+Shift+P or Cmd+Shift+P)

3. Run the MCP server startup command

4. When prompted, enter your Azure DevOps organization name (just the name, not the full URL)

Step 4: Enable GitHub Copilot Agent Mode

1. Open GitHub Copilot in VS Code

2. Switch to Agent Mode

3. Look for Azure DevOps tools in the available tools list

4. 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:

1. Start the day:

    Show me my assigned work items for this sprint
   

2. Begin working on a task:

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

3. Need clarification on requirements:

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

4. After creating a PR:

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

5. 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.

So, What’s 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 it’s been making waves ever since.

Think of it as having an AI-powered coding buddy that turns your ideas into working code. It’s 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.

Why It’s 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 started—if you can describe what you want, you can generate working code. That’s 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. It’s also great for rapid prototyping—perfect for hackathons, proof-of-concept projects, or testing new ideas without sinking hours into setup.

The Catch: It’s Not Magic

Before we get too carried away, let’s be honest—vibe coding isn’t flawless. AI-generated code isn’t always clean, efficient, or even correct. Bugs can creep in, requiring careful debugging and validation.

Then there’s the issue of understanding. You could have a maintenance nightmare if you rely too much on AI-generated code without understanding its workings. That’s 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 don’t 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. Don’t trust it blindly—debug 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 trend—it’s a glimpse into the future of software development. It makes coding more accessible, speeds up workflows, and enhances creativity. But it’s not a replacement for traditional coding skills. Instead, it’s 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! 💻

I’ve always believed that writing great code isn’t just about getting things to work — 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 that speak 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. It’s not just about saving time; it’s 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. Setup custom instructions for code generation

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

# 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.

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.

You can find the Github Copilot custom instructions documentation 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!

This isn’t a story about flawless rehearsals or perfectly scripted talks — it’s 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 nerves—fumbling 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 don’t know — but let’s 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 didn’t 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.

Don’t stress if things don’t go as planned — most people won’t 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. Don’t stress if things don’t go as planned — most people won’t 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 wasn’t about flawless delivery; it was about taking that first step, learning from each experience, and letting my passion lead the way.

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

Ready to take the plunge?

What’s your funniest speaking fail? Share your story below, and let’s learn from each other — after all, every great speaker once started with a shaky first step!

In this blog post, I'll explore five key reasons why Vue.js should be your go-to for building robust, efficient, and scalable applications. But I won't be the evangelist telling you this framework is the best at all levels—others have great things, too!

This blog post results from a strategic decision I was involved in, collaborating with IT managers at a semi-government organization in the Netherlands. We're currently transitioning two websites from Umbraco into a headless architecture with Vue.js, Nuxt.js, and the Umbraco content API.

1. Independent and Not Owned by a Single Company

We have many web frameworks and libraries thanks to countless independent software developers. Most platforms and companies wouldn't exist without these developers, who give their time for free (or with little compensation).

Vue.js is a JavaScript framework built entirely with the open-source community. Fun fact: it's not even owned by a company! The framework was founded by Evan You, who did much of the groundwork but got great help from other intelligent people worldwide.

Developers from the community have built fantastic libraries on top of it. For example, the community created VueUse, Nuxt.js, Vue Router, Vuex, Pinia, and Vuetify. Some of these have even been adopted by the core Vue team.

So, if your company values or wants to support the open-source community, Vue.js is a great framework that aligns with that idea. As an organization, you can put your money where your mouth is by supporting them. Many companies are doing the same.

Also, it's good to know that Vue.js is no longer an underdog framework. It's used by big companies all around the world. Here's a list as an example:

1. Alibaba Group

2. Zoom

3. GitLab

4. Grammarly

5. Upwork

6. Behance

7. Netlify

8. Netflix

9. Adobe

10. Google

11. Nintendo

The list is much longer, suggesting that other big companies rely on Vue.js.

But if it's so great, let me tell you why. Because our engineers have to work with it, and it will never be successful if they aren't convinced.

2. User-friendly for Developers of All Levels

Vue.js's user-friendly nature is a boon for developers of all levels. Its straightforward approach makes it an excellent choice for building websites and web applications, instilling confidence and comfort in your team.

It's essential that if you pick a framework to build applications or websites, it won't limit you now or in the future. It should also be easy enough for all your developers to start.

Losing one of your team members would be sad because that framework is too tricky. Fortunately, Vue.js has you covered!

If you work with interns, trainees, or junior developers (and we help grow those developers to a higher level), picking Vue.js won't be a problem.

Even though it's easy to start, it's still very performant when building big projects. My team and I have never experienced any limits.

If you want to offer your developers extra framework knowledge, the Vue.js team has you covered. Unlike other frameworks, Vue.js has its certification program, which teaches developers all the ins and outs of the framework through a video course. I have yet to see this with Angular or React.

3. Builds on Top of Standard HTML, CSS, and JavaScript

If you try Angular, you'll see that it requires developers to work with TypeScript. That's okay, but it can be a limitation for some developers. When you try React, you have CSS-in-JS, which can't be used inside the browser. Some developers flourish with it, but others hate it.

No, I don't want to get too deep into the technical details. However, every framework has its own ideas for using it. I'm very happy that in Vue.js, you can use normal HTML, CSS, and JavaScript.

But if you want to use, for example, Sass, SCSS, or Less for styling, they support that! They also support relying on TypeScript (which is a good idea). The power of Vue.js is that it supports the way you want to use it. They don't want to be in the way of the developers but want to accommodate how you want to use the framework.

One of the most significant benefits of picking Vue.js is that you can use it how you like. They won't enforce anything on you.

But okay, every framework needs a community to make it even better.

4. Large and Supportive Community

The Vue.js community, led by the friendly core team, is a welcoming space where developers support each other, fostering a sense of inclusion and belonging.

When non-core developers of Vue.js start a good plugin or extension, most of the time, they get support from the core developers. This is so great that I didn't find it in the other two frameworks. I think this also shows the power of open source.

No developer is too inexperienced to help maintain Vue.js. Is there a problem in the documentation, or can your team find a bug in Vue.js that they can contribute to? Your company then relies on many more developers than the ones you hired. This is a significant benefit.

The community can be fantastic, but developers still need documentation to use the framework. The Vue.js team has set a great example in this area, which other frameworks can take as inspiration.

5. Comprehensive and High-Quality Documentation

A framework is worthless if there's no excellent and actionable documentation.

Vue.js has excellent documentation on their website. It contains simple language with clear code examples.

When developers encounter an error or experience problems using the framework, they should first consult the documentation.

Luckily, more than enough developers write about some edge cases on their blogs, so knowledge is also shared in the community.

Conclusion

To summarize, if you're considering picking a JavaScript framework for your organization, check out Vue.js. Do a POC with it to see if it matches your and your developers' needs.

As a side note, if you need to rely on SSR (Server-Side Rendering), you can try Vite SSR or check out Nuxt.js, the meta-framework for Vue.js.

Are you looking for a framework-independent build system? Check out Vite, built by the Vue.js team and is super fast. You can use Vite for React, Preact, Lit, Svelte, Solid, and even Qwik.

Thanks

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 won’t 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. 👍💰🎉🥳🔥

You're in the right place! Learn how to add and subtract dates easily in JavaScript using date-fns. Our guide helps you understand these steps in a simple way, making your code work better and faster. Start improving your date skills in JavaScript with us now!

The Benefits of Choosing date-fns

If you've been in the JavaScript world for a while, you're likely familiar with MomentJS, once the go-to library for JavaScript date calculations, timezones, and formatting. However, as we started focusing more on efficient application performance, MomentJS's inability to tree-shaking and its impact on bundle size became an issue.

This led to the rise of modular JavaScript date libraries, among which date-fns emerged as a leading choice. Here's why: If you're mindful about not bloating your application bundle, date-fns is a sound choice. Its modular design allows you to include only the needed functions, reducing the impact on your bundle size and enhancing application performance.

And maybe even more valuable, date-fns is completely open source 💪.

But let's get started where you came for the practical examples to help you further do Date calculations in JavaScript efficiently.

TLDR;

For those who don't want to read the whole article, here is the TLDR on how to do Date calculations with date-fn's.

Add days, weeks, months, and years to Date

import { add, addDays, addWeeks, addMonths, addYears } from 'date-fns'

//31st of January 2023
const date = new Date(2023, 0, 31);

console.log(date); // Tue Jan 31 2023
console.log('Add 2 days: ', addDays(date, 2)); // Thu Feb 02 2023
console.log('Add 5 weeks: ', addWeeks(date, 5)); // Tue Mar 07 2023
console.log('Add 3 months: ', addMonths(date, 3)); // Sun Apr 30 2023
console.log('Add 8 years: ', addYears(date, 8)); // Fri Jan 31 2031
console.log('Add 5 days, 2 months, 3 weeks and 7 years: ', add(date, {
    days: 5,
    weeks: 3,
    months: 2,
    years: 7
})); // Fri Apr 26 2030
console.log(date); // Tue Jan 31 2023

Subtract days, weeks, months, years to Date

import { sub, subDays, subWeeks, subMonths, subYears } from 'date-fns'

//31st of January 2023
const date = new Date(2023, 0, 31);

console.log(date); // Tue Jan 31 2023
console.log('Subtract 2 days: ', subDays(date, 2)); // Sun Jan 29 2023
console.log('Subtract 5 weeks: ', subWeeks(date, 5)); // Tue Dec 27 2022
console.log('Subtract 3 months: ', subMonths(date, 3)); // Mon Oct 31 2022
console.log('Subtract 8 years: ', subYears(date, 8)); // Sat Jan 31 2015
console.log('Subtract 5 days, 2 months, 3 weeks and 7 years: ', sub(date, {
    days: 5,
    weeks: 3,
    months: 2,
    years: 7
})); // Wed Nov 04 2015
console.log(date); // Tue Jan 31 2023

Installation

Before using date-fns in your code, you need to install it.

npm install date-fns --save
# or
yarn add date-fns

After installation, you can choose to import the modules in different ways.

// ESM
import { addDays, subDays } from 'date-fns';
// ES 2015
import addDays from 'date-fns/addDays';
import subDays from 'date-fns/subDays';
// CommonJS
const addDays = require('date-fns/addDays');
const subDays = require('date-fns/subDays');

How To Add Days to a Date

Let's start with something simple. Add one or more days to a date.

import { addDays } from 'date-fns'

// 4th of July 2023
const date = new Date(2023, 6, 4);

console.dir(date); // Tue Jul 04 2023
console.log('Add 3 days: ', addDays(date, 3)); // Fri Jul 07 2023
console.log('Add 7 days: ', addDays(date, 7)); // Tue Jul 11 2023
console.log('Add 31 days: ', addDays(date, 31)); // Fri Aug 04 2023
console.log(date); // Tue Jul 04 2023

Check it on runkit.

First, we have imported the addDays from date-fn's. We created a variable with a date and added 3, 7, and 31 days.

Each util function in date-fns will return a new Date object. This is nice, so you can continue to add more calculations on top of it. Also, notice that these functions don't change the date in the variable date, so all the functions are pure JavaScript functions.

Let's continue with subtracting days from a date.

How To Subtract Days from a Date

Subtracting days is equally simple, like the previous example.

import { subDays } from 'date-fns'

// 4th of July 2023
const date = new Date(2023, 6, 4);

console.log(date); // Tue Jul 04 2023
console.log('Subtract 3 days: ', subDays(date, 3)); // Sat Jul 01 2023
console.log('Subtract 7 days: ', subDays(date, 7)); // Tue Jun 27 2023
console.log('Subtract 31 days: ', subDays(date, 31)); // Sat Jun 03 2023
console.log(date); // Tue Jul 04 2023

Check it on runkit.

Well, what more can I say? Like, it's that easy, right 😅. Let's continue with adding months to a JavaScript Date.

How To Add Weeks to a Date

Adding weeks to a Date is also a very common thing to do in, for example, booking systems. Well, date-fns is also supporting that.

import { addWeeks } from 'date-fns'

//31st of January 2023
const date = new Date(2023, 0, 31);

console.log(date); // Tue Jan 31 2023
console.log('Add 1 week: ', addWeeks(date, 1)); // Tue Feb 07 2023
console.log('Add 3 weeks: ', addWeeks(date, 3)); // Tue Feb 21 2023
console.log('Add 9 weeks: ', addWeeks(date, 9)); // Tue Apr 04 2023
console.log('Subtract 52 weeks: ', subWeeks(date, 52)); // Tue Feb 01 2022

Check it on runkit.

How To Subtract Weeks from a Date

Well, subtracting weeks is as simple as adding weeks with date-fn's.

import { subWeeks } from 'date-fns'

//31st of January 2023
const date = new Date(2023, 0, 31);

console.log(date); // Tue Jan 31 2023
console.log('Subtract 1 week: ', subWeeks(date, 1));// Tue Jan 24 2023
console.log('Subtract 3 weeks: ', subWeeks(date, 3)); // Tue Jan 10 2023
console.log('Subtract 9 weeks: ', subWeeks(date, 9)); // Tue Nov 29 2022

Check it on runkit.

How To Add Months to a Date

Adding months to a JavaScript Date can be simple, but in some cases, it can be tricky.

import { addMonths } from 'date-fns'

//31st of January 2023
const date = new Date(2023, 0, 31);

console.log(date); // Tue Jan 31 2023
console.log('Add 1 month: ', addMonths(date, 1)); // Tue Feb 28 2023
console.log('Add 3 months: ', addMonths(date, 3)); // Sun Apr 30 2023
console.log('Add 9 months: ', addMonths(date, 9)); // Tue Oct 31 2023
console.log(date); // Tue Jan 31 2023

Check it on runkit.

Let's say it's the 31st of January 2023, but we want to add one month. Well, you need to know how many days there are next month. This is tricky because that differs during leap years. So that's why in 2023, it will be the 28th of February, but if you try to add one month to the 31st of January in 2024, the outcome will be the 29th of February.

import { addMonths } from 'date-fns'

//31st of January 2024
const date = new Date(2024, 0, 31);

console.log(date); // Wed Jan 31 2024
console.log('Add 1 month: ', addMonths(date, 1)); // Thu Feb 29 2024

Check it on runkit.

So this already proves why date-fns is much easier to use than plain JavaScript Date.

How To Subtract Months from a Date

Like adding months to a Date , subtracting months from a Date is equally simple.

import { subMonths } from 'date-fns'

//31st of January 2023
const date = new Date(2023, 0, 31);

console.log(date); // Tue Jan 31 2023
console.log('Subtract 1 month: ', subMonths(date, 1)); // Sat Dec 31 2022
console.log('Subtract 3 months: ', subMonths(date, 3)); // Mon Oct 31 2022
console.log('Subtract 9 months: ', subMonths(date, 9)); // Sat Apr 30 2022
console.log(date); // Tue Jan 31 2023

Check it on runkit.

How To Add Years to a Date

Adding years is a perfect example of how date-fns handles cases with leap years.

import { addYear } from 'date-fns'

//31st of January 2023
const date = new Date(2023, 0, 31);
const leapYear = new Date(2024, 1, 29);

console.log(date);
console.log('Add 1 year: ', addYears(date, 1));
console.log('Add 1 year to leap year: ', addYears(leapYear, 1));
console.log('Add 3 year: ', addYears(date, 3));
console.log('Add 9 year: ', addYears(date, 9));
console.log(date);

Check it on runkit.

In the example, you can see that every outcome of the addYears function is correct. The case with the leap year is also perfect.

How To Subtract Years from a Date

In this example, you can also see that subtracting years from a Date is a breeze with date-fn's.

import { subYears } from 'date-fns'

//31st of January 2023
const date = new Date(2023, 0, 31);
const leapYear = new Date(2024, 1, 29);

console.log(date); // Tue Jan 31 2023
console.log('Subtract 1 year: ', subYears(date, 1)); // Mon Jan 31 2022
console.log('Subtract 1 year to leap year: ', subYears(leapYear, 1)); // Tue Feb 28 2023
console.log('Subtract 3 year: ', subYears(date, 3)); // Fri Jan 31 2020
console.log('Subtract 9 year: ', subYears(date, 9)); // Fri Jan 31 2014
console.log(date); // Tue Jan 31 2023

Check it on runkit.

How To Add or Subtract Hours, Minutes, or Seconds from a Date

Equally important in calculating Date in JavaScript is time because adding 2 hours when it's 22:30 is not the same day but is the next day. Or it calculates a flight time traveling through different time zones. It's not easy, but lucky you can use date-fns for it.

import { 
    addSeconds, subSeconds, addMinutes, 
    subMinutes, addHours, subHours
} from 'date-fns'

//31st of January 2023
const date = new Date(2023, 0, 31, 10, 18, 35);

console.log(date); // Tue Jan 31 2023 10:18:35
console.log('Add 15 seconds: ', addSeconds(date, 15)); // Tue Jan 31 2023 10:18:50
console.log('Subtract 2 seconds: ', subSeconds(date, 2)); // Tue Jan 31 2023 10:18:33
console.log('Add 15 minutes: ', addMinutes(date, 15)); // Tue Jan 31 2023 10:33:35
console.log('Subtract 2 minutes: ', subMinutes(date, 2)); // Tue Jan 31 2023 10:16:35
console.log('Add 15 hours: ', addHours(date, 15)); // Wed Feb 01 2023 01:18:35
console.log('Subtract 2 hours: ', subHours(date, 2)); // Tue Jan 31 2023 08:18:35

Check it on runkit.

How To Add or Subtract Days, Weeks, Months, and Years to a Date

Let's say we want to add seven days, three weeks, and nine months to date; we can combine the addDays, addWeeks, and addMonths for that. But even faster is the add or sub function in which you only have to add a parameter in which you configure it.

import { add, sub } from 'date-fns'

//31st of January 2023
const date = new Date(2023, 0, 31);

console.log(date);
console.log('Subtract 5 days, 2 months, 3 weeks and 7 years: ', sub(date, {
    days: 5,
    weeks: 3,
    months: 2,
    years: 7
})); // Wed Nov 04 2015
console.log('Add 5 days, 2 months, 3 weeks and 7 years: ', add(date, {
    days: 5,
    weeks: 3,
    months: 2,
    years: 7
})); // Fri Apr 26 2030

Check it on runkit.

How To Calculate the Difference Between Dates

In many situations, we want to calculate the difference between two dates. There are many functions in date-fns to do that easily.

import { 
    differenceInSeconds, differenceInMinutes, differenceInHours, 
    differenceInDays, differenceInCalendarDays, differenceInBusinessDays, 
    differenceInWeeks, differenceInCalendarWeeks, differenceInMonths, 
    differenceInCalendarMonths, differenceInQuarters, differenceInCalendarQuarters, 
    differenceInYears, differenceInCalendarYears 
} from 'date-fns'

//31st of January 2023
const fromDate = new Date(2023, 0, 31);
const toDate = new Date(2025, 7, 15);
const log = console.log

log(`Diff in seconds: ${differenceInSeconds(toDate, fromDate)}`) // 80089200
log(`Diff in minutes: ${differenceInMinutes(toDate, fromDate)}`) // 1334820
log(`Diff in hours: ${differenceInHours(toDate, fromDate)}`) // 22247

log(`Diff in days: ${differenceInDays(toDate, fromDate)}`) // 927
log(`Diff in business days: ${differenceInBusinessDays(toDate, fromDate)}`) // 663
log(`Diff in calendar days: ${differenceInCalendarDays(toDate, fromDate)}`) // 927

log(`Diff in weeks: ${differenceInWeeks(toDate, fromDate)}`) // 132
log(`Diff in calendar weeks: ${differenceInCalendarWeeks(toDate, fromDate)}`) // 132

log(`Diff in months: ${differenceInMonths(toDate, fromDate)}`) // 30
log(`Diff in calendar months: ${differenceInCalendarMonths(toDate, fromDate)}`) // 31

log(`Diff in quarters: ${differenceInQuarters(toDate, fromDate)}`) // 10
log(`Diff in calendar quarters: ${differenceInCalendarQuarters(toDate, fromDate)}`) // 10

log(`Diff in years: ${differenceInYears(toDate, fromDate)}`) // 2
log(`Diff in calendar years: ${differenceInCalendarYears(toDate, fromDate)}`) // 2

Check it on runkit.

In the example, we have calculated the differences between the two dates. Seconds, minutes, hours, days, weeks, months, quarters, and years.

If you check the days, you see three different functions. Days, business days, and calendar days are slightly different from each other:

• differenceInDays calculates full-day periods between two dates.
• differenceInBusinessDays calculates only business days and ignores the weekends.
• differenceInCalendarDays calculates the difference between two dates but ignores the time.

You have two functions for the weeks, months, quarters, and years. The method with Calendar in it ignores the time part; the other one considers the time. (check the documentation if you want to dive deeper into it)

Conclusion

Navigating through date calculations in JavaScript might initially seem like a complex labyrinth. However, as we've explored throughout this guide, it doesn't have to be. With the right tools and understanding, adding and subtracting dates – seconds, minutes, hours, days, weeks, months, or even years – can be effortless.

By choosing a powerful and modular library like date-fans, you're simplifying your coding process and ensuring optimal application performance, keeping your bundle sizes lean.

As with any skill, mastery comes with practice. So, go ahead and try out these date-fns functions in your projects. Before long, you'll handle date manipulations in JavaScript like a pro. Happy coding!

Thanks

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 won’t 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. 👍💰🎉🥳🔥

Additionally, we'll share an effective startup script to jump-start your project after the initial Nuxt installation.

Originally published on: ByRayRay.dev

TLDR;

• npx nuxi add component TheHeader

• npx nuxi add layout HomePage

• npx nuxi add page HomePage

• npx nuxi add composable foo

• npx nuxi add plugin foo

• npx nuxi add middleware foo

• npx nuxi add api base

Nuxt CLI

The Nuxt CLI is one of the most underrated tools of the entire Nuxt ecosystem. Especially the part where you can generate components, layouts, pages, compostables, and more. No more manual work on creating these files; just run the command. In the examples below, I'll show you how it works.

Nuxt Add Component

We all know the modern JavaScript framework is built by components, so let's start with that. Let's run the CLI and see the result.

npx nuxi add component TheHeader

This command creates the components/TheHeader.vue with this content.

<script lang="ts" setup></script>

<template>
  <div>
    Component: TheHeader
  </div>
</template>

<style scoped></style>

If you want the component file nested in a folder, then use it like this example:

npx nuxi add component base/Button

Nuxt Add Layout

Generating a layout is equally simple:

npx nuxi add layout HomePage

This command creates a layout in the layouts folder with this content.

<script lang="ts" setup></script>

<template>
  <div>
    Layout: HomePage
    <slot />
  </div>
</template>

<style scoped></style>

Nuxt Add Page

Generating a page is equally simple:

npx nuxi add page about

This command creates a page in the pages folder with this content.

<script lang="ts" setup></script>

<template>
  <div>
    Page: about
  </div>
</template>

<style scoped></style>

If you want to create a child page or a page based on a specific ID, use this command:

npx nuxi add page "post/[id]"

Or if you need a route like /services/web/design.

npx nuxi add page services/web/design

Nuxt Add Composable

Generating a composable is equally simple:

npx nuxi add composable foo

This command creates a composable in the composables folder with this content.

export const useFoo = () => {
  return ref()
}

Nuxt Add Plugin

Generating a plugin is equally simple:

npx nuxi add plugin for

This command creates a layout in the layouts folder with this content.

export default defineNuxtPlugin((nuxtApp) => {})

Nuxt Add Middleware

Generating middleware is equally simple:

npx nuxi add middleware for

This command creates a middleware file in the middleware folder with this content.

export default defineNuxtRouteMiddleware((to, from) => {})

Nuxt Add Api

Generating a layout is equally simple:

npx nuxi add api base

This command creates an API file with this content in the server/app folder.

export default defineEventHandler((event) => {
  return 'Hello base'
})

Nuxt Startup Script

I often find myself creating the same files over and over again when I start a new Nuxt project. In this case, I created a shell script for myself which contains all the default files I use most of the time.

I call this file (or you can drop this command in your terminal and run it) in my terminal and have all the defaults created automatically.

Adjust this script for your own needs 👍

git init &&
npx nuxi add layout default &&
npx nuxi add layout HomePage &&
npx nuxi add component TheHeader &&
npx nuxi add component TheFooter &&
npx nuxi add api base &&
npx nuxi add page index &&
rm -of app.vue

Thanks

Now you are entirely up to date with how to use Nuxt CLI. I hope you can start using them right away. If you want to learn more of the Nuxt CLI, check their awesome documentation.

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 won’t 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. 👍💰🎉🥳🔥

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:

• Github

• CodeSandbox

• Example website

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 won’t 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. 👍💰🎉🥳🔥

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.

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 👍

The answer:

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:

1. What if I add 3 months and 1 day to today? What date is that?

2. Explain the calculation

3. Would the answer be different if adding days first in the calculation?

4. 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;
  [key: string]: any;
}

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

interface Product {
  id: number;
  name: string;
  category: Category;
  [key: string]: any;
}

/**
 * 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!

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 won’t 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. 👍💰🎉🥳🔥

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:

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!

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 won’t 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. 👍💰🎉🥳🔥

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:

1. Efficiency: AI can automate tasks and processes and saves time for you to focus on more critical tasks.

2. 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)

3. Improved Decision-Making: AI can help you make more informed decisions by providing insights and recommendations based on data analysis.

4. Enhanced Collaboration: AI can help teams collaborate more effectively by providing real-time analysis and insights.

5. 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.

1. 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 👍

2. 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.)

3. 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!

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 won’t 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. 👍💰🎉🥳🔥

To use the includes() method, you call it on the array you want to search and pass in the value you are looking for as an argument. If the value is in the array, the includes() method will return a boolean value of true. If the value is not in the array, the includes() method will return false.

Originally published on ByRayRay.dev.

TLDR;

For those that don't want to deep-dive into how to use the includes() method, here is the TLDR; 😉

• The includes() method is used to check if a value is in an array.

• It returns a boolean value of true if the value is in the array and false if it is not.

• You can pass in a second argument as the starting index to search for the value within a specific array range.

• The includes() method is case-sensitive, so searching for an value with a different capitalization than it appears in the array will return false.

Search for a value in a JavaScript array

Let's dive into the code and see how to use the includes() method in JavaScript. Here is an example of how to use the includes() method:

%[https://runkit.com/devbyrayray/check-if-string-is-in-javascript-array-with-includes]

Search for a value in a part of a JavaScript array

You can also use the includes() method to search for something inside a part of the array. To do this, you can give the includes() method a second number that tells it where to start looking. For example:

Remember that the includes() method is picky about capital letters. If you want something spelled differently with capital letters, the includes() method will return false.

Find a value while ignoring the case sensitivity

There is an easy way to make the includes()method does not care about capital letters. We can use the some() method to look at each thing in the array. For each thing, we can use the toLowerCase()method to make all the letters lowercase. Then we can see if things are the same. For example:"

Advanced scenario’s for the includes() method

I wrote two real-world scenarios where the includes() method could be helpful. I hope you can use them for your situation.

Filtering a list of email addresses

Imagine you have a list of email addresses you want to filter based on whether they contain a specific domain. You can use the includes() method to check if each email address contains the domain you are looking for and then add it to a new list if it does. For example:

Validating user input

You have a form on your website where users can enter their zip codes. You can use the includes() method to check if the user's zip code is in a list of valid zip codes for your delivery area. For example:

So whether you're trying to find a specific fruit in a list of fruits, check if someone's zip code is in the right place, or see which number appears the most in a list of numbers, the includes() the method can help you out. Remember to be careful about capital letters (unlike the includes() method) when you use it, and you'll be all set! Happy coding!

Thanks!

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 won’t 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. 👍💰🎉🥳🔥

Originally published on ByRayRay.dev.

How does the reduce method work?

The reduce() method in JavaScript is used to execute a function to each element in an array, resulting in a single output value. It operates on an array of elements, performing a computation on each element in the array and building up the result.

Here is the syntax for using the reduce() method:

array.reduce((accumulator, currentValue, currentIndex, array) => {
  // code to be executed
}, initialValue);

The reduce() method takes in a callback function as its first argument. This callback function is called for each element in the array and takes four parameters:

• accumulator: This is the value returned in the final iteration. It starts with the initial value if provided or the first element of the array if no initial value is provided. And adds up every iteration.

• currentValue: This is the current element being processed in the array.

• currentIndex (optional): This is the index of the current item that is being processed in the array.

• array (optional): This is the array reduce() that was called upon.

The callback function should return the updated value for the accumulator.

Here is a simple example of using reduce() to calculate all the numbers in an array:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

Check runkit example

In this example, the reduce() method is called on the numbers array and is passed a callback function that adds the accumulator and the current value. The initial value for the accumulator is 0.

The reduce() method iterates through the numbers in the array, starting with the first element, and applies the callback function to each element.

The returned value from the callback function becomes the new value for the accumulator, which is passed to the next iteration. This process continues until all elements in the array have been processed and the final value of the accumulator is returned.

Let's check how we can apply this to our product array of a fictional shopping cart.

Get a total price from an array of object properties

Let's say you have an array of products in your shopping cart.

const products = [
    {
      "price": 10,
      "title": "Item 1"
    },
    {
      "price": 20,
      "title": "Item 2"
    },
    {
      "price": 30,
      "title": "Item 3"
    }
]

To calculate the prices, we first need an array of prices. We want to calculate the total price of our shopping cart. We can do that by using the .map() method. In the example below, we create a new array with only the prices of our products.

const prices = shoppingCart.map((product) => product.price)

After that, we can use that array to calculate the total price with the reduce method.

const prices = shoppingCart.map((product) => product.price)
const total = prices.reduce((acc, curr) => acc + curr)

console.log('total: ', total )

We can also write this shorter and chain the map() and reduce() methods.

const totalPrice = shoppingCart.reduce((acc, curr) => acc + curr.price, 0)

console.log('total: ', totalPrice )

Check runkit example

That was easy. 👍

Thanks!

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 won’t 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. 👍💰🎉🥳🔥

Originally published on ByRayRay.dev.

The find() method

The find() Array method in JavaScript is super easy to use. The method returns the first item in the array that matches your condition. (check the documentation on MDN Web Docs)

In the find method, you pass an Arrow function with a parameter that will be equal to each item in the array. Internally the find() method will loop through all the items in the array trying to find your search value.

In the arrow function, we check if student is equal to 'Jake' or 'Rob'. It will return the string immediately when the value is found. It will return undefined when the value isn't found.

Find a string in an array

const students = [
    'Jake',
    'Ray',
    'Lisa',
    'Isabella',
    'Tom',
    'Kevin',
    'Armin'
]

students.find((student) => student === 'Jake'); // Returns 'Jake'
students.find((student) => student === 'Rob'); // Returns undefined

Check runkit example.

Now we are searching for 'Jake' in the students array. This method will return 'Jake' when it is found. When we search for 'Rob', it will return undefined because 'Rob' is not in the array.

Find a number in an array

const numbers = [
    5000,
    538,
    78123,
    2,
    45,
    34097
]

numbers.find((number) => number === 538); // Returns '538'
numbers.find((number) => number === 1); // Returns undefined

Check runkit example.

Now we are searching for 538 in the numbers array. This method will return 538 when it is found. When we search for 1 it will return undefined because 1 is not in the array.

Find an object property value in the array.

When you want to find a property value in an array of objects, it is as easy as with singular values. In the example below, we try to find the first project with the type of 'development'. With the second example, we try to find a project where '2024-01-27' is between the startDate and the endDate.

A few years ago, I created a package is-between-js for my personal usage. You can calculate if a specific value is between a minimal and a maximum number. You are free to use it because it's free on NPM and GitHub 😉

import { isBetween } from "is-between-js";
const dateNumber = (date) => new Date(date).getTime();

const projects = [
    {
        startDate: '2022-11-26',
        endDate: '2023-11-26',
        title: 'Build an API',
        type: 'Development',
    },
  {
        startDate: '2022-11-26',
        endDate: '2023-11-26',
        title: 'Build Frontend',
        type: 'Development'
    },
  {
        startDate: '2023-03-05',
        endDate: '2024-03-26',
        title: 'Create marketing content',
        type: 'Marketing'
    },
  {
        startDate: '2022-11-26',
        endDate: '2024-03-26',
        title: 'Project management',
        type: 'Management'
    },
]

console.log(projects.find((project) => project.type.toLowerCase() === 'development'))
console.log(projects.find((project) => isBetween(dateNumber('2024-01-27')).min(dateNumber(project.startDate)).max(dateNumber(project.endDate)).calc()))

Check runkit example.

You can check if a property value equals a value by returning this with the arrow function project.type === 'value'. In this case, we modify the string to lowercase characters in the example above to match even though the capitalization isn't equal.

In the example above, we compare a few property values in the isBetween function, which returns a boolean to the find method. It's that easy!

As you've seen, you can find values of every data type in a JavaScript array. It is not difficult to learn JavaScript; just practice, practice, and practice 👍

Thanks!

After reading this story, I hope you learned something new or are inspired to create something new! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode.

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

If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM's are always open 😁

One of the main reasons why TypeScript is essential is that it allows developers to add type annotations to their code. This means they can specify the data type of variables, function arguments, and return values, which can help prevent many common bugs and make the code easier to read and understand.

Originally published on ByRayRay.dev.

Function without types

For example, consider the following JavaScript code:

function add(x, y) {
    return x + y;
}

const result = add(1, "2");

In this code, the add function is supposed to add two numbers, but because JavaScript is a dynamically typed language, it will silently try to convert the string "2" to a number and then add it to 1, producing the wrong result. This can be very difficult to debug, especially in large and complex codebases.

Function with types

With TypeScript, we can add type annotations to the add function to specify that it takes two numbers as arguments and returns a number:

function add(x: number, y: number): number {
    return x + y;
}

const result = add(1, "2"); // This will cause an error

Now, if we try to pass a string as the second argument to the add function, the TypeScript compiler will give us an error, alerting us to the fact that there is a bug in our code. This can save us a lot of time and frustration, and it can help ensure that our code is correct and free of bugs.

Another reason why TypeScript is important is that it provides many features that are not available in vanilla JavaScript. For example, TypeScript supports classes, interfaces, and modules, which can help us organize our code more logically and maintainable way. It also supports type inference, which can automatically infer the types of variables and expressions based on the context in which they are used. This can save us a lot of time and effort, and it can make our code more concise and readable.

Overall, TypeScript is a valuable tool for writing great and readable JavaScript code. It allows us to add type annotations to our code, which can help prevent bugs and make the code easier to understand. It also provides additional features unavailable in vanilla JavaScript, which can help us write more modular and maintainable code. If you are working on a large or complex JavaScript project, it is worth considering using TypeScript.

If you want to start learning TypeScript today? I wrote a great post "TypeScript for beginners" where I teach how you can use all the essential parts of TypeScript. As an example I use 🍕😅

Thanks!

After reading this story, I hope you learned something new or are inspired to create something new! 🤗 If so, consider subscribing via email (scroll to the top of this page) or follow me here on Hashnode.

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

If I left you with questions or something to say as a response, scroll down and type me a message. Please send me a DM on Twitter @DevByRayRay when you want to keep it private. My DM's are always open 😁