Experience ‐ Projects - rs-hash/Senior GitHub Wiki

I'm a Software Engineer, I have been working for the last 8 years in web development and I specialize in developing front end applications using Javascript, Typescript, HTML, CSS and in frameworks like React, Angular and others.

Currently I'm working as a consultant for Ameriprise Financial on the ameriprise public site redesign where I primarily work in React, I've developed reusable react components, worked on performance optimization, introduced content security policy and addressed the issues, I always make sure the site is accessible and meets the accessibility standards. Also, followed test driven development, wrote unit tests and had code coverage above 80%.

Prior to that, I've worked for Oracle, Siemens, IBM where I led a project to revamp a legacy UI improving the design and user experience, which improved user engagement, Also I did performance enhancements, reducing page load times over 10% through techniques like lazy loading, caching, minification. I've Integrated Progressive Web App features to enable offline access, I've also mentored junior developers. Then at oracle, I've conducted project release security reviews for Oracle JET, I've been a SPOC for JET Security.

• I'm working as a consultant for Ameriprise Financial on the ameriprise public site redesign where I primarily work in React, I've developed reusable react components, worked on performance optimization, introduced content security policy and addressed the issues, I always make sure the site is accessible and meets the accessibility standards. Also, followed test driven development, wrote unit tests and had code coverage above 80%.
• Led the development of a new React & CMS driven components like Anchor links, Footer, Spotlight, Financial calculators, remove unncecessary dependencies, cleanup repo, ( webcomponentsjs, brightcove video )and others
• Optimized for Core Web Vitals (LCP, FID/INP, CLS) using techniques like lazy loading, performance hooks, Utilized tools such as Lighthouse, Performance Insights, (Chrome Dev Tools performance profiling), WebPageTest, Webpack Bundle Analyzer resulting in faster page load times and enhanced user experience.
• For lab testing, I utilized developer tools such as Chrome DevTools to simulate various network conditions, device types, and performance metrics. I used features like throttling network speeds and others.
• For Real User Monitoring (RUM), I relied on tools like Chrome User Experience Report (CrUX) to gather real-world performance data directly from users' browsers. CrUX provided insights into actual user experiences, including metrics like First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS).
• Owned critical components, ensuring timely updates and production deployment using Jenkins which includes financial calculators, Advisor site and Ameriprise newsroom.

• Firstly, our project uses Bloomreach CMS as the backbone of our content management strategy. It allows us to efficiently create, manage, and deliver content across various channels, ensuring a seamless user experience.

• On the front-end side, we utilize React extensively. React's component-based architecture empowers us to build highly interactive and scalable user interfaces. Its virtual DOM and state management capabilities are good for responsive single-page applications.

• Complementing React, we use web components for reusable and encapsulated UI elements. These components promote modularity and reusability, enhancing the maintainability of our codebase.

• Our server-side templating is handled efficiently with FreeMarker templates where data from the backend CMS or other data sources is fetched and integrated into the templates. placeholders or markers in the FreeMarker templates are where React components will be rendered & enable us to generate dynamic HTML content .

• In our development workflow, Jenkins serves as our automation server for continuous integration and delivery. It automates our build, test, and deployment processes, ensuring code quality and facilitating collaboration among team members.

• For testing, we rely on Jest and React Testing Library. Jest, being a robust JavaScript testing framework, allows us to write comprehensive unit tests for React components and utilities. React Testing Library complements this by emphasizing user interactions and behavior testing, contributing to our test-driven development approach.

• To manage our assets, optimize code, and handle dependencies, we use Webpack as our module bundler and build tool. Webpack's features like code splitting, asset optimization, and hot module replacement streamline our development workflow and enhance performance.

• Overall, our tech stack is carefully orchestrated to deliver a scalable, performant, and maintainable web application. The integration of these technologies enables us to meet business objectives, maintain code quality, and ensure a delightful user experience for our audience."

• We use Bloomreach CMS for backend content management, content creators use it to update the content
• Front-end of the project is built using a combination of FreeMarker, React, and web components, redesign is aiming to make more of React components
• FreeMarker is used for server-side templating ( content comes from the backend / server ) and how it integrates with the backend CMS.
• FreeMarker templates are processed on the server-side, where data from the backend CMS or other data sources is fetched and integrated into the templates.
• Use FreeMarker templates (*.ftl files) to create the basic structure of your web page or component on the server side.
• Insert placeholders or markers in the FreeMarker templates where React components will be rendered.
• Use FreeMarker to pass data from the server to your React components

• I removed all inline styles for introducing strict csp policy including style-src directive
• After removing observed that, flash of unstyled content occurs due to delay in loading CSS for few web components. This is because it's not added in the base layout and is shared to other web apps too
• Tried adding a critical css file, but then it needs to be added to other web apps using this web component
• dynamically loaded css in the connectedCallback method of custom element, but browser loads html first and then CSS
• Added <style > block inside the html file for the custom element
• prestyling unregistered elements by using :host( .css-classname) { display: block } in our code and .css-classname { display:none} in other sites consuming this webcomponent

• Oracle JET (JavaScript Extension Toolkit) is a collection of open source JavaScript libraries (Preact or Knockout based architectures) along with a set of Oracle contributed JavaScript libraries

• Virtual DOM Architecture - Preact and typescript

• MVVM Architecture - Knockout

• Cookbook

• The "JET Cookbook" is a resource provided by Oracle Corporation to help developers working with Oracle JET in building web and mobile applications. The JET Cookbook is essentially a collection of practical code examples, tutorials, and best practices for using Oracle JET's JavaScript and CSS libraries

• Designed, implemented, and tested Preact Link, Image, Menu data driven components.

• Implemented Oracle CorePack cookbook build commands and site.

• Reviewed Oracle JET Security release and improved XSS, CSP, 3rd party, fortify, and companion audits, JET Audit Framework

• Identified and reviewed security vulnerability issues and submitted reports before every JET release.

• Developed typography, text interpolation & custom hooks.

• Designed and Implemented parts of IPORT Application which includes Siemens internal organization tree,
• employee and delivery management.
• Created custom reusable components for IPORT.
• Optimized the application overall performance.

• Implemented the complete UI with multilingual support, built-in live person, NPS in IBM Watson desk app.
• Implemented the multi-screen interface, including login for the Cognitive Solution application.
• Built a NodeJS app for monitoring Watson APIs.