Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-03-13 12:45:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

new skill web-coder (#881)

Browse Source 
* new skill web-coder

* codespellrc: add aNULL HTTPS config cipher string

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply suggestions from code review

* Apply suggestion from @jhauga

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
John Haugabook
2026-03-05 05:43:04 -05:00
committed by GitHub
parent abcca71546
commit 8fedf95507
19 changed files with 9073 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

346
skills/web-coder/references/accessibility.md Normal file
View File

@@ -0,0 +1,346 @@
# Accessibility Reference
Web accessibility ensures content is usable by everyone, including people with disabilities.
## WCAG (Web Content Accessibility Guidelines)
### Levels
- **A**: Minimum level
- **AA**: Standard target (legal requirement in many jurisdictions)
- **AAA**: Enhanced accessibility
### Four Principles (POUR)
1. **Perceivable**: Information presented in ways users can perceive
2. **Operable**: UI components and navigation are operable
3. **Understandable**: Information and UI operation is understandable
4. **Robust**: Content works with current and future technologies
## ARIA (Accessible Rich Internet Applications)
### ARIA Roles
```html
<!-- Landmark roles -->
<nav role="navigation">
<main role="main">
<aside role="complementary">
<footer role="contentinfo">
<!-- Widget roles -->
<div role="button" tabindex="0">Click me</div>
<div role="tab" aria-selected="true">Tab 1</div>
<div role="dialog" aria-labelledby="dialogTitle">
<!-- Document structure -->
<div role="list">
<div role="listitem">Item 1</div>
</div>
```
### ARIA Attributes
```html
<!-- States -->
<button aria-pressed="true">Toggle</button>
<input aria-invalid="true" aria-errormessage="error1">
<div aria-expanded="false" aria-controls="menu">Menu</div>
<!-- Properties -->
<img alt="" aria-hidden="true">
<input aria-label="Search" type="search">
<dialog aria-labelledby="title" aria-describedby="desc">
<h2 id="title">Dialog Title</h2>
<p id="desc">Description</p>
</dialog>
<!-- Relationships -->
<label id="label1" for="input1">Name:</label>
<input id="input1" aria-labelledby="label1">
<!-- Live regions -->
<div aria-live="polite" aria-atomic="true">
Status updated
</div>
```
## Keyboard Navigation
### Tab Order
```html
<!-- Natural tab order -->
<button>First</button>
<button>Second</button>
<!-- Custom tab order (avoid if possible) -->
<button tabindex="1">First</button>
<button tabindex="2">Second</button>
<!-- Programmatically focusable (not in tab order) -->
<div tabindex="-1">Not in tab order</div>
<!-- In tab order -->
<div tabindex="0" role="button">Custom button</div>
```
### Keyboard Events
```javascript
element.addEventListener('keydown', (e) => {
switch(e.key) {
case 'Enter':
case ' ': // Space
// Activate
break;
case 'Escape':
// Close/cancel
break;
case 'ArrowUp':
case 'ArrowDown':
case 'ArrowLeft':
case 'ArrowRight':
// Navigate
break;
}
});
```
## Semantic HTML
```html
<!-- ✅ Good: semantic elements -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>
<!-- ❌ Bad: non-semantic -->
<div class="nav">
<div><a href="/">Home</a></div>
</div>
<!-- ✅ Good: proper headings hierarchy -->
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<!-- ❌ Bad: skipping levels -->
<h1>Page Title</h1>
<h3>Skipped h2</h3>
```
## Forms Accessibility
```html
<form>
<!-- Labels -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required="true">
<!-- Error messages -->
<input
type="email"
id="email"
aria-invalid="true"
aria-describedby="email-error">
<span id="email-error" role="alert">
Please enter a valid email
</span>
<!-- Fieldset for groups -->
<fieldset>
<legend>Choose an option</legend>
<label>
<input type="radio" name="option" value="a">
Option A
</label>
<label>
<input type="radio" name="option" value="b">
Option B
</label>
</fieldset>
<!-- Help text -->
<label for="password">Password:</label>
<input
type="password"
id="password"
aria-describedby="password-help">
<span id="password-help">
Must be at least 8 characters
</span>
</form>
```
## Images and Media
```html
<!-- Informative image -->
<img src="chart.png" alt="Sales increased 50% in Q1">
<!-- Decorative image -->
<img src="decorative.png" alt="" role="presentation">
<!-- Complex image -->
<figure>
<img src="data-viz.png" alt="Sales data visualization">
<figcaption>
Detailed description of the data...
</figcaption>
</figure>
<!-- Video with captions -->
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>
```
## Color and Contrast
### WCAG Requirements
- **Level AA**: 4.5:1 for normal text, 3:1 for large text
- **Level AAA**: 7:1 for normal text, 4.5:1 for large text
```css
/* ✅ Good contrast */
.text {
color: #000; /* Black */
background: #fff; /* White */
/* Contrast: 21:1 */
}
/* Don't rely on color alone */
.error {
color: red;
/* ✅ Also use icon or text */
&::before {
content: '⚠ ';
}
}
```
## Screen Readers
### Best Practices
```html
<!-- Skip links for navigation -->
<a href="#main-content" class="skip-link">
Skip to main content
</a>
<!-- Accessible headings -->
<h1>Main heading (only one)</h1>
<!-- Descriptive links -->
<!-- ❌ Bad -->
<a href="/article">Read more</a>
<!-- ✅ Good -->
<a href="/article">Read more about accessibility</a>
<!-- Hidden content (screen reader only) -->
<span class="sr-only">
Additional context for screen readers
</span>
```
```css
/* Screen reader only class */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
```
## Focus Management
```css
/* Visible focus indicator */
:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
}
/* Don't remove focus entirely */
/* ❌ Bad */
:focus {
outline: none;
}
/* ✅ Good: custom focus style */
:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
}
```
```javascript
// Focus management in modal
function openModal() {
modal.showModal();
modal.querySelector('button').focus();
// Trap focus
modal.addEventListener('keydown', (e) => {
if (e.key === 'Tab') {
trapFocus(e, modal);
}
});
}
```
## Testing Tools
- **axe DevTools**: Browser extension
- **WAVE**: Web accessibility evaluation tool
- **NVDA**: Screen reader (Windows)
- **JAWS**: Screen reader (Windows)
- **VoiceOver**: Screen reader (macOS/iOS)
- **Lighthouse**: Automated audits
## Checklist
- [ ] Semantic HTML used
- [ ] All images have alt text
- [ ] Color contrast meets WCAG AA
- [ ] Keyboard navigation works
- [ ] Focus indicators visible
- [ ] Forms have labels
- [ ] Heading hierarchy correct
- [ ] ARIA used appropriately
- [ ] Screen reader tested
- [ ] No keyboard traps
## Glossary Terms
**Key Terms Covered**:
- Accessibility
- Accessibility tree
- Accessible description
- Accessible name
- ARIA
- ATAG
- Boolean attribute (ARIA)
- Screen reader
- UAAG
- WAI
- WCAG
## Additional Resources
- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
- [MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
- [WebAIM](https://webaim.org/)
- [A11y Project](https://www.a11yproject.com/)

625
skills/web-coder/references/architecture-patterns.md Normal file
View File

@@ -0,0 +1,625 @@
# Architecture & Patterns Reference
Web application architectures, design patterns, and architectural concepts.
## Application Architectures
### Single Page Application (SPA)
Web app that loads single HTML page and dynamically updates content.
**Characteristics**:
- Client-side routing
- Heavy JavaScript usage
- Fast navigation after initial load
- Complex state management
**Pros**:
- Smooth user experience
- Reduced server load
- Mobile app-like feel
**Cons**:
- Larger initial download
- SEO challenges (mitigated with SSR)
- Complex state management
**Examples**: React, Vue, Angular apps
```javascript
// React Router example
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/products/:id" element={<Product />} />
</Routes>
</BrowserRouter>
);
}
```
### Multi-Page Application (MPA)
Traditional web app with multiple HTML pages.
**Characteristics**:
- Server renders each page
- Full page reload on navigation
- Simpler architecture
**Pros**:
- Better SEO out of the box
- Simpler to build
- Good for content-heavy sites
**Cons**:
- Slower navigation
- More server requests
### Progressive Web App (PWA)
Web app with native app capabilities.
**Features**:
- Installable
- Offline support (Service Workers)
- Push notifications
- App-like experience
```javascript
// Service Worker registration
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered', reg))
.catch(err => console.error('SW error', err));
}
```
**manifest.json**:
```json
{
"name": "My PWA",
"short_name": "PWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
```
### Server-Side Rendering (SSR)
Render pages on server, send HTML to client.
**Pros**:
- Better SEO
- Faster first contentful paint
- Works without JavaScript
**Cons**:
- Higher server load
- More complex setup
**Frameworks**: Next.js, Nuxt.js, SvelteKit
```javascript
// Next.js SSR
export async function getServerSideProps() {
const data = await fetchData();
return { props: { data } };
}
function Page({ data }) {
return <div>{data.title}</div>;
}
```
### Static Site Generation (SSG)
Pre-render pages at build time.
**Pros**:
- Extremely fast
- Low server cost
- Great SEO
**Best for**: Blogs, documentation, marketing sites
**Tools**: Next.js, Gatsby, Hugo, Jekyll, Eleventy
```javascript
// Next.js SSG
export async function getStaticProps() {
const data = await fetchData();
return { props: { data } };
}
export async function getStaticPaths() {
const paths = await fetchPaths();
return { paths, fallback: false };
}
```
### Incremental Static Regeneration (ISR)
Update static content after build.
```javascript
// Next.js ISR
export async function getStaticProps() {
const data = await fetchData();
return {
props: { data },
revalidate: 60 // Revalidate every 60 seconds
};
}
```
### JAMstack
JavaScript, APIs, Markup architecture.
**Principles**:
- Pre-rendered static files
- APIs for dynamic functionality
- Git-based workflows
- CDN deployment
**Benefits**:
- Fast performance
- High security
- Scalability
- Developer experience
## Rendering Patterns
### Client-Side Rendering (CSR)
JavaScript renders content in browser.
```html
<div id="root"></div>
<script>
// React renders app here
ReactDOM.render(<App />, document.getElementById('root'));
</script>
```
### Hydration
Attach JavaScript to server-rendered HTML.
```javascript
// React hydration
ReactDOM.hydrate(<App />, document.getElementById('root'));
```
### Partial Hydration
Hydrate only interactive components.
**Tools**: Astro, Qwik
### Islands Architecture
Independent interactive components in static HTML.
**Concept**: Ship minimal JavaScript, hydrate only "islands" of interactivity
**Frameworks**: Astro, Eleventy with Islands
## Design Patterns
### MVC (Model-View-Controller)
Separate data, presentation, and logic.
- **Model**: Data and business logic
- **View**: UI presentation
- **Controller**: Handle input, update model/view
### MVVM (Model-View-ViewModel)
Similar to MVC with data binding.
- **Model**: Data
- **View**: UI
- **ViewModel**: View logic and state
**Used in**: Vue.js, Angular, Knockout
### Component-Based Architecture
Build UI from reusable components.
```javascript
// React component
function Button({ onClick, children }) {
return (
<button onClick={onClick} className="btn">
{children}
</button>
);
}
// Usage
<Button onClick={handleClick}>Click me</Button>
```
### Micro Frontends
Split frontend into smaller, independent apps.
**Approaches**:
- Build-time integration
- Run-time integration (iframes, Web Components)
- Edge-side includes
## State Management
### Local State
Component-level state.
```javascript
// React useState
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```
### Global State
Application-wide state.
**Solutions**:
- **Redux**: Predictable state container
- **MobX**: Observable state
- **Zustand**: Minimal state management
- **Recoil**: Atomic state management
```javascript
// Redux example
import { createSlice, configureStore } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: state => { state.value += 1; }
}
});
const store = configureStore({
reducer: { counter: counterSlice.reducer }
});
```
### Context API
Share state without prop drilling.
```javascript
// React Context
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
const theme = useContext(ThemeContext);
return <div className={theme}>...</div>;
}
```
## API Architecture Patterns
### REST (Representational State Transfer)
Resource-based API design.
```javascript
// RESTful API
GET /api/users // List users
GET /api/users/1 // Get user
POST /api/users // Create user
PUT /api/users/1 // Update user
DELETE /api/users/1 // Delete user
```
### GraphQL
Query language for APIs.
```graphql
# Query
query {
user(id: "1") {
name
email
posts {
title
}
}
}
# Mutation
mutation {
createUser(name: "John", email: "john@example.com") {
id
name
}
}
```
```javascript
// Apollo Client
import { useQuery, gql } from '@apollo/client';
const GET_USER = gql`
query GetUser($id: ID!) {
user(id: $id) {
name
email
}
}
`;
function User({ id }) {
const { loading, error, data } = useQuery(GET_USER, {
variables: { id }
});
if (loading) return <p>Loading...</p>;
return <p>{data.user.name}</p>;
}
```
### tRPC
End-to-end typesafe APIs.
```typescript
// Server
const appRouter = router({
getUser: publicProcedure
.input(z.string())
.query(async ({ input }) => {
return await db.user.findUnique({ where: { id: input } });
})
});
// Client (fully typed!)
const user = await trpc.getUser.query('1');
```
## Microservices Architecture
Split application into small, independent services.
**Characteristics**:
- Independent deployment
- Service-specific databases
- API communication
- Decentralized governance
**Benefits**:
- Scalability
- Technology flexibility
- Fault isolation
**Challenges**:
- Complexity
- Network latency
- Data consistency
## Monolithic Architecture
Single, unified application.
**Pros**:
- Simpler development
- Easier debugging
- Single deployment
**Cons**:
- Scaling challenges
- Technology lock-in
- Tight coupling
## Serverless Architecture
Run code without managing servers.
**Platforms**: AWS Lambda, Vercel Functions, Netlify Functions, Cloudflare Workers
```javascript
// Vercel serverless function
export default function handler(req, res) {
res.status(200).json({ message: 'Hello from serverless!' });
}
```
**Benefits**:
- Auto-scaling
- Pay per use
- No server management
**Use Cases**:
- APIs
- Background jobs
- Webhooks
- Image processing
## Architectural Best Practices
### Separation of Concerns
Keep different aspects separate:
- Presentation layer
- Business logic layer
- Data access layer
### DRY (Don't Repeat Yourself)
Avoid code duplication.
### SOLID Principles
- **S**ingle Responsibility
- **O**pen/Closed
- **L**iskov Substitution
- **I**nterface Segregation
- **D**ependency Inversion
### Composition over Inheritance
Prefer composing objects over class hierarchies.
```javascript
// Composition
function withLogging(Component) {
return function LoggedComponent(props) {
console.log('Rendering', Component.name);
return <Component {...props} />;
};
}
const LoggedButton = withLogging(Button);
```
## Module Systems
### ES Modules (ESM)
Modern JavaScript modules.
```javascript
// export
export const name = 'John';
export function greet() {}
export default App;
// import
import App from './App.js';
import { name, greet } from './utils.js';
import * as utils from './utils.js';
```
### CommonJS
Node.js module system.
```javascript
// export
module.exports = { name: 'John' };
exports.greet = function() {};
// import
const { name } = require('./utils');
```
## Build Optimization
### Code Splitting
Split code into smaller chunks.
```javascript
// React lazy loading
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
}
```
### Tree Shaking
Remove unused code.
```javascript
// Only imports 'map', not entire lodash
import { map } from 'lodash-es';
```
### Bundle Splitting
- **Vendor bundle**: Third-party dependencies
- **App bundle**: Application code
- **Route bundles**: Per-route code
## Glossary Terms
**Key Terms Covered**:
- Abstraction
- API
- Application
- Architecture
- Asynchronous
- Binding
- Block (CSS, JS)
- Call stack
- Class
- Client-side
- Control flow
- Delta
- Design pattern
- Event
- Fetch
- First-class Function
- Function
- Garbage collection
- Grid
- Hoisting
- Hydration
- Idempotent
- Instance
- Lazy load
- Main thread
- MVC
- Polyfill
- Progressive Enhancement
- Progressive web apps
- Property
- Prototype
- Prototype-based programming
- REST
- Reflow
- Round Trip Time (RTT)
- SPA
- Semantics
- Server
- Synthetic monitoring
- Thread
- Type
## Additional Resources
- [Patterns.dev](https://www.patterns.dev/)
- [React Patterns](https://reactpatterns.com/)
- [JAMstack](https://jamstack.org/)
- [Micro Frontends](https://micro-frontends.org/)

358
skills/web-coder/references/browsers-engines.md Normal file
View File

@@ -0,0 +1,358 @@
# Browsers & Engines Reference
Web browsers, rendering engines, and browser-specific information.
## Major Browsers
### Google Chrome
**Engine**: Blink (rendering), V8 (JavaScript)
**Released**: 2008
**Market Share**: ~65% (desktop)
**Developer Tools**:
- Elements panel
- Console
- Network tab
- Performance profiler
- Lighthouse audits
### Mozilla Firefox
**Engine**: Gecko (rendering), SpiderMonkey (JavaScript)
**Released**: 2004
**Market Share**: ~3% (desktop)
**Features**:
- Strong privacy focus
- Container tabs
- Enhanced tracking protection
- Developer Edition
### Apple Safari
**Engine**: WebKit (rendering), JavaScriptCore (JavaScript)
**Released**: 2003
**Market Share**: ~20% (desktop), dominant on iOS
**Features**:
- Energy efficient
- Privacy-focused
- Intelligent Tracking Prevention
- Only browser allowed on iOS
### Microsoft Edge
**Engine**: Blink (Chromium-based since 2020)
**Released**: 2015 (EdgeHTML), 2020 (Chromium)
**Features**:
- Windows integration
- Collections
- Vertical tabs
- IE Mode (compatibility)
### Opera
**Engine**: Blink
**Based on**: Chromium
**Features**:
- Built-in VPN
- Ad blocker
- Sidebar
## Rendering Engines
### Blink
**Used by**: Chrome, Edge, Opera, Vivaldi
**Forked from**: WebKit (2013)
**Language**: C++
### WebKit
**Used by**: Safari
**Origin**: KHTML (KDE)
**Language**: C++
### Gecko
**Used by**: Firefox
**Developed by**: Mozilla
**Language**: C++, Rust
### Legacy Engines
- **Trident**: Internet Explorer (deprecated)
- **EdgeHTML**: Original Edge (deprecated)
- **Presto**: Old Opera (deprecated)
## JavaScript Engines
| Engine | Browser | Language |
|--------|---------|----------|
| V8 | Chrome, Edge | C++ |
| SpiderMonkey | Firefox | C++, Rust |
| JavaScriptCore | Safari | C++ |
| Chakra | IE/Edge (legacy) | C++ |
### V8 Features
- JIT compilation
- Inline caching
- Hidden classes
- Garbage collection
- WASM support
## Browser DevTools
### Chrome DevTools
```javascript
// Console API
console.log('message');
console.table(array);
console.time('label');
console.timeEnd('label');
// Command Line API
$() // document.querySelector()
$$() // document.querySelectorAll()
$x() // XPath query
copy(object) // Copy to clipboard
monitor(function) // Log function calls
```
**Panels**:
- Elements: DOM inspection
- Console: JavaScript console
- Sources: Debugger
- Network: HTTP requests
- Performance: Profiling
- Memory: Heap snapshots
- Application: Storage, service workers
- Security: Certificate info
- Lighthouse: Audits
### Firefox DevTools
**Unique Features**:
- CSS Grid Inspector
- Font Editor
- Accessibility Inspector
- Network throttling
## Cross-Browser Compatibility
### Browser Prefixes (Vendor Prefixes)
```css
/* Legacy - use autoprefixer instead */
.element {
-webkit-transform: rotate(45deg); /* Chrome, Safari */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE */
-o-transform: rotate(45deg); /* Opera */
transform: rotate(45deg); /* Standard */
}
```
**Modern approach**: Use build tools (Autoprefixer)
### User Agent String
```javascript
// Check browser
const userAgent = navigator.userAgent;
if (userAgent.includes('Firefox')) {
// Firefox-specific code
} else if (userAgent.includes('Chrome')) {
// Chrome-specific code
}
// Better: Feature detection
if ('serviceWorker' in navigator) {
// Modern browser
}
```
### Graceful Degradation vs Progressive Enhancement
**Graceful Degradation**: Build for modern, degrade for old
```css
.container {
display: grid; /* Modern browsers */
display: block; /* Fallback */
}
```
**Progressive Enhancement**: Build base, enhance for modern
```css
.container {
display: block; /* Base */
}
@supports (display: grid) {
.container {
display: grid; /* Enhancement */
}
}
```
## Browser Features
### Service Workers
Background scripts for offline functionality
**Supported**: All modern browsers
### WebAssembly
Binary instruction format for web
**Supported**: All modern browsers
### Web Components
Custom HTML elements
**Supported**: All modern browsers (with polyfills)
### WebRTC
Real-time communication
**Supported**: All modern browsers
## Browser Storage
| Storage | Size | Expiration | Scope |
|---------|------|------------|-------|
| Cookies | 4KB | Configurable | Domain |
| LocalStorage | 5-10MB | Never | Origin |
| SessionStorage | 5-10MB | Tab close | Origin |
| IndexedDB | 50MB+ | Never | Origin |
## Mobile Browsers
### iOS Safari
- Only browser allowed on iOS
- All iOS browsers use WebKit
- Different from desktop Safari
### Chrome Mobile (Android)
- Blink engine
- Similar to desktop Chrome
### Samsung Internet
- Based on Chromium
- Popular on Samsung devices
## Browser Market Share (2026)
**Desktop**:
- Chrome: ~65%
- Safari: ~20%
- Edge: ~5%
- Firefox: ~3%
- Other: ~7%
**Mobile**:
- Chrome: ~65%
- Safari: ~25%
- Samsung Internet: ~5%
- Other: ~5%
## Testing Browsers
### Tools
- **BrowserStack**: Cloud browser testing
- **Sauce Labs**: Automated testing
- **CrossBrowserTesting**: Live testing
- **LambdaTest**: Cross-browser testing
### Virtual Machines
- **VirtualBox**: Free virtualization
- **Parallels**: Mac virtualization
- **Windows Dev VMs**: Free Windows VMs
## Developer Features
### Chromium-based Developer Features
- **Remote Debugging**: Debug mobile devices
- **Workspaces**: Edit files directly
- **Snippets**: Reusable code snippets
- **Coverage**: Unused code detection
### Firefox Developer Edition
- **CSS Grid Inspector**
- **Flexbox Inspector**
- **Font Panel**
- **Accessibility Audits**
## Browser Extensions
### Manifest V3 (Modern)
```json
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0",
"permissions": ["storage", "activeTab"],
"action": {
"default_popup": "popup.html"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content.js"]
}]
}
```
## Glossary Terms
**Key Terms Covered**:
- Apple Safari
- Blink
- blink element
- Browser
- Browsing context
- Chrome
- Developer tools
- Engine
- Firefox OS
- Gecko
- Google Chrome
- JavaScript engine
- Microsoft Edge
- Microsoft Internet Explorer
- Mozilla Firefox
- Netscape Navigator
- Opera browser
- Presto
- Rendering engine
- Trident
- User agent
- Vendor prefix
- WebKit
## Additional Resources
- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)
- [Firefox Developer Tools](https://firefox-source-docs.mozilla.org/devtools-user/)
- [Safari Web Inspector](https://developer.apple.com/safari/tools/)
- [Can I Use](https://caniuse.com/)
- [Browser Market Share](https://gs.statcounter.com/)

696
skills/web-coder/references/css-styling.md Normal file
View File

@@ -0,0 +1,696 @@
# CSS & Styling Reference
Comprehensive reference for Cascading Style Sheets, layout systems, and modern styling techniques.
## Core Concepts
### CSS (Cascading Style Sheets)
Style sheet language used for describing the presentation of HTML documents.
**Three Ways to Apply CSS**:
1. **Inline**: `<div style="color: blue;">`
2. **Internal**: `<style>` tag in HTML
3. **External**: Separate `.css` file (recommended)
### The Cascade
The algorithm that determines which CSS rules apply when multiple rules target the same element.
**Priority Order** (highest to lowest):
1. Inline styles
2. ID selectors (`#id`)
3. Class selectors (`.class`), attribute selectors, pseudo-classes
4. Element selectors (`div`, `p`)
5. Inherited properties
**Important**: `!important` declaration overrides normal specificity (use sparingly)
### CSS Selectors
| Selector | Example | Description |
|----------|---------|-------------|
| Element | `p` | Selects all `<p>` elements |
| Class | `.button` | Selects elements with `class="button"` |
| ID | `#header` | Selects element with `id="header"` |
| Universal | `*` | Selects all elements |
| Descendant | `div p` | `<p>` inside `<div>` (any level) |
| Child | `div > p` | Direct child `<p>` of `<div>` |
| Adjacent Sibling | `h1 + p` | `<p>` immediately after `<h1>` |
| General Sibling | `h1 ~ p` | All `<p>` siblings after `<h1>` |
| Attribute | `[type="text"]` | Elements with specific attribute |
| Attribute Contains | `[href*="example"]` | Contains substring |
| Attribute Starts | `[href^="https"]` | Starts with string |
| Attribute Ends | `[href$=".pdf"]` | Ends with string |
### Pseudo-Classes
Target elements based on state or position:
```css
/* Link states */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
a:focus { outline: 2px solid blue; }
/* Structural */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f0f0f0; }
li:nth-child(3n) { color: red; }
p:not(.special) { color: gray; }
/* Form states */
input:required { border-color: red; }
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }
```
### Pseudo-Elements
Style specific parts of elements:
```css
/* First line/letter */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
/* Generated content */
.quote::before { content: '"'; }
.quote::after { content: '"'; }
/* Selection */
::selection { background: yellow; color: black; }
/* Placeholder */
input::placeholder { color: #999; }
```
## Box Model
Every element is a rectangular box with:
1. **Content**: The actual content (text, images)
2. **Padding**: Space around content, inside border
3. **Border**: Line around padding
4. **Margin**: Space outside border
```css
.box {
/* Content size */
width: 300px;
height: 200px;
/* Padding */
padding: 20px; /* All sides */
padding: 10px 20px; /* Vertical | Horizontal */
padding: 10px 20px 15px 25px; /* Top | Right | Bottom | Left */
/* Border */
border: 2px solid #333;
border-radius: 8px;
/* Margin */
margin: 20px auto; /* Vertical | Horizontal (auto centers) */
/* Box-sizing changes how width/height work */
box-sizing: border-box; /* Include padding/border in width/height */
}
```
## Layout Systems
### Flexbox
One-dimensional layout system (row or column):
```css
.container {
display: flex;
/* Direction */
flex-direction: row; /* row | row-reverse | column | column-reverse */
/* Wrapping */
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
/* Main axis alignment */
justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
/* Cross axis alignment */
align-items: center; /* flex-start | flex-end | center | stretch | baseline */
/* Multi-line cross axis */
align-content: center; /* flex-start | flex-end | center | space-between | space-around | stretch */
/* Gap between items */
gap: 1rem;
}
.item {
/* Grow factor */
flex-grow: 1; /* Takes available space */
/* Shrink factor */
flex-shrink: 1; /* Can shrink if needed */
/* Base size */
flex-basis: 200px; /* Initial size before growing/shrinking */
/* Shorthand */
flex: 1 1 200px; /* grow | shrink | basis */
/* Individual alignment */
align-self: flex-end; /* Overrides container's align-items */
/* Order */
order: 2; /* Change visual order (default: 0) */
}
```
### CSS Grid
Two-dimensional layout system (rows and columns):
```css
.container {
display: grid;
/* Define columns */
grid-template-columns: 200px 1fr 1fr; /* Fixed | Flexible | Flexible */
grid-template-columns: repeat(3, 1fr); /* Three equal columns */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive */
/* Define rows */
grid-template-rows: 100px auto 50px; /* Fixed | Auto | Fixed */
/* Named areas */
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
/* Gap between cells */
gap: 1rem; /* Row and column gap */
row-gap: 1rem;
column-gap: 2rem;
/* Alignment */
justify-items: start; /* Align items horizontally within cells */
align-items: start; /* Align items vertically within cells */
justify-content: center; /* Align grid within container horizontally */
align-content: center; /* Align grid within container vertically */
}
.item {
/* Span columns */
grid-column: 1 / 3; /* Start / End */
grid-column: span 2; /* Span 2 columns */
/* Span rows */
grid-row: 1 / 3;
grid-row: span 2;
/* Named area */
grid-area: header;
/* Individual alignment */
justify-self: center; /* Horizontal alignment */
align-self: center; /* Vertical alignment */
}
```
### Grid vs Flexbox
| Use Case | Best Choice |
|----------|-------------|
| One-dimensional layout (row or column) | Flexbox |
| Two-dimensional layout (rows and columns) | Grid |
| Align items along one axis | Flexbox |
| Create complex page layouts | Grid |
| Distribute space between items | Flexbox |
| Precise control over rows and columns | Grid |
| Content-first responsive design | Flexbox |
| Layout-first responsive design | Grid |
## Positioning
### Position Types
```css
/* Static (default) - normal flow */
.static { position: static; }
/* Relative - offset from normal position */
.relative {
position: relative;
top: 10px; /* Move down 10px */
left: 20px; /* Move right 20px */
}
/* Absolute - removed from flow, positioned relative to nearest positioned ancestor */
.absolute {
position: absolute;
top: 0;
right: 0;
}
/* Fixed - removed from flow, positioned relative to viewport */
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
}
/* Sticky - switches between relative and fixed based on scroll */
.sticky {
position: sticky;
top: 0; /* Sticks to top when scrolling */
}
```
### Inset Properties
Shorthand for positioning:
```css
.element {
position: absolute;
inset: 0; /* All sides: top, right, bottom, left = 0 */
inset: 10px 20px; /* Vertical | Horizontal */
inset: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
}
```
### Stacking Context
Control layering with `z-index`:
```css
.behind { z-index: 1; }
.ahead { z-index: 10; }
.top { z-index: 100; }
```
**Note**: `z-index` only works on positioned elements (not `static`)
## Responsive Design
### Media Queries
Apply styles based on device characteristics:
```css
/* Mobile-first approach */
.container {
padding: 1rem;
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
padding: 3rem;
}
}
/* Landscape orientation */
@media (orientation: landscape) {
.header { height: 60px; }
}
/* High-DPI screens */
@media (min-resolution: 192dpi) {
.logo { background-image: url('logo@2x.png'); }
}
/* Dark mode preference */
@media (prefers-color-scheme: dark) {
body {
background: #222;
color: #fff;
}
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
```
### Responsive Units
| Unit | Description | Example |
|------|-------------|---------|
| `px` | Pixels (absolute) | `16px` |
| `em` | Relative to parent font-size | `1.5em` |
| `rem` | Relative to root font-size | `1.5rem` |
| `%` | Relative to parent | `50%` |
| `vw` | Viewport width (1vw = 1% of viewport width) | `50vw` |
| `vh` | Viewport height | `100vh` |
| `vmin` | Smaller of vw or vh | `10vmin` |
| `vmax` | Larger of vw or vh | `10vmax` |
| `ch` | Width of "0" character | `40ch` |
| `fr` | Fraction of available space (Grid only) | `1fr` |
### Responsive Images
```css
img {
max-width: 100%;
height: auto;
}
/* Art direction with picture element */
```
```html
<picture>
<source media="(min-width: 1024px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive image">
</picture>
```
## Typography
```css
.text {
/* Font family */
font-family: 'Helvetica Neue', Arial, sans-serif;
/* Font size */
font-size: 16px; /* Base size */
font-size: 1rem; /* Relative to root */
font-size: clamp(14px, 2vw, 20px); /* Responsive with min/max */
/* Font weight */
font-weight: normal; /* 400 */
font-weight: bold; /* 700 */
font-weight: 300; /* Light */
/* Font style */
font-style: italic;
/* Line height */
line-height: 1.5; /* 1.5 times font-size */
line-height: 24px;
/* Letter spacing */
letter-spacing: 0.05em;
/* Text alignment */
text-align: left; /* left | right | center | justify */
/* Text decoration */
text-decoration: underline;
text-decoration: none; /* Remove underline from links */
/* Text transform */
text-transform: uppercase; /* uppercase | lowercase | capitalize */
/* Word spacing */
word-spacing: 0.1em;
/* White space handling */
white-space: nowrap; /* Don't wrap */
white-space: pre-wrap; /* Preserve whitespace, wrap lines */
/* Text overflow */
overflow: hidden;
text-overflow: ellipsis; /* Show ... when text overflows */
/* Word break */
word-wrap: break-word; /* Break long words */
overflow-wrap: break-word; /* Modern version */
}
```
## Colors
```css
.colors {
/* Named colors */
color: red;
/* Hex */
color: #ff0000; /* Red */
color: #f00; /* Shorthand */
color: #ff0000ff; /* With alpha */
/* RGB */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* With alpha */
color: rgb(255 0 0 / 0.5); /* Modern syntax */
/* HSL (Hue, Saturation, Lightness) */
color: hsl(0, 100%, 50%); /* Red */
color: hsla(0, 100%, 50%, 0.5); /* With alpha */
color: hsl(0 100% 50% / 0.5); /* Modern syntax */
/* Color keywords */
color: currentColor; /* Inherit color */
color: transparent;
}
```
### CSS Color Space
Modern color spaces for wider gamut:
```css
.modern-colors {
/* Display P3 (Apple devices) */
color: color(display-p3 1 0 0);
/* Lab color space */
color: lab(50% 125 0);
/* LCH color space */
color: lch(50% 125 0deg);
}
```
## Animations and Transitions
### Transitions
Smooth changes between states:
```css
.button {
background: blue;
color: white;
transition: all 0.3s ease;
/* transition: property duration timing-function delay */
}
.button:hover {
background: darkblue;
transform: scale(1.05);
}
/* Individual properties */
.element {
transition-property: opacity, transform;
transition-duration: 0.3s, 0.5s;
transition-timing-function: ease, ease-in-out;
transition-delay: 0s, 0.1s;
}
```
### Keyframe Animations
```css
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.element {
animation: fadeIn 0.5s ease forwards;
/* animation: name duration timing-function delay iteration-count direction fill-mode */
}
/* Multiple keyframes */
@keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
.slider {
animation: slide 2s infinite alternate;
}
```
## Transforms
```css
.transform {
/* Translate (move) */
transform: translate(50px, 100px); /* X, Y */
transform: translateX(50px);
transform: translateY(100px);
/* Rotate */
transform: rotate(45deg);
/* Scale */
transform: scale(1.5); /* 150% size */
transform: scale(2, 0.5); /* X, Y different */
/* Skew */
transform: skew(10deg, 5deg);
/* Multiple transforms */
transform: translate(50px, 0) rotate(45deg) scale(1.2);
/* 3D transforms */
transform: rotateX(45deg) rotateY(30deg);
transform: perspective(500px) translateZ(100px);
}
```
## CSS Variables (Custom Properties)
```css
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--spacing: 1rem;
--border-radius: 4px;
}
.element {
color: var(--primary-color);
padding: var(--spacing);
border-radius: var(--border-radius);
/* With fallback */
color: var(--accent-color, red);
}
/* Dynamic changes */
.dark-theme {
--primary-color: #0056b3;
--background: #222;
--text: #fff;
}
```
## CSS Preprocessors
### Common Features
- Variables
- Nesting
- Mixins (reusable styles)
- Functions
- Imports
**Popular Preprocessors**: Sass/SCSS, Less, Stylus
## Best Practices
### Do's
- ✅ Use external stylesheets
- ✅ Use class selectors over ID selectors
- ✅ Keep specificity low
- ✅ Use responsive units (rem, em, %)
- ✅ Mobile-first approach
- ✅ Use CSS variables for theming
- ✅ Organize CSS logically
- ✅ Use shorthand properties
- ✅ Minify CSS for production
### Don'ts
- ❌ Use `!important` excessively
- ❌ Use inline styles
- ❌ Use fixed pixel widths
- ❌ Over-nest selectors
- ❌ Use vendor prefixes manually (use autoprefixer)
- ❌ Forget to test cross-browser
- ❌ Use IDs for styling
- ❌ Ignore CSS specificity
## Glossary Terms
**Key Terms Covered**:
- Alignment container
- Alignment subject
- Aspect ratio
- Baseline
- Block (CSS)
- Bounding box
- Cross Axis
- CSS
- CSS Object Model (CSSOM)
- CSS pixel
- CSS preprocessor
- Descriptor (CSS)
- Fallback alignment
- Flex
- Flex container
- Flex item
- Flexbox
- Flow relative values
- Grid
- Grid areas
- Grid Axis
- Grid Cell
- Grid Column
- Grid container
- Grid lines
- Grid Row
- Grid Tracks
- Gutters
- Ink overflow
- Inset properties
- Layout mode
- Logical properties
- Main axis
- Media query
- Physical properties
- Pixel
- Property (CSS)
- Pseudo-class
- Pseudo-element
- Selector (CSS)
- Stacking context
- Style origin
- Stylesheet
- Vendor prefix
## Additional Resources
- [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [CSS Tricks Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [CSS Tricks Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Can I Use](https://caniuse.com/) - Browser compatibility tables

411
skills/web-coder/references/data-formats-encoding.md Normal file
View File

@@ -0,0 +1,411 @@
# Data Formats & Encoding Reference
Data formats, character encodings, and serialization for web development.
## JSON (JavaScript Object Notation)
Lightweight data interchange format.
### Syntax
```json
{
"string": "value",
"number": 42,
"boolean": true,
"null": null,
"array": [1, 2, 3],
"object": {
"nested": "value"
}
}
```
**Permitted Types**: string, number, boolean, null, array, object
**Not Permitted**: undefined, functions, dates, RegExp
### JavaScript Methods
```javascript
// Parse JSON string
const data = JSON.parse('{"name":"John","age":30}');
// Stringify object
const json = JSON.stringify({ name: 'John', age: 30 });
// Pretty print (indentation)
const json = JSON.stringify(data, null, 2);
// Custom serialization
const json = JSON.stringify(obj, (key, value) => {
if (key === 'password') return undefined; // Exclude
return value;
});
// toJSON method
const obj = {
name: 'John',
date: new Date(),
toJSON() {
return {
name: this.name,
date: this.date.toISOString()
};
}
};
```
### JSON Type Representation
How JavaScript types map to JSON:
- String → string
- Number → number
- Boolean → boolean
- null → null
- Array → array
- Object → object
- undefined → omitted
- Function → omitted
- Symbol → omitted
- Date → ISO 8601 string
## XML (Extensible Markup Language)
Markup language for encoding documents.
```xml
<?xml version="1.0" encoding="UTF-8"?>
<users>
<user id="1">
<name>John Doe</name>
<email>john@example.com</email>
</user>
<user id="2">
<name>Jane Smith</name>
<email>jane@example.com</email>
</user>
</users>
```
**Use Cases**:
- Configuration files
- Data exchange
- RSS/Atom feeds
- SOAP web services
### Parsing XML in JavaScript
```javascript
// Parse XML string
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
// Query elements
const users = xmlDoc.querySelectorAll('user');
users.forEach(user => {
const name = user.querySelector('name').textContent;
console.log(name);
});
// Create XML
const serializer = new XMLSerializer();
const xmlString = serializer.serializeToString(xmlDoc);
```
## Character Encoding
### UTF-8
Universal character encoding (recommended for web).
**Characteristics**:
- Variable-width (1-4 bytes per character)
- Backward compatible with ASCII
- Supports all Unicode characters
```html
<meta charset="UTF-8">
```
### UTF-16
2 or 4 bytes per character.
**Use**: JavaScript internally uses UTF-16
```javascript
'A'.charCodeAt(0); // 65
String.fromCharCode(65); // 'A'
// Emoji (requires surrogate pair in UTF-16)
'😀'.length; // 2 (in JavaScript)
```
### ASCII
7-bit encoding (128 characters).
**Range**: 0-127
**Includes**: English letters, digits, common symbols
### Code Point vs Code Unit
- **Code Point**: Unicode character (U+0041 = 'A')
- **Code Unit**: 16-bit value in UTF-16
```javascript
// Code points
'A'.codePointAt(0); // 65
String.fromCodePoint(0x1F600); // '😀'
// Iterate code points
for (const char of 'Hello 😀') {
console.log(char);
}
```
## Base64
Binary-to-text encoding scheme.
```javascript
// Encode
const encoded = btoa('Hello World'); // "SGVsbG8gV29ybGQ="
// Decode
const decoded = atob('SGVsbG8gV29ybGQ='); // "Hello World"
// Handle Unicode (requires extra step)
const encoded = btoa(unescape(encodeURIComponent('Hello 世界')));
const decoded = decodeURIComponent(escape(atob(encoded)));
// Modern approach
const encoder = new TextEncoder();
const decoder = new TextDecoder();
const bytes = encoder.encode('Hello 世界');
const decoded = decoder.decode(bytes);
```
**Use Cases**:
- Embed binary data in JSON/XML
- Data URLs (`data:image/png;base64,...`)
- Basic authentication headers
## URL Encoding (Percent Encoding)
Encode special characters in URLs.
```javascript
// encodeURIComponent (encode everything except: A-Z a-z 0-9 - _ . ! ~ * ' ( ))
const encoded = encodeURIComponent('Hello World!'); // "Hello%20World%21"
const decoded = decodeURIComponent(encoded); // "Hello World!"
// encodeURI (encode less - for full URLs)
const url = encodeURI('http://example.com/search?q=hello world');
// Modern URL API
const url = new URL('http://example.com/search');
url.searchParams.set('q', 'hello world');
console.log(url.toString()); // Automatically encoded
```
## MIME Types
Media type identification.
### Common MIME Types
| Type | MIME Type |
|------|-----------|
| HTML | `text/html` |
| CSS | `text/css` |
| JavaScript | `text/javascript`, `application/javascript` |
| JSON | `application/json` |
| XML | `application/xml`, `text/xml` |
| Plain Text | `text/plain` |
| JPEG | `image/jpeg` |
| PNG | `image/png` |
| GIF | `image/gif` |
| SVG | `image/svg+xml` |
| PDF | `application/pdf` |
| ZIP | `application/zip` |
| MP4 Video | `video/mp4` |
| MP3 Audio | `audio/mpeg` |
| Form Data | `application/x-www-form-urlencoded` |
| Multipart | `multipart/form-data` |
```html
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="app.js" type="text/javascript"></script>
```
```http
Content-Type: application/json; charset=utf-8
Content-Type: text/html; charset=utf-8
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary
```
## Serialization & Deserialization
Converting data structures to/from storable format.
### JSON Serialization
```javascript
// Serialize
const obj = { name: 'John', date: new Date() };
const json = JSON.stringify(obj);
// Deserialize
const parsed = JSON.parse(json);
```
### Serializable Objects
Objects that can be serialized by structured clone algorithm:
- Basic types
- Arrays, Objects,
- Date, RegExp
- Map, Set
- ArrayBuffer, TypedArrays
**Not Serializable**:
- Functions
- DOM nodes
- Symbols (as values)
- Objects with prototype methods
## Character References
HTML entities for special characters.
```html
&lt; <!-- < -->
&gt; <!-- > -->
&amp; <!-- & -->
&quot; <!-- " -->
&apos; <!-- ' -->
&nbsp; <!-- non-breaking space -->
&copy; <!-- © -->
&#8364; <!-- € -->
&#x20AC; <!-- € (hex) -->
```
## Data URLs
Embed data directly in URLs.
```html
<!-- Inline image -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="Icon">
<!-- Inline SVG -->
<img src="data:image/svg+xml,%3Csvg xmlns='...'%3E...%3C/svg%3E" alt="Logo">
<!-- Inline CSS -->
<link rel="stylesheet" href="data:text/css,body%7Bmargin:0%7D">
```
```javascript
// Create data URL from canvas
const canvas = document.querySelector('canvas');
const dataURL = canvas.toDataURL('image/png');
// Create data URL from blob
const blob = new Blob(['Hello'], { type: 'text/plain' });
const reader = new FileReader();
reader.onload = () => {
const dataURL = reader.result;
};
reader.readAsDataURL(blob);
```
## Escape Sequences
```javascript
// String escapes
'It\'s a string'; // Single quote
"He said \"Hello\""; // Double quote
'Line 1\nLine 2'; // Newline
'Column1\tColumn2'; // Tab
'Path\\to\\file'; // Backslash
```
## Data Structures
### Arrays
Ordered collections:
```javascript
const arr = [1, 2, 3];
arr.push(4); // Add to end
arr.pop(); // Remove from end
```
### Objects
Key-value pairs:
```javascript
const obj = { key: 'value' };
obj.newKey = 'new value';
delete obj.key;
```
### Map
Keyed collections (any type as key):
```javascript
const map = new Map();
map.set('key', 'value');
map.set(obj, 'value');
map.get('key');
map.has('key');
map.delete('key');
```
### Set
Unique values:
```javascript
const set = new Set([1, 2, 2, 3]); // {1, 2, 3}
set.add(4);
set.has(2); // true
set.delete(1);
```
## Glossary Terms
**Key Terms Covered**:
- ASCII
- Base64
- Character
- Character encoding
- Character reference
- Character set
- Code point
- Code unit
- Data structure
- Deserialization
- Enumerated
- Escape character
- JSON
- JSON type representation
- MIME
- MIME type
- Percent-encoding
- Serialization
- Serializable object
- Unicode
- URI
- URL
- URN
- UTF-8
- UTF-16
## Additional Resources
- [JSON Specification](https://www.json.org/)
- [Unicode Standard](https://unicode.org/standard/standard.html)
- [MDN Character Encodings](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding)
- [MIME Types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)

502
skills/web-coder/references/development-tools.md Normal file
View File

@@ -0,0 +1,502 @@
# Development Tools Reference
Tools and workflows for web development.
## Version Control
### Git
Distributed version control system.
**Basic Commands**:
```bash
# Initialize repository
git init
# Clone repository
git clone https://github.com/user/repo.git
# Check status
git status
# Stage changes
git add file.js
git add . # All files
# Commit
git commit -m "commit message"
# Push to remote
git push origin main
# Pull from remote
git pull origin main
# Branches
git branch feature-name
git checkout feature-name
git checkout -b feature-name # Create and switch
# Merge
git checkout main
git merge feature-name
# View history
git log
git log --oneline --graph
```
**Best Practices**:
- Commit often with meaningful messages
- Use branches for features
- Pull before push
- Review changes before committing
- Use .gitignore for generated files
### GitHub/GitLab/Bitbucket
Git hosting platforms with collaboration features:
- Pull requests / Merge requests
- Code review
- Issue tracking
- CI/CD integration
- Project management
## Package Managers
### npm (Node Package Manager)
```bash
# Initialize project
npm init
npm init -y # Skip prompts
# Install dependencies
npm install package-name
npm install -D package-name # Dev dependency
npm install -g package-name # Global
# Update packages
npm update
npm outdated
# Run scripts
npm run build
npm test
npm start
# Audit security
npm audit
npm audit fix
```
**package.json**:
```json
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"start": "node server.js",
"build": "webpack",
"test": "jest"
},
"dependencies": {
"express": "^4.18.0"
},
"devDependencies": {
"webpack": "^5.75.0"
}
}
```
### Yarn
Faster alternative to npm:
```bash
yarn add package-name
yarn remove package-name
yarn upgrade
yarn build
```
### pnpm
Efficient package manager (disk space saving):
```bash
pnpm install
pnpm add package-name
pnpm remove package-name
```
## Build Tools
### Webpack
Module bundler:
```javascript
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
```
### Vite
Fast modern build tool:
```bash
# Create project
npm create vite@latest my-app
# Dev server
npm run dev
# Build
npm run build
```
### Parcel
Zero-config bundler:
```bash
parcel index.html
parcel build index.html
```
## Task Runners
### npm Scripts
```json
{
"scripts": {
"dev": "webpack serve --mode development",
"build": "webpack --mode production",
"test": "jest",
"lint": "eslint src/",
"format": "prettier --write src/"
}
}
```
## Testing Frameworks
### Jest
JavaScript testing framework:
```javascript
// sum.test.js
const sum = require('./sum');
describe('sum function', () => {
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
test('handles negative numbers', () => {
expect(sum(-1, -2)).toBe(-3);
});
});
```
### Vitest
Vite-powered testing (Jest-compatible):
```javascript
import { describe, test, expect } from 'vitest';
describe('math', () => {
test('addition', () => {
expect(1 + 1).toBe(2);
});
});
```
### Playwright
End-to-end testing:
```javascript
import { test, expect } from '@playwright/test';
test('homepage has title', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveTitle(/Example/);
});
```
## Linters & Formatters
### ESLint
JavaScript linter:
```javascript
// .eslintrc.js
module.exports = {
extends: ['eslint:recommended'],
rules: {
'no-console': 'warn',
'no-unused-vars': 'error'
}
};
```
### Prettier
Code formatter:
```json
// .prettierrc
{
"singleQuote": true,
"semi": true,
"tabWidth": 2,
"trailingComma": "es5"
}
```
### Stylelint
CSS linter:
```json
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": 2,
"color-hex-length": "short"
}
}
```
## IDEs and Editors
### Visual Studio Code
**Key Features**:
- IntelliSense
- Debugging
- Git integration
- Extensions marketplace
- Terminal integration
**Popular Extensions**:
- ESLint
- Prettier
- Live Server
- GitLens
- Path Intellisense
### WebStorm
Full-featured IDE for web development by JetBrains.
### Sublime Text
Lightweight, fast text editor.
### Vim/Neovim
Terminal-based editor (steep learning curve).
## TypeScript
Typed superset of JavaScript:
```typescript
// types.ts
interface User {
id: number;
name: string;
email?: string; // Optional
}
function getUser(id: number): User {
return { id, name: 'John' };
}
// Generics
function identity<T>(arg: T): T {
return arg;
}
```
```json
// tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
```
## Continuous Integration (CI/CD)
### GitHub Actions
```yaml
# .github/workflows/test.yml
name: Test
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
- run: npm ci
- run: npm test
```
### Other CI/CD Platforms
- **GitLab CI**
- **CircleCI**
- **Travis CI**
- **Jenkins**
## Debugging
### Browser DevTools
```javascript
// Debugging statements
debugger; // Pause execution
console.log('value:', value);
console.error('error:', error);
console.trace(); // Stack trace
```
### Node.js Debugging
```bash
# Built-in debugger
node inspect app.js
# Chrome DevTools
node --inspect app.js
node --inspect-brk app.js # Break on start
```
## Performance Profiling
### Chrome DevTools Performance
- Record CPU activity
- Analyze flame charts
- Identify bottlenecks
### Lighthouse
```bash
# CLI
npm install -g lighthouse
lighthouse https://example.com
# DevTools
Open Chrome DevTools > Lighthouse tab
```
## Monitoring
### Error Tracking
- **Sentry**: Error monitoring
- **Rollbar**: Real-time error tracking
- **Bugsnag**: Error monitoring
### Analytics
- **Google Analytics**
- **Plausible**: Privacy-friendly
- **Matomo**: Self-hosted
### RUM (Real User Monitoring)
- **SpeedCurve**
- **New Relic**
- **Datadog**
## Developer Workflow
### Typical Workflow
1. **Setup**: Clone repo, install dependencies
2. **Develop**: Write code, run dev server
3. **Test**: Run unit/integration tests
4. **Lint/Format**: Check code quality
5. **Commit**: Git commit and push
6. **CI/CD**: Automated tests and deployment
7. **Deploy**: Push to production
### Environment Variables
```bash
# .env
DATABASE_URL=postgres://localhost/db
API_KEY=secret-key-here
NODE_ENV=development
```
```javascript
// Access in Node.js
const dbUrl = process.env.DATABASE_URL;
```
## Glossary Terms
**Key Terms Covered**:
- Bun
- Continuous integration
- Deno
- Developer tools
- Fork
- Fuzz testing
- Git
- IDE
- Node.js
- Repo
- Rsync
- SCM
- SDK
- Smoke test
- SVN
- TypeScript
## Additional Resources
- [Git Documentation](https://git-scm.com/doc)
- [npm Documentation](https://docs.npmjs.com/)
- [Webpack Guides](https://webpack.js.org/guides/)
- [Jest Documentation](https://jestjs.io/docs/getting-started)
- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)

649
skills/web-coder/references/glossary.md Normal file
View File

@@ -0,0 +1,649 @@
# Glossary
- Reference [Glossary of Web Terms](https://developer.mozilla.org/en-US/docs/Glossary)
## Web Terms
This glossary contains comprehensive web terms categorized across 15 domains:
- HTML & Markup
- CSS & Styling
- JavaScript & Programming
- Web APIs & DOM
- HTTP & Networking
- Security & Authentication
- Performance & Optimization
- Accessibility
- Web Protocols & Standards
- Browsers & Engines
- Development Tools
- Data Formats & Encoding
- Media & Graphics
- Architecture & Patterns
- Servers & Infrastructure
## All Web Terms
- [Abstraction](https://developer.mozilla.org/en-US/docs/Glossary/Abstraction)
- [Accent](https://developer.mozilla.org/en-US/docs/Glossary/Accent)
- [Accessibility](https://developer.mozilla.org/en-US/docs/Glossary/Accessibility)
- [Accessibility tree](https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree)
- [Accessible description](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_description)
- [Accessible name](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name)
- [Adobe Flash](https://developer.mozilla.org/en-US/docs/Glossary/Adobe_Flash)
- [Advance measure](https://developer.mozilla.org/en-US/docs/Glossary/Advance_measure)
- [Ajax](https://developer.mozilla.org/en-US/docs/Glossary/Ajax)
- [Algorithm](https://developer.mozilla.org/en-US/docs/Glossary/Algorithm)
- [Alignment container](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_container)
- [Alignment subject](https://developer.mozilla.org/en-US/docs/Glossary/Alignment_subject)
- [Alpha (*alpha channel*)](https://developer.mozilla.org/en-US/docs/Glossary/Alpha)
- [ALPN](https://developer.mozilla.org/en-US/docs/Glossary/ALPN)
- [API](https://developer.mozilla.org/en-US/docs/Glossary/API)
- [Apple Safari](https://developer.mozilla.org/en-US/docs/Glossary/Apple_Safari)
- [Application context](https://developer.mozilla.org/en-US/docs/Glossary/Application_context)
- [Argument](https://developer.mozilla.org/en-US/docs/Glossary/Argument)
- [ARIA](https://developer.mozilla.org/en-US/docs/Glossary/ARIA)
- [ARPA](https://developer.mozilla.org/en-US/docs/Glossary/ARPA)
- [ARPANET](https://developer.mozilla.org/en-US/docs/Glossary/ARPANET)
- [Array](https://developer.mozilla.org/en-US/docs/Glossary/Array)
- [ASCII](https://developer.mozilla.org/en-US/docs/Glossary/ASCII)
- [Aspect ratio](https://developer.mozilla.org/en-US/docs/Glossary/Aspect_ratio)
- [Asynchronous](https://developer.mozilla.org/en-US/docs/Glossary/Asynchronous)
- [ATAG](https://developer.mozilla.org/en-US/docs/Glossary/ATAG)
- [Attribute](https://developer.mozilla.org/en-US/docs/Glossary/Attribute)
- [Authentication](https://developer.mozilla.org/en-US/docs/Glossary/Authentication)
- [Authenticator](https://developer.mozilla.org/en-US/docs/Glossary/Authenticator)
- [Bandwidth](https://developer.mozilla.org/en-US/docs/Glossary/Bandwidth)
- [Base64](https://developer.mozilla.org/en-US/docs/Glossary/Base64)
- [Baseline](https://developer.mozilla.org/en-US/docs/Glossary/Baseline)
- [Baseline (*compatibility*)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Compatibility)
- [Baseline (*typography*)](https://developer.mozilla.org/en-US/docs/Glossary/Baseline/Typography)
- [BCP 47 language tag](https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag)
- [Beacon](https://developer.mozilla.org/en-US/docs/Glossary/Beacon)
- [Bézier curve](https://developer.mozilla.org/en-US/docs/Glossary/Bézier_curve)
- [bfcache](https://developer.mozilla.org/en-US/docs/Glossary/bfcache)
- [BiDi](https://developer.mozilla.org/en-US/docs/Glossary/BiDi)
- [BigInt](https://developer.mozilla.org/en-US/docs/Glossary/BigInt)
- [Binding](https://developer.mozilla.org/en-US/docs/Glossary/Binding)
- [Bitwise flags](https://developer.mozilla.org/en-US/docs/Glossary/Bitwise_flags)
- [Blink](https://developer.mozilla.org/en-US/docs/Glossary/Blink)
- [blink element (*\<blink\> tag*)](https://developer.mozilla.org/en-US/docs/Glossary/blink_element)
- [Block](https://developer.mozilla.org/en-US/docs/Glossary/Block)
- [Block (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Block/CSS)
- [Block (*scripting*)](https://developer.mozilla.org/en-US/docs/Glossary/Block/Scripting)
- [Block cipher mode of operation](https://developer.mozilla.org/en-US/docs/Glossary/Block_cipher_mode_of_operation)
- [Block-level content](https://developer.mozilla.org/en-US/docs/Glossary/Block-level_content)
- [Boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean)
- [Boolean (*JavaScript*)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/JavaScript)
- [Boolean attribute (*ARIA*)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/ARIA)
- [Boolean attribute (*HTML*)](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML)
- [Bounding box](https://developer.mozilla.org/en-US/docs/Glossary/Bounding_box)
- [Breadcrumb](https://developer.mozilla.org/en-US/docs/Glossary/Breadcrumb)
- [Brotli compression](https://developer.mozilla.org/en-US/docs/Glossary/Brotli_compression)
- [Browser](https://developer.mozilla.org/en-US/docs/Glossary/Browser)
- [Browsing context](https://developer.mozilla.org/en-US/docs/Glossary/Browsing_context)
- [Buffer](https://developer.mozilla.org/en-US/docs/Glossary/Buffer)
- [Bun](https://developer.mozilla.org/en-US/docs/Glossary/Bun)
- [Cache](https://developer.mozilla.org/en-US/docs/Glossary/Cache)
- [Cacheable](https://developer.mozilla.org/en-US/docs/Glossary/Cacheable)
- [CalDAV](https://developer.mozilla.org/en-US/docs/Glossary/CalDAV)
- [Call stack](https://developer.mozilla.org/en-US/docs/Glossary/Call_stack)
- [Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
- [Camel case](https://developer.mozilla.org/en-US/docs/Glossary/Camel_case)
- [Canonical order](https://developer.mozilla.org/en-US/docs/Glossary/Canonical_order)
- [Canvas](https://developer.mozilla.org/en-US/docs/Glossary/Canvas)
- [Card sorting](https://developer.mozilla.org/en-US/docs/Glossary/Card_sorting)
- [CardDAV](https://developer.mozilla.org/en-US/docs/Glossary/CardDAV)
- [Caret](https://developer.mozilla.org/en-US/docs/Glossary/Caret)
- [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN)
- [Certificate authority](https://developer.mozilla.org/en-US/docs/Glossary/Certificate_authority)
- [Certified](https://developer.mozilla.org/en-US/docs/Glossary/Certified)
- [Challenge-response authentication](https://developer.mozilla.org/en-US/docs/Glossary/Challenge-response_authentication)
- [Character](https://developer.mozilla.org/en-US/docs/Glossary/Character)
- [Character encoding](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding)
- [Character reference](https://developer.mozilla.org/en-US/docs/Glossary/Character_reference)
- [Character set](https://developer.mozilla.org/en-US/docs/Glossary/Character_set)
- [Chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome)
- [CIA](https://developer.mozilla.org/en-US/docs/Glossary/CIA)
- [Cipher](https://developer.mozilla.org/en-US/docs/Glossary/Cipher)
- [Cipher suite](https://developer.mozilla.org/en-US/docs/Glossary/Cipher_suite)
- [Ciphertext](https://developer.mozilla.org/en-US/docs/Glossary/Ciphertext)
- [Class](https://developer.mozilla.org/en-US/docs/Glossary/Class)
- [Client-side rendering (*CSR*)](https://developer.mozilla.org/en-US/docs/Glossary/Client-side_rendering_(CSR))
- [Closure](https://developer.mozilla.org/en-US/docs/Glossary/Closure)
- [Cloud](https://developer.mozilla.org/en-US/docs/Glossary/Cloud)
- [Cloud computing](https://developer.mozilla.org/en-US/docs/Glossary/Cloud_computing)
- [CMS](https://developer.mozilla.org/en-US/docs/Glossary/CMS)
- [Code point](https://developer.mozilla.org/en-US/docs/Glossary/Code_point)
- [Code splitting](https://developer.mozilla.org/en-US/docs/Glossary/Code_splitting)
- [Code unit](https://developer.mozilla.org/en-US/docs/Glossary/Code_unit)
- [Codec](https://developer.mozilla.org/en-US/docs/Glossary/Codec)
- [Color space](https://developer.mozilla.org/en-US/docs/Glossary/Color_space)
- [Color wheel](https://developer.mozilla.org/en-US/docs/Glossary/Color_wheel)
- [Compile](https://developer.mozilla.org/en-US/docs/Glossary/Compile)
- [Compile time](https://developer.mozilla.org/en-US/docs/Glossary/Compile_time)
- [Composite operation](https://developer.mozilla.org/en-US/docs/Glossary/Composite_operation)
- [Compression Dictionary Transport](https://developer.mozilla.org/en-US/docs/Glossary/Compression_Dictionary_Transport)
- [Computer programming](https://developer.mozilla.org/en-US/docs/Glossary/Computer_programming)
- [Conditional](https://developer.mozilla.org/en-US/docs/Glossary/Conditional)
- [Constant](https://developer.mozilla.org/en-US/docs/Glossary/Constant)
- [Constructor](https://developer.mozilla.org/en-US/docs/Glossary/Constructor)
- [Content header](https://developer.mozilla.org/en-US/docs/Glossary/Content_header)
- [Continuous integration](https://developer.mozilla.org/en-US/docs/Glossary/Continuous_integration)
- [Continuous media](https://developer.mozilla.org/en-US/docs/Glossary/Continuous_media)
- [Control flow](https://developer.mozilla.org/en-US/docs/Glossary/Control_flow)
- [Cookie](https://developer.mozilla.org/en-US/docs/Glossary/Cookie)
- [Copyleft](https://developer.mozilla.org/en-US/docs/Glossary/Copyleft)
- [CORS](https://developer.mozilla.org/en-US/docs/Glossary/CORS)
- [CORS-safelisted request header](https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_request_header)
- [CORS-safelisted response header](https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_response_header)
- [Crawler](https://developer.mozilla.org/en-US/docs/Glossary/Crawler)
- [Credential](https://developer.mozilla.org/en-US/docs/Glossary/Credential)
- [CRLF](https://developer.mozilla.org/en-US/docs/Glossary/CRLF)
- [Cross Axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis)
- [Cross-site request forgery (*CSRF*)](https://developer.mozilla.org/en-US/docs/Glossary/CSRF)
- [Cross-site scripting (*XSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting)
- [CRUD](https://developer.mozilla.org/en-US/docs/Glossary/CRUD)
- [Cryptanalysis](https://developer.mozilla.org/en-US/docs/Glossary/Cryptanalysis)
- [Cryptography](https://developer.mozilla.org/en-US/docs/Glossary/Cryptography)
- [CSP](https://developer.mozilla.org/en-US/docs/Glossary/CSP)
- [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS)
- [CSS Object Model (*CSSOM*)](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Object_Model_(CSSOM))
- [CSS pixel](https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel)
- [CSS preprocessor](https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor)
- [Cumulative Layout Shift (*CLS*)](https://developer.mozilla.org/en-US/docs/Glossary/CLS)
- [Data structure](https://developer.mozilla.org/en-US/docs/Glossary/Data_structure)
- [Database](https://developer.mozilla.org/en-US/docs/Glossary/Database)
- [Debounce](https://developer.mozilla.org/en-US/docs/Glossary/Debounce)
- [Decryption](https://developer.mozilla.org/en-US/docs/Glossary/Decryption)
- [Deep copy](https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy)
- [Delta](https://developer.mozilla.org/en-US/docs/Glossary/Delta)
- [Denial of Service (*DoS*)](https://developer.mozilla.org/en-US/docs/Glossary/Denial_of_Service)
- [Deno](https://developer.mozilla.org/en-US/docs/Glossary/Deno)
- [Descriptor (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Descriptor_(CSS))
- [Deserialization](https://developer.mozilla.org/en-US/docs/Glossary/Deserialization)
- [Developer tools](https://developer.mozilla.org/en-US/docs/Glossary/Developer_tools)
- [Device pixel](https://developer.mozilla.org/en-US/docs/Glossary/Device_pixel)
- [Digital certificate](https://developer.mozilla.org/en-US/docs/Glossary/Digital_certificate)
- [Digital signature](https://developer.mozilla.org/en-US/docs/Glossary/Digital_signature)
- [Distributed Denial of Service (*DDoS*)](https://developer.mozilla.org/en-US/docs/Glossary/Distributed_Denial_of_Service)
- [DMZ](https://developer.mozilla.org/en-US/docs/Glossary/DMZ)
- [DNS](https://developer.mozilla.org/en-US/docs/Glossary/DNS)
- [Doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)
- [Document directive](https://developer.mozilla.org/en-US/docs/Glossary/Document_directive)
- [Document environment](https://developer.mozilla.org/en-US/docs/Glossary/Document_environment)
- [DOM (*Document Object Model*)](https://developer.mozilla.org/en-US/docs/Glossary/DOM)
- [Domain](https://developer.mozilla.org/en-US/docs/Glossary/Domain)
- [Domain name](https://developer.mozilla.org/en-US/docs/Glossary/Domain_name)
- [Domain sharding](https://developer.mozilla.org/en-US/docs/Glossary/Domain_sharding)
- [Dominator](https://developer.mozilla.org/en-US/docs/Glossary/Dominator)
- [DSL](https://developer.mozilla.org/en-US/docs/Glossary/DSL)
- [DSL (*Digital Subscriber Line*)](https://developer.mozilla.org/en-US/docs/Glossary/DSL/Digital_Subscriber_Line)
- [DSL (*Domain-Specific Language*)](https://developer.mozilla.org/en-US/docs/Glossary/DSL/Domain-Specific_Language)
- [DTLS (*Datagram Transport Layer Security*)](https://developer.mozilla.org/en-US/docs/Glossary/DTLS)
- [DTMF (*Dual-Tone Multi-Frequency signaling*)](https://developer.mozilla.org/en-US/docs/Glossary/DTMF)
- [Dynamic typing](https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing)
- [ECMA](https://developer.mozilla.org/en-US/docs/Glossary/ECMA)
- [ECMAScript](https://developer.mozilla.org/en-US/docs/Glossary/ECMAScript)
- [Effective connection type](https://developer.mozilla.org/en-US/docs/Glossary/Effective_connection_type)
- [Element](https://developer.mozilla.org/en-US/docs/Glossary/Element)
- [Encapsulation](https://developer.mozilla.org/en-US/docs/Glossary/Encapsulation)
- [Encryption](https://developer.mozilla.org/en-US/docs/Glossary/Encryption)
- [Endianness](https://developer.mozilla.org/en-US/docs/Glossary/Endianness)
- [Engine](https://developer.mozilla.org/en-US/docs/Glossary/Engine)
- [JavaScript engine](https://developer.mozilla.org/en-US/docs/Glossary/JavaScript_engine)
- [Rendering engine](https://developer.mozilla.org/en-US/docs/Glossary/Rendering_engine)
- [Entity](https://developer.mozilla.org/en-US/docs/Glossary/Entity)
- [Entity header](https://developer.mozilla.org/en-US/docs/Glossary/Entity_header)
- [Enumerated](https://developer.mozilla.org/en-US/docs/Glossary/Enumerated)
- [Escape character](https://developer.mozilla.org/en-US/docs/Glossary/Escape_character)
- [Event](https://developer.mozilla.org/en-US/docs/Glossary/Event)
- [Exception](https://developer.mozilla.org/en-US/docs/Glossary/Exception)
- [EXIF](https://developer.mozilla.org/en-US/docs/Glossary/EXIF)
- [Expando](https://developer.mozilla.org/en-US/docs/Glossary/Expando)
- [Extrinsic size](https://developer.mozilla.org/en-US/docs/Glossary/Extrinsic_size)
- [Fallback alignment](https://developer.mozilla.org/en-US/docs/Glossary/Fallback_alignment)
- [Falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)
- [Favicon](https://developer.mozilla.org/en-US/docs/Glossary/Favicon)
- [Federated identity](https://developer.mozilla.org/en-US/docs/Glossary/Federated_identity)
- [Fetch directive](https://developer.mozilla.org/en-US/docs/Glossary/Fetch_directive)
- [Fetch metadata request header](https://developer.mozilla.org/en-US/docs/Glossary/Fetch_metadata_request_header)
- [Fingerprinting](https://developer.mozilla.org/en-US/docs/Glossary/Fingerprinting)
- [Firefox OS](https://developer.mozilla.org/en-US/docs/Glossary/Firefox_OS)
- [Firewall](https://developer.mozilla.org/en-US/docs/Glossary/Firewall)
- [First Contentful Paint (*FCP*)](https://developer.mozilla.org/en-US/docs/Glossary/First_Contentful_Paint_(FCP))
- [First CPU idle](https://developer.mozilla.org/en-US/docs/Glossary/First_CPU_idle)
- [First Input Delay (FID)Deprecated](https://developer.mozilla.org/en-US/docs/Glossary/First_Input_Delay)
- [First Meaningful Paint (*FMP*)](https://developer.mozilla.org/en-US/docs/Glossary/First_meaningful_paint)
- [First Paint (*FP*)](https://developer.mozilla.org/en-US/docs/Glossary/First_paint)
- [First-class function](https://developer.mozilla.org/en-US/docs/Glossary/First-class_function)
- [Flex](https://developer.mozilla.org/en-US/docs/Glossary/Flex)
- [Flex container](https://developer.mozilla.org/en-US/docs/Glossary/Flex_container)
- [Flex item](https://developer.mozilla.org/en-US/docs/Glossary/Flex_item)
- [Flexbox](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox)
- [Flow relative values](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values)
- [Forbidden request header](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_request_header)
- [Forbidden response header name](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_response_header_name)
- [Fork](https://developer.mozilla.org/en-US/docs/Glossary/Fork)
- [Fragmentainer](https://developer.mozilla.org/en-US/docs/Glossary/Fragmentainer)
- [Frame rate (*FPS*)](https://developer.mozilla.org/en-US/docs/Glossary/FPS)
- [FTP](https://developer.mozilla.org/en-US/docs/Glossary/FTP)
- [FTU](https://developer.mozilla.org/en-US/docs/Glossary/FTU)
- [Function](https://developer.mozilla.org/en-US/docs/Glossary/Function)
- [Fuzz testing](https://developer.mozilla.org/en-US/docs/Glossary/Fuzz_testing)
- [Gamut](https://developer.mozilla.org/en-US/docs/Glossary/Gamut)
- [Garbage collection](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection)
- [Gecko](https://developer.mozilla.org/en-US/docs/Glossary/Gecko)
- [General header](https://developer.mozilla.org/en-US/docs/Glossary/General_header)
- [GIF](https://developer.mozilla.org/en-US/docs/Glossary/GIF)
- [Git](https://developer.mozilla.org/en-US/docs/Glossary/Git)
- [Global object](https://developer.mozilla.org/en-US/docs/Glossary/Global_object)
- [Global scope](https://developer.mozilla.org/en-US/docs/Glossary/Global_scope)
- [Global variable](https://developer.mozilla.org/en-US/docs/Glossary/Global_variable)
- [Glyph](https://developer.mozilla.org/en-US/docs/Glossary/Glyph)
- [Google Chrome](https://developer.mozilla.org/en-US/docs/Glossary/Google_Chrome)
- [GPL](https://developer.mozilla.org/en-US/docs/Glossary/GPL)
- [GPU](https://developer.mozilla.org/en-US/docs/Glossary/GPU)
- [Graceful degradation](https://developer.mozilla.org/en-US/docs/Glossary/Graceful_degradation)
- [Grid](https://developer.mozilla.org/en-US/docs/Glossary/Grid)
- [Grid areas](https://developer.mozilla.org/en-US/docs/Glossary/Grid_areas)
- [Grid Axis](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Axis)
- [Grid Cell](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Cell)
- [Grid Column](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Column)
- [Grid container](https://developer.mozilla.org/en-US/docs/Glossary/Grid_container)
- [Grid lines](https://developer.mozilla.org/en-US/docs/Glossary/Grid_lines)
- [Grid Row](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Row)
- [Grid Tracks](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Tracks)
- [Guaranteed-invalid value](https://developer.mozilla.org/en-US/docs/Glossary/Guaranteed-invalid_value)
- [Gutters](https://developer.mozilla.org/en-US/docs/Glossary/Gutters)
- [gzip compression](https://developer.mozilla.org/en-US/docs/Glossary/gzip_compression)
- [Hash function](https://developer.mozilla.org/en-US/docs/Glossary/Hash_function)
- [Hash routing](https://developer.mozilla.org/en-US/docs/Glossary/Hash_routing)
- [Head](https://developer.mozilla.org/en-US/docs/Glossary/Head)
- [High-level programming language](https://developer.mozilla.org/en-US/docs/Glossary/High-level_programming_language)
- [HMAC](https://developer.mozilla.org/en-US/docs/Glossary/HMAC)
- [Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
- [HOL blocking](https://developer.mozilla.org/en-US/docs/Glossary/HOL_blocking)
- [Host](https://developer.mozilla.org/en-US/docs/Glossary/Host)
- [Hotlink](https://developer.mozilla.org/en-US/docs/Glossary/Hotlink)
- [Houdini](https://developer.mozilla.org/en-US/docs/Glossary/Houdini)
- [HPKP](https://developer.mozilla.org/en-US/docs/Glossary/HPKP)
- [HSTS](https://developer.mozilla.org/en-US/docs/Glossary/HSTS)
- [HTML](https://developer.mozilla.org/en-US/docs/Glossary/HTML)
- [HTML color codes](https://developer.mozilla.org/en-US/docs/Glossary/HTML_color_codes)
- [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5)
- [HTTP](https://developer.mozilla.org/en-US/docs/Glossary/HTTP)
- [HTTP content](https://developer.mozilla.org/en-US/docs/Glossary/HTTP_content)
- [HTTP header](https://developer.mozilla.org/en-US/docs/Glossary/HTTP_header)
- [HTTP/2](https://developer.mozilla.org/en-US/docs/Glossary/HTTP/2)
- [HTTP/3](https://developer.mozilla.org/en-US/docs/Glossary/HTTP/3)
- [HTTPS](https://developer.mozilla.org/en-US/docs/Glossary/HTTPS)
- [HTTPS RR](https://developer.mozilla.org/en-US/docs/Glossary/HTTPS_RR)
- [Hyperlink](https://developer.mozilla.org/en-US/docs/Glossary/Hyperlink)
- [Hypertext](https://developer.mozilla.org/en-US/docs/Glossary/Hypertext)
- [IANA](https://developer.mozilla.org/en-US/docs/Glossary/IANA)
- [ICANN](https://developer.mozilla.org/en-US/docs/Glossary/ICANN)
- [ICE](https://developer.mozilla.org/en-US/docs/Glossary/ICE)
- [IDE](https://developer.mozilla.org/en-US/docs/Glossary/IDE)
- [Idempotent](https://developer.mozilla.org/en-US/docs/Glossary/Idempotent)
- [Identifier](https://developer.mozilla.org/en-US/docs/Glossary/Identifier)
- [Identity provider (*IdP*)](https://developer.mozilla.org/en-US/docs/Glossary/Identity_provider)
- [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)
- [IETF](https://developer.mozilla.org/en-US/docs/Glossary/IETF)
- [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)
- [IMAP](https://developer.mozilla.org/en-US/docs/Glossary/IMAP)
- [Immutable](https://developer.mozilla.org/en-US/docs/Glossary/Immutable)
- [IndexedDB](https://developer.mozilla.org/en-US/docs/Glossary/IndexedDB)
- [Information architecture](https://developer.mozilla.org/en-US/docs/Glossary/Information_architecture)
- [Inheritance](https://developer.mozilla.org/en-US/docs/Glossary/Inheritance)
- [Ink overflow](https://developer.mozilla.org/en-US/docs/Glossary/Ink_overflow)
- [Inline-level content](https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content)
- [Input method editor](https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor)
- [Inset properties](https://developer.mozilla.org/en-US/docs/Glossary/Inset_properties)
- [Instance](https://developer.mozilla.org/en-US/docs/Glossary/Instance)
- [Interaction to Next Paint (*INP*)](https://developer.mozilla.org/en-US/docs/Glossary/interaction_to_next_paint)
- [Internationalization (*i18n*)](https://developer.mozilla.org/en-US/docs/Glossary/Internationalization)
- [Internet](https://developer.mozilla.org/en-US/docs/Glossary/Internet)
- [Interpolation](https://developer.mozilla.org/en-US/docs/Glossary/Interpolation)
- [Intrinsic size](https://developer.mozilla.org/en-US/docs/Glossary/Intrinsic_size)
- [Invariant](https://developer.mozilla.org/en-US/docs/Glossary/Invariant)
- [IP Address](https://developer.mozilla.org/en-US/docs/Glossary/IP_Address)
- [IPv4](https://developer.mozilla.org/en-US/docs/Glossary/IPv4)
- [IPv6](https://developer.mozilla.org/en-US/docs/Glossary/IPv6)
- [IRC](https://developer.mozilla.org/en-US/docs/Glossary/IRC)
- [ISO](https://developer.mozilla.org/en-US/docs/Glossary/ISO)
- [ISP](https://developer.mozilla.org/en-US/docs/Glossary/ISP)
- [ITU](https://developer.mozilla.org/en-US/docs/Glossary/ITU)
- [Jank](https://developer.mozilla.org/en-US/docs/Glossary/Jank)
- [Java](https://developer.mozilla.org/en-US/docs/Glossary/Java)
- [JavaScript](https://developer.mozilla.org/en-US/docs/Glossary/JavaScript)
- [Jitter](https://developer.mozilla.org/en-US/docs/Glossary/Jitter)
- [JPEG](https://developer.mozilla.org/en-US/docs/Glossary/JPEG)
- [JSON](https://developer.mozilla.org/en-US/docs/Glossary/JSON)
- [JSON type representation](https://developer.mozilla.org/en-US/docs/Glossary/JSON_type_representation)
- [Just-In-Time Compilation (*JIT*)](https://developer.mozilla.org/en-US/docs/Glossary/Just-in-time_compilation)
- [Kebab case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case)
- [Key](https://developer.mozilla.org/en-US/docs/Glossary/Key)
- [Keyword](https://developer.mozilla.org/en-US/docs/Glossary/Keyword)
- [Largest Contentful Paint (*LCP*)](https://developer.mozilla.org/en-US/docs/Glossary/Largest_contentful_paint)
- [Latency](https://developer.mozilla.org/en-US/docs/Glossary/Latency)
- [Layout mode](https://developer.mozilla.org/en-US/docs/Glossary/Layout_mode)
- [Layout viewport](https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport)
- [Lazy load](https://developer.mozilla.org/en-US/docs/Glossary/Lazy_load)
- [Leading](https://developer.mozilla.org/en-US/docs/Glossary/Leading)
- [LGPL](https://developer.mozilla.org/en-US/docs/Glossary/LGPL)
- [Ligature](https://developer.mozilla.org/en-US/docs/Glossary/Ligature)
- [Literal](https://developer.mozilla.org/en-US/docs/Glossary/Literal)
- [Local scope](https://developer.mozilla.org/en-US/docs/Glossary/Local_scope)
- [Local variable](https://developer.mozilla.org/en-US/docs/Glossary/Local_variable)
- [Locale](https://developer.mozilla.org/en-US/docs/Glossary/Locale)
- [Localization](https://developer.mozilla.org/en-US/docs/Glossary/Localization)
- [Logical properties](https://developer.mozilla.org/en-US/docs/Glossary/Logical_properties)
- [Long task](https://developer.mozilla.org/en-US/docs/Glossary/Long_task)
- [Loop](https://developer.mozilla.org/en-US/docs/Glossary/Loop)
- [Lossless compression](https://developer.mozilla.org/en-US/docs/Glossary/Lossless_compression)
- [Lossy compression](https://developer.mozilla.org/en-US/docs/Glossary/Lossy_compression)
- [LTR (*Left To Right*)](https://developer.mozilla.org/en-US/docs/Glossary/LTR)
- [Main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_axis)
- [Main thread](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread)
- [Markup](https://developer.mozilla.org/en-US/docs/Glossary/Markup)
- [MathML](https://developer.mozilla.org/en-US/docs/Glossary/MathML)
- [Media](https://developer.mozilla.org/en-US/docs/Glossary/Media)
- [Media (*Audio-visual presentation*)](https://developer.mozilla.org/en-US/docs/Glossary/Media/Audio-visual_presentation)
- [Media (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Media/CSS)
- [Media query](https://developer.mozilla.org/en-US/docs/Glossary/Media_query)
- [Metadata](https://developer.mozilla.org/en-US/docs/Glossary/Metadata)
- [Method](https://developer.mozilla.org/en-US/docs/Glossary/Method)
- [Microsoft Edge](https://developer.mozilla.org/en-US/docs/Glossary/Microsoft_Edge)
- [Microsoft Internet Explorer](https://developer.mozilla.org/en-US/docs/Glossary/Microsoft_Internet_Explorer)
- [Middleware](https://developer.mozilla.org/en-US/docs/Glossary/Middleware)
- [MIME](https://developer.mozilla.org/en-US/docs/Glossary/MIME)
- [MIME type](https://developer.mozilla.org/en-US/docs/Glossary/MIME_type)
- [Minification](https://developer.mozilla.org/en-US/docs/Glossary/Minification)
- [MitM](https://developer.mozilla.org/en-US/docs/Glossary/MitM)
- [Mixin](https://developer.mozilla.org/en-US/docs/Glossary/Mixin)
- [Mobile first](https://developer.mozilla.org/en-US/docs/Glossary/Mobile_first)
- [Modem](https://developer.mozilla.org/en-US/docs/Glossary/Modem)
- [Modularity](https://developer.mozilla.org/en-US/docs/Glossary/Modularity)
- [Mozilla Firefox](https://developer.mozilla.org/en-US/docs/Glossary/Mozilla_Firefox)
- [Multi-factor authentication](https://developer.mozilla.org/en-US/docs/Glossary/Multi-factor_authentication)
- [Mutable](https://developer.mozilla.org/en-US/docs/Glossary/Mutable)
- [MVC](https://developer.mozilla.org/en-US/docs/Glossary/MVC)
- [Namespace](https://developer.mozilla.org/en-US/docs/Glossary/Namespace)
- [NaN](https://developer.mozilla.org/en-US/docs/Glossary/NaN)
- [NAT](https://developer.mozilla.org/en-US/docs/Glossary/NAT)
- [Native](https://developer.mozilla.org/en-US/docs/Glossary/Native)
- [Navigation directive](https://developer.mozilla.org/en-US/docs/Glossary/Navigation_directive)
- [Netscape Navigator](https://developer.mozilla.org/en-US/docs/Glossary/Netscape_Navigator)
- [Network throttling](https://developer.mozilla.org/en-US/docs/Glossary/Network_throttling)
- [NNTP](https://developer.mozilla.org/en-US/docs/Glossary/NNTP)
- [Node](https://developer.mozilla.org/en-US/docs/Glossary/Node)
- [Node (*DOM*)](https://developer.mozilla.org/en-US/docs/Glossary/Node/DOM)
- [Node (*networking*)](https://developer.mozilla.org/en-US/docs/Glossary/Node/Networking)
- [Node.js](https://developer.mozilla.org/en-US/docs/Glossary/Node.js)
- [Non-normative](https://developer.mozilla.org/en-US/docs/Glossary/Non-normative)
- [Nonce](https://developer.mozilla.org/en-US/docs/Glossary/Nonce)
- [Normative](https://developer.mozilla.org/en-US/docs/Glossary/Normative)
- [Null](https://developer.mozilla.org/en-US/docs/Glossary/Null)
- [Nullish value](https://developer.mozilla.org/en-US/docs/Glossary/Nullish_value)
- [Number](https://developer.mozilla.org/en-US/docs/Glossary/Number)
- [Object](https://developer.mozilla.org/en-US/docs/Glossary/Object)
- [Object reference](https://developer.mozilla.org/en-US/docs/Glossary/Object_reference)
- [OOP](https://developer.mozilla.org/en-US/docs/Glossary/OOP)
- [OpenGL](https://developer.mozilla.org/en-US/docs/Glossary/OpenGL)
- [OpenSSL](https://developer.mozilla.org/en-US/docs/Glossary/OpenSSL)
- [Opera browser](https://developer.mozilla.org/en-US/docs/Glossary/Opera_browser)
- [Operand](https://developer.mozilla.org/en-US/docs/Glossary/Operand)
- [Operator](https://developer.mozilla.org/en-US/docs/Glossary/Operator)
- [Origin](https://developer.mozilla.org/en-US/docs/Glossary/Origin)
- [OTA](https://developer.mozilla.org/en-US/docs/Glossary/OTA)
- [OWASP](https://developer.mozilla.org/en-US/docs/Glossary/OWASP)
- [P2P](https://developer.mozilla.org/en-US/docs/Glossary/P2P)
- [PAC](https://developer.mozilla.org/en-US/docs/Glossary/PAC)
- [Packet](https://developer.mozilla.org/en-US/docs/Glossary/Packet)
- [Page load time](https://developer.mozilla.org/en-US/docs/Glossary/Page_load_time)
- [Page prediction](https://developer.mozilla.org/en-US/docs/Glossary/Page_prediction)
- [Parameter](https://developer.mozilla.org/en-US/docs/Glossary/Parameter)
- [Parent object](https://developer.mozilla.org/en-US/docs/Glossary/Parent_object)
- [Parse](https://developer.mozilla.org/en-US/docs/Glossary/Parse)
- [Parser](https://developer.mozilla.org/en-US/docs/Glossary/Parser)
- [Payload body](https://developer.mozilla.org/en-US/docs/Glossary/Payload_body)
- [Payload header](https://developer.mozilla.org/en-US/docs/Glossary/Payload_header)
- [PDF](https://developer.mozilla.org/en-US/docs/Glossary/PDF)
- [Perceived performance](https://developer.mozilla.org/en-US/docs/Glossary/Perceived_performance)
- [Percent-encoding](https://developer.mozilla.org/en-US/docs/Glossary/Percent-encoding)
- [PHP](https://developer.mozilla.org/en-US/docs/Glossary/PHP)
- [Physical properties](https://developer.mozilla.org/en-US/docs/Glossary/Physical_properties)
- [Pixel](https://developer.mozilla.org/en-US/docs/Glossary/Pixel)
- [Placeholder names](https://developer.mozilla.org/en-US/docs/Glossary/Placeholder_names)
- [Plaintext](https://developer.mozilla.org/en-US/docs/Glossary/Plaintext)
- [Plugin](https://developer.mozilla.org/en-US/docs/Glossary/Plugin)
- [PNG](https://developer.mozilla.org/en-US/docs/Glossary/PNG)
- [Polyfill](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill)
- [Polymorphism](https://developer.mozilla.org/en-US/docs/Glossary/Polymorphism)
- [POP3](https://developer.mozilla.org/en-US/docs/Glossary/POP3)
- [Port](https://developer.mozilla.org/en-US/docs/Glossary/Port)
- [Prefetch](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch)
- [Preflight request](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request)
- [Prerender](https://developer.mozilla.org/en-US/docs/Glossary/Prerender)
- [Presto](https://developer.mozilla.org/en-US/docs/Glossary/Presto)
- [Primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)
- [Principle of least privilege](https://developer.mozilla.org/en-US/docs/Glossary/Principle_of_least_privilege)
- [Privileged](https://developer.mozilla.org/en-US/docs/Glossary/Privileged)
- [Privileged code](https://developer.mozilla.org/en-US/docs/Glossary/Privileged_code)
- [Progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_enhancement)
- [Progressive web applications (*PWAs*)](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_web_apps)
- [Promise](https://developer.mozilla.org/en-US/docs/Glossary/Promise)
- [Property](https://developer.mozilla.org/en-US/docs/Glossary/Property)
- [Property (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/Property/CSS)
- [Property (*JavaScript*)](https://developer.mozilla.org/en-US/docs/Glossary/Property/JavaScript)
- [Protocol](https://developer.mozilla.org/en-US/docs/Glossary/Protocol)
- [Prototype](https://developer.mozilla.org/en-US/docs/Glossary/Prototype)
- [Prototype-based programming](https://developer.mozilla.org/en-US/docs/Glossary/Prototype-based_programming)
- [Proxy server](https://developer.mozilla.org/en-US/docs/Glossary/Proxy_server)
- [Pseudo-class](https://developer.mozilla.org/en-US/docs/Glossary/Pseudo-class)
- [Pseudo-element](https://developer.mozilla.org/en-US/docs/Glossary/Pseudo-element)
- [Pseudocode](https://developer.mozilla.org/en-US/docs/Glossary/Pseudocode)
- [Public-key cryptography](https://developer.mozilla.org/en-US/docs/Glossary/Public-key_cryptography)
- [Python](https://developer.mozilla.org/en-US/docs/Glossary/Python)
- [Quality values](https://developer.mozilla.org/en-US/docs/Glossary/Quality_values)
- [Quaternion](https://developer.mozilla.org/en-US/docs/Glossary/Quaternion)
- [QUIC](https://developer.mozilla.org/en-US/docs/Glossary/QUIC)
- [RAIL](https://developer.mozilla.org/en-US/docs/Glossary/RAIL)
- [Random Number Generator](https://developer.mozilla.org/en-US/docs/Glossary/Random_Number_Generator)
- [Raster image](https://developer.mozilla.org/en-US/docs/Glossary/Raster_image)
- [Rate limit](https://developer.mozilla.org/en-US/docs/Glossary/Rate_limit)
- [RDF](https://developer.mozilla.org/en-US/docs/Glossary/RDF)
- [Reading order](https://developer.mozilla.org/en-US/docs/Glossary/Reading_order)
- [Real User Monitoring (*RUM*)](https://developer.mozilla.org/en-US/docs/Glossary/Real_User_Monitoring)
- [Recursion](https://developer.mozilla.org/en-US/docs/Glossary/Recursion)
- [Reflow](https://developer.mozilla.org/en-US/docs/Glossary/Reflow)
- [Registrable domain](https://developer.mozilla.org/en-US/docs/Glossary/Registrable_domain)
- [Regular expression](https://developer.mozilla.org/en-US/docs/Glossary/Regular_expression)
- [Relying party](https://developer.mozilla.org/en-US/docs/Glossary/Relying_party)
- [Render-blocking](https://developer.mozilla.org/en-US/docs/Glossary/Render-blocking)
- [Repaint](https://developer.mozilla.org/en-US/docs/Glossary/Repaint)
- [Replaced elements](https://developer.mozilla.org/en-US/docs/Glossary/Replaced_elements)
- [Replay attack](https://developer.mozilla.org/en-US/docs/Glossary/Replay_attack)
- [Repo](https://developer.mozilla.org/en-US/docs/Glossary/Repo)
- [Reporting directive](https://developer.mozilla.org/en-US/docs/Glossary/Reporting_directive)
- [Representation header](https://developer.mozilla.org/en-US/docs/Glossary/Representation_header)
- [Request header](https://developer.mozilla.org/en-US/docs/Glossary/Request_header)
- [Resource Timing](https://developer.mozilla.org/en-US/docs/Glossary/Resource_Timing)
- [Response header](https://developer.mozilla.org/en-US/docs/Glossary/Response_header)
- [Responsive Web Design (*RWD*)](https://developer.mozilla.org/en-US/docs/Glossary/Responsive_Web_Design)
- [REST](https://developer.mozilla.org/en-US/docs/Glossary/REST)
- [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB)
- [RIL](https://developer.mozilla.org/en-US/docs/Glossary/RIL)
- [Robots.txt](https://developer.mozilla.org/en-US/docs/Glossary/Robots.txt)
- [Round Trip Time (*RTT*)](https://developer.mozilla.org/en-US/docs/Glossary/Round_Trip_Time)
- [Router](https://developer.mozilla.org/en-US/docs/Glossary/Router)
- [RSS](https://developer.mozilla.org/en-US/docs/Glossary/RSS)
- [Rsync](https://developer.mozilla.org/en-US/docs/Glossary/Rsync)
- [RTCP (*RTP Control Protocol*)](https://developer.mozilla.org/en-US/docs/Glossary/RTCP)
- [RTF](https://developer.mozilla.org/en-US/docs/Glossary/RTF)
- [RTL (*Right to Left*)](https://developer.mozilla.org/en-US/docs/Glossary/RTL)
- [RTP (*Real-time Transport Protocol*) and SRTP (*Secure RTP*)](https://developer.mozilla.org/en-US/docs/Glossary/RTP)
- [RTSP: Real-time streaming protocol](https://developer.mozilla.org/en-US/docs/Glossary/RTSP)
- [Ruby](https://developer.mozilla.org/en-US/docs/Glossary/Ruby)
- [Safe](https://developer.mozilla.org/en-US/docs/Glossary/Safe)
- [Safe (*HTTP Methods*)](https://developer.mozilla.org/en-US/docs/Glossary/Safe/HTTP)
- [Salt](https://developer.mozilla.org/en-US/docs/Glossary/Salt)
- [Same-origin policy](https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy)
- [SCM](https://developer.mozilla.org/en-US/docs/Glossary/SCM)
- [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope)
- [Screen reader](https://developer.mozilla.org/en-US/docs/Glossary/Screen_reader)
- [Script-supporting element](https://developer.mozilla.org/en-US/docs/Glossary/Script-supporting_element)
- [Scroll boundary](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_boundary)
- [Scroll chaining](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining)
- [Scroll container](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container)
- [Scroll snap](https://developer.mozilla.org/en-US/docs/Glossary/Scroll_snap)
- [SCTP](https://developer.mozilla.org/en-US/docs/Glossary/SCTP)
- [SDK (*Software Development Kit*)](https://developer.mozilla.org/en-US/docs/Glossary/SDK)
- [SDP](https://developer.mozilla.org/en-US/docs/Glossary/SDP)
- [Search engine](https://developer.mozilla.org/en-US/docs/Glossary/Search_engine)
- [Secure context](https://developer.mozilla.org/en-US/docs/Glossary/Secure_context)
- [Secure Sockets Layer (*SSL*)](https://developer.mozilla.org/en-US/docs/Glossary/SSL)
- [Selector (*CSS*)](https://developer.mozilla.org/en-US/docs/Glossary/CSS_Selector)
- [Semantics](https://developer.mozilla.org/en-US/docs/Glossary/Semantics)
- [SEO](https://developer.mozilla.org/en-US/docs/Glossary/SEO)
- [Serializable object](https://developer.mozilla.org/en-US/docs/Glossary/Serializable_object)
- [Serialization](https://developer.mozilla.org/en-US/docs/Glossary/Serialization)
- [Server](https://developer.mozilla.org/en-US/docs/Glossary/Server)
- [Server Timing](https://developer.mozilla.org/en-US/docs/Glossary/Server_Timing)
- [Server-side rendering (*SSR*)](https://developer.mozilla.org/en-US/docs/Glossary/SSR)
- [Session hijacking](https://developer.mozilla.org/en-US/docs/Glossary/Session_hijacking)
- [SGML](https://developer.mozilla.org/en-US/docs/Glossary/SGML)
- [Shadow tree](https://developer.mozilla.org/en-US/docs/Glossary/Shadow_tree)
- [Shallow copy](https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy)
- [Shim](https://developer.mozilla.org/en-US/docs/Glossary/Shim)
- [Signature](https://developer.mozilla.org/en-US/docs/Glossary/Signature)
- [Signature (*functions*)](https://developer.mozilla.org/en-US/docs/Glossary/Signature_(functions))
- [Signature (*security*)](https://developer.mozilla.org/en-US/docs/Glossary/Signature_(security))
- [SIMD](https://developer.mozilla.org/en-US/docs/Glossary/SIMD)
- [SISD](https://developer.mozilla.org/en-US/docs/Glossary/SISD)
- [Site](https://developer.mozilla.org/en-US/docs/Glossary/Site)
- [Site map](https://developer.mozilla.org/en-US/docs/Glossary/Site_map)
- [SLD](https://developer.mozilla.org/en-US/docs/Glossary/SLD)
- [Sloppy mode](https://developer.mozilla.org/en-US/docs/Glossary/Sloppy_mode)
- [Slug](https://developer.mozilla.org/en-US/docs/Glossary/Slug)
- [Smoke test](https://developer.mozilla.org/en-US/docs/Glossary/Smoke_test)
- [SMPTE (*Society of Motion Picture and Television Engineers*)](https://developer.mozilla.org/en-US/docs/Glossary/SMPTE)
- [SMTP](https://developer.mozilla.org/en-US/docs/Glossary/SMTP)
- [Snake case](https://developer.mozilla.org/en-US/docs/Glossary/Snake_case)
- [Snap positions](https://developer.mozilla.org/en-US/docs/Glossary/Snap_positions)
- [SOAP](https://developer.mozilla.org/en-US/docs/Glossary/SOAP)
- [Social engineering](https://developer.mozilla.org/en-US/docs/Glossary/Social_engineering)
- [Source map](https://developer.mozilla.org/en-US/docs/Glossary/Source_map)
- [SPA (*Single-page application*)](https://developer.mozilla.org/en-US/docs/Glossary/SPA)
- [Specification](https://developer.mozilla.org/en-US/docs/Glossary/Specification)
- [Speculative parsing](https://developer.mozilla.org/en-US/docs/Glossary/Speculative_parsing)
- [Speed index](https://developer.mozilla.org/en-US/docs/Glossary/Speed_index)
- [SQL](https://developer.mozilla.org/en-US/docs/Glossary/SQL)
- [SQL injection](https://developer.mozilla.org/en-US/docs/Glossary/SQL_injection)
- [SRI](https://developer.mozilla.org/en-US/docs/Glossary/SRI)
- [Stacking context](https://developer.mozilla.org/en-US/docs/Glossary/Stacking_context)
- [State machine](https://developer.mozilla.org/en-US/docs/Glossary/State_machine)
- [Statement](https://developer.mozilla.org/en-US/docs/Glossary/Statement)
- [Static method](https://developer.mozilla.org/en-US/docs/Glossary/Static_method)
- [Static site generator (*SSG*)](https://developer.mozilla.org/en-US/docs/Glossary/SSG)
- [Static typing](https://developer.mozilla.org/en-US/docs/Glossary/Static_typing)
- [Sticky activation](https://developer.mozilla.org/en-US/docs/Glossary/Sticky_activation)
- [Strict mode](https://developer.mozilla.org/en-US/docs/Glossary/Strict_mode)
- [String](https://developer.mozilla.org/en-US/docs/Glossary/String)
- [Stringifier](https://developer.mozilla.org/en-US/docs/Glossary/Stringifier)
- [STUN](https://developer.mozilla.org/en-US/docs/Glossary/STUN)
- [Style origin](https://developer.mozilla.org/en-US/docs/Glossary/Style_origin)
- [Stylesheet](https://developer.mozilla.org/en-US/docs/Glossary/Stylesheet)
- [Submit button](https://developer.mozilla.org/en-US/docs/Glossary/Submit_button)
- [SVG](https://developer.mozilla.org/en-US/docs/Glossary/SVG)
- [SVN](https://developer.mozilla.org/en-US/docs/Glossary/SVN)
- [Symbol](https://developer.mozilla.org/en-US/docs/Glossary/Symbol)
- [Symmetric-key cryptography](https://developer.mozilla.org/en-US/docs/Glossary/Symmetric-key_cryptography)
- [Synchronous](https://developer.mozilla.org/en-US/docs/Glossary/Synchronous)
- [Syntax](https://developer.mozilla.org/en-US/docs/Glossary/Syntax)
- [Syntax error](https://developer.mozilla.org/en-US/docs/Glossary/Syntax_error)
- [Synthetic monitoring](https://developer.mozilla.org/en-US/docs/Glossary/Synthetic_monitoring)
- [Table grid box](https://developer.mozilla.org/en-US/docs/Glossary/Table_grid_box)
- [Table wrapper box](https://developer.mozilla.org/en-US/docs/Glossary/Table_wrapper_box)
- [Tag](https://developer.mozilla.org/en-US/docs/Glossary/Tag)
- [TCP](https://developer.mozilla.org/en-US/docs/Glossary/TCP)
- [TCP handshake](https://developer.mozilla.org/en-US/docs/Glossary/TCP_handshake)
- [TCP slow start](https://developer.mozilla.org/en-US/docs/Glossary/TCP_slow_start)
- [Telnet](https://developer.mozilla.org/en-US/docs/Glossary/Telnet)
- [Texel](https://developer.mozilla.org/en-US/docs/Glossary/Texel)
- [The Khronos Group](https://developer.mozilla.org/en-US/docs/Glossary/The_Khronos_Group)
- [Thread](https://developer.mozilla.org/en-US/docs/Glossary/Thread)
- [Three js](https://developer.mozilla.org/en-US/docs/Glossary/Three_js)
- [Throttle](https://developer.mozilla.org/en-US/docs/Glossary/Throttle)
- [Time to First Byte (*TTFB*)](https://developer.mozilla.org/en-US/docs/Glossary/Time_to_first_byte)
- [Time to Interactive (*TTI*)](https://developer.mozilla.org/en-US/docs/Glossary/Time_to_interactive)
- [TLD](https://developer.mozilla.org/en-US/docs/Glossary/TLD)
- [TOFU](https://developer.mozilla.org/en-US/docs/Glossary/TOFU)
- [Top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
- [Transient activation](https://developer.mozilla.org/en-US/docs/Glossary/Transient_activation)
- [Transport Layer Security (*TLS*)](https://developer.mozilla.org/en-US/docs/Glossary/TLS)
- [Tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking)
- [Trident](https://developer.mozilla.org/en-US/docs/Glossary/Trident)
- [Truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)
- [TTL](https://developer.mozilla.org/en-US/docs/Glossary/TTL)
- [TURN](https://developer.mozilla.org/en-US/docs/Glossary/TURN)
- [Type](https://developer.mozilla.org/en-US/docs/Glossary/Type)
- [Type coercion](https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion)
- [Type conversion](https://developer.mozilla.org/en-US/docs/Glossary/Type_conversion)
- [TypeScript](https://developer.mozilla.org/en-US/docs/Glossary/TypeScript)
- [UAAG](https://developer.mozilla.org/en-US/docs/Glossary/UAAG)
- [UDP (*User Datagram Protocol*)](https://developer.mozilla.org/en-US/docs/Glossary/UDP)
- [UI](https://developer.mozilla.org/en-US/docs/Glossary/UI)
- [Undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined)
- [Unicode](https://developer.mozilla.org/en-US/docs/Glossary/Unicode)
- [Unix time](https://developer.mozilla.org/en-US/docs/Glossary/Unix_time)
- [URI](https://developer.mozilla.org/en-US/docs/Glossary/URI)
- [URL](https://developer.mozilla.org/en-US/docs/Glossary/URL)
- [URN](https://developer.mozilla.org/en-US/docs/Glossary/URN)
- [Usenet](https://developer.mozilla.org/en-US/docs/Glossary/Usenet)
- [User agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent)
- [UTF-8](https://developer.mozilla.org/en-US/docs/Glossary/UTF-8)
- [UTF-16](https://developer.mozilla.org/en-US/docs/Glossary/UTF-16)
- [UUID](https://developer.mozilla.org/en-US/docs/Glossary/UUID)
- [UX](https://developer.mozilla.org/en-US/docs/Glossary/UX)
- [Validator](https://developer.mozilla.org/en-US/docs/Glossary/Validator)
- [Value](https://developer.mozilla.org/en-US/docs/Glossary/Value)
- [Variable](https://developer.mozilla.org/en-US/docs/Glossary/Variable)
- [Vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_prefix)
- [Viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)
- [Visual viewport](https://developer.mozilla.org/en-US/docs/Glossary/Visual_viewport)
- [Void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element)
- [VoIP](https://developer.mozilla.org/en-US/docs/Glossary/VoIP)
- [W3C](https://developer.mozilla.org/en-US/docs/Glossary/W3C)
- [WAI](https://developer.mozilla.org/en-US/docs/Glossary/WAI)
- [WCAG](https://developer.mozilla.org/en-US/docs/Glossary/WCAG)
- [Web performance](https://developer.mozilla.org/en-US/docs/Glossary/Web_performance)
- [Web server](https://developer.mozilla.org/en-US/docs/Glossary/Web_server)
- [Web standards](https://developer.mozilla.org/en-US/docs/Glossary/Web_standards)
- [WebAssembly](https://developer.mozilla.org/en-US/docs/Glossary/WebAssembly)
- [WebDAV](https://developer.mozilla.org/en-US/docs/Glossary/WebDAV)
- [WebExtensions](https://developer.mozilla.org/en-US/docs/Glossary/WebExtensions)
- [WebGL](https://developer.mozilla.org/en-US/docs/Glossary/WebGL)
- [WebIDL](https://developer.mozilla.org/en-US/docs/Glossary/WebIDL)
- [WebKit](https://developer.mozilla.org/en-US/docs/Glossary/WebKit)
- [WebM](https://developer.mozilla.org/en-US/docs/Glossary/WebM)
- [WebP](https://developer.mozilla.org/en-US/docs/Glossary/WebP)
- [WebRTC](https://developer.mozilla.org/en-US/docs/Glossary/WebRTC)
- [WebSockets](https://developer.mozilla.org/en-US/docs/Glossary/WebSockets)
- [WebVTT](https://developer.mozilla.org/en-US/docs/Glossary/WebVTT)
- [WHATWG](https://developer.mozilla.org/en-US/docs/Glossary/WHATWG)
- [Whitespace](https://developer.mozilla.org/en-US/docs/Glossary/Whitespace)
- [WindowProxy](https://developer.mozilla.org/en-US/docs/Glossary/WindowProxy)
- [World Wide Web](https://developer.mozilla.org/en-US/docs/Glossary/World_Wide_Web)
- [Wrapper](https://developer.mozilla.org/en-US/docs/Glossary/Wrapper)
- [XFormsDeprecated](https://developer.mozilla.org/en-US/docs/Glossary/XFormsDeprecated)
- [XHTML](https://developer.mozilla.org/en-US/docs/Glossary/XHTML)
- [XInclude](https://developer.mozilla.org/en-US/docs/Glossary/XInclude)
- [XLink](https://developer.mozilla.org/en-US/docs/Glossary/XLink)
- [XML](https://developer.mozilla.org/en-US/docs/Glossary/XML)
- [XMLHttpRequest (*XHR*)](https://developer.mozilla.org/en-US/docs/Glossary/XMLHttpRequest_(XHR))
- [XPath](https://developer.mozilla.org/en-US/docs/Glossary/XPath)
- [XQuery](https://developer.mozilla.org/en-US/docs/Glossary/XQuery)
- [XSLT](https://developer.mozilla.org/en-US/docs/Glossary/XSLT)
- [Zstandard compression](https://developer.mozilla.org/en-US/docs/Glossary/Zstandard_compression)

387
skills/web-coder/references/html-markup.md Normal file
View File

@@ -0,0 +1,387 @@
# HTML & Markup Reference
Comprehensive reference for HTML5, markup languages, and document structure.
## Core Concepts
### HTML (HyperText Markup Language)
The standard markup language for creating web pages and web applications.
**Related Terms**: HTML5, XHTML, Markup, Semantic HTML
### Elements
Building blocks of HTML documents. Each element has opening/closing tags (except void elements).
**Common Elements**:
- `<div>` - Generic container
- `<span>` - Inline container
- `<article>` - Self-contained content
- `<section>` - Thematic grouping
- `<nav>` - Navigation links
- `<header>` - Introductory content
- `<footer>` - Footer content
- `<main>` - Main content
- `<aside>` - Complementary content
### Attributes
Properties that provide additional information about HTML elements.
**Common Attributes**:
- `id` - Unique identifier
- `class` - CSS class name(s)
- `src` - Source URL for images/scripts
- `href` - Hyperlink reference
- `alt` - Alternative text
- `title` - Advisory title
- `data-*` - Custom data attributes
- `aria-*` - Accessibility attributes
### Void Elements
Elements that cannot have content and don't have closing tags.
**Examples**: `<img>`, `<br>`, `<hr>`, `<input>`, `<meta>`, `<link>`
## Semantic HTML
### What is Semantic HTML?
HTML that clearly describes its meaning to both the browser and the developer.
**Benefits**:
- Improved accessibility
- Better SEO
- Easier maintenance
- Built-in meaning and structure
### Semantic Elements
| Element | Purpose | When to Use |
|---------|---------|-------------|
| `<article>` | Self-contained composition | Blog posts, news articles |
| `<section>` | Thematic grouping of content | Chapters, tabbed content |
| `<nav>` | Navigation links | Main menu, breadcrumbs |
| `<aside>` | Tangential content | Sidebars, related links |
| `<header>` | Introductory content | Page/section headers |
| `<footer>` | Footer content | Copyright, contact info |
| `<main>` | Main content | Primary page content |
| `<figure>` | Self-contained content | Images with captions |
| `<figcaption>` | Caption for figure | Image descriptions |
| `<time>` | Date/time | Publishing dates |
| `<mark>` | Highlighted text | Search results |
| `<details>` | Expandable details | Accordions, FAQs |
| `<summary>` | Summary for details | Accordion headers |
### Example: Semantic Document Structure
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Page Example</title>
</head>
<body>
<header>
<h1>Site Title</h1>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Article Title</h2>
<time datetime="2026-03-04">March 4, 2026</time>
</header>
<p>Article content goes here...</p>
<footer>
<p>Author: John Doe</p>
</footer>
</article>
</main>
<aside>
<h3>Related Content</h3>
<ul>
<li><a href="/related">Related Article</a></li>
</ul>
</aside>
<footer>
<p>&copy; 2026 Company Name</p>
</footer>
</body>
</html>
```
## Document Structure
### Doctype
Declares the document type and HTML version.
```html
<!DOCTYPE html>
```
### Head Section
Contains metadata about the document.
**Common Elements**:
- `<meta>` - Metadata (charset, viewport, description)
- `<title>` - Page title (shown in browser tab)
- `<link>` - External resources (stylesheets, icons)
- `<script>` - JavaScript files
- `<style>` - Inline CSS
### Metadata Examples
```html
<head>
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO metadata -->
<meta name="description" content="Page description for search engines">
<meta name="keywords" content="html, web, development">
<meta name="author" content="Author Name">
<!-- Open Graph (social media) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">
<!-- Favicon -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Preload critical resources -->
<link rel="preload" href="critical.css" as="style">
<link rel="preconnect" href="https://api.example.com">
</head>
```
## Forms and Input
### Form Elements
```html
<form action="/submit" method="POST">
<!-- Text input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<!-- Email input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<!-- Password input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8" required>
<!-- Select dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select...</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
<!-- Textarea -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"></textarea>
<!-- Checkbox -->
<label>
<input type="checkbox" name="terms" required>
I agree to the terms
</label>
<!-- Radio buttons -->
<fieldset>
<legend>Choose an option:</legend>
<label>
<input type="radio" name="option" value="a">
Option A
</label>
<label>
<input type="radio" name="option" value="b">
Option B
</label>
</fieldset>
<!-- Submit button -->
<button type="submit">Submit</button>
</form>
```
### Input Types
| Type | Purpose | Example |
|------|---------|---------|
| `text` | Single-line text | `<input type="text">` |
| `email` | Email address | `<input type="email">` |
| `password` | Password field | `<input type="password">` |
| `number` | Numeric input | `<input type="number" min="0" max="100">` |
| `tel` | Telephone number | `<input type="tel">` |
| `url` | URL | `<input type="url">` |
| `date` | Date picker | `<input type="date">` |
| `time` | Time picker | `<input type="time">` |
| `file` | File upload | `<input type="file" accept="image/*">` |
| `checkbox` | Checkbox | `<input type="checkbox">` |
| `radio` | Radio button | `<input type="radio">` |
| `range` | Slider | `<input type="range" min="0" max="100">` |
| `color` | Color picker | `<input type="color">` |
| `search` | Search field | `<input type="search">` |
## Related Markup Languages
### XML (Extensible Markup Language)
A markup language for encoding documents in a format that is both human-readable and machine-readable.
**Key Differences from HTML**:
- All tags must be properly closed
- Tags are case-sensitive
- Attributes must be quoted
- Custom tag names allowed
### XHTML (Extensible HyperText Markup Language)
HTML reformulated as XML. Stricter syntax rules than HTML.
### MathML (Mathematical Markup Language)
Markup language for displaying mathematical notation on the web.
```html
<math>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mn>1</mn>
</mrow>
</math>
```
### SVG (Scalable Vector Graphics)
XML-based markup language for describing two-dimensional vector graphics.
```html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
```
## Character Encoding and References
### Character Encoding
Defines how characters are represented as bytes.
**UTF-8**: Universal character encoding standard (recommended)
```html
<meta charset="UTF-8">
```
### Character References
Ways to represent special characters in HTML.
**Named Entities**:
- `&lt;` - Less than (<)
- `&gt;` - Greater than (>)
- `&amp;` - Ampersand (&)
- `&quot;` - Quote (")
- `&apos;` - Apostrophe (')
- `&nbsp;` - Non-breaking space
- `&copy;` - Copyright (©)
**Numeric Entities**:
- `&#60;` - Less than (<)
- `&#169;` - Copyright (©)
- `&#8364;` - Euro (€)
## Block vs Inline Content
### Block-Level Content
Elements that create a "block" in the layout, starting on a new line.
**Examples**: `<div>`, `<p>`, `<h1>`-`<h6>`, `<article>`, `<section>`, `<header>`, `<footer>`, `<nav>`, `<aside>`, `<ul>`, `<ol>`, `<li>`
### Inline-Level Content
Elements that don't start on a new line and only take up as much width as necessary.
**Examples**: `<span>`, `<a>`, `<strong>`, `<em>`, `<img>`, `<code>`, `<abbr>`, `<cite>`
## Best Practices
### Do's
- ✅ Use semantic HTML elements
- ✅ Include proper document structure (DOCTYPE, html, head, body)
- ✅ Set character encoding to UTF-8
- ✅ Use descriptive `alt` attributes for images
- ✅ Associate labels with form inputs
- ✅ Use heading hierarchy properly (h1 → h2 → h3)
- ✅ Validate HTML with W3C validator
- ✅ Use proper ARIA roles when needed
- ✅ Include meta viewport for responsive design
### Don'ts
- ❌ Use `<div>` when a semantic element exists
- ❌ Skip heading levels (h1 → h3)
- ❌ Use tables for layout
- ❌ Forget to close tags (except void elements)
- ❌ Use inline styles extensively
- ❌ Omit `alt` attribute on images
- ❌ Create forms without labels
- ❌ Use deprecated elements (`<font>`, `<center>`, `<blink>`)
## Glossary Terms from MDN
**Key Terms Covered**:
- Abstraction
- Accessibility tree
- Accessible description
- Accessible name
- Attribute
- Block-level content
- Breadcrumb
- Browsing context
- Character
- Character encoding
- Character reference
- Character set
- Doctype
- Document environment
- Element
- Entity
- Head
- HTML
- HTML5
- Hyperlink
- Hypertext
- Inline-level content
- Markup
- MathML
- Metadata
- Semantics
- SVG
- Tag
- Void element
- XHTML
- XML
## Additional Resources
- [MDN HTML Reference](https://developer.mozilla.org/en-US/docs/Web/HTML)
- [W3C HTML Specification](https://html.spec.whatwg.org/)
- [HTML5 Doctor](http://html5doctor.com/)
- [W3C Markup Validation Service](https://validator.w3.org/)

538
skills/web-coder/references/http-networking.md Normal file
View File

@@ -0,0 +1,538 @@
# HTTP & Networking Reference
Comprehensive reference for HTTP protocol, networking concepts, and web communication.
## HTTP (HyperText Transfer Protocol)
Protocol for transferring hypertext between client and server. Foundation of data communication on the web.
### HTTP Versions
- **HTTP/1.1** (1997): Text-based, persistent connections, pipelining
- **HTTP/2** (2015): Binary protocol, multiplexing, server push, header compression
- **HTTP/3** (2022): Based on QUIC (UDP), improved performance, better handling of packet loss
## Request Methods
| Method | Purpose | Idempotent | Safe | Cacheable |
|--------|---------|------------|------|-----------|
| GET | Retrieve resource | Yes | Yes | Yes |
| POST | Create resource | No | No | Rarely |
| PUT | Update/replace resource | Yes | No | No |
| PATCH | Partial update | No | No | No |
| DELETE | Delete resource | Yes | No | No |
| HEAD | Like GET but no body | Yes | Yes | Yes |
| OPTIONS | Get allowed methods | Yes | Yes | No |
| CONNECT | Establish tunnel | No | No | No |
| TRACE | Echo request | Yes | Yes | No |
**Safe**: Doesn't modify server state
**Idempotent**: Multiple identical requests have same effect as single request
## Status Codes
### 1xx Informational
| Code | Message | Meaning |
|------|---------|---------|
| 100 | Continue | Client should continue request |
| 101 | Switching Protocols | Server switching protocols |
### 2xx Success
| Code | Message | Meaning |
|------|---------|---------|
| 200 | OK | Request succeeded |
| 201 | Created | Resource created |
| 202 | Accepted | Accepted but not processed |
| 204 | No Content | Success but no content to return |
| 206 | Partial Content | Partial resource (range request) |
### 3xx Redirection
| Code | Message | Meaning |
|------|---------|---------|
| 301 | Moved Permanently | Resource permanently moved |
| 302 | Found | Temporary redirect |
| 303 | See Other | Response at different URI |
| 304 | Not Modified | Resource not modified (cache) |
| 307 | Temporary Redirect | Like 302 but keep method |
| 308 | Permanent Redirect | Like 301 but keep method |
### 4xx Client Errors
| Code | Message | Meaning |
|------|---------|---------|
| 400 | Bad Request | Invalid syntax |
| 401 | Unauthorized | Authentication required |
| 403 | Forbidden | Access denied |
| 404 | Not Found | Resource not found |
| 405 | Method Not Allowed | Method not supported |
| 408 | Request Timeout | Request took too long |
| 409 | Conflict | Request conflicts with state |
| 410 | Gone | Resource permanently gone |
| 413 | Payload Too Large | Request body too large |
| 414 | URI Too Long | URI too long |
| 415 | Unsupported Media Type | Media type not supported |
| 422 | Unprocessable Entity | Semantic errors |
| 429 | Too Many Requests | Rate limit exceeded |
### 5xx Server Errors
| Code | Message | Meaning |
|------|---------|---------|
| 500 | Internal Server Error | Generic server error |
| 501 | Not Implemented | Method not supported |
| 502 | Bad Gateway | Invalid response from upstream |
| 503 | Service Unavailable | Server temporarily unavailable |
| 504 | Gateway Timeout | Upstream timeout |
| 505 | HTTP Version Not Supported | HTTP version not supported |
## HTTP Headers
### Request Headers
```http
GET /api/users HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: application/json, text/plain
Accept-Language: en-US,en;q=0.9
Accept-Encoding: gzip, deflate, br
Authorization: Bearer token123
Cookie: sessionId=abc123
If-None-Match: "etag-value"
If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
Origin: https://example.com
Referer: https://example.com/page
```
**Common Request Headers**:
- `Accept`: Media types client accepts
- `Accept-Encoding`: Encoding formats (compression)
- `Accept-Language`: Preferred languages
- `Authorization`: Authentication credentials
- `Cache-Control`: Caching directives
- `Cookie`: Cookies sent to server
- `Content-Type`: Type of request body
- `Host`: Target host and port
- `If-Modified-Since`: Conditional request
- `If-None-Match`: Conditional request (ETag)
- `Origin`: Origin of request (CORS)
- `Referer`: Previous page URL
- `User-Agent`: Client information
### Response Headers
```http
HTTP/1.1 200 OK
Date: Mon, 04 Mar 2026 12:00:00 GMT
Server: nginx/1.18.0
Content-Type: application/json; charset=utf-8
Content-Length: 348
Content-Encoding: gzip
Cache-Control: public, max-age=3600
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Last-Modified: Mon, 04 Mar 2026 11:00:00 GMT
Access-Control-Allow-Origin: *
Set-Cookie: sessionId=xyz789; HttpOnly; Secure; SameSite=Strict
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
```
**Common Response Headers**:
- `Access-Control-*`: CORS headers
- `Cache-Control`: Caching directives
- `Content-Encoding`: Content compression
- `Content-Length`: Body size in bytes
- `Content-Type`: Media type of body
- `Date`: Response date/time
- `ETag`: Resource version identifier
- `Expires`: Expiration date
- `Last-Modified`: Last modification date
- `Location`: Redirect URL
- `Server`: Server software
- `Set-Cookie`: Set cookies
- `Strict-Transport-Security`: HSTS
- `X-Content-Type-Options`: MIME type sniffing
- `X-Frame-Options`: Clickjacking protection
## CORS (Cross-Origin Resource Sharing)
Mechanism to allow cross-origin requests.
### Simple Requests
Automatically allowed if:
- Method: GET, HEAD, or POST
- Safe headers only
- Content-Type: `application/x-www-form-urlencoded`, `multipart/form-data`, or `text/plain`
### Preflight Requests
For complex requests, browser sends OPTIONS request first:
```http
OPTIONS /api/users HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
```
```http
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400
```
### CORS Headers
**Request**:
- `Origin`: Request origin
- `Access-Control-Request-Method`: Intended method
- `Access-Control-Request-Headers`: Intended headers
**Response**:
- `Access-Control-Allow-Origin`: Allowed origins (* or specific)
- `Access-Control-Allow-Methods`: Allowed methods
- `Access-Control-Allow-Headers`: Allowed headers
- `Access-Control-Allow-Credentials`: Allow credentials
- `Access-Control-Max-Age`: Preflight cache duration
- `Access-Control-Expose-Headers`: Headers accessible to client
## Caching
### Cache-Control Directives
**Request Directives**:
- `no-cache`: Validate with server before using cache
- `no-store`: Don't cache at all
- `max-age=N`: Max age in seconds
- `max-stale=N`: Accept stale response up to N seconds
- `min-fresh=N`: Fresh for at least N seconds
- `only-if-cached`: Use only cached response
**Response Directives**:
- `public`: Cacheable by any cache
- `private`: Cacheable by browser only
- `no-cache`: Must validate before use
- `no-store`: Don't cache
- `max-age=N`: Fresh for N seconds
- `s-maxage=N`: Max age for shared caches
- `must-revalidate`: Must validate when stale
- `immutable`: Content won't change
### Examples
```http
# Cache for 1 hour
Cache-Control: public, max-age=3600
# Don't cache
Cache-Control: no-store
# Cache in browser only, revalidate after 1 hour
Cache-Control: private, max-age=3600, must-revalidate
# Cache forever (with versioned URLs)
Cache-Control: public, max-age=31536000, immutable
```
### Conditional Requests
Use ETags or Last-Modified for efficient caching:
```http
GET /resource HTTP/1.1
If-None-Match: "etag-value"
If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
```
If not modified:
```http
HTTP/1.1 304 Not Modified
ETag: "etag-value"
```
## Cookies
```http
# Server sets cookie
Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=3600
# Client sends cookie
Cookie: sessionId=abc123; userId=456
```
### Cookie Attributes
- `Path=/`: Cookie path scope
- `Domain=example.com`: Cookie domain scope
- `Max-Age=N`: Expire after N seconds
- `Expires=date`: Expire at specific date
- `Secure`: Only sent over HTTPS
- `HttpOnly`: Not accessible via JavaScript
- `SameSite=Strict|Lax|None`: CSRF protection
## REST (Representational State Transfer)
Architectural style for web services.
### REST Principles
1. **Client-Server**: Separation of concerns
2. **Stateless**: Each request contains all needed info
3. **Cacheable**: Responses must define cacheability
4. **Uniform Interface**: Standardized communication
5. **Layered System**: Client doesn't know if connected to end server
6. **Code on Demand** (optional): Server can send executable code
### RESTful API Design
```
GET /users # List users
GET /users/123 # Get user 123
POST /users # Create user
PUT /users/123 # Update user 123 (full)
PATCH /users/123 # Update user 123 (partial)
DELETE /users/123 # Delete user 123
GET /users/123/posts # List posts by user 123
GET /posts?author=123 # Alternative: filter posts
```
### HTTP Content Negotiation
```http
# Client requests JSON
Accept: application/json
# Server responds with JSON
Content-Type: application/json
# Client can accept multiple formats
Accept: application/json, application/xml;q=0.9, text/plain;q=0.8
```
## Networking Fundamentals
### TCP (Transmission Control Protocol)
Connection-oriented protocol ensuring reliable data delivery.
**TCP Handshake** (3-way):
1. Client → Server: SYN
2. Server → Client: SYN-ACK
3. Client → Server: ACK
**Features**:
- Reliable delivery (retransmission)
- Ordered data
- Error checking
- Flow control
- Connection-oriented
### UDP (User Datagram Protocol)
Connectionless protocol for fast data transmission.
**Features**:
- Fast (no handshake)
- No guaranteed delivery
- No ordering
- Lower overhead
- Used for streaming, gaming, DNS
### DNS (Domain Name System)
Translates domain names to IP addresses.
```
example.com → 93.184.216.34
```
**DNS Record Types**:
- `A`: IPv4 address
- `AAAA`: IPv6 address
- `CNAME`: Canonical name (alias)
- `MX`: Mail exchange
- `TXT`: Text record
- `NS`: Name server
### IP Addressing
**IPv4**: `192.168.1.1` (32-bit)
**IPv6**: `2001:0db8:85a3:0000:0000:8a2e:0370:7334` (128-bit)
### Ports
- **Well-known ports** (0-1023):
- 80: HTTP
- 443: HTTPS
- 21: FTP
- 22: SSH
- 25: SMTP
- 53: DNS
- **Registered ports** (1024-49151)
- **Dynamic ports** (49152-65535)
### Bandwidth & Latency
**Bandwidth**: Amount of data transferred per unit time (Mbps, Gbps)
**Latency**: Time delay in data transmission (milliseconds)
**Round Trip Time (RTT)**: Time for request to reach server and response to return
## WebSockets
Full-duplex communication over single TCP connection.
```javascript
// Client
const ws = new WebSocket('wss://example.com/socket');
ws.onopen = () => {
console.log('Connected');
ws.send('Hello server!');
};
ws.onmessage = (event) => {
console.log('Received:', event.data);
};
ws.onerror = (error) => {
console.error('Error:', error);
};
ws.onclose = () => {
console.log('Disconnected');
};
// Close connection
ws.close();
```
**Use Cases**: Chat, real-time updates, gaming, collaborative editing
## Server-Sent Events (SSE)
Server pushes updates to client over HTTP.
```javascript
// Client
const eventSource = new EventSource('/events');
eventSource.onmessage = (event) => {
console.log('New message:', event.data);
};
eventSource.addEventListener('custom-event', (event) => {
console.log('Custom event:', event.data);
});
eventSource.onerror = (error) => {
console.error('Error:', error);
};
// Close connection
eventSource.close();
```
```http
// Server response
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
data: First message
data: Second message
event: custom-event
data: Custom message data
```
## Best Practices
### Do's
- ✅ Use HTTPS everywhere
- ✅ Implement proper caching strategies
- ✅ Use appropriate HTTP methods
- ✅ Return meaningful status codes
- ✅ Implement rate limiting
- ✅ Use compression (gzip, brotli)
- ✅ Set proper CORS headers
- ✅ Implement proper error handling
- ✅ Use connection pooling
- ✅ Monitor network performance
### Don'ts
- ❌ Use HTTP for sensitive data
- ❌ Ignore CORS security
- ❌ Return wrong status codes (200 for errors)
- ❌ Cache sensitive data
- ❌ Send large uncompressed responses
- ❌ Skip SSL/TLS certificate validation
- ❌ Store credentials in URLs
- ❌ Expose internal server details in errors
- ❌ Use synchronous requests
## Glossary Terms
**Key Terms Covered**:
- Ajax
- ALPN
- Bandwidth
- Cacheable
- Cookie
- CORS
- CORS-safelisted request header
- CORS-safelisted response header
- Crawler
- Effective connection type
- Fetch directive
- Fetch metadata request header
- Forbidden request header
- Forbidden response header name
- FTP
- General header
- HOL blocking
- HTTP
- HTTP content
- HTTP header
- HTTP/2
- HTTP/3
- HTTPS
- HTTPS RR
- Idempotent
- IMAP
- Latency
- Packet
- POP3
- Proxy server
- QUIC
- Rate limit
- Request header
- Response header
- REST
- Round Trip Time (RTT)
- RTCP
- RTP
- Safe (HTTP Methods)
- SMTP
- TCP
- TCP handshake
- TCP slow start
- UDP
- WebSockets
## Additional Resources
- [MDN HTTP Guide](https://developer.mozilla.org/en-US/docs/Web/HTTP)
- [HTTP/2 Spec](https://http2.github.io/)
- [HTTP/3 Explained](https://http3-explained.haxx.se/)
- [REST API Tutorial](https://restfulapi.net/)

807
skills/web-coder/references/javascript-programming.md Normal file
View File

@@ -0,0 +1,807 @@
# JavaScript & Programming Reference
Comprehensive reference for JavaScript, ECMAScript, programming concepts, and modern JS patterns.
## Core Concepts
### JavaScript
High-level, interpreted programming language that conforms to the ECMAScript specification. Primary language for web development alongside HTML and CSS.
**Key Characteristics**:
- Dynamically typed
- Prototype-based inheritance
- First-class functions
- Event-driven
- Asynchronous execution
### ECMAScript
The standardized specification that JavaScript implements.
**Major Versions**:
- **ES5** (2009): Strict mode, JSON support
- **ES6/ES2015**: Classes, arrow functions, promises, modules
- **ES2016+**: Async/await, optional chaining, nullish coalescing
## Data Types
### Primitive Types
```javascript
// String
let name = "John";
let greeting = 'Hello';
let template = `Hello, ${name}!`; // Template literal
// Number
let integer = 42;
let float = 3.14;
let negative = -10;
let scientific = 1e6; // 1000000
// BigInt (for very large integers)
let big = 9007199254740991n;
// Boolean
let isTrue = true;
let isFalse = false;
// Undefined (declared but not assigned)
let undefined_var;
console.log(undefined_var); // undefined
// Null (intentional absence of value)
let empty = null;
// Symbol (unique identifier)
let sym = Symbol('description');
```
### Type Checking
```javascript
typeof "hello"; // "string"
typeof 42; // "number"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object" (historical bug)
typeof Symbol(); // "symbol"
typeof {}; // "object"
typeof []; // "object"
typeof function() {}; // "function"
// Better array check
Array.isArray([]); // true
// Null check
value === null; // true if null
```
### Type Coercion and Conversion
```javascript
// Implicit coercion
"5" + 2; // "52" (string concatenation)
"5" - 2; // 3 (numeric subtraction)
"5" * "2"; // 10 (numeric multiplication)
!!"value"; // true (boolean conversion)
// Explicit conversion
String(123); // "123"
Number("123"); // 123
Number("abc"); // NaN
Boolean(0); // false
Boolean(1); // true
parseInt("123px"); // 123
parseFloat("3.14"); // 3.14
```
### Truthy and Falsy Values
**Falsy values** (evaluate to false):
- `false`
- `0`, `-0`
- `""` (empty string)
- `null`
- `undefined`
- `NaN`
**Everything else is truthy**, including:
- `"0"` (string)
- `"false"` (string)
- `[]` (empty array)
- `{}` (empty object)
- `function() {}` (empty function)
## Variables and Constants
```javascript
// var (function-scoped, hoisted - avoid in modern code)
var oldStyle = "avoid this";
// let (block-scoped, can be reassigned)
let count = 0;
count = 1; // ✓ works
// const (block-scoped, cannot be reassigned)
const MAX = 100;
MAX = 200; // ✗ TypeError
// const with objects/arrays (content can change)
const person = { name: "John" };
person.name = "Jane"; // ✓ works (mutating object)
person = {}; // ✗ TypeError (reassigning variable)
```
## Functions
### Function Declaration
```javascript
function greet(name) {
return `Hello, ${name}!`;
}
```
### Function Expression
```javascript
const greet = function(name) {
return `Hello, ${name}!`;
};
```
### Arrow Functions
```javascript
// Basic syntax
const add = (a, b) => a + b;
// With block body
const multiply = (a, b) => {
const result = a * b;
return result;
};
// Single parameter (parentheses optional)
const square = x => x * x;
// No parameters
const getRandom = () => Math.random();
// Implicit return of object (wrap in parentheses)
const makePerson = (name, age) => ({ name, age });
```
### First-Class Functions
Functions are values that can be:
- Assigned to variables
- Passed as arguments
- Returned from other functions
```javascript
// Assign to variable
const fn = function() { return 42; };
// Pass as argument
function execute(callback) {
return callback();
}
execute(() => console.log("Hello"));
// Return from function
function createMultiplier(factor) {
return function(x) {
return x * factor;
};
}
const double = createMultiplier(2);
double(5); // 10
```
### Closures
Functions that remember their lexical scope:
```javascript
function createCounter() {
let count = 0; // Private variable
return {
increment() {
count++;
return count;
},
decrement() {
count--;
return count;
},
getCount() {
return count;
}
};
}
const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.decrement(); // 1
counter.getCount(); // 1
```
### Callback Functions
Function passed as an argument to be executed later:
```javascript
// Array methods use callbacks
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num));
const doubled = numbers.map(num => num * 2);
const evens = numbers.filter(num => num % 2 === 0);
const sum = numbers.reduce((acc, num) => acc + num, 0);
```
### IIFE (Immediately Invoked Function Expression)
```javascript
(function() {
// Code here runs immediately
console.log("IIFE executed");
})();
// With parameters
(function(name) {
console.log(`Hello, ${name}`);
})("World");
// Arrow function IIFE
(() => {
console.log("Arrow IIFE");
})();
```
## Objects
### Object Creation
```javascript
// Object literal
const person = {
name: "John",
age: 30,
greet() {
return `Hello, I'm ${this.name}`;
}
};
// Constructor function
function Person(name, age) {
this.name = name;
this.age = age;
}
const john = new Person("John", 30);
// Object.create
const proto = { greet() { return "Hello"; } };
const obj = Object.create(proto);
```
### Accessing Properties
```javascript
const obj = { name: "John", age: 30 };
// Dot notation
obj.name; // "John"
// Bracket notation
obj["age"]; // 30
const key = "name";
obj[key]; // "John"
// Optional chaining (ES2020)
obj.address?.city; // undefined (no error if address doesn't exist)
obj.getName?.(); // undefined (no error if getName doesn't exist)
```
### Object Methods
```javascript
const person = { name: "John", age: 30, city: "NYC" };
// Get keys
Object.keys(person); // ["name", "age", "city"]
// Get values
Object.values(person); // ["John", 30, "NYC"]
// Get entries
Object.entries(person); // [["name", "John"], ["age", 30], ["city", "NYC"]]
// Assign (merge objects)
const extended = Object.assign({}, person, { country: "USA" });
// Spread operator (modern alternative)
const merged = { ...person, country: "USA" };
// Freeze (make immutable)
Object.freeze(person);
person.age = 31; // Silently fails (throws in strict mode)
// Seal (prevent adding/removing properties)
Object.seal(person);
```
### Destructuring
```javascript
// Object destructuring
const person = { name: "John", age: 30, city: "NYC" };
const { name, age } = person;
// With different variable names
const { name: personName, age: personAge } = person;
// With defaults
const { name, country = "USA" } = person;
// Nested destructuring
const user = { profile: { email: "john@example.com" } };
const { profile: { email } } = user;
// Array destructuring
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
// first = 1, second = 2, rest = [3, 4, 5]
// Skip elements
const [a, , c] = numbers;
// a = 1, c = 3
```
## Arrays
```javascript
// Create arrays
const arr = [1, 2, 3];
const empty = [];
const mixed = [1, "two", { three: 3 }, [4]];
// Access elements
arr[0]; // 1
arr[arr.length - 1]; // Last element
arr.at(-1); // 3 (ES2022 - negative indexing)
// Modify arrays
arr.push(4); // Add to end
arr.pop(); // Remove from end
arr.unshift(0); // Add to beginning
arr.shift(); // Remove from beginning
arr.splice(1, 2, 'a', 'b'); // Remove 2 elements at index 1, insert 'a', 'b'
// Iteration
arr.forEach(item => console.log(item));
for (let item of arr) { console.log(item); }
for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
// Transformation
const doubled = arr.map(x => x * 2);
const evens = arr.filter(x => x % 2 === 0);
const sum = arr.reduce((acc, x) => acc + x, 0);
// Search
arr.includes(2); // true
arr.indexOf(2); // Index or -1
arr.find(x => x > 2); // First matching element
arr.findIndex(x => x > 2); // Index of first match
// Test
arr.some(x => x > 5); // true if any match
arr.every(x => x > 0); // true if all match
// Sort and reverse
arr.sort((a, b) => a - b); // Ascending
arr.reverse(); // Reverse in place
// Combine
const combined = arr.concat([4, 5]);
const spread = [...arr, 4, 5];
// Slice (copy portion)
const portion = arr.slice(1, 3); // Index 1 to 3 (exclusive)
// Flat (flatten nested arrays)
[[1, 2], [3, 4]].flat(); // [1, 2, 3, 4]
```
## Control Flow
### Conditionals
```javascript
// if/else
if (condition) {
// code
} else if (otherCondition) {
// code
} else {
// code
}
// Ternary operator
const result = condition ? valueIfTrue : valueIfFalse;
// Switch statement
switch (value) {
case 1:
// code
break;
case 2:
case 3:
// code for 2 or 3
break;
default:
// default code
}
// Nullish coalescing (ES2020)
const value = null ?? "default"; // "default"
const value = 0 ?? "default"; // 0 (0 is not nullish)
// Logical OR for defaults (pre-ES2020)
const value = falsy || "default";
// Optional chaining
const city = user?.address?.city;
```
### Loops
```javascript
// for loop
for (let i = 0; i < 10; i++) {
console.log(i);
}
// while loop
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
// do-while loop
do {
console.log(i);
i++;
} while (i < 10);
// for...of (iterate values)
for (const item of array) {
console.log(item);
}
// for...in (iterate keys - avoid for arrays)
for (const key in object) {
console.log(key, object[key]);
}
// break and continue
for (let i = 0; i < 10; i++) {
if (i === 5) break; // Exit loop
if (i === 3) continue; // Skip iteration
console.log(i);
}
```
## Asynchronous JavaScript
### Callbacks
```javascript
function fetchData(callback) {
setTimeout(() => {
callback("Data received");
}, 1000);
}
fetchData(data => console.log(data));
```
### Promises
```javascript
// Create promise
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
const success = true;
if (success) {
resolve("Success!");
} else {
reject("Error!");
}
}, 1000);
});
// Use promise
promise
.then(result => console.log(result))
.catch(error => console.error(error))
.finally(() => console.log("Done"));
// Promise utilities
Promise.all([promise1, promise2]); // Wait for all
Promise.race([promise1, promise2]); // First to complete
Promise.allSettled([promise1, promise2]); // Wait for all (ES2020)
Promise.any([promise1, promise2]); // First to succeed (ES2021)
```
### Async/Await
```javascript
// Async function
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error('Error:', error);
}
}
// Use async function
fetchData().then(data => console.log(data));
// Top-level await (ES2022, in modules)
const data = await fetchData();
```
## Classes
```javascript
class Person {
// Constructor
constructor(name, age) {
this.name = name;
this.age = age;
}
// Instance method
greet() {
return `Hello, I'm ${this.name}`;
}
// Getter
get info() {
return `${this.name}, ${this.age}`;
}
// Setter
set birthYear(year) {
this.age = new Date().getFullYear() - year;
}
// Static method
static species() {
return "Homo sapiens";
}
}
// Inheritance
class Employee extends Person {
constructor(name, age, jobTitle) {
super(name, age); // Call parent constructor
this.jobTitle = jobTitle;
}
// Override method
greet() {
return `${super.greet()}, I'm a ${this.jobTitle}`;
}
}
// Usage
const john = new Person("John", 30);
john.greet(); // "Hello, I'm John"
Person.species(); // "Homo sapiens"
const jane = new Employee("Jane", 25, "Developer");
jane.greet(); // "Hello, I'm Jane, I'm a Developer"
```
## Modules
### ES6 Modules (ESM)
```javascript
// Export (math.js)
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}
export default class Calculator {
// ...
}
// Import
import Calculator, { PI, add } from './math.js';
import * as math from './math.js';
import { add as sum } from './math.js'; // Rename
```
### CommonJS (Node.js)
```javascript
// Export (math.js)
module.exports = {
add(a, b) {
return a + b;
}
};
// Import
const math = require('./math');
```
## Error Handling
```javascript
// Try/catch
try {
// Code that might throw
throw new Error("Something went wrong");
} catch (error) {
console.error(error.message);
} finally {
// Always runs
console.log("Cleanup");
}
// Custom errors
class ValidationError extends Error {
constructor(message) {
super(message);
this.name = "ValidationError";
}
}
throw new ValidationError("Invalid input");
```
## Best Practices
### Do's
- ✅ Use `const` by default, `let` when needed
- ✅ Use strict mode (`'use strict';`)
- ✅ Use arrow functions for callbacks
- ✅ Use template literals for string interpolation
- ✅ Use destructuring for cleaner code
- ✅ Use async/await for asynchronous code
- ✅ Handle errors properly
- ✅ Use descriptive variable names
- ✅ Keep functions small and focused
- ✅ Use modern ES6+ features
### Don'ts
- ❌ Use `var` (use `let` or `const`)
- ❌ Pollute global scope
- ❌ Use `==` (use `===` for strict equality)
- ❌ Modify function parameters
- ❌ Use `eval()` or `with()`
- ❌ Ignore errors silently
- ❌ Use synchronous code for I/O operations
- ❌ Create deeply nested callbacks (callback hell)
## Glossary Terms
**Key Terms Covered**:
- Algorithm
- Argument
- Array
- Asynchronous
- Binding
- BigInt
- Bitwise flags
- Block (scripting)
- Boolean
- Callback function
- Camel case
- Class
- Closure
- Code point
- Code unit
- Compile
- Compile time
- Conditional
- Constant
- Constructor
- Control flow
- Deep copy
- Deserialization
- ECMAScript
- Encapsulation
- Exception
- Expando
- First-class function
- Function
- Hoisting
- IIFE
- Identifier
- Immutable
- Inheritance
- Instance
- JavaScript
- JSON
- JSON type representation
- Just-In-Time Compilation (JIT)
- Kebab case
- Keyword
- Literal
- Local scope
- Local variable
- Loop
- Method
- Mixin
- Modularity
- Mutable
- Namespace
- NaN
- Native
- Null
- Nullish value
- Number
- Object
- Object reference
- OOP
- Operand
- Operator
- Parameter
- Parse
- Polymorphism
- Primitive
- Promise
- Property (JavaScript)
- Prototype
- Prototype-based programming
- Pseudocode
- Recursion
- Regular expression
- Scope
- Serialization
- Serializable object
- Shallow copy
- Signature (functions)
- Sloppy mode
- Snake case
- Static method
- Static typing
- Statement
- Strict mode
- String
- Stringifier
- Symbol
- Synchronous
- Syntax
- Syntax error
- Type
- Type coercion
- Type conversion
- Truthy
- Falsy
- Undefined
- Value
- Variable
## Additional Resources
- [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [ECMAScript Specification](https://tc39.es/ecma262/)
- [JavaScript.info](https://javascript.info/)
- [You Don't Know JS (book series)](https://github.com/getify/You-Dont-Know-JS)

504
skills/web-coder/references/media-graphics.md Normal file
View File

@@ -0,0 +1,504 @@
# Media & Graphics Reference
Multimedia content, graphics, and related technologies for the web.
## Image Formats
### JPEG/JPG
Lossy compression for photographs.
**Characteristics**:
- Good for photos
- No transparency support
- Small file size
- Quality degrades with editing
**Usage**:
```html
<img src="photo.jpg" alt="Photo">
```
### PNG
Lossless compression with transparency.
**Characteristics**:
- Supports alpha channel (transparency)
- Larger file size than JPEG
- Good for logos, graphics, screenshots
- PNG-8 (256 colors) vs PNG-24 (16M colors)
```html
<img src="logo.png" alt="Logo">
```
### WebP
Modern format with better compression.
**Characteristics**:
- Smaller than JPEG/PNG
- Supports transparency
- Supports animation
- Not supported in older browsers
```html
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Fallback">
</picture>
```
### AVIF
Next-generation image format.
**Characteristics**:
- Better compression than WebP
- Supports HDR
- Slower encoding
- Limited browser support
### GIF
Animated images (limited colors).
**Characteristics**:
- 256 colors max
- Supports animation
- Simple transparency (no alpha)
- Consider modern alternatives (video, WebP)
### SVG (Scalable Vector Graphics)
XML-based vector graphics.
**Characteristics**:
- Scalable without quality loss
- Small file size for simple graphics
- CSS/JS manipulatable
- Animation support
```html
<!-- Inline SVG -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
<!-- External SVG -->
<img src="icon.svg" alt="Icon">
```
**Creating SVG**:
```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<!-- Rectangle -->
<rect x="10" y="10" width="80" height="60" fill="red" />
<!-- Circle -->
<circle cx="150" cy="40" r="30" fill="blue" />
<!-- Path -->
<path d="M10 100 L100 100 L50 150 Z" fill="green" />
<!-- Text -->
<text x="50" y="180" font-size="20">Hello SVG</text>
</svg>
```
## Canvas API
2D raster graphics (bitmap).
### Basic Setup
```html
<canvas id="myCanvas" width="400" height="300"></canvas>
```
```javascript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw rectangle
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);
// Draw circle
ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
// Draw line
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(350, 250);
ctx.strokeStyle = 'green';
ctx.lineWidth = 3;
ctx.stroke();
// Draw text
ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 50, 100);
// Draw image
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0);
};
img.src = 'image.jpg';
```
### Canvas Methods
```javascript
// Paths
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.closePath();
ctx.fill();
ctx.stroke();
// Transforms
ctx.translate(x, y);
ctx.rotate(angle);
ctx.scale(x, y);
ctx.save(); // Save state
ctx.restore(); // Restore state
// Compositing
ctx.globalAlpha = 0.5;
ctx.globalCompositeOperation = 'source-over';
// Export
const dataURL = canvas.toDataURL('image/png');
canvas.toBlob(blob => {
// Use blob
}, 'image/png');
```
## WebGL
3D graphics in the browser.
**Use Cases**:
- 3D visualizations
- Games
- Data visualization
- VR/AR
**Libraries**:
- **Three.js**: Easy 3D graphics
- **Babylon.js**: Game engine
- **PixiJS**: 2D WebGL renderer
```javascript
// Three.js example
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// Render loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
```
## Video
### HTML5 Video Element
```html
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser doesn't support video.
</video>
```
**Attributes**:
- `controls`: Show playback controls
- `autoplay`: Start automatically
- `loop`: Repeat video
- `muted`: Mute audio
- `poster`: Thumbnail image
- `preload`: none/metadata/auto
### Video Formats
- **MP4 (H.264)**: Widely supported
- **WebM (VP8/VP9)**: Open format
- **Ogg (Theora)**: Open format
### JavaScript Control
```javascript
const video = document.querySelector('video');
// Playback
video.play();
video.pause();
video.currentTime = 10; // Seek to 10s
// Properties
video.duration; // Total duration
video.currentTime; // Current position
video.paused; // Is paused?
video.volume = 0.5; // 0.0 to 1.0
video.playbackRate = 1.5; // Speed
// Events
video.addEventListener('play', () => {});
video.addEventListener('pause', () => {});
video.addEventListener('ended', () => {});
video.addEventListener('timeupdate', () => {});
```
## Audio
### HTML5 Audio Element
```html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
</audio>
```
### Audio Formats
- **MP3**: Widely supported
- **AAC**: Good quality
- **Ogg Vorbis**: Open format
- **WAV**: Uncompressed
### Web Audio API
Advanced audio processing:
```javascript
const audioContext = new AudioContext();
// Load audio
fetch('audio.mp3')
.then(response => response.arrayBuffer())
.then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
.then(audioBuffer => {
// Create source
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
// Create gain node (volume)
const gainNode = audioContext.createGain();
gainNode.gain.value = 0.5;
// Connect: source -> gain -> destination
source.connect(gainNode);
gainNode.connect(audioContext.destination);
// Play
source.start();
});
```
## Responsive Images
### srcset and sizes
```html
<!-- Different resolutions -->
<img src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 900px) 50vw,
800px"
alt="Responsive image">
<!-- Pixel density -->
<img src="image.jpg"
srcset="image.jpg 1x,
image@2x.jpg 2x,
image@3x.jpg 3x"
alt="High DPI image">
```
### Picture Element
Art direction and format switching:
```html
<picture>
<!-- Different formats -->
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<!-- Different crops for mobile/desktop -->
<source media="(max-width: 600px)" srcset="image-mobile.jpg">
<source media="(min-width: 601px)" srcset="image-desktop.jpg">
<!-- Fallback -->
<img src="image.jpg" alt="Fallback">
</picture>
```
## Image Optimization
### Best Practices
1. **Choose correct format**:
- Photos: JPEG, WebP, AVIF
- Graphics/logos: PNG, SVG, WebP
- Animations: Video, WebP
2. **Compress images**:
- Use compression tools
- Balance quality vs file size
- Progressive JPEG for large images
3. **Responsive images**:
- Serve appropriate sizes
- Use srcset/picture
- Consider device pixel ratio
4. **Lazy loading**:
```html
<img src="image.jpg" loading="lazy" alt="Lazy loaded">
```
5. **Dimensions**:
```html
<img src="image.jpg" width="800" height="600" alt="With dimensions">
```
## Image Loading Techniques
### Lazy Loading
```html
<!-- Native lazy loading -->
<img src="image.jpg" loading="lazy" alt="Image">
<!-- Intersection Observer -->
<img data-src="image.jpg" class="lazy" alt="Image">
```
```javascript
const images = document.querySelectorAll('.lazy');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
images.forEach(img => observer.observe(img));
```
### Progressive Enhancement
```html
<!-- Low quality placeholder -->
<img src="image-tiny.jpg"
data-src="image-full.jpg"
class="blur"
alt="Progressive image">
```
## Favicon
Website icon:
```html
<!-- Standard -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- Modern -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Multiple sizes -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
```
## Multimedia Best Practices
### Performance
- Optimize file sizes
- Use appropriate formats
- Implement lazy loading
- Use CDN for delivery
- Compress videos
### Accessibility
- Provide alt text for images
- Include captions/subtitles for videos
- Provide transcripts for audio
- Don't autoplay with sound
- Ensure keyboard controls
### SEO
- Descriptive filenames
- Alt text with keywords
- Structured data (schema.org)
- Image sitemaps
## Glossary Terms
**Key Terms Covered**:
- Alpha
- Baseline (image)
- Baseline (scripting)
- Canvas
- Favicon
- JPEG
- Lossless compression
- Lossy compression
- PNG
- Progressive enhancement
- Quality values
- Raster image
- Render
- Rendering engine
- SVG
- Vector images
- WebGL
- WebP
## Additional Resources
- [MDN Canvas Tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)
- [SVG Tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial)
- [WebGL Fundamentals](https://webglfundamentals.org/)
- [Responsive Images Guide](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
- [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)

546
skills/web-coder/references/performance-optimization.md Normal file
View File

@@ -0,0 +1,546 @@
# Performance & Optimization Reference
Comprehensive reference for web performance metrics, optimization techniques, and Core Web Vitals.
## Core Web Vitals
Google's metrics for measuring user experience.
### Largest Contentful Paint (LCP)
Measures loading performance - when largest content element becomes visible.
**Target**: < 2.5 seconds
**Optimization**:
- Reduce server response time
- Optimize images
- Remove render-blocking resources
- Use CDN
- Implement lazy loading
- Preload critical resources
```html
<link rel="preload" href="hero-image.jpg" as="image">
```
### First Input Delay (FID) → Interaction to Next Paint (INP)
FID (deprecated) measured input responsiveness. INP is the new metric.
**INP Target**: < 200ms
**Optimization**:
- Minimize JavaScript execution time
- Break up long tasks
- Use web workers
- Optimize third-party scripts
- Use `requestIdleCallback`
### Cumulative Layout Shift (CLS)
Measures visual stability - unexpected layout shifts.
**Target**: < 0.1
**Optimization**:
- Specify image/video dimensions
- Avoid inserting content above existing content
- Use CSS aspect-ratio
- Reserve space for dynamic content
```html
<img src="image.jpg" width="800" height="600" alt="Photo">
<style>
.video-container {
aspect-ratio: 16 / 9;
}
</style>
```
## Other Performance Metrics
### First Contentful Paint (FCP)
Time when first content element renders.
**Target**: < 1.8s
### Time to First Byte (TTFB)
Time for browser to receive first byte of response.
**Target**: < 600ms
### Time to Interactive (TTI)
When page becomes fully interactive.
**Target**: < 3.8s
### Speed Index
How quickly content is visually displayed.
**Target**: < 3.4s
### Total Blocking Time (TBT)
Sum of blocking time for all long tasks.
**Target**: < 200ms
## Image Optimization
### Format Selection
| Format | Best For | Pros | Cons |
|--------|----------|------|------|
| JPEG | Photos | Small size, widely supported | Lossy, no transparency |
| PNG | Graphics, transparency | Lossless, transparency | Larger size |
| WebP | Modern browsers | Small size, transparency | Limited old browser support |
| AVIF | Newest format | Best compression | Limited support |
| SVG | Icons, logos | Scalable, small | Not for photos |
### Responsive Images
```html
<!-- Picture element for art direction -->
<picture>
<source media="(min-width: 1024px)" srcset="large.webp" type="image/webp">
<source media="(min-width: 768px)" srcset="medium.webp" type="image/webp">
<source media="(min-width: 1024px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive image">
</picture>
<!-- Srcset for resolution switching -->
<img
src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="Image">
<!-- Lazy loading -->
<img src="image.jpg" loading="lazy" alt="Lazy loaded">
```
### Image Compression
- Use tools like ImageOptim, Squoosh, or Sharp
- Target 80-85% quality for JPEGs
- Use progressive JPEGs
- Strip metadata
## Code Optimization
### Minification
Remove whitespace, comments, shorten names:
```javascript
// Before
function calculateTotal(price, tax) {
const total = price + (price * tax);
return total;
}
// After minification
function t(p,x){return p+p*x}
```
**Tools**: Terser (JS), cssnano (CSS), html-minifier
### Code Splitting
Split code into smaller chunks loaded on demand:
```javascript
// Dynamic import
button.addEventListener('click', async () => {
const module = await import('./heavy-module.js');
module.run();
});
// React lazy loading
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
// Webpack code splitting
import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
// Use lodash
});
```
### Tree Shaking
Remove unused code during bundling:
```javascript
// Only imports what's used
import { debounce } from 'lodash-es';
// ESM exports enable tree shaking
export { function1, function2 };
```
### Compression
Enable gzip or brotli compression:
```nginx
# nginx config
gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1000;
# brotli (better compression)
brotli on;
brotli_types text/plain text/css application/json application/javascript;
```
## Caching Strategies
### Cache-Control Headers
```http
# Immutable assets (versioned URLs)
Cache-Control: public, max-age=31536000, immutable
# HTML (always revalidate)
Cache-Control: no-cache
# API responses (short cache)
Cache-Control: private, max-age=300
# No caching
Cache-Control: no-store
```
### Service Workers
Advanced caching control:
```javascript
// Cache-first strategy
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
// Network-first strategy
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).catch(() => {
return caches.match(event.request);
})
);
});
// Stale-while-revalidate
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.open('dynamic').then((cache) => {
return cache.match(event.request).then((response) => {
const fetchPromise = fetch(event.request).then((networkResponse) => {
cache.put(event.request, networkResponse.clone());
return networkResponse;
});
return response || fetchPromise;
});
})
);
});
```
## Loading Strategies
### Critical Rendering Path
1. Construct DOM from HTML
2. Construct CSSOM from CSS
3. Combine DOM + CSSOM into render tree
4. Calculate layout
5. Paint pixels
### Resource Hints
```html
<!-- DNS prefetch -->
<link rel="dns-prefetch" href="//example.com">
<!-- Preconnect (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- Prefetch (low priority for next page) -->
<link rel="prefetch" href="next-page.js">
<!-- Preload (high priority for current page) -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Prerender (next page in background) -->
<link rel="prerender" href="next-page.html">
```
### Lazy Loading
#### Images - native lazy loading
<img src="image.jpg" loading="lazy">
```javascript
// Intersection Observer for custom lazy loading
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});
```
### Critical CSS
Inline above-the-fold CSS, defer the rest:
```html
<head>
<style>
/* Critical CSS inlined */
body { margin: 0; font-family: sans-serif; }
.header { height: 60px; background: #333; }
</style>
<!-- Non-critical CSS deferred -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
```
## JavaScript Performance
### Debouncing & Throttling
```javascript
// Debounce - execute after delay
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
// Usage
const handleSearch = debounce((query) => {
// Search logic
}, 300);
// Throttle - execute at most once per interval
function throttle(func, limit) {
let inThrottle;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
// Usage
const handleScroll = throttle(() => {
// Scroll logic
}, 100);
```
### Long Tasks
Break up with `requestIdleCallback`:
```javascript
function processLargeArray(items) {
let index = 0;
function processChunk() {
const deadline = performance.now() + 50; // 50ms budget
while (index < items.length && performance.now() < deadline) {
// Process item
processItem(items[index]);
index++;
}
if (index < items.length) {
requestIdleCallback(processChunk);
}
}
requestIdleCallback(processChunk);
}
```
### Web Workers
Offload heavy computation:
```javascript
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: largeDataset });
worker.onmessage = (event) => {
console.log('Result:', event.data);
};
// worker.js
self.onmessage = (event) => {
const result = heavyComputation(event.data);
self.postMessage(result);
};
```
## Performance Monitoring
### Performance API
```javascript
// Navigation timing
const navTiming = performance.getEntriesByType('navigation')[0];
console.log('DOM loaded:', navTiming.domContentLoadedEventEnd);
console.log('Page loaded:', navTiming.loadEventEnd);
// Resource timing
const resources = performance.getEntriesByType('resource');
resources.forEach(resource => {
console.log(resource.name, resource.duration);
});
// Mark and measure custom timings
performance.mark('start-task');
// Do work
performance.mark('end-task');
performance.measure('task-duration', 'start-task', 'end-task');
const measure = performance.getEntriesByName('task-duration')[0];
console.log('Task took:', measure.duration, 'ms');
// Observer for performance entries
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('Performance entry:', entry);
}
});
observer.observe({ entryTypes: ['measure', 'mark', 'resource'] });
```
### Web Vitals Library
```javascript
import { getLCP, getFID, getCLS } from 'web-vitals';
getLCP(console.log);
getFID(console.log);
getCLS(console.log);
```
## CDN (Content Delivery Network)
Distribute content across global servers for faster delivery.
**Benefits**:
- Reduced latency
- Improved load times
- Better availability
- Reduced bandwidth costs
**Popular CDNs**:
- Cloudflare
- Amazon CloudFront
- Fastly
- Akamai
## Best Practices
### Do's
- ✅ Optimize images (format, compression, size)
- ✅ Minify and compress code
- ✅ Implement caching strategies
- ✅ Use CDN for static assets
- ✅ Lazy load non-critical resources
- ✅ Defer non-critical JavaScript
- ✅ Inline critical CSS
- ✅ Use HTTP/2 or HTTP/3
- ✅ Monitor Core Web Vitals
- ✅ Set performance budgets
### Don'ts
- ❌ Serve unoptimized images
- ❌ Block rendering with scripts
- ❌ Cause layout shifts
- ❌ Make excessive HTTP requests
- ❌ Load unused code
- ❌ Use synchronous operations on main thread
- ❌ Ignore performance metrics
- ❌ Forget mobile performance
## Glossary Terms
**Key Terms Covered**:
- bfcache
- Bandwidth
- Brotli compression
- Code splitting
- Compression Dictionary Transport
- Cumulative Layout Shift (CLS)
- Delta
- First Contentful Paint (FCP)
- First CPU idle
- First Input Delay (FID)
- First Meaningful Paint (FMP)
- First Paint (FP)
- Graceful degradation
- gzip compression
- Interaction to Next Paint (INP)
- Jank
- Jitter
- Largest Contentful Paint (LCP)
- Latency
- Lazy load
- Long task
- Lossless compression
- Lossy compression
- Minification
- Network throttling
- Page load time
- Page prediction
- Perceived performance
- Prefetch
- Prerender
- Progressive enhancement
- RAIL
- Real User Monitoring (RUM)
- Reflow
- Render-blocking
- Repaint
- Resource Timing
- Round Trip Time (RTT)
- Server Timing
- Speed index
- Speculative parsing
- Synthetic monitoring
- Time to First Byte (TTFB)
- Time to Interactive (TTI)
- Tree shaking
- Web performance
- Zstandard compression
## Additional Resources
- [Web.dev Performance](https://web.dev/performance/)
- [MDN Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
- [WebPageTest](https://www.webpagetest.org/)
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)

603
skills/web-coder/references/security-authentication.md Normal file
View File

@@ -0,0 +1,603 @@
# Security & Authentication Reference
Comprehensive reference for web security, authentication, encryption, and secure coding practices.
## Web Security Fundamentals
### CIA Triad
Core principles of information security:
- **Confidentiality**: Data accessible only to authorized parties
- **Integrity**: Data remains accurate and unmodified
- **Availability**: Systems and data accessible when needed
### Security Headers
```http
# Content Security Policy
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com 'nonce-<random-base64-value>'; style-src 'self' 'nonce-<random-base64-value>'; object-src 'none'
# HTTP Strict Transport Security
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
# X-Frame-Options (clickjacking protection)
X-Frame-Options: DENY
# X-Content-Type-Options (MIME sniffing)
X-Content-Type-Options: nosniff
# X-XSS-Protection (legacy, use CSP instead)
X-XSS-Protection: 1; mode=block
# Referrer-Policy
Referrer-Policy: strict-origin-when-cross-origin
# Permissions-Policy
Permissions-Policy: geolocation=(), microphone=(), camera=()
```
### CSP (Content Security Policy)
Mitigates XSS and data injection attacks.
**Directives**:
- `default-src`: Fallback for other directives
- `script-src`: JavaScript sources
- `style-src`: CSS sources
- `img-src`: Image sources
- `font-src`: Font sources
- `connect-src`: Fetch/XMLHttpRequest destinations
- `frame-src`: iframe sources
- `object-src`: Plugin sources
**Values**:
- `'self'`: Same origin
- `'none'`: Block all
- `'unsafe-inline'`: Allow inline scripts/styles (avoid)
- `'unsafe-eval'`: Allow eval() (avoid)
- `https:`: HTTPS sources only
- `https://example.com`: Specific domain
## HTTPS & TLS
### TLS (Transport Layer Security)
Encrypts data in transit between client and server.
**TLS Handshake**:
1. Client Hello (supported versions, cipher suites)
2. Server Hello (chosen version, cipher suite)
3. Server Certificate
4. Key Exchange
5. Finished (connection established)
**Versions**:
- TLS 1.0, 1.1 (deprecated)
- TLS 1.2 (current standard)
- TLS 1.3 (latest, faster)
### SSL Certificates
**Types**:
- **Domain Validated (DV)**: Basic validation
- **Organization Validated (OV)**: Business verification
- **Extended Validation (EV)**: Rigorous verification
**Certificate Authority**: Trusted entity that issues certificates
**Self-Signed**: Not trusted by browsers (dev/testing only)
### HSTS (HTTP Strict Transport Security)
Forces browsers to use HTTPS:
```http
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
```
- `max-age`: Duration in seconds
- `includeSubDomains`: Apply to all subdomains
- `preload`: Submit to browser preload list
## Authentication
### Authentication vs Authorization
- **Authentication**: Verify identity ("Who are you?")
- **Authorization**: Verify permissions ("What can you do?")
### Common Authentication Methods
#### 1. Session-Based Authentication
```javascript
// Login
app.post('/login', (req, res) => {
const { username, password } = req.body;
// Verify credentials
if (verifyCredentials(username, password)) {
req.session.userId = user.id;
res.json({ success: true });
} else {
res.status(401).json({ error: 'Invalid credentials' });
}
});
// Protected route
app.get('/profile', requireAuth, (req, res) => {
const user = getUserById(req.session.userId);
res.json(user);
});
// Logout
app.post('/logout', (req, res) => {
req.session.destroy();
res.json({ success: true });
});
```
**Pros**: Simple, server controls sessions
**Cons**: Stateful, scalability issues, CSRF vulnerable
#### 2. Token-Based Authentication (JWT)
```javascript
// Login
app.post('/login', (req, res) => {
const { username, password } = req.body;
if (verifyCredentials(username, password)) {
const token = jwt.sign(
{ userId: user.id, role: user.role },
SECRET_KEY,
{ expiresIn: '1h' }
);
res.json({ token });
} else {
res.status(401).json({ error: 'Invalid credentials' });
}
});
// Protected route
app.get('/profile', (req, res) => {
const token = req.headers.authorization?.split(' ')[1];
try {
const decoded = jwt.verify(token, SECRET_KEY);
const user = getUserById(decoded.userId);
res.json(user);
} catch (error) {
res.status(401).json({ error: 'Invalid token' });
}
});
```
**Pros**: Stateless, scalable, works across domains
**Cons**: Can't revoke before expiry, size overhead
#### 3. OAuth 2.0
Authorization framework for delegated access.
**Roles**:
- **Resource Owner**: End user
- **Client**: Application requesting access
- **Authorization Server**: Issues tokens
- **Resource Server**: Hosts protected resources
**Flow Example** (Authorization Code):
1. Client redirects to auth server
2. User authenticates and grants permission
3. Auth server redirects back with code
4. Client exchanges code for access token
5. Client uses token to access resources
#### 4. Multi-Factor Authentication (MFA)
Requires multiple verification factors:
- **Something you know**: Password
- **Something you have**: Phone, hardware token
- **Something you are**: Biometric
### Password Security
```javascript
const bcrypt = require('bcrypt');
// Hash password
async function hashPassword(password) {
const saltRounds = 10;
return await bcrypt.hash(password, saltRounds);
}
// Verify password
async function verifyPassword(password, hash) {
return await bcrypt.compare(password, hash);
}
```
**Best Practices**:
- ✅ Use bcrypt, scrypt, or Argon2
- ✅ Minimum 8 characters (12+ recommended)
- ✅ Require mix of characters
- ✅ Implement rate limiting
- ✅ Use account lockout after failures
- ❌ Never store plain text passwords
- ❌ Never limit password length (within reason)
- ❌ Never email passwords
## Common Vulnerabilities
### XSS (Cross-Site Scripting)
Injecting malicious scripts into web pages.
**Types**:
1. **Stored XSS**: Malicious script stored in database
2. **Reflected XSS**: Script in URL reflected in response
3. **DOM-based XSS**: Client-side script manipulation
**Prevention**:
```javascript
// ❌ Vulnerable
element.innerHTML = userInput;
// ✅ Safe
element.textContent = userInput;
// ✅ Escape HTML
function escapeHTML(str) {
return str.replace(/[&<>"']/g, (match) => {
const map = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;'
};
return map[match];
});
}
// ✅ Use DOMPurify for rich content
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);
```
### CSRF (Cross-Site Request Forgery)
Tricks user into executing unwanted actions.
**Prevention**:
```javascript
// CSRF token
app.get('/form', (req, res) => {
const csrfToken = generateToken();
req.session.csrfToken = csrfToken;
res.render('form', { csrfToken });
});
app.post('/transfer', (req, res) => {
if (req.body.csrfToken !== req.session.csrfToken) {
return res.status(403).json({ error: 'Invalid CSRF token' });
}
// Process request
});
// SameSite cookie attribute
Set-Cookie: sessionId=abc; SameSite=Strict; Secure; HttpOnly
```
### SQL Injection
Injecting malicious SQL code.
**Prevention**:
```javascript
// ❌ Vulnerable
const query = `SELECT * FROM users WHERE username = '${username}'`;
// ✅ Parameterized queries
const query = 'SELECT * FROM users WHERE username = ?';
db.execute(query, [username]);
// ✅ ORM/Query builder
const user = await User.findOne({ where: { username } });
```
### CORS Misconfiguration
```javascript
// ❌ Vulnerable (allows any origin)
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
// ✅ Whitelist specific origins
const allowedOrigins = ['https://example.com'];
if (allowedOrigins.includes(origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
res.setHeader('Access-Control-Allow-Credentials', 'true');
}
```
### Clickjacking
Tricking users into clicking hidden elements.
**Prevention**:
```http
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
# Or with CSP
Content-Security-Policy: frame-ancestors 'none'
Content-Security-Policy: frame-ancestors 'self'
```
### File Upload Vulnerabilities
```javascript
// Validate file type
const allowedTypes = ['image/jpeg', 'image/png'];
if (!allowedTypes.includes(file.mimetype)) {
return res.status(400).json({ error: 'Invalid file type' });
}
// Check file size
const maxSize = 5 * 1024 * 1024; // 5MB
if (file.size > maxSize) {
return res.status(400).json({ error: 'File too large' });
}
// Sanitize filename
const sanitizedName = file.name.replace(/[^a-z0-9.-]/gi, '_');
// Store outside web root
const uploadPath = '/secure/uploads/' + sanitizedName;
// Use random filenames
const filename = crypto.randomBytes(16).toString('hex') + path.extname(file.name);
```
## Cryptography
### Encryption vs Hashing
- **Encryption**: Reversible (decrypt with key)
- **Hashing**: One-way transformation
### Symmetric Encryption
Same key for encryption and decryption.
```javascript
const crypto = require('crypto');
function encrypt(text, key) {
const iv = crypto.randomBytes(16);
const cipher = crypto.createCipheriv('aes-256-cbc', key, iv);
let encrypted = cipher.update(text, 'utf8', 'hex');
encrypted += cipher.final('hex');
return iv.toString('hex') + ':' + encrypted;
}
function decrypt(text, key) {
const parts = text.split(':');
const iv = Buffer.from(parts[0], 'hex');
const encrypted = parts[1];
const decipher = crypto.createDecipheriv('aes-256-cbc', key, iv);
let decrypted = decipher.update(encrypted, 'hex', 'utf8');
decrypted += decipher.final('utf8');
return decrypted;
}
```
### Public-Key Cryptography
Different keys for encryption (public) and decryption (private).
**Use Cases**:
- TLS/SSL certificates
- Digital signatures
- SSH keys
### Hash Functions
```javascript
const crypto = require('crypto');
// SHA-256
const hash = crypto.createHash('sha256').update(data).digest('hex');
// HMAC (keyed hash)
const hmac = crypto.createHmac('sha256', secretKey).update(data).digest('hex');
```
### Digital Signatures
Verify authenticity and integrity.
```javascript
const { privateKey, publicKey } = crypto.generateKeyPairSync('rsa', {
modulusLength: 2048
});
// Sign
const sign = crypto.createSign('SHA256');
sign.update(data);
const signature = sign.sign(privateKey, 'hex');
// Verify
const verify = crypto.createVerify('SHA256');
verify.update(data);
const isValid = verify.verify(publicKey, signature, 'hex');
```
## Secure Coding Practices
### Input Validation
```javascript
// Validate email
function isValidEmail(email) {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}
// Validate and sanitize
function sanitizeInput(input) {
// Remove dangerous characters
return input.replace(/[<>\"']/g, '');
}
// Whitelist approach
function isValidUsername(username) {
return /^[a-zA-Z0-9_]{3,20}$/.test(username);
}
```
### Output Encoding
Encode data based on context:
- **HTML context**: Escape `< > & " '`
- **JavaScript context**: Use JSON.stringify()
- **URL context**: Use encodeURIComponent()
- **CSS context**: Escape special characters
### Secure Storage
```javascript
// ❌ Don't store sensitive data in localStorage
localStorage.setItem('token', token); // XSS can access
// ✅ Use HttpOnly cookies
res.cookie('token', token, {
httpOnly: true,
secure: true,
sameSite: 'strict',
maxAge: 3600000
});
// ✅ For sensitive client-side data, encrypt first
const encrypted = encrypt(sensitiveData, encryptionKey);
sessionStorage.setItem('data', encrypted);
```
### Rate Limiting
```javascript
const rateLimit = require('express-rate-limit');
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 100, // Limit each IP to 100 requests per windowMs
message: 'Too many requests, please try again later'
});
app.use('/api/', limiter);
// Stricter for auth endpoints
const authLimiter = rateLimit({
windowMs: 15 * 60 * 1000,
max: 5,
skipSuccessfulRequests: true
});
app.use('/api/login', authLimiter);
```
### Error Handling
```javascript
// ❌ Expose internal details
catch (error) {
res.status(500).json({ error: error.message });
}
// ✅ Generic error message
catch (error) {
console.error(error); // Log internally
res.status(500).json({ error: 'Internal server error' });
}
```
## Security Testing
### Tools
- **OWASP ZAP**: Security scanner
- **Burp Suite**: Web vulnerability scanner
- **nmap**: Network scanner
- **SQLMap**: SQL injection testing
- **Nikto**: Web server scanner
### Checklist
- [ ] HTTPS enforced everywhere
- [ ] Security headers configured
- [ ] Authentication implemented securely
- [ ] Authorization checked on all endpoints
- [ ] Input validation and sanitization
- [ ] Output encoding
- [ ] CSRF protection
- [ ] SQL injection prevention
- [ ] XSS prevention
- [ ] Rate limiting
- [ ] Secure session management
- [ ] Secure password storage
- [ ] File upload security
- [ ] Error handling doesn't leak info
- [ ] Dependencies up to date
- [ ] Security logging and monitoring
## Glossary Terms
**Key Terms Covered**:
- Authentication
- Authenticator
- Certificate authority
- Challenge-response authentication
- CIA
- Cipher
- Cipher suite
- Ciphertext
- Credential
- Cross-site request forgery (CSRF)
- Cross-site scripting (XSS)
- Cryptanalysis
- Cryptography
- Decryption
- Denial of Service (DoS)
- Digital certificate
- Digital signature
- Distributed Denial of Service (DDoS)
- Encryption
- Federated identity
- Fingerprinting
- Firewall
- HSTS
- Identity provider (IdP)
- MitM
- Multi-factor authentication
- Nonce
- OWASP
- Plaintext
- Principle of least privilege
- Privileged
- Public-key cryptography
- Relying party
- Replay attack
- Salt
- Secure context
- Secure Sockets Layer (SSL)
- Session hijacking
- Signature (security)
- SQL injection
- Symmetric-key cryptography
- Transport Layer Security (TLS)
## Additional Resources
- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
- [MDN Web Security](https://developer.mozilla.org/en-US/docs/Web/Security)
- [Security Headers](https://securityheaders.com/)
- [SSL Labs](https://www.ssllabs.com/)

615
skills/web-coder/references/servers-infrastructure.md Normal file
View File

@@ -0,0 +1,615 @@
# Servers & Infrastructure Reference
Web servers, hosting, deployment, and infrastructure concepts.
## Web Servers
### Popular Web Servers
#### Nginx
High-performance web server and reverse proxy.
**Features**:
- Load balancing
- Reverse proxy
- Static file serving
- SSL/TLS termination
**Basic Configuration**:
```nginx
server {
listen 80;
server_name example.com;
# Serve static files
location / {
root /var/www/html;
index index.html;
}
# Proxy to backend
location /api {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
# SSL configuration
listen 443 ssl;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
}
```
#### Apache HTTP Server
Widely-used web server.
**Features**:
- .htaccess support
- Module system
- Virtual hosting
**Basic .htaccess**:
```apache
# Redirect to HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
# Custom error pages
ErrorDocument 404 /404.html
# Cache control
<FilesMatch "\.(jpg|jpeg|png|gif|css|js)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
```
#### Node.js Servers
**Express.js**:
```javascript
const express = require('express');
const app = express();
app.use(express.json());
app.use(express.static('public'));
app.get('/api/users', (req, res) => {
res.json({ users: [] });
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
```
**Built-in HTTP Server**:
```javascript
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end('<h1>Hello World</h1>');
});
server.listen(3000);
```
## Hosting Options
### Static Hosting
For static sites (HTML, CSS, JS).
**Platforms**:
- **Vercel**: Automatic deployments, serverless functions
- **Netlify**: Build automation, edge functions
- **GitHub Pages**: Free for public repos
- **Cloudflare Pages**: Fast global CDN
- **AWS S3 + CloudFront**: Scalable, requires setup
**Deployment**:
```bash
# Vercel
npx vercel
# Netlify
npx netlify deploy --prod
# GitHub Pages (via Git)
git push origin main
```
### Platform as a Service (PaaS)
Managed application hosting.
**Platforms**:
- **Heroku**: Easy deployment, add-ons
- **Railway**: Modern developer experience
- **Render**: Unified platform
- **Google App Engine**: Automatic scaling
- **Azure App Service**: Microsoft cloud
**Example (Heroku)**:
```bash
# Deploy
git push heroku main
# Scale
heroku ps:scale web=2
# View logs
heroku logs --tail
```
### Infrastructure as a Service (IaaS)
Virtual servers (more control, more setup).
**Providers**:
- **AWS EC2**: Amazon virtual servers
- **Google Compute Engine**: Google VMs
- **DigitalOcean Droplets**: Simple VPS
- **Linode**: Developer-friendly VPS
### Containerization
**Docker**:
```dockerfile
# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]
```
```bash
# Build image
docker build -t my-app .
# Run container
docker run -p 3000:3000 my-app
```
**Docker Compose**:
```yaml
version: '3'
services:
web:
build: .
ports:
- "3000:3000"
environment:
- DATABASE_URL=postgres://db:5432
db:
image: postgres:15
environment:
POSTGRES_PASSWORD: password
```
### Kubernetes
Container orchestration platform.
**Concepts**:
- **Pods**: Smallest deployable units
- **Services**: Expose pods
- **Deployments**: Manage replicas
- **Ingress**: HTTP routing
## Content Delivery Network (CDN)
Distributed network for fast content delivery.
**Benefits**:
- Faster load times
- Reduced server load
- DDoS protection
- Geographic distribution
**Popular CDNs**:
- **Cloudflare**: Free tier, DDoS protection
- **AWS CloudFront**: Amazon CDN
- **Fastly**: Edge computing
- **Akamai**: Enterprise CDN
**CDN for Libraries**:
```html
<!-- CDN-hosted library -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
```
## Domain Name System (DNS)
Translates domain names to IP addresses.
### DNS Records
| Type | Purpose | Example |
|------|---------|---------|
| A | IPv4 address | `example.com → 192.0.2.1` |
| AAAA | IPv6 address | `example.com → 2001:db8::1` |
| CNAME | Alias to another domain | `www → example.com` |
| MX | Mail server | `mail.example.com` |
| TXT | Text information | SPF, DKIM records |
| NS | Nameserver | DNS delegation |
**DNS Lookup**:
```bash
# Command line
nslookup example.com
dig example.com
# JavaScript (not direct DNS, but IP lookup)
fetch('https://dns.google/resolve?name=example.com')
```
### DNS Propagation
Time for DNS changes to spread globally (typically 24-48 hours).
## SSL/TLS Certificates
Encrypt data between client and server.
### Certificate Types
- **Domain Validation (DV)**: Basic, automated
- **Organization Validation (OV)**: Verified business
- **Extended Validation (EV)**: Highest validation
### Getting Certificates
**Let's Encrypt** (Free):
```bash
# Certbot
sudo certbot --nginx -d example.com
```
**Cloudflare** (Free with Cloudflare DNS)
### HTTPS Configuration
```nginx
# Nginx HTTPS
server {
listen 443 ssl http2;
server_name example.com;
ssl_certificate /path/to/fullchain.pem;
ssl_certificate_key /path/to/privkey.pem;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers HIGH:!aNULL:!MD5;
}
# Redirect HTTP to HTTPS
server {
listen 80;
server_name example.com;
return 301 https://$host$request_uri;
}
```
## Load Balancing
Distribute traffic across multiple servers.
### Load Balancing Algorithms
- **Round Robin**: Rotate through servers
- **Least Connections**: Send to server with fewest connections
- **IP Hash**: Route based on client IP
- **Weighted**: Servers have different capacities
**Nginx Load Balancer**:
```nginx
upstream backend {
server server1.example.com weight=3;
server server2.example.com;
server server3.example.com;
}
server {
location / {
proxy_pass http://backend;
}
}
```
## Reverse Proxy
Server that forwards requests to backend servers.
**Benefits**:
- Load balancing
- SSL termination
- Caching
- Security (hide backend)
**Nginx Reverse Proxy**:
```nginx
server {
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
```
## Caching Strategies
### Browser Caching
```http
Cache-Control: public, max-age=31536000, immutable
```
### Server-Side Caching
**Redis**:
```javascript
const redis = require('redis');
const client = redis.createClient();
// Cache data
await client.set('user:1', JSON.stringify(user), {
EX: 3600 // Expire after 1 hour
});
// Retrieve cached data
const cached = await client.get('user:1');
```
### CDN Caching
Static assets cached at edge locations.
## Environment Variables
Configuration without hardcoding.
```bash
# .env file
DATABASE_URL=postgresql://localhost/mydb
API_KEY=secret-key-here
NODE_ENV=production
```
```javascript
// Access in Node.js
require('dotenv').config();
const dbUrl = process.env.DATABASE_URL;
```
**Best Practices**:
- Never commit .env to Git
- Use .env.example as template
- Different values per environment
- Secure secret values
## Deployment Strategies
### Continuous Deployment (CD)
Automatically deploy when code is pushed.
**GitHub Actions**:
```yaml
name: Deploy
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- run: npm ci
- run: npm run build
- run: npm run deploy
```
### Blue-Green Deployment
Two identical environments, switch traffic.
### Canary Deployment
Gradually roll out to subset of users.
### Rolling Deployment
Update instances incrementally.
## Process Managers
Keep applications running.
### PM2
```bash
# Start application
pm2 start app.js
# Start with name
pm2 start app.js --name my-app
# Cluster mode (use all CPUs)
pm2 start app.js -i max
# Monitor
pm2 monit
# Restart
pm2 restart my-app
# Stop
pm2 stop my-app
# Logs
pm2 logs
# Startup script (restart on reboot)
pm2 startup
pm2 save
```
### systemd
Linux service manager.
```ini
# /etc/systemd/system/myapp.service
[Unit]
Description=My Node App
[Service]
ExecStart=/usr/bin/node /path/to/app.js
Restart=always
User=nobody
Environment=NODE_ENV=production
[Install]
WantedBy=multi-user.target
```
```bash
sudo systemctl enable myapp
sudo systemctl start myapp
sudo systemctl status myapp
```
## Monitoring & Logging
### Application Monitoring
- **New Relic**: APM, monitoring
- **Datadog**: Infrastructure monitoring
- **Grafana**: Visualization
- **Prometheus**: Metrics collection
### Log Aggregation
- **Elasticsearch + Kibana**: Search and visualize logs
- **Splunk**: Enterprise log management
- **Papertrail**: Cloud logging
### Uptime Monitoring
- **UptimeRobot**: Free uptime checks
- **Pingdom**: Monitoring service
- **StatusCake**: Website monitoring
## Security Best Practices
### Server Hardening
- Keep software updated
- Use firewall (ufw, iptables)
- Disable root SSH login
- Use SSH keys (not passwords)
- Limit user permissions
- Regular backups
### Application Security
- Use HTTPS everywhere
- Implement rate limiting
- Validate all input
- Use security headers
- Keep dependencies updated
- Regular security audits
## Backup Strategies
### Database Backups
```bash
# PostgreSQL
pg_dump dbname > backup.sql
# MySQL
mysqldump -u user -p dbname > backup.sql
# MongoDB
mongodump --db mydb --out /backup/
```
### Automated Backups
- Daily backups
- Multiple retention periods
- Off-site storage
- Test restores regularly
## Scalability
### Vertical Scaling
Increase server resources (CPU, RAM).
**Pros**: Simple
**Cons**: Limited, expensive
### Horizontal Scaling
Add more servers.
**Pros**: Unlimited scaling
**Cons**: Complex, requires load balancer
### Database Scaling
- **Replication**: Read replicas
- **Sharding**: Split data across databases
- **Caching**: Reduce database load
## Glossary Terms
**Key Terms Covered**:
- Apache
- Bandwidth
- CDN
- Cloud computing
- CNAME
- DNS
- Domain
- Domain name
- Firewall
- Host
- Hotlink
- IP address
- ISP
- Latency
- localhost
- Nginx
- Origin
- Port
- Proxy servers
- Round Trip Time (RTT)
- Server
- Site
- TLD
- Web server
- Website
## Additional Resources
- [Nginx Documentation](https://nginx.org/en/docs/)
- [Docker Documentation](https://docs.docker.com/)
- [AWS Documentation](https://docs.aws.amazon.com/)
- [Let's Encrypt](https://letsencrypt.org/)
- [PM2 Documentation](https://pm2.keymetrics.io/docs/)

654
skills/web-coder/references/web-apis-dom.md Normal file
View File

@@ -0,0 +1,654 @@
# Web APIs & DOM Reference
Comprehensive reference for the Document Object Model (DOM) and Web APIs available in modern browsers.
## Document Object Model (DOM)
### What is the DOM?
The DOM is a programming interface for HTML and XML documents. It represents the page structure as a tree of objects that can be manipulated with JavaScript.
**DOM Tree Structure**:
```
Document
└── html
├── head
│ ├── title
│ └── meta
└── body
├── header
├── main
└── footer
```
### DOM Node Types
| Node Type | Description | Example |
|-----------|-------------|---------|
| Element | HTML element | `<div>`, `<p>` |
| Text | Text content | Text inside elements |
| Comment | HTML comment | `<!-- comment -->` |
| Document | Root document | `document` |
| DocumentFragment | Lightweight document | For batch operations |
### Selecting Elements
```javascript
// By ID
const element = document.getElementById('myId');
// By class name (returns HTMLCollection)
const elements = document.getElementsByClassName('myClass');
// By tag name (returns HTMLCollection)
const divs = document.getElementsByTagName('div');
// Query selector (first match)
const first = document.querySelector('.myClass');
const advanced = document.querySelector('div.container > p:first-child');
// Query selector all (returns NodeList)
const all = document.querySelectorAll('.myClass');
// Special selectors
document.body; // Body element
document.head; // Head element
document.documentElement; // <html> element
```
### Traversing the DOM
```javascript
const element = document.querySelector('#myElement');
// Parent
element.parentElement;
element.parentNode;
// Children
element.children; // HTMLCollection of child elements
element.childNodes; // NodeList of all child nodes
element.firstElementChild;
element.lastElementChild;
// Siblings
element.nextElementSibling;
element.previousElementSibling;
// Closest ancestor matching selector
element.closest('.container');
// Check if element contains another
parent.contains(child); // true/false
```
### Creating and Modifying Elements
```javascript
// Create element
const div = document.createElement('div');
const text = document.createTextNode('Hello');
const fragment = document.createDocumentFragment();
// Set content
div.textContent = 'Plain text'; // Safe (escaped)
div.innerHTML = '<strong>HTML</strong>'; // Can be unsafe with user input
// Set attributes
div.setAttribute('id', 'myDiv');
div.setAttribute('class', 'container');
div.id = 'myDiv'; // Direct property
div.className = 'container';
div.classList.add('active');
div.classList.remove('inactive');
div.classList.toggle('visible');
div.classList.contains('active'); // true/false
// Set styles
div.style.color = 'red';
div.style.backgroundColor = 'blue';
div.style.cssText = 'color: red; background: blue;';
// Data attributes
div.dataset.userId = '123'; // Sets data-user-id="123"
div.getAttribute('data-user-id'); // "123"
// Insert into DOM
parent.appendChild(div); // Add as last child
parent.insertBefore(div, referenceNode); // Insert before reference
parent.prepend(div); // Add as first child (modern)
parent.append(div); // Add as last child (modern)
element.after(div); // Insert after element
element.before(div); // Insert before element
element.replaceWith(newElement); // Replace element
// Remove from DOM
element.remove(); // Modern way
parent.removeChild(element); // Old way
// Clone element
const clone = element.cloneNode(true); // true = deep clone (with children)
```
### Element Properties
```javascript
// Dimensions and position
element.offsetWidth; // Width including border
element.offsetHeight; // Height including border
element.clientWidth; // Width excluding border
element.clientHeight; // Height excluding border
element.scrollWidth; // Total scrollable width
element.scrollHeight; // Total scrollable height
element.offsetTop; // Top position relative to offsetParent
element.offsetLeft; // Left position relative to offsetParent
// Bounding box
const rect = element.getBoundingClientRect();
// Returns: { x, y, width, height, top, right, bottom, left }
// Scroll position
element.scrollTop; // Vertical scroll position
element.scrollLeft; // Horizontal scroll position
element.scrollTo(0, 100); // Scroll to position
element.scrollIntoView(); // Scroll element into view
// Check visibility
element.checkVisibility(); // Modern API
```
## Event Handling
### Adding Event Listeners
```javascript
// addEventListener (modern, recommended)
element.addEventListener('click', handleClick);
element.addEventListener('click', handleClick, { once: true }); // Remove after first trigger
function handleClick(event) {
console.log('Clicked!', event);
}
// Event options
element.addEventListener('scroll', handleScroll, {
passive: true, // Won't call preventDefault()
capture: false, // Bubble phase (default)
once: true // Remove after one call
});
// Remove event listener
element.removeEventListener('click', handleClick);
```
### Common Events
| Category | Events |
|----------|--------|
| Mouse | `click`, `dblclick`, `mousedown`, `mouseup`, `mousemove`, `mouseenter`, `mouseleave`, `contextmenu` |
| Keyboard | `keydown`, `keyup`, `keypress` (deprecated) |
| Form | `submit`, `change`, `input`, `focus`, `blur`, `invalid` |
| Window | `load`, `DOMContentLoaded`, `resize`, `scroll`, `beforeunload`, `unload` |
| Touch | `touchstart`, `touchmove`, `touchend`, `touchcancel` |
| Drag | `drag`, `dragstart`, `dragend`, `dragover`, `drop` |
| Media | `play`, `pause`, `ended`, `timeupdate`, `loadeddata` |
| Animation | `animationstart`, `animationend`, `animationiteration` |
| Transition | `transitionstart`, `transitionend` |
### Event Object
```javascript
element.addEventListener('click', (event) => {
// Target elements
event.target; // Element that triggered event
event.currentTarget; // Element with listener attached
// Mouse position
event.clientX; // X relative to viewport
event.clientY; // Y relative to viewport
event.pageX; // X relative to document
event.pageY; // Y relative to document
// Keyboard
event.key; // 'a', 'Enter', 'ArrowUp'
event.code; // 'KeyA', 'Enter', 'ArrowUp'
event.ctrlKey; // true if Ctrl pressed
event.shiftKey; // true if Shift pressed
event.altKey; // true if Alt pressed
event.metaKey; // true if Meta/Cmd pressed
// Control event flow
event.preventDefault(); // Prevent default action
event.stopPropagation(); // Stop bubbling
event.stopImmediatePropagation(); // Stop other listeners
});
```
### Event Delegation
Handle events on parent instead of individual children:
```javascript
// Instead of adding listener to each button
document.querySelector('.container').addEventListener('click', (event) => {
if (event.target.matches('button')) {
console.log('Button clicked:', event.target);
}
});
```
## Web Storage APIs
### LocalStorage
Persistent storage (no expiration):
```javascript
// Set item
localStorage.setItem('key', 'value');
localStorage.setItem('user', JSON.stringify({ name: 'John' }));
// Get item
const value = localStorage.getItem('key');
const user = JSON.parse(localStorage.getItem('user'));
// Remove item
localStorage.removeItem('key');
// Clear all
localStorage.clear();
// Get key by index
localStorage.key(0);
// Number of items
localStorage.length;
// Iterate all items
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
console.log(key, value);
}
```
### SessionStorage
Storage cleared when tab closes:
```javascript
// Same API as localStorage
sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');
sessionStorage.removeItem('key');
sessionStorage.clear();
```
**Storage Limits**: ~5-10MB per origin
## Fetch API
Modern API for HTTP requests:
```javascript
// Basic GET request
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Async/await
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
// Check if successful
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Fetch error:', error);
}
}
// POST request with JSON
fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => console.log(data));
// With various options
fetch(url, {
method: 'GET', // GET, POST, PUT, DELETE, etc.
headers: {
'Authorization': 'Bearer token',
'Content-Type': 'application/json'
},
body: JSON.stringify(data), // For POST/PUT
mode: 'cors', // cors, no-cors, same-origin
credentials: 'include', // include, same-origin, omit
cache: 'no-cache', // default, no-cache, reload, force-cache
redirect: 'follow', // follow, error, manual
referrerPolicy: 'no-referrer' // no-referrer, origin, etc.
});
// Response methods
const text = await response.text(); // Plain text
const json = await response.json(); // JSON
const blob = await response.blob(); // Binary data
const arrayBuffer = await response.arrayBuffer(); // ArrayBuffer
const formData = await response.formData(); // FormData
```
## Other Important Web APIs
### Console API
```javascript
console.log('Message'); // Log message
console.error('Error'); // Error message (red)
console.warn('Warning'); // Warning message (yellow)
console.info('Info'); // Info message
console.table([{ a: 1 }, { a: 2 }]); // Table format
console.group('Group'); // Start group
console.groupEnd(); // End group
console.time('timer'); // Start timer
console.timeEnd('timer'); // End timer and log duration
console.clear(); // Clear console
console.assert(condition, 'Error message'); // Assert condition
```
### Timers
```javascript
// Execute once after delay
const timeoutId = setTimeout(() => {
console.log('Executed after 1 second');
}, 1000);
// Cancel timeout
clearTimeout(timeoutId);
// Execute repeatedly
const intervalId = setInterval(() => {
console.log('Executed every second');
}, 1000);
// Cancel interval
clearInterval(intervalId);
// RequestAnimationFrame (for animations)
function animate() {
// Animation code
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
```
### URL API
```javascript
const url = new URL('https://example.com:8080/path?query=value#hash');
url.protocol; // 'https:'
url.hostname; // 'example.com'
url.port; // '8080'
url.pathname; // '/path'
url.search; // '?query=value'
url.hash; // '#hash'
url.href; // Full URL
// URL parameters
url.searchParams.get('query'); // 'value'
url.searchParams.set('newParam', 'newValue');
url.searchParams.append('query', 'another');
url.searchParams.delete('query');
url.searchParams.has('query'); // true/false
// Convert to string
url.toString(); // Full URL
```
### FormData API
```javascript
// Create FormData from form
const form = document.querySelector('form');
const formData = new FormData(form);
// Create FormData manually
const data = new FormData();
data.append('username', 'john');
data.append('file', fileInput.files[0]);
// Get values
data.get('username'); // 'john'
data.getAll('files'); // Array of all 'files' values
// Iterate
for (const [key, value] of data.entries()) {
console.log(key, value);
}
// Send with fetch
fetch('/api/upload', {
method: 'POST',
body: formData // Don't set Content-Type header
});
```
### Intersection Observer API
Detect when element enters viewport:
```javascript
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Element is visible');
entry.target.classList.add('visible');
}
});
}, {
threshold: 0.5, // 50% visible
rootMargin: '0px'
});
observer.observe(element);
observer.unobserve(element);
observer.disconnect(); // Stop observing all
```
### Mutation Observer API
Watch for DOM changes:
```javascript
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
console.log('DOM changed:', mutation.type);
});
});
observer.observe(element, {
attributes: true, // Watch attribute changes
childList: true, // Watch child elements
subtree: true, // Watch all descendants
characterData: true // Watch text content
});
observer.disconnect(); // Stop observing
```
### Geolocation API
```javascript
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
},
(error) => {
console.error('Error getting location:', error);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
// Watch position (continuous updates)
const watchId = navigator.geolocation.watchPosition(callback);
navigator.geolocation.clearWatch(watchId);
```
### Web Workers
Run JavaScript in background thread:
```javascript
// Main thread
const worker = new Worker('worker.js');
worker.postMessage({ data: 'Hello' });
worker.onmessage = (event) => {
console.log('From worker:', event.data);
};
worker.onerror = (error) => {
console.error('Worker error:', error);
};
worker.terminate(); // Stop worker
// worker.js
self.onmessage = (event) => {
console.log('From main:', event.data);
self.postMessage({ result: 'Done' });
};
```
### Canvas API
Draw graphics:
```javascript
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// Draw rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);
// Draw circle
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
// Draw text
ctx.font = '20px Arial';
ctx.fillText('Hello', 10, 50);
// Draw image
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0);
};
img.src = 'image.jpg';
```
### IndexedDB
Client-side database for large amounts of structured data:
```javascript
// Open database
const request = indexedDB.open('MyDatabase', 1);
request.onerror = () => console.error('Database error');
request.onsuccess = (event) => {
const db = event.target.result;
// Use database
};
request.onupgradeneeded = (event) => {
const db = event.target.result;
const objectStore = db.createObjectStore('users', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
};
// Add data
const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
objectStore.add({ id: 1, name: 'John' });
// Get data
const request = objectStore.get(1);
request.onsuccess = () => console.log(request.result);
```
## Best Practices
### Do's
- ✅ Use `addEventListener` over inline event handlers
- ✅ Remove event listeners when no longer needed
- ✅ Use event delegation for dynamic content
- ✅ Cache DOM queries in variables
- ✅ Use `textContent` for plain text (safer than `innerHTML`)
- ✅ Use DocumentFragment for batch DOM operations
- ✅ Debounce/throttle scroll and resize handlers
- ✅ Use `requestAnimationFrame` for animations
- ✅ Validate and sanitize user input
### Don'ts
- ❌ Use `innerHTML` with untrusted data (XSS risk)
- ❌ Query DOM repeatedly in loops
- ❌ Modify DOM in tight loops (batch operations)
- ❌ Use `document.write()` (deprecated)
- ❌ Use synchronous XMLHttpRequest
- ❌ Store sensitive data in localStorage
- ❌ Ignore error handling in async code
- ❌ Block main thread with heavy computations
## Glossary Terms
**Key Terms Covered**:
- API
- Application context
- Beacon
- Blink
- Blink element
- Browser
- Browsing context
- Buffer
- Canvas
- DOM (Document Object Model)
- Document environment
- Event
- Expando
- Global object
- Global scope
- Hoisting
- IndexedDB
- Interpolation
- Node (DOM)
- Shadow tree
- WindowProxy
- Wrapper
## Additional Resources
- [MDN DOM Reference](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
- [MDN Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)
- [JavaScript.info DOM](https://javascript.info/document)

265
skills/web-coder/references/web-protocols-standards.md Normal file
View File

@@ -0,0 +1,265 @@
# Web Protocols & Standards Reference
Organizations, specifications, and standards that govern the web.
## Standards Organizations
### W3C (World Wide Web Consortium)
International community developing web standards.
**Key Standards**:
- HTML
- CSS
- XML
- SVG
- WCAG (Accessibility)
- Web APIs
**Website**: https://www.w3.org/
### WHATWG (Web Hypertext Application Technology Working Group)
Community maintaining HTML and DOM Living Standards.
**Key Standards**:
- HTML Living Standard
- DOM Living Standard
- Fetch Standard
- URL Standard
**Website**: https://whatwg.org/
### IETF (Internet Engineering Task Force)
Develops internet standards.
**Key Standards**:
- HTTP
- TLS
- TCP/IP
- DNS
- WebRTC protocols
**Website**: https://www.ietf.org/
### ECMA International
Standards organization for information systems.
**Key Standards**:
- ECMAScript (JavaScript)
- JSON
**Website**: https://www.ecma-international.org/
### TC39 (Technical Committee 39)
ECMAScript standardization committee.
**Proposal Stages**:
- **Stage 0**: Strawperson
- **Stage 1**: Proposal
- **Stage 2**: Draft
- **Stage 3**: Candidate
- **Stage 4**: Finished (included in next version)
### IANA (Internet Assigned Numbers Authority)
Coordinates internet protocol resources.
**Responsibilities**:
- MIME types
- Port numbers
- Protocol parameters
- TLDs (Top-Level Domains)
### ICANN (Internet Corporation for Assigned Names and Numbers)
Coordinates DNS and IP addresses.
## Web Standards
### HTML Standards
**HTML5 Features**:
- Semantic elements (`<article>`, `<section>`, etc.)
- Audio and video elements
- Canvas and SVG
- Form enhancements
- LocalStorage and SessionStorage
- Web Workers
- Geolocation API
### CSS Specifications
**CSS Modules** (each specification is a module):
- CSS Selectors Level 4
- CSS Flexbox Level 1
- CSS Grid Level 2
- CSS Animations
- CSS Transitions
- CSS Custom Properties
### JavaScript Standards
**ECMAScript Versions**:
- **ES5** (2009): Strict mode, JSON
- **ES6/ES2015**: Classes, modules, arrow functions, promises
- **ES2016**: Array.includes(), exponentiation operator (`**`)
- **ES2017**: async/await, Object.values/entries
- **ES2018**: Rest/spread for objects, async iteration
- **ES2019**: Array.flat(), Object.fromEntries
- **ES2020**: Optional chaining, nullish coalescing, BigInt
- **ES2021**: Logical assignment, Promise.any
- **ES2022**: Top-level await, class fields
- **ES2023**: Array.findLast(), Object.groupBy
### Web API Specifications
**Common APIs**:
- DOM (Document Object Model)
- Fetch API
- Service Workers
- Web Storage
- IndexedDB
- WebRTC
- WebGL
- Web Audio API
- Payment Request API
- Web Authentication API
## Specifications
### Normative vs Non-Normative
- **Normative**: Required for compliance
- **Non-normative**: Informative only (examples, notes)
### Specification Lifecycle
1. **Editor's Draft**: Work in progress
2. **Working Draft**: Community review
3. **Candidate Recommendation**: Implementation and testing
4. **Proposed Recommendation**: Final review
5. **W3C Recommendation**: Official standard
## Browser Compatibility
### Feature Detection
```javascript
// Check feature support
if ('serviceWorker' in navigator) {
// Use service workers
}
if (window.IntersectionObserver) {
// Use Intersection Observer
}
if (CSS.supports('display', 'grid')) {
// Use CSS Grid
}
```
### Baseline Compatibility
Newly standardized features achieving widespread browser support.
**Widely Available**: Firefox, Chrome, Edge, Safari support
### Polyfills
Code providing modern functionality in older browsers:
```javascript
// Promise polyfill
if (!window.Promise) {
window.Promise = PromisePolyfill;
}
// Fetch polyfill
if (!window.fetch) {
window.fetch = fetchPolyfill;
}
```
### Progressive Enhancement
Build for basic browsers, enhance for modern ones:
```css
/* Base styles */
.container {
display: block;
}
/* Enhanced for Grid support */
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
```
## IDL (Interface Definition Language)
**WebIDL**: Defines Web APIs
```webidl
interface Element : Node {
readonly attribute DOMString? tagName;
DOMString? getAttribute(DOMString qualifiedName);
undefined setAttribute(DOMString qualifiedName, DOMString value);
};
```
## Specifications to Know
- **HTML Living Standard**
- **CSS Specifications** (modular)
- **ECMAScript Language Specification**
- **HTTP/1.1 (RFC 9112)**
- **HTTP/2 (RFC 9113)**
- **HTTP/3 (RFC 9114)**
- **TLS 1.3 (RFC 8446)**
- **WebSocket Protocol (RFC 6455)**
- **CORS (Fetch Standard)**
- **Service Workers**
- **Web Authentication (WebAuthn)**
## Glossary Terms
**Key Terms Covered**:
- Baseline (compatibility)
- BCP 47 language tag
- ECMA
- ECMAScript
- HTML5
- IANA
- ICANN
- IDL
- IETF
- ISO
- ITU
- Non-normative
- Normative
- Polyfill
- Shim
- Specification
- W3C
- WAI
- WCAG
- WHATWG
- Web standards
- WebIDL
## Additional Resources
- [W3C Standards](https://www.w3.org/TR/)
- [WHATWG Living Standards](https://spec.whatwg.org/)
- [MDN Web Docs](https://developer.mozilla.org/)
- [Can I Use](https://caniuse.com/)
- [TC39 Proposals](https://github.com/tc39/proposals)