DEV Community: Rakib Rahman

Backend server

Rakib Rahman — Fri, 24 Dec 2021 12:22:22 +0000

Node.js is a non-blocking and single-threaded JS engine. It is used for back-end API services. With the use of Node.js, we can create dynamic page, access files by collecting data.

I built a website which is an e-commerce platform. I need to store a lot of data for the products. MongoDB is an important database system for this type of data. I stored data in their database server and used it in my website.

MongoDB is an open source NoSQL database management program. We need to store so much information on the website. MongoDB is a user-friendly, secured and flexible interface for the developers. I used their database for storing product’s details/information in my last ecommerce website.

JSON Web Token (JWT) is a security system to hold information about a user. When a user login to a website, the website holds some basic information (UserID, Email and so on) to recognize a specific user. When he/she logged in or placed any request, the authority checked by the JWT token without sending private credentials on every request. It expires within 02 hours.

It doesn’t require a database system because the data store in the JWT sent to the client is safe. This information can be verified and trusted because of authority authentication.

There are some other token systems to verify users.
OAuth2.
Passport.
Spring Security.
Auth0.
Amazon Cognito.
Keycloak.
Firebase Authentication.
Devise.

SQL stands for Structured Query Language. SQL is called a Relational Database Management System. SQL is vertically scalable. SQL is table-based. SQL is better for multi-row transactions.

NoSQL stands for non-relational SQL. NoSQL is a Non-relational or distributed database system. NoSQL databases are horizontally scalable. NoSQL document based databases where we store large datasets. NoSQL is better for unstructured data.

CRUD stands for Create (insert operation), Read (recover documents from collection), Update (modify documents in a collection), and Delete (remove documents from the collection) of database systems in the web application and primitive operations.

React: JavaScript library

Rakib Rahman — Tue, 21 Dec 2021 19:44:33 +0000

React is an open-source frontend JavaScript library, we can use plain CSS as interactive of a webpage but this is so time consuming. We can use this build In library to create interactive UI, user interfaces and responsiveness of websites.
We face some reloading problems on some websites. When you move to another address from the current page, it reloads automatically. But React solves the problem by using the react router and is the best practice for big web applications. React Router is a powerful routing library and simple API which keeps the URL. We can get any webpage / link from the current page through React Router documentation.

React JSX: JavaScript XML is a syntax extension of JavaScript. Those who can’t use React properly, you can use tags like HTML in React through JSX. It is so useful for beginner developers. There is no inherent implementation for that reason, browsers can’t read JSX directly, so Babel and TypeScript compile JSX into JavaScript.

Redux: Redux is an open-source JavaScript library, state management and container (Fetching and storing data, assigning data to UI elements and changing data) for JavaScript apps. The large amounts of application state updated frequently. It can be used with React, Angular, Vue, Ember, and vanilla JS. For unidirectional data flow makes it popular.
Redux is application state management. It maintains the state and a new object is created for every little change. It is an application data-flow architecture not like the others library or a framework. The code is easy to maintain and organized. The smaller functions become reusable code. It is helpful for large amounts of files, components and frequently updated state.
Redux has three building parts: actions, store, and reducers. Any component can access the stored data from the state as it has central store data. It follows a strict unidirectional data flow.

Redux Saga: Redux Saga is a middleware library and an intuitive Redux side effect manager. It works asynchronously with multiple concepts. It is used in the Redux app to handle asynchronous operations by ES6 feature. It is easy to manage, simple to test and executes.

DOM: Document Object Model is the hierarchical representation of a web page. A virtual DOM is a JavaScript representation and memory representation of the DOM. React uses virtual DOM to enhance its performance. Virtual DOM is needed for the slow speed of DOM manipulation. For saving time and money, when you change something in the webpage, the virtual DOM acts as the copy of the DOM and does the same.

React native: React native is a framework which uses react components. It is used in the Android and iOS projects. We import {Text, View} from react-native.

There are three main mobile apps, web, native and hybrid for development projects. You can choose any of the apps depending on business objectives and overall product goals. We get the best user experience and performance from Native apps. For multiple code bases, Native apps are very fast and responsive which is the most common type of app.

The documentation of native apps is fruitful and extensive. It has better performance than other apps. Better device, external hardware integration and user interface. But it is a difficult programming language which requires experienced developers.

CSS (Cascading Style Sheets) of the website

Rakib Rahman — Sat, 18 Dec 2021 21:15:18 +0000

“There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.” – Milton Glaser

Graphic design is one of the important parts of a website. When you, the landlord, step to build your own house. You need to coordinate with the architect, civil engineer, mechanic and so on, where the architect plans, designs and looks after the construction of buildings, same as a graphic designer.

Website hosting is a massive combination of developers and designers. For building a secured and functional website like Daraz, Evaly, Foodpanda etc. you have to hire all the specialists. For an e-commerce website, all the users are searching products and storing the desired one in his/her profile is the work of a Back-end web developer. The visual of a website is the manipulation of a Front-end web developer. Web designers suggest design / illustration according to the website / organization. If you present a comfortable design and function, you can hold on to the customers more.

Plain CSS: Plain CSS (Cascading Style Sheets) is the simplest and core concept of designing a website. Three types, internal, external, and inline styles in this function.

Internal CSS: For internal CSS, you have to add your needed styles within the tag. Id and class selector gives the written design to the exact content.

body { background-color: gray }
p {

color: red;

margin: 60px
}
.class1 {
color: orange
}

But these codes create the page longer and make the website slow.

External CSS: In the external css, the styles are coded into a css file which is more clean and decorated than internal CSS. The css file will attach with the section.

h1 {

width: 50%;

background:#A3C4E5
}

The css file can be applied to multiple pages but too many .css files will slow down the website.

Inline CSS: You can add CSS in every html tag attribute. For specific changes and updates, it is easy to implement. But this option is not recommended because of the structure. When you add the attribute to every element, the coded page becomes confused.

Welcome to the website

I recommend External CSS which is more smart than others. You can use any CSS to your webpage which is sharable and organized. Others one are lengthy processes.

CSS Framework: CSS framework is a library with setup code for UI developers. The plain CSS is time consuming. In this situation, we don’t need to code the basic CSS because the framework gives us ready-made CSS properties. For a small website, the developer uses other frameworks with the help of documentation. But the documentation will be possible to change / update with the situation, then the design will hampered shortly.

14 Best CSS Frameworks for Front-End Developers:
Bootstrap
Foundation
Bulma
UIkit
Semantic UI
Susy
Materialize
Pure.
( Source: https://geekflare.com/best-css-frameworks/ )

But the established farm will build a personal CSS Framework by developers. That is restricted for unauthorized people. They build / change it with their own favor.