⏳ Лоадеры повсюду

Чтобы сделать ожидание пользователя в приложении более комфортным, часто используют анимированные индикаторы загрузки. Они могут быть самыми разными. Я нашёл отличную подборку из более чем 600 лоадеров, созданных исключительно с помощью CSS.

css-loaders.com

👩‍💻 Лигатуры в VS Code

Мне нравятся IDE от JetBrains за то, что они имеют лигатуры. Это когда два или больше символа склеиваются в единый.

Так вот. Оказывается, VS Code тоже такое умеет, но требуется настройка. Настраивается в JSON-файле.

"editor.fontLigatures": true

Такое мы используем 🕺

💻 Новый интерфейс Figma

Обновление UI3 станет доступным для всех пользователей 10-го октября, даже если вы не были в wait-листе.

Совершенно непонятно, будет ли возможность вернуться к UI2, поэтому, если у вас есть такая возможность, рекомендую уже сейчас начать переход на новый интерфейс и постепенно привыкать к изменениям. Тем более, команда Figma уже исправила часть выявленных недостатков.

Как вам в целом новый интерфейс Фигмы? Считаете ли вы его более удобным?

🥀 Было такое?

Эта проблема появляется, когда TypeScript конвертируется в JavaScript и всё съезжает. Всё из-за разницы двух языков.

У Bloomberg вышла библиотека, которая, по сути, должна хотя бы частично исправить данную проблему.

👩‍💻 На NPM есть целая библиотека, которая предоставляет функцию для проверки чётности числа

Она имеет зависимость от библиотеки is-odd и её скачивают более 150 тысяч раз в неделю.

На сегодня у меня всё…

🎁 Подарки в Telegram

В последней версии 💻 Telegram Beta для Android появилась возможность дарить подарки своим друзьям. Они могут сохранить эти подарки в своем профиле или конвертировать их в звезды.

Где-то мы такое уже видели… 🤔

👩‍💻 Vite + https + localhost

Использовать протокол HTTPS вместе с localhost не совсем простая задача. Нужно иметь самоподписанный сертификат для localhost. Но я нашёл плагин для Vite, который самостоятельно подписывает localhost и подставляет ключ сертификата в конфиг Vite.

Для чего это надо?

HTTPS на localhost нужен разработчику для тестирования безопасности, совместимости с API, имитации реальной среды и работы с технологиями, требующими безопасного соединения, такими как PWA и Service Workers.

Установка плагина

npm i vite-plugin-mkcert -D

Применение плагина

// vite.config.ts

import mkcert from "vite-plugin-mkcert"

export default defineConfig({
  plugins: [
    mkcert(),
  ]
})

Проблема решена. Теперь проект запускается с https 🕺

🚀 Вскоре Telegram получит поддержку HLS-видео!

Что это значит?

📺 Теперь пользователи смогут выбирать качество видео при просмотре. Благодаря технологии HLS, воспроизведение начинается мгновенно, без необходимости скачивать весь файл. Это особенно удобно для больших видео и пользователей с нестабильным интернетом.

HLS автоматически адаптирует качество видео к вашей скорости сети, обеспечивая плавный просмотр без буферизации. Больше никаких тормозов и долгих ожиданий

💻 UI3 уже доступен в #Figma

Обновление получили все пользователи Фигмы. Но можно по прежнему переключиться на прошлый дизайн, нажав на кнопку вопросительного знака справа снизу.

На канале Figma вышло видео, где представители компании зачитывают критику, полученную насчёт изменений в UI3.

— Некоторые пользователи выражают недовольство, говоря, что хотят «развидеть» изменения.

— Пользователи считают новые плавающие панели “проклятыми”, хотя некоторые всё же ценят и его.

Компания уверяет пользователей, что принимает обратную связь всерьёз, что отличает их от других продуктов. Они обещают обновления, чтобы, например, вернуть маскировку и компоненты на панель инструментов.

➡️ Релиз Next.js 15

Next.js 15 вышел, как долгожданное обновление, которое принесло множество изменений, улучшений производительности и удобств для разработчиков.

📆 Новый релиз вышел за 4 дня до конференции Next.js (она прошла вчера, кстати), вызвав интерес среди разработчиков. Версия 15 направлена на улучшение стабильности и предоставляет новые инструменты для разработчиков.

💻 В Next.js 15 добавлен CLI-инструмент next@codemod, который автоматически применяет изменения к кодовой базе, помогая разработчикам без труда переходить на новую версию.

🌐 Политика кэширования изменена, что существенно влияет на поведение fetch запросов. Теперь кэширование по умолчанию отключено, что позволяет показывать наиболее актуальные данные. В предыдущих версиях был включен force-cache по умолчанию, но это было неочевидно для новых разработчиков на Next.js.

🔄 Обновление Next.js теперь поддерживает как React 18, так и новую версию React 19, что позволяет разработчикам работать с гибридными проектами и минимизирует ошибки. Также можно включить экспериментальный react-compiler

🚀 Turbo Pack теперь доступен в режиме разработки, предлагая высокую скорость сборки и обновлений. Время HMR значительно сократилось, что делает процесс разработки более удобным.

😮 Теперь в Dev mode можно увидеть, являются ли маршруты статическими или динамическими, что упрощает отладку. Эта функция позволяет разработчикам видеть, как происходит кэширование, и получать представление о том, когда данные обновляются или кэшируются.

