Niteen Phulekar

Oh, yes. Definitely. First of all, thank you for giving me this opportunity. Um, my name is Nitin, and I am a computer science graduate from, um, Mallard College of Engineering, which is one of the top 20 college of engineering in Karnataka. So, basically, it is located in Hassan. Then I got a placement in a product based company, uh, which is a well known product based company. The name of the company is Vulcan Software Private Limited. Uh, there, I have worked on their different kinds of products like, uh, ticket management system, case management system, HR management system. Uh, they have products like ITSM, CSMs, etcetera. So my roles and responsibility over there was, uh, when coming to my roles, I was a front end developer over there. And my responsibility was to maintain the codebase to optimize the codes of, uh, if there is any bug, resolve the codebase on the some of to, uh, own some of the, uh, features or modules of the code, uh, and also to introduce new features and enhancement as per the, uh, as per the requirement of the business units or clients, uh, and also to maintain a good relationship with the manage uh, manager and also, uh, to create the documentation of my works and the new features and enhancement that I have introduced. And my all responsibility was also to, Uh, be present during the deployment and solve the code, uh, solve the bugs that we, uh, that we were facing the during the deployment. And then later on, I got a new opportunity in a company which is known as Foundevo. So in Foundevo, I have worked for one of their client, which is known as Quotes Quotes basically provides an IT solution for McDonald's. Uh, their, uh, Quotes application, uh, or we can say product name is Switchboard. Uh, what switch model help is it will help McDonald's to display their, uh, enormous amount of ads, uh, images, Uh, into the screen, which is present on backside of the

What step would it take to ensure high performance and responsiveness of, uh, Angular application. Yeah. So I would like to take few so I would like to I'll explain it briefly due to the time limitation that is present over here. So first of all first of all thing is, uh, I would like to use, uh, if component is very, uh, if, uh, I would like to use the lazy, uh, lazy loading concept. So, basically, it will implement lazy loading for modules to load only the Siri component when they are actually needed, then I would use the AOT, uh, compilation. Uh, but, uh, as in the latest version, it has become by default. So by using the AOT compilation, it will translate the templates and components into optimized JavaScript during the build process. And then I would optimize the change detection, uh, like use the on push change detection strategy, uh, strategy to minimize the number of checks and updates, etcetera. Now, uh, I would also u make use of the service work service workers, etcetera, and minimize the HTTP requests like bundle. Uh, I will bundle them or minify, uh, our JavaScript into CSS files to reduce the number size or number of size of HTTP request. This will also improve the loading time. We can also bundle, uh, bundle size analyze, like regular analysis of our application. Uh, bundle size, uh, bundle size. Uh, we can also analyze our application bundle size using the tools like web app, bundle analyzer. We can optimize our image and assets. We can make use of caching strategies, reduce the DOM manipulation, or we can make use of, uh, angular universal. That is basically, uh, for server side rendering. And we can optimize the animation perform we can also, We can also monitor the performance and profiling. Like like like, regularly, we can monitor our monitor and profile

How can we leverage TypeScript features to improve JavaScript and code quality in Ice Tech? Uh, yes. Yeah. So, uh, like, uh, here we can, uh, here, uh, how we can utilize type feature is like we can static type, uh, statically typing code navigation and refactoring. Uh, we can Make use of interface and abstracts, like using interface and abstract classes to define clear contract between different parts of parts of our application, we can say. We can make use of types, uh, and also, uh, union and intersection types, like leveraging union types to express A value that can, um, I can select that can be one of several, uh, values, uh, that can be one of several types. Intersection types allows combination, uh, combining multiple types. Uh, and we can also make use of nullability and, uh, and what we say that has optional para properties. Uh, we can make we can use generics to create reusable component and function Uh, function with support for multiple types, uh, we can make we can declare properties as read only using typescript. Uh, TypeScript decorators enables, uh, we can use of decorators because TypeScript decorators enables you, uh, us to attach metadata to classes, Um, methods, properties, we can say. Uh, we can make enable typescript. With the help of typescript, we can enable the strict mode like strict It is equals to 2 in config.json. Uh, we can utilize the TypeScript, uh, TypeScript declaration file like

