DEV Community: avery

22. EJS (Embedded JavaScript)

avery — Thu, 30 Apr 2026 15:36:23 +0000

1. What is EJS?

EJS (Embedded JavaScript) is a templating engine for Node.js
Key Concepts
- Templating : Allows you to generate dynamic HTML using JavaScript
- Separation of Concerns : Frontend(HTML, CSS), Backend(JavaScript)
- Other Templating Languages : Python(Jinja), PHP(Twig), JavaScript(EJS)
How EJS Works : ex) <% for (let i = 0; i < items.length; i++) { %> <li><%= items[i] %></li> <% } %>
- JavaScript runs inside HTML, <%= %> outputs data to the page
Rendering with Express
- Static : ex) res.sendFile("index.html");
- Dynamic (EJS) : ex) app.post("/submit", (req, res) => { res.render("index.ejs", { name: req.body["name"] }); }); <body> <h1>Hello <%= name %></h1> </body>

2. EJS Tags

<%= variable %> : output value
<% code %> : execute JavaScript
<%- html %> : render HTML (unescaped)
<%% %%> : display <% %> literally
<%# comment %> : comment (not executed)
<%- include("header.ejs") %> : Include (Partials), Used to reuse components (header, footer, etc.)
Using JavaScript in EJS

3. Passing Data

Server → EJS : Pass data using res.render()
- If no data exists : Use default values or locals
EJS → Server : Use forms with method="POST"

4. Partials & Layouts

Static files : app.use(express.static("public"));
Templating syntax : <% %>(logic), <%= %>(output), <%- %>(raw HTML)
Partials : ex) <%- include("header.ejs") %>, <%- include("footer.ejs") %>
Helps avoid code duplication, Improves maintainability
Javascript Tip
Variable Keywords : const(cannot be reassigned), let(can be reassigned)
forEach : method used to loop through an array and run a function on each item.
- ex) array.forEach((element, index, array) => { console.log(element); console.log(index); });

21. Express.js with Node.js

avery — Mon, 27 Apr 2026 16:17:38 +0000

1. What is Express?

Express.js is a backend web framework for Node.js
Express vs Node.js
- Node.js : Runtime environment (not a framework)
- Express.js : Framework built on top of Node.js, Makes backend development easier
Why Express? : Less code, Better readability, Middleware support, Faster development
“It’s All Node To Me”
- Can be used for : Web backend, IoT applications, Desktop apps (e.g. VS Code is built with Electron + Node)

2. Creating Your First Express Server

Backend structure
- Server : computer running 24/7 (listening for requests)
- Application : index.js (logic)
- Database : data storage
Client-side vs Server-side
- Client : browser
- Server : backend system
Setup steps
- mkdir project-folder
- cd project-folder
- touch index.js
- npm init -y
- npm i express
Basic server : ex) `import express from "express";

const app = express();
const port = 3000;

app.listen(port, () => {
console.log(Server running on port ${port}.);
});`

What is localhost? : Local server running on your computer
- Example : http://localhost:3000
- Think of it as your computer’s “door” for apps
Check open ports
- Windows : netstat -ano | findstr "LISTENING"
- Mac/Linux : sudo lsof -i -P -n | grep LISTEN

3. HTTP Requests

HTTP : HyperText Transfer Protocol
HTTP Methods
- GET : retrieve data
- POST : send data
- PUT : replace data
- PATCH : update data
- DELETE : remove data
Basic route : ex) app.get("/", (req, res) => { res.send("Hello, World!"); });
Endpoints app.get("/about", (req, res) => { res.send("<h1>About Me</h1>"); });
Nodemon : Auto-restarts server when changes are made
- ex) npm i -g nodemon nodemon index.js

4. Postman

Tool for testing APIs (without frontend)
HTTP Status Codes
- 100–199 : Informational
- 200–299 : Success
- 300–399 : Redirection
- 400–499 : Client errors
- 500–599 : Server errors
- Reference : https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Status
Install all dependencies : npm install
- Installs everything listed in package.json

5. Introduction to Middleware

