Building Fast Loading Web Applications

Image for post
Image for post

In the process of rendering a web page the static files, such as fonts, HTML, CSS, JavaScript files become a vital blocking resource, it stops downloading the rest of the resource until these critical files are processed. This results in slow web apps due to the entire rendering process being on hold.

These critical resources file impacts a lot on the performance of your web applications, there are several ways to eliminate rendering blocking resources, we can reduce the number of render-blocking resources, or we can shorten the critical rendering path and reduce page load times for improving the user's experience. …


One Of The Best React Date Pickers For React Web Projects

Image for post
Image for post

1. airbnb/react-dates

Even after being one of the oldest libraries, it's still being actively maintained. It's localizable and mobile-friendly, built with accessibility, also relies on Moment.js for working with dates which makes it a bit heavy compared to other lightweight libraries.

But lacks in having proper documentation with usage examples, you will only find a Storybook and a few examples on the GitHub repo.

Features:

  • Date range picker.
  • Localizable.
  • Mobile friendly.

To Install:

npm install react-dates --save

2. react-datepicker by Hackerone

A very simple and reusable date picker component, you will easily find its documentation with a certain number of examples with all the use cases you can think of. …


Popular Node.js Frameworks That Offer Highly Scalable WebApps

Image for post
Image for post

1. Express.js

Has a very minimalistic approach with a classic and straightforward framework. It doesn't require you to go deeper into the learning curve, all you need is a basic understanding of the Node.js environment.

  • Rapid-Server: Has many Node.js features like functions and speeds up the process with few lines of code.
  • Better Content Negotiation: Helps in better communication between the client and server by providing an HTTP header to URLs, which fetch the exact information for the user/client -side.
  • MVC Architechtural pattern.

2. Koa.js


Stop Wasting Your Time Doing Repetitive Things While Building React Native Components

Image for post
Image for post

1. Use Color Palettes

In every React Native project, you absolutely need to work with a number of colors, but using color names or naming your colors # (eg #f4f5f7) everywhere makes it so harder to manage the project as it gets bigger with time. To solve this issue developers use a different approach, which is making color palettes in the project, and whenever there is a need to apply the same color to the project, you can simply import that palette and use it easily.

For Example:

Here is how to implement this in your React Native Application.


Using The Right Libraries To Optimize Project Workflow

Image for post
Image for post

Note: All the Packages have over 10,000+ Github Stars

1.react-select

A great alternative for the Select Component in React.js.

Represents a whole new way of developing powerful React.js components that just work out of the box while being fully customizable.

Highlighted Features

  • Flexible approach to data, with customizable functions.
  • Extensible styling API with Emotion( A JavaScript library designed for writing CSS styles ).
  • Component injection API for complete control over the UI behavior.
  • Option groups, portal support, animation & more.

To Install:

npm i react-select

2. react-dnd

Drap and Drop for React

A set of React utilities to help you build complex drag and drop interfaces while keeping the components decoupled. …


All You Need To Know About Using Flux Pattern In React Native

Image for post
Image for post

Flux Architecture

Flux Architecture is simply an architecture for building user interfaces in React. To understand the Flux Architecture we need to first start whats is one-directional data flow pattern in React which will lead us to Flux. You need to understand two key points here, and that is how to separate the code and how to split an application into parts using Flux. These pattern connected together is responsible for everything in modern mobile applications.

What Is One-Directional Data Flow Pattern?

To understand Flux Architecture we need to know why we even need it. Observing Facebook who switched to Flux from the Model-View-Controller (MVC) pattern, where we decouple the business model from the view markup and coded logic. …


Add Multiple Audio Features With These Libraries In Your React-Native Apps

Image for post
Image for post

1. react-native-track-player

A fully working audio module created for music apps and provides audio feedback, external media, Chromecast support, and more stuff like background mode.

  • Lightweight: Very optimized to use the least amount of resources for your needs.
  • Supports React Hooks: Have great support for React hooks for a common use-case so you don't have to write it.
  • Caching Support: Easily play media files without an internet connection with caching.
  • Supports Both (Android & iOS).

To Install: npm i react-native-track-player

2. react-native-audio-recorder-player

A React-Native link module for audio recorder and player, it not s playlist audio module and supports simple recorder and player functionality for both (Android & iOS).


The Roadmap For Learning React I Wish I Knew

Image for post
Image for post

1. Getting Started

JavaScript To Know For React

Comparing React to other frameworks the best thing about React is how exposed you are while working with it, as there is no template DSL (JSX compiles to sensible JavaScript), the component API has always been simpler with the addition of React Hooks and the framework offers a very little abstraction outside the core UI elements

1. Template Literal

Template Literal are enclosed by the backtick (` `) character instead of double or single quotes.

They can contain placeholder and these are indicated by the dollar sign and curly braces (${}) and the expression in the placeholder and the text between the backticks get passed to the function.


Packages to speed up your React Native development

Image for post
Image for post

1. react-native-qrcode-scanner

All modern and quality mobile apps prefer the feature of QR code scanning in their mobile apps, you can use this feature in your React-Native easily using this package to add the functionality of scanning QR code.

To Install: npm i react-native-qrcode-scanner

2. react-native-immediate-phone-call

This package is quite handy if you want to add a feature of initiating an immediate phone call feature without any further steps in your apps.

To Install: npm i react-native-immediate-phone-call

3. react-native-colour-matrix-image-filters

You do basic image greyscaling using this package in your apps. Each filter supports all the view props and if you need to combine several filters it is more performant than the corresponding stack of filter components. …


All You Need To Know About Custom Events In JavaScript

Image for post
Image for post

The DOMContentLoaded event, which is triggered at the moment when the browser is done loading and parsing HTML to the unload event, triggered just before the user leaves your site. Events are almost everywhere in a Web App. These events help in determining what just happened in an application & what the user’s state was specific at that time and more.

But the available JavaScript events are not adequate for describing the state of an application.

For example, when a user login fails and you want the parent component to know about the failure, there is no such login- failed event. …

About

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