Rula Software Engineer Role Studyguide

What are web vitals?

A collection of metrics used by google to test your site against a standard. This standard is created from data collected and shared from the Chrome UX report known as crux. Crux is a publicly accessible collection of user experience data that gets collected as users browse the internet. This created a baseline for performance that was then given to the whole world web Web vitals show you how far below or above your website is performing in specific areas compared to everyone else is performing in the internet

What makes UX design different from UI design?

Although similar, UX and UI are unique fields. A user interface professional focuses their attention on creating and laying out the actual elements a user interacts with while navigating your website. Although this is part of the UX process, UX is a more expansive field, which includes factoring in other considerations, such as site or application performance and how interacting with a design makes the user feel."

Which research methods do you use when starting a new design?

Because of budget constraints in my current position, I currently rely mostly on user surveys. However, I would love to conduct more face-to-face interviews with staff members and managers. Interviewing users of the designs I'm creating is a crucial process in my research because it helps me understand what elements can support business-to-business operations in more efficient ways. I also research various design elements that can further support business goals while remaining effective and user-friendly for staff and management."

Do you have any questions for me about New Relic?

Can you describe the company culture at New Relic, especially as a remote-first company? How does New Relic handle collaboration and communication among remote teams?

what was your thought process for the take home assessment?

First I read the prompt and toke notes on the requirements to have a good understanding of what my program had to be capable of doing, then I wanted to split each requirement into different sections to help me manage my thought process as well as my work flow. I notice that the first three requirements dealt with the execution of my program from the command line and what type of files it can take as arguments, so my first step in this section was figuring out how to access one or more than one txt file through my terminal, as well as accepting an input via stdin. The following three requirements dealt with logic and structure for the expected output. I already knew that I can use the toLowerCase method to make this case insensitive but my first step in this section was to figure out how I can use regular expressions to remove punctuations, line endings, and keep contractions. Like this my frequency results could be accurate. My next step would be to create a function , figuring out how I can properly store, and keep count of the frequency for each three word sequence and implement an algorithm that can go through each of these strings, store the sequences, and update the count. Then I can use a method to sort top 100 from most to least common. After I find the top sequences my next step is to log them into my terminal following the same structure in the example given to me in the prompt. The last section of my requirements provides me with things to keep in mind when building my program, like creating tests, making sure that it can handle large files, and runs as fast as possible

Can you describe your design process?

I always schedule time for user research and developing the information architecture of my design. These processes help me create user interface and interaction designs, both of which are crucial for making web applications and digital content functional and enjoyable for customers to navigate. After implementing strategies that support the customers' and business's goals, I evaluate and change any aspects of the design that need improvement. By testing and adjusting designs, I can adapt the experience to make it as useful and enjoyable for the user as possible.

What is your experience using HTML and CSS?

I am well-versed semantic HTML5, ensuring that my code is both meaningful and improves the accessibility of web applications. I use a variety of HTML elements such as <header>, <nav>, <main> to create well-structured documents. As well as HTML forms, including various input types and form validation techniques, to capture and validate user input efficiently. I have experience with CSS3, utilizing features such as Flexbox and Grid Layout to create responsive and flexible layouts. I often use pre-processors like SASS to write more maintainable and scalable CSS. This includes using variables, nesting, and mixins to streamline the styling process. I used media queries to ensure that applications are mobile-friendly and perform well across different devices and screen sizes. I also have experience in creating animations and transitions using CSS to enhance user interactions and provide a more engaging user experience. I regularly use tools like PostCSS and Autoprefixer to ensure compatibility across different browsers.

Why do you think you are what we are looking for ?

I believe I am what New Relic is looking for because I thrive in fast-paced environments, even when challenges come up I am not afraid to ask questions, and I trust in my ability to learn and adapt quickly to new technologies in both frontend or backend. When working independently I can take ownership of tasks and when collaborating with team members I understand the importance in being open minded to more than one interpretation, taking in positive criticism, and approaching challenges as a team with curiosity and a problem-solving mindset.

How do you collaborate with other designers and developers?

I believe strongly in the value of collaboration and enjoy having meetings and conversations with others on staff, including those within the design team, such as a UI developer, and those for whom we design products. This allows me to consider more opinions and have a more comprehensive understanding of the project as I work on its UX design."

What has been your most successful UX design?

I recently completed a project for a small business involving necessary improvements to usability. The business's database software was outdated, causing functionality issues when staff performed tasks within the program. I consider this my most successful project because I connected with the business's staff to identify its needs and implemented many of my design features to meet those needs. This led to a completely new database design that streamlined functionality and reduced the time staff needed to use the application."

How would you deal with browser-specific style incompatibility?