Body Parser : Handles form data (x-www-form-urlencoded)
- app.use(bodyParser.urlencoded({extended:true}));
- Express built-in middleware : app.use(express.urlencoded({ extended: true }));
Send file : res.sendFile(path);

6. Custom Middleware

What is middleware? : Code that runs between request and response
- Used for : Logging, Authentication, Error handling, Data preprocessing
- Example: Logger function logger(req, res, next) { console.log("Request Method:", req.method); console.log("Request URL:", req.url); next(); } app.use(logger);
Path utilities : ex) `import { dirname } from "path"; import { fileURLToPath } from "url";

const __dirname = dirname(fileURLToPath(import.meta.url));`

Important : Middleware order matters, body-parser must come before routes

7. Secrets Access Project

Example : `var userIsAuthorised = false;

function passwordCheck(req, res, next) {
const password = req.body["password"];

if (password === "ILoveProgramming") {
userIsAuthorised = true;
}

next();
}

app.use(passwordCheck);`

Route protection : `app.post("/check", (req, res) => { if (userIsAuthorised) { res.sendFile(dirname + "/public/secret.html"); } else { res.sendFile(dirname + "/public/index.html"); }

console.log(req.body);
});`

20. Node.js

avery — Tue, 21 Apr 2026 20:30:34 +0000

1. What is Node.js?

Node.js is a JavaScript runtime that allows you to run JavaScript outside the browser (on a server or local machine)
Why use frameworks/libraries? : Reuse components, Reduce development overhead
- ex) Reading files, writing files, URL Strings, Networking, Data Streams, Diagnostics, Tests, Debugger, Error Codes
Definition : “Node.js is an asynchronous, event-driven JavaScript runtime designed to build scalable network applications.”
- Key Concepts
- JavaScript Runtime : Runs JS outside the browser (server/local computer)
- Asynchronous : Executes tasks without blocking (non-blocking)
- Event-driven : Responds to events (requests, user actions, etc.)
- Application : On Server(Computer)
Why Node.js? : Full-stack JavaScript, Scalable, Non-blocking I/O , Huge ecosystem

2. Using Node.js

Check version : node -v
REPL (Read-Eval-Print Loop) : node
- Commands
- .help : show commands)
- .exit or Ctrl + C (twice) : exit
- Similar to the browser console
Run a JS file : cd path/to/file node index.js

3. Native Node Modules

Native Modules : Built-in modules provided by Node.js
File System (fs) : const fs = require("fs");
- Write file : fs.writeFile("message.txt", "Hello from NodeJS!", (err) => { if (err) throw err; console.log("The file has been saved!"); });
- Read file : fs.readFile("./message.txt", "utf8", (err, data) => { if (err) throw err; console.log(data); });
- "utf8" → encoding option
Docs : https://nodejs.org/docs/latest-v18.x/api/fs.html

4. NPM (Node Package Manager)

A repository of packages and libraries
Website : https://www.npmjs.com/
Initialize project : npm init
- Quick setup : npm init -y
Install packages : npm install
- ex) npm i sillyname
Module Systems
- CommonJS (CJS) : ex) const generateName = require("sillyname");
- ES Modules (ESM) : ex) import generateName from "sillyname";
- Enable ESM : "type": "module"
Example : import superheroes, { randomSuperhero } from "superheroes";

const name = randomSuperhero();
console.log(`I am ${name}!`);

5. Mini Project: QR Code Generator

Packages : inquirer(user input), qr-image(generate QR codes)
Install : npm i inquirer qr-image
Note : Be careful with package names (typos can install wrong packages), Always check package documentation

19. Backend Web Development

avery — Sun, 19 Apr 2026 09:55:33 +0000

1. Backend Web Development Explained

What is the backend? : The backend is the part of a web application that runs on the server and handles logic, data, and requests.
Main Components
- Server : A computer that runs 24/7, Can be local (localhost) or remote (cloud server)
- Application (Backend Logic) : Handles requests and responses
- Returns : HTML, Data (JSON, etc.), Status codes (e.g. 404 Not Found, 500 Server Error)
- Database : Stores and manages data, Ensures data persistence (data is saved long-term)
Web Page vs Web App
- Web Page : Simple structure(User ↔ Server), Mostly static content
- Web Application : Full system(User ↔ Server ↔ Application ↔ Database), Dynamic content with data interaction

