Кусь твоему коду | фронтенд с Людой

О прошлом, настоящем и будущем CSS поговорим с Людмилой Мжачих ⠀ Веб быстро развивается, появляются все новые и новые фичи. Container Queries, Cascade Layers, новые цветовые пространства и многое другое меняют наше представление о современной верстке. Это уже не тот CSS, который мы писали 2, 3, 10 лет назад. ⠀ В докладе мы поговорим о том, какие самые интересные возможности предоставляет современный CSS, а какие подходы давно канули в лету. Также попробуем предсказать, что ждет нас в будущем. Ждем вас на FrontendConf 2023 в Москве 🖐 ⠀ ✅ Программа конференции, расписание и билеты на сайте в описании канала @FrontendConfChannel

Всем доброе субботнее утро! 🚀 Через час начинается Я.Субботник по разработке интерфейсов! В этот раз поговорим на следующие темы: • Что делать, когда бандл нужно «посадить на диету» • Сотни компонентов, сотни экспериментов и всего одна страница • Ajax: от A до X • Ускоряем Time To Market • ДАА!! ML на JavaScript! Но зачем? 👉 Подключайтесь к трансляции

Что такое Baseline Baseline - это проект WebDX Community Group, группы, которая состоит из представителей различных организаций, работающих над развитием веба. Целью этой группы является улучшение качества и доступности веб-платформы для разработчиков. Если фича помечена как входящая в Baseline, это означает, что она прошла тщательную проверку и считается достаточно стабильной и широко поддерживаемой для использования в продакшне. Базовая поддержка определяется тем, что эта функция поддерживается в текущей и предыдущей версиях основных браузеров: Chrome, Firefox, Safari, Edge. Предпосылки Веб быстро развивается, браузеры постоянно обновляются, и появляются новые фичи. Однако, не все из них сразу же становятся доступными или безопасными для использования. Некоторые фичи могут быть еще в стадии разработки, другие могут не поддерживаться всеми браузерам. У нас, как у разработчиков, возникают вопросы вроде «Когда все браузерные движки будут поддерживать эту новую функцию?» «Когда я смогу начать использовать эти функции в проде?» «Как долго мы должны поддерживать старые браузеры?». Конечно, все зависит от вашей пользовательской базы, технического стека, структуры вашей команды и поддерживаемых устройств. Но быстрое развитие и появление новых фич вносит еще больше сумбура. В прошлом, разработчикам приходилось самостоятельно отслеживать статус этих фич и определять, безопасно ли их использовать. Сейчас делать это стало еще сложнее. Baseline был создан для решения этой проблемы, предоставляя единый стандарт, который помогает разработчикам определить, какие фичи уже можно безопасно использовать. Как оставаться в курсе Группа работает над проектом Feature Set, цель которого - собрать в одном месте и сгруппировать функции веб-платформы, чтобы показать их статус поддержки. В этом репозитории можно найти информацию о последних фичах или самим сделать пул реквест. "Слепок" Baseline планируют публиковать раз в год. Так что можно будет оценить, как изменилась веб-платформа за год. Также в блогах Chrome публикуют ежемесячные обновления о том, что происходит на веб-платформе и пишут о новых фичах, которые стали только совместимыми.

Если вы недавно заходили на MDN или web.dev, то, возможно, заметили новую плашку "Baseline", которая появилась рядом с некоторыми статьями. Она показывает, какие фичи веб платформы можно безопасно использовать в своем проекте. Что такое Baseline и чем это может быть полезно ⬇️

#css_с_Людой Interop: как браузеры работают вместе для улучшения веба для разработчиков Кроссбраузерность всегда была главной болью верстки. Хаки, вендорные префиксы, баги и медленное внедрение стандартов создавали много проблем для разработчиков. Помните, как долго и больно внедрялись флексбоксы? Но последние пару лет оказались взрывными в плане появления новых возможностей CSS. Container Queries, Parent Selectors, Cascade Layers и многие другие фичи, которые мы так долго ждали! А заметили, как быстро релизятся браузеры и внедряются новые фичи? В блоге web.dev каждый месяц публикуется пост о том, что новенького подъехало в веб платформе. Так что же изменилось? Благодаря чему развитие веб платформы зашаголо семимильными шагами? 🛠Предпосылки Все началось в 2019 году. Ведущие производители браузеров приступили к поискам совместного решения этих проблем. Они проанализировали основные боли разработчиков и создали инициативу Combat 2021, выделив для устранения 5 основных проблем совместимости CSS, среди которых были CSS grid и CSS flexbox. Результаты были очень позитивные, и сейчас, мы уверенно можем использовать эти фичи. 🌍Interop 2022 Результатом работы стало появление Interop 2022 - совместной инициативы производителей браузеров по улучшению функционала, чтобы он везде работал одинаково. В ней приняли участие Apple, Bocoup, Google, Igalia, Microsoft и Mozilla. *Interoperability - термин означает, что фича работает и работает одинаково во всех браузерах. Было выделено 15 областей, на которых хотели сфокусироваться: ⁃ Cascade layers ⁃ Color spaces and CSS color functions ⁃ New viewport units ⁃ … Результаты в открытом доступе, их можно посмотреть на Interop 2022 Dashboard. Баллы по каждой области рассчитываются на основе прохождения тестов web-platform-tests. 🔮Interop 2023 Работа продолжается. И в Interop 2023 уже 26 focus areas! На этот раз его уже публично анонсировали и собирали фидбек, на основе которого выделяли направления работы. 🌟Что это значит для нас, разработчиков Такие инициативы помогают сделать огромный шаг вперёд в унификации веба, улучшая пользовательский опыт и упрощая жизнь разработчиков. Мы наконец-то получаем долгожданные фичи и можем сконцентрироваться на создании крутых интерфейсов, вместо борьбы с ветряными мельницами, пытаясь обойти кроссбраузерные баги. 🔎Материалы по теме https://web.dev/interop-2022/ https://www.youtube.com/watch?v=1mD2gxv8I7s https://www.youtube.com/watch?v=w_gOOW2ARMk https://web.dev/interop-2023/ https://hacks.mozilla.org/2023/02/announcing-interop-2023/ https://web-platform-tests.org/

