Introduction

All web tips

HTML

HTML Editors

There are many editors for Writing html. One of the most popular editor is vscode. But you can also use online editors like JSFiddle

HTML Elements

First HTML Page

Typical html page has Head, Title and Body elements. Please refer live demo at Simple HTML Page Demo . html element has a lang attribute which is used to specify the language of the page. e.g. lang attribute's value of the page Hindi Page is hi (hindi). lang attribute's value of the page Japanese Page is ja (japanese). lang attribute is useful for accessibility and SEO. You can read more details at Lang attribute benefits .

Structural (Semantic) Elements

• <header>: Defines the header of a document or section.
• <nav>: Represents a section of a page whose purpose is to provide navigation links.
• <main>: Specifies the main content of a document.
• <section>: Defines a section in a document.
• <article>: Specifies independent, self-contained content.
• <aside>: Represents a section of the page with content loosely related to the content around it.
• <footer>: Defines the footer of a document or section.

Please refer live demo at Header, Footer Demo

Text Content Elements

• <h1> to <h6>: Header tags that provide hierarchical structure.
• <p>: Represents a paragraph.
• <blockquote>: Indicates that the enclosed text is an extended quotation.
• <pre>: Indicates preformatted text.
• <ol>: Ordered list, <ul>: Unordered list, <li>: List item.
• <div>: A generic container for flow content that by itself does not represent anything.

Demo is at Text Content Elements Demo

Inline Text Semantics

• <span>: A generic inline container for phrasing content.
• <strong> and <b>: Define importance and bold text, respectively.
• <em> and <i>: Define emphasized text and italic text, respectively.
• <u>: Represents underlined text.
• <mark>: Represents marked or highlighted text.
• <del>: Indicates text that has been deleted from a document.
• <ins>: Indicates text that has been added to a document.

Demo is at Inline Text Demo

Table Elements

• <table>: Represents tabular data.
• <tr>: Table row.
• <th>: Table header cell.
• <td>: Table cell.

Demo is at Table Demo

Meta Elements

• <meta>: with attribute charset - UTF-8 is the default charset
• <meta>: meta with name viewport - This is required for responsive web design.

Demo is at Meta Demo

Embedding CSS and JS

Embedding CSS

• Inline CSS
• Internal CSS
• External CSS

Please refer CSS Embedding live demo at Embedding CSS demo

Embedding JS

• Inline JS
• Internal JS
• External JS

Please refer JS Embedding live demo at Embedding JS demo

Default

By default, when a browser encounters a script tag during the parsing of an HTML document, it stops parsing the rest of the HTML until the JavaScript file is downloaded and executed. This behavior ensures that scripts that modify DOM elements are processed correctly, but it can also lead to significant delays in page rendering if the script is large or if it needs to be fetched from a slow server.

async

The async attribute is used to download the script asynchronously while the HTML document continues to parse. However, as soon as the script is downloaded, it is executed immediately, which pauses the HTML parsing until the script execution is complete. This attribute is suitable for scripts that do not depend on other scripts and do not modify the DOM elements (e.g., analytics scripts). Scripts with async are executed in the order they are downloaded, which is not necessarily the order in which they appear in the HTML document.

defer

The defer attribute also downloads the script asynchronously while the HTML continues to parse. The key difference from async is that scripts with defer are executed only after the entire HTML document has been parsed. Moreover, scripts loaded with defer are executed in the order they appear in the HTML document, which is crucial when the scripts depend on each other. This attribute is most suitable for scripts that need to access or modify the DOM and depend on the full parsing of HTML.

Images

Performace wise, webp is the most popular image format for web apps! Demo is at Image Demo

HTML forms

Demo is at Forms Demo

Canvas and SVG

Canvas and SVG is used to draw graphics in html page. SVG stands for scalable vector graphics and it is represented using xml like syntax. Demo is at canvas and svg Demo

Audio and Video

Demo is at Audio and Video Demo

Interactive Elements

• <details>: Creates a disclosure widget in which information is visible only when toggled.
• <summary>: Specifies a visible heading for a <details> element.
• <dialog>: Represents a dialog box or other interactive component.