2. Backend Tools and Technologies

Frontend : HTML, CSS, JavaScript(React, Angular, Vue)
Backend : Java(Spring), Ruby(Ruby on Rails), PHP(Laravel), C#(ASP.NET), Python(Django, Flask), JavaScript(Node.js)
Backend choice depends on the ecosystem, scalability needs, and personal or company preference.

18. The Unix Command Line

avery — Sun, 19 Apr 2026 07:00:43 +0000

1. Install Git Bash on Windows

Download: https://gitforwindows.org/
Use Git Bash as the terminal in VS Code

2. Understanding the Command Line

Shell vs Kernel
- Shell: user interface (CLI/GUI) that interacts with the system
- Kernel: core of the OS that manages CPU, memory, and disks
Bash (Bourne Again Shell) : A popular Unix shell (used in macOS and Linux)
Why use CLI (Command Line Interface)? : Faster, More control, More flexible

3. Command Line Navigation

ls : list files and directories
cd : change directory
cd .. : move up one level
Tips
- Tab : auto-complete
- ↑ / ↓ : reuse previous commands
- Drag & drop folder : auto path input
- Alt + Click : move cursor
- Ctrl + A : move to beginning of line
- Ctrl + E : move to end of line
- Ctrl + U : delete to the beginning

4. File & Directory Management

Create
- mkdir folder-name # create folder
- touch file.txt # create file
Open
- start file.txt # Windows
- open file.txt # macOS
- code file.txt # open in VS Code
Delete
- rm file.txt # delete file
- rm * # delete all files in current folder
- rm -r folder-name # delete folder
Other commands
- pwd # show current path
- clear # clear terminal
Reference : https://www.learnenough.com/command-line-tutorial
Note (Important)
- rm * and rm -r are dangerous commands, Always double-check before running them (no undo)

17. jQuery

avery — Fri, 17 Apr 2026 10:26:31 +0000

1. What is jQuery?

A JavaScript library that simplifies DOM manipulation
ex) document.querySelector("h1"); // Vanilla JS $("h1"); // jQuery

2. How to Use jQuery

CDN (Google Hosted Libraries) : https://developers.google.com/speed/libraries#jquery
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
Place
- Before </body> → no timing issues (recommended)
- Inside <head> → may cause timing issues
- Fix timing issue : $(document).ready(function () { // jQuery code });

3. Minification

Removes unnecessary spaces to reduce file size and improve loading speed
Tool : https://www.minifier.org/

4. Selecting Elements

ex) $("button"); // selects all button elements

5. Manipulating Styles

Change CSS : ex) $("h1").css("font-size", "5rem");
Add class (multiple allowed) : ex) $("h1").addClass("big-title margin-50");
Remove class : ex) $("h1").removeClass("big-title");
Check class : ex) $("h1").hasClass("margin-50"); // true / false

6. Manipulating Text

Text only : ex) $("h1").text("Bye");
Includes HTML : ex) $("h1").html("<em>Hey</em>");

7. Manipulating Attributes

Get attribute : ex) console.log($("img").attr("src"));
Set attribute : ex) $("a").attr("href", "https://www.google.com");

Event Listeners
Vanilla JS vs jQuery : ex) for (var i = 0; i < 5; i++) { document.querySelectorAll("button")[i].addEventListener("click", function () { document.querySelector("h1").style.color = "purple"; }); } vs $("button").click(function () { $("h1").css("color", "purple"); });
Key press : ex) $(document).keypress(function (event) { $("h1").text(event.key); });
Mouse event : ex) $("h1").on("mouseover", function () { $("h1").css("color", "purple"); });
Reference : https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events

9. Adding and Removing Elements

before() : ex) $("h1").before("<button>New</button>");
after() : ex) $("h1").after("<button>New</button>");
prepend() : ex) $("h1").prepend("<button>New</button>");
append() : ex) $("h1").append("<button>New</button>");
remove() : ex) $("button").remove();

10. Animations

