✅ Array.join

Метод join() в JavaScript используется для преобразования всех элементов массива в строку. Элементы будут разделены символом или строкой, которую вы передадите как аргумент. Если аргумент не указан, элементы будут разделены запятыми

#js #junior #base #array

✅ Функция Pick

Функция Pick используется для выбора определенных значений из объекта. Это способ создания нового объекта путем выбора определенных свойств из предоставленного.

Ранее мы разбирали функции:
debounce throttle once memoize curry pipe

#js #middle #custom

✅ Самозакрывающиеся теги HTML

Есть проблема и она заключается в том, что /> иногда игнорируется, а иногда нет, в пределах одного и того же HTML-документа. Можно ли сделать так, чтобы правила парсинга переключались таким образом, чтобы /> всегда был значимым? Например, чтобы <div/> действительно был самозакрывающимся. Автор даже создал issue в официальном репозитории html, но подозревает, что это невозможно из-за несовместимости с существующими библиотеками, особенно чувствительными к безопасности.

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

#html #js #middle

✅ Array.from

Array.from() используется для создания нового массива из массивоподобного или итерируемого объекта. Он принимает два аргумента: исходный объект и необязательную функцию для преобразования элементов.

#js #junior #base #array

✅ Функция Omit

Функция Omit является противоположностью функции Pick, поскольку она удаляет определенные свойства из существующего объекта. Таким образом, скрывая свойства, можно избежать избыточной выборки. Ее можно использовать вместо функции Pick, если количество свойств, которые нужно скрыть, меньше количества свойств, которые нужно выбрать.

Ранее мы разбирали функции:
debounce throttle once memoize curry pipe pick

#js #middle #custom

✅ NextUI 2.0

Вышла новая версия ui библиотеки для реакта.

Изменения:
- Перешли с stitches на tailwind
- Добавили настройку tailwind тем
- Повышение производительности с помощью React Server Components
- Кастомные темы, слои, цвета
- Новые шаблоны и гайды
- Tailwind Variants
- Переписали компоненты с использованием хуков react-aria
- Оптимизировали анимацию
- Расширили документацию
- и т.д.

Все изменения

#js #news #lib #react

✅ Lazy Loading In JavaScript

Как реализовать ленивую загрузку, а самое главное когда?

В конце статьи автор приводит советы, которые помогут при работе с ленивой загрузкой, вот некоторые из них:
- Оптимизируйте изображения
- Устанавливайте placeholder(или 'skeleton') для медиа, которое в данный момент загружается
- Обрабатывайте ошибки загрузки. Этим очень часто пренебрегают
- Не переборщите)

Статья на английском
#js #vanilla #middle

✅ 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