✅ 12 обновлений css

Moderncss выпустили статью об обновленных свойствах, которые можно смело использовать в новых проектах. Часть из них многие уже используют, а часть первый раз увидят.

aspect-ratio: 16/9;

Соотношение сторон. Контент имеет приоритет, использовать можно, например, для задания соотношения сторон для видео.

/* До */
margin-left: auto;
margin-right: auto;

/* После */
margin-inline: auto;

Сокращение для боковых отступов. Много раз видел применение новых свойств по отступам. Но до сих пор не могу отвыкнуть от базовых padding и margin

width: fit-content;

Ширина подстраивается под контент.

text-underline-offset: 0.25em;

Смещение линии подчеркивания у текста. Так же есть свойства для изменения цвета и толщины линии.

Статья на английском

#css #html

✅ Nuxt 3.10

Изменения:
- Новый useId для генерации ID для SSR
- Возможность расширения router.options в модулях
- Экспериментальная поддержка nodejs на стороне клиента
- Улучшили реактивность cookie
- Теперь можно менять метаданные роута в модулях и хуках
- и т.д.

Ссылка на релиз

#js #ts #vue #news

✅ Vite 5.1

Несколько недель назад Vite преодолел планку в 10 млн установок в неделю.

Изменения:
- Экспериментальная поддержка Vite Runtime API
- Стабилизировали работу css?url
- В build.assetsInlineLimit добавили колбеки
- Улучшен HMR для циклического импорта
- Повысили производительность
- и т.д.

Тест производительности:
Тест проводился на загрузке 10к модулей на apple m1 max
Vite 4.0 - 8 секунд
Vite 4.3 - 6.35 секунд
Vite 5.1 - 5.35 секунд

Ссылка на релиз

#js #vue #react #news

✅ Frontendchecklist

Контрольный список для сайтов, которые улетают в продакшен. Начиная с HTML заканчивая SEO.

Сайт | Репозиторий

#html #css #seo

🔥 Дайджест #1

React
🇺🇸 Анонс React Native для apple vision pro
🇺🇸 React + Storybook + Chromatic = масштабируемость
🇺🇸 Medusa - Чему мы научились при переходе на Next.js 14 с серверными компонентами

Веб-компоненты
🇺🇸 Введение в веб-компоненты

CSS
🇺🇸 CSS motion path. Анимация движения
🇺🇸 Анимация по скролу с помощью запросов стилей (queries)
🇺🇸 Switch с современным css

Разное
🇺🇸 Установка Favicon в 2024 году
🇺🇸 Что изменилось в Deno в 2023 году
🇺🇸 Анимация палитры шрифтов
🇺🇸 Релиз JQuery 4.0.0 beta
😇 Устроился в Амазон и перестал переживать за свой английский

🇺🇸 Игра Google playground самые популярные люди/места/моменты за 25 лет
🇺🇸 Портфолио в стиле ретро игры

🖼️ Куда будет двигаться Vue в 2024 году. Выступление Evan You

1. Будут ли добавлены новые макросы* Vue?

Команда осторожно рассматривает вопросы о новых макросах во ​​Vue.
В настоящее время нет планов по их добавлению.

2. Как дела с Vue Vapor мод?

Vapor мод позволяет работать с non-virtual DOM. Этот мод увеличивает производительность.
Большая часть Vapor уже написана. Работа кипит.

3. Какие самые большие заблуждения относительно Vue.js?

Главные заблуждения - это плохая поддержка JSX и TypeScript, а также убеждение, что Vue подходит только для простых приложений.
Но все больше и больше крупных и известных брендов начинают использовать Vue для своих веб-приложений.

4. Что по новому функционалу?

Vapor — наиболее значительная инновация, которая сейчас разрабатывается в экосистеме Vue.
Кроме того, в ядро ​​Vue были внесены улучшения, в том числе:
- Рефакторинг системы реактивности
- Ускоренный анализатор и улучшенная производительность сборки однофайловых компонентов (SFC).
- Стабилизация defineModel
- Новые сокращения `<img :id :src :alt>`
- Улучшена обработка ошибок гидратации.

5. Планируется ли удаление Option API в будущих версиях Vue?

Нет. Мы не планируем удалять option API.
Поддержка обоих подходов вполне осуществима.

6. Будет ли Vue 3 продолжать поддерживать Webpack или полностью перейдет на Vite?

Мы не планируем отказываться от Webpack;
Поддержка будет предоставляться как для Webpack, так и для Vite.

Примечание автора:
Макрос - идея/предложение, которое еще не утверждено во вью. Они в основном нацелены на новый функционал и синтаксический сахар.

Ссылка на статью

#js #vite #vue

🔥 Дайджест #2

CSS
🇺🇸 CSS :has() Интерактивное руководство
🇺🇸 Анимация перехода. Изменение размера
🇺🇸 Выходим за рамки пикселей и rem
🇺🇸 Коллекция css toggle/switch

Vue
🇺🇸 Пишем чистые компоненты Vue
🇺🇸 defineModel во Vue 3.4
🇺🇸 Релиз NuxtHub - фулстек фреймворк