Built-in effects: hide, show, toggle, fadeOut, fadeIn, fadeToggle, slideUp, slideDown, slideToggle
- ex) $("button").on("click", function () { $("h1").hide(); });
animate() (numeric values only) : ex) $("button").on("click", function () { $("h1").animate({ opacity: 0.5 }); });
Chaining : ex) $("button").on("click", function () { $("h1").slideUp().slideDown().animate({ opacity: 0.5 }); });

16. Advanced JavaScript and DOM Manipulation

avery — Wed, 15 Apr 2026 18:16:46 +0000

1. Adding Event Listeners

ex) document.querySelector("button").addEventListener("click", handleClick);
Anonymous function
- ex) document.querySelector("button").addEventListener("click", function () { // what to do when clicked });
Apply to multiple elements (using a loop)
- ex) `var numberOfDrumButtons = document.querySelectorAll(".drum").length;

for (var i = 0; i < numberOfDrumButtons; i++) {
document.querySelectorAll(".drum")[i].addEventListener("click", function () {
alert("I got clicked!");
});
}`

2. Higher Order Functions

Functions that take other functions as arguments or return functions

3. Playing Sounds on a Website

ex) var audio = new Audio("audio.mp3"); audio.play();
this(keyword) : Refers to the element that triggered the event
- ex) document.querySelector(".drum").addEventListener("click", function () { this.style.color = "white"; });

4. Switch Statements

Used to compare a single value against multiple cases
ex) `switch (value) { case "A": break;

case "B":
break;

default:
}`

5. JavaScript Objects

Objects store related data and behavior together
Constructor Function : Starts with a capital letter
- ex) function BellBoy(name, age, hasWorkPermit, languages) { this.name = name; this.age = age; this.hasWorkPermit = hasWorkPermit; this.languages = languages; }
Create object : ex) var bellBoy1 = new BellBoy("Timmy", 19, true, ["French", "English"]);

6. Object Methods & Dot Notation

Constructor Function Including Methods : ex) function BellBoy(name, age, hasWorkPermit, languages) { this.name = name; this.age = age; this.hasWorkPermit = hasWorkPermit; this.languages = languages; this.moveSuitcase = function () { alert("May I take your suitcase?"); }; }
Call method : ex) bellBoy1.moveSuitcase();
Dot notation (.) : Used to access properties and methods of an object
- ex) object.property or object.method()

7. Keyboard Event Listeners

keydown : Fires when a key is pressed (includes all keys)
keypress : Fires when a character key is pressed (deprecated in modern JS)
Check pressed key : ex) document.addEventListener("keydown", function (event) { console.log(event.key); });

8. Callbacks and Events

Higher-order function: takes a function as an argument
Callback function: the function passed into another function
Tip : $0 (DevTools, Refers to the currently selected element in the Elements panel)

9. Adding Animation

Using classList : ex) document.querySelector("name").classList.add("pressed");
setTimeout(function, milliseconds) : Used to create temporary visual effects
- ex) setTimeout(function () { activeButton.classList.remove("pressed"); }, 100);

15. The Document Object Model (DOM)

avery — Tue, 14 Apr 2026 21:16:13 +0000

1. Adding JavaScript to Websites

<script src="index.js" charset="utf-8"></script>
Place the <script> tag at the end of the <body>
Ensures JavaScript runs after the HTML elements are loaded
Can only manipulate elements that already exist in the DOM

2. Introduction to the DOM

Properties : ex) innerHTML, style, firstChild
Methods : ex) click(), appendChild(), setAttribute()
Tool : HTML Tree Generator (https://chromewebstore.google.com/detail/html-tree-generator/dlbbmhhaadfnbbdnjalilhdakfmiffeg)

3. Selecting HTML Elements

querySelector() : Returns the first matching element, Supports #id, .class, and tag selectors
querySelectorAll() : Returns all matching elements (NodeList)
getElementsByTagName() : Returns elements by tag name (HTMLCollection)
getElementsByClassName() : Returns elements by class name
getElementById() : Returns a single element

4. Manipulating Styles

Use the DOM Style Object : https://www.w3schools.com/jsref/dom_obj_style.asp
Ex) document.querySelector("h1").style.color = "red";

5. Separation of Concerns (Structure vs Style vs Behaviour)

