1. 💻 Software Engineer, Backend - Coinbase (International)

Location: Remote
Apply here

At Coinbase, we’re on a mission to increase economic freedom around the world. As a remote-first company, we're looking for talented individuals who are passionate about crypto and Web3. This role focuses on the International Payments Team, ensuring fast, reliable, and secure access to fiat payment rails globally.

Responsibilities:

• Collaborate with engineers, designers, product managers, and senior leadership

• Write high-quality, well-tested code

• Solve large-scale, complex technical problems

Requirements:

• Fresh graduates with a degree in Math, Stats, Physics, or Computer Science

• Experience in any OO programming language (Golang, Ruby, etc.)

• Willingness to learn and work on frontend code

2. 👨‍💻 Associate Developer - Software Engineering - UST

Location: Bangalore
Apply here

UST is seeking a full stack developer to join their team. The role involves developing and supporting existing applications with a focus on performance, quality, and responsiveness.

Responsibilities:

• Ensure best possible performance of applications

• Maintain code quality and organization

• Design and build application layers

Skills:

• Proficiency in C#, .NET Core, MS SQL, HTML, CSS, Angular

• Knowledge of MS SQL Server and performance optimization

• Understanding of code versioning tools like Git & TFS

3. 🌐 Trainee - Nagarro

Location: Remote, India
Apply here

Nagarro, a digital product engineering company, is looking for fresh talent to join their dynamic and non-hierarchical work culture. This is a fantastic opportunity to work at scale across all devices and digital mediums.

Company Description:

• Building products, services, and experiences that inspire

• A team of 18,000+ experts across 36 countries

4. 🚀 Software Development Engineer - I - Capillary Technologies

Location: Bengaluru
Apply here

Capillary Technologies is hiring a Software Development Engineer to join their Cloud CRM product team. The role involves developing, designing, scaling, and maintaining applications.

Responsibilities:

• Develop and design scalable applications

• Write effective, scalable code

• Test and debug programs

Requirements:

• 0-2 years of software development experience

• Strong coding and design skills in Python, Golang, NodeJs, Core Java/J2EE

• Experience with Non-Relational databases is a plus

5. 🛠️ Graduate Engineer Trainee - Jio Platforms

Location: Bengaluru
Apply here

Jio Platforms is looking for fresh graduates to join their team as Graduate Engineer Trainees. This is a great opportunity to work with a leading telecom and digital services company.

Responsibilities:

• Develop, test, and maintain software applications

• Collaborate with senior engineers on projects

Requirements:

• Recent graduates in relevant fields

• Strong problem-solving skills

• Proficiency in relevant programming languages

Don't miss out on these fantastic opportunities to kickstart your career in tech! Follow @taditdash for more job updates and career tips. DM if you need more details or job links!

1. Graduate Intern at Intel

🔗 Apply Here: Intel Graduate Intern
📍 Location: Bengaluru, Karnataka, India | Hyderabad, Telangana, India
📅 Job ID: JR0257947
🖥 Work Mode: Hybrid
🕒 Full/Part Time: Full Time

Job Description

As a Graduate Intern at Intel, you’ll be involved in a variety of technical roles, primarily focusing on semiconductor industry pre and post-silicon validation. This 1-year internship offers an excellent opportunity to gain hands-on experience in a leading tech company.

Qualifications

• Minimum: B.Tech/Bachelors in Engineering (Electronics, Electrical, Computer Science, or similar)

• Preferred: M.Tech/Masters in Engineering from a reputed college

• Prior relevant job or internship experience is highly desired.

Benefits

• Competitive pay, stock, bonuses

• Health, retirement, and vacation benefits

• Hybrid work model

2. LLM Intern at Sony Research India

🔗 Apply Here: Sony Research India LLM Intern
📍 Location: Bengaluru, Karnataka, India (Remote/Hybrid)
📅 Duration: 6 months starting May 2024, full-time

Job Description

Sony Research India is seeking interns to work on cutting-edge technologies like Large Language Models (LLM), Neural Machine Translation (NMT), and more. This role is perfect for those passionate about AI and data analytics.

Qualifications

• Ph.D. or Master’s in Computer Science, or Bachelor's with hands-on Python experience

• Must-have skills: Pytorch, TensorFlow, scikit-learn, knowledge of LLM, RAG, RLHF-based pipeline

Values

• Dreams & Curiosity, Diversity, Integrity & Sincerity, Sustainability

3. Data Intern at PayU

🔗 Apply Here: PayU Data Intern
📍 Location: Bangalore/Gurgaon/Mumbai
🕒 Duration: 2-12 months, full-time

Job Description

Join PayU as a Data Intern and work on science/analytics-based projects. This role involves SQL, Python, and a strong understanding of data analysis.

Qualifications

• Degree in Engineering, Statistics, Computer Science, Mathematics, or similar

• Excellent understanding of SQL, Python

• Strong problem-solving skills and a positive attitude

Benefits

• Dynamic workplace, inclusive environment

• Access to over 5000 training courses

4. Software Engineer at NetApp

🔗 Apply Here: NetApp Software Engineer
📍 Location: Bengaluru, Karnataka, India
🖥 Job Category: Software Engineering
📅 Job ID: 126163-en_US

Job Description

NetApp is a cloud-led, data-centric software company. As a Software Engineer, you’ll work on innovative data management solutions and participate in the full software development lifecycle.

Qualifications

• 0-2 years of software development experience

• Bachelor’s/Master's degree in computer science or computer engineering

• Experience with AngularJS, ReactJS, REST API, Cloud, and Virtualization environments

Benefits

• Comprehensive medical, dental, wellness, and vision plans

• Educational assistance and financial savings programs

5. Software Developer at HP

🔗 Apply Here: HP Software Developer
📍 Location: Bangalore, Karnataka, India
🕒 Full Time

Job Description

HP is seeking a Software Developer proficient in C/C++, C#, WPF. This role involves developing software systems, coding, debugging, and integrating software with existing infrastructure.

Qualifications

• Four-year degree in Computer Science or related field

• 0-2 years of work experience

• Preferred certifications: CSSE, CSEP

Skills

• Agile Methodology, AWS, API, Automation, Full Stack Development, Kubernetes, and more

Follow my blog newsletter and Instagram for more updates on exciting job opportunities like these! 🚀

What's in it for you?

✨ 3-month internship with a fixed stipend

💎 Additional incentives and bonuses

✔️ Full-time job offer post-internship with a competitive salary

✔️ Comprehensive training provided by industry experts

💎 Amazing career growth opportunities

Eligibility

📚 Students from BTech, MBA, or MCA programs

🌟 Freshers with a keen interest in IT and business development

Interview Details

📅 Date: 24.05.2024

📍 Venue: Office No.4, 4th Floor, Indra Palace, Patia-Kalarahanga Rd, Near Patia Mo Bus Depot, Bhubaneswar, Odisha, 751024

Don't miss this chance to jumpstart your career with MindBrain!

For the latest updates on job openings and career tips, be sure to subscribe to my newsletter and follow my Instagram!🌐📸

Original Post

I encountered a scenario where I needed to test if a method inside another method was actually invoked. This led me to learn about the Verifiable construct in the Moq library. 💻 It provides a concrete way to ensure that the calls configured in the mock object are indeed invoked. ℹ

Example 🚀

Suppose a CartsController has a CreateOrder method that calls the GetCartItems method within it:

public async Task<IActionResult> CreateOrder(OrderViewModel orderViewModel)
{
    var cartItems = await _cartService.GetCartItems(orderViewModel.CartId);

    // More codes...

    return View("OrderCreated");
}

A unit test for this method can be written to verify whether GetCartItems is actually invoked or not. Let's see how we can achieve this.

How to do? 🤷‍♀️

Mark the mock setup for the method as Verifiable and then call the Verify method on the mock object.

Here is a code snippet for one unit test case:

// Mock setup inside the unit test for the GetCartItems method.
_cartServiceMock.Setup(x => x.GetCartItems(It.IsAny<int>())).ReturnsAsync(() => cartItems).Verifiable();

// The following CreateOrder calls the GetCartItems inside it.
var result = await cartsController.CreateOrder(orderModel);

// Now we can verify
_cartServiceMock.Verify();

Notice that we set up a method GetCartItems to be Verifiable. Then, we called the method inside the CartsController to create an order. The CreateOrder method calls the GetCartItems method inside it.

So, _cartServiceMock.Verify(); will now be successful as it invoked the GetCartItems method.

If for some reason it does not, then the test will throw an exception like in the following screenshot.

Feedback

I hope it is clear. Let me know if you have any doubts. 💪 Share, if you care. 🙌

Reference

1. Moq GitHub Repository

2. Moq Documentation on Verifications

Introduction 👇

The tech world is constantly evolving, and staying updated with the latest trends and innovations is crucial for professionals in the field. 🙏

Recently, I had the opportunity to attend the "Headless and Happy Hours" event organized by Hashnode and Razorpay, with support from New Relic and DigitalOcean. 🌊

The event proved to be an enlightening experience, offering insights into the headless architecture, backend as a service features, innovative notification solutions, and invaluable networking opportunities. 🤝🍻

Exploring Headless Architecture 🤯

One of the highlights of the event was delving into the world of headless architecture by Mr Tapas Adhikary. Hashnode, renowned for its user-friendly platform for building blogs, showcased its headless approach, which allows developers to create and scale blog sites with ease.

The session shed light on the advantages of adopting a headless approach, offering flexibility and scalability while maintaining a seamless user experience. 😎

Backend as a Service with Appwrite

Mr Aditya Oberai, a distinguished speaker at the event, provided valuable insights into the backend as a service feature offered by Appwrite. 🎉