Demo is at Dialog Demo

favicon

Entities, Symbols and Emojis

Responsive HTML

CSS

Important CSS properties

Box Model

Position

Display and Visibility

z Index

overflow

flex and grid

Layouts

Navigation Bar

Image Gallery

CSS Units

Specificity

when to use !important

Calculations

Transitions and Animations

Background

Variables

Box Sizing

Responsive tips

media queries, images, videos, grids

Cool tips

rounded corners, shadows, padding, mouse hover

Pagination

CSS Selectors

Functions

CSS preprocessors

Tailwind CSS

tailwind css provides utility classes. You can also use tailwind css intellisense extension. When you create nextjs project, tailwind is configured automatically. Additionally you can install plugins like daisyui using below command.

npm i -D daisyui@latest

Then you can update tailwind.config.js to incluse the plugin.

plugins:[require("daisyui")]

Now instead of utility classes, you can use component classes.

1<button class="cursor-pointer rounded bg-blue-400 px-2 py-2 text-center text-sm text-white">
2  Sell
3</button>
4<button class="btn">Sell</button>

But if you want to override css of the component, you can also use utility classes.

<button class="btn w-20">Sell</button>

Bootstrap

JavaScript

JS Objects

Functions

Strings

Arrays

Classes

Modules

callbacks and promises

HTML DOM and Events

Ajax and JSON

Browser Object Model

Web API

JS Graphics

NodeJS API

SEO and Core Web Vitals

SEO

Largest Contentful Paint (LCP)

First Input Delay (FID)

Cumulative Layout Shift (CLS)

API Development

API server using express js

Rapidapi

During development of apps, we often need to consume APIs. But setting up the api server takes time. In such cases, you can use APIs available on Rapid API. e.g. cars by api-ninjas

DB to API using Swagger

Swagger Codegen: Swagger Codegen is an open-source code generation tool that can generate server-side API code from a Swagger or OpenAPI specification. You can create a Swagger or OpenAPI specification for your MongoDB database and use Swagger Codegen to generate the API server code in your preferred programming language, such as Node.js, Java, or Python. The generated code will include the necessary endpoints for CRUD operations on your todo items.

DB to API using Postman

Postman: Postman is a popular API development and testing tool that provides features for auto-generating APIs based on a database schema. With Postman, you can import your MongoDB database schema and use the "Auto-generate API" feature to automatically generate the API endpoints for managing your todo items. Postman allows you to customize the generated API code and export it in different formats.

REST Client in VSCode

• Install the "REST Client" extension in Visual Studio Code.
• Create a new file with a .http or .rest extension.
• Write your POST request in the file using the following syntax:

1
2     POST https://api.example.com/endpoint
3     Content-Type: application/json
4
5     {
6       "key1": "value1",
7       "key2": "value2"
8     }

• Save the file and click the "Send Request" button that appears above the request. Alternatively, you can right-click anywhere in the file and select "Send Request" from the context menu.
• The response will be displayed in the lower part of the editor.

Using Curl

• Open the integrated terminal in Visual Studio Code
• Use the cURL command to send a POST request.

1curl -X POST -H "Content-Type: application/json" -d '{
2       "key1": "value1",
3       "key2": "value2"
4     }' https://api.example.com/endpoint

Thunderclient

When I was using thunder client to access api hosted on localhost, I was getting connection refused error. I fixed this by using different host name. e.g.http://localhost:8000/todos was renamed to http://[::1]:8000/todos [::1] is IP6 equivalent for localhost.

  - Open the extension in Visual Studio Code.
  - Create a new request, specify the method as POST, provide the URL, headers, and request body if needed.
  - Send the request and view the response within the extension's interface.
 

JSONPlaceholder

JSONPlaceholder is a sample JSON-based RESTful API. It provides a set of predefined API endpoints that return placeholder data in JSON format. JSONPlaceholder is specifically designed for front-end developers who need a mock API for testing and prototyping purposes. It mimics a typical RESTful API with endpoints for retrieving, creating, updating, and deleting resources. The data returned by JSONPlaceholder is fixed and does not change.

