Company Git Start
Company Git Start
Company Git Start
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 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.
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.)
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
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.
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.
Changeing the default HTML tags can lead screen readers to become confused.
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.
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 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.
All fields in your forms must have labels that are descriptive and well-placed.
Colors to Consider Choose hues that contrast effectively with one another. Your visitors will be able to
distinguish between distinct elements this way.
Properly name every identifier in your code. Examples of bad names include: x (unless it’s specifically the
x coordinate), temp, value, and f()
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 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
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
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
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.
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
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
security pitfalls?
1. XSS Attacks
2. DDoS Attacks