Наткнулся недавно на такой твит. Очень понравилась формулировка, поэтому делюсь в исходном виде.
Состояние гонки
Постарался разбавить статью интерактивными демками, чтобы было нагляднее. Надеюсь, вам понравится. 😊
Постарался разбавить статью интерактивными демками, чтобы было нагляднее. Надеюсь, вам понравится. 😊
Hacknote.js
Состояние гонки
Асинхронные операции бывают непредсказуемыми, поскольку физически могут выполняться параллельно основному потоку, поэтому очень важно следить за актуальностью данных, которые они нам возвращают.
Forwarded from FrontendConf конференция
Motion-дизайн для фронтенд-разработчика рассмотрим на докладе Никиты Балихина
⠀
Когда мы говорим об анимациях в вебе, на ум сразу приходят CSS-анимации — это достаточно простой и эффективный инструмент.
⠀
Но если мы хотим сделать действительно сложную и красивую анимацию, нам могут понадобиться более мощные инструменты для motion-дизайна вроде After Effects.
⠀
В докладе рассмотрим, как фронтенд-разработчику разобраться в этих инструментах и как подружить их с веб-технологиями.
⠀
Встречаемся 2 и 3 октября в Москве на FrontendConf 2023 🙌
⠀
✅ Программа конференции, расписание и билеты на сайте в описании канала @FrontendConfChannel
⠀
Когда мы говорим об анимациях в вебе, на ум сразу приходят CSS-анимации — это достаточно простой и эффективный инструмент.
⠀
Но если мы хотим сделать действительно сложную и красивую анимацию, нам могут понадобиться более мощные инструменты для motion-дизайна вроде After Effects.
⠀
В докладе рассмотрим, как фронтенд-разработчику разобраться в этих инструментах и как подружить их с веб-технологиями.
⠀
Встречаемся 2 и 3 октября в Москве на FrontendConf 2023 🙌
⠀
Please open Telegram to view this post
VIEW IN TELEGRAM
У меня есть ежегодная традиция делать короткие (30-60 секунд) новогодние видосы в After Effects. Видосы довольно кринжовые, но мне кажется, хорошо создают новогоднее настроение. :)
Видос на этот новый год уже готов и дожидается премьеры, а пока можете посмотреть видосы прошлых лет, которые я собрал в плейлист, а также запись вышеупомянутого доклада про Motion-дизайн с Frontend Conf, который в том числе посвящён After Effects.
Видос на этот новый год уже готов и дожидается премьеры, а пока можете посмотреть видосы прошлых лет, которые я собрал в плейлист, а также запись вышеупомянутого доклада про Motion-дизайн с Frontend Conf, который в том числе посвящён After Effects.
YouTube
2024 Dragon Lair
Огнеупорное снаряжение будет не лишним.
Использованная музыка:
Mick Gordon - BFG Division (https://www.youtube.com/watch?v=QHRuTYtSbJQ)
MAKAVELI HARDSTYLE - Lights (Sped Up) (https://www.youtube.com/watch?v=SJDFTjIKVAM)
Использованная музыка:
Mick Gordon - BFG Division (https://www.youtube.com/watch?v=QHRuTYtSbJQ)
MAKAVELI HARDSTYLE - Lights (Sped Up) (https://www.youtube.com/watch?v=SJDFTjIKVAM)
Используете ли вы в своём коде префиксы для названий типов?
Anonymous Poll
12%
Использую префикс "I" для наименования интерфейсов
33%
Использую префиксы "I", "T", "E" для наименования интерфейсов, типов и енумов соответственно
53%
Не использую префиксы
2%
Свой вариант в комментариях
В поисках рантайма для Typescript
В подавляющем большинстве случаев я стараюсь держать любой код в проекте поддерживаемым и документированным, поэтому даже всякие утилитарные скрипты для сборки или кодогенерации пишу на Typescript.
Долгое время для запуска таких скриптов я использовал ts-node, который считал стандартом де-факто для решения этой задачи, но недавно наткнулся на утилиту tsx.
На поиск нового решения меня сподвигла кривая поддержка ESM в ts-node (в Node.js 18 у меня не завелось). С tsx тот же самый код запустился без лишних танцев с бубном. В качестве приятного бонуса я получил watch-mode из коробки.
Из минусов обнаружил только отсутствие в tsx проверки типов из коробки. Но, как я уже упомянал, всё ещё только tsc умеет делать проверку типов, поэтому при необходимости придётся запускать его отдельно — именно это по сути из коробки делает ts-node, но на мой взгляд проверка типов должна быть скорее частью пайплайна тестов, а не сборки и тем более запуска, поэтому минус не считаю значительным.
Автор tsx также сделал репозиторий со сравнением различных инструментов для запуска Typescript-кода.
Приходится ли вам запускать Typescript-код без бандлера? Какие инструменты вы для этого используете?
В подавляющем большинстве случаев я стараюсь держать любой код в проекте поддерживаемым и документированным, поэтому даже всякие утилитарные скрипты для сборки или кодогенерации пишу на Typescript.
Долгое время для запуска таких скриптов я использовал ts-node, который считал стандартом де-факто для решения этой задачи, но недавно наткнулся на утилиту tsx.
На поиск нового решения меня сподвигла кривая поддержка ESM в ts-node (в Node.js 18 у меня не завелось). С tsx тот же самый код запустился без лишних танцев с бубном. В качестве приятного бонуса я получил watch-mode из коробки.
Из минусов обнаружил только отсутствие в tsx проверки типов из коробки. Но, как я уже упомянал, всё ещё только tsc умеет делать проверку типов, поэтому при необходимости придётся запускать его отдельно — именно это по сути из коробки делает ts-node, но на мой взгляд проверка типов должна быть скорее частью пайплайна тестов, а не сборки и тем более запуска, поэтому минус не считаю значительным.
Автор tsx также сделал репозиторий со сравнением различных инструментов для запуска Typescript-кода.
Приходится ли вам запускать Typescript-код без бандлера? Какие инструменты вы для этого используете?
8 июня расскажу на Я ❤️ Фронтенд об инструменте, который используется в нашей компании для сборки микрофронтендов.
В программе:
- ткнём палкой в давным давно мёртвый Create React App
- проследим мотивацию, историю создания, развития и внедрения на ~60 проектов нашего инструментария для сборки
- переймём лучший опыт похожих проектов
- конечно же не забудем проявить заботу к коллегам
В программе:
- ткнём палкой в давным давно мёртвый Create React App
- проследим мотивацию, историю создания, развития и внедрения на ~60 проектов нашего инструментария для сборки
- переймём лучший опыт похожих проектов
- конечно же не забудем проявить заботу к коллегам
Я 💛 Фронтенд
Встречаемся в Москве и онлайн на конференции Я 💛 Фронтенд 2024
gpb-app.pdf
39.1 MB
Во время моего выступления на Я 💛 Фронтенд с презентацией произошли небольшие проблемки (абсолютно всё, что в ней могло сломаться, сломалось), но, полагаю, ценность доклада от этого не убавилась. Хочу сказать всем спасибо за обратную связь и действительно хорошие и интересные вопросы.
Прикрепляю к этому посту PDF со статической версией того, как должна была выглядеть презентация со всеми релевантными ссылками и парой бонусных слайдов и вероятно через некоторое время сделаю режиссёрскую версию доклада.
Если у вас остались неотвеченные вопросы, с радостью отвечу на них в комментариях😉
Прикрепляю к этому посту PDF со статической версией того, как должна была выглядеть презентация со всеми релевантными ссылками и парой бонусных слайдов и вероятно через некоторое время сделаю режиссёрскую версию доклада.
Если у вас остались неотвеченные вопросы, с радостью отвечу на них в комментариях😉
А вот и та самая режиссёрская версия доклада, в которой презентация выглядит ровно так, как я её задумывал. Принципиально в ней ничего нового нет, но не зря же я старался)
YouTube
Как мы съезжали с CRA (и речь не про Vite) / Никита Балихин
Это Никита Балихин из Газпромбанка и его доклад на «Я💛Фронтенд 2024» — нашей главной фронтенд-конференции. На ней мы обсудили, как делать удобные интерфейсы, использовать популярные и не очень инструменты, правильно относиться к себе и сообществу и строить…
Media is too big
VIEW IN TELEGRAM
Пришлось покостылить даже тут)
В бете Safari 18 заявлена долгожданная (по крайней мере мной) поддержка View Transitions API, который уже довольно давно поддерживается в Chromium-based бразуерах и по такому поводу я решил сделать небольшой редизайн главной страницы своего блога.
На мой взгляд эта фича вносит огромный вклад в то, чтобы Web-приложения ощущались как нативные и при этом не требует особых вложений с точки зрения разработки (особенно при использовании Astro).
Если у вас есть классные примеры использования этого API, кидайте в комментарии)
На мой взгляд эта фича вносит огромный вклад в то, чтобы Web-приложения ощущались как нативные и при этом не требует особых вложений с точки зрения разработки (особенно при использовании Astro).
Если у вас есть классные примеры использования этого API, кидайте в комментарии)
Сказ о внедрении View Transitions
В предвкушении внедрения поддержки View Transitions в Safari я обновил Mac OS и iPad OS до последних версий и... я был крайне разочарован.
Анимации переходов работали совсем не так, как в Chromium-based браузерах — они заметно тормозили, а в некоторых случаях и вовсе перестали работать.
Сперва я подумал "как же Apple могли выкатить в продакшен такую кривую реализацию API?", но, тщательно погуглив, я не обнаружил ни одной подобной жалобы. Это могло значить одно из двух: либо никто кроме меня не ждал внедрения View Transitions в Safari, либо я сделал что-то не так.
И вот опытным путём я выяснил, что огромное влияние на производительность анимации оказывает размер анимируемого элемента. Я пытался создать эффект раскрытия карточки со статьёй в полноценную статью, которая очевидно имеет довольно большую высоту, с которой Chromium-based браузеры справляются без труда, а вот для Safari это непосильная тяжесть — возможно это как-то связано с древней проблемой ограничения на размеры текстур в Open GL, которая приводит к различным артефактам при использовании CSS анимаций.
В итоге временное решение проблемы уместилось в пару строчек кода, но анимации по прежнему выглядят не так плавно, как в Chrome.
(На видео в посте можно увидеть анимации переходов до/после исправления)
В предвкушении внедрения поддержки View Transitions в Safari я обновил Mac OS и iPad OS до последних версий и... я был крайне разочарован.
Анимации переходов работали совсем не так, как в Chromium-based браузерах — они заметно тормозили, а в некоторых случаях и вовсе перестали работать.
Сперва я подумал "как же Apple могли выкатить в продакшен такую кривую реализацию API?", но, тщательно погуглив, я не обнаружил ни одной подобной жалобы. Это могло значить одно из двух: либо никто кроме меня не ждал внедрения View Transitions в Safari, либо я сделал что-то не так.
И вот опытным путём я выяснил, что огромное влияние на производительность анимации оказывает размер анимируемого элемента. Я пытался создать эффект раскрытия карточки со статьёй в полноценную статью, которая очевидно имеет довольно большую высоту, с которой Chromium-based браузеры справляются без труда, а вот для Safari это непосильная тяжесть — возможно это как-то связано с древней проблемой ограничения на размеры текстур в Open GL, которая приводит к различным артефактам при использовании CSS анимаций.
В итоге временное решение проблемы уместилось в пару строчек кода, но анимации по прежнему выглядят не так плавно, как в Chrome.
(На видео в посте можно увидеть анимации переходов до/после исправления)
This media is not supported in your browser
VIEW IN TELEGRAM
Для полноты картины упомяну ещё одну проблему, которая мешает полноценному использованию View Transitions — задваивание анимаций перехода при свайпе в Safari на iOs.
С этой проблемой пытались бороться решениями разной степени костыльности ещё во времена актуальности React Transition Group, но с приходом View Transitions эта проблема заиграла новыми красками и я очень надеюсь, что в ближайших релизах Safari с ней что-нибудь сделают.
С этой проблемой пытались бороться решениями разной степени костыльности ещё во времена актуальности React Transition Group, но с приходом View Transitions эта проблема заиграла новыми красками и я очень надеюсь, что в ближайших релизах Safari с ней что-нибудь сделают.
Дивный новый Vite
В своём докладе про то, как мы с CRA съезжали я уже упомянал о планах Vite по переезду на Rust и вот на недавнем ViteConf Эван Ю более подробно рассказал об этих планах.
Напомню, что основная идея заключается в замене связки Rollup (эффективный и гибкий, но медленный) и ESBuild (ничего не умеет, но быстрый) на Rolldown (эффективный, гибкий и быстрый) с целью избавиться от неконсистентности между дев и прод сборками.
В качестве транспилятора на замену Babel приходит Oxc, который обещает быть легче и быстрее, чем SWC.
Замена Rollup на Rolldown, как я понимаю, вдохновлена опытом Rspack, который призван заменить собой Webpack.
При этом Эван Ю спешит похвастаться сравнительными замерами скорости Rolldown и Rsbuild, которые, разумеется, демонстрируют, что их инструмент самый быстрый и классный.
Любопытно будет посмотреть, к чему приведёт эта гонка вооружений сборщиков.
В своём докладе про то, как мы с CRA съезжали я уже упомянал о планах Vite по переезду на Rust и вот на недавнем ViteConf Эван Ю более подробно рассказал об этих планах.
Напомню, что основная идея заключается в замене связки Rollup (эффективный и гибкий, но медленный) и ESBuild (ничего не умеет, но быстрый) на Rolldown (эффективный, гибкий и быстрый) с целью избавиться от неконсистентности между дев и прод сборками.
В качестве транспилятора на замену Babel приходит Oxc, который обещает быть легче и быстрее, чем SWC.
Замена Rollup на Rolldown, как я понимаю, вдохновлена опытом Rspack, который призван заменить собой Webpack.
При этом Эван Ю спешит похвастаться сравнительными замерами скорости Rolldown и Rsbuild, которые, разумеется, демонстрируют, что их инструмент самый быстрый и классный.
Любопытно будет посмотреть, к чему приведёт эта гонка вооружений сборщиков.
Эволюция микрофронтендов
На недавнем Frontend Conf я рассказывал о текущем состоянии микрофронтов. Постарался рассказать максимально доступным языком, при этом не теряя важных концептуальных деталей, и проиллюстрировать наглядными схемами, поэтому на мой взгляд доклад будет полезен даже тем, кто уже посмотрел множество других докладов про микрофронты.
На недавнем Frontend Conf я рассказывал о текущем состоянии микрофронтов. Постарался рассказать максимально доступным языком, при этом не теряя важных концептуальных деталей, и проиллюстрировать наглядными схемами, поэтому на мой взгляд доклад будет полезен даже тем, кто уже посмотрел множество других докладов про микрофронты.
Hacknote.js
Эволюция микрофронтендов
Почти на каждой фронтенд-конференции последних лет можно обнаружить 2-3 доклада про микрофронтенды и они пользуются огромным спросом, но в чём же причина популярности этого подхода? В докладе попробую резюмировать текущее состояние веб платформы касательно…