His presentation highlighted the capabilities of Appwrite in simplifying backend development tasks, empowering developers to focus more on building innovative front-end experiences. 🐥

The discussion underscored the importance of leveraging efficient backend solutions in modern application development workflows. ⚒️

Innovative Notification Solutions 🔔

Another intriguing aspect of the event was the introduction of Novu, a cutting-edge notification solution presented by Mr. Sumit Saurabh. 👋

Novu promises to revolutionize developer workflows by offering seamless and customizable notification functionalities. The presentation sparked curiosity among attendees, showcasing the potential of Novu to enhance user engagement and drive platform growth.

Networking and Insights

Beyond the informative sessions, the event provided ample networking opportunities with industry leaders and fellow enthusiasts. Meeting Mr. Subhendu Panigrahi proved to be a highlight, as his insights into entrepreneurship and clarifications on various technical queries enriched the learning experience. 📚

Additionally, interactions with Mr. Tapas Adhikary and Mr. Sandeep Panda about potential product ideas with the collaborative spirit of the tech community. 🤝

Engaging Conversations

Engaging conversations with Ishika kesarwani provided valuable insights into community activities, developer relations, and software development practices. 👌

Let's meet up!

This does not stop here. I will be attending more events in the future to network with techies and learn from them.

Let's meet and discuss. 🙂

About Experis 🏢

The event started with an introduction by Sriram Ramakrishnan, Sr. Practice VP at Experis, and Patrick Mclnenly, Enterprise Delivery Director at Experis. They talked about the vision and mission of Experis, which is to provide innovative solutions and talent for the digital age.

They also explained how Experis helps clients leverage serverless technologies to achieve scalability, agility, and cost-efficiency.

Architecting Serverless applications on Azure 🛠️

The first technical session was delivered by Karthikeyan VK, CTO at PROIndia and Microsoft MVP. He gave an overview of the serverless architecture and its benefits, such as reduced operational overhead, faster time to market, and pay-per-use pricing.

He also demonstrated how to design and implement serverless applications on Azure using various services, such as Azure Functions, Event Grid, and Cosmos DB.

Building Serverless .NET applications on Azure 💻

The next session was presented by Aditya Oberai, Developer Advocate at Appwrite and Microsoft MVP. He focused on how to build serverless .NET applications on Azure using C#, Visual Studio, and Azure DevOps.

He showed how to create, test, debug, and deploy Azure Functions using different triggers and bindings.

He also shared some best practices and tips for optimizing the performance and security of serverless .NET applications.

Wrap up/Goodies/Closing note 🎁

The event concluded with a wrap-up by Sriram and Pat, who thanked the speakers, the audience, and the sponsors for making the event a success. They also distributed some goodies to the attendees, such as water bottles with the Experis logo. I was lucky enough to get one of them!

My takeaways 🙌

I really enjoyed attending the event and learned a lot about serverless on Azure. I also got to network with some fantastic people who share my passion for technology. I would like to thank Experis for organizing this event and giving me this opportunity. I would also like to congratulate the BDotnet User Group and specially Swaminathan Vetri for coordinating this event. I look forward to attending more events like this in the future.

One of the best moments of the event was when I got a signed copy of Karthikeyan’s book “Developers Road Ahead”. It is a great book that covers various topics related to software development and career growth. I can’t wait to read it!

Gallery

One of the new features in .NET 8 is the option to simplify the output path and folder structure for build outputs. In this blog, I’ll explain what this feature is, why it is useful, and how to use it. At the time of writing this blog, I am using the .NET 8 SDK Version - 8.0.100-preview.6.23330.14.

What is the output path? 📂

The output path is the location where the build artifacts of your .NET application are stored. Build artifacts include compiled assemblies, configuration files, dependencies, symbols, and other files that are needed to run or debug your application.

What was the problem with the previous output path structure? ❌

Previously, .NET applications produced a deep and complex set of output paths for different build artifacts.

For example, if you had a .NET Core console app named MyApp, targeting netcoreapp3.1 and net5.0 frameworks, and built it in Debug mode, you would get something like this:

MyApp
├── bin
│   ├── Debug
│   │   ├── netcoreapp3.1
│   │   │   ├── MyApp.dll
│   │   │   ├── MyApp.pdb
│   │   │   ├── MyApp.runtimeconfig.dev.json
│   │   │   ├── MyApp.runtimeconfig.json
│   │   │   └── MyApp.deps.json
│   │   └── net5.0
│   │       ├── MyApp.dll
│   │       ├── MyApp.pdb
│   │       ├── MyApp.runtimeconfig.dev.json
│   │       ├── MyApp.runtimeconfig.json
│   │       └── MyApp.deps.json
└── obj
    ├── Debug
    │   ├── netcoreapp3.1
    │   │   ├── MyApp.AssemblyInfo.cs
    │   │   ├── MyApp.AssemblyInfoInputs.cache
    │   │   ├── MyApp.assets.cache
    │   │   ├── MyApp.csproj.FileListAbsolute.txt
    │   │   └── project.assets.json
    │   └── net5.0
    │       ├── MyApp.AssemblyInfo.cs
    │       ├── MyApp.AssemblyInfoInputs.cache
    │       ├── MyApp.assets.cache
    │       ├── MyApp.csproj.FileListAbsolute.txt
    │       └── project.assets.json
    └── project.nuget.cache

As you can see, this structure is quite verbose and redundant. It also has some drawbacks, such as:

• It makes it harder to find and manage the output files, especially if you have a large solution with many projects and target frameworks.

• It increases the size of the output folder, as it contains duplicate files for shared dependencies across different target frameworks.

• It slows down the build process, as it requires copying files across different subfolders.

How does the new output path structure simplify things? ✅

The new output path structure gathers all build outputs into a common location, which makes it easier for tooling to anticipate. It also reduces the verbosity and redundancy of the previous structure.

To opt into the new output path format, you need to run the following command in order to create the Directory.Build.props file.

dotnet new buildprops --use-artifacts

For example, if you enable the simplified output path feature for the same MyApp console app using the command above, you would get something like this:

The directory listing tree will be something similar to the following.

MyApp
├───artifacts
│   ├───bin
│   │   └───MyApp
│   │       └───debug
│   │               MyApp.deps.json
│   │               MyApp.dll
│   │               MyApp.exe
│   │               MyApp.pdb
│   │               MyApp.runtimeconfig.json
│   └───obj
│       └───MyApp
│           │   MyApp.csproj.nuget.dgspec.json
│           │   MyApp.csproj.nuget.g.props
│           │   MyApp.csproj.nuget.g.targets
│           │   project.assets.json
│           │   project.nuget.cache
│           │
│           └───debug
│               │   .NETCoreApp,Version=v8.0.AssemblyAttributes.cs
│               │   apphost.exe
│               │   MyApp.AssemblyInfo.cs
│               │   ...

Essentially, it created an artifacts directory under the MyApp directory and generated all build files inside that. You can customize the path by editing the property ArtifactsPath in Directory.Build.props file.

<Project>
  <!-- See https://aka.ms/dotnet/msbuild/customize for more details on customizing your build -->
  <PropertyGroup>
    <ArtifactsPath>$(MSBuildThisFileDirectory)artifacts</ArtifactsPath>
  </PropertyGroup>
</Project>

As you can see, this structure is much simpler and cleaner. It also has some benefits, such as:

• It makes it easier to find and manage the output files, as they are all in one place.

• It reduces the size of the output folder, as it eliminates duplicate files for shared dependencies across different target frameworks.

• It speeds up the build process, as it avoids copying files across different subfolders.

Once you have enabled the simplified output path feature, you can use it as usual. You can build your solution, run your projects, debug them, test them, and deploy them. The only difference is that all your output files will be in the same folder.

You can also use the simplified output path feature with other features and tools that work with .NET 8, such as:

• Publishing: You can publish your projects to various platforms and destinations using the dotnet publish command or the Publish tool in Visual Studio. The published files will be placed in the same output folder as well.

• Packaging: You can package your projects into NuGet packages using the dotnet pack command or the Pack tool in Visual Studio. The package files will be placed in the same output folder as well.

• Testing: You can run your tests using the dotnet test command or the Test Explorer in Visual Studio. The test results will be placed in the same output folder as well.

• Code analysis: You can run code analysis tools such as Roslyn analyzers or StyleCop on your projects using the dotnet analyze command or the Code Analysis tool in Visual Studio. The analysis results will be placed in the same output folder as well.

Conclusion 🎉

The simplified output path feature is a new option that you can enable in .NET 8 to specify a single output path for all your projects. This can make your development workflow simpler, more organized, faster, and more compatible with other features and tools.

I hope you found this blog helpful and informative. If you have any questions or feedback, please leave a comment below.

📝 Deploying a .NET 6 application on a Windows server with IIS can be a thrilling yet challenging task. In this blog post, we will explore the steps our team followed, the hurdles we encountered, and the solution that ultimately led to success.

Join me on this journey as we unravel the mystery of the elusive "HTTP Error 500.31 - Failed to load ASP.NET Core runtime." 🕵️‍♂️

Deployment Steps 📢

Let's look at the high-level steps that we followed to build and deploy the .NET 6 WebAPI.

Step 1: Installing the Latest ASP.NET Core Hosting Bundle 💻

The first step we took was installing the essential ASP.NET Core Hosting bundle from Microsoft Official. At the time of our deployment, .NET 7 was the latest, and we downloaded the bundle from the link.

Take a look at the screenshot below highlighting the Hosting Bundle area.

Step 2: Publishing the .NET 6 WebAPI Project 🚀