React
🇺🇸 Тренды React 2024
🇺🇸 React будет компилироваться
🇺🇸 Как избежать ошибок гидратации с useSyncExternalStore
🇺🇸 Next.js формы с server actions
🇺🇸 Параметры поиска с серверными компонентами React
🇺🇸 Next.js vs Remix
🇺🇸 HTMX vs React

Инструменты и ресурсы
🇺🇸 Функциональный UI kit для Figma
🇺🇸 Huemint - генератор цветовых палитр с AI
🇺🇸 Composable функции для рисования геометрии во Vue 3

Разное
🇺🇸 Рендеринг писем со Svelte
🇺🇸 Использование localStorage в наши дни
🇺🇸 СSS и SVG в console.log
🇺🇸 Раздутый JavaScript в 2024 - Статья на хабр 😇
🇺🇸 Chrome DevTools: +400% скорости вкладки "Производительность" с помощью perf-ception
🇺🇸 Релиз Bun v1.0.30

🇺🇸 Mario Kart 3D - игрушка на js

#js #weekly #react #vue

✅ Генераторы, песочницы и css рецепты

1. 10015.io
10 CSS генераторов

2. Glassmorphism Generator
Генератор эффекта стекла (глассморфизм/стекломорфизм). Результат можно лицезреть на изображении к этому посту

3. Shadows by Brumm.af
Генератор теней

4. Hamburgers by Jon Suh
Гамбургеры на любой вкус и эффект

5. Easing Gradients by Larsenwork
Маленький генератор градиентов

6. Neumorphism.io
Неоморфизм: исключительно, чтобы посмотреть, что это такое, и никогда не использовать

7. CSS Buttons
Набор готовых кнопок с анимацией

8. Animista
Большое количество готовых анимаций

Ссылка на статью

#css #junior

✅ ECMAScript 2024

Стал известен предварительный список нововведений в новый стандарт:

1. ArrayBuffer.prototype.resize
2. ArrayBuffer.prototype.transfer
3. RegExp v flag
4. Promise.withResolvers
5. Object.groupBy/Map.groupBy
6. Atomics.waitAsync
7. String.prototype.isWellFormed / String.prototype.toWellFormed

Ссылка на статью

#js

✅ Vercel AI SDK

Библиотека для создания интерфейсов ИИ чат ботов с поддержкой React, Svelte, Vue и Solid. Из коробки доступны самые популярные ИИ

Ссылка на репозиторий
Ссылка на сайт

#js #vue #react #solid #svelte #ai

✅ Генерация VUE UI

Open Source версия библиотеки v0 для реакта. Позволяет генерировать компоненты для vue, есть поддержка shadcn/vue, tailwindCSS.

Единственный нюанс - нужно сгенерировать ключ от OpenAI

Ссылка на vuev0
Ссылка на v0 react

#js #vue #ai #react

✅ Astro 4.5

- Добавили dev Audit UI - теперь выявить проблемы производительности станет легче
- Изменили View Transition: перерендер островов и перезапуск скриптов
- Shiki 1.0 - библиотека для подсветки кода, как в VS Code
- Добавили настройки подключения CDN для разных ресурсов
- В статус эксперимента добавили: JSON схемы для Data Collections и Новый алгоритм обнаружения скриптов

Ссылка на релиз

#js #vue #react #lib

🔥 Последние релизы

- Node.js v21.7
- TypeScript 5.4 - NoInfer, Object.groupBy, Map.groupBy и т. д.
- Mermaid 10.9 - Создание диаграмм из текста
- Bun v1.0.31
- Bun v1.0.32
- Vue Language Tools 2.0 - Старое расширение VSCode 'TypeScript Vue Plugin (Volar)' можно удалять. Есть баги, будьте осторожны.
- Ember 5.7
- PixiJS v8
- Astro 4.5
- Biome 1.6

✅ Nuxt 3.11

- Улучшили логирование. Добавили вывод данных в консоль во время выполнения SSR функций.
- usePreviewMode
- Улучшили очистку кеша
- Добавили Middleware routeRules
- Добавили функцию clear для очистки useAsyncData и useFetch
- Заработал телепорт на стороне сервера
- улучшили производительность
- и т.д.

Ссылка на релиз

#js #nuxt #vue

✅ 🖼️ VitePress 1.0

Вчера релизнулся VitePress. Это библиотека для генерации статических сайтов (ssg) на vue. Основное применение - документация и блоги.

Что с VuePress?
Оригинальный vuePress вообще был на vue 2 и webpack, потом к ним добавили vite и vue 3. Но поддерживать сразу две похожие библиотеки нет смысла. Поэтому команда сосредоточится на vitepress. Так что это, грубо говоря, современная замена.

Ссылка на релиз
Ссылка на Vitepress

#vue #news #js #vite

✅ Bun 1.1 + windows

Команда Bun со скоростью света выпускает релизы. За последнюю неделю это уже 3е обновление. На днях подвезли поддержку windows.

Еще раз привели много данных о скорости работы. Графики, конечно, впечатляют, но на деле эта скорость уходит на второй план. Поддержка есть, прошло пол года с первой стабильной версии, но мы до сих пор не рискуем делать что-то серьезное на этом инструменте.

Ссылка на релиз

#news #js #bun