Introduction

HTML

HTML Editors

HTML Elements

First HTML Page

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.

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.

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.

Table Elements

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

Meta Element

• <meta>: with attribute charset - UTF-8 is the default charset
• Meta element with Name and Content attributes
  • Meta Name Viewport : Essential for responsive design. It controls the layout on mobile browsers. This article explains why we need to use meta with name viewport!
  • Meta Name Description : Provides a brief description of the page. This is often used by search engines to display a snippet in search results.
  • Meta Name Keywords : Specifies a comma-separated list of keywords relevant to the page. This used to be important for search engine optimization, but is now less so.
  • Meta Name Author : Specifies the name of the author of the document
  • Meta Name Robots : Directs search engines on what to do with the page (index it, follow its links, etc.)
• Meta element with http-equiv and Content attributes
  • Meta http-equiv Content-Type: Defines the MIME type and character set of the document
  • Meta http-equiv default-style: Specifies the name of the preferred stylesheet to use. This article explains why we need to use meta with http equiv default style!
  • Meta http-equiv Refresh: Defines a time interval in seconds for the document to refresh itself, or can be used to redirect to another URL after a specified time.

Embedding CSS and JS

Embedding CSS

• Inline CSS
• Internal CSS
• External CSS

Embedding JS

• Inline JS
• Internal JS
• External JS

Default

async

defer

Images

HTML forms

Canvas and SVG

Audio and Video

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.

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

Calculations

Transitions and Animations

Background

Variables

Box Sizing

Responsive tips

Cool tips

Pagination

CSS Selectors

Functions

CSS preprocessors

Tailwind CSS

npm i -D daisyui@latest

plugins:[require("daisyui")]

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>

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

Bootstrap

JavaScript

JS Objects

• Object literal
• Object Constructor
• Object.Create
• ES6 Class

Functions

• Function with input params and return value
• Anonymous Function
• Arrow Function
• IIFE
• Function with default params
• Function with rest params
• callback function

Strings

Arrays

Classes

• Simple Class
• Inheritance
• Getters and Setters
• Static Methods
• Private Properties

Modules

Callbacks and Promises

• Callbacks
• Promises
• Converting Callbacks to Promises
• Chaining 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

DB to API using Swagger

DB to API using Postman

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:

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

• 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

  - 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

Postman Mock Server

JSON Server

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

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

• 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

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

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

Icons

Fontawesome

React Icons

Deployment

Performance Optimization

Caching

Load Balancing

Security

Logging

Analytics

Monitoring

Environment Variables

Adsense

Manual HTML Ad

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>

Manual AMP Ad

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>

Auto Ad

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

Syntax Highlighter

• JS Highlight
• Prism