Add class : ex) document.querySelector("name").classList.add("className");
Remove class : ex) document.querySelector("name").classList.remove("className");
Toggle class : ex) document.querySelector("name").classList.toggle("className");

6. Text Manipulation

innerHTML(can include HTML) vs textContent(text only)
- document.querySelector("h1").innerHTML = "<em>Hello</em>";
- document.querySelector("h1").textContent = "Hello";

7. Manipulating Attributes

attributes : shows all attributes
getAttribute() : gets attribute value
setAttribute() : sets or updates attribute value
- ex) document.querySelector("a").setAttribute("href", "https://www.bing.com");

14. Intermediate Javascript

avery — Mon, 13 Apr 2026 21:46:46 +0000

1. Random Number Generation

Generate random numbers
- var n = Math.random();
Returns a number between 0 (inclusive) and 1 (exclusive)
Change range
- Math.floor(n * x) + 1;
- Generates a number between 1 and x

2. Control Statements – If / Else

If / Else condition
- if (track === "clear") { goStraight(); } else { turnRight(); }
Tip : Use a flowchart to visualize logic

3. Comparators and Equality

===(is equal to), !==(is not equal to), >(greater than), <(less than), >=(greater than or equal to), <=(less than or equal to)

4. Combining Conditions

&&(AND), ||(OR), !(NOT)

5. Arrays (Collections)

ex) var list = ["A", "B", "C"];
Length : list.length;
Access element : list[x]; // index starts from 0
Check if value exists : list.includes("A"); // returns true or false

6. Adding Elements to Arrays

Add to the end : list.push("D");

7. While Loop

while (condition) { // do something }
Runs while the condition is true
Used for state-based repetition

8. For Loop

for (let i = 0; i < 2; i++) { // do something }
Structure : (start; condition; change)
Used to iterate a specific number of times

13. Introduction to JavaScript (ES6)

avery — Sun, 12 Apr 2026 19:19:09 +0000

1. Introduction to JavaScript

Why it was created : Created by Brendan Eich, To enable interactive web pages instead of only server-rendered content
ECMAScript : A standard that defines how JavaScript should work across different environments
JavaScript vs Java
- JavaScript: Interpreted language (like Python, Ruby)
- Java: Compiled language (like C/C++, Swift)
Evolution : Initially used for front-end only, Now used for full-stack development

2. JavaScript Alerts – Adding Behaviour to Websites

Console : Used for testing code line by line
DevTools : Sources → Snippets → New Snippet (run full scripts)
Basic structure : alert("Hello");
Function + Message + Execution
Best Practices
- https://github.com/rwaldron/idiomatic.js
- https://en.wikipedia.org/wiki/The_Elements_of_Style

3. Data Types

String (use quotes), Number, Boolean (true, false)
typeof() : Returns the data type of a value

4. JavaScript Variables

Example : var name = "Value";
prompt() : Displays an input popup for the user

5. Naming Conventions for Variables

Do not use reserved keywords
Cannot start with a number
No spaces allowed
Only _ and $ are allowed as special characters
Use camelCase : First word lowercase, next words start with uppercase
Tip : Clear console(Empty Cache and Hard Reload)

6. String Concatenation

Use + to combine strings
- ex) "Hello" + " " + "World"

7. String Length

name.length; : Returns the number of characters

8. Slicing Strings

name.slice(x, y); : Extracts characters from index x to y-1

9. Changing Case

name.toUpperCase();
name.toLowerCase();

10. Basic Arithmetic & Modulo

+(Addition), -(Subtraction), *(Multiplication), /(Division), %(Modulo, remainder)
Use parentheses () to control order

11. Increment & Decrement

x++;(increment), x--;(decrement)
x += y; x -= y; x *= y; x /= y;

12. Creating and Calling Functions

Create a function : function func() {};
Call a function : func();
Naming rules are the same as variables
Tip : Ctrl + F → find and replace

13. Parameters and Arguments

ex) function getMilk(money) {}
- Parameter: variable inside the function (money)
- Argument: actual value passed when calling the function
Reference : https://www.w3schools.com/jsref/jsref_floor.asp