Postman Mock Server

Postman is a widely-used API development and testing platform. It offers a "Mock Server" feature that allows you to create and run a mock API based on the request and response examples you define. Postman Mock Server supports various request types and is useful for simulating API behavior.

JSON Server

You can use below commands.

1
2      npm i -D json-server --legacy-peer-deps
3
4      npx json-server --watch db.json --port 8000
5      

JSON Server: JSON Server is a simple and lightweight backend server that allows you to quickly set up a RESTful API using JSON as the data format. It is primarily used for development and testing purposes when you need to simulate a backend server without actually implementing a full-fledged server.

With JSON Server, you can create a mock API by defining JSON files that represent your data. These JSON files act as a lightweight database, and JSON Server provides a set of predefined endpoints for performing CRUD (Create, Read, Update, Delete) operations on the data.

Some key features of JSON Server include

1. RESTful API: JSON Server automatically generates RESTful API endpoints based on the data defined in the JSON files. This means you can interact with the API using standard HTTP methods like GET, POST, PUT, PATCH, and DELETE.
2. Data Relationships: JSON Server allows you to define relationships between data entities by using nested JSON structures. This enables you to model more complex data scenarios and handle associations between resources.
3. Filtering, Sorting, and Pagination: JSON Server provides query parameters for filtering, sorting, and pagination. You can easily filter data based on specific criteria, sort data based on specific fields, and paginate results to control the amount of data returned.
4. Custom Routes: JSON Server allows you to define custom routes in addition to the default RESTful endpoints. This gives you the flexibility to create custom API endpoints that perform specific operations or combine data from multiple resources.
5. Middleware Support: JSON Server supports middleware functions that can intercept and modify requests and responses. You can use middleware to add custom logic, authentication, authorization, or any other functionality you need in your API.

JSON Server is a convenient tool for front-end developers who want to rapidly prototype or test their applications without the need for a fully implemented backend. It provides a simple and easy-to-use API for interacting with mock data.

PaaS

A typical web application backend needs to have below features.

• Some kind of Database
• Real-time Subscriptions - publish-subscribe model - Listing to database changes
• Authentication
• Authorization and Access Control
• Storage - Space where objects like pdf, documents, excel, text files, audio, video files can be stored.
• Serverless Functions
• API Generation
• WebSockets - This is required for chat applications
• Scalability and Performance

firbase

aws amplify

appwrite

supabase

Supabase is one of the most popular backend as a service platform. It provides below features.

1. PostgreSQL Database: Supabase uses PostgreSQL as its database engine, which is a powerful and scalable open-source relational database. It allows you to model and store structured data efficiently, supporting complex queries, transactions, and data integrity.
2. Real-time Subscriptions: Supabase provides real-time functionality through PostgreSQL's NOTIFY/LISTEN mechanism. It enables you to listen for changes in the database and receive real-time updates when data changes, allowing you to build reactive and collaborative applications.
3. Authentication: Supabase includes built-in authentication features that support various authentication providers, such as email/password, social logins (Google, GitHub), and third-party providers (Auth0, Apple). It provides user management, JWT-based authentication, and customizable email templates.
4. Authorization and Access Control: Supabase allows you to define fine-grained access control rules to secure your data. You can set row-level security policies, define roles and permissions, and implement attribute-based access control (ABAC) to manage data access based on user roles and conditions.
5. Storage: Supabase provides an object storage feature to store and manage files and assets. It allows you to upload, download, and manage files with support for server-side file processing, authentication-based access control, and CDN integration.
6. Serverless Functions: Supabase offers serverless functions, powered by AWS Lambda, to run custom server-side logic and integrate with other services. You can create and deploy serverless functions in popular programming languages like JavaScript, Python, Go, and more.
7. API Generation: Supabase automatically generates a RESTful API and a client SDK for your PostgreSQL database schema. This allows you to easily interact with your database and perform CRUD (Create, Read, Update, Delete) operations from your client-side applications.
8. WebSockets: Supabase supports WebSocket connections, enabling bidirectional communication between the server and client applications. This allows you to build real-time features, such as chat applications or collaborative editing.
9. Scalability and Performance: Supabase is designed to scale and handle high volumes of traffic. It leverages PostgreSQL's scalability and can be horizontally scaled to accommodate increasing user demand.
10. Open Source and Self-Hosted: Supabase is open-source, allowing you to self-host it on your infrastructure or cloud provider of choice. This gives you control and flexibility over your data and infrastructure.