21 и 22 мая была на HolyJS в Москве. Для меня офлайн конференции - это, помимо концентрированной пользы, возможность увидеться со старыми друзьями, зарядиться энергией на новые достижения и очередной раз вспомнить, как я люблю свою профессию. Что слушала живьем: - Нет пароля - нет проблем? Андрей Мелихов - Одно PWA, чтоб править всеми, Никита Дубко - Друг или враг? ИИ во фронтенд-разработке, Михаил Трифонов - Фронтендеры - они повсюду, Андрей Смирнов - Что на самом деле делает движок блога Эгея, Илья Бирман - Что нового в JS и вебе, Мария Кондаурова - Борьба с ветряными мельницами, или Как жить с тех долгом, Алексей Золотых - Карьерный вопрос, круглый стол - Как RxJS разделил мой мир на до и после, Глеб Михеев Остальное буду смотреть в записи. Эээх, был бы маховик времени, чтобы быть в 3х залах одновременно! 🪄 P.S. Чатики докладов как отдельный вид искусства 😂 Привет, «обстуканным обрынкам» 😉

🌟 Что нового в web 🌟 Привет! Хочу рассказать, какие интересные новые возможности веб интерфейсов нам показали на презентации Google I/O 2023. Как было сказано, нас ждет настоящая золотая эра для веба! ✨ 🔹 Логические компоненты ✓ Container Queries - для лучшей адаптивности - читать ✓ Style Queries - для более гибкого оформления - читать ✓ :has() selector - находит элементы по наличию определенных потомков - читать ✓ Расширенный селектор :nth-child, :nth-child of type - для точного выбора элементов - читать ✓ text-wrap: balance - для балансировки переноса текста в блоках ✓ initial-letter - для стилизации первой буквы в тексте 🔹 Возможности системы ✓ Динамические единицы измерения видимости - читать ✓ Поддержка новых широких цветовых пространств - читать ✓ Функция смешивания цветов с помощью color-mix() - читать ✓ Переменные системы (accent-color) для большей настраиваемости 🔹 Дизайн, управляемый пользователем ✓ Запросы пользовательских предпочтений (User Preference Queries) ✓ Тематическое оформление 🔹 Архитектура ✓ Nesting - более компактная архитектура CSS для уменьшения повторений и улучшения опыта разработчика - читать ✓ Cascade Layers - управление каскадом стилем для предотвращения конфликтов стилей - читать ✓ Scoped Styles - указание области применения правил для предотвращения конфликтов пространства имен ✓ Trigonometry - использование тригонометрических функций в CSS - читать ✓ Individual Transforms - можно разбить трансформации в CSS на отдельные функции, что позволяет комбинировать их 🔹 Настраиваемые компоненты ✓ Popover - всплывающие окна с доступным поведением - читать ✓ Anchor positioning - привязывает элементы друг к другу с помощью CSS-позиционирования якорей - читать ✓ Selectmenu - выпадающие меню (и не только) с помощью нового нативного элемента HTML и CSS-свойств 🔹 Взаимодействия ✓ Discrete Property Transitions - более простое анимирование переходов между состояниями элемента. Например, позволяют анимировать переход от отображения элемента к его скрытию и наоборот ✓ Scroll-Driven Animations - анимация при прокрутке ✓ View Transitions - Переходы между views, страницами и элементами - читать 🔹🔹🔹 🎯 Теперь web UI - это меньше скриптов, больше настраиваемости и более декларативные API! Эти новые возможности позволяют нам сфокусироваться на кастомизации и творчестве. Больше не нужно тратить время на множество скриптов и сложную логику — теперь мы можем делать больше и быстрее, благодаря более гибким и удобным инструментам. Будущее веб-разработки выглядит захватывающе! 🚀

