## 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.
---
# Principles of REST
1. **Statelessness**
2. **Client-Server Architecture**
3. **Cacheability**
4. **Layered System**
5. **Uniform Interface**
---
# 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.
---
# 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
### GET
- Retrieve data from a specified resource.
- Example: `GET /api/users`
### POST
- Submit data to be processed to a specified resource.
- Example: `POST /api/users`
### PUT
- Update a specified resource.
- Example: `PUT /api/users/1`
### DELETE
- Delete a specified resource.
- Example: `DELETE /api/users/1`
---
# 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.
# 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.
---
# 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;
}
```
---
# 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;
}
```
---
# 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.
---
# 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;
}
```
---
# 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;
}
```
---
# 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.
# 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.
---
# Principles of REST
1. **Statelessness**
2. **Client-Server Architecture**
3. **Cacheability**
4. **Layered System**
5. **Uniform Interface**
---
# 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.
---
# 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
### GET
- Retrieve data from a specified resource.
- Example: `GET /api/users`
### POST
- Submit data to be processed to a specified resource.
- Example: `POST /api/users`
### PUT
- Update a specified resource.
- Example: `PUT /api/users/1`
### DELETE
- Delete a specified resource.
- Example: `DELETE /api/users/1`
---
# 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.
# 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.
---
# 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;
}
```
---
# 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;
}
```
---
# 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.
# 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.