🖥 Client-Side vs. Server-Side Rendering (CSR vs SSR) ☁️
This is about where your HTML is generated. And where your HTML is generated affects your site's speed and how well Google can find you (SEO).
👉 It's a choice between performance optimization and SEO strategy.
🔹 1. Client-Side Rendering (CSR)
The server sends a blank HTML page and a big JavaScript file. The user’s browser then builds the page.
• Frameworks: React (standard), Vue, Angular.
• Pro: Fast navigation once the app loads.
• Con: Slow initial load; bad for SEO.
🔹 2. Server-Side Rendering (SSR)
The server builds the full HTML page for every request and sends it to the browser.
• Frameworks: Next.js, Nuxt.js, Django, Laravel.
• Pro: Very fast initial load; great for SEO.
• Con: Server works harder; full page refreshes.
🔹 3. The Hybrid Middle (Static Site Generation - SSG)
The HTML is built once during deployment and served to everyone.
• Tools: Gatsby, Next.js, Hugo.
• Best for: Blogs, documentation, marketing sites.
👉 If you need SEO (like a blog or store), go with SSR/SSG. If you are building a private dashboard, CSR is usually fine.
🎯 What you should do
✔️ Understand where the HTML "lives" first
✔️ Identify SEO implications of your choice
✔️ Pick a framework based on performance needs
This is about where your HTML is generated. And where your HTML is generated affects your site's speed and how well Google can find you (SEO).
👉 It's a choice between performance optimization and SEO strategy.
🔹 1. Client-Side Rendering (CSR)
The server sends a blank HTML page and a big JavaScript file. The user’s browser then builds the page.
• Frameworks: React (standard), Vue, Angular.
• Pro: Fast navigation once the app loads.
• Con: Slow initial load; bad for SEO.
🔹 2. Server-Side Rendering (SSR)
The server builds the full HTML page for every request and sends it to the browser.
• Frameworks: Next.js, Nuxt.js, Django, Laravel.
• Pro: Very fast initial load; great for SEO.
• Con: Server works harder; full page refreshes.
🔹 3. The Hybrid Middle (Static Site Generation - SSG)
The HTML is built once during deployment and served to everyone.
• Tools: Gatsby, Next.js, Hugo.
• Best for: Blogs, documentation, marketing sites.
👉 If you need SEO (like a blog or store), go with SSR/SSG. If you are building a private dashboard, CSR is usually fine.
🎯 What you should do
✔️ Understand where the HTML "lives" first
✔️ Identify SEO implications of your choice
✔️ Pick a framework based on performance needs
❤4🤔1
🌐 The Web's Offline Superpower: Service Workers 📡 ( 🧵A thread: 1/3)
Ever wondered how some websites (like Google Docs or Spotify Web) work perfectly even without an internet connection? Or
How they update content in the background? That's the work of Service Workers. They are a powerful, often misunderstood, browser feature that sits between your browser and the network.
👻 1. What IS a Service Worker? (The Invisible Proxy)
A Service Worker is essentially a JavaScript file that runs in the background, separate from your main web page. It acts like a programmable network proxy:
• It can intercept network requests from your page (like fetching an image or a script).
• It can cache assets (HTML, CSS, JS, images) and serve them directly from this cache, making your site load instantly offline or on slow networks.
• It can perform tasks even when your page isn't open (e.g., push notifications, background data synchronization).
Think of it as the website's personal, invisible butler, handling all network requests for your web app.
🔄 2. The Tricky Lifecycle
Service Workers don't just "run." They go through a distinct lifecycle:
1. Registration ⚙️: Your main page tells the browser to "install" the Service Worker file.
2. Installation ✅: The Service Worker downloads, and its
3. Activation 🚀: The
4. Fetching 🌐: Once active, the Service Worker intercepts all future network requests from your controlled pages via its
👉 Crucial: A Service Worker only controls pages that are within its defined
📲Next up: Code Examples & Caching Strategies! (2/3)
Ever wondered how some websites (like Google Docs or Spotify Web) work perfectly even without an internet connection? Or
How they update content in the background? That's the work of Service Workers. They are a powerful, often misunderstood, browser feature that sits between your browser and the network.
👻 1. What IS a Service Worker? (The Invisible Proxy)
A Service Worker is essentially a JavaScript file that runs in the background, separate from your main web page. It acts like a programmable network proxy:
• It can intercept network requests from your page (like fetching an image or a script).
• It can cache assets (HTML, CSS, JS, images) and serve them directly from this cache, making your site load instantly offline or on slow networks.
• It can perform tasks even when your page isn't open (e.g., push notifications, background data synchronization).
Think of it as the website's personal, invisible butler, handling all network requests for your web app.
🔄 2. The Tricky Lifecycle
Service Workers don't just "run." They go through a distinct lifecycle:
1. Registration ⚙️: Your main page tells the browser to "install" the Service Worker file.
2. Installation ✅: The Service Worker downloads, and its
install event fires. This is where you typically tell it to precache all your essential files.3. Activation 🚀: The
activate event fires. Here, the new Service Worker takes over from any old one, and you can use it to clean up old caches.4. Fetching 🌐: Once active, the Service Worker intercepts all future network requests from your controlled pages via its
fetch event.👉 Crucial: A Service Worker only controls pages that are within its defined
scope. For security, it requires HTTPS (except on localhost).📲Next up: Code Examples & Caching Strategies! (2/3)
❤3
🌐 Service Workers ( 🧵A thread: 2/3)
Yesterday, we learned that Service Workers (SWs) are your web app's invisible butler, sitting between your page and the network. Today, let's see how they actually work by registering one and implementing a basic "Cache-First" strategy.
🛠 1. Registering Your Service Worker (index.html)
This is the simple script on your main webpage that tells the browser, "Hey, go find
💾 2. The Service Worker's Logic (sw.js)
This file lives separately and handles the caching and network requests.
💡 The "Cache-First" Strategy Explained
In the
1. When the browser requests a file, the Service Worker first checks its cache.
2. If the file is found in the cache (a "cache hit"), it serves it instantly. This means offline access and blazing-fast loads!
3. If the file isn't in the cache, the Service Worker then goes to the network to fetch it, just like a normal browser request.
📲 Next up: Why they matter & where you've already seen them! (3/3)
Yesterday, we learned that Service Workers (SWs) are your web app's invisible butler, sitting between your page and the network. Today, let's see how they actually work by registering one and implementing a basic "Cache-First" strategy.
🛠 1. Registering Your Service Worker (index.html)
This is the simple script on your main webpage that tells the browser, "Hey, go find
sw.js and install it!" It's crucial for getting the SW lifecycle started.<!-- In your index.html file, preferably at the end of <body> -->
<script>
// Check if Service Workers are supported by the browser
if ('serviceWorker' in navigator) {
// Register our Service Worker after the page has loaded
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js') // Path to your SW file
.then(registration => {
console.log('SW registered successfully:', registration.scope);
})
.catch(error => {
console.error('SW registration failed:', error);
});
});
}
</script>
💾 2. The Service Worker's Logic (sw.js)
This file lives separately and handles the caching and network requests.
// --- sw.js file ---
const CACHE_NAME = 'my-website-v1'; // A unique name for your cache
const ASSETS_TO_CACHE = [ // List of files to precache
'/', // The root path (e.g., index.html)
'/index.html',
'/styles.css',
'/app.js',
'/images/logo.png'
];
// 1. --- The 'install' Event: Pre-caching Core Assets ---
self.addEventListener('install', (event) => {
console.log('Service Worker: Installing...');
event.waitUntil( // Wait until all assets are added to cache
caches.open(CACHE_NAME) // Open our named cache
.then((cache) => {
console.log('Service Worker: Caching essential assets');
return cache.addAll(ASSETS_TO_CACHE); // Add all files from our list
})
);
});
// 2. --- The 'fetch' Event: Cache-First Strategy ---
self.addEventListener('fetch', (event) => {
event.respondWith( // Control how the browser responds to requests
caches.match(event.request) // Check if the requested asset is in our cache
.then((response) => {
// If asset is found in cache, return it immediately
if (response) {
console.log('Service Worker: Serving from cache for', event.request.url);
return response;
}
// If not in cache, go to the network to fetch it
console.log('Service Worker: Fetching from network for', event.request.url);
return fetch(event.request);
})
);
});
// 3. --- The 'activate' Event: Cleaning Up Old Caches ---
self.addEventListener('activate', (event) => {
console.log('Service Worker: Activating...');
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cacheName) => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
// Delete old caches that are no longer in our whitelist
console.log('Service Worker: Deleting old cache:', cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});
💡 The "Cache-First" Strategy Explained
In the
fetch event above, we implemented a "Cache-First" strategy:1. When the browser requests a file, the Service Worker first checks its cache.
2. If the file is found in the cache (a "cache hit"), it serves it instantly. This means offline access and blazing-fast loads!
3. If the file isn't in the cache, the Service Worker then goes to the network to fetch it, just like a normal browser request.
📲 Next up: Why they matter & where you've already seen them! (3/3)
❤3
🌐Service Workers ( 🧵A thread: 3/3)
We’ve covered the theory and looked at the code. But why should you actually care?
Service Workers are the "secret sauce" that turns a simple website into a Progressive Web App (PWA), an app that feels like a native mobile app but runs in a browser.
🚀 1. Famous Places You’ve Used Them
You encounter Service Workers every day without realizing it. Here are some heavy hitters that use them to stay fast and reliable:
• Twitter Lite: Twitter’s PWA uses Service Workers to reduce data usage by up to 70% and load instantly even on slow 2G networks.
• Starbucks: Their web app uses caching to allow customers to browse the menu and add items to their cart completely offline.
• Pinterest: After switching to a PWA powered by Service Workers, Pinterest saw a 40% increase in time spent on the site because it loaded so much faster.
• Spotify & Google Docs: They use background sync and caching to let you listen to music or edit documents when your Wi-Fi drops out.
💡 2. Mind-Blowing Fun Facts
• The "Tab-less" Worker: Service Workers run in a separate thread. This means they can keep working even if you close the browser tab! That’s how Web Push Notifications reach your desktop even when the site isn't open.
• No DOM Access: To keep them fast and secure, Service Workers cannot touch the HTML (the DOM) directly. They have to send a "message" to your main script to make changes.
• The HTTPS Shield: Because Service Workers are so powerful (they can intercept all your data!), browsers only allow them on secure HTTPS sites. This prevents "Man-in-the-Middle" attacks.
• The "P" in PWA: Without a Service Worker, a website is just a website. With one, it becomes a "Progressive" app that can be installed on your phone’s home screen.
🛠 3. Debugging Tip
If you're building a Service Worker and things feel "stuck," open your Browser DevTools and go to the Application tab. Look for "Service Workers" in the sidebar. You can manually unregister them, force them to update, or simulate "Offline mode" to test your cache!
🎯 Series Summary
✔️ Part 1: We Learned they are invisible proxies/butlers for your network.
✔️ Part 2: Saw the code for "Cache-First" strategies to enable offline mode.
✔️ Part 3: Realized they power the world's biggest apps and enable Push Notifications.
What topic should we tackle next? Drop it in the comment
We’ve covered the theory and looked at the code. But why should you actually care?
Service Workers are the "secret sauce" that turns a simple website into a Progressive Web App (PWA), an app that feels like a native mobile app but runs in a browser.
🚀 1. Famous Places You’ve Used Them
You encounter Service Workers every day without realizing it. Here are some heavy hitters that use them to stay fast and reliable:
• Twitter Lite: Twitter’s PWA uses Service Workers to reduce data usage by up to 70% and load instantly even on slow 2G networks.
• Starbucks: Their web app uses caching to allow customers to browse the menu and add items to their cart completely offline.
• Pinterest: After switching to a PWA powered by Service Workers, Pinterest saw a 40% increase in time spent on the site because it loaded so much faster.
• Spotify & Google Docs: They use background sync and caching to let you listen to music or edit documents when your Wi-Fi drops out.
💡 2. Mind-Blowing Fun Facts
• The "Tab-less" Worker: Service Workers run in a separate thread. This means they can keep working even if you close the browser tab! That’s how Web Push Notifications reach your desktop even when the site isn't open.
• No DOM Access: To keep them fast and secure, Service Workers cannot touch the HTML (the DOM) directly. They have to send a "message" to your main script to make changes.
• The HTTPS Shield: Because Service Workers are so powerful (they can intercept all your data!), browsers only allow them on secure HTTPS sites. This prevents "Man-in-the-Middle" attacks.
• The "P" in PWA: Without a Service Worker, a website is just a website. With one, it becomes a "Progressive" app that can be installed on your phone’s home screen.
🛠 3. Debugging Tip
If you're building a Service Worker and things feel "stuck," open your Browser DevTools and go to the Application tab. Look for "Service Workers" in the sidebar. You can manually unregister them, force them to update, or simulate "Offline mode" to test your cache!
🎯 Series Summary
✔️ Part 1: We Learned they are invisible proxies/butlers for your network.
✔️ Part 2: Saw the code for "Cache-First" strategies to enable offline mode.
✔️ Part 3: Realized they power the world's biggest apps and enable Push Notifications.
What topic should we tackle next? Drop it in the comment
❤4
Forwarded from Programming Quiz Channel
Which programming paradigm focuses on "what to do" rather than "how yo do"?
Anonymous Quiz
11%
Imperative
36%
Procedural
28%
Declarative
25%
Object-oriented
👍3
🚀 JWT vs Sessions
Both are used for user authentication.
But they handle user state differently.
1️⃣ Session-Based Authentication 🗂️
Server stores session data.
➤ How: Login → Server creates session ID → Stored in cookie
➤ Server checks session on each request
➤ Wins: Easy to invalidate
➤ Risk: Requires server storage
Best for:
Traditional web apps
2️⃣ JWT (JSON Web Token) 🔐
Client stores authentication token.
➤ How: Login → Server sends JWT → Client stores token
➤ Token verified on each request
➤ Wins: Stateless, scalable
➤ Risk: Harder to revoke before expiry
Best for:
APIs, microservices, mobile apps
💡 Key Difference
Session → Stateful (server stores data)
JWT → Stateless (client stores token)
Sessions = Easier control
JWT = Better scalability
Both are used for user authentication.
But they handle user state differently.
1️⃣ Session-Based Authentication 🗂️
Server stores session data.
➤ How: Login → Server creates session ID → Stored in cookie
➤ Server checks session on each request
➤ Wins: Easy to invalidate
➤ Risk: Requires server storage
Best for:
Traditional web apps
2️⃣ JWT (JSON Web Token) 🔐
Client stores authentication token.
➤ How: Login → Server sends JWT → Client stores token
➤ Token verified on each request
➤ Wins: Stateless, scalable
➤ Risk: Harder to revoke before expiry
Best for:
APIs, microservices, mobile apps
💡 Key Difference
Session → Stateful (server stores data)
JWT → Stateless (client stores token)
Sessions = Easier control
JWT = Better scalability
👍3
Forwarded from Programming Quiz Channel
Which database concept ensures no duplicate rows?
Anonymous Quiz
15%
Foreign key
75%
Primary key
10%
Index
0%
View
❤2
💎 5 Rare "Hidden Gems" for Web Developers
1️⃣ Utopia fyi
It generates fluid CSS scales for typography and spacing so your design automatically adjusts to any screen size without manual media queries.
🔗 https://utopia.fyi/
2️⃣ Shadow Palette
It generates multi-layered CSS box-shadow code to create realistic depth and professional-looking 3D effects on your UI elements.
🔗 https://www.joshwcomeau.com/shadow-palette/
3️⃣ JSON Visio
It converts raw JSON data into interactive diagrams and flowcharts to help you map out and understand complex API responses.
🔗 https://jsonvisio.com/
4️⃣ Service Workies
It uses a game to teach how to implement service workers, offline modes, and advanced caching strategies in web applications.
🔗 https://serviceworkies.com/
5️⃣ Browser Diet
It provides a definitive list of specific performance practices to reduce page weight and speed up the execution of HTML, CSS, and JavaScript.
🔗 https://browserdiet.com/
1️⃣ Utopia fyi
It generates fluid CSS scales for typography and spacing so your design automatically adjusts to any screen size without manual media queries.
🔗 https://utopia.fyi/
2️⃣ Shadow Palette
It generates multi-layered CSS box-shadow code to create realistic depth and professional-looking 3D effects on your UI elements.
🔗 https://www.joshwcomeau.com/shadow-palette/
3️⃣ JSON Visio
It converts raw JSON data into interactive diagrams and flowcharts to help you map out and understand complex API responses.
🔗 https://jsonvisio.com/
4️⃣ Service Workies
It uses a game to teach how to implement service workers, offline modes, and advanced caching strategies in web applications.
🔗 https://serviceworkies.com/
5️⃣ Browser Diet
It provides a definitive list of specific performance practices to reduce page weight and speed up the execution of HTML, CSS, and JavaScript.
🔗 https://browserdiet.com/
❤1🔥1
▎Common Web Development Terms
1. Front-end Framework: A software framework that simplifies the development of the user interface of a web application. Examples include Vue.js, Ember.js, and Bootstrap.
2. Backend Framework: A framework that provides tools and libraries for developing the server-side logic of web applications. Examples include Express.js, Flask, and Spring.
3. Microservices: An architectural style that structures an application as a collection of loosely coupled services, each responsible for a specific business function.
4. Containerization: The practice of packaging an application and its dependencies into a container, allowing it to run consistently across different computing environments. Docker is a popular tool for containerization.
5. REST (Representational State Transfer): An architectural style for designing networked applications that relies on stateless communication and standard HTTP methods for CRUD operations.
6. GraphQL: A query language for APIs and a runtime for executing those queries with existing data. It allows clients to request only the data they need.
7. State Management: The handling of the state of an application, particularly in single-page applications (SPAs). Libraries like Redux and MobX are commonly used for state management.
8. Build Tools: Software tools that automate the process of compiling, bundling, and optimizing code for deployment. Examples include Webpack, Gulp, and Grunt.
9. Continuous Integration/Continuous Deployment (CI/CD): A set of practices that enable developers to integrate code changes frequently and deploy them automatically to production environments.
10. Cross-Origin Resource Sharing (CORS): A security feature implemented in web browsers that allows or restricts resources requested from another domain outside the domain from which the first resource was served.
11. Single Page Application (SPA): A web application that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server.
12. Progressive Enhancement: A web development strategy that emphasizes core webpage content first, ensuring it is accessible to all users before enhancing it with advanced features for those with better bandwidth or more advanced browser software.
13. Serverless Architecture: A cloud computing execution model where the cloud provider dynamically manages the allocation of machine resources, allowing developers to focus on writing code without worrying about server management.
14. WebAssembly (Wasm): A binary instruction format designed as a target for high-level languages like C, C++, and Rust, enabling high-performance applications on the web.
15. Content Delivery Network (CDN): A distributed network of servers that delivers web content to users based on their geographic location, improving loading times and availability.
16. A/B Testing: A method of comparing two versions of a webpage or app against each other to determine which one performs better in terms of user engagement or conversion rates.
17. Progressive Web App (PWA): A type of web application that uses modern web capabilities to deliver an app-like experience to users, including offline access and push notifications.
18. WebSocket: A communication protocol that provides full-duplex communication channels over a single TCP connection, allowing real-time data transfer between clients and servers.
19. Template Engine: A tool that enables developers to generate HTML dynamically by combining templates with data sources. Examples include Handlebars, EJS, and Pug.
20. DevOps: A set of practices that combines software development (Dev) and IT operations (Ops) to shorten the development lifecycle and provide continuous delivery with high software quality.
1. Front-end Framework: A software framework that simplifies the development of the user interface of a web application. Examples include Vue.js, Ember.js, and Bootstrap.
2. Backend Framework: A framework that provides tools and libraries for developing the server-side logic of web applications. Examples include Express.js, Flask, and Spring.
3. Microservices: An architectural style that structures an application as a collection of loosely coupled services, each responsible for a specific business function.
4. Containerization: The practice of packaging an application and its dependencies into a container, allowing it to run consistently across different computing environments. Docker is a popular tool for containerization.
5. REST (Representational State Transfer): An architectural style for designing networked applications that relies on stateless communication and standard HTTP methods for CRUD operations.
6. GraphQL: A query language for APIs and a runtime for executing those queries with existing data. It allows clients to request only the data they need.
7. State Management: The handling of the state of an application, particularly in single-page applications (SPAs). Libraries like Redux and MobX are commonly used for state management.
8. Build Tools: Software tools that automate the process of compiling, bundling, and optimizing code for deployment. Examples include Webpack, Gulp, and Grunt.
9. Continuous Integration/Continuous Deployment (CI/CD): A set of practices that enable developers to integrate code changes frequently and deploy them automatically to production environments.
10. Cross-Origin Resource Sharing (CORS): A security feature implemented in web browsers that allows or restricts resources requested from another domain outside the domain from which the first resource was served.
11. Single Page Application (SPA): A web application that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server.
12. Progressive Enhancement: A web development strategy that emphasizes core webpage content first, ensuring it is accessible to all users before enhancing it with advanced features for those with better bandwidth or more advanced browser software.
13. Serverless Architecture: A cloud computing execution model where the cloud provider dynamically manages the allocation of machine resources, allowing developers to focus on writing code without worrying about server management.
14. WebAssembly (Wasm): A binary instruction format designed as a target for high-level languages like C, C++, and Rust, enabling high-performance applications on the web.
15. Content Delivery Network (CDN): A distributed network of servers that delivers web content to users based on their geographic location, improving loading times and availability.
16. A/B Testing: A method of comparing two versions of a webpage or app against each other to determine which one performs better in terms of user engagement or conversion rates.
17. Progressive Web App (PWA): A type of web application that uses modern web capabilities to deliver an app-like experience to users, including offline access and push notifications.
18. WebSocket: A communication protocol that provides full-duplex communication channels over a single TCP connection, allowing real-time data transfer between clients and servers.
19. Template Engine: A tool that enables developers to generate HTML dynamically by combining templates with data sources. Examples include Handlebars, EJS, and Pug.
20. DevOps: A set of practices that combines software development (Dev) and IT operations (Ops) to shorten the development lifecycle and provide continuous delivery with high software quality.
❤1
Forwarded from Programming Quiz Channel
Which famous language has no keywords reserved for concurrency?
Anonymous Quiz
35%
Go
16%
Java
24%
JavaScript
24%
Python
Ransomware as a Service (RaaS)
▎What is Ransomware?
• Ransomware is a type of malicious software that locks your files or computer, making them unusable until you pay a ransom (a sum of money) to get access back.
▎What is Ransomware as a Service (RaaS)?
• Ransomware as a Service is like renting a tool for cybercrime. It allows people who might not have the technical skills to create their own ransomware to use someone else's ransomware tools to launch attacks.
▎How RaaS Works
1. Subscription: Just like subscribing to a streaming service, someone can pay to use ransomware tools. They might pay a monthly fee or share part of the ransom they collect.
2. Easy to Use: RaaS providers often make their tools user-friendly, so even someone with basic computer skills can set up an attack.
3. Support and Updates: The people who create these tools usually provide help and regularly update the software to keep it effective against security measures.
4. Affiliate Programs: Some RaaS setups allow users to partner up. The creator gets a cut of the ransom money from the attacks carried out by their partners.
▎Steps in a Ransomware Attack
1. Finding Targets: The attacker picks a target, which could be a business or individual, based on how vulnerable they might be.
2. Launching the Attack: They send out the ransomware through methods like phishing emails (tricking someone into clicking a bad link) or exploiting weaknesses in software.
3. Locking Files: Once the ransomware is on the target's computer, it locks their files and displays a message demanding payment for unlocking them.
4. Payment: If the victim pays the ransom (usually in cryptocurrency), they may get the key to unlock their files. but there’s no guarantee.
▎Why RaaS is a Big Deal
• More Attacks: Because it’s easier for anyone to use, there are more ransomware attacks happening now than ever before.
• Financial Damage: Victims can lose a lot of money, not just from paying ransoms but also from costs related to recovery and downtime.
• Data Theft: Often, attackers steal sensitive information along with locking files, leading to even more problems for victims.
▎How to Protect Against Ransomware
1. Back Up Your Data: Regularly save copies of important files somewhere safe, like an external hard drive or cloud storage. This way, you can recover your data without paying a ransom.
2. Educate Yourself and Others: Learn about common scams and teach friends or family to recognize suspicious emails and links.
3. Use Security Software: Install antivirus programs and firewalls to help block ransomware before it can do any harm.
4. Have a Plan: Create a response plan for what to do if you ever get hit by ransomware. Knowing what steps to take can help minimize damage.
5. Keep Everything Updated: Regularly update your software and systems to fix security holes that ransomware might exploit.
▎In Summary
Ransomware as a Service makes it easier for anyone to launch ransomware attacks, which increases the risk for all of us. By understanding how it works and taking steps to protect ourselves, we can reduce our chances of becoming victims.
▎What is Ransomware?
• Ransomware is a type of malicious software that locks your files or computer, making them unusable until you pay a ransom (a sum of money) to get access back.
▎What is Ransomware as a Service (RaaS)?
• Ransomware as a Service is like renting a tool for cybercrime. It allows people who might not have the technical skills to create their own ransomware to use someone else's ransomware tools to launch attacks.
▎How RaaS Works
1. Subscription: Just like subscribing to a streaming service, someone can pay to use ransomware tools. They might pay a monthly fee or share part of the ransom they collect.
2. Easy to Use: RaaS providers often make their tools user-friendly, so even someone with basic computer skills can set up an attack.
3. Support and Updates: The people who create these tools usually provide help and regularly update the software to keep it effective against security measures.
4. Affiliate Programs: Some RaaS setups allow users to partner up. The creator gets a cut of the ransom money from the attacks carried out by their partners.
▎Steps in a Ransomware Attack
1. Finding Targets: The attacker picks a target, which could be a business or individual, based on how vulnerable they might be.
2. Launching the Attack: They send out the ransomware through methods like phishing emails (tricking someone into clicking a bad link) or exploiting weaknesses in software.
3. Locking Files: Once the ransomware is on the target's computer, it locks their files and displays a message demanding payment for unlocking them.
4. Payment: If the victim pays the ransom (usually in cryptocurrency), they may get the key to unlock their files. but there’s no guarantee.
▎Why RaaS is a Big Deal
• More Attacks: Because it’s easier for anyone to use, there are more ransomware attacks happening now than ever before.
• Financial Damage: Victims can lose a lot of money, not just from paying ransoms but also from costs related to recovery and downtime.
• Data Theft: Often, attackers steal sensitive information along with locking files, leading to even more problems for victims.
▎How to Protect Against Ransomware
1. Back Up Your Data: Regularly save copies of important files somewhere safe, like an external hard drive or cloud storage. This way, you can recover your data without paying a ransom.
2. Educate Yourself and Others: Learn about common scams and teach friends or family to recognize suspicious emails and links.
3. Use Security Software: Install antivirus programs and firewalls to help block ransomware before it can do any harm.
4. Have a Plan: Create a response plan for what to do if you ever get hit by ransomware. Knowing what steps to take can help minimize damage.
5. Keep Everything Updated: Regularly update your software and systems to fix security holes that ransomware might exploit.
▎In Summary
Ransomware as a Service makes it easier for anyone to launch ransomware attacks, which increases the risk for all of us. By understanding how it works and taking steps to protect ourselves, we can reduce our chances of becoming victims.
❤3
We’re live 🚀
After 4 years of work, I finally launched:
👉 learndevs.com
A lot of you contributed by writing code or adding courses and knowledge along the way.
This is as much yours as it is mine 🙌
And I’m already working on:
• Personalized roadmaps
• Live chat
• Better job search & placement
Try it and please tell me:
What would you add next?
Reminder that if you want early access to new features, Join our beta testers group. Looking for people who will explore, break things, and share honest feedback.
After 4 years of work, I finally launched:
👉 learndevs.com
Goal: one place for everything a developer needs (free courses, tech news, job offers, manually written blogs. best github repos etc)
A lot of you contributed by writing code or adding courses and knowledge along the way.
This is as much yours as it is mine 🙌
And I’m already working on:
• Personalized roadmaps
• Live chat
• Better job search & placement
Try it and please tell me:
What would you add next?
Reminder that if you want early access to new features, Join our beta testers group. Looking for people who will explore, break things, and share honest feedback.
❤3
🔑 Session-based vs. Token-based Auth (JWT) 🔒
You log into a website. How does that site remember who you are on the next page? Or even tomorrow? This isn't magic. It's done through Authentication Mechanisms, primarily Session-based or Token-based (JWT).
🍪 1. Traditional: Session-based Authentication
This is the older, but still common, way. Think of it like a coat check.
• How it Works:
1. You log in with username/password.
2. The server creates a "session" for you (a record stored in its memory or database).
3. The server sends you back a Session ID (a small, unique string) in a cookie.
4. For every subsequent request, your browser sends that Session ID cookie back to the server.
5. The server looks up the Session ID in its storage to know who you are.
🎫 2. Modern: Token-based Authentication (JWT)
This is the approach favored by modern APIs and single-page applications (SPAs). Think of it like a concert ticket with your info embedded.
• How it Works:
1. You log in with username/password.
2. The server generates a Token (often a JSON Web Token - JWT). This token contains encrypted user data (like user ID, roles, expiry time) but the server does not store it.
3. The server sends this JWT back to your client (browser/mobile app).
4. Your client stores the JWT (e.g., in Local Storage, memory, or a secure cookie).
5. For every subsequent request, your client sends the JWT in an
6. The server decodes and verifies the JWT using a secret key. If valid, it trusts the token's claims about who you are.
🎯 Today's Goal (What you should do)
✔️ Understand that "Session-based" means the server stores your login status.
✔️ Grasp that "Token-based" means the client sends a verifiable token, and the server checks it on the fly.
✔️ Know when to choose each for your application architecture.
You log into a website. How does that site remember who you are on the next page? Or even tomorrow? This isn't magic. It's done through Authentication Mechanisms, primarily Session-based or Token-based (JWT).
🍪 1. Traditional: Session-based Authentication
This is the older, but still common, way. Think of it like a coat check.
• How it Works:
1. You log in with username/password.
2. The server creates a "session" for you (a record stored in its memory or database).
3. The server sends you back a Session ID (a small, unique string) in a cookie.
4. For every subsequent request, your browser sends that Session ID cookie back to the server.
5. The server looks up the Session ID in its storage to know who you are.
🎫 2. Modern: Token-based Authentication (JWT)
This is the approach favored by modern APIs and single-page applications (SPAs). Think of it like a concert ticket with your info embedded.
• How it Works:
1. You log in with username/password.
2. The server generates a Token (often a JSON Web Token - JWT). This token contains encrypted user data (like user ID, roles, expiry time) but the server does not store it.
3. The server sends this JWT back to your client (browser/mobile app).
4. Your client stores the JWT (e.g., in Local Storage, memory, or a secure cookie).
5. For every subsequent request, your client sends the JWT in an
Authorization header (Bearer YOUR_JWT_TOKEN).6. The server decodes and verifies the JWT using a secret key. If valid, it trusts the token's claims about who you are.
🎯 Today's Goal (What you should do)
✔️ Understand that "Session-based" means the server stores your login status.
✔️ Grasp that "Token-based" means the client sends a verifiable token, and the server checks it on the fly.
✔️ Know when to choose each for your application architecture.
❤4
Forwarded from Cool GitHub repositories
OpenHands
An AI coding agent that can actually open your repo, run code, fix bugs, and complete tasks like a real developer. Useful if you want to experiment with autonomous coding workflows beyond just chat. It has a massive community constantly maintaining it.
Creator: All-Hands-AI
Stars ⭐️: 72,000
Forked by: 9,000
Github Repo:
https://github.com/All-Hands-AI/OpenHands
#AI #Agents #DeveloperTools
➖➖➖➖➖➖➖➖➖➖➖➖➖
Join @github_repositories_bds for more cool repositories. This channel belongs to @bigdataspecialist group
An AI coding agent that can actually open your repo, run code, fix bugs, and complete tasks like a real developer. Useful if you want to experiment with autonomous coding workflows beyond just chat. It has a massive community constantly maintaining it.
Creator: All-Hands-AI
Stars ⭐️: 72,000
Forked by: 9,000
Github Repo:
https://github.com/All-Hands-AI/OpenHands
#AI #Agents #DeveloperTools
➖➖➖➖➖➖➖➖➖➖➖➖➖
Join @github_repositories_bds for more cool repositories. This channel belongs to @bigdataspecialist group
GitHub
GitHub - OpenHands/OpenHands: 🙌 OpenHands: AI-Driven Development
🙌 OpenHands: AI-Driven Development. Contribute to OpenHands/OpenHands development by creating an account on GitHub.
❤3
🎨 The CSS Box Model (Layout Foundation) 📦
Every single element on a webpage whether it's a button, an image, or a paragraph is actually a rectangular box. Understanding how these boxes are sized is the secret to mastering CSS layouts.
👉 This is very essential for fixing "broken" layouts and getting pixel-perfect designs.
🔹 1. The Four Layers of the Box
Think of an element like a framed picture. The Box Model consists of four parts, from the inside out:
1. Content: The actual text or image (the "picture").
2. Padding: The clear space inside the border (the "matting" around the picture).
3. Border: The line that goes around the padding and content (the "frame").
4. Margin: The clear space outside the border (the space between this frame and others on the wall).
🔹 2. The "Hidden" Layout Killer
By default, when you set
This is usually why layouts break or "drop" to the next line unexpectedly!
🔹 3. The Solution:
This is the most important line of CSS you will ever learn. It tells the browser: "When I say 200px wide, I want the entire box (content + padding + border) to be 200px."
Example:
🔹 4. Margin vs. Padding: Which to use?
• Use Padding: To create space inside an element (e.g., giving text some room inside a button).
• Use Margin: To create space between different elements (e.g., pushing two buttons away from each other).
🔹 5. Margin Collapsing
A weird CSS behavior: when two vertical margins meet (like the bottom of one paragraph and the top of another), they don't add up. Instead, the smaller one "collapses" into the larger one.
🎯 What you should do
✔️ Visualize every element as 4 distinct layers
✔️ Understand how padding and borders affect total size
✔️ Use
✔️ Distinguish between internal space (Padding) and external space (Margin)
Every single element on a webpage whether it's a button, an image, or a paragraph is actually a rectangular box. Understanding how these boxes are sized is the secret to mastering CSS layouts.
👉 This is very essential for fixing "broken" layouts and getting pixel-perfect designs.
🔹 1. The Four Layers of the Box
Think of an element like a framed picture. The Box Model consists of four parts, from the inside out:
1. Content: The actual text or image (the "picture").
2. Padding: The clear space inside the border (the "matting" around the picture).
3. Border: The line that goes around the padding and content (the "frame").
4. Margin: The clear space outside the border (the space between this frame and others on the wall).
🔹 2. The "Hidden" Layout Killer
By default, when you set
width: 200px in CSS, that width only applies to the Content. If you add 20px of padding and a 5px border, your element actually becomes 250px wide (200 + 20+20 + 5+5). This is usually why layouts break or "drop" to the next line unexpectedly!
🔹 3. The Solution:
box-sizing: border-boxThis is the most important line of CSS you will ever learn. It tells the browser: "When I say 200px wide, I want the entire box (content + padding + border) to be 200px."
Example:
/* Apply this to everything! */
• {
box-sizing: border-box;
}
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
/* Total width remains 200px! ✅ */
}
🔹 4. Margin vs. Padding: Which to use?
• Use Padding: To create space inside an element (e.g., giving text some room inside a button).
• Use Margin: To create space between different elements (e.g., pushing two buttons away from each other).
🔹 5. Margin Collapsing
A weird CSS behavior: when two vertical margins meet (like the bottom of one paragraph and the top of another), they don't add up. Instead, the smaller one "collapses" into the larger one.
🎯 What you should do
✔️ Visualize every element as 4 distinct layers
✔️ Understand how padding and borders affect total size
✔️ Use
box-sizing: border-box to simplify your math✔️ Distinguish between internal space (Padding) and external space (Margin)
❤2🔥1
▎Introduction to Accessibility
Did you know that approximately 15% of the global population lives with some form of disability? That's over a billion people who may struggle to access content that many of us take for granted.
Creating accessible websites isn't just a legal requirement; it's a moral imperative. By ensuring that everyone can access your content, you're fostering inclusivity and expanding your audience.
▎Understanding WCAG
What is WCAG?
The Web Content Accessibility Guidelines (WCAG) are a set of recommendations designed to make web content more accessible, particularly for people with disabilities.
Levels of Conformance:
• Level A: Minimum level; essential requirements.
• Level AA: Deals with the biggest barriers; most organizations aim for this level.
• Level AAA: Highest level; not always feasible for all content.
▎Key WCAG Principles
POUR Model:
• Perceivable: Information must be presented in ways that users can perceive (e.g., text alternatives for images).
• Operable: Users must be able to operate the interface (e.g., keyboard navigation).
• Understandable: Information and operation must be understandable (e.g., clear language).
• Robust: Content must be robust enough to work with current and future user agents (e.g., browsers, assistive technologies).
▎Real-World Examples
Before and After:
Example: Show a website lacking alt text on images vs. the same site with descriptive alt text.
Demo: Use a screen reader to demonstrate how an inaccessible site can frustrate users.
User Testimonials: "I often feel left out when websites don’t accommodate my screen reader. When they do, it’s like a door has been opened."
▎Practical Techniques
Semantic HTML:
Use elements like
Example code snippet:
ARIA Roles:
Explain how ARIA can enhance accessibility when semantic HTML is insufficient.
Example:
Keyboard Navigation:
Discuss the importance of using
▎Tools and Resources
Accessibility Testing Tools:
• WAVE: A tool that provides visual feedback about the accessibility of your web content.
• Axe: A browser extension that allows you to run accessibility tests directly in your browser.
Online Resources:
• WebAIM: Offers articles, tools, and training on web accessibility.
• W3C: The official WCAG quick reference guide.
Today, we learned that making our websites accessible is not only about compliance but about enhancing user experience for everyone. I encourage each of you to evaluate your websites for accessibility. Small changes can make a big difference in reaching a wider audience.
Did you know that approximately 15% of the global population lives with some form of disability? That's over a billion people who may struggle to access content that many of us take for granted.
Creating accessible websites isn't just a legal requirement; it's a moral imperative. By ensuring that everyone can access your content, you're fostering inclusivity and expanding your audience.
▎Understanding WCAG
What is WCAG?
The Web Content Accessibility Guidelines (WCAG) are a set of recommendations designed to make web content more accessible, particularly for people with disabilities.
Levels of Conformance:
• Level A: Minimum level; essential requirements.
• Level AA: Deals with the biggest barriers; most organizations aim for this level.
• Level AAA: Highest level; not always feasible for all content.
▎Key WCAG Principles
POUR Model:
• Perceivable: Information must be presented in ways that users can perceive (e.g., text alternatives for images).
• Operable: Users must be able to operate the interface (e.g., keyboard navigation).
• Understandable: Information and operation must be understandable (e.g., clear language).
• Robust: Content must be robust enough to work with current and future user agents (e.g., browsers, assistive technologies).
▎Real-World Examples
Before and After:
Example: Show a website lacking alt text on images vs. the same site with descriptive alt text.
Demo: Use a screen reader to demonstrate how an inaccessible site can frustrate users.
User Testimonials: "I often feel left out when websites don’t accommodate my screen reader. When they do, it’s like a door has been opened."
▎Practical Techniques
Semantic HTML:
Use elements like
<article>, <section>, and <footer> to create a meaningful structure. Example code snippet:
<header>
<h1>Welcome to Our Accessible Site</h1>
</header>
<nav>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>
ARIA Roles:
Explain how ARIA can enhance accessibility when semantic HTML is insufficient.
Example:
<div role="alert" aria-live="assertive">New message received!</div>
Keyboard Navigation:
Discuss the importance of using
tabindex and ensuring all interactive elements are focusable.▎Tools and Resources
Accessibility Testing Tools:
• WAVE: A tool that provides visual feedback about the accessibility of your web content.
• Axe: A browser extension that allows you to run accessibility tests directly in your browser.
Online Resources:
• WebAIM: Offers articles, tools, and training on web accessibility.
• W3C: The official WCAG quick reference guide.
Today, we learned that making our websites accessible is not only about compliance but about enhancing user experience for everyone. I encourage each of you to evaluate your websites for accessibility. Small changes can make a big difference in reaching a wider audience.
❤3👍1
🚀 Zero to Hire: The 90-Day Web Dev Blueprint
If you want to master Web Development in 3 months, you need a high-intensity plan. Here is the exact path to go from zero to building production-ready apps.
🏗 PHASE 1: The UI Architect (Month 1)
• Week 1: The Skeleton & Skin
• HTML5 (Semantic tags, Forms, SEO basics)
• CSS3 (Box Model, Typography, Flexbox)
• Outcome: Build a 3-page static landing page.
• Week 2: Responsive Mastery
• CSS Grid & Advanced Layouts
• Mobile-first design & Media Queries
• Outcome: Make your landing page look perfect on a smartphone.
• Week 3: The Brain (JS Basics)
• ES6+ Syntax, Loops, and Logic
• Functions & Scoping
• Outcome: Build a functional calculator using pure JavaScript.
• Week 4: The Interactive Web
• DOM Manipulation & Event Listeners
• Form validation and dynamic UI updates
• Outcome: Create an interactive To-Do list with local storage.
⚙️ PHASE 2: The Full-Stack Engine (Month 2)
• Week 5: Data Flows (Advanced JS)
• Async/Await & Promises
• Working with Fetch API and JSON
• Outcome: Build a Weather App that pulls real-time data.
• Week 6: The Modern Frontend (React)
• Components, Props, and Hooks (
• Folder structure & JSX
• Outcome: Rebuild your UI using a component-based architecture.
• Week 7: The Server (Node.js & Express)
• Creating REST APIs & Routing
• Middleware & Request/Response handling
• Outcome: Build your first backend server to handle user requests.
• Week 8: The Memory (Databases)
• SQL (PostgreSQL) or NoSQL (MongoDB)
• Connecting the Backend to the DB
• Outcome: A system that actually saves and retrieves user data.
💼 PHASE 3: The Professional Portfolio (Month 3)
• Week 9: Connecting the Dots
• Integrating Frontend with Backend
• JWT Authentication & User Login
• Outcome: A secure Full-Stack "Member-Only" application.
• Week 10: The Capstone Project
• Build a real-world project (E-commerce, Social Feed, or Job Board)
• Deployment (Vercel, Render, or Netlify)
• Outcome: A live link you can send to employers.
• Week 11: The Technical Interview
• Practice DSA (Data Structures & Algorithms) basics
• Mock interviews & Whiteboard coding
• Outcome: Explaining your "Why" behind your code.
• Week 12: Launch & Apply
• Optimizing your GitHub & LinkedIn
• Writing a Dev-focused Resume
• Outcome: 5–10 quality applications sent daily.
🛠 Essential Tools:
• Practice: Frontend Mentor (Designs), LeetCode (Logic), Roadmap.sh (Reference)
• Assets: Storyset (Icons), Unsplash (Images), Google Fonts
The secret? Consistency > Intensity. Don't just watch, CODE. 👨💻
If you want to master Web Development in 3 months, you need a high-intensity plan. Here is the exact path to go from zero to building production-ready apps.
🏗 PHASE 1: The UI Architect (Month 1)
• Week 1: The Skeleton & Skin
• HTML5 (Semantic tags, Forms, SEO basics)
• CSS3 (Box Model, Typography, Flexbox)
• Outcome: Build a 3-page static landing page.
• Week 2: Responsive Mastery
• CSS Grid & Advanced Layouts
• Mobile-first design & Media Queries
• Outcome: Make your landing page look perfect on a smartphone.
• Week 3: The Brain (JS Basics)
• ES6+ Syntax, Loops, and Logic
• Functions & Scoping
• Outcome: Build a functional calculator using pure JavaScript.
• Week 4: The Interactive Web
• DOM Manipulation & Event Listeners
• Form validation and dynamic UI updates
• Outcome: Create an interactive To-Do list with local storage.
⚙️ PHASE 2: The Full-Stack Engine (Month 2)
• Week 5: Data Flows (Advanced JS)
• Async/Await & Promises
• Working with Fetch API and JSON
• Outcome: Build a Weather App that pulls real-time data.
• Week 6: The Modern Frontend (React)
• Components, Props, and Hooks (
useState, useEffect)• Folder structure & JSX
• Outcome: Rebuild your UI using a component-based architecture.
• Week 7: The Server (Node.js & Express)
• Creating REST APIs & Routing
• Middleware & Request/Response handling
• Outcome: Build your first backend server to handle user requests.
• Week 8: The Memory (Databases)
• SQL (PostgreSQL) or NoSQL (MongoDB)
• Connecting the Backend to the DB
• Outcome: A system that actually saves and retrieves user data.
💼 PHASE 3: The Professional Portfolio (Month 3)
• Week 9: Connecting the Dots
• Integrating Frontend with Backend
• JWT Authentication & User Login
• Outcome: A secure Full-Stack "Member-Only" application.
• Week 10: The Capstone Project
• Build a real-world project (E-commerce, Social Feed, or Job Board)
• Deployment (Vercel, Render, or Netlify)
• Outcome: A live link you can send to employers.
• Week 11: The Technical Interview
• Practice DSA (Data Structures & Algorithms) basics
• Mock interviews & Whiteboard coding
• Outcome: Explaining your "Why" behind your code.
• Week 12: Launch & Apply
• Optimizing your GitHub & LinkedIn
• Writing a Dev-focused Resume
• Outcome: 5–10 quality applications sent daily.
🛠 Essential Tools:
• Practice: Frontend Mentor (Designs), LeetCode (Logic), Roadmap.sh (Reference)
• Assets: Storyset (Icons), Unsplash (Images), Google Fonts
The secret? Consistency > Intensity. Don't just watch, CODE. 👨💻
❤4
Forwarded from Programming Quiz Channel
Which JavaScript keyword creates a block-scoped variable?
Anonymous Quiz
30%
var
44%
let
15%
define
11%
static
🌐 Semantic HTML (The Meaning of Code) 🏗
Many beginners build websites using only
🔹 1. What is Semantic HTML?
A semantic element clearly describes its meaning to both the browser and the developer. Instead of just saying "this is a box," it says "this is a navigation menu" or "this is a footer."
• Non-semantic:
• Semantic:
🔹 2. Why it Matters #1: SEO (Search Engines)
Google’s "spiders" crawl your site to understand what it’s about. If everything is in a
🔹 3. Why it Matters #2: Accessibility (a11y)
Millions of people use Screen Readers to browse the web. A screen reader can "jump" directly to a
🔹 4. Common Semantic Tags to Use Now
•
•
•
•
•
•
🔹 5. Semantic vs. Non-Semantic (The Comparison)
Bad Code (The "Div Soup"):
Good Code (Semantic):
🔹 6. Buttons vs. Anchors (
This is the most common mistake!
• Use
• Use
👉 Writing Semantic HTML doesn't change how the site looks, but it changes how the world experiences it!
🎯 What you should do
✔️ Stop using
✔️ Use the correct tags to help Google rank your site
✔️ Make your website usable for people with disabilities
✔️ Choose between
Many beginners build websites using only
<div> and <span> tags. While this perfectly "works," it creates a website that is hard for search engines to read and impossible for visually impaired users to navigate. 🔹 1. What is Semantic HTML?
A semantic element clearly describes its meaning to both the browser and the developer. Instead of just saying "this is a box," it says "this is a navigation menu" or "this is a footer."
• Non-semantic:
<div>, <span> (Tells us nothing about the content).• Semantic:
<header>, <nav>, <main>, <article>, <section>, <footer>.🔹 2. Why it Matters #1: SEO (Search Engines)
Google’s "spiders" crawl your site to understand what it’s about. If everything is in a
<div>, Google struggles to find the most important info. If you use an <article> tag, Google knows exactly where your main content is, which can improve your search rankings.🔹 3. Why it Matters #2: Accessibility (a11y)
Millions of people use Screen Readers to browse the web. A screen reader can "jump" directly to a
<nav> or a <main> tag. If you only use <div>, the user has to listen to every single line of code to find what they need. 🔹 4. Common Semantic Tags to Use Now
•
<header>: For the top intro/logo area.•
<nav>: Specifically for navigation links.•
<main>: The unique, primary content of the page (only use one per page!).•
<section>: For grouping related content (like "Services" or "Contact").•
<article>: For independent content that could stand alone (like a blog post).•
<footer>: For the bottom area (copyright, social links).🔹 5. Semantic vs. Non-Semantic (The Comparison)
Bad Code (The "Div Soup"):
<div class="top-part">
<div class="menu">Links here...</div>
</div>
Good Code (Semantic):
<header>
<nav>Links here...</nav>
</header>
🔹 6. Buttons vs. Anchors (
<a>)This is the most common mistake!
• Use
<a>: If you are taking the user to a new URL or a different page.• Use
<button>: If you are performing an action (like submitting a form, opening a menu, or deleting an item).👉 Writing Semantic HTML doesn't change how the site looks, but it changes how the world experiences it!
🎯 What you should do
✔️ Stop using
<div> for every layout container✔️ Use the correct tags to help Google rank your site
✔️ Make your website usable for people with disabilities
✔️ Choose between
<a> and <button> correctly❤3