About Frontend

📺etflix получил +50% к производительности после избавление от React 🤔 #новость

#новость дня Итак, JetBrains WebStorm и Rider присоединяются к программе бесплатного некоммерческого использования. Что это означает? Ну, буквально, использовать их для обучения и вне бизнеса вообще теперь можно бесплатно и без ограничений. Новость на офсайте: https://blog.jetbrains.com/blog/2024/10/24/webstorm-and-rider-are-now-free-for-non-commercial-use/ Стоит заметить, что до этого такую же модель лицензирования получили RustRover и Aqua (IDE заточенная под автоматическое тестирование). У каждого свои причины использовать IDE против настройки VS Code. Для меня таковым стал прекрасный отладчик (для Jest в VS Code ничего и близко рядом не стоит). Но мне-то контора оплачивает лицензию. Правда, для скачивания из РФ придётся воспользоваться VPN. Да и в целом есть вопросики. #ide #webstorm

Как браузер рендерит страницу ? 1️⃣ Введение Тема обширная, и при глубоком изучении можно дойти до браузерных движков, работы ОС и т.п. Поэтому если вам нужен краткий, но содержательный ответ, рекомендую: 🌐 Производительный рендеринг в браузере Для тех, кто хочет глубже разобраться в вопросе, привел полезные источники. От источника к источнику информация может частично повторяться, поэтому буду выделять ключевые особенности каждого. 2️⃣ Основное 1. [ENG] 🌐 From code to pixels in a Blink - наглядно про потоки и этап Composition, а также, наверное, лучшее объяснение этапа Paint. Доп. ссылки: - 🔎 Список полезных источников от автора - 🔎 Как работают браузеры - старая статья, но может быть полезной 2. [ENG] 🌐 Life of a Pixel - самое подробное видео по теме. + Канал о движке Chrome Blink. + много доп. инфы на канале. 3. [RUS] 🌐 Браузер. Рендеринг. Производительность - для кого-то именно это объяснение может быть более доступным и понятным. 4. [RUS] 🌐 Распутываем браузерные потоки - интересно про потоки в ОС и браузере. + примеры. + немного про WebWorkers и параллельность 5. [RUS] 🌐 Копаемся под капотом браузера, как работает event loop и compositing - layout trashing 6. [RUS] 🌐 Layout trashing - хороший пример layout trashing 7. 🔎 Web performance | MDN - все про производительность в web 8. 🔎 web.dev - статьи от Chrome Developer Relations для разработчиков 3️⃣ EXTRA 3.1. [RUS] 🌐 Использование многопоточности в браузере - полезный материал о WebWorkers и том, как они помогают разгрузить Main Thread. Доп. ссылки: - 📖 Multithreading-in-frontend 3.2. [ENG] 🌐 Scheduling On and Off the Main Thread (Chrome Dev Summit 2018) - про новое API для планирования задач ( в разработке - 📖 [Git] ) и снова про WebWorkers и потоки :) 4️⃣ Эпилог Изначально планировал короткий пост с парой ссылок и перечислением этапов рендера, но в итоге увлекся больше, чем ожидал. 😅 Старался отобрать самые полезные ресурсы, отсеяв много лишнего в процессе. Оказалось, что браузер - гораздо более сложное приложение, чем кажется на первый взгляд. Определенно, еще многое предстоит изучить. Про V8, метрики Web Vitals, Garbage Collector etc. Впрочем, это уже совсем другая история... Подписаться на Askhabov Khamzat 🌐 #browser #render #webworkers #blink #chrome #performance

🏠 18:00 все идут домой #блог

Скоро будем смотреть и щупать А вы пользовались Obsidian-ом? #полезно

Сегодня так #блог

В рамках проекта хотел сделать отдельный веб-сайт, да так чтобы не нужно было тратить много времени. Перебрал несколько вариантов и остановился на 👩‍💻 Vitepress. Реально очень удобная вещь для реализации статических сайтов. Плюс есть очень удобный API для создания документации. Скорее всего это ни для не секрет, но я использовал его только сейчас) Все проекты в рамках экосистемы 👩‍💻ue имеют общий дизайн, это установленный интерфейс от Vitepress очень просто и понятно. Сайт мы разработали, но самое интересное это было настройка автодеплоя через 👩‍💻 github actions и всё это совершенно бесплатно) Собственно ссылка на сайт Кстати можете забрать оттуда бесплатный прокси для тг) #работа

Проводил в добрый путь старую мышь взамен новой. 🫡Верно служила долгие годы. Press 🫡 #блог

Классика #мемы

Вот она сила вуе 👩‍💻👩‍💻👩‍💻

и ещё один)

😮 Сегодня на университетском шахматном турнире меня снес, как оказалось, мой же подписчик… #блог

#инструмент дня Вы только посмотрите на эту красоту! Да, я в курсе, что компонентов для красивого прокручивания цифр у нас какое-то невероятное количество, но до сих пор не было ничего настолько универсального и простого в использовании. Итак, встречайте: NumberFlow от Максвелла Барвиана. GitHub: https://github.com/barvian/number-flow Документация и демо: https://number-flow.barvian.me/ Настраивается формат чисел, параметры анимированных переходов. И, собственно, никаких скрытых зависимостей. Прекрасное. #react #number #transition

🤩 Анимация падающих звезд Реализовано на чистом, CSS. Это фоновая анимация для ваших интерактивных сайтов. Правда заметил небольшой баг, автор не рассчитал, что мониторы могут быть больших размеров, поэтому на высоких разрешениях видны начальные позиции элементов. Однако, это легко правиться. Пользуйтесь! P.S. Как-то давно использовал в своем выпускной практической работе, когда заканчивал бакалавриат) #полезно

Infinite Scroll Animation компонент, который можно использовать для своих сайтов портфолио для перечисления скиллов. Всё реализовано на чистом CSS. #полезно

Бесконечная прокрутка с анимацией — это еще один способ автоматически подгружать и заменять данные на веб-странице, вместо того чтобы делать это вручную. Она создает впечатление бесконечной ленты. Infinite Scroll Animation компонент, который можно использовать для своих сайтов портфолио для перечислении скиллов. Всё реализовано на чистом CSS. #полезно

Пока нет нижний двух кадров… В остальном пытаемся не отставать) ✨

✨

Варианты 10 пет-проектов на Vue для новичков #pet