Written on 5th May, 2024 by Mustanseer Sakerwala

Frontend essentials

Looking for what is essential in frontend

As a full-stack and front-end developer, I’ve always searched and explored the basic necessities that the developer needs to look out for when starting the project, and things which needed attention right from the start. I’ve compiled my explorations and explained them briefly in this article.

Essentials elements for every website (The list goes from necessity to commodity, as per me)

  • User friendly, easy navigable design
  • Accessibility
  • Language checks
  • Predictable
  • Data fetching
  • i18n
  • OG details
  • SEO (Search engine optimization)
  • Media hosting
  • High performant
  • Caching/Data synchronization

User friendly and easy navigable design

Frontend softwares, generally deal the highest with the users. A tendency for humans is to leave as things get difficult to handle. Hence if the user friendliness and easy navigable design is not taken into the major consideration of the design, the user-base for the web/app doesn’t grow much. People always want and will want quick reading, according to their own pace, hence this should be considered as one of the most essential part of the software.

For further lookup and reading,the following sites are good resources:

  1. Material design guidelines and components
  2. 6 Guidelines & Best Practices for Exceptional Web Design and Usability
  3. Apple’s design tips and guidelines

Accessibility

Accessibility for me is the ease of access of different functionalities of a website. As a developer, for me, operating a web/app using a keyboard is a blessing and for me, it denotes a properly made app. Accessibility also helps people with disabilities to easily navigate through your web/app. Accessibility also improves SEO, making your site more findable.

Some of the best examples of a accessible app are:

  1. Linear
  2. Obsidian
  3. The previous version of web whatsapp
  4. Spotify
  5. Some websites mentioned in this article

Some good resources to know more about accessibility:

  1. Mozilla docs
  2. Apple
  3. Wikipedia
  4. A Complete Guide To Accessible Front-End Components - Vitaly Friedma
  5. Accessible UI Component Libraries Roundup

Some good accessible design libraries (other than the ones mentioned in the roundup):

  1. Shadcn-ui and Radix UI - My favorite due to it's composable nature
  2. MUI
  3. Ant design
  4. A11Y style guide NOTE: not a design library, but it's a good reference

These are my suggestions, if you have any recommendations, add them in the comment section down below

Language checks

The users are generally the critics of your web, app or content. And one thing I’ve come to know is that, this world is full of Grammar-Nazi. So the for me, language checking includes verifying if the content written is good, understandable, intuitive and grammatically correct.

Predictable

People are now highly accustomed to using a variety of different softwares. Hence, If you’re app/web functionalities are not triggered in a way they are used to, usage decreases. Hence the flow of major functionalities should be predictable by your users.

Data fetching

One of the core functionalities of any client side webapp/app, data fetching is what determines the retention of the users. Taking too much time in data fetching, aggregation and displaying it will result in low ratings. So a optimising this functionalities can help to retain a good amount of users. For frontend applications, Tanstack Query is one of the best network data handlers, providing appropriate attributes to properly handle user interactions. It is also one of my favourites to handle network based data.

i18n

For international users, i18n(internationalisation) is a compulsion, and I don’t think I need to write about why. i18n is handle differently according to different companies, some use a different domain/url, some use a global script to translate it to the respective language and some don’t provide the feature and let the browser/google translate do the job. One of the things that I think there should be on a site handling internationalisation is the option to change the language. I’ve seen some websites (Chinese and other languages) which don’t provide it, and this resulted in me not using the website.

OG details

OG (Open Graph) is the way to manage on how the web/app is shared and presented on social platforms. Not properly configuring this results in low level trust of users. For high shareable content, OG details should be set properly. OG is a protocol that was originally created by facebook, and X(previously twitter) uses a different set of attributes for it. For more information, read:

SEO (Search engine optimization)

SEO is the way to make sure your content is reachable by the mass users. People, even for links they know, use searches to open the link. If the SEO is not properly implemented, it can be a huge loss to the company. Though SEO is not needed for internal apps, dashboards and management webapps, but very highly needed for web/apps distributing content. SEO is done by adding meta tags in the header of the website, generally using default attributes, and for more proper SEO, using JSON-LD(Structured data). Some of my recommended guides for SEO are:

Media hosting

Media (includes images, videos, documents, and more) hosting is one of the necessities for websites/apps distributing content. If not given enough consideration, this can either introduce high latency in the website/app. To resolve the latency issue, CDN is highly used to distribute media files. To understand the importance of CDN, some reads are:

My favourite CDN providers are:

  1. Cloudflare
  2. AWS Cloudfront
  3. Azure CDN

I’ve heard of Akamai and BelugaCDN being highly used too.

High performant

In my experience, I’ve seen people build under-performing websites/apps, claiming the performance issue should be resolved from the backend, and not from the frontend. I’m a believer of performance at every point. If backend is optimised, generally the frontend is the bottleneck and the result of loss in retention of users. In fact, even with under-performing backends, I’ve seen high performance frontends helping in the retention of users. Interactivity and appropriate feedback of internals is a good way to earn the users trust. Hence optimization at frontends is also a necessity. Some recommended reads regarding the same are:

Some related articles i’m planning to read (Comment any recommendations):

Caching

Caching on the frontend results highly optimizes the TTFB metric, if the user has previously visited the website. It’s contribution to user retention is enormous, and should be highly taken into consideration during development. Tanstack Query solves this issue for api calls, and for further data management, a good global store should be used. For highly complex data to be used in your offline webapp, you can use IndexedDB. It is a good transactional database built into the browser. Though unless absolutely needed, it’s a waste of resources to use it.

Some other good frontend resources and suggestions

Some of my suggestions to use for quick and standardised development

  • Tailwind CSS for styling
  • Component library according to the need, take time selecting the library according to your design, and tweak it to make custom responsive components. This is something that I've learnt the hard way
  • Tanstack Query for network based data management

Web

Mobile
Mustanseer Sakerwala

SDE-2 @ Nike | Ex-Dukaan, Ex-ConsultAnubhav | Jack-of-all on a quest to master everything. Language-agnostic developer, who loved building scalable and reliable systems.

Home Projects Blogs Resources
connect.mustan@gmail.com

Available for full-time opportunities

© DaScientist, 2025