From Basics To Deploying Scalable Web Applications

When I started my Web-Development journey, getting overwhelmed by so many topics is what I used to face all the time, there is always something new that I have to learn while having no idea about what I should learn. …


Key Concepts to Mastering CSS

1. Introduction to CSS

Anatomy of a CSS Rule

A CSS style sheet consists of rules, which targets HTML by using selectors that describe the elements on which the styles should've applied.

Rule Syntax: The rule consists of a selector follows by a block of some CSS properties contained inside the curly braces.CSS properties consist of property and a value that is separated by a colon and are delimited with semicolons. However, a value may be a single value or a collection of multiple values, depending on the property.

For example,

  • The rule targets any elements with the class header & any element with this class will have a…


Boost Your Productivity with React Native

1. VS Code React Refractor

This extension works for both React and React Native, especially if you write JSX in React Native, this extension helps a lot by its refactoring features. It also works the same with TypeScript and TSX. A lot of the time developers face issues with long components in React Native, using this extension you can easily extract those big components and use them without losing any confidence.

  • Compatible with React Hooks API.
  • Handles key attribute and function bindings.
  • Works with classes, function, and arrow functions.

2. Highlight Matching Tag


Build PWAs that Stand Out

Progressive Web Apps (PWAs) recently have been gaining popularity due to their advantages, such as being fast, reliable, and attractive, while ensuring the ideal functions combined with great convenience provided to mobile phone users and developers. They have a huge impact on businesses. For instance, Housing.com witnessed a bounce rate reduction of 40% after introducing PWA.

Here are 10 Best Practices Everyone Should go Through While Developing a PWA

1.Prioritize Desktop & Mobile PWA

In recent times the use of mobile phones has surpassed the desktop, and that's why we need to prioritize PWA with user-friendly UI and UX for…


Essential Concepts to Build Applications with Awesome UI

1. Hierarchy is Everything

While developing the front end of your application always make sure that you are sticking to a hierarchy, whether it's the colors, font weight, font style, etc. Having a good visual hierarchy makes your application look less noisy & instead of everything in your interface competing for maximum attention and it’s not clear what matters the most.

For example:

  • As you can observe the amount of noise we have in the given below dashboard page, everything looks blended in a single page, and it's not clear where the user should focus at the first visit.


Learn the lesser-known features of CSS

1. Multiple Borders

There are times when we want to style our containers with different borders and multiple borders. But when it comes to applying multiple borders in CSS, developers usually end up having way too much useless extra elements.

There are two great solutions in my knowledge to apply multiple borders without polluting your markup code.

  • box-shadow solution: You must have used the box-shadow property to create shadows. However, there is a parameter knows as spread radius (a fourth parameter), which makes the shadow large or small by the amount we specify. …


Build easy to use Forms

Forms are one of the common ways the user interacts with applications, they are almost everywhere. While making a purchase, creating a profile, or signing up for newsletters, building forms the right way can easily boost your user interaction as the application becomes more friendly. I will be giving some minor and easy tips that can help you build better forms as a frontend developer or even as UI/UX designer.

1. Test Your Forms

There are times when our application is a specific target to some users, to make sure that maximum users are comfortable while using your application, you must test your forms…


Build Appealing Frontend Applications With These 8 Tips

1. Don’t Use More than Two Typefaces

Fonts are the files on the device, that are later used to render the typeface. Developers sometimes add too many typefaces to their products and end up making it an overwhelming result. You should use only two typefaces maximum. One for heading and titles, and another for body copy that is the content to be read by users.

However, you can use weights and italics within that font family for any further customization of your style, adding too many typefaces creates too much visual noise and increase the effort that they have to put into understanding the view in front…


Become More Confident With VS Code

1. Fonts With Ligatures

Fonts with ligatures make code more clean and handy when working with big projects, you can make your editor experience much better with exceptional fonts in conjunction with ligatures. There are several fonts available that support ligatures, but you can simply stick with the classic Fira Code.

  • To enable ligatures in VS Code you just have to add “editorLigatures”: true in VS Code settings file.


Build Better REST APIs

1. Automate Caching

Repeated request and responding to those request consumes resources and this becomes a sign of flawed design. To solve this problem you must store data fetched from the API on the server and serve later from there.

However, there are times when the data becomes outdated and needs to be updated, in this case, we have some industry caching solutions (Redis and Amazon ElasticCache) that can cache data even after making changes.

2. API Documentation

Always provide clear and concise documentation is necessary for any API, it becomes harder to use that API later without good documentation. …

Mohit

I Make Mobile Apps

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store