In the Communication is Key article I mentioned that I applied to the Pirate's front-end/ui developer job posting and didn't hear back. I was hoping to add some details of the application to that article, but I wasn't able to find my notes I saved from the application. I have since found them.
Please take the time to read the previous article about the Pirates front-end job posting, Communication is Key
The application for the UI-Developer position posted by the Pirates in 2024 is a pretty standard application. It didn't come with a trial where the applicant does a coding exercise graded by the hiring team. However, I think a coding exercise would have been required if they were interested in my application. Also note that I use the term front end developer and ui developer interchangeably.
Below are the questions and my answers for my applciation to the job posting. Note that I did not mark down the exact questions on the question, so I am recalling the questions based on the answer and paraphrasing the question. I noted the exact answers I gave, so those are exact.
Question 1: Explain your UI Development Experience
My response is below:
Most of my post college career has been working with Angular. From 2016 to 2021 I worked on AngularJS and Angular at a large bank in the Pittsburgh Area. I also have limited experience with React. I have worked with Gatsby, a static site generator using the React Framework. I have developed two websites with Gatsby. I also have limited experience with React without Gatsby during a hackathon from a financial institution's hackathon located in Lansing Michigan.
I first worked with Angular version 1.6 which is right around the time ES6 was becoming widely supported natively with most modern browsers (not IE). It also introduced Components to the Angular Framework as the basic building block to an Angular SPA. Webpack was gaining popularity at the time, but we were using Gulp, Babel, and Browserify along with Webpack to build and run the application. At this time I was introduced to Karma/Jasmine unit tests, NPM, ESLint, SASS Lint, Web Accessibility, and more. I worked on features for Rewards and Customer Profile which included displaying available rewards (whether cash, points, or miles) to the user and updating the customer phone numbers.
After some time working on the feature team, I moved to the Pattern Library team which created patterns and documents for the feature teams to use such as for forms and form validation, tables, charts, notifications, buttons, and more. It also included a common repository where global styles and assets were stored.
The pattern library team evolved into the component library team. The primary difference between the pattern library team and component library team is that the component library was an actual library, while the pattern library was boilerplate code. Also during the component library time, we moved the assets from the common repository to a common repository that housed an Angular Library with the assets. We created reusable components for much of the same that what was existing in the Pattern Library. The big difference is instead of have 300 - 400 lines of code for the template of a HTML Table in the Pattern Library, we moved a lot of that code inside a reusable component and made the table customizable via Angular Inputs, Outputs, Services, View and Content children, and attributes. That reduced the code that needs implemented by consuming teams to a much small number like 20 lines. It also allowed our team to control changes by publishing a new version of the table for example instead of each boilerplate code in every app needing updated. The component library also came in parallel to an Angular upgrade moving from 1.6 to Angular 7. The features I have previously worked on were upgraded into an Angular hybrid running Angular 7 and Angular 1.6 in the same monolith app using ng-static and ng-upgrade.
During the last 2.5 years I have worked in a Micro App architecture in KTLO team fixing production incidents and vulnerabilities and a back office mortgage app
Question 2: Explain your experience working with responsive web applications
My response is below:
I have spent a significant part of my career developing responsive applications at a large bank in the Pittsburgh Area. When I was on a component library team and pattern library team, we were involved with a design governance which included representatives from most teams consuming the component library and referencing the pattern library. The governance included a weekly meeting where improvements, visions, and issues were discussed and designs were voted on. I actively participated in those meetings to discuss what was possible and timelines for the items discussed as well as keeping everyone on the same page on how these new features or ideas will work in desktop, tablet, and mobile resolutions. The accessibility team was also heavily involved in these discussion and I worked actively with them to make sure the components being developed based on the designs were well responsive, accessible, and worked in all supported browsers and screen readers.
We utilized flexbox and bootstrap and media queries to support the responsive website. We customized the bootstrap breakpoints via sass variables in order to work with the design governance requirements. We also utilized Storybook which is a tool that is used to create Angular components (and other frameworks) and upload the specs, examples, and documentation into a design system. The design system that is used is Ledger InVision. A lot of component examples were too complicated for the "story" capabilities of storybook so we had a Microapp which documented the examples that Storybook didn't support. A story is essentially a live example of a component in a particular state and properties. However we had examples which included cross field validation, content projected tables and notifications, variable validation, and much more.
Our component library utilized both bootstrap, flexbox, and Angular Material based off Material Design which is designed for responsive and mobile friendly applications. The bank currently supports Firefox, Chrome, Edge, and Safari on Mac and Windows. Screen Readers for native Android and IOS must be supported for these browsers as well.
We utilized a lot of the bootstrap grid. In my eyes bootstrap grid is a good candidate for a grid layout with support among all browsers. Flexbox is helpful for both fluid and responsive design. Fluid design is when content wraps when it needs to wrap rather than at screen widths. A challenge I have faced with an adaptive design is a navigation header which had dynamic number of links and links could be added or removed at any time after the navigation loaded. This header lives in its own Micro App and must subscribe to a Redux type object/store in order to know what links to show. We bult it as an Angular component to respond anytime the link and other header elements would overflow each other. In mobile, the header would turn into a hamburger side panel and the header had to adapt to the side panel.
Question 3: Explain a challenge you faced while developing UI components
My response is below:
A challenge I have faced with an Angular Component is making an adaptive header. The header has a fluid mobile layout and a fluid desktop layout. The desktop layout is a fluid horizonal header with with a clickable logo and a dynamic number of links. Links can be added or removed after the header loads with the dynamic initial number of links. This component needs to keep track of whether the screen width is a mobile width or desktop width. It also needs to keep track whether the sum of the box for the logo and links (including padding and margin) create overflow. If the screen is mobile view or there is overflow, the header needs to adapt to show the mobile header which is a hamburger menu with the links in a drawer. Adaptive layout is one where mobile and desktop have different header markup. The layout doesn't only change via css and media queries, it is an entire separate html for desktop and mobile. We implement a breakpoint observer whether the desktop or mobile header should show. We also calculate the width of the list of links and logo by creating a z-indexed visibly hidden duplicate of the header to calculate the total width of the header elements and see if they overflow the width of the visible header. We don't want to do the calculation on visible header because we would see a twitch during the calculation. We also had to implement a QueryList of the Link ContentChildren to check if the number of links changed or the content of the links changed which changes the width and hence may require in a change in adaptive view. In addition to the adaptive layout, in mobile view when a link is clicked it would collapse the hamburger menu. So we have to keep track of the state on the last link that was focused and if the list is focused because clicking outside of the list would collapse the hamburger menu as well. We used the Angular CDK FocusMonitor to understand the current and previous element focused. Angular also has the change detection cycles that does a dirty check on every binding in the scope of the change detection. It could be at the root of the application or some child of the root. Because our component was in a library consumed by projects that we do not have control of, we had to kick off change detection at the root of the app during these scenarios: when the list was focused in for the first time after it is opened, when a change occurred for any reason changing the list of links width. That could include text changes, number of links changed, and overflow happening collapsing the header into the hamburger menu, and other reasons. We also had to kick off another change detection if the header component loaded but the links didn't load yet since if the options aren't there yet the calculation has yet to happen to determine if the header should be in desktop or mobile view. The links that are ContentChildren of the header also had to be flexible enough to be buttons or be children of other headers.
Question 4: Explain a challenge communicating with your team and how you solved it
My response is below:
I have worked with diverse team members during most of my career. I have worked with many teammates whose first language is Spanish, Mandarin, and Several Languages spoken widely in India. I have offshore members on my team and team members from around 5 or 6 different time zones. I have had little trouble with the diverse accents. If I am having trouble understanding, which rarely happens, I simply ask for a repeat of the conversation. I may also encourage communication via documentation, email, or IM if there is a serious communication issue, however that hasn't happened. Time differences have never been an issue. I have been up at 5:00AM for a meeting by both just waking up or staying up all night. I have also experienced teams with diverse experience level. I have been mentored by multiple members both at work and via networking. I have also mentored members, and enjoy doing so. I also really like to have a mentor because I am not shy to seek understanding for both work or other things I find helpful. During 2020 and early 2021 there were several new hires joining my team and I was the team lead. They were clearly struggling with the work. We had 2 week sprints which ended EOD every other Wednesday. Most Tuesdays and Wednesday during the week the spring ended I was up most of the night doing the work that the new members failed. I explained what changes I made and why I made them. I also encouraged them to go into the office a couple of times a week so we can pair program and I was easily available for questions. I know both the new members are doing well today. One has unfortunately moved to a new couple, but the other new member is still on the team that I have since left and succeeding! I also have experience working with folks at different positions and different backgrounds. I have lead meetings with product owners, demoed in front of the CTO of the bank, drove meeting with 200+ attendees. These meetings were technical, business driven, working sessions, live coding sessions, Q&A, and all kinds of meetings.
If I find myself struggling to communicate with someone I understand something needs to change. Whether that is changing the communication medium, changing myself to better communicate, change what is communicated until we can get into a rhythm, or even change how often I communicate.
Question 5: Why do you want to work for the Pittsburgh Baseball Club
My response is below:
I am a lifelong Pirates fan and live in the Pittsburgh Metro. I follow several media outlets covering the Pittsburgh Pirates including DK Pittsburgh Sports, Pirates Prospects, Pittsburgh Baseball Now, Rum Bunter, and Bucs Dugout. I often watch the Pirates game with my dad at my parent's house. My current KTLO project will be ending soon, and the timing is right to start new projects as a member of the Pirates Organization since I won't be leaving any of my teammates hanging by moving on.
I want to be part of the Pirates back-office operations. I want to help the Pirates win. I cannot play on the field, but if I can help by developing UI's which make data usable, visual, and available then I really want to do it. I have also been upskilling with animations which can be a marketing skill, and I am working on a MLE project to project the winner of baseball games using the Vegas Moneyline favorites as a benchmark. I am currently gathering data for the project. I have pulled data from PyBaseball for statcast, player_lookup, and single game stats. I need to pull more single game pitching and batting data. I'm essentially practicing to have a flexible and expansive role with the Pirates.
I am a web developer by trade and love learning things. My passion for learning and my passion for the Pittsburgh Pirates provides an opportunity for greater than 40 hours of work seem not so much like work. I have been hearing news about the Pirates like purchases of lots and restaurant space, new TV deal, players like David Bednar seemingly really into marketing for the team, and the Pirates focus on Player Development. To me it seems like the Pirates are working multiple fronts to find competitive advantages and I would love to be part of that team. Whatever helps the team win and grow whether it is R & D, Business Development, Player Development, Operations, Marketing, Technology, Etc... I want to do.
I am looking forward to continue learning and refining my skills, hopefully with the Pittsburgh Baseball Club. The R & D aspect in the job description as well as what I am hearing in the news about the Pirates trying new things to gain a competitive advantage makes me think the Pirates aren't just competing on the field, but there is a drive to compete in all aspects of a Baseball Club. I really want to be part of that team and look forward to hearing back.
In a UI Developer role I will do my best to design, information architect, make available easy to consume analytics and intelligence, communicate exploratory visions, and whatever I can help with even if it is in an expanded role. Being a UI Developer with the Pirates provides a unique experience visualizing data on diverse teams and devices, and communicating that data as information, knowledge, and wisdom. I really want to be part of a team driving to compete like what I understand the Pirates are doing and I hope to hear back.
Question 6: Explain your overall development experience
My response is below:
Over the years I developed into a Full-Stack Developer. I was responsible for knowing client technology, debugging, leading, working with the business, implementing new features, and creating common patterns and libraries to reuse. I must understand the CI/CD framework, MongoDB, Oracle RDBMS, Angular 1.6 through Angular 14, Java 17, Springboot, Spring JPA, Gradle, NPM, Webpack Dynatrace, Glassbox, Logscale, Openshift, Material Design, CSS, SASS, HTML, JavaScript, TypeScript, RxJs, and Redux.
We have integrated with 3rd party vendors both distributed and mainframe. We have sent transactions from distributed to mainframe. We have cross communicated among teams for integrations, knowledge transfer, solutioning, and many more reasons. We have worked with performance testing and automated testing. We use Jenkins Pipeline to manage build stages in lower and production environments. I have participated in Change Requests and Production Deployments.
We work to deliver for the client and communicate information and knowledge to all teams that may find helpful and maintain documentation. We have quick responses to email, phone calls, and IM. We document with confluence, SharePoint, and custom web applications. I have been a tech lead, a (number two), support, a liaison for business, and a junior developer, entry level developer, senior, and intermediate all within 4 years. I have had to write requirements and run agile ceremonies and provide status updates.
Conclusion
These questions and responses are typical for an ui developer initial screening. The questions did focus more on teamwork and communication than most UI-Developer jobs screen for. Most similar job screenings will have a teamwork and communication question, but 33% of the questions on this application focused on it which is higher than normal. That makes sense based on the job posting description which including meeting with the stakeholders and the focus on developing tools and ui interfaces that those stakeholders will use. Many mid-size software teams will have a business analyst and project manager which would handle a lot of the communication and proposals with the stakeholders. How cool would it have been to work directly with Matt Hague, Derek Shelton, and Oscar Marin! For now I won't know, but I am always keeping an eye on the Pirates Job postings.