How can Bootstrap be utilized in combination with Angular for designing scalable and, uh, maintainable front end solution? Yeah. So Bootstrap basically, uh, so we can integrate Bootstrap with Angular, which can provide Solid, uh, foundation, uh, for designing, we can say for designing scalable and maintainable maintainability of front end solution. So we can, uh, uh, first of all, we to utilize the bootstrap, we need to install the bootstrap. We can install it during the, uh, by using the npm command, like npm install bootstrap. Then we need to import the bootstrap styles in our angular dot, uh, JSON file, then we need to make use of bootstrap components. Like, we need to leverage bootstrap 3 different components such as button, forms, navigations, and more. So this helps in, uh, rapidly building UI without having to create them from scratch. We can customize the bootstrap styles also accordingly. And Angular bootstrap components, uh, we can consider using Angular specific bootstrap components, which are angular directives, Uh, that, uh, which are angular directives that wrap the bootstrap component library like nginx bootstrap, which is provided angular friendly. So implementation of bootstrap component, the time is running very quickly. Uh, it is also helpful for responsive designing. Uh, It is also helpful in easily handling handling the responsive designing and angular decoratives and data binding. We can integrate decoratives and data binding, uh, with the bootstrap components for, uh, instances. Like, we can use Angular's data binding to dynamically update the content within the bootstrap, And, uh, we can make it, uh, and we can make modularized component theming for boots, uh, theming with the bootstraps, uh, testing, and compile compatibility. Uh

Okay. So here I have described the sum function. It should calculate the numbers in an array. Expect sum 123.2b5 function. Some array return array dot reduce a comma b. Yeah. There might p slightly issue. Like, I can say, as, uh, this is the Jasmine test you have provided. Uh, it seems generally correct, and, uh, it tests the sum, uh, function for a basic, uh, for a basic use cases. However, there are small discrepancies, uh, in the expectations, uh, of, uh, comment, uh, I can select the comment says Should calculate the sum of numbers in an, uh, array, But the exception seems to be set, uh, for the sum of the provided array to be 5, uh, which is actually one plus 2 plus 3 plus 5. Sorry. 1 plus 2 plus 3. If you intended to have equals, uh, the sum is equals to 6, and then that is 1 plus 2 plus 3. You should up we should I think we should update the expectation to, uh, expectation to, like, expect some, uh, 123 dot 2 b 6. Yeah. I guess if the sum is 5 is indeed intention, then the test is correct as it is. And aside from that, uh, the test This is straightforward and checks the fundamental functionality of the sum function depending on the complexity of our application and the sum function. We might want we can we can consider some additional test cases such as testing for, uh Uh, this is my opinion about, uh Yeah. So Oh, yeah. Uh, I forgot to say the important step. Is there any issue with the test? Definitely. Uh

Can you describe your approach to mentoring junior developer Particularly in the context of a large scale front end development project. Uh, Yeah. Certainly, like, uh, mentoring maintaining, Mentoring junior developer in the context of, uh, large scale, uh, front end developer. Sorry. Large scale development project involves a comb involves some guidance, like hands on learning, and collaborative environment, etcetera. So my approaches might be, like, first, we need to clear onboard the process. So then we need to have a pair programming session, which will initiate pair uh, where, uh, with the help of this, where junior developer work alongside more team member. So this will give them hands on approach, allows for real time learning, problem solving, and, uh, knowledge transfer. Uh, we need to encourage, uh, a culture of regular code reviews, uh, which provide constructive feedbacks on the junior developers. So codes and explain best practices. And we also need to emphasize the importance of, uh, clear and up to date documentation, which will guide junior developers, uh, in getting in documenting their code also and also to learn about the architectural decisions and complex logic, etcetera. And then we can start, You can start the junior developer with smaller, well defined task and gradually increase the complexity of their assignment as they gain confidence and experience. And we can create an environment where junior developer feel comfortable asking questions, uh, regularly checking with them to understand their challenges and provide support. We can organize regular training

