Front-end Digest № 14: оптимізація застосунків Vue.js, порівняння Astro та Svelte і адаптивна типографіка в CSS

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Привіт, колеги. Мене звати Олександр і я займаюся фронтендом в компанії Zfort Group. Маю для вас черговий дайджест із цікавими матеріалами зі світу фронтенда за останній тиждень.

Веброзробка

• Який open-source monospaced шрифт найкраще підходить для кодування?
• Малювання зірки за допомогою DOMMatrix
• Що таке веб-токени JWT/Jots/JSON?
• Від WebGL до WebGPU

• HTML
  • Новий спосіб створювати модальні елементи за допомогою лише HTML
  • Опитування «State of HTML 2023» розпочато!
  • Вступ до HTMX: Динамічний HTML без JavaScript

• Продуктивність
  • Що спричиняє поганий CLS і як це виправити?
  • Тримайте всю мережеву активність під контролем за допомогою Priority Hints

CSS

• Шлях до неймовірного CSS Easing за допомогою функції linear().
• Ще один сучасний CSS Reset
• Висновки щодо CSS в застосунку Threads: Частина 2
• Sticky Bento on Scroll. Чудовий приклад анімації CSS на основі прокрутки
• Адаптивні шкали типографіки з композиційними CSS-утилітами

JavaScript

• 🎬 Походження TypeScript: Документальний фільм
• Прискорення екосистеми JavaScript — Polyfills, що вийшли з-під контролю
• Як запрограмувати темний режим для Google Sheets за допомогою Apps Script та JavaScript
• Розуміння оператора модуля в JavaScript

• React
  • Оптимізація використання контексту провайдера в React
  • Створіть власний клон ChatGPT за допомогою React та OpenAI API
  • Як створити компонент акордеону за допомогою React.js
  • v0: AI інструмент від Vercel, який працює як Midjourney для React, тобто видає сніппети коду, базуючись на ваших запитах (prompts)
  • Створення React-застосунку за допомогою smol developer
  • Розуміння пропсів у React — вичерпний посібник

• Vue
  • Clean Layout Architecture для Vue-застосунків
  • Оптимізація застосунків Vue.js за допомогою web workers
  • 7 коротких порад про стилі Vue, які ви (можливо) не знали

• Angular
  • Мікрофронтенд-застосунок на Angular: труднощі, з якими ви зіткнетеся в реальному часі

• Svelte
  • svelte 5: Знайомство з runes
  • Дослідження Astro та Svelte vs SvelteKit: порівняльний путівник
  • Як створити додаток Etch-A-Sketch за допомогою Svelte

• Libs & Plugins
  • Бенчмарки для JS-мініфікаторів: babel-minify, esbuild, terser, uglify-js, swc, google closure compiler, tdewolff/minify
  • MouseMove — автоматизація поведінки курсору миші на JavaScript для веб-презентації
  • Nue JS — надзвичайно мала (2.3kb) JavaScript бібліотека для створення веб-інтерфейсів. Це ядро майбутньої екосистеми Nue. Вона схожа на Vue.js, React.js або Svelte, але без хуків, ефектів, пропсів, порталів, watchers, providers, injects, suspension та інших незвичних абстракцій на вашому шляху
  • swup 4 — універсальна бібліотека для створення переходів між сторінками. Вона керує повним життєвим циклом завантаження сторінки та плавно додає анімацією між поточною та наступною сторінками.

Браузери

• Що нового в DevTools (Chrome 118)
• Функції WebKit у Safari 17.0