Company: GitStart

Position: Senior Frontend Engineer

Talent’s Name;Dan Ronoh

1. How do you speed up the single page application?

1). When possible, use WebSockets (i.e. for highly interactive apps)
WebSocket is a bidirectional communication protocol between the user's browser and the server. Unlike
HTTP, the client does not have to keep sending requests to the server in order to get new messages.
Instead, the browser just listens for the message from the server and receives it when it is ready.
2) Use JSONP/CORS to circumvent the same-origin policy.
For some of their features, many apps rely on third-party APIs.

You can't make AJAX requests to pages your browser thinks are on another server because of the same-
origin policy. The app will need to employ an origin server as a proxy to access a third-party API.

The additional roundtrip adds to the latency.

3) Use lazy data fetching
You might want to investigate the transition phase after speeding up the rendering step.

The SPA loads the data, normalizes it, and sends it to the storage at this point. You'll need to reduce the
quantity of data processed by the SPA to reduce the time spent in this phase.

You can perform lazy loading the data until you truly need it, much like you may defer rendering below-
the-fold material.

You can get the data you need for the First Meaningful Paint with one high-level call and the rest of the
data you need for the page with another.
4) Store static content in a cache.
Examine your SPA to see when photos and other static resources can be stored on the user's device.

Even with the greatest servers, retrieving data from memory or Web Storage takes much less time than
issuing HTTP requests.

The fastest network is substantially slower than device memory. As a result, caching is your best ally.

For large collections, you can use pagination and rely on the server for durability, or you can create an
LRU algorithm to delete the extra items from storage.

In SPAs, Service Workers can be used to cache static content.

 2. How would you insert a string into an HTML element?
https://github.com/Danronoh/insert-string-to-html-element

3. What are your greatest technical strengths?

1. Complete understanding of the stack
Front-end, back-end, server, hardware, network, and database layers make up a software
package. An excellent software engineer would not only understand the functioning of each
stack, but they would also be able to jump in and address problems independently at any stage
of application development.
This is significant since a software engineer's goal is to make software work as a whole, not just
individual pieces of code.

2. Learning, adapting, and growing abilities

GitHub, StackOverflow, and other on-the-job learning tools Every software engineer should
know this. The bare minimum is to identify faulty code and look for fixes online.
3. Business savvy
Clear understanding of end-user personalities
Close collaboration with the business teams
Studying usage data and other performance measures Collecting and acting on customer
feedback
4. Effective time management
To avoid distractions, use Pomodoro timers and internet blocking programs.
Measurement of productivity using time tracking
Goal-setting clarity—from daily and monthly to annual and beyond
Reviewing progress on a regular basis
5. Communication abilities
Collaboration abilities
Empathy abilities.
Skills in critical thinking.
Leadership abilities

4. Create a function that will reproduce the way

JavaScript generators works.

https://github.com/Danronoh/Generator-funcction-to-normal-function/tree/main
5. What is the difference between border-box and

content-box?
Border-box :

The width and height properties include the content, padding, and border, but do not include the
margin. Note that padding and border will be inside of the box.

For example: .box {width: 350px; border: 10px solid black;} renders a box that is 350px wide. The
content box can't be negative and is floored to 0, making it impossible to use border-box to make the
element disappear.

Here the dimensions of the element are calculated as: width = border + padding + width of the content,
and height = border + padding + height of the content.

Content-box :

This is the initial and default value as specified by the CSS standard. The width and height properties
include the content, but does not include the padding, border, or margin.

For example : .box {width: 350px; border: 10px solid black;} renders a box that is 370px wide.

Here, the dimensions of the element are calculated as: width = width of the content, and height = height
of the content. (Borders and padding are not included in the calculation.)

6. What is accessibility? How do you achieve it?

Web accessibility refers to the design of a website in such a way that it is usable by individuals with
various disabilities.

It's critical to pay attention to accessibility and to work on your website on a regular basis to ensure that
the majority of people can use it. Concentrate on the most common disabilities and impairments, such
as:

Vision issues

Impaired hearing
Conditions of motor skill

Dyslexia and dementia are examples of cognitive disabilities.

Photosensitivity is linked to epilepsy.

Ways to achieve it:

Create a keyboard-friendly website

This is the most crucial stage in creating an accessible website. Essentially, your website should function
without requiring the use of a mouse. Because many assistive technologies rely on keyboard use and
navigation, it's critical that your site can only be accessed using a keyboard. This includes all pages,
content, and links, among other things.

Ensure that every content is easily accessible.

ARIA can help you simplify your navigation by allowing visitors to jump straight to specified content
rather than navigating through each menu item. This is especially useful if you have a lot of link-heavy
material or sections on your site.

Use HTML Tags by Default

Changeing the default HTML tags can lead screen readers to become confused.

Use headers to properly structure your content.

To make your information easier to grasp and improve the flow of your website, use headers properly.
Clear headers also aid screen readers in interpreting web pages and navigating inside them.

Make Your Images Have Alt Text

If the image fails to load, the alt text serves as a replacement. This is known as alt text or alt tags, and it
can be used to aid visitors who use assistive technology in "reading" the image. Simply use this field to
provide context and to describe the image to your visitors.

Tables should only be used for tabular data tables.

Tables should not be used for anything other than tabular data, such as layouts or lists. This may cause
screen readers and other assistive devices to become confused.
Create resizable text that adheres to accessibility guidelines