Consider the following angular component where angular material is being used. If any error, identify them. I have got a very small piece of code. I think so. Yes. Uh, in template, there is a direct, you know, known as click button. So I can say, like, the provided, uh, with the provided code, it will it is defining an Angular component like my component with a simple template template using the inline HTML. However, if we intend to use angular material in our component, there are a couple of modifications needed. So I would like to modify in the inline template, uh, that instead of the click me, we need to add the button. We need to give some of the properties like color, and then we need to add the text click me. So what are the changes that I have made is, uh, first, importing the angular material button from the module. Like adding the necessary imports for angular material button. This assumes that we have angular material installed and configured in our project. Then I use the Angular material button which is replacing the simple text in the template with the Angular material button for a more interactive example. Oh, so basically, it is not, uh, uh, just a string. It is actually the button which is inserted in it. So we can convert that button which is click me into the HTML format. That HTML format is definitely the template, uh, click me, uh, inline template, which is having the button click me is an error. Definitely. So I'm converting it, uh, I'm rewriting it with the button and adding the click me text inside the button. Definitely, it is an error. And also select my component yeah. And 1 more, uh, I didn't mentioned it, uh, we have not yet imported the component from the angular core. So we need to import the component from the angular core. Import, uh, curly braces component from comma angular/core. So these are the errors, basically. Uh, yeah. It will make the UI template is crashed. So we need to fix this. First, uh, I would like to revise again. 1st is we need to import the Angular component and component from Angular core. That's it.

Okay. So this is the old typescript snippet. What would be the code and what would be the output end of this code and why? Function add a is equals to number, b is equals to number, which is basically a number that return a p. Let result is equals to 5 comma 10, and we are consoling the number. So Yeah. Uh, the You can see that, uh, the add functionality is explicitly typed 2, except the 2 parameters of type number and, uh So this would, uh, like, uh, this would, like, produce a typescript compilation error because the function accepts the argument of type number, not the string. So we can resolve this. Uh, to resolve this, we need we should call the functions with a numeric value like Net results is equals to 5 comma 10. So this will ensure that function is called with the correct parameter type according to its type signature.

Can you talk about the scenarios in which, uh, in which you had to analyze and troubleshoot an HTML or CSS issue to identify the root cause and how how you developed a solution for it. Uh, scenarios is like inconsistent styling across browser. Like, I once encountered a situation where a webpage looked fine in 1 browser, but had And resolve the problem is, like, first, identifying the issue. 1st, I use the browser developer tools like Chrome DevTools to inspect the problem problematic element that Uh, reveal difference in computed styles between the browsers leading to inconsistent rendering. Then I have tested with the cross browser testing, Then with the CSS vendor prefixes, the issue was related to CSS properties that required vendor prefixes for compatibility with the different browser browser. Some styles were not been able to apply due to the missing incorrect prefix. So, uh, certainly, uh, certain So for instance, we can say, like, certain versions of browser might require dash webkits. So I have updated CSS with the vendor prefixes like And Dashwebkit with, uh, box and responsive design consideration, we have tested and validate, uh, test after making these changes, I have thoroughly tested the page across multiple browsers to ensure consistent rendering. This involved checking the layout, spacing, and overall browser visual appearance. Then I documented the changes made and communicated, uh, them to the team. It's important to ensure that everyone is aware of modification to the code base. So I can say, like, by addressing the cross border compatibility issue and ensuring that the CSS code adhere to standard and best practice.

Can you give a practical scenario where you automated testing, uh, and, Uh, automated testing and code to be improved to the quality of any front end application. Yeah. We have. Uh, so we're both automated testing and code contributed to improvement in quality of Front end scenario is, like, uh, one of there is one of a scenario, like, uh, improving form validation, uh, in our products. Like, we can say Uh, customer's feedback. So the form, uh, involve various fields, uh, such as, uh, uh, their emails and various other details and, uh, which is ensuring accurate and user friendly, uh, form validation was crucial for seamless customer experience. So what the solution has approached is, uh, first, we through the automated testing, like, uh, test we have used the test automation framework setup. So the team established an automated testing framework incorporating tools like Selenium and Jasmine. So this framework were designed to, uh, cover end to end scenarios. Then we have automated test case where so in automated test case, we're created to simulate user interactions with the checkout, uh, with the forms, and etcetera. So this includes scenarios such as filling out the form, uh, correctly entering invalid data, uh, navigating through different steps, and checkout process. Then the automated tests were integrated into the CICD pipeline, ensuring that the check out process was tested automatically with every code commit. So this helped, uh, catching the issues early in the, uh, development cycle. And with the help of code