With the Hosting Bundle installed on our local machine, we proceeded to publish the .NET 6 WebAPI project as a framework-dependent build. This process ensures that the application will run seamlessly on the target server.

Check out the screenshot below to get a glimpse of the publish settings.

Step 3: Moving Artefacts to the Windows Server 📂

Once the build artefacts were generated, we transferred them to the Windows Server, preparing for the deployment process.

Step 4: IIS Configuration and Application Pool Setup ⚙️

To deploy the application, we followed the typical IIS steps, creating a new Application Pool with the .NET CLR version set to "No Managed Code". This configuration is crucial for running .NET Core applications in IIS.

Have a look at the screenshot below for an example of this setup.

Encountering the Mysterious HTTP Error 500.31 ❓

Despite our meticulous preparation, we faced an unexpected roadblock when browsing the application from IIS. The dreaded "HTTP Error 500.31 - Failed to load ASP.NET Core runtime" message appeared, leaving us puzzled. The Hosting Bundle installation should have included the necessary runtime, but it seemed unclear why it failed.

Here is the screenshot of the error from the browser.

Unravelling the Solution 💡

Undeterred, we launched into extensive research and tried various approaches involving the Application Pool and IIS settings, but to no avail. It wasn't until we stumbled upon online discussions about the Hosting Bundle's backward compatibility that we gained a breakthrough.

The Missing Piece ASP.NET Hosting Bundle 6 ✨

After multiple trials and errors, we finally achieved success by installing the ASP.NET Hosting Bundle 6. This seemingly simple step proved to be the key that unlocked the solution, resolving the enigmatic HTTP Error 500.31.

Conclusion

Our journey to deploy a .NET 6 application on a Windows Server with IIS was a rollercoaster of challenges and discoveries. By sharing my experiences and uncovering the importance of using the compatible Hosting Bundle, I hope to save you from similar headaches during your own deployments.

🌟 Feedback

I'd love to hear your thoughts! Leave a comment below if you found this blog post helpful or if you have any questions.

Happy deploying! 😊

💡 Introduction💡

Angular 16 Route Guards are powerful tools that help us control navigation and access to specific routes in our Angular 16 applications. With these guards, we can protect certain routes from unauthorized access or perform additional checks before allowing users to proceed. One such guard we'll explore today is the ProductDetailGuard. Let's unravel its secrets! 🕵️‍♂️

🔍 Background 🔍

My use case is very simple and it mimics a real application use case. Here it is.

• ProductDetail Component will only load if the URL contains a ProductId > 0

• Anything else will be rejected and redirected to Product Component

Let's explore the code!

🔐 The ProductDetailGuard Code 🔐

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';

export const ProductDetailGuard: CanActivateFn = (route, state) => {
  return Number(route.paramMap.get('id')) > 0
    ? true
    : inject(Router).createUrlTree(['/products']);
};

In the code snippet above, we define the ProductDetailGuard as a CanActivateFn. This type of guard is responsible for determining whether a user can activate (access) a particular route.

The guard function receives two parameters: route and state. The route parameter contains information about the current route, while state provides details about the router state.

🚧 Guarding the Product Detail Route 🚧

The purpose of our ProductDetailGuard is to protect the route that displays detailed information about a product. It ensures that the user can only access the route if the ProductId provided in the route parameters is a positive number (Number(route.paramMap.get('id')) > 0).

If the condition is met, the guard returns true, allowing the user to proceed to the desired route.

⛔ Redirecting Unauthorized Users ⛔

On the other hand, if the condition evaluates to false, indicating an invalid or unauthorized access attempt, the guard takes action.

It uses the inject function from @angular/core to access the Angular injector and retrieve an instance of the Router.

With the Router instance in hand, it creates a URL tree using createUrlTree(['/products']). This URL tree represents the desired destination, in this case, the /products route.

By returning the URL tree, the guard effectively redirects unauthorized users back to the products listing page.

🛡️ Putting the Guard into Action 🛡️

To activate our ProductDetailGuard, we need to integrate it into our application's routing configuration. Within the route definition for the product detail route, we can assign the guard using the canActivate property. For example:

{
  path: 'products/:id',
  component: ProductDetailComponent,
  canActivate: [ProductDetailGuard]
}

By attaching the ProductDetailGuard to the canActivate property, we ensure that the guard is invoked before allowing access to the ProductDetailComponent.

This way, we add an extra layer of security to our application, safeguarding the product detail page from unauthorized users.

🔒🔓 Strengthen Your Angular Application with Route Guards 🔓🔒

Route guards are an essential part of building secure and robust Angular applications. With guards like the ProductDetailGuard, we can control access to routes, protect sensitive information, and guide users towards the appropriate sections of our application.

By leveraging these powerful tools, we enhance the user experience and ensure that our application remains reliable and trustworthy.

So, next time you find yourself needing to restrict access to certain routes or perform additional checks before allowing navigation, remember to employ Angular 16 Route Guards. Your application and your users will thank you! 💪

📝🗣️ Feedback! 🗣️📝

I would greatly appreciate your feedback on this blog post! Please take a moment to share your thoughts, suggestions, or any questions you may have in the comments below. Your feedback is incredibly valuable to me as it helps me improve and provide you with even better content in the future. Thank you for your support and for taking the time to share your input!

In this blog post, we will explore a code snippet that addresses the issue of focusing on the first invalid field within a tab control component of the DevExtreme library in an Angular application. The code provides a workaround to handle validation errors and ensures that the user's attention is immediately drawn to the first field that requires correction.

Code Explanation

Let's dissect the code step by step to understand how it achieves the desired behavior.

focusOnInvalidTabAndField() {
  const brokenRules: any = this.validationGroup.instance.validate().brokenRules;
  if (brokenRules && brokenRules.length > 0) {
    // Find the closest dx-item.
    const closestTab = brokenRules[0].validator._$element[0].closest('.dx-multiview-item-content');

1. The function focusOnInvalidTabAndField() is a custom method responsible for focusing on the first invalid field within the tab panel.

2. The validate() method is invoked on the validationGroup.instance, which presumably refers to the instance of the validation group associated with the tab panel component. It returns an object containing the broken validation rules.

3. The brokenRules variable is assigned the brokenRules property of the validation result, allowing us to access the list of broken rules.

    if (closestTab) {
      // Get the tab index of the closest tab panel.
      const tabIndex = closestTab.dataset.tabItemIndex;

1. The code checks if the closestTab exists. If an invalid field is found, the closestTab refers to the DOM element associated with the tab panel that contains the invalid field.

2. The tabIndex variable is assigned the value of the tabItemIndex attribute from the dataset property of the closestTab element. This attribute presumably stores the index of the tab panel.

      // Select the found panel.
      this.selectedTabIndex = tabIndex;
      if (this.model.main.Headerbutton) {
        this.selectedHeaderButtonTabIndex = tabIndex;
      }

1. The code updates the selectedTabIndex property to the value stored in tabIndex, which effectively changes the selected tab panel to the one containing the first invalid field.

2. Additionally, if the condition this.model.main.Headerbutton evaluates to true, it updates the selectedHeaderButtonTabIndex property with the same value. This step might be specific to the application's logic and can be ignored if not applicable.

      // Focus the first error field.
      brokenRules[0].validator.focus();
    }
  }
}

1. Finally, the focus() method is invoked on the validator property of the first item in the brokenRules array. This method triggers the focus on the first invalid field, bringing it into the user's immediate attention.

Conclusion

The provided code snippet demonstrates a practical solution to focus on the first invalid field within a DevExtreme tab panel component. By utilizing the broken validation rules and leveraging the DOM manipulation capabilities, the code effectively selects the tab panel containing the invalid field and brings it into view, allowing the user to easily identify and address the validation error.

Please note that this code snippet assumes the presence of specific properties and elements (validationGroup, instance, model.main.Headerbutton, etc.) in the surrounding codebase, and it may require adjustments to fit different scenarios.

Full Code Snippet

focusOnInvalidTabAndField() {
    const brokenRules: any = this.validationGroup.instance.validate().brokenRules;
    if (brokenRules && brokenRules.length > 0) {
      // Find the closest dx-item.
      const closesetTab = brokenRules[0].validator._$element[0].closest('.dx-multiview-item-content');
      if (closesetTab) {
        // Get the tab index of the closest tab panel.
        const tabIndex = closesetTab.dataset.tabItemIndex;
        // Select the found panel.
        this.selectedTabIndex = tabIndex;
        if (this.model.main.Headerbutton) {
          this.selectedHeaderButtonTabIndex = tabIndex;
        }
        // Focus the first error field.
        brokenRules[0].validator.focus();
      }
    }
  }

In today's interconnected world, software developers have the power to create applications that touch the lives of people from all walks of life. It is crucial for developers to approach their work with empathy, ensuring that their software is accessible and inclusive for users regardless of their profession, education level, or background.

In this article, we will explore the importance of designing software with care, paying special attention to the needs and behaviours of users from diverse backgrounds.

By incorporating user research and interviews into the development process, developers can create software that truly caters to the needs of every user, including those who may be less educated or work in unconventional professions.

Understanding User Diversity 🤔

Users of software applications come from diverse backgrounds, professions, and educational levels. As developers, it is our responsibility to recognize and respect this diversity.

Every user should be able to navigate and utilize software seamlessly, regardless of their educational background or profession.

By understanding the challenges and needs of users from different walks of life, developers can create interfaces that are intuitive, inclusive, and cater to a wide range of users.

Importance of Empathy in Software Development 🧑💻👩💻

Empathy is a key element in designing user-centric software. Developers should strive to put themselves in the shoes of the end user, considering their unique circumstances, limitations, and preferences.

