## RESTful APIs

---
marp: true
theme: gaia
class: invert
paginate: true
title: "Understanding RESTful APIs"
author: "Your Name"
date: "CS PhD Seminar"
style: |
  section {
    font-family: 'Arial, sans-serif';
    color: #ddd;
  }
  h1, h2, h3 {
    color: #4CAF50;
  }
  code {
    background: #333;
    color: #eee;
    padding: 0.2em;
    border-radius: 5px;
  }
  .columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .columns div {
    padding: 1rem;
  }
---

# Understanding RESTful APIs

## CS PhD Seminar

---

# What is a RESTful API?

- **API (Application Programming Interface)**: A set of rules and protocols for building and interacting with software applications.
- **REST (Representational State Transfer)**: An architectural style for designing networked applications.
- **RESTful API**: An API that adheres to the principles of REST.

![bg](https://via.placeholder.com/800x600)

---

# Principles of REST

1. **Statelessness**
2. **Client-Server Architecture**
3. **Cacheability**
4. **Layered System**
5. **Uniform Interface**

![bg right](https://via.placeholder.com/800x600)

---

# Statelessness

- Each request from a client to a server must contain all the information needed to understand and process the request.
- The server should not store any context about the client between requests.

---

# Client-Server Architecture

- The client and server operate independently.
- The client makes requests, and the server processes them and returns the appropriate responses.

![bg left](https://via.placeholder.com/800x600)

---

# Cacheability

- Responses from the server should be explicitly labeled as cacheable or non-cacheable.
- This allows clients to cache responses and reduce the need to make additional requests.

---

# Layered System

- A client cannot ordinarily tell whether it is connected directly to the end server or an intermediary.
- This promotes scalability by allowing load balancing and shared caching.

---

# Uniform Interface

- Simplifies and decouples the architecture, which enables each part to evolve independently.
- Key constraints:
  - Identification of resources (URI)
  - Manipulation of resources through representations (HTTP methods)
  - Self-descriptive messages
  - Hypermedia as the engine of application state (HATEOAS)

---

# HTTP Methods in REST

<div class="columns">
<div>

### GET

- Retrieve data from a specified resource.
- Example: `GET /api/users`

</div>
<div>

### POST

- Submit data to be processed to a specified resource.
- Example: `POST /api/users`

</div>
<div>

### PUT

- Update a specified resource.
- Example: `PUT /api/users/1`

</div>
<div>

### DELETE

- Delete a specified resource.
- Example: `DELETE /api/users/1`

</div>
</div>

---

# RESTful API Example

```http
GET /api/books/1 HTTP/1.1
Host: example.com
```

**Response:**
```json
{
  "id": 1,
  "title": "RESTful APIs",
  "author": "John Doe"
}
```

---

# Advantages of RESTful APIs

- **Scalability**: Stateless nature helps in scaling.
- **Flexibility**: Can handle different types of calls and return different data formats.
- **Independence**: Separation of client and server.

---

# Disadvantages of RESTful APIs

- **Overhead**: HTTP methods and headers add extra overhead.
- **Statelessness**: Requires every request to be self-contained.
- **Complexity**: Properly designing and documenting a RESTful API can be complex.

---

# Conclusion

- RESTful APIs are a powerful way to design web services that are scalable, flexible, and maintainable.
- Understanding the principles and constraints of REST is crucial for designing effective APIs.

![bg](https://via.placeholder.com/800x600)

# Thank you!

---

# Q&A

---

# References

- [Fielding, Roy T. "Architectural Styles and the Design of Network-based Software Architectures." Doctoral dissertation, University of California, Irvine, 2000.](https://www.ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf)
- [REST API Tutorial](https://restfulapi.net/)
- [RESTful Web Services](https://restfulwebservices.net/)


### CSS Presentation on Basic CSS for CS PhD Students

---
marp: true
theme: gaia
class: invert
paginate: true
title: "Basic CSS Refresher"
author: "Your Name"
date: "CS PhD Seminar"
style: |
  section {
    font-family: 'Arial, sans-serif';
    color: #ddd;
  }
  h1, h2, h3 {
    color: #4CAF50;
  }
  code {
    background: #333;
    color: #eee;
    padding: 0.2em;
    border-radius: 5px;
  }
  .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
---

# Basic CSS Refresher

## CS PhD Seminar

---

# What is CSS?

- **CSS (Cascading Style Sheets)**: A language used to describe the presentation of a document written in HTML or XML.
- **Purpose**: CSS handles the visual and aural layout, including colors, fonts, and spacing.

![bg](https://via.placeholder.com/800x600)

---

# CSS Syntax

- **Selector**: Specifies the HTML element(s) to be styled.
- **Declaration Block**: Contains one or more declarations separated by semicolons.
- **Declaration**: Consists of a property and a value, separated by a colon.

```css
selector {
  property: value;
}
```

---

# Selectors

- **Element Selector**: Selects all elements of a given type.
  ```css
  p {
    color: blue;
  }
  ```

- **Class Selector**: Selects elements with a specific class.
  ```css
  .classname {
    color: green;
  }
  ```

- **ID Selector**: Selects an element with a specific ID.
  ```css
  #idname {
    color: red;
  }
  ```

---

# Colors and Backgrounds

- **Color Property**: Sets the text color.
  ```css
  p {
    color: blue;
  }
  ```

- **Background Color**:
  ```css
  body {
    background-color: #333;
  }
  ```

- **Background Image**:
  ```css
  body {
    background-image: url('background.jpg');
  }
  ```

---

# Fonts and Text

- **Font Family**:
  ```css
  p {
    font-family: 'Arial, sans-serif';
  }
  ```

- **Font Size**:
  ```css
  h1 {
    font-size: 2em;
  }
  ```

- **Text Alignment**:
  ```css
  h1 {
    text-align: center;
  }
  ```

---

# Box Model

- **Content**: The innermost part where text and images appear.
- **Padding**: Clears an area around the content.
- **Border**: Goes around the padding.
- **Margin**: Clears an area outside the border.

```css
div {
  padding: 20px;
  border: 5px solid #ccc;
  margin: 10px;
}
```

![bg](https://via.placeholder.com/800x600)

---

# Layout and Positioning

- **Display Property**: Specifies how an element is displayed.
  ```css
  .inline {
    display: inline;
  }
  .block {
    display: block;
  }
  ```

- **Position Property**: Specifies the type of positioning method.
  ```css
  .relative {
    position: relative;
    top: 10px;
    left: 10px;
  }
  .absolute {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  ```

---

# Flexbox

- **Container**:
  ```css
  .flex-container {
    display: flex;
  }
  ```

- **Items**:
  ```css
  .flex-item {
    flex: 1;
  }
  ```

![bg right](https://via.placeholder.com/800x600)

---

# Grid Layout

- **Container**:
  ```css
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  ```

- **Items**:
  ```css
  .grid-item {
    padding: 20px;
  }
  ```

---

# Pseudo-classes and Pseudo-elements

- **Pseudo-class**: Applies to elements based on their state.
  ```css
  a:hover {
    color: red;
  }
  ```

- **Pseudo-element**: Styles specific parts of an element.
  ```css
  p::first-line {
    color: blue;
  }
  ```

---

# Conclusion

- **CSS Basics**: Essential for designing and styling web pages

### Complete Marp Markdown Presentation on Basic CSS for CS PhD Students


---
marp: true
theme: gaia
class: invert
paginate: true
title: "Basic CSS Refresher"
author: "Your Name"
date: "CS PhD Seminar"
style: |
  section {
    font-family: 'Arial, sans-serif';
    color: #ddd;
  }
  h1, h2, h3 {
    color: #4CAF50;
  }
  code {
    background: #333;
    color: #eee;
    padding: 0.2em;
    border-radius: 5px;
  }
  .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
---

# Basic CSS Refresher

## CS PhD Seminar

---

# What is CSS?

- **CSS (Cascading Style Sheets)**: A language used to describe the presentation of a document written in HTML or XML.
- **Purpose**: CSS handles the visual and aural layout, including colors, fonts, and spacing.

![bg](https://via.placeholder.com/800x600)

---

# CSS Syntax

- **Selector**: Specifies the HTML element(s) to be styled.
- **Declaration Block**: Contains one or more declarations separated by semicolons.
- **Declaration**: Consists of a property and a value, separated by a colon.

```css
selector {
  property: value;
}
```

---

# Selectors

- **Element Selector**: Selects all elements of a given type.
  ```css
  p {
    color: blue;
  }
  ```

- **Class Selector**: Selects elements with a specific class.
  ```css
  .classname {
    color: green;
  }
  ```

- **ID Selector**: Selects an element with a specific ID.
  ```css
  #idname {
    color: red;
  }
  ```

---

# Colors and Backgrounds

- **Color Property**: Sets the text color.
  ```css
  p {
    color: blue;
  }
  ```

- **Background Color**:
  ```css
  body {
    background-color: #333;
  }
  ```

- **Background Image**:
  ```css
  body {
    background-image: url('background.jpg');
  }
  ```

---

# Fonts and Text

- **Font Family**:
  ```css
  p {
    font-family: 'Arial, sans-serif';
  }
  ```

- **Font Size**:
  ```css
  h1 {
    font-size: 2em;
  }
  ```

- **Text Alignment**:
  ```css
  h1 {
    text-align: center;
  }
  ```

---

# Box Model

- **Content**: The innermost part where text and images appear.
- **Padding**: Clears an area around the content.
- **Border**: Goes around the padding.
- **Margin**: Clears an area outside the border.

```css
div {
  padding: 20px;
  border: 5px solid #ccc;
  margin: 10px;
}
```

![bg](https://via.placeholder.com/800x600)

---

# Layout and Positioning

- **Display Property**: Specifies how an element is displayed.
  ```css
  .inline {
    display: inline;
  }
  .block {
    display: block;
  }
  ```

- **Position Property**: Specifies the type of positioning method.
  ```css
  .relative {
    position: relative;
    top: 10px;
    left: 10px;
  }
  .absolute {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  ```

---

# Flexbox

- **Container**:
  ```css
  .flex-container {
    display: flex;
  }
  ```

- **Items**:
  ```css
  .flex-item {
    flex: 1;
  }
  ```

![bg right](https://via.placeholder.com/800x600)

---

# Grid Layout

- **Container**:
  ```css
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  ```

- **Items**:
  ```css
  .grid-item {
    padding: 20px;
  }
  ```

---

# Pseudo-classes and Pseudo-elements

- **Pseudo-class**: Applies to elements based on their state.
  ```css
  a:hover {
    color: red;
  }
  ```

- **Pseudo-element**: Styles specific parts of an element.
  ```css
  p::first-line {
    color: blue;
  }
  ```

---

# Conclusion

- **CSS Basics**: Essential for designing and styling web pages.
- **Selectors**: Fundamental for targeting HTML elements.
- **Box Model**: Crucial for layout and design.
- **Advanced Layouts**: Flexbox and Grid offer powerful ways to create complex layouts.

![bg](https://via.placeholder.com/800x600)

# Thank you!

---

# Q&A

---

# References

- [MDN Web Docs on CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [W3Schools CSS Tutorial](https://www.w3schools.com/css/)
- [CSS Tricks](https://css-tricks.com/)


This presentation covers the fundamental aspects of CSS, using a dark theme and incorporating images, code snippets, and a two-column layout. This format should be engaging and informative for a group of CS PhD students.

---

# MARP Rresentations

---
marp: true
theme: gaia
class: invert
paginate: true
title: "Understanding RESTful APIs"
author: "Your Name"
date: "CS PhD Seminar"
style: |
  section {
    font-family: 'Arial, sans-serif';
    color: #ddd;
  }
  h1, h2, h3 {
    color: #4CAF50;
  }
  .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
---

# Understanding RESTful APIs

## CS PhD Seminar

---

# What is a RESTful API?

- **API (Application Programming Interface)**: A set of rules and protocols for building and interacting with software applications.
- **REST (Representational State Transfer)**: An architectural style for designing networked applications.
- **RESTful API**: An API that adheres to the principles of REST.

![bg](https://via.placeholder.com/800x600)

---

# Principles of REST

1. **Statelessness**
2. **Client-Server Architecture**
3. **Cacheability**
4. **Layered System**
5. **Uniform Interface**

![bg right](https://via.placeholder.com/800x600)

---

# Statelessness

- Each request from a client to a server must contain all the information needed to understand and process the request.
- The server should not store any context about the client between requests.

---

# Client-Server Architecture

- The client and server operate independently.
- The client makes requests, and the server processes them and returns the appropriate responses.

![bg left](https://via.placeholder.com/800x600)

---

# Cacheability

- Responses from the server should be explicitly labeled as cacheable or non-cacheable.
- This allows clients to cache responses and reduce the need to make additional requests.

---

# Layered System

- A client cannot ordinarily tell whether it is connected directly to the end server or an intermediary.
- This promotes scalability by allowing load balancing and shared caching.

---

# Uniform Interface

- Simplifies and decouples the architecture, which enables each part to evolve independently.
- Key constraints:
  - Identification of resources (URI)
  - Manipulation of resources through representations (HTTP methods)
  - Self-descriptive messages
  - Hypermedia as the engine of application state (HATEOAS)

---

# HTTP Methods in REST

<div class="columns">
<div>

### GET

- Retrieve data from a specified resource.
- Example: `GET /api/users`

</div>
<div>

### POST

- Submit data to be processed to a specified resource.
- Example: `POST /api/users`

</div>
<div>

### PUT

- Update a specified resource.
- Example: `PUT /api/users/1`

</div>
<div>

### DELETE

- Delete a specified resource.
- Example: `DELETE /api/users/1`

</div>
</div>

---

# RESTful API Example

```json
GET /api/books/1 HTTP/1.1
Host: example.com
```

**Response:**
```json
{
  "id": 1,
  "title": "RESTful APIs",
  "author": "John Doe"
}
```

---

# Advantages of RESTful APIs

- **Scalability**: Stateless nature helps in scaling.
- **Flexibility**: Can handle different types of calls and return different data formats.
- **Independence**: Separation of client and server.

---

# Disadvantages of RESTful APIs

- **Overhead**: HTTP methods and headers add extra overhead.
- **Statelessness**: Requires every request to be self-contained.
- **Complexity**: Properly designing and documenting a RESTful API can be complex.

---

# Conclusion

- RESTful APIs are a powerful way to design web services that are scalable, flexible, and maintainable.
- Understanding the principles and constraints of REST is crucial for designing effective APIs.

![bg](https://via.placeholder.com/800x600)

# Thank you!

---

# Q&A

---

# References

- [Fielding, Roy T. "Architectural Styles and the Design of Network-based Software Architectures." Doctoral dissertation, University of California, Irvine, 2000.](https://www.ics.uci.edu/~fielding/pubs/dissertation/fielding_dissertation.pdf)
- [REST API Tutorial](https://restfulapi.net/)
- [RESTful Web Services](https://restfulwebservices.net/)
```

This presentation covers the fundamental aspects of RESTful APIs, using a dark theme and incorporating images, code snippets, and a two-column layout. This format should be engaging and informative for a group of CS PhD students.

---

---
marp: true
theme: gaia
class: invert
paginate: true
title: "Basic CSS Refresher"
author: "Your Name"
date: "CS PhD Seminar"
style: |
  section {
    font-family: 'Arial, sans-serif';
    color: #ddd;
  }
  h1, h2, h3 {
    color: #4CAF50;
  }
  code {
    background: #333;
    color: #eee;
    padding: 0.2em;
    border-radius: 5px;
  }
  .columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
---

# Basic CSS Refresher

## CS PhD Seminar

---

# What is CSS?

- **CSS (Cascading Style Sheets)**: A language used to describe the presentation of a document written in HTML or XML.
- **Purpose**: CSS handles the visual and aural layout, including colors, fonts, and spacing.

![bg](https://via.placeholder.com/800x600)

---

# CSS Syntax

- **Selector**: Specifies the HTML element(s) to be styled.
- **Declaration Block**: Contains one or more declarations separated by semicolons.
- **Declaration**: Consists of a property and a value, separated by a colon.

```css
selector {
  property: value;
}
```

---

# Selectors

- **Element Selector**: Selects all elements of a given type.
  ```css
  p {
    color: blue;
  }
  ```

- **Class Selector**: Selects elements with a specific class.
  ```css
  .classname {
    color: green;
  }
  ```

- **ID Selector**: Selects an element with a specific ID.
  ```css
  #idname {
    color: red;
  }
  ```

---

# Colors and Backgrounds

- **Color Property**: Sets the text color.
  ```css
  p {
    color: blue;
  }
  ```

- **Background Color**:
  ```css
  body {
    background-color: #333;
  }
  ```

- **Background Image**:
  ```css
  body {
    background-image: url('background.jpg');
  }
  ```

---

# Fonts and Text

- **Font Family**:
  ```css
  p {
    font-family: 'Arial, sans-serif';
  }
  ```

- **Font Size**:
  ```css
  h1 {
    font-size: 2em;
  }
  ```

- **Text Alignment**:
  ```css
  h1 {
    text-align: center;
  }
  ```

---

# Box Model

- **Content**: The innermost part where text and images appear.
- **Padding**: Clears an area around the content.
- **Border**: Goes around the padding.
- **Margin**: Clears an area outside the border.

```css
div {
  padding: 20px;
  border: 5px solid #ccc;
  margin: 10px;
}
```

![bg](https://via.placeholder.com/800x600)

---

# Layout and Positioning

- **Display Property**: Specifies how an element is displayed.
  ```css
  .inline {
    display: inline;
  }
  .block {
    display: block;
  }
  ```

- **Position Property**: Specifies the type of positioning method.
  ```css
  .relative {
    position: relative;
    top: 10px;
    left: 10px;
  }
  .absolute {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  ```

---

# Flexbox

- **Container**:
  ```css
  .flex-container {
    display: flex;
  }
  ```

- **Items**:
  ```css
  .flex-item {
    flex: 1;
  }
  ```

![bg right](https://via.placeholder.com/800x600)

---

# Grid Layout

- **Container**:
  ```css
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
  }
  ```

- **Items**:
  ```css
  .grid-item {
    padding: 20px;
  }
  ```

---

# Pseudo-classes and Pseudo-elements

- **Pseudo-class**: Applies to elements based on their state.
  ```css
  a:hover {
    color: red;
  }
  ```

- **Pseudo-element**: Styles specific parts of an element.
  ```css
  p::first-line {
    color: blue;
  }
  ```

---

# Conclusion

- **CSS Basics**: Essential for designing and styling web pages.
- **Selectors**: Fundamental for targeting HTML elements.
- **Box Model**: Crucial for layout and design.
- **Advanced Layouts**: Flexbox and Grid offer powerful ways to create complex layouts.

![bg](https://via.placeholder.com/800x600)

# Thank you!

---

# Q&A

---

# References

- [MDN Web Docs on CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [W3Schools CSS Tutorial](https://www.w3schools.com/css/)
- [CSS Tricks](https://css-tricks.com/)
```

This presentation covers the fundamental aspects of CSS, using a dark theme and incorporating images, code snippets, and a two-column layout. This format should be engaging and informative for a group of CS PhD students.