Form validation, Cross browser, AMP

Ez az interjúpont 3 különálló, de a frontend fejlesztés szempontjából fontos képességet fed le. Nézzük őket egyenként, gyakorlati példákkal és medior szintű elvárással:

✅ 1. Gyakorlott formkezelés / validációkban

🔹 Mit várnak el tőled?

Angular Reactive Forms használata (FormGroup, FormControl, Validators)
Saját validátorok (custom validator)
Hibakezelés (form.errors, control.errors)
UI visszajelzés (touched, dirty, invalid, valid)
Async validator használat

🧪 Példa: kötelező + email form

form = new FormGroup({
  email: new FormControl('', [
    Validators.required,
    Validators.email
  ]),
  password: new FormControl('', [
    Validators.required,
    Validators.minLength(8)
  ])
});

<input formControlName="email" type="email" />
<div *ngIf="form.get('email')?.errors?.['email']">
  Hibás email formátum
</div>

✅ 2. Cross-browser kompatibilitás megoldása

🔹 Elvárt tudás:

Ismered a böngészők közti HTML/CSS/JS különbségeket
Használod a normalize.css vagy reset.css-t
Tudsz @supports / feature detection alapú stíluskezelést írni
Polyfill használata (core-js, zone.js, stb.)
CSS fallback (grid, flexbox, clamp, aspect-ratio)
Teszteltél már Edge, Safari, Firefox környezetekben

🧠 Példák:

/* clamp fallback */
font-size: 16px;
font-size: clamp(14px, 2vw, 18px);

/* CSS @supports */
@supports (aspect-ratio: 1 / 1) {
  .image {
    aspect-ratio: 1 / 1;
  }
}

src/polyfills.ts fájl Angular projektben → itt aktiválható pl. IE11 vagy Safari fixek
Böngésző detektálás inkább feature-alapú, nem user-agent (pl. window.CSS.supports())

✅ 3. Accelerated Mobile Pages (AMP)

🔹 Elvárt alapszintű ismeret:

AMP célja: extrém gyors betöltés mobilon, főleg tartalomvezérelt oldalaknál
Használata: statikus tartalmaknál, főleg blog, hírportál, landing
Korlátozott JavaScript használat → csak <amp-script>, vagy egyáltalán nincs JS
CDN-en keresztül validálva fut
Kötelező AMP valid markup

🧪 Példa: AMP oldal alap

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="https://example.com/page.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp-boilerplate>body{visibility:hidden}</style>
    <style amp-custom>
      h1 { font-size: 24px; }
    </style>
  </head>
  <body>
    <h1>Üdvözlünk AMP oldalon</h1>
    <amp-img src="/logo.png" width="100" height="100" layout="fixed"></amp-img>
  </body>
</html>

🔍 Használati esetek:

SEO gyorsítás (Google AMP cache)
Hirdetések, cikkek AMP formátumban
WordPress AMP plugin is létezik

🧠 Összefoglalás interjúhoz:

Terület	Elvárt tudás
Formkezelés	Reactive Forms, hibakezelés, async validator, saját validator
Cross-browser	CSS fallback, polyfill, normalize.css, Safari/Edge fixek
AMP	Alap markup, célja, korlátai, valid AMP HTML

Ha kéred, szívesen adok egy AMP-valid landing page sablont, vagy Angular-os cross-browser CSS hibakeresési példát.