I typically follow a systematic approach to ensure consistent rendering across different browsers. First, I use browser developer tools like Chrome DevTools to identify which CSS properties are causing the compatibility issue. I test the application across different browsers to pinpoint where the discrepancies occur. For CSS properties that require vendor prefixes to work correctly across browsers (like -webkit- for WebKit-based browsers and -moz- for Firefox), I add these prefixes as needed. I utilize feature detection libraries like Modernizr or write custom JavaScript checks to detect browser capabilities. This allows me to conditionally apply styles or load polyfills only when necessary, ensuring a consistent user experience across different browsers. In cases where a CSS feature is not supported by a particular browser, I provide fallbacks or alternative styles that achieve a similar visual effect. After implementing fixes or workarounds, I thoroughly test the application across different browsers and devices to ensure consistent rendering and functionality.

Detailed explanation for the In app marketplace feature

I was able to accomplish this by using Redux to handle the global state of the project, once the publish button is clicked two things happen the current state data is collected and a api end point that I created is triggered in the backend, that stores the code that was generated by reactype into the PostgreSQL database along with some metadata belonging to the user information, and a screenshot of the frontend of the application. Then once the marketplace button gets clicked this triggers another endpoint in the backend that fetches the data from all the users who have published their projects from the same database and renders this within my marketplace component in containers displaying the name project and the user, their avatar, the screenshot of the project, and a drop down menu with two buttons for cloning. Users then have the ability to clone individual projects which fetches the data from the chosen project to be stored in the user's personal projects folder to be opened from the customization page.

Can you mention three simple ways to decrease page load time?

I would use Lazy loading to defer the loading of non-essential resources until they are actually needed like images, videos, or scripts. Instead of loading all resources upfront, resources are loaded dynamically as the user scrolls down or interacts with the page. When using react you can import lazy from react which takes in a inline function that calls your import by passing in the path to that component. You also need to import Suspense, we can use this to wrap it outside of the component that we want to defer from loading, that is already inside a React router. Suspense has a property called fallback that can be set equal to a component that you want to display instead. I can also use code splitting which allows me to load only the code required for the current page or feature, instead of loading all the code for the entire application Additional code chunks are loaded dynamically as the user navigates through the application. Implementing caching strategies to store assets in the browser's cache, so they do not need to be downloaded again on subsequent visits.

Describe a recent technical challenge. How did you solve it?

In my most recent role, I encountered a significant technical challenge related to state management in a large-scale React application using Redux. The application had grown substantially, and managing state across various components became increasingly complex and error-prone. We faced issues with state consistency and performance, particularly when users navigated between different parts of the application. Some components were re-rendering unnecessarily, leading to performance bottlenecks. To address these challenges I implemented two strategies: 1. Refactoring Redux state structure: I analyzed the existing state structure and identified areas where normalization could help reduce redundancy and improve state management. By flattening nested state objects and using normalized data structures, we were able to simplify state updates and selectors. This approach made the state more predictable and reduced the complexity of state mutations. 2. Optimizing Component Re-Renders: I introduced memoization techniques using React.memo and useMemo to prevent unnecessary re-renders of components. By carefully analyzing component dependencies, I ensured that only the components that needed to re-render did so.

What is graphQL ?

Is a query language for reading and mutating data from APIs, as well as a runtime for executing those queries by using a type system where you can define a schema for your data.

what is a cloud based software?

Is an on demand computing services on the internet on a pay as you go basis.

Imagine being at your new job, and the company has three competing stylesheets. How would you integrate them into the website?

It depends on how the site is laid out. The way users use the site will also make a difference. One solution is to have the multiple stylesheets in development but then concatenate them into one stylesheet that would be used for production.

What do you find interesting about coding?

Ive always had a passion for designing products and once I was introduced to software engineering I was very attracted to the concept of using different tools to design, develop and create an application from scratch. The feeling of accomplishment when I come up with an elegant solution to solve a problem through coding is very fulfilling. It feels like I am watching a script I wrote unfold onscreen, and it is always thrilling.

Work flow understanding of the take home assessment?

Main ReadFilePath ReadStdin GetTopSequences To handle this I knew that I can use an object to store the sequences as keys and their values as the count. Then I would need to make sure that the content from my text file is stored in an object type data structure like an array so I can iterate over it and access the first three elements. Using a variable I assign its value to this first sequence then using a conditional statement, if the sequence does not exist in my object I would create that as a key and assign its value to 1, else I would look for that key in my object and update the value by 1.

What was your role at Reactype?

