CSS Media Queries are a technique in CSS that allows a webpage layout to adapt to different screen sizes, resolutions, and device types. They are a core feature of Responsive Web Design.

Syntax:

@media (condition) {
    /* CSS rules that apply only under this condition */
}

Examples:

1. Adjusting for different screen widths:

/* For screens with a maximum width of 600px (e.g., smartphones) */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

2. Detecting landscape vs. portrait orientation:

@media (orientation: landscape) {
    body {
        background-color: lightgreen;
    }
}

3. Styling for print output:

@media print {
    body {
        font-size: 12pt;
        color: black;
        background: none;
    }
}

Common Use Cases:

✅ Mobile-first design: Optimizing websites for small screens first and then expanding for larger screens.
✅ Dark mode: Adjusting styles based on user preference (prefers-color-scheme).
✅ Retina displays: Using high-resolution images or specific styles for high pixel density screens (min-resolution: 2dppx).

A Bearer Token is a type of access token used for authentication and authorization in web applications and APIs. The term "Bearer" means "holder," which implies that anyone in possession of the token can access protected resources—without additional verification.

Characteristics of a Bearer Token:

• Self-contained: It includes all necessary authentication information.
• No additional identity check: Whoever holds the token can use it.
• Sent in HTTP headers: Typically as Authorization: Bearer <token>.
• Often time-limited: Tokens have expiration times to reduce misuse.
• Commonly used with OAuth 2.0: For example, when authenticating with third-party services.

Example of an HTTP request with a Bearer Token:

GET /protected-data HTTP/1.1
Host: api.example.com
Authorization: Bearer abcdef123456

Risks:

• No protection if stolen: If someone intercepts the token, they can impersonate the user.
• Must be securely stored: Should not be exposed in client-side code or URLs.

💡 Tip: To enhance security, use short-lived tokens and transmit them only over HTTPS.

OAuth (Open Authorization) is an open standard protocol for authorization that allows applications to access a user's resources without knowing their credentials (e.g., password). It is commonly used for Single Sign-On (SSO) and API access.

How Does OAuth Work?

OAuth operates using tokens, which allow an application to access a user's data on their behalf. The typical flow is as follows:

1. Authorization Request: An application (client) requests access to a user’s protected data (e.g., Facebook contacts).
2. User Authentication: The user is redirected to the provider's login page (e.g., Google, Facebook) and enters their credentials.
3. Permission Granting: The user confirms that the application can access specific data.
4. Token Issuance: The application receives an access token, which grants permission to access the approved data.
5. Resource Access: The application uses the token to make requests to the API server without needing the user's password.

OAuth 1.0 vs. OAuth 2.0

• OAuth 1.0: More complex, uses cryptographic signatures but is secure.
• OAuth 2.0: Simpler, relies on HTTPS for security, and is the most commonly used version today.

Real-World Uses of OAuth

• "Sign in with Google/Facebook/Apple" buttons
• Third-party apps accessing Google Drive, Dropbox, or Twitter APIs
• Payment services like PayPal integrating with other apps

What is Twig?

Twig is a powerful and flexible templating engine for PHP, commonly used in Symfony but also in other PHP projects. It helps separate logic from presentation and offers many useful features for frontend development.

Key Features of Twig

1. Simple Syntax with Placeholders ({{ }})

Twig uses double curly braces to output variables:

<p>Hello, {{ name }}!</p>

→ If name = "Max", the output will be:
"Hello, Max!"

2. Control Structures ({% %})

Twig supports if-else statements, loops, and other control structures.

If-Else

{% if user.isAdmin %}
    <p>Welcome, Admin!</p>
{% else %}
    <p>Welcome, User!</p>
{% endif %}

Loops (for)

<ul>
{% for user in users %}
    <li>{{ user.name }}</li>
{% endfor %}
</ul>

3. Template Inheritance

Twig supports "Base Layouts", similar to Laravel's Blade.

Parent Template (base.html.twig)

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Page{% endblock %}</title>
</head>
<body>
    <header>{% block header %}Default Header{% endblock %}</header>
    <main>{% block content %}{% endblock %}</main>
</body>
</html>

Child Template (page.html.twig)

{% extends 'base.html.twig' %}

{% block title %}Homepage{% endblock %}