*⃣ В Next.js 15 добавлены значимые обновления для улучшения безопасности, особенно для серверных функций. Формы теперь шифруются, что снижает риск утечек данных. Также уникальные ID для каждого действия генерируются случайным образом, что исключает их возможный перебор.

На такое мы обновляемся 👍

🐹 Возвращаюсь сюда к вам с новыми постами

Пропал из-за скопившихся проектов — надо было их закончить. Собственно, теперь у меня нашлось время чтобы вкидывать новости и мысли) В общем, делаю контент дальше

💻 Новый колор-пикер (в простонародье: пипетка) в Figma

На первый взгляд он кажется непривычным, потому что его панель отвлекает на себя всё внимание, но со временем к этому привыкаешь

Также появился шорткат (возможно, он уже был, просто его вывели в панель, чтобы перед носом светился). Он создаёт новую переменную с этим цветом

Если навести на цвет, который уже сохранён как переменная, удерживая клавишу Shift, можно выбрать именно переменную, а не оригинальный цвет. Это удобно — не нужно листать длинный список токенов, когда нужный цвет уже используется

👩‍💻 WebStorm — бесплатный для некоммерческого использования

Все, кто избегал его использования из-за подписочной модели распространения — попробуйте сейчас)

Ранее в этом году JetBrains представила новую модель распространения для RustRover и Aqua, сделав их бесплатным для некоммерческого использования. Очередь дошла и до 👩‍💻 WebStorm c 👩‍💻 Rider

Делая некоммерческую разработку бесплатной, мы стремимся сделать IDE JetBrains более доступной для широкой аудитории. Мы надеемся, что новая модель лицензирования снизит барьер для использования наших IDE, помогая вам учиться, развиваться и оставаться творческими людьми

С новым типом некоммерческой лицензии вы сможете пользоваться полнофункциональной IDE, идентичной ее платной версии. Единственное отличие заключается в функции Code With Me — вместе с бесплатной лицензией вы получаете Code With Me Community

На днях я сбросил WebStorm, удалив все свои настройки и установленные плагины. Начал с чистого листа, так сказать. Потратил пару часов чтобы настроить так, как я привык в VS Code и очень доволен

✈️ Телега обновилась

Очень мощно обновили мини-приложения, делая платформу Telegram Mini Apps ещё более привлекательной

— Полноэкранный режим для мини-приложений

— Боты теперь могут дарить подарки

— Возможность добавлять ярлык мини-приложения на главный экран

— Установка эмодзи-статуса прямо из мини-приложений

— Доступ мини-приложениям к данным о местоположении

— Использование данных акселерометра, гироскопа и компаса в мини-приложениях

— Возможность блокировки изменения ориентации экрана в мини-приложениях

— Загрузка файлов через мини-приложения

— Кастомизация экрана загрузки мини-приложений

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

👋 Framer Motion — В С Ë

Основатель библиотеки Framer Motion покидает Framer. Из-за чего теперь библиотека будет называться просто Motion

Пишу это с диким чувством. Создание Framer Motion было лучшей работой в моей жизни. Делать это в течение шести лет в лучшей команде разработчиков в мире - это и огромный опыт обучения, и привилегия.

Однако из этого вытекают новости, которыми я с нетерпением хочу поделиться.

С благословения и при поддержке Framer, Framer Motion теперь полностью независим. Я выделяю его в отдельный проект, чтобы лучше служить всему сообществу.

— Теперь документация библиотеки здесь: motion.dev. Предлагаю оценить лендинг библиотеки. Он очень классный

— Motion становится больше, чем просто React-библиотекой. Будет набор ванильных API, которые позволяют использовать гибридный движок Motion и обширный набор функций для всех желающих

В ближайшие недели и месяцы все больше функций из Framer Motion перейдут в этот новый ванильный API, и я напишу новые руководства по интеграции, которые помогут вам использовать их повсеместн.

💻 Tailwind 4.0 beta

Ранее я рассказывал, что изменят разработчики в следующей мажорной версии Tailwind. Сейчас же эти изменения дошли до беты. Изменения достаточные, чтобы сломать уже существующие проекты на 3-ей версии, но переживать не стоит — появилась CLI утилита, которая заменит названия устаревших классов, добавит конфигурацию Tailwind в CSS-файл из имеющихся настроек в tailwind.config.js

Ключевые моменты новой версии:

— Создан для повышения производительности — сборки на новом движке работают в 5 раз быстрее, а инкрементные сборки - более чем в 100 раз быстрее, и измеряются микросекундами

— Конфигурация на основе CSS — обновленный опыт разработчика, когда вы настраиваете и расширяете фреймворк непосредственно в CSS, а не в конфигурационном файле JavaScript

— Разработанный для современного веба — построен на основе собственных каскадных слоев, широкой цветовой гаммы и включает первоклассную поддержку современных CSS-функций, таких как container queries, @stаrting-style, всплывающие окна и многое другое

Я уже попробовал обновить свой небольшой пет-проект на новую версию. Результат меня удивил. Перенос проекта произошел бесшовно 🎁

На проде, конечно, не стоит пока обновляться, но в пет-проектах — почему бы и нет?