My role at reactype was as a full stack engineer. My team and I had the responsibility of shipping out the new version of the product. One of my individual responsibilities was to implement a marketplace feature which enables developers to share their built components by publishing them directly to the marketplace. Once in the marketplace developers can browse through the published projects and clone them directly to their personal project folder that can later be accessed in the main customization page. Using Redux global state management I was able to access the current state of the project anywhere in my application. By implementing a PostgreSQL database I was able to store the project and user's data once the publish button was clicked triggering endpoints I created in the backend with Express. Using React, React hooks and material UI I designed the marketplace component to display the projects in containers displaying the project and user's information along with a cloning button. The reason behind this new feature was to optimize the reuse of components, build collaborations between developers, and facilitate the developing process for engineers. I also had the opportunity to mentor other engineers and onboard them on the product, due some code review and also provide them with some new potential features that will facilitate their productivity.

What are your strengths?

My strengths as a frontend software engineer lie in my strong foundation in JavaScript, my ability to write clean and maintainable code, and my proficiency with modern frontend frameworks and tools. I have a solid understanding of core JavaScript concepts such as closures, asynchronous programming (promises, async/await), and the event loop. I am proficient in ES6+ syntax, which allows me to write more concise and readable code. I have extensive experience with React, including hooks, context API, and state management with libraries like Redux. I am skilled in using CSS3 and pre-processors like SASS to create responsive layouts with Flexbox and Grid. I focus on optimizing web performance through techniques like lazy loading, code splitting, and efficient asset management.

Technologies used in Reactype Backend

Node.js(Express), GraphQL, PostreSQL, TypeScript

Technologies used in Reactype frontend

Node.js, React, React hooks, Typescript, Redux toolkit, HTML, CSS, MUI,

What was one project you worked on that didn't go as planned, and what was the outcome?

One project that presented challenges was when I participated in designing an online shopping platform for a startup business. One of the biggest challenges of that project was that user requirements were unclear to the design team, which slowed the initial development stage and design feature implementation. My team and I delegated usability and functionality testing to junior developers to conduct more in-depth research on the business's target markets and user needs. After analyzing elements that fit our research, we changed the platform and improved the overall design and functionality to meet customer needs and help the business increase sales after three months.

what are closures?

They are functions that can access values outside of their curly brases

what is important about using UTF-8 when trying to deal with memory efficiency?

UTF-8 is an encoding system for Unicode. It can translate any Unicode character to a matching unique binary string, and can also translate the binary string back to a Unicode character. Why would UTF-8 convert some characters to one byte, and others up to four bytes? In short, to save memory. By using less space to represent more common characters (i.e. ASCII characters), UTF-8 reduces file size while allowing for a much larger number of less-common characters. These less-common characters are encoded into two or more bytes, but this is okay if they're stored sparingly. Spatial efficiency is a key advantage of UTF-8 encoding.

How do you decide which features to use in your designs?

User research is an important factor that helps me decide which features to integrate into a design. I consider the target market, customer needs and any problems I might solve through my design. I align these factors with the company's goals, so I can create designs that support the customer and business. In my last company, for instance, I developed streamlined functions to help customers search for products and make purchases on the company's website. With these goals in mind, I decided on fewer graphics and more pathways to search for products."

Do you have experience using OOP principles or design patterns?

Yes I have experience using Object Oriented Programming in JavaScript. I think is very beneficial when attaching data and functionality together. I worked with classes to achieve this and create new instances using constructors that hold my data and methods to update my data efficiently without having to use my global memory

Do you have experience building modern databases using SQL/ noSQL?

Yes, I have experience building both types of databases. For my contract role "Recommend Restaurants, next" we created an application similar to Yelp and decided to use MongoDB, a NoSQL database, to support our backend. We chose NoSQL to avoid over-fetching data. Additionally, by using GraphQL, we were able to fetch multiple pieces of data in a single request, reducing the number of network requests. For SQL databases, Ive used PostgreSQL in my role at reactype. Creating queries to fetch essential data from tables and using schemas to follow a set data structure.

Have you used graphQL before ?

Yes, I have experience with GraphQL. I used it for one of my contract roles as a second option for reading and mutating our APIs. It made made it much easier to fetch specific data and it reduced over fetching or under fetching issues that are common in REST APIs

Have you worked Agile techniques, tools and methodology?

Yes, I have experience working with Agile methodologies in my previous roles. I've been part of teams that used Agile frameworks like Scrum and Kanban to manage projects. We conducted regular sprint planning, daily stand-up meetings, and sprint reviews to ensure alignment with project goals and customer needs. Tools such as Asana were instrumental in tracking tasks and facilitating collaboration among team members. Agile's iterative approach helped us deliver incremental improvements and respond effectively to changes in requirements throughout the development process.

Do you have experience working on microservice develpment?

Yes, I have experience working with microservice development. In my previous projects, I've been part of a team that designed and implemented services that are independently deployable and scalable. This approach allowed us to break down complex applications into smaller, more manageable pieces, each focusing on a specific functionality

have you worked with AWS before?