By empathizing with users who may have limited technical knowledge or unconventional work experiences, developers can create software that is easy to understand and use.

Tracking Usage Behavior Through User Research 🏃♂️

User research plays a vital role in understanding how people interact with software. By conducting interviews, surveys, and usability tests, developers can gain insights into the behaviours and preferences of their target users.

When designing software for users with varying levels of education or professional backgrounds, it is important to conduct research specifically tailored to those groups.

This research can help uncover pain points, identify usability issues, and inform design decisions that improve the overall user experience.

Designing for Accessibility 🦾

Inclusive software development also entails designing for accessibility. Developers should consider the needs of users with disabilities or limited digital literacy.

Incorporating features such as clear and concise instructions, visual cues, and easily navigable interfaces can make the software more accessible to a wider audience.

By embracing accessibility standards and guidelines, developers can ensure that their software is usable by everyone, regardless of their educational background or profession.

Conclusion 🥇🙏

As software developers, we have the power to shape the experiences of millions of users worldwide. It is our responsibility to design software that is inclusive and accessible to users from diverse backgrounds, including those who may be less educated or work in unconventional professions.

By approaching development with empathy, conducting user research, and paying attention to accessibility, we can create software that truly caters to the needs of all users.

Let us strive to build a digital world that embraces diversity and empowers every user to leverage the benefits of technology.

Cheers! 🥂🥂

Cypress is a new-age end-to-end testing tool. End-to-end testing ensures the application is tested exactly how the users are going to interact. Its installation is effortless, usage is smooth, and it runs very fast.

Let’s discuss more in the following sections.

Why are we even thinking of Cypress?

For a long time, testing has been an integral part of the software Quality Assurance department. However, the tools supporting this culture were merely doing 100% justification to the capabilities of modern development teams. With the agile way of software development, it is essential now that team members get all tools that can support quick and reliable feedback on the codes.

What if I tell you, that developers would now be able to write automated tests with their existing web technology knowledge using almost zero configuration?

Isn’t that interesting? 😮 Indeed.

“Developers writing automated tests” – this seems unreal, but now it is possible. That is where Cypress comes into the picture. It is a revolution that empowers the whole development team and not only the QA engineers.

Let’s quickly explore the features to find out how painless and swift it can be.

You will care about the below points as a development team

In this section, we will quickly discuss the unique features that Cypress is offering.

The Tool is amazing

Let me give you a quick walkthrough of the tool. Imagine you have written some Cypress test cases in a spec file and run the Cypress runner using the following npx command.

npx cypress run

It will blow up your mind. The UI is so soothing and provides all information needed to start up.

See the screenshot below.

It provides you with two options either E2E Testing or Component Testing. Even all docs are provided inside the tool, no need to go to google and ask. Refer to the screenshot of the docs section below.

Now, after you select a type, it asks you for a browser. Super user experience, I must say. Here is the capture.

It is time to see the main screen in action that lists all the test files. See the screenshot below. In this case, it is displaying one test file named todo.cy.js.

When you click on the test file name, it will try to run all cases written inside the spec file. Let's have a look.

Oops! We got one error. Notice how a detailed message is given. This error is because I forgot to run my app. So, I will run the app, and then we will explore other features in the following sections.

An update is instant, no need to rerun Cypress

Once you make any change to the spec file, Cypress detects and reruns the tests for you. Wonderful. 😊

Direct instant feedback on what Cypress is doing with your cases

Every command like cy.click() (to trigger the click event of an HTML element), cy.type() (to enter some data inside the HTML element) when run by the runner, logs all details about it. It means a lot to the team for debugging. You can go through each step on the left panel and see visually on the right panel how it interacts with the UI with the command.

Refer to the image below.

The left panel has logged all the steps with details. As soon as you hover over any step, you will see the element getting highlighted on the UI on the right side.

Interactive time-traveling

Imagine that you are going to each command and step to determine what happened on the UI. That is what we always wish to do as developers, right? The interactive time travel feature gives you the flexibility to go back to each step to see what happened at that time of execution. ⏳

Debugging is not a pain anymore

Any error in the test cases will be properly presented with details about the error along with the line number. See the screenshot below.

Surprisingly, it also has a stack trace that can take you to the line number inside the spec file directly. Try that. It is seamless. You will land up on your IDE with the file opened and the cursor at the error line number. 🧑‍💻

Zero server involvement

With the features like spies, stubs, and clocks, there is no requirement for an actual server. With interceptors, the API calls can be manipulated with a custom response by designing mocks. This is very powerful and promotes TDD. Test case development can be started without a backend.

Screenshots and Videos

Cypress can take screenshots and videos of the test case. It is especially useful when test cases fail.

Cypress supports any front-end framework or website

As long as the application or website runs inside a browser, Cypress can test your cases beautifully. All modern JavaScript frameworks like Vue, React, Angular, Elm, etc. are supported. It can even render any server-rendered apps.

Real-world Examples

The team has crafted a dedicated website just for learning Cypress and its features with real-world examples. Another reason to cherish. Here is the Link - https://learn.cypress.io/real-world-examples.

Now, let's see how Cypress stands in comparison to Selenium.

Cypress Vs Selenium

In this section, we will compare some key features between Cypress and Selenium.

Getting Started

This is something I care about while evaluating software.

With Cypress,

Inside the project directory, just run the following command

npm install cypress --save-dev

(NOTE: Assuming Node.js and npm installed)

or download from https://download.cypress.io/desktop. That is it.

However, with Selenium,

It is not that easy to start. There is no clear path to getting started. See the screenshot below of the getting started page. There is quite a read and also some concepts you need to grasp.

Now little below on the same page, on scrolling down, you will see multiple links. Refer to the following screenshot. It makes life more complicated.

Language Support

With Cypress,

It is just JavaScript. Cypress supports writing test cases in JavaScript. All web developers know JavaScript or might have used it at some point in their projects/careers.

The learning curve for Cypress is shallow, trust me. Personally, I know QA teams have started Cypress in just two days without any external or trainer help.

However, with Selenium,

It supports JavaScript (Node.js), C#, Groovy, Java, Perl, PHP, Python, C#, etc. This can be treated as an advantage because team members with different skills can contribute.

End-to-End Tests

With Cypress,

The goal is to write and execute end-to-end test cases and not unit test cases for the back-end services. That means testing how the user is going to experience the product.

Writing such tests with Cypress is very engaging. The syntax to fetch HTML elements from the web page is straightforward with selectors similar to JavaScript.

However, with Selenium,

End-to-end tests are problematic in Selenium. They tend to encourage the usage of XPath which can go wrong for complex HTML structures. Now, imagine the team debugging why certain tests fail. It can be a nightmare to go through these XPaths and find out the issues. Maintenance becomes very difficult.

Debugging

Undoubtedly, Cypress is the winner in this case.

With Cypress,

The tests directly run inside the browser. The execution process of each step inside each test case is crystal clear. Cypress grabs snapshots at the moment of test execution. This allows the development team to hover over a specific test to see exactly what happened at each step. The error messages are super concise and to the point.

The browser developer tool can also be leveraged to find out details about the tests. Check out the following video.

Cypress Vimeo

However, with Selenium,

Again, this is not straightforward and out of the box. Debugging an XPath error can be challenging and time-consuming.

Cypress is fast

With Cypress,

As testing is always an integral part of the development process, it becomes fast because of real-time execution. It is designed to support the simultaneous execution of tests and codes, thanks to the new architecture built from the ground up.

However, with Selenium,

It runs as a different component not integrated with the code base. Tough to visualize your test then and there when you develop it. Thus, it is slow and does not contribute to fast-paced environments.

Known Limitations

With so many jaw-dropping features, it still, Cypress fails in certain scenarios. ☹ Let's find out.

1. Testing for mobile screens is carried out inside a browser, so native device functionality like the camera or fingerprint authentication testing is not possible at this moment.

2. Different tabs or window testing are not possible.

3. Iframe testing is not possible at this moment, but there is an experiment going on.

4. Currently, Cypress supports testing on Chrome, Edge, and Firefox browsers.

Future Improvements

The roadmap can be explored from the Cypress Priority board. One of the features planned is the support for the browsers Safari and Internet Explorer.

Use Cases of Companies using Cypress

We looked at a lot of features that the development team enjoys while working on Cypress. That is a great reason to adopt this framework.

Moreover, let’s analyze some real use cases with companies that adopted Cypress to improve their development processes.

The GoDaddy development team wanted to deploy fast and increase test coverage

In this recorded session by the GoDaddy team, they touched upon a lot of pain points of testing with Selenium. Here is a capture of the video.

See how they were struggling with the slow development process due to limitations, flakiness, and very low test coverages.

As a result, they started to evaluate a lot of tools like webdriver.io, Nightwatch, Appium, etc. Finally settled down with Cypress due to the following reasons.

• Community & Docs – The community is mature and Docs have everything well maintained

• Smoke Test

• Dashboard – That displays all the details about the tests

• Live execution – This is amazing as you can see the tests running inside the browser.

See the image below.

When they surveyed the developers after adoption, it was inspiring. Refer to the image below for some feedback.

The results that the GoDaddy team started to see are mentioned below.

• 70% increase in productivity

• 75% decrease in test maintenance

• 2,500 tests run daily

• 100% new feature test coverage

Monterail switched to Cypress from Nightwatch.js which is a selenium-based testing tool

While they achieved 30% coverage with Nightwatch.js, when asked about the stability and security of the application by the client, they faced challenges to improve the coverage. That is because of the following three reasons.

1. Selenium Web Driver is issue-prone – It can throw issues without giving friendly error messages.

2. Test stability – Test cases can fail on any random attempt.

