✅ Radix UI

Либа компонентов с открытым исходным кодом.

Импортируем и работаем - никаких настроек. Выглядит достаточно красиво

Ссылка на сайт

Producthunt

#js #react #lib #ui

✅ Анонс Typescript 5.2

- Новый декоратор setMetadata
- using, явное управление ресурсами (для чистки памяти)
- Упрощенное использование методов для объединения массивов
- Добавили новые фишки из последней версии ECMAScript
и т.д.

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

#js #ts #news

✅ Bun 1.0

У нас тут появилась альтернатива всему и вся. Вчера релизнулся Bun 1.0

Это, как они сами пишут, инструмент "всё в одном", который замахивается на замену Node.js, пакетным менеджерам и подобным вещам.

В релизе пишут что bun запускается в 4 раза быстрее Node.js

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

#js #ts #nodejs #npm #news

✅ Bun v1.0.21

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

Изменения:
- Устранили 33 бага
- Поддержка console.table()!
- Больше информации об ошибках в bun:sqlite
- Большие файлы в FormData, Bun.write, Bun.file, bun:sqlite используют меньше оперативки

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

#ts #js #nodejs #bun #news

P.s. Вернулись в строй, будем восстанавливать режим публикаций. Всех с Новым Годом!🌲

✅ Vue 3.4

31 декабря закончилась поддержка vue 2. Press 🫡

В новом релизе существенно переработали парсер шаблонов. Теперь этот зверь работает в 2 раза быстрей.

Изменения:
- x2 к скорости парсинга шаблонов
- Рефакторинг системы реактивности (оптимизировали повторные вычисления). В релизе наглядный пример с watchEffect
- Стабилизировали defineModel. В версии 3.3 был выпущен в качестве эксперемента
- Добавили новые сокращения:

Было: <img :id="id" :src="src" :alt="alt">
Стало: <img :id :src :alt>

- и т.д.

Эти сокращения выглядят сомнительно, при этом они сами пишут, что у них были опасения насчет данного нововведения, не получилось бы каши. Будем наблюдать.

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

#js #vue #news #newVersion

✅ Uiverse 2.0

Под конец года обновился сайт с пользовательскими элементами, чем-то похож на codesandbox и прочие, только тут все заточено конкретно под ui.

Выбираем элемент - получаем готовые html/css. На productHunt этот ресурс высоко оценили.

Ссылка на сайт | Ссылка на productHunt

#html #css #news

✅ Next.js 14.1

На этой неделе вышло обновление next, изменения:

- Новая документация по self-hosting
- Добавили возможность кастомного обработчика кэша.
- Улучшили турбопакет
- Улучшили сообщения об ошибках
- Добавили в appRoute поддержку pushState и replaceState
- Пофиксили 20 багов в работе роутов
- Прокачали next/image

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

#js #ts #react #news #framework

✅ 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