Proje: Okul Platform · Hub: Okul Platform — Conventions
Responsive layout refactor sırasında uygulanan karar. Blade’lerdeki inline <script> / <style> blokları hangi durumda bırakılır, hangi durumda webpack.mix.js pipeline’ına taşınır.
Inline KALIR (zorunlu)
| Tip | Örnek | Gerekçe |
|---|---|---|
| PHP → JS data bridge | window.profilingMasterData = @json($master_data) | Server-rendered data, external dosya alamaz |
| Pre-paint IIFE | Viewport override (responsive/layouts/master.blade.php) | defer ile yüklenen dosya paint sonrası çalışır, zoom’u undo etmek geç kalır |
| Critical init | var dataLayer = [] (GTM prerequisite) | GTM loader’dan önce global tanımlı olmalı |
| JSON-LD | <script type="application/ld+json"> (seo-head) | Google structured data, HTML içinde olması gerekiyor |
| Global vars | _csrfToken, _userId, _gaEventCat (global-js-vars) | Request-scoped PHP değerleri |
Inline ÇIKARILIR (mix.scripts)
| Kırmızı bayrak | Örnek (bu refactor’dan) |
|---|---|
| >20 satır JS | form-helpers.blade.php (IIFE inside <script> tag) |
| Reusable business logic | Phone mask, email validator, footer accordion toggle |
| Duplicate fonksiyon | finder/result.blade.php’deki finderBuildListingUrl (aynısı finder-builder.js’te vardı) |
| UI event handler’lar | Accordion click/matchMedia listener’ları |
Uygulanan yapı
resources/assets/scripts/profiling/
├── alpine-app.js (Alpine init + component register + window alias)
├── form-helpers.js (phone + email validator, mix.scripts)
├── footer-accordion.js (lg+ open-always, mix.scripts)
├── ga-events.js (gaSendEventXxx helper'ları)
└── components/ (Alpine component factory'leri)
resources/assets/css/
└── cookie-consent.css (mix.styles — responsive layout kullanabilsin)
resources/assets/styles/
└── responsive.css (Tailwind v4 entry + inline-overrides merged)
Fayda
- Minify + gzip (HTML payload küçülür, her sayfada tekrarlanmaz)
- Browser cache (hash’li URL, immutable)
- ESLint/Prettier/unit test kapsamı
- CSP uyumlu (
script-src 'self'için'unsafe-inline'gereksinimi azalır) - Single source of truth (duplicate risk yok)
Related
- 2026-04-16-responsive-script-loading-split — Layout vs page-specific script ayrımı
- 2026-04-16-responsive-viewport-1180-zoom-conflict — Pre-paint IIFE’nin neden zorunlu inline kaldığı örnek
- 2026-04-14-fe-style-js-locations — Genel FE dosya yerleşim konvansiyonu
- Okul Platform — Conventions