Фронтенд-дайджест №587 (18 -24 вересня 2023)

Веброзробка

• Новий спосіб створювати модальні елементи за допомогою лише HTML

• Який open-source monospaced шриф найкраще підходить для кодування?

• Малювання зірки за допомогою DOMMatrix

• Опитування "State of HTML 2023" розпочато!

• Що таке веб-токени JWT/Jots/JSON?

• Від WebGL до WebGPU

• Вступ до HTMX: Динамічний HTML без JavaScript

• Продуктивність

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

CSS

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

JavaScript

• Прискорення екосистеми JavaScript - Polyfills, що вийшли з-під контролю

• Походження TypeScript: Документальний фільм

• Як запрограмувати темний режим для 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