Web application features

Bikram Singh Patel — Wed, 09 Jun 2021 16:38:34 +0000

This post is meant for beginners, who are building their career in Web (UI/Front-end) development.

As developers, we not only think about implementing the functional flows but also the unsaid/unasked features that are expected from a web application. These features are listed below as:

Web accessibility

Always build an application with the motto of serve to all. That means your application should not just perfectly work on desktops, phones, tablets but also on devices like screen readers etc.

Good User experience

User experience or UX covers multiple aspects such as

Easy to use flows.
Color theme that is soothing to eyes.
Error messages that are meaningful and that suggests alternative routes instead of blocking the users.
Rule based Typography that highlights headings etc.

Security

Security is a critical feature and to be concerned about. Few of the security measures to be followed are:

Cookies must be secure and httponly.
Sanitization of HTML to prevent XSS/CSS attacks.
Add content security policies (CSP) to prevent XSS/CSS and other attacks.
Pass unique token/guid in request headers to make every request unique in order to avoid CSRF/XSRF attacks.
Use SSL certificates to host app over https and avoid using http for securing your network requests.
Avoid passing confidential data over query params.

Performance

Minify/Obfuscate your Javascript/CSS Bundles using bundlers like webpack, rollup etc. I prefer Webpack.
Use file compressors like gzip, brotli etc.
Use CDN based libraries instead of packing these libraries with your bundle.
Avoid using Loops as much as possible where time complexity is not optimal.
Make code reusable wherever applicable.

Responsiveness

This is expected since the applications are mostly used in small to medium screen range devices. Use display: flex (easy & effective) and media queries (@media).

Progressive Web App

A good and in-demand feature these days. This feature allows the web app to give a native-app experience to the user.

React Routers! Which one should you choose?

Bikram Singh Patel — Thu, 20 Aug 2020 09:15:13 +0000

While working with React routers (Router, BrowserRouter, HashRouter, MemoryRouter), you ask yourself this question, which one should you select for your application.

I have a good share of experience with routers and i follow below simple rules to choose:

If you want to implement scenario based navigation on button click, then go with programmatic navigation by writing
history.push('/path'). For this purpose, Router tag is suitable.
If you don't have programmatic navigation and want URL to change in Browser's URL bar/Search bar then go with BrowserRouter, for ex- abc.com/home, abc.com/dashboard
If you want the URL to be static and not change then go with MemoryRouter. This way, you are not exposing URLs to outside world. Plus, MemoryRouter is meant for non-browser environments like Web apps that open in Mobile Webview.
Probably, you have observed that many websites' URL have # after domain name and then the remaining URL. The reason is that if you are working with a static application and don't want your app to make a server side request for navigation and navigating within the HTML content. Well, if you want to implement the same, use a HashRouter.

DEV Community: Bikram Singh Patel