Authentication

Auth0

Passport.js

next auth

Forms

React Hook Forms

Formik

Database Interaction

Mongodb - Atlas

Sharding in MongoDB: Sharding in MongoDB is a technique used to horizontally partition data across multiple servers or machines called shards. It allows MongoDB to distribute data and workload across a cluster of machines, enabling the database to handle larger data volumes and provide improved scalability and performance.

In a sharded MongoDB deployment, the data is divided into smaller subsets called shards. Each shard is a separate MongoDB instance or replica set that holds a portion of the data. The shards collectively form a distributed database.

Here's how sharding works in MongoDB:

1. Data Distribution: MongoDB divides the data based on a shard key. The shard key is a field or set of fields chosen to determine how the data is distributed across shards. MongoDB uses a hashing algorithm on the shard key to determine which shard should store the data. This ensures an even distribution of data across the shards.
2. Sharding Cluster: A sharding cluster consists of three main components:
   • Shard Servers: These are the MongoDB instances or replica sets that store a portion of the sharded data. Each shard can handle read and write operations for its assigned data subset.
   • Config Servers: Config servers store metadata about the sharded cluster, including the mappings between data and shards. They maintain the cluster's configuration, such as the shard key ranges and metadata for efficient data routing.
   • Query Router (mongos): The query router acts as an interface between the application and the sharded cluster. It receives client requests, determines the appropriate shards to query based on the shard key, and forwards the requests to the respective shards. It also merges results from multiple shards if necessary.
3. Data Operations: When a client application performs a query or write operation, it interacts with the query router (mongos). The query router determines the relevant shards based on the shard key and forwards the operation to the appropriate shards. This allows the workload to be distributed across multiple shards, enabling parallel processing and improved performance.
4. Data Balancing: MongoDB automatically balances the data distribution across shards by moving chunks of data between shards as needed. It monitors data distribution and rebalances data to ensure an even workload distribution and prevent hotspots on specific shards.

Sharding offers several benefits in MongoDB:

• Scalability: By distributing data across multiple shards, MongoDB can handle larger datasets and higher volumes of read and write operations. Sharding allows you to scale horizontally by adding more shards to the cluster as your data and workload grow.
• Performance: Sharding improves performance by enabling parallel processing of queries across multiple shards. It allows the cluster to handle higher concurrency and provides faster response times for read and write operations.
• Fault Tolerance: Sharding enhances fault tolerance by replicating data within shards using replica sets. If a shard or replica set fails, MongoDB can continue serving data from the remaining shards, ensuring high availability.
• Elasticity: With sharding, you can dynamically add or remove shards from the cluster based on the changing needs of your application. This flexibility allows you to scale your MongoDB deployment up or down as required.

Pocketbase

https://pocketbase.io/ provides open source backend database. Download executable and run ./pocketbase serve

Redis

Redis: Redis is an in-memory data store often referred to as a data structure server. It provides fast and efficient storage and retrieval of data structures like strings, lists, sets, hashes, and more. Redis is known for its excellent performance and high throughput, making it a popular choice for caching, real-time applications, session management, and pub/sub messaging systems.

Here are a few scenarios where Redis can be useful along with other db