3. Dissatisfied with the pace of writing new tests – Writing test cases, running, and observation can take an ample amount of time.

The detailed case study is documented in this blog post.

Quizlet not only switched to Cypress for language reasons but also due to some critical issues with Capybara – again a selenium-based testing tool

Documented in this medium blog, the explanation is to the point on why they moved from Capybara but did not select Cypress straight away. They evaluated all options and their study circles around the following points.

1. Language – They wanted to write tests in a language matching what skill set they had.

2. Flaky tests – Capybara tests were failing with errors.

3. Slowness with the runner – Selenium-based testing tools are very slow because they spin up a browser for every test.

They spent a good amount of time researching the tools like Puppeteer and TestCafe. These tools came as somewhat useful but again they fail to convince the management of documentation, cross-browser support, debugging, community support, etc.

Refer to the picture of the chart taken from the blog above.

Eventually, Cypress is the winner. 🥇

Pixelcabin wanted to feel confident every time they deploy

The goals of Pixelcabin were to achieve the following points. The picture is taken from the video of the session by Michael Shannon, (Co-Founder). The video is embedded below.

In the video embedded below, Michael mentions the motivation behind choosing Cypress as the automation tool and TravisCI to run the tests in the Continuous Integration environment.

The team was taken aback by the test suite recording with screenshots and videos.

More case studies can be found at - https://www.cypress.io/case-studies/

Should I start in my company/project?

We have seen a lot of proof that Cypress is a magic wand for the development teams. Now here are some suggestions for the software development teams to consider its adoption.

Getting started is easy

It is not going to hurt the existing team to start up. You can argue that Cypress can be complicated for testers who are into manual testing. However, it is not really. Cypress documentation even makes it more interactive. Some context of JavaScript, and they are good to go. For developers who are into front-end development, it is just the cream on top of the cake. 🏃‍♂️

Support with widely used language JavaScript

Selenium can be handy in terms of a wide range of technology to write test cases. Still, the problem Cypress is solving is to bring the whole development team together with one universal language. Developers can see their code running inside the browser itself with details about the tests. At the same time, QAs can enjoy working without extra effort on external libraries or drivers.

End-to-end Tests that give you confidence in User Experience

Think of the front-end development team in your organization who are always looking for UX feedback from product owners or real users. They can now able to get the feedback right there while developing the feature way before it goes to the stakeholders.

Therefore, with minimum configuration, if both Developers and QA engineers can collaborate with simple syntax to imitate user behavior, why not adopt that? 🥂

Debugging is effortless

We have discussed above how debugging is hassle-free in Cypress. 🤝 For fast development, better debugging gives an edge. Moreover, maintenance becomes hassle free when breaking changes are introduced.

Superfast Live Test Runner

For a development team, it is always a dream to ship bug-free code, and when it comes to the execution of tests while coding, it contributes a lot to self-satisfaction. 😊

On the other hand, give this tool to an existing QA team with prior automation experience with different frameworks. They will feel more connected to the code base along with the performance.

Integrations with Continuous Integration Tools

This is a need of this hour and Cypress has it. Comfortable integration with CI like GitLab CI, Azure DevOps, TravisCI, etc provides confidence to deploy fast and iterate.

Adoption Strategies

To adopt Cypress’s End-to-end Automation framework within the development team, some questions need to be answered first. 🤔Here are they.

1. Do you have a Web UI that is used by users on browsers Chrome, Edge and Firefox, and Safari, IE can be excluded?

2. Do you have iframes implemented inside the web pages and do you need to test them?

3. Do you have mobile apps that need to be tested?

If your answer is no to the above questions, you can go with Cypress. If you have both web and mobile apps, then better to test the web app with Cypress and select some other framework for the mobile app testing.

Now, to start up, we should do a POC to find out all features. We can take help from the real-world examples website from Cypress. Otherwise, some new and less critical projects can experiment with Cypress to observe its suitability. Then, other project teams can adopt it.

Final Thoughts

Cypress came as a revolution with an unconventional way to deal with end-to-end automation testing. It is a game-changer for the development teams in terms of delivering quality software in a defined time and it does not add much complexity on top of the development process.

A go-ahead. 🤝👍⏩

Feedback

Let me know if you liked what you read. Please share with your friends and colleagues. 🙏🙏

References

• https://cypress.io/

• https://learn.cypress.io/real-world-examples

• https://www.cypress.io/blog/2020/07/08/end-to-end-testing-mobile-apps-with-ionic-and-cypress/

• https://www.cypress.io/case-studies/

• https://medium.com/tech-quizlet/cypress-the-future-of-end-to-end-testing-for-web-applications-8ee108c5b255

• https://www.monterail.com/blog/end-to-end-testing-with-cypress

While working on a past project, we encountered a problem while pushing the local changes from a new computer that has an old version of the master branch. We did not realize it was old initially though. 😋

Issue while merging

The error was not so clear and it was just saying push failed. Thinking that it might be an access issue, we then tried to give that user the required access by changing the role to maintainer at GitLab repository members settings. Nothing helped. 😭

Then we messed up the master branch by forcing a push from that computer. 😭😭

git push --force

As a result, the master branch got replaced with the old version, and all its history got removed. 😰

What to do now?

The team was in shock. No one has a clue. After a round of research, we came to a conclusion. To restore everything to normal, we then followed the steps mentioned below. The idea is to make the master point to an old commit that can be considered as most recent. Which means we need to find it somewhere. 🔬

Find out a recent master commit

From another computer of a teammate, that had the latest master branch, we pointed the head to a previous commit.

git reset <commit hash>

NOTE: Commit hash can be fetched by looking into the git log.

Force push to remote master

Then pushed that local master to the remote master by force again.

git push --force

Now, the remote master pointed to a commit that was not so old and solved the purpose.

Learning

Due to all this, we learned a process that we need to follow every time we merge something to the remote master. 🎉

Let’s analyze that below.  

Basic Process of New Branch Commit, Push, and Merge

Here are some basic steps we followed in the team to prevent this issue in the future. Whenever you are ready with a change that can be merged to master, follow these steps.

1. Update the local master branch.

   git pull origin master
   

2. Create a new local branch from the local master.

   git branch SomeInterestingName
   

3. Do your changes in the new branch as needed for the task.
4. Your changes are ready.
5. Commit and push.

   git commit -m "Some message"
   git push origin SomeInterestingBranchName
   

6. Merge master and create a PR.

   a. Now checkout master.

   git checkout master
   

   b. Update master.

   git pull origin master
   

   c. Now checkout your new branch.

   git checkout SomeInterestingBranchName
   

   d. Let’s merge master into your new branch.

   git merge master
   

   e. Commit and push.

   git commit -m "Some message"
   git push origin SomeInterestingBranchName
   

   f. Your branch and master are now in sync.

   g. Now go to your SCM like GitLab/GitHub and select your branch.

   h. Create a Pull Request with the target branch as master.

   i. After PR is approved, merge after resolving the conflicts, if any.  

Would like to hear from you?

Have you faced such a situation? How did you solve it? It would be very interesting to discuss. Put a comment below. 🙏

Thanks for reading. Have a nice day. 🙂

I am working on a blog on the concepts of Open API Specification, where I came across Swagger UI and Swagger Editor. I needed these two tools on my machine so that I could make my hands dirty trying our APIs. Let's see how we can install Swagger UI in an effortless manner.

What is Swagger UI? 🤔

APIs are magic. When invoked, they just perform specific tasks that the invoker has said them to. It is not easy to explain this to anyone in an organization unless we provide them with an interface to actually see and try them out.

That is where Swagger UI comes into the picture. It is an open-source tool. When you configure Swagger with your API, it can beautifully present everything about it like what methods it follows, what URLs are supported, and what data it expects, everything.

See the screenshot of the demo pet store API UI by Swagger. Notice the URL - https://petstore.swagger.io/. It is running on the Swagger domain. As we know, it is open-source, so why can't we run it locally and see if it working?

Let's get started.

Quick Installation 👇

Here are the steps that we can follow.

1. First of all, we need to go to the Swagger UI Github Page.
2. Now move to the Releases on the right side section and click on the Latest Release number. At the time of writing this blog, it is saying Swagger UI v4.15.2 Released!.
3. You will land on the particular release page with the Assets containing the source code. See the below screenshot.
4. We are interested in the zip file. Let's download that and then extract it. Here it is how it will look on your system.
5. Now that we got the whole source code, let's dig inside. You will see a dist folder and an index.html file inside that.
6. If you open this file on a browser, it will display the pet store API details as we saw earlier online. Here is the screenshot.
7. If you want to run a server and host locally, then open a command prompt and move to the folder where you have the Swagger UI extracted. The prerequisite will be to install http-server npm package. Then it is just a matter of running the following command.

   http-server swagger-ui
   

   
8. Now when you open the URL mentioned in the command prompt and append dist to it, it will open the same UI that we saw earlier.

Next Steps 🪜

Going forward, we will install Swagger Editor to edit an API and see the changes running on the Swagger UI. Interesting time ahead! Stay tuned.

Feedback 🙌

If you liked my blog, don't forget to like and share.

Recently, I started revamping my personal website and used an opensource template from Github - startbootstrap-freelancer. When I started, I saw an index.pug file inside the project that is driving the whole HTML. It was new and interesting. I was able to fairly understand and make changes. Let's discuss one of the problems that I faced with it and how I solved it.

Problem

In my blog, there is a footer where I am showing the current year. Here it is.

However, it was static and I wanted to make it dynamic. Meaning, going forward, no need to modify the HTML again and again. The first thing came to my mind is.

new Date().getFullYear();