{% block content %}
    <p>Welcome to my website!</p>
{% endblock %}

→ The blocks override the default content from the base template.

4. Including Templates

You can include reusable components like a navbar or footer:

{% include 'partials/navbar.html.twig' %}

5. Filters & Functions

Twig provides many filters to format content:

6. Security & Escaping

Twig automatically escapes HTML to prevent XSS attacks:

{{ "<script>alert('XSS');</script>" }}

→ Outputs: <script>alert('XSS');</script>

To output raw HTML, use |raw:

{{ "<strong>Bold</strong>"|raw }}

7. Extensibility

• Twig supports custom filters & functions.
• You can use PHP objects and arrays directly inside Twig.

The View in Model-View-Controller (MVC)

The View is the presentation layer in the MVC architecture. It is responsible for displaying data from the Model in a user-friendly format.

Main Responsibilities of the View

✅ Displaying Data: Shows information from the Model (e.g., a list of blog posts).
✅ Reacting to User Interactions: Accepts user input and sends it to the Controller.
✅ Formatting & Layout: Structures content using HTML, CSS, or templating engines (e.g., Laravel Blade or Twig).
✅ Avoiding Business Logic: Contains only presentation logic, not data processing.

How Does the View Work in MVC?

1. The user sends a request (e.g., "Show all blog posts").
2. The Controller calls the Model to retrieve the data.
3. The Model returns the required data.
4. The View receives the data from the Controller and displays it.

Example: Blog System (View in Laravel Blade)

<!-- resources/views/blog/index.blade.php -->
@extends('layouts.app')

@section('content')
    <h1>Blog Posts</h1>
    @foreach ($posts as $post)
        <div>
            <h2>{{ $post->title }}</h2>
            <p>{{ $post->content }}</p>
        </div>
    @endforeach
@endsection

🔹 @foreach: Loops through the list of blog posts and displays them.
🔹 {{ $post->title }}: Outputs the title of the blog post.

Conclusion

✔ The View is responsible for presentation but does not process data.
✔ It ensures a clear separation between logic and display.
✔ Using templates or frontend technologies (e.g., Vue.js, React), the View can be dynamically rendered.

The Model is the data and logic layer in the MVC architecture. It manages the application's data and ensures that it is correctly stored, retrieved, and processed.

Main Responsibilities of the Model

✅ Data Management: Stores and handles data, often in a database.
✅ Business Logic: Contains rules and calculations (e.g., discount calculation for orders).
✅ Data Validation: Checks if input is correct (e.g., if an email address is valid).
✅ Database Communication: Performs CRUD operations (Create, Read, Update, Delete).

How Does the Model Work in MVC?

1. The user sends a request (e.g., "Show all blog posts").
2. The Controller processes the request and calls the Model.
3. The Model queries the database and returns the data.
4. The Controller passes the data to the View for display.

Example: Blog System (Model in Laravel)

class BlogPost extends Model {
    protected $fillable = ['title', 'content']; // Erlaubte Felder für Massenverarbeitung

    // Beziehung: Ein Blogpost gehört zu einem Benutzer
    public function user() {
        return $this->belongsTo(User::class);
    }
}

🔹 fillable: Specifies which fields can be saved.
🔹 belongsTo(User::class): Indicates that each blog post belongs to a user.

Conclusion

✔ The Model handles all data and business logic of the application.
✔ It ensures a clear separation between data and presentation.
✔ Changes to the data structure only need to be made in the Model, not throughout the entire application.

A Controller is a key component in the Model-View-Controller (MVC) architecture. It acts as an intermediary between the user interface (View) and the business logic or data (Model).

Functions of a Controller

1. Handling User Input

   • The controller receives requests (e.g., from a web form or an API call).

2. Processing the Request

   • It analyzes the input and decides which action to take.
   • If necessary, it validates the data.

3. Interacting with the Model

   • The controller forwards the request to the model to fetch, update, or store data.

4. Updating the View

   • Once the model processes the request, the controller passes the data to the view.
   • The view is then updated with the new information.

Example: Blog System

Suppose a user wants to create a new blog post:

1. The user fills out a form and clicks "Save" (input to the controller).
2. The controller receives the request, validates the input, and sends it to the model.
3. The model stores the post in the database.
4. The controller retrieves the updated list of posts and sends it to the view.
5. The view displays the new blog post.