14. Outputs & Return Values

return : Sends a value back from the function
- ex) function add(a, b) { return a + b; }

12. Web Design School - Create a Website that People Love

avery — Sun, 05 Apr 2026 21:36:05 +0000

1. Introduction to Web Design

Core Principles : Colour Theory, User Interface (UI) Design, Typography, User Experience (UX) Design

2. Understanding Colour Theory

Moods of Colors : Red(Love, Energy, Intensity), Yellow(Joy, Intellect, Attention), Green( Freshness, Safety, Growth), Blue(Stability, Trust, Serenity), Purple(Royalty, Wealth, Femininity)
Combining Colors : Use harmonious color palettes, Balance contrast and consistency

3. Understanding Typography and Choosing Fonts

Font Categories
- Serif : Minion Pro (Traditional), Trajan (Stable), Baskerville (Respectable)
- Sans-Serif : Helvetica (Sensible), Avenir (Simple), DIN (Straightforward)
- Script : Freestyle Script (Personal), Adios Script Pro (Creative), Snell Roundhand (Elegant)
- Display : VAG Rounded (Friendly), Gin (Loud), Thirsty Rough (Amusing)
- Modern : Sackers Gothic (Stylish), Gotham (Chic), Futura (Smart)
Readability : Open shapes, Ample inter-character spacing, Unambiguous letterforms, Varying proportions
Best Practices
- Use no more than two fonts per website
- Combine fonts using : Similarity (same mood or era), Contrast (serif vs sans-serif, different weights)

4. Managing Attention with UI Design

Visual Hierarchy : Colour, Size, Layout (consistent alignment and grid usage), White space, Target audience

5. User Experience (UX) Design

Principles : Simplicity, Consistency, Reading patterns(F-layout(text-heavy pages), Z-layout (landing pages)), Responsive design (all platforms), Ethical design(Don’t misuse user attention)

6. Web Design in Practice

Practice Resources
- Daily UI Challenge (100-day design challenge) → https://www.dailyui.co/
- Canva (easy design & web publishing tool) → https://www.canva.com/

11. Bootstrap

avery — Thu, 26 Mar 2026 23:54:33 +0000

1. What is Bootstrap?

CSS Frameworks: Bootstrap, Foundation, MUI, Tailwind, etc.
When to use vs not to use
- Use: for fast, responsive, mobile-first development
- Avoid: for very simple projects or highly customized/complex designs
How to use Bootstrap (CDN; Content Delivery Network)
- Official website: https://getbootstrap.com/
- CSS (inside ) : <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
- min → minified file (faster loading, no unnecessary spaces)
- JavaScript (before ) : <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

2. Bootstrap Layout

12-column system : Uses container → row → col(items)
Auto fit : Columns automatically adjust based on available space
Containers : .container, .container-sm(mobile)/md(iPad)/lg(laptop)/xl(desktop)/xxl(TV)/fluid(full-width)
Sized columns
- ex. <div class="container"> <div class="row"> <div class="col-2">Hello</div> <div class="col-4">Hello</div> <div class="col-6">Hello</div> </div> </div>
Breakpoints : <576px, ≥576px, ≥768px, ≥992px, ≥1200px, ≥1400px
- Multiple breakpoints
- ex. <div class="col-sm-12 col-md-8 col-lg-4"></div>

3. Bootstrap Components

Common components: card, button, carousel, navbar, etc.
Navbar : Can include icons using SVG
- Download and use : ex. <img src="./briefcase.svg" alt="briefcase" height="30">
- Or copy SVG directly: ex. <svg ~ > ~ </svg>
Snippets (Pre-built sections) : Heroes, Features, Footers, ...
- How to use : Inspect → copy → paste → customize
Carousel : Use inside a .container for responsive layout
- ex. <div class="container">  </div>
Spacing(ex. mb-2)
Structure
- Property: m (margin), p (padding)
- Side: t (top), b (bottom), s (start), e (end), x, y
- Size: 0 / 1 / 2 / 3 / 4 / 5 / auto
Dark Mode : ex. <html lang="en" data-bs-theme="dark">
Jumbotron-style : Used for highlighting user feedback(Testimonials) or important content