Yes, I have worked with AWS. In my previous projects, I have used various AWS services to build, deploy, and manage applications. For instance, I have utilized EC2 for scalable computing power, S3 for secure and scalable storage, and RDS for managed database services. AWS's flexibility and range of services have been instrumental in improving the efficiency and scalability of our applications.

Do you have experience working in cross functional teams?

Yes, for my most current role in Reactype our teams was split into 3, one handling the frontend, other handling the backend and the last one the testing for our entire application. We divided the team based on our skills set to be as efficient as possible. Participating in daily stand-ups, sprint planning, retrospectives, and demos where our team members provided updates and feedback. We use Slack to communicate with our team.

what is docker?

a tool that can package software into containers that run reliably in any environment. Instead of virtualizing hardware containers it only virtualize the operation system, all apps and containers are run by a single kernel (It manages the system's resources and allows different software and hardware components to communicate with each other) making it faster and more efficient. 1. Docker File: its code that tells docker how to build an image 2. Image: is a snapshot of your software along with all its dependencies down to the OS level. The image is immutable and it can be used to spin multiple containers which is your actual software running in the real world

What is a schema?

a visual and logical representation of a relational database that defines how data is organized, stored, and accessed

What are vendor prefixes?

are a way for browser makers to implement experimental or proprietary CSS features before those features become standardized. These prefixes are added to the beginning of CSS properties to indicate which browser or rendering engine the property is intended for. -webkit- for WebKit-based browsers like Chrome and Safari. -moz- for Mozilla Firefox. -ms- for Microsoft Internet Explorer and Edge (before switching to standard properties).

What are data structures?

are specialized formats for organizing, managing, and storing data in a computer so that it can be accessed and modified efficiently. They provide a way to handle data in a structured way that optimizes for specific types of operations, such as searching, insertion, deletion, and iteration

What does New Relic provide?

helps businesses and organizations innovate faster, work smarter, and improve their digital world. New Relic's solutions provide real-time insights into software and infrastructure, allowing companies to monitor, debug, and improve their entire stack. This helps companies find and fix problems faster, build high-performing teams, and speed up transformation projects.

What is New Relic's mission?

instrument, measure, and improve the internet and help our customers create more perfect software

What does working with Browser Agent entail ?

involves understanding how browsers identify themselves to web servers and how you can manipulate and interact with the browser environment. Some key areas are: 1. User agent String: Which is a line of text sent from the browser to the web server containing information about the browse type, version, and operation system. 2. Navigator object: Allows you to access the user agent string, the platform, and the user's preferred language. 3. Feature Detection: We can use this to determine if the browser supports specific functionalities. Modernizr is an example. 4. Browser compatibility: You want to make sure that your JavaScript code works across different browsers. We can use polyfills Scripts that provide modern functionality on older browsers that do not natively support it. One polyfill library I used is Babel. 5. Event handling: Understanding how to handle browser events (e.g., click, load, resize) is crucial. 6. Cross-Origin-Resource Sharing(CORS): is a security feature that restricts how resources on a web page can be requested from another domain. 7. Performance Optimization: Using Lazy loading we can defer the loading of non-essential resources until they are actually needed. 8. Debugging tools: Example Chrome DevTools, for debugging JavaScript, inspecting elements, and monitoring network activity.

what is a plugin ?

is a piece of software that adds specific features or functionality to an existing software application. Used to extend their capabilities and add new features.

what is regex?

is a powerful tool used for pattern matching within strings. It's commonly used for searching, editing, and manipulating text in various programming and scripting languages.

what is useMemo ?

is a react hook that memoizes a value and returns the same value until any dependencies in the dependency array changes , once this happens it will recompute a new value. UseMemo takes in a in line function as well a dependencies array.

What is webpack?

it is a web application bundler for JavaScript, what it does is it bundles all of your JS files into a single file which means you only have to make one network request to download your JS making your application faster. It also provides you with loaders that bundles different types of files like CSS, SASS, for images Jpeg , typescript, or JSX with React

what are CDNs?

it stands for content delivery network, which are used to improve the delivery of static content such as images videos and other web assets. When a client request content from a CDN the CDN looks inside its cache for the content if its not there it goes to the origin server to retrieve the content and caches it on its edge servers. When another user requests the same content the CDN retrieves it directly from its cache

in react what if i want to hit the same endpoint from different components, what's is the best practice to architect this?

it's essential to manage your data fetching efficiently and consistently. Define API Functions: Create a module (e.g., api.js) that contains functions for making API requests. This helps avoid code duplication and makes your code easier to maintain. Use the API Module in Components: Import the functions from your API module into your components. Use React Context for Global State If the data fetched from the API needs to be shared across multiple components, you can use React Context to provide the data to components without passing props down manually.

what are API keys?

they identify the project or application making the call to the API. They consist of long strings of letters and numbers that are created once and remain static until rotated

what are authorization tokens?

they identify the user making the request and verify that they are allow to complete it.