Now, the thing is, we just need to take this code and place it at the correct place inside the HTML file templated by the index.pug.

Investigation

When I checked the code inside the index.pug, I saw this.

// Copyright Section
div.copyright.py-4.text-center.text-white
    .container
        small Copyright © 
        a(href='http://taditdash.com')
            | Tadit Dash
        | 2021

Basically, this pug code will generate a division with mentioned classes and then another container division inside it. At last, the two children would be a small Copyright text and an anchor.

Here is the rendered HTML screenshot from the Chrome developer tool.

Now the challenge is to remove the static 2021 and replace it with the dynamic year from the JavaScript Date Object.

Solution

Upon searching on the internet I got some answers those talked about including inline JavaScript inside the pug file, however, they did not really talk about how to take one JavaScript variable and display it in the pug.

Let's understand how to include an inline JavaScript block inside the pug file. Very easy! Have a look.

script.
    var currentYear = new Date().getFullYear();

Notice the dot (.) after script. This is important. If not present, then it will think of script as an HTML element.

Alright. We get the current dynamic year. Now, we need to display it inside the footer where it is intended. Unfortunately, I could not able to find any straightforward way to directly use this currentYear variable with any HTML element.

Thus, I tried a different approach. With JavaScript, it will be easy to find an element and push the content inside it. Let's see the updated code.

script.
    document.getElementById('year').textContent = new Date().getFullYear();

Okay, so just need to declare an element with id year. I have added a span. Let's add that.

// Copyright Section
div.copyright.py-4.text-center.text-white
    .container
        small Copyright © 
        a(href='http://taditdash.com')
            | Tadit Dash
        | 
        span#year

So, the static year is replaced with a span with id year. A small thing though. The span is declared on the next line after the bar (|). Otherwise, it will just be regarded as plain text and not an HTML element.

This magically worked. In case you want to check out my version of the repo, visit - taditdash/startbootstrap-freelancer

Feedback

Your feedback is very important to me. Don't hesitate to comment.

Thanks for reading. Have a nice day! 😍🙌💾

The Prerequisites 🔧

As I said that I followed the official documentation, you can follow that to start up. Here are things you will definitely need to have in your system.

1. .NET SDK
2. Docker

Let's get started 👇

If .NET SDK is installed successfully, running the following command will show the version of .NET installed. In my case at the point of writing this blog, it is 5.0.402.

dotnet --version

Now let's try to see if docker is ready or not.

docker --version

Now as mentioned in the tutorial, let's build a microservice using dotnet command.

dotnet new webapi -o MyMicroservice --no-https -f net5.0

Here we are instructing to create a webapi project inside MyMicroservice directory with no https certificate as we are keeping things simple. Notice the framework mentioned in the command as net5.0. We exactly get what we asked for. Let's have a look at the directory.

This is a scaffolded project with some autogenerated code. Notice the WeatherForecastController.cs inside Controllers directory. This is one such class that exposes one endpoint in the format of controller name without the "Controller" word, here it is /weatherforecast.

Inside this controller, the thing we care about for now is the method Get() that is going to return a list of random weather data. You can open and analyse the code which is self explanatory.

[HttpGet]
public IEnumerable<WeatherForecast> Get()
{
    var rng = new Random();
    return Enumerable.Range(1, 5).Select(index => new WeatherForecast
    {
        Date = DateTime.Now.AddDays(index),
        TemperatureC = rng.Next(-20, 55),
        Summary = Summaries[rng.Next(Summaries.Length)]
    })
    .ToArray();
}

Let's now run the Web API and try to see the result on the browser. To run the app, execute the following command inside the project directory.

dotnet run

Successful! Let's open the URL (as mentioned in the screenshot above) on a browser tab. Alright, we are good and our app is ready. In the next section, we will set up docker.

Docker 📦

Docker helps us to package our app and configuration into an independently deployable unit otherwise called a container. Let's do that and see how that works out for us. If you have downloaded docker and checked the version then well and good. If not, now is the time to do that.

Dockerfile

I assume you have done that now while reading this sentence. Let's now instruct docker about our app and how that can run by providing information in a file name as Dockerfile inside the project folder with the following contents.

FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build
WORKDIR /src
COPY MyMicroservice.csproj .
RUN dotnet restore
COPY .  .
RUN dotnet publish -c release -o /app

FROM mcr.microsoft.com/dotnet/aspnet:5.0
WORKDIR /app
COPY --from=build /app .
ENTRYPOINT ["dotnet", "MyMicroservice.dll"]

This file would help the docker daemon to build an image out of these instructions. Know more about the structure of this file here.

The docker daemon is a part of the docker engine. It is a self-sufficient runtime that manages Docker objects such as images, containers, networks, and storage.

Let's understand the instructions used in the Dockerfile.

FROM Instruction

This file starts with a FROM instruction by providing a parent image. Here, the parent image needed is Microsoft's official dotnet SDK 5.0. You can see the details of this image at docker hub. All docker images published by Microsoft can be browsed here.

Moreover, a name can be provided to a new build stage with AS to the FROM instruction. This name can be used in subsequent instructions like FROM and COPY --from=<name> to refer to the image built.

WORKDIR Instruction

This is responsible for setting up a directory for subsequent commands like RUN, COPY, etc.

COPY Instruction

The syntax is COPY <source> <destination>. In our case, we need to take all required resources inside the container so that we can build and run our app.

The instruction COPY MyMicroservice.csproj . indicates copying our project configuration file present inside the project directory to the destination /src folder that we have created just before this instruction. However, here we have mentioned a dot (.) instead of /src because we have already mentioned the WORKDIR as /src, so dot (.) will point to the relative path with respect to the WORKDIR.

There is a COPY . . command also used in our code that says to copy all our codes (first dot) into the WORKDIR (second dot).

RUN Instruction

This instruction can be used to run a command. RUN dotnet restore helps to restore all packages needed for out project.

With RUN dotnet publish -c release -o /app we are publishing our app with release configuration into the directory /app inside the container.

ENTRYPOINT Instruction

Provides the commands to configure the container as an executable that can be invoked by docker commands.

So, basically, the first set of instructions is used to do the following.

1. Takes mcr.microsoft.com/dotnet/sdk:5.0 as the parent image
2. Creates a /src directory inside the container
3. Copies project configuration file
4. Restores packages
5. Copy all our codes into the /src directory
6. Publish the project to a directory /app with release configuration

The second set of instructions is for the following.

1. Takes the parent image as the ASP.NET Core runtime image mcr.microsoft.com/dotnet/aspnet:5.0
2. Sets WORKDIR as /app
3. Copies all published artifacts from the previous stage
4. Executes the dotnet MyMicroservice.dll command to run the app

NOTE: When we copied all files from our project to the container in the first stage, we should exclude the Dockerfile, bin, and obj folders. To do that, we can add a .dockerignore file. Here is what it would look like.

Dockerfile
[b|B]in
[O|o]bj

At this point, the following screenshot of the project directory is what you should be having.

Let's build an image using Docker 👨‍🏭

Now that our Dockerfile is ready with instructions, let's build an image using docker build command. A docker image is just a file (behaves as a template) used to execute codes inside the docker container. This image contains our application code, libraries, tools, dependencies, and other files required to make the application run. When an image is run using docker run command, it becomes one or many instances of a container.

Here we go.

docker build -t mymicroservice .

Here -t helps to tag the image with a name, in our case it is mymicroservice so that we can refer to this image afterwords. The final parameter (dot) tells it which directory to use to find the Dockerfile. Here dot refers to the current directory as we are running this command inside the project directory. This command downloads and builds all dependencies to create a Docker image that we will use to run a container.

Let's hit enter. Not what we expected. You might see an error like the below where it is mentioned that no such Dockerfile is found. This happened to me due to a silly mistake with a letter casing F that made the file name DockerFile, but it should be 'Dockerfile'.

Alright, let's move on. Here is what you would see if the Dockerfile is correct and found.

Oops! One more error. 😢😢😢 No issues. It says to start docker. Let's do that. Just searched from available apps in the system and ran. Here is what I see.

The docker engine failed to start. Interesting! 🤦‍♂️ My date is getting a little frustrating! 🙁

Oh, I remember, doh! I intentionally skipped one step to see what error I would get going forward. That step is the system restart after docker installation. Let me do that quickly.

The following windows alert confirms my suspicion.

You might also notice a red docker icon on the system tray like mine.

Alright, the system is restarted. Now trying to open docker again. I see this now.

It mentions something like WSL2. Let's click on the "Continue" button as we want to see the information behind this error.

WSL2 is a Linux kernel built by Microsoft, that allows Linux containers to run natively without emulation.

As asked, let's install that from here. Download, run the setup and follow the next -> next process to complete.

Now that we are ready with docker and WSL 2, let's rerun the docker app which would in return ask us to accept the service agreement. Let's accept and move on.

Still not done. Now you might see a firewall network access request. Something like below.

You can allow access here or to make it more interesting close this pop-up in order to struggle a bit again. I did that and then found out how to enable firewall network access for docker. Here is how.

1. Search for Windows Defender Firewall from the windows menu and then click on "Allow an app or feature through Windows Defender Firewall".
2. Scroll down inside the list of the available apps, find out and check the "Docker Desktop Backend" checkbox.
3. Check the checkboxes for Public and Private options for this app.
4. Click the "OK" button to save the settings.

Awesome, let's open the docker app again. Here is what we should see with a "No containers running" message which means there is no more configuration error.

However, no containers are running as well. That is expected as we have not yet run our container. Let's do that next, but before that let's rebuild the image as it failed initially.

docker build -t mymicroservice .

With this command, the process has started and you should see these messages on the command prompt.