#ссылки_за_неделю 1. OKLCH in CSS: why we moved from RGB and HSL Статья Evil Martians о новом цветовом формате, появившемся в спецификации CSS Color 4. В статье рассказывают о преимуществах OKLCH-цветов над привычными RGB и HSL. Можно сказать, что такие цвета ближе к реальному цвету, их проще воспринимать и модифицировать. Но главное - это шаг к улучшению коммуникации между разработчиками и дизайнерами. 2. Browser Event loop: micro and macro tasks, call stack, render queue: layout, paint, composite Статья Ника Мостового о том, как работает цикл событий в браузере и как он связан с очередью рендеринга. Очень подробно и понятно. 3. Как подружить разработку и бизнес - Алексей Катаев Доклад с Skyeng Teamlead Meetup 2018. Важно не забывать, что смысл нашей, разработчиков, деятельности - решение задач бизнеса. Доклад о том, как перестроить свое мышление в бизнесовое и принести этим пользу своему проекту. 4. Доклад: Первые 90 дней на новой работе: онбординг тимлида / Анатолий Панов (Авито) Стать тимлидом изнутри в каком-то смысле проще: ты всё знаешь внутри компании, тебя все знают. А вот прийти снаружи сразу на менеджерскую позицию — целый квест. Вдруг, команда не примет? Или не сможешь разобраться, как тут всё устроено? Или не оправдаешь ожиданий руководителя? На самом деле, онбординг в новую компанию или команду страшен только в первый раз. Доклад о том, как тимлиду заранее подготовиться и расставить себе приоритеты на первые 90 дней в новой компании.

Всю прошлую неделю смотрела Podlodka Teamlead Crew. Для тех, кто не знает, это серия онлайн докладов для тимлидов и неравнодушных. Всего в этом сезоне было 10 сессий, не объединенных какой-то конкретной темой. Спикеры рабирали самые разные вопросы: выстраивание эффективных коммуникаций, мотивация, демотивация, борьба с синдромом самозванца и др. Много полезного вынесла, много мыслей мне отозвалось, а историй из своего тимлидского прошлого - заново отрефлексировалось. Особенно мне зашли доклады о том, как мотивировать людей, не имея над ними формальной власти, Анастасии Абрашитовой и об эффективных (и не очень) созвонах Никиты Дубко из Яндекса. А в сегодняшних #ссылки_за_неделю 3 отличных доклада, которые нашла благодаря Подлодке. 1. Евгений Кот. Откройте форточку, в комнате менеджер (или как получать удовольствие от рутины) Когда мы соглашаемся стать менеджером, вряд ли мы подписываемся под десятки митингов в день, отвечания на бесконечные вопросы и дождь бюрократии, который льётся на нас сверху. Написать сто писем в день и отсидеть задницу на митингах, вот она работа теперь. Казалось бы, жизнь менеджера бесконечно скучна... Или нет? Рассматриваем пять моделей мотивации, психологические теории удовольствия, и почему разработчиком быть хуже, чем менеджером. 2. Зачем нам что-то менять? Healthcheck команды как инструмент управления / Александр Пряхин (Авито) Как понять, что именно тот или иной процесс должны быть внедрены? А как понять, что команда к ним готова? Ведь выгоревшая или конфликтная команда может отвергать изменения. Поговорим о том, как определить состояние здоровья команды, улучшить картину и системно поддерживать здоровье на уровне при помощи соответствующих инструментов и процессов. 3. Самый шерстяной волчара: тимлид с технической ролью и без / Анастасия Абрашитова (Яндекс) Обязательно ли руководитель команды должен быть техническим лидером в ней? По этому вопросу в IT сломано много копий, и новые ломаются каждый день. Сломаем парочку и мы!

#ссылки_за_неделю На прошлой неделе посмотрела дискуссию Podlodka Teamlead Crew о том, зачем нужны тимлиды, пару обучалок на тему CI/СD и 1,5 выпуска подкаста подлодки. Но тема, которая меня действительно захватила и не планирует отпускать, - это применение ChatGTP для ускорения разработки и обучения 🤯 Оставляю вам 7 крутых видео по теме. 1. REAL Uses of ChatGPT As A Developer | 12 Practical Examples 12 популярных юзкейсов для chatGTP: Tweets AWS policies Writing code Explaining code Refactor code Finding bugs More efficient code Kubernetes manifests/YAML GitHub README Infrastructure as Code TLDRs Blogging 2. Episode 3 - Create Website using ChatGPT | Chat GPT writes code Генерация разметки на ванильном HTML + CSS 3. Masterclass: AI-driven Development for Programmers Использование СhatGTP для приложения на React + TS. Интересная мысль о том, как благодаря AI фреймворки могут в будущем отмереть: генерация псевдокода и последующая его трансляция во что угодно. 4. Advanced ChatGPT Guide - How to build your own Chat GPT Site MERN приложение при помощи СhatGTP 5. ChatGPT Tutorial for Developers - 38 Ways to 10x Your Productivity Примеры на HTML&CSS, JS, Python, Node.js, SQL 6. Learn Anything FASTER With ChatGPT (13 ChatGPT Prompts For Studying) 13 ChatGPT Prompts для учебы, продвинутые техники 7. Advanced ChatGPT Prompt Tutorial (10X Your Productivity With AI) 12 продвинутых ChatGPT prompts для разных случаев жизни. Симулировать интервью, практикровать soft skills, использовать chatGPT как карьерного коуча и тп 🤯