2025

2025 . , . .

AI:

• — AI
• —
• — AI
• —

// AI :
// " "

function validateEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}

// :
// : if (user.age >= 18) { ... }
// : if (user && user.age >= 18) { ... }

WebAssembly (WASM) —

WebAssembly:

• — Unity Unreal Engine
• —
• —
• 3D —

CSS

1. CSS Container Queries

CSS . !

.card {
    container-type: inline-size;
}

@container (max-width: 400px) {
    .card h2 {
        font-size: 1.2rem;
    }
    
    .card p {
        font-size: 0.9rem;
    }
}

@container (min-width: 401px) {
    .card {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
}

2. CSS Grid Level 2

CSS Grid (subgrid) .

3. CSS Houdini

CSS API .

JavaScript

:

• —
• —
• Record & Tuple —
• —

// (ES2024)
const users = [
{ name: '', age: 25, city: '' },
{ name: '', age: 30, city: '' },
{ name: '', age: 25, city: '' }
];

const groupedByAge = users.groupBy(user => user.age);
// : { 25: [...], 30: [...] }

// ()
const result = users
|> filter(user => user.age > 25)
|> map(user => user.name)
|> join(', ');

// ()
const response = match(fetch('/api/user')) {
{ status: 200, data } => data,
{ status: 404 } => ' ',
{ status: 500 } => ' ',
_ => ' '
};

(PWA)

PWA .

1.

.

class UserCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}

connectedCallback() {
const name = this.getAttribute('name');
const email = this.getAttribute('email');

this.shadowRoot.innerHTML = `
<style>
.card {
border: 1px solid #ccc;
padding: 1rem;
border-radius: 8px;
}
</style>
<div class="card">
<h3>${name}</h3>
<p>${email}</p>
</div>
`;
}
}

customElements.define('user-card', UserCard);

// :
// <user-card name="" email="gildong@example.com"></user-card>

2. API

• WebRTC — P2P
• WebGL 2.0 — 3D
• Web Audio API —
• Web Bluetooth — Bluetooth

:

• HTTPS Everywhere —
• HSTS — HTTPS
• —
• — API

2024, :

:

• —
• —
• —
• — preload, prefetch, preconnect
• — WebP, AVIF,

— "" :

• — =
• — CPU
• —
• —

2026-2027:

• WebGPU — GPU
• Web Neural Network API —
• WebAssembly 2.0 —
• —

:

• MDN Web Docs —
• Web.dev — Google
• Can I Use —
• —

:

• CSS-Tricks — CSS
• Smashing Magazine —
• Dev.to —
• Reddit r/webdev —

2024 . AI , WebAssembly, CSS JavaScript . .

: , . , , .