Настя ведет канал по веб-разработке(и не только!) https://t.me/web_and_more
Внутри - регулярная подборка интересных статей и видосов из мира фронтенда!
Совсем недавно она выступала с классным докладом про доступность в вебе. Обычно не люблю эту тему, но доклад получится интересным, открыл для себя много нового.
Подписываемся, ставим лайки😎
Внутри - регулярная подборка интересных статей и видосов из мира фронтенда!
Совсем недавно она выступала с классным докладом про доступность в вебе. Обычно не люблю эту тему, но доклад получится интересным, открыл для себя много нового.
Подписываемся, ставим лайки😎
Telegram
Веб (и не только) заметки
Когда хочется поделиться
❤4🔥3
Начинаем новую познавательную рубрику на канале!
Метрики производительности фронтенда
Существует перечень метрик от Google под названием Core Web Vitals. Они отражают то, насколько ваш фронтенд отвечает современным стандартам скорости, отзывчивости и удобства использования.
По многочисленным исследованиям, каждая дополнительная секунда загрузки вашего продукта на 70% уменьшает конверсию вашего посетителя в покупателя.
Поэтому крайне важно следить за этими метриками.
Померить данные показатели для своего приложения можно в девтулзах Хрома, на вкладке Lighthouse. Он составит подробный отчет и выдаст рекомендации по оптимизации.
Сегодня мы поговорим о той, что предшествует всем остальным.
Встречайте: Time To First Byte! Сокращенно, TTFB!
Этот показатель отвечает за то, насколько быстро сервер ответил на запрос пользователя о загрузке веб-документ и прислал первый байт инфорфмации
Логично подсчитать, что TTFB = dns lookup сервера + время путешествия запроса с клиента на сервер + время обработки запроса сервером + время путешествия запроса с сервера на клиент
Эксперты из Гугла утверждают, что оптимальным значением является 800мс и менее. ВАЖНО! Речь идет не о загрузке ВСЕГО ответа, а лишь о достижении на клиент первой его части
Как же оптимизировать TTFB?
1️⃣ Подберите мощный хостинг с достаточным количеством ресурсов
2️⃣ Используйте стратегии кэширования на клиенте и сервере
3️⃣ Размещайте свой контент поближе к пользователям в географически распределенных CDN
4️⃣ Уменьшайте размер файла, передаваемого с клиента на сервер
Дальше поговорим о FCP. Оставайтесь на связи!
Метрики производительности фронтенда
Существует перечень метрик от Google под названием Core Web Vitals. Они отражают то, насколько ваш фронтенд отвечает современным стандартам скорости, отзывчивости и удобства использования.
По многочисленным исследованиям, каждая дополнительная секунда загрузки вашего продукта на 70% уменьшает конверсию вашего посетителя в покупателя.
Поэтому крайне важно следить за этими метриками.
Померить данные показатели для своего приложения можно в девтулзах Хрома, на вкладке Lighthouse. Он составит подробный отчет и выдаст рекомендации по оптимизации.
Сегодня мы поговорим о той, что предшествует всем остальным.
Встречайте: Time To First Byte! Сокращенно, TTFB!
Этот показатель отвечает за то, насколько быстро сервер ответил на запрос пользователя о загрузке веб-документ и прислал первый байт инфорфмации
Логично подсчитать, что TTFB = dns lookup сервера + время путешествия запроса с клиента на сервер + время обработки запроса сервером + время путешествия запроса с сервера на клиент
Эксперты из Гугла утверждают, что оптимальным значением является 800мс и менее. ВАЖНО! Речь идет не о загрузке ВСЕГО ответа, а лишь о достижении на клиент первой его части
Как же оптимизировать TTFB?
Дальше поговорим о FCP. Оставайтесь на связи!
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9👍5🤡1
Forwarded from Proglib.academy | IT-курсы
🔀 Чем отличаются системный и бизнес-аналитик? Разбираемся на практике
Дискуссии о том, как разделить определения системного и бизнес-аналитика ведутся в сфере непрерывно. Одни уверены, что это профессия «два в одном», другие — не понимают, какой именно аналитик нужен проекту, и главное — зачем. Раскладываем по полочкам в нашей статье.
👉 Ссылка на статью
Дискуссии о том, как разделить определения системного и бизнес-аналитика ведутся в сфере непрерывно. Одни уверены, что это профессия «два в одном», другие — не понимают, какой именно аналитик нужен проекту, и главное — зачем. Раскладываем по полочкам в нашей статье.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3🔥2🤔1
State of CSS 2024
Вышли результаты ежегодного опроса разработчиков о CSS. Из интересного:
1️⃣ Tailwind все ещё на вершине, его используют чаще других CSS-фреймворков. Хотя мне самому его дизайн не нравится
2️⃣ Тестирование доступности все ещё проводит меньше 10% разработчиков. Но довольно большое количество участников отметили, что проводят тестирование стилей на мобильных устройствах.
3️⃣ :has уже использует большое количество людей. Круто, ведь этот псевдо-селектор позволяет по новому смотреть на CSS!
4️⃣ Современные фичи вроде backdrop-filter и prefers-color-scheme все ещё на стадии принятия. Процент использования не больше 20.
5️⃣ Sass на коне, а вот LESS используют заметно меньше
Полное исследование: тык
Вышли результаты ежегодного опроса разработчиков о CSS. Из интересного:
Полное исследование: тык
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
Forwarded from Cross Join - канал о разработке (Anton Okolelov)
React Native полностью переделан
После 6 лет разработки команда React Native представила полностью переписанную архитектуру фреймворка (0.76) – самое значительное обновление с момента создания React Native. Это результат масштабной работы над улучшением производительности, стабильности и возможностей платформы.
Ключевые изменения
Новая версия обеспечивает полную поддержку современных возможностей React, включая Suspense, Transitions и автоматический батчинг. В React Native наконец появился полноценный useLayoutEffect – теперь работа с лейаутом стала синхронной и предсказуемой. Это позволяет корректно позиционировать элементы интерфейса без промежуточных состояний и визуальных артефактов.
Улучшение производительности
Мост между JavaScript и нативным кодом полностью удален. Коммуникация теперь происходит напрямую через JavaScript Interface (JSI), что существенно ускоряет работу приложения и его запуск. Новый рендерер может обрабатывать несколько деревьев компонентов одновременно в разных потоках с разными приоритетами. Это позволяет прерывать низкоприоритетные обновления для обработки пользовательского ввода, обеспечивая отзывчивость интерфейса даже при сложных вычислениях.
Технические улучшения
Система нативных модулей была полностью переработана. Теперь доступен синхронный доступ к нативным интерфейсам с полной типобезопасностью между JavaScript и нативным кодом. Появилась возможность писать кроссплатформенный код на C++, который работает на всех поддерживаемых платформах: iOS, Android, Windows и macOS. Модули загружаются лениво, что значительно сокращает время запуска приложения и потребление памяти.
View Flattening, ранее доступный только на Android, теперь работает и на iOS благодаря общему C++ рендереру. Эта оптимизация автоматически упрощает глубокие деревья компонентов, улучшая производительность рендеринга.
Проверено в продакшене
Новая архитектура уже активно используется в крупных приложениях: Facebook, Instagram, Expensify, Kraken и BlueSky. Facebook и Instagram для Meta Quest также построены на новой архитектуре. Это демонстрирует её готовность к применению в проектах любого масштаба и сложности.
Процесс миграции
Большинство приложений смогут обновиться с тем же уровнем усилий, как и при обычном релизе. Более 850 популярных библиотек уже поддерживают новую архитектуру, включая все библиотеки с более чем 200 тысячами еженедельных загрузок. Благодаря автоматическому слою совместимости со старой архитектурой, миграция может быть постепенной – нет необходимости переписывать всё приложение одновременно.
Популярные библиотеки, такие как react-native-mmkv и Reanimated, уже получили значительные улучшения от перехода на новую архитектуру. MMKV стал полностью кроссплатформенным C++ модулем с улучшенной типобезопасностью, а Reanimated 4 получил возможность управлять анимациями и лейаутом в разных потоках.
Дальнейшее развитие
В планах команды React Native – улучшение встроенных компонентов и расширение поддержки современных веб-стандартов. Event Loop теперь работает в соответствии с веб-спецификациями HTML Standard, что в будущем позволит использовать такие API как microtasks, MutationObserver и IntersectionObserver.
Практическая информация
Совместимость используемых библиотек можно проверить на reactnative.directory. Официальная документация содержит подробное руководство по миграции. При возникновении проблем всегда есть возможность отключить новую архитектуру через конфигурацию проекта.
После 6 лет разработки команда React Native представила полностью переписанную архитектуру фреймворка (0.76) – самое значительное обновление с момента создания React Native. Это результат масштабной работы над улучшением производительности, стабильности и возможностей платформы.
Ключевые изменения
Новая версия обеспечивает полную поддержку современных возможностей React, включая Suspense, Transitions и автоматический батчинг. В React Native наконец появился полноценный useLayoutEffect – теперь работа с лейаутом стала синхронной и предсказуемой. Это позволяет корректно позиционировать элементы интерфейса без промежуточных состояний и визуальных артефактов.
Улучшение производительности
Мост между JavaScript и нативным кодом полностью удален. Коммуникация теперь происходит напрямую через JavaScript Interface (JSI), что существенно ускоряет работу приложения и его запуск. Новый рендерер может обрабатывать несколько деревьев компонентов одновременно в разных потоках с разными приоритетами. Это позволяет прерывать низкоприоритетные обновления для обработки пользовательского ввода, обеспечивая отзывчивость интерфейса даже при сложных вычислениях.
Технические улучшения
Система нативных модулей была полностью переработана. Теперь доступен синхронный доступ к нативным интерфейсам с полной типобезопасностью между JavaScript и нативным кодом. Появилась возможность писать кроссплатформенный код на C++, который работает на всех поддерживаемых платформах: iOS, Android, Windows и macOS. Модули загружаются лениво, что значительно сокращает время запуска приложения и потребление памяти.
View Flattening, ранее доступный только на Android, теперь работает и на iOS благодаря общему C++ рендереру. Эта оптимизация автоматически упрощает глубокие деревья компонентов, улучшая производительность рендеринга.
Проверено в продакшене
Новая архитектура уже активно используется в крупных приложениях: Facebook, Instagram, Expensify, Kraken и BlueSky. Facebook и Instagram для Meta Quest также построены на новой архитектуре. Это демонстрирует её готовность к применению в проектах любого масштаба и сложности.
Процесс миграции
Большинство приложений смогут обновиться с тем же уровнем усилий, как и при обычном релизе. Более 850 популярных библиотек уже поддерживают новую архитектуру, включая все библиотеки с более чем 200 тысячами еженедельных загрузок. Благодаря автоматическому слою совместимости со старой архитектурой, миграция может быть постепенной – нет необходимости переписывать всё приложение одновременно.
Популярные библиотеки, такие как react-native-mmkv и Reanimated, уже получили значительные улучшения от перехода на новую архитектуру. MMKV стал полностью кроссплатформенным C++ модулем с улучшенной типобезопасностью, а Reanimated 4 получил возможность управлять анимациями и лейаутом в разных потоках.
Дальнейшее развитие
В планах команды React Native – улучшение встроенных компонентов и расширение поддержки современных веб-стандартов. Event Loop теперь работает в соответствии с веб-спецификациями HTML Standard, что в будущем позволит использовать такие API как microtasks, MutationObserver и IntersectionObserver.
Практическая информация
Совместимость используемых библиотек можно проверить на reactnative.directory. Официальная документация содержит подробное руководство по миграции. При возникновении проблем всегда есть возможность отключить новую архитектуру через конфигурацию проекта.
reactnative.dev
New Architecture is here · React Native
React Native 0.76 with the New Architecture by default is now available on npm!
❤3
Новая фишка Angular 19: Resource API
Мой любимый Ангуляр потихоньку превращается в Реакт. Добавляют эффекты, а теперь ввели нечто похожее на хуки. Правильной ли дорогой идем?
https://www.angulararchitects.io/blog/asynchronous-resources-with-angulars-new-resource-api/?mc_cid=ea8d6b1f68&mc_eid=ef706c5abd
Мой любимый Ангуляр потихоньку превращается в Реакт. Добавляют эффекты, а теперь ввели нечто похожее на хуки. Правильной ли дорогой идем?
https://www.angulararchitects.io/blog/asynchronous-resources-with-angulars-new-resource-api/?mc_cid=ea8d6b1f68&mc_eid=ef706c5abd
ANGULARarchitects
Asynchronous Data Flow with Angular's new Resource API - ANGULARarchitects
Dies ist Beitrag 6 von 6 der Serie “Signals” Signals in Angular: Building Blocks Component Communication with Signals: Inputs, Two-Way Bindings, and Content/ View Queries Successful with Signals in Angular – 3 Effective Rules for Your Architecture Skillfully…
❤3🤔3😭1
Охренеть. CSS Nesting уже нативно доступен во всех современных браузерах. Кажется, пора прощаться с препроцессорами.
Сами посмотрите: https://caniuse.com/css-nesting
Как использовать: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting
Сами посмотрите: https://caniuse.com/css-nesting
Как использовать: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting
❤10🤡3
Если вы когда-нибудь задумывались о создании собственного языка программирования, вам предстоит изучить множество важных концепций: токенизацию, парсинг, построение абстрактного синтаксического дерева и тд.
Но эта статья может послужить хорошей отправной точкой:
https://isuckatcs.github.io/how-to-compile-your-language/parsing.html
Но эта статья может послужить хорошей отправной точкой:
https://isuckatcs.github.io/how-to-compile-your-language/parsing.html
❤9