Example Code in PHP (Laravel)

class BlogController extends Controller {
    public function store(Request $request) {
        // Validierung der Benutzereingabe
        $request->validate([
            'title' => 'required|max:255',
            'content' => 'required',
        ]);

        // Neues Blog-Post-Model erstellen und speichern
        BlogPost::create([
            'title' => $request->input('title'),
            'content' => $request->input('content'),
        ]);

        // Weiterleitung zur Blog-Übersicht
        return redirect()->route('blog.index')->with('success', 'Post erstellt!');
    }
}

Conclusion

✔ A controller manages the flow of an application and separates business logic from presentation.
✔ It ensures clean code structure, as each component (Model, View, Controller) has a specific responsibility.
✔ Modern frameworks like Laravel, Django, or ASP.NET often include built-in routing mechanisms that automatically direct requests to the appropriate controllers.

The Catalyst Framework is a flexible and powerful web framework for Perl. It enables the development of scalable and maintainable web applications and follows the Model-View-Controller (MVC) design pattern.

Key Features of Catalyst

✅ MVC Architecture – Clear separation of business logic, presentation, and data management
✅ Flexibility – Supports various templating systems and ORM solutions like DBIx::Class
✅ Extensibility – Many plugins and modules available
✅ Asynchronous Capabilities – Can be integrated with event-driven architectures
✅ REST APIs & WebSockets – Support for modern web technologies

Use Cases

• Developing complex web applications
• APIs and microservices
• Enterprise software

Request headers are HTTP headers sent by a client (e.g., a web browser or API request) to the server, providing additional information about the request, the client, or the desired content.

Important Request Headers:

1. Host

• Specifies the target domain or IP address of the server.
• Example:

Host: www.example.com

2. User-Agent

• Contains information about the client, such as browser type or operating system.
• Example:

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)

3. Accept

• Defines which content types the client can accept.
• Example:

Accept: text/html, application/json

4. Accept-Language

• Specifies the client's preferred language(s).
• Example:

Accept-Language: de-DE, en-US

5. Accept-Encoding

• Indicates which compression formats the client supports.
• Example:

Accept-Encoding: gzip, deflate, br

6. Referer

• Provides the previous page from which the user navigated.
• Example:

Referer: https://www.google.com/

7. Authorization

• Used for authentication when accessing protected resources.
• Example(Basic Auth):

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

8. Cookie

• Contains cookies previously set by the server.
• Example:

Cookie: sessionId=abc123; theme=dark

9. Content-Type (for POST/PUT-Anfragen)

• Specifies the data format of the request body.
• Example:

Content-Type: application/json

10. Origin

• Indicates the origin URL and is often used in Cross-Origin requests.
• Example:

Origin: https://www.example.com

These headers help the server understand the request and respond accordingly by providing details about the client, preferred content, and security aspects.

Hot Module Replacement (HMR) is a web development technique that allows code changes to be applied instantly in a running application without requiring a full page reload. This significantly improves development productivity since the application's state (e.g., user input or UI state) is preserved.

How Does HMR Work?

HMR is used in modern build tools like Webpack, Vite, Parcel, or esbuild. The process works as follows:

1. File change detected – When you save a file, the HMR system detects the modification.
2. Module recompiled – Only the affected module is rebuilt, not the entire codebase.
3. Update injected into the application – The new code is loaded into the running JavaScript or CSS module.
4. State is preserved – If configured correctly, React states, Vue reactivity, or other UI states remain unchanged.

Benefits of HMR

✅ Faster development cycles – No need for full-page reloads.
✅ Preserved application state – Useful for React, Vue, and other SPA frameworks.
✅ Instant CSS updates – Style changes appear immediately.
✅ Improved DX (Developer Experience) – Reduces workflow interruptions.

When Doesn't HMR Work?

• With major changes, such as modifications to global variables or application configuration.
• If the framework or library does not support HMR.
• HMR is not used in production environments—classic reloading is preferred.

Example with Webpack

If you're using Webpack, you can enable HMR like this:

if (module.hot) {
  module.hot.accept('./module.js', function() {
    console.log('Module updated!');
  });
}

This ensures that changes to module.js are applied without restarting the entire application.