Avoid using absolute units, such as pixels to describe font size. Instead, you should use relative sizes,
which allow you to scale text in line with other content as well as screen size.

Create forms that are accessible.

All fields in your forms must have labels that are descriptive and well-placed.

Avoid Automatic Media and Navigation

For all Internet users, automatic media files might be a pain.

Colors to Consider Choose hues that contrast effectively with one another. Your visitors will be able to
distinguish between distinct elements this way.

7. What is the difference between session storage, local

storage and cookies?

If we want certain data to be on the browser, we usually utilize the localStorage object. Cookies are used
if we want it on the server, while sessionStorage is used if we wish to remove the data after that specific
tab or season is closed by the user.

8. Have you managed employees in the past?

I've never worked in a job where I was in charge of people, but I have a lot of experience managing
major projects. Despite the fact that it was my coworkers, I had taken the lead on projects where I had
to manage individuals for a set amount of time. I learnt how to bring people together, how to exploit
particular strengths of each worker, and how to plan and break down a major assignment to distribute
to numerous individuals, despite not having experience with all aspects of people management. After
our tech lead quit, I was given the opportunity to take over as tech lead at Andela Build for sdg. I learnt a
lot and we completed all of our projects successfully.

9. How do you structure your CSS and JavaScript to

make it easier for other developers?

Adopt a JavaScript a standard coding style. There are several to choose from such as JavaScript Standard
Style and Google JavaScript Style Guide. Pick the one that seems most natural to you, and adhere to it. It
will make your code more consistent and thus easier to read
Use a JavaScript linter, probably ESLint - Pluggable JavaScript linter, to enforce that style, and other
coding best practices. It will be like having another coder constantly watching over your shoulder, and
reviewing your code

Properly name every identifier in your code. Examples of bad names include: x (unless it’s specifically the
x coordinate), temp, value, and f()

Examples of good names:

currentDate, calcMonthlySalary(), isValidUser

That said, properly naming things in software is notoriously difficult

Use small functions. A function should easily fit within the screen without requiring scrolling

Functions should do one specific thing. This is easier to accomplish if you follow rule , and will make it
easier to properly name that function, as per . Classes, if you use them, should also be about one specific
type of functionality

Prefer Pure functions - Wikipedia as much as possible

Prefer smaller files / modules. You can then use a tool such as webpack to bundle them together for
efficient delivery. Also give these files properly descriptive name (see #3), and group them in folders
according to purpose

Use a well-known framework, and follow the best-practices of that framework. That will make it much
easier to on-board new developers, assuming they have some familiarity with that framework

Use built-in browser features, such as those provided by HTML and CSS instead of implementing
everything using JavaScript. For example, HTML5 has built-in support for form validation, so you don’t
need to implement it yourself

Prefer modern (ES6) constructs over old-style JavaScript. For example, prefer Rest parameters over the
arguments object, and for...of over for...in or for statements.

Consider using the functional style, e.g. Array.prototype.map() instead of for loops. It’s more declarative
and becomes easier to read, once you get used to it. It also works very well with pure functions

Prefer let over var, and const over both.

Write tests, lots of tests. Use a testing framework such as Jest · Delightful JavaScript Testing. It will make
both you and others feel much more secure about modifying the code. Also tests are a sort of
documentation that is always up-to-date

Consider using TypeScript instead of JavaScript.

10. What piece of software have you put into

production that you’re proud of?

I have put several software in to production but fight pandemics stands out according to me.Though I
can not take credit for everything It was a great experience for me .This software was created back in
2020 when the coran virus had hit the world hard and I together with a fantastic team volunteered to
make the world a better place,That is why I rank it highest .here is the link https://fightpandemics.com/

11. What is your philosophy on reusable components

vs simplicity and premature optimization?

We want to make components that are compact and reusable, but we don't want to go overboard.
Simpleness and readability are essential. If you don't have to, don't overcomplicate things. Make it
reusable whenever possible, but keep reusability in mind when designing it.

Even in the early stages of your application, you can predict which components will be reused. Consider
navigation, which might include a dropdown menu, a table component, or pagination. If the component
is extremely specialized, it will almost certainly not be reused, but make it as reusable as feasible. If
feasible, consider how it can be reused, but if doing so adds too much complexity, just design it for the
job at hand.

12. If you are getting too many API calls being made

from your hooks what can you do to prevent this?

With lodash-debounce or axios cancellation, we can easily achieve this!

Lodash-debounce

Using the functional programming paradigm, Lodash is a JavaScript library that provides utility functions
for common programming tasks 
Debounce combines numerous sequential calls into a single call. After a delay, the callback function sent
by debounce fires. As a result, it would be an ideal solution for sending api requests when the query is
frequently modified in a short period of time, such as using the onChange event.

debounce (callback, delay)

Behind the scenes, the Debounce function uses setTimeout. The setTimeout callback is also recreated
when the component is re-rendered. So we have two options for using debounce in functional
components.

useRef \suseCallback

Cancellation of Axios

A cancel token can be used to cancel a request.

The axios cancel token API is based on the cancelled promises proposal that was dropped. 

You must create cancelTocken to cancel a previous request. There are two ways to make cancelTocken.

cancelTocken.source

CancelToken constructor accepts an executor function.

13. What are a couple of easy to avoid front-end

security pitfalls?
1. XSS Attacks

2. DDoS Attacks

3. Cross-Site Request Forgery

4. CSS Injection Attacks

5. Using Third-Party Libraries

6. Feature Request or Access