1. Caching: Redis can be used as a caching layer to improve performance by storing frequently accessed data in memory. This reduces the need to query MongoDB for the same data repeatedly, resulting in faster response times and reduced load on the database.
2. Real-time Data: If your application requires real-time functionality, such as real-time analytics or collaborative features, Redis can be used to store and manage real-time data in memory. It provides efficient data structures and operations for managing real-time updates and enables fast data retrieval and processing.
3. Pub/Sub Messaging: Redis has built-in support for publish/subscribe (pub/sub) messaging, allowing different components of your application to communicate and exchange messages. It can be used to implement real-time notifications, event-driven architectures, or message queues for asynchronous processing.
4. Session Management: Redis provides features like fast key-value storage and automatic expiration, making it suitable for session management. It can store session data in memory, enabling fast retrieval and manipulation of session information.
5. Rate Limiting and Throttling: Redis can be used to implement rate limiting and throttling mechanisms to control access to resources and prevent abuse. It allows you to set and manage limits based on specific criteria, such as requests per second or user.

Prisma

Why we need Prisma:

1. Type-Safe Database Access:

   Prisma provides a type-safe and auto-generated query API. By defining your data models and schema in Prisma's declarative language, you can leverage type checking and autocompletion in your code editor. This helps catch errors and provides a more robust development experience.

2. Database Agnostic:

   While Prisma originated as an ORM for SQL databases, it has expanded its capabilities to support other databases as well. Prisma can work with SQL databases like PostgreSQL, MySQL, and SQLite, as well as NoSQL databases like MongoDB. This flexibility allows you to maintain a consistent and familiar data access layer across different database systems.

3. Automatic Query Generation:

   Prisma generates SQL or database-specific queries based on your high-level, type-safe API calls. This abstraction simplifies complex query construction and reduces the risk of SQL injection vulnerabilities. Prisma takes care of translating your API calls into efficient database queries, optimizing performance and reducing the amount of boilerplate code you need to write.

4. Schema Migrations:

   Prisma provides schema migration functionality, allowing you to manage changes to your database schema over time. You can easily evolve your data models, add or modify fields, and apply these changes to the database with minimal effort. Schema migrations help maintain database integrity and enable smooth deployment and versioning of your application.

5. Data Validation and Sanitization:

   Prisma includes built-in data validation and sanitization features. You can define constraints and rules on your data models, ensuring data integrity and preventing invalid or inconsistent data from being stored in the database. Prisma helps enforce data validation at the database layer, reducing the need for additional validation logic in your application code.

6. Performance and Scalability:

   Prisma optimizes database queries and provides features like query batching and caching. This can improve performance by reducing the number of database round trips and minimizing redundant queries. Prisma also supports database connection pooling, enabling efficient utilization of database connections and scalability as your application grows.

7. Ecosystem and Community:

   Prisma has a vibrant and active community of developers, and it integrates well with other popular frameworks and tools. It offers integrations with GraphQL frameworks like Apollo Server and Nexus, making it easier to build GraphQL APIs. Prisma's ecosystem provides additional plugins, extensions, and tools that can enhance your development experience and productivity.

UI Components

You can use reusable component e.g. CustomButton, Modal etc

Icons

Fontawesome

React Icons

Deployment

Performance Optimization

Caching

Load Balancing

Security

Logging

Analytics

Monitoring

Environment Variables

Adsense

Manual HTML Ad

Copy and paste the ad unit code in between the body tags of your pages

1<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4354027605127587"
2  crossorigin="anonymous"></script>
3<!-- responsive manual ad - square -->
4<ins class="adsbygoogle"
5  style="display:block"
6  data-ad-client="ca-pub-4354027605127587"
7  data-ad-slot="4429111582"
8  data-ad-format="auto"
9  data-full-width-responsive="true"></ins>
10<script>
11  (adsbygoogle = window.adsbygoogle || []).push({});
12</script>
13

Manual AMP Ad

Put the script in head tag and amp-ad element in body.

1<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
2<amp-ad width="100vw" height="320"
3     type="adsense"
4     data-ad-client="ca-pub-4354027605127587"
5     data-ad-slot="4429111582"
6     data-auto-format="rspv"
7     data-full-width="">
8  <div overflow=""></div>
9</amp-ad>
10

Auto Ad

Put this code in head of html

1<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4354027605127587"
2crossorigin="anonymous"></script>

Syntax Highlighter

Below librabries can be used for syntac highlighting.

• JS Highlight
• Prism