Done. No errors anymore on the command prompt. The image is built successfully.

Beautiful. Now let's verify whether the image exists by executing the following command.

docker images

Awesome, we see our image listed, here is the screenshot.

Let's run a container using this image.

Run the Docker Container 🏃‍♂️

Let's run the image to create a container using the command mentioned below. Let's understand all that is coded here one by one.

docker run -it --rm -p 3000:80 --name mymicroservicecontainer mymicroservice

• docker run is the command used to run an image
• -it flag tells Docker to allocate a virtual terminal session within the container. This is commonly used with the -i (or --interactive) option, which keeps STDIN open
• --rm flag tells the Docker Daemon to clean up the container and remove the file system after the container exits
• -p maps a single port for the container
• --name is used to identify a container
• mymicroservice is the image that we have created earlier

Hit enter and let's see what happens.

Wow, it says application is started. Let's open the URL and verify http://localhost:3000/weatherforecast.

Beautiful. We can also verify running containers information with the following command.

docker ps

Inside docker for windows app, we can also see our container displayed with a running status on port 3000.

If we click on this container, we can see the details of the running container similar to what we saw after we ran the docker run command.

Next steps ⏭

So, finally the microservice is ready and running inside of a docker container that is independently deployable on any platform without any external configurations. In the next blog, we will see how we can deploy this to a cloud provider.

Feedback 🙌

Let me know what you feel about this blog. If you like what you read, please share in your circle and click on "Buy me a Coffee" because I love coffee. ☕😍

Background ◀️

I have started reading You Don't Know JS by Mr. Kyle Simpson and in chapter 2, I got to know something interesting about null that I wanted to share in a quick blog with all of you.

Why? 😮

The built-in types available in JavaScript are as follows.

• string
• number
• boolean
• null and undefined
• object
• symbol

To know the type of data, we can use one operator called typeof. This operator when used with data yields the type of that data. Let's try to find out if we get types correctly for different types of data.

On the CodePen (https://codepen.io/taditdash/pen/GRoxxGK) embedded above, it clearly shows an appropriate type for different data types except for null. This is weird but true.

Actually, this is a bug and it is like this from the beginning. Now, this can't be fixed as a lot of code is depending on it for a long time. If this is going to be fixed, it will definitely break in legacy apps.

Let me know! 🙏

What do you think? Do you think it is a feature or a bug? How have used this as an advantage?

Stay Updated 📧 📰

If you enjoyed reading the blog and you would like to see more of such blogs in the future, do "Subscribe to my newsletter and never miss my upcoming articles" that you see here on top of this page.

Updates 👍

After I posted this blog on social media, I got one reply from one of the most popular Gurus Mr. Sanjay Vyas, who is well known for his unique style of teaching with concept visualization. Here is his website - https://conceptvisuals.in/

Here is the screenshot from Twitter.

This means null looks like an object, however, it does not have the characteristics. This brings a lot of value to its implementation where the developer can design the code keeping these caveats in mind.

This is the beauty of the community, where like-minded people share knowledge between themselves. I am very lucky to be a part of the tech community where I am meeting people like Sanjay Sir every day.

Thank you Sanjay Sir and everyone who read this blog. Have a nice day. 😃

Background

This is very common to open a dialog or modal from a page. Often is the case where we load data on the controls inside modal based on values passed from the parent page. That is where it also comes with a requirement to clear out fields whenever the modal is opened from the parent page. We will tackle this problem in this blog.

Let's understand the problem

First thing first, let's write the HTML for the popup and property to manage the show/hide of the modal.

<v-dialog v-model="showDialog" width="500">
    <v-card>
        <v-card-title class="headline">A Form</v-card-title>
        <v-card-text>
            <v-text-field label="First Name" v-model="firstName"></v-text-field>
            <v-text-field label="Last Name" v-model="lastName"></v-text-field>
            <v-text-field label="Email" v-model="email"></v-text-field>
            <v-select label="Profession" :items="professionItems" v-model="profession"></v-select>
        </v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-1" text @click="showDialog = false">Close</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>

Notice the code and keep reading the following points.

1. The first thing we need to make sure is the dialog component accepting a boolean property named showDialog, that controls the visibility of the popup. That means if showDialog = true, then popup shows, else, it is hidden.
2. I have added three text fields for First Name, Last Name, and Email. One select box is there for the Profession. All these fields have their respective model properties mentioned in the v-model directive.
3. Then there is one button inside the popup to close it when clicked. Obviously, it is going to set false to the showDialog property as I said in point number 1.

The last important piece is to add a button to this codebase in order to open the popup. The following v-btn can do the task for us by doing showDialog = true on the click event.

<v-btn @click="showDialog = true">Open Modal</v-btn>

So, let's click on this button, that will bring up the popup, that looks something like this.

I have entered my details in the controls. Now, I will click on the button "Close", which will just close the dialog by setting false in showDialog property.

Now, if you open this modal again by clicking on the button "Open Modal", you will see all the values as entered by you. However, my requirement was to clear out all these fields and it would depend upon your situation and project. So, let's see how we can do that.

Solution

This problem can be easily solved if you just clear out all these fields, just before the popup is opened, isn't it? The popup show/hide is managed by the property showDialog. That means, when showDialog is set to true (for opening the popup), we have to clear out the fields.

Logic: showDialog = true -> Clear out the fields

Here comes a watcher. We need to watch the showDialog property. Inside the watcher, if the value is true, meaning if the user is trying to open the modal by clicking the "Open Modal" button, let's remove the field values. The watcher would look something like below.

watch: {
    showDialog: function(val) {
      if(val) {
        this.firstName = '';
        this.lastName = '';
        this.email = '';
        this.profession = '';
      }
    }
  }

Notice how we are making all the properties blank so it would automatically reflect on the controls associated with them through v-model.

Full Source Code with Demo on CodePen

Feedback

Sharing is caring! If you loved this blog, feel free to share in your circle, you can do this by clicking the share icon.

Comments are appreciated as always. :)

It takes 7 Days to learn Vue.js

Yes, you heard that right. I have co-authored a book that comprehensively takes you on a 7 days journey to learn the basics of Vue.js. You can buy that from Amazon.com or Amazon.in or BPB Official Website.
More at - https://taditdash.com/#Vuejs7Days

Background

I am working on a project that is built with Vue.js and set up for internationalization with vue-i18n library. The validations are done with the help of vee-validate library that provides out-of-the-box validations for different types of validations like required fields, minimum length, maximum length, etc.

The project is working perfectly. It has a certain code to read the translations from the JSON files inside the src/locales directory.

I did follow this article from lokalise to set up everything.

Assumptions

I will make some assumptions as this is not a beginner write-up. Here is the list of assumptions on a project that you might have already built.

1. Vue.js is setup and running

2. Vee-Validate library is integrated for validations

3. Vue-I18N library is set up for translations

4. JSON files for translations are available inside the directory src/locales with key and value structure

Problem

Now the challenge is to include the vee-validate validation message translations to work seamlessly with vue-i18n library. When I say validation messages then it contains two things.

1. The field name that we are validating

2. The validation message according to the validation type

Let's go through the following examples to understand the above points.

Let's say we have a First Name field that is required. So, the validation message that would show when you don't enter anything would be something like the below.

Here, if we want to translate the validation messages, then we have to translate the field (First Name) and then the validation message (The {field} field is required). Essentially the field is a variable here.

Now you must be thinking why can't we just have the translations for the whole string, that is because there might be a lot of fields in your whole project. Moreover, the validations messages are not just for required fields. These messages can be a lot complicated.

Just Imagine a password field with the following setup for validations.

1. It is required

2. It can contain different types of characters

3. It should be more than 8 chars and less than 13 characters

In this case, there will be different messages and it is totally not scalable to have translations of the whole messages. That's why the field names should be translated and stored in JSON files that we already have. However, no need to translate the validation messages except the field name because the library is already having them for all language types.

For vee-validate, we can see the translated validation messages inside the node-modules/vee-validate/dist/locales.

Solution

Let's discuss how to solve this problem. When you work with vue-i18n library, there will be some code that would be auto-generated when you install the package using the vue-cli command vue add i18n. You can follow the lokalise article for details. I will focus on our specific problem. So, one of that scaffolded files is src/i18n.js. Let's have a sneak peek.

// src/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

Essentially we are trying to import Vue and VueI18n libraries so that we can configure the translations.

Notice the function loadLocaleMessages which is helping us to load all messages from the JSON translation files that reside inside the src/locales directory. The code messages[locale] = locales(key) is pulling all our translations from a specific file represented by the key, for example, "./de.json" for German. Then it stores in a property represented by the locale param. Thus, it becomes the object shown below in the screenshot.

And it continues to add properties with the locale names to this object as it loops through all locales.

At last, a VueI18n is exported containing the locale from the .env file or default one as 'en', also a fallbackLocale and the messages that we just retrieved from the JSON files.

Now the interesting part. We need to integrate the vee-validate messages. Let's see the problem in the first place with the screenshot below.

As you can see here, the First Name label is now changed to Nombre for the Spanish language (Imagine I have a language switcher with different languages), however, the validation message is still in English. That is what we need to fix. Let's find a way.

We already discussed a simple logic of splitting the validation message into two parts. The First Name field is required follows a patern The {_field_} field is required where {_field_} is First Name.

Now somehow we need to code for two things.

1. Ask VueI18n to include all the validation messages for all languages

2. Replace {_field_} with the field name translation from our translation files

Ask VueI18n to include all the validation messages for all languages

It is a bit tricky till I figured out the solution. It's totally my hack. Let's see how we can do. Obviously, we have to do something where all the translations are fetched. Do you remember where?

Yes, it's our well-known loadLocaleMessages(). Let's make some modifications.

// src/i18n.js

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}

  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)

      // Load the validation messages from vee-validate 
      // library into the messages object.
      messages[locale].validation = getVeeValidateLocale(locale).messages
    }
  })
  return messages
}

function getVeeValidateLocale (locale) {
  // Get validation messages from vee-validate locale file.
  // If locale 'en', then get the messages from "vee-validate/dist/locale/en.json"
  // If locale 'es', then get the messages from "vee-validate/dist/locale/de.json"
}

Notice that we have a new code inside the forEach that will fetch the validation messages according to the locale that we are looping and then place it as a validation property of the messages locale object. We will see it in a while. Just stay with me a little bit.

That means here we need to somehow ask vee-validate library to give us the translated validation messages. To do that, we have to do the following.

1. Import the validation JSON files containing the translated messages

2. Get the validation messages for the particular locale that is passed to the getVeeValidateLocale().

Let's complete these one by one.

Import the validation JSON files containing the translated messages

For importing, we can write the import statements like the following.

// src/i18n.js

import en from "vee-validate/dist/locale/en.json" // English validation messages.
import de from "vee-validate/dist/locale/de.json" // German validation messages. 
import es from "vee-validate/dist/locale/es.json" // Spanish validation messages.

// ... Import statements for other languages

Don't trust me on here about the translated validation messages! Let me give you a quick look at one of these files. Here is the es.json file that is available from vee-validate.

// node_modules/vee-validate/dist/locale/es.json

{
  "code": "es",
  "messages": {
    // ... removed for brevity

    "email": "El campo {_field_} debe ser un correo electrónico válido",

    "max": "El campo {_field_} no debe ser mayor a {length} caracteres",
    "max_value": "El campo {_field_} debe de ser {max} o menor",

     // ... removed for brevity

    "numeric": "El campo {_field_} debe contener solo caracteres numéricos",
    "regex": "El formato del campo {_field_} no es válido",
    "required": "El campo {_field_} es obligatorio",
    "required_if": "El campo {_field_} es obligatorio",
    "size": "El campo {_field_} debe ser menor a {size}KB"
  }
}

This JSON file is basically a collection of validation messages according to the type of validation.

In here, see the item "required": "El campo {_field_} es obligatorio" which is actually the translated message for the required field type validation message, for instance The {_field_} field is required in English. Here {_field_} is the variable where we will place the translation for the field. We will do that in the next section.

Get the validation messages for the particular locale that is passed to the getVeeValidateLocale(locale)

Now that we know where to get the messages from, let's populate some code inside the function getVeeValidateLocale(locale).

// src/i18n.js

// ... other codes...

function getVeeValidateLocale (locale) {
  if (locale == 'en') {
    return en;
  } else if (locale == 'de') {
    return en;
  } else if (locale == 'es') {
    return es;
  }
  // ...

  return en;
}

Basically, we are trying to say to return the appropriate imported locale JSON file according to the locale passed as an argument, else default as English (en). However, clearly, this is not a good approach because if else can make this code unnecessarily long. We can definitely do better than this.

Can we do a switch case? Again, the same kind of code isn't it. We have one more nice option. Object Literals. This would definitely minimize the amount of code for this requirement. Let's see.

function getVeeValidateLocale (locale) {
  const veeValidateLocales = {
    'en': en, 
    'de': de,
    'es': es,
    //...
    'default': en
  };

  return veeValidateLocales[locale] || veeValidateLocales['default'];
}

Simple and clean. An object a declared with a collection of name-value pairs. To select a particular item we can select it using the syntax object_name['property name']. You can read more about this at Working with objects.

This can be optimized more as the name and value are the same except the default one.

// You can add more languages to this object as needed.
function getVeeValidateLocale (locale) {
  const veeValidateLocales = { en, de, es, 'default': en };

  return veeValidateLocales[locale] || veeValidateLocales['default'];
}

Let's put a debugger now to see how this works at messages[locale].validation = getVeeValidateLocale(locale).messages. Here is the browser console screenshot.

Beautiful, now we are able to get the translated validation messages. The only thing left here is to replace the {_field_} with the actual translated field name.

Replace {_field_} with the field name translation from our translation files

This is easy as we already have the translations for the field names in our JSON files as we see Nombre for the First Name field for Spanish. So, we need to just load the same translation for the validation message.

Your translation JSON file for Spanish might look something like this.

// src/locales/es.json

{
    "fieldFirstName": "Nombre"
    // ... other translation keys and values.
}

That means we just need to find the value of this key for the First Name field as an example. Assuming that you have a running setup of vee-validate with the Vue project, here is the code to update the default messages that can run for every field when validation comes into picture.

// src/main.js

// ... other codes

import { configure } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'
import i18n from './i18n'

configure({
  defaultMessage: (field, values) => {
    // Remove whitespace inside the field name
    let fieldName = field.replace(/\s+/g, "");

    values._field_ = i18n.t(`field${fieldName}`);

    return i18n.t(`validation.${values._rule_}`, values);
  }
});

// ... other codes

This defaultMessage function runs for all fields that become active on the page. Assuming that it is currently running for the field "First Name", let's try to understand line by line.

1. The argument field possesses First Name (comes from the input tag configuration)

2. let fieldName = field.replace(/\s+/g, "");: This would remove all whitespace inside the field name, so now fieldName is FirstName

3. The param values contains the details about the particular validation, see the console output below.

   

4. So, now, we need to translate the values._field_ property that we are doing next with the code values._field_ = i18n.t(`field${fieldName}`); The i18n.t() function is used to get the translation for a key, here the key is fieldFirstName. Remember the JSON file I showed above contained this key and its translation for the Spanish language.

5. Now that we are done with the field name translation, we can now replace the this in the whole validation message that we stored in messages locale's validation property. That is done by i18n.t(`validation.${values._rule_}`, values). Here the values is a param that is passed to this i18n.t() is responsible for the replacement of {_field_} which is available in the validation.required as _rule_ is required.

With this, our code is configured to work. Here is how it would look like.

There is just one last thing you have to do if you have a mechanism to switch the language. You just need to trigger a refresh for the messages as soon as you switch the language, which can be done by calling the localeChanged() from vee-validate library. If you don't do this, the validation message will still be translated but would be lazy and won't show up till you make a mistake.

Here is the example code to fire an immediate change of language when you switch languages.

import { localeChanged } from 'vee-validate';

// ... other codes

switchLocale() {
  if (this.$i18n.locale !== this.selectedLocale.val) {
    this.$i18n.locale = this.selectedLocale.val;
    localeChanged();
  }
}

// ... other codes

Feedback

I hope this blog helps someone in resolving the case of integrating vee-validate with vue-i18n.

In case you face some issues or have some feedback, feel free to add a comment below and I will definitely reply once I see it.

If you find this useful, please share it on your social channels.

Thanks for reading. Have a nice day ahead. 😎

Background

While working on designing a Billing Subscription Box in a current project, the requirement was to design rounded corners instead of normal corners.

Let's Code

Let's first have a normal card that would look something like below.

The code is pretty simple, isn't it!

<v-card>
  <v-card-title>Tadit Dash</v-card-title>
  <v-card-subtitle>Tadit Dash is an Indian by heart, a Software Engineer by profession, an Author and a Speaker by passion.</v-card-subtitle>
  <v-card-actions>
    <v-btn icon>
      <v-icon>mdi-web</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-twitter</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-linkedin</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-facebook</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-instagram</v-icon>
    </v-btn>
  </v-card-actions>
</v-card>

Now let's go to Vuetify Documentation and find out if there is any way to make the corners round. Here it is - https://vuetifyjs.com/en/components/cards/

I can see that there is a property named shaped, which helps to add border-radius. That is what we needed. Let's try that and see what happens.

Wow! We can see the corners are rounded now. However, only the left top and bottom right are having rounded corners. If this is what you need, then your work is done. Copy the code below and enjoy.

<v-card shaped>
  <v-card-title>Tadit Dash</v-card-title>
  <v-card-subtitle>
    <!--Removed for brevity-->
  </v-card-subtitle>
  <v-card-actions>
    <!--Removed for brevity-->
  </v-card-actions>
</v-card>

But I need something else. I wanted all the corners to be rounded which is not possible by default. Then the option here is to do it myself. For that, let's analyze the rendered HTML first.

So, it's quite clear how the corners are getting added under the hood. The following CSS is helping to add a radius at every corner.

.v-card--shaped {
  border-radius: 24px 4px;
}

But it is not uniform. Top Left, Bottom Right is 24px and Top Right, Bottom Left is 4px. To make it the same across all the corners we need to add the same radius, of course. To do that, we can add a class to the v-card and write CSS rules accordingly.

<v-card shaped class="rounded-card mx-auto mt-5" max-width="344">
  <!--Removed for brevity-->
</v-card>

<style type="text/css">
  .rounded-card {
      border-radius: 24px;
  }
</style>

After this change, the rendered HTML is modified with a radius to all the corners. Screenshot below.

The class rounded-card takes over the border-radius property and v-card--shaped is no more applied. The card looks rounded now as all the corners are having a uniform radius. You can increase the radius as per your needs.

Here is the CodePen

Help Someone

Share in your circle. Hit the social icons to share. Keep coding folks. 🙂

Thanks for reading, have a great day ahead.

It takes 7 Days to learn Vue.js

Yes, you heard that right. I have co-authored a book that comprehensively takes you in a 7 days journey to learn the basics of Vue.js. You can buy that from Amazon.com or Amazon.in or BPB Official Website.
More at - https://taditdash.co.in/#Vuejs7Days