Introduction
This is an ultimate web developer course!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 or JS BinHTML 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.
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
The meta element in HTML provides metadata about the HTML document, which can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. Metadata will not be displayed on the page but will be machine parsable. Here is a breakdown of common meta element names and their purposes:<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
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 DemoHTML forms
Demo is at Forms DemoCanvas 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 DemoAudio and Video
Demo is at Audio and Video DemoInteractive 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
Demo is at Favicon DemoEntities, Symbols and Emojis
Demo is at Entities, Symbols and Emojis DemoResponsive HTML
You can look at important tips to design responsive website at responsive websiteCSS
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 !importantCalculations
Transitions and Animations
Background
Variables
Box Sizing
Responsive tips
media queries, images, videos, gridsCool tips
rounded corners, shadows, padding, mouse hoverPagination
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
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
JavaScript Objects can be created using multiple ways.Functions
- Function with input params and return value
- Anonymous Function
- Arrow Function
- IIFE
- Function with default params
- Function with rest params
- callback function
Strings
Strings DemoArrays
Arrays DemoClasses
Modules
This will be demonstrated in vs code as we need multiple files!Callbacks and Promises
JavaScript's asynchronous behavior can be managed using callbacks and promises, two essential concepts for handling operations like network requests, file I/O, or any task that might take time to complete. Here's a concise demonstration of both.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-ninjasDB 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:
- 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.
1POST https://api.example.com/endpoint
2 Content-Type: application/json
3
4 {
5 "key1": "value1",
6 "key2": "value2"
7 }
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.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
- 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.
- 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.
- 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.
- 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.
- 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.- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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:
- 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.
- 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.
- 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.
- 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 serveRedis
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
- 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.
- 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.
- 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.
- 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.
- 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:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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 etcIcons
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 pages1<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
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>
Auto Ad
Put this code in head of html1<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