mefody.dev

Talks

Conferences and meetups, public talks, podcasts.

Conferences and meetups

  • Дебаг производительности страницы средствами браузера

    Когда я впервые открыл вкладку Performance в девтулзах и покликал на разные элементы — ничего не понял и закрыл. А на самом деле это очень полезный инструмент с большим количеством возможностей. За несколько лет удалось разобраться, что же всё-таки обозначают разные кнопки-ссылки, поэтому в докладе расскажу, как пользоваться этой вкладкой и удивлять коллег быстрым решением проблем.

  • Селекторы CSS: простые и сложные

    Сколько способов выбрать элемент для стилизации при помощи CSS-селектора вы знаете? Ведь бывает же иногда будничная ситуация, когда из всего проекта работать нам разрешают только с CSS-файлом. Но сделать всё равно нужно красиво! В докладе расскажу, как мощны лапищи современных CSS-селекторов, как их можно необычно применять и почему старые шпаргалки про вес селекторов уже не работают.

  • Сайт, готовый ко всему

    Вспомните, где вы обычно тестируете свое веб-приложение. Скорее всего, у вас есть несколько вьюпортов, в которых вы быстро проверяете верстку и, возможно, пишете автотесты. И багов от пользователей почти нет — значит, всё делаете правильно. Но как вашим сайтом пользуются на самом деле? Что нужно предусмотреть, чтобы сайт работал действительно почти везде?

  • Редактор CSS на CSS

    Давайте попробуем собрать компонент для CSS-демок. Чтобы можно было редактировать CSS, а стили сразу применялись на экране и при этом не влияли на элементы за пределами демки. И чтобы можно было менять размер редактора кода. Да ещё и с поддержкой тёмной темы — это сейчас модно. А чтобы задача было интересной, запретим себе использовать JavaScript. Готовы?

  • Слоистый CSS со взбитыми сливками

    В спецификации CSS Cascading and Inheritance Level 5 появилась сущность, которая сильно повлияет на способ организации CSS-кода в проектах. Эта сущность — слои, которые задаются директивой @layer. С введением слоёв методологии вроде БЭМ становятся не такими уж и универсальными. Из доклада вы узнаете, как одна маленькая директива радикально меняет работу каскада, при чём здесь фреймворки и как применить всю мощь слоёв уже сейчас.

  • Cycle Time, Feature Time, Lead Time. Радуем пользователей быстрее при помощи графиков

    Скорее всего у вас в команде есть какие-то процессы доставки фичей до продакшена. И, возможно, вы даже пробуете эти процессы оптимизировать, чтобы и фичи доставлялись быстрее, и команда не разбежалась в огне. В докладе делюсь своим опытом анализа метрик Cycle Time, Feature Time и Lead Time при помощи графиков. Рассказываю, как такие графики могут выглядеть и как выстроить регулярные процессы работы с ними.

  • По-настоящему красивые переходы средствами браузера

    View Transitions API и Scroll-driven Animations — новые интересные фичи, которые уже позволяют в некоторых браузерах делать очень красивые переходы между состояниями веб-приложений. Представьте клик на карточку товара, который плавно дорисовывает весь остальной интерфейс вокруг самой карточки. Или анимации, привязанные к скроллу, но не требующие никаких библиотек для этого. В докладе расскажу и покажу, как таким пользоваться уже сейчас.

  • CSS first. Когда JS не нужен

    В 2023 году CSS умеет многие вещи, которые раньше были возможны только с подключенными JS-библиотеками. И эти библиотеки нужно было постоянно обновлять. Но принцип «Работает — не трогай» не дает нам облегчить бандл, а старая привычка, что какие-то фичи еще не работают во всех браузерах, усугубляет ситуацию. В докладе показываю, как переписать целые JS-библиотеки на CSS и в каких случаях это не стоит делать.

  • Алло, мы с нижнего этажа, у вас стили протекают

    С тех пор как одному DOM-элементу стало возможно добавить несколько CSS-классов, веб-разработчики ищут способы изолировать стили, избавиться от наследования, закрыть CSS-свойства в закрытую коробочку. БЭМ, Atomic CSS, OOCSS, Shadow DOM, CSS-in-JS, Styled Components — скорее всего, на вашем сайте есть что-то из этого списка. Почему до сих пор проблему не решили на уровне самого CSS? Или всё-таки решили?

  • Одно PWA, чтоб править всеми

    Термин PWA появился ещё в 2015 году, но из-за браузерных разногласий долгое время был лишь красивой идеей. В 2023 году появилась надежда, что на iOS появятся альтернативные браузерные движки, а это может привести к тому, что для создания почти полноценных приложений будет достаточно знаний фронтенда. В докладе рассказывается, что умеют современные PWA: как изменился их внешний вид, насколько они интегрированы в операционные системы и в каких случаях они решают пользовательские задачи не хуже нативных приложений.

  • IndieWeb, или Ваш контент принадлежит вам

    Представьте, что у вас есть страничка в новом сервисе для микроблогов от компании Troodle. Вы собрали несколько тысяч подписчиков, постоянно наполняете микроблог контентом. И вот в какой-то момент Troodle решает закрыть сервис без сохранения ваших записей, потому что переориентация бизнеса. Знали ли вы, что есть целый ряд спецификаций, который делает ваш контент по-настоящему вашим? В докладе покажу, что входит в инициативу IndieWeb и как реализовать его идеи на своём сайте.

  • Что нам стоит блог построить?

    Генератор статики 11ty позволяет из любого формата данных генерировать любой другой. В докладе рассмотрим, как использовать его возможности для создания производительных статических сайтов, как вместо CMS обходиться встроенными возможностями GitHub и зачем блогу нужен Open Web.

  • Новые возможности CSS, которые меняют взгляд на вёрстку

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

  • Давайте созвонимся на пару минут

    «Коллеги, давайте созвонимся на пару минут, чтобы быстро обсудить пару вопросов». Знакомая фраза в рабочем чате? Было ли такое, что к вам в календарь прилетали встречи, про которые совсем ничего не понятно из описания? Или, может, вас когда-нибудь приглашали на встречу, где вы могли бы и не присутствовать? В докладе поговорим про то, как разгрузить свой календарь и использовать любые созвоны с пользой.

  • «Мастер D&D» как стиль управления командой

    Уже почти 2 года я играю с друзьями в Dungeons & Dragons, причём полгода — в роли мастера. В докладе я расскажу, как интересный опыт создания приключения для друзей изменил моё мышление про работу над проектами, в которых я руковожу командами разработки.

  • Project Fugu. Is it edible?

    Imagine that you have all the APIs that iOS and Android developers have. Not inside a WebView, but on your web page. Project Fugu is an initiative to bring native applications capabilities to web applications. Let’s discuss what we can use today in our production.

  • Chrome DevTools — спрятанные полезности

    Инструменты разработчика в браузерах хранят в себе много интересного и полезного, но до некоторых вещей не так просто достучаться из интерфейса. А некоторые просто прошли мимо, потому что про них мало кто говорит. Попробуем найти «помогаторы», которые позволяют решать ежедневные задачи эффективнее.

  • Ускоряем Cycle Time и растим счастье в команде

    Личная история, во время которой удалось ускорить командное время от взятия задачи в работу до попадания её артефактов в продакшен в 2 раза. О том, куда и зачем смотреть, что менять и как при этом не мучить команду бесполезной рутиной, а сделать её счастливее.

  • WebHID API: Control Everything via USB

    Operational System allows controlling different devices using Human Interface Device protocol for a long time. With WebHID API you can do the same right from the browser. Let’s talk about the protocol features and limitations. We’ll try to connect some devices to the laptop and control them with JavaScript.

  • Speakerpunk 2021

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

  • Open Graph для тех, кто не хочет думать

    Чтобы на сайт перешли из социальной сети, у него просто обязана быть красивая превьюшка. Как сделать так, чтобы один раз что-то настроить, а превьюшки всегда были красивыми — поговорим в докладе.

  • Explore new web features before everyone else

    Web Platform is developing fast. Too fast. Yesterday I used table layouts to make my website pixel perfect. Today I use flexbox and grid to make it adaptive. Tomorrow I will use cascading layers and container queries to be on the edge of technology. But where can I find the info about all the new features available? Where can I look to the future?

  • Что веб грядущий нам готовит

    Сегодня в завтрашний день не все могут смотреть. Вернее, смотреть могут не только лишь все. Мало, кто может это делать. Никита собрал для вас те вещи, которые скорее всего появятся в вебе в ближайшие годы и месяцы, и покажет, как смотреть в будущее.

  • Картинки со звуком

    Иногда хочется сделать что-нибудь странное: съесть мороженое с перцем, добавить в кофе огуречный сироп, сохранить MP3 в формате JPEG... С последнего и началось погружение Никиты в удивительный мир записи звука в визуальном виде с попыткой реализовать в браузере свой музыкальный проигрыватель для картинок.

  • Ты узнаешь её из тысячи: по JS, по img, по канвасу

    Браузеры всячески сражаются с тем, чтобы веб-платформу не использовали для фингерпринтинга. Можно ли спрятаться от зоркого ока таргетинга, или вы всегда уникальная снежинка?

  • На такой доклад я точно пойду

    Читать доклады легко: нагуглил материалов по теме, набросал мемасиков в слайды — и вперёд покорять конференции. Или нет? На мастер-классе опытные организаторы Саша Шинкевич и Никита Дубко разберут процесс подготовки доклада на технической конференции на кусочки и поделятся советами, как собрать из них что-то стоящее.

  • Управление воспроизведением в PWA

    Когда вы слушаете любимую песню или новый эпизод подкаста в нативном приложении, вполне привычно управлять воспроизведением через виджеты операционной системы, мультимедиа-клавишами на клавиатуре или даже «умными» часами. Можно ли сделать так же внутри PWA?

  • «Напомни через минуту», или Как считать время в браузере

    Пришла как-то к разработчику Мефодию задача: показывать через заданное пользователем время попап с напоминалкой, что время прошло. Написал Мефодий setTimeout, запушил, тикет закрыл. А пользователь так и не дождался своей напоминалки. В докладе поговорим о том, как браузеры работают со временем, что такое время вообще и как всё-таки показать напоминалку в правильный момент.

  • <img>

    «Просто добавь картинку на сайт», — говорили они. А оказалось, что «просто» не значит «правильно». Давайте разберёмся, как эффективно добавлять изображения на страницу, какие форматы графики для каких случаев полезны и как автоматизировать автоматизируемое.

  • WWW-аппликация

    Чтобы нарисовать веб-страничку, браузер под капотом задействует целый конвейер рендеринга, в котором каждый этап — важный и сложный. Как разработчик может влиять на эти этапы, чтобы сделать страничку лучше и производительней? Давайте вспомним аппликации из бумаги, которые вы, возможно, делали в начальной школе. Оказывается, у рендеринга и детских аппликаций есть много общего.

  • Трогательный фронтенд

    В марте Apple обновила iPadOS и добавила в него курсор мышки. Но мы привыкли к тому, что планшет — это тач-устройство, для которого можно верстать, не думая об указателях. Попробуем разобраться, нужно ли верстать отдельно под тач-устройства, и какие преимущества может дать нам знание, что сайт показывается не на мониторе.

  • Дорогая цена стилей

    Загрузка CSS на страницу — блокирующая операция. Если асинхронная загрузка JavaScript может быть незаметна пользователю, то медленное появление стилей может прогнать нетерпеливого пользователя с сайта. Как загружать CSS максимально производительно и незаметно для пользователей? Попробуем разобраться.

  • Трогательная вёрстка

    В марте Apple обновила iPadOS и добавила в него курсор мышки. Но мы привыкли к тому, что планшет — это тач-устройство, для которого можно верстать, не думая об указателях. Попробуем разобраться, нужно ли верстать отдельно под тач-устройства и какие преимущества может дать нам знание, что сайт показывается не на мониторе.

  • Анимации в вебе

    В 2020 году для хорошего UX использование анимаций на сайтах — почти стандарт. При этом способов «одушевить» интерфейс — вагон и маленькая тележка. Давайте рассмотрим самые популярные и выберем, когда какой способ подходит лучше.

  • <a>

    Что такое поисковая выдача? По факту — страница с десятками ссылок. Когда тег <⁣a⁣> — самое ценное, что нужно отдать пользователю, знать его особенности критически важно. Давайте разберёмся, какие тайны в себе хранит этот тег, который с нами ещё со стандарта HTML 1.

  • CSS — язык программирования

    В Интернетах принято ругать CSS, если не понимаешь, как с ним работать. Тем не менее, CSS в связке с HTML — Тьюринг-полный язык программирования, а если к ним добавить Houdini API и CSS Custom Properties — можно творить настояющую магию.

  • Soft Skills для интровертов

    Чтобы быть успешным разработчиком, одних навыков программирования в 2019 году недостаточно. Кроме знаний технологий, нужно развивать коммуникабельность, тайм-менеджмент, лидерские качества и много всего другого. Но что делать, если вы заядлый интроверт и хотите писать только код?

  • Алиса, пойдём во фронтенд!

    Голосовые помощники — уже не далёкое будущее, а реальная действительность. Алекса, Сири, Алиса и прочие встроенные в «умные» колонки боты постепенно меняют наш способ взаимодействия с приложениями. Давайте посмотрим на примере понимающей русский язык Алисы, как можно применять её навыки для ваших сайтов прямо сейчас. Построим простой навык прямо во время доклада. Рассмотрим, что уже сейчас могут дать голосовые помощники, чтобы привнести что-то новое и полезное в веб.

  • Houdini — CSS, который JavaScript

    CSS Houdini — набор спецификаций, который изменит веб-разработку. С его внедрением в браузеры обычный верстальщик будет вынужден выучить JavaScript, чтобы оставаться востребованным. Зато вместо того, чтобы дожидаться появления браузерной реализации «супер-мега-гридов», достаточно будет подключить полифил для CSS. Мы немного пофантазируем и рассмотрим все существующие спецификации Houdini.

  • Тёмная сторона веба

    Тёмные темы сайтов можно признать новым трендом в дизайне веб-приложений. Иногда они уместны, иногда — необходимы. Случается, что они служат скорее во вред пользователям, чем для пользы. Давайте разберёмся, когда и как тёмные темы могут помочь стать вашему веб-приложению лучше.

  • MacOS Driven Development

    Я пишу код в уютной для меня MacOS уже 6 лет. Чёткие картинки, насыщенные цвета на Retina-экране, удобные инструменты, среди которых Sketch — разрабатывать так приятно! Парадокс в том, что люди, которые пользуются продуктами, для которых я пишу код, в большинстве своём пользуются Windows. Поэтому баги, специфичные для Windows, очень легко могут пройти мимо разработчика. Чёрт с ними, с багами — крестик у попапа ведь должен быть слева! Или всё же справа?

  • Отладка CSS в боевых условиях

    Бывало ли у вас, что нужно срочно подвинуть кнопочку в интерфейсе, а ваши стили не применяются? Или когда у вас всё работает, а на конкретном мобильном устройстве вёрстка плывёт? Как дебажить CSS в таком случае? И как понять, что виноват именно CSS, а не ваш новомодный Webpack 7 со встроенным CSSMegaMinifier?

  • Идеальный доклад. Голая правда

    Что делает доклад интересным и запоминающимся? Полезная тема, харизматичный спикер, весёлые гифки на слайдах? Да, но список требований гораздо шире. Может показаться, что готовить доклады сложно. К тому же непонятно, зачем это нужно лично вам. Плюсы и минусы выступлений для карьеры и личностного роста, как подготовить тот самый, «идеальный» доклад — от опытных докладчиков и организаторов конференций и митапов.

  • Магия CSS вне Хогвартса

    «Играться со шрифтами» и двигать однотипные блоки на одинаковых страницах рано или поздно надоедает. Чтобы не погрязнуть в рутине, нужно давать себе встряску. Как? Создавать крутые демки! Ещё лучше — с попаданием на главную страницу CodePen.

  • Подготовка к выступлению. Пошаговое руководство от организаторов

    Talking to a public is not an easy thing to learn, and it takes a lot of courage and time to become experienced with and to feel comfortable on a stage. There is always a fear of failing. Is the topic right? Do your slides help you or draw too much attention? Are they informative? Does your voice sound reasonable and confident? What should you do before the event? When it's better to force yourself to finish preparations? Is it OK to make changes to your slides in 5 minutes before the talk?

  • Еще не готовил доклад? Чего ждешь?

  • Показываем картинки пользователю: подробное руководство

    Веб-разработчики постоянно работают с изображениями, будь то графика, заложенная в дизайн сайта, или фотографии, загружаемые на сайт извне. При этом одно неоптимизированное изображение может полностью убить старания разработчиков сделать сайт максимально быстрым для загрузки. Давайте попробуем найти тот самый «идеальный» способ доставки изображений пользователям, попутно автоматизировав все возможные шаги к достижению этой цели.

  • Распечатай мне курсач. На CSS

    В некоторых университетах принято смотреть не на суть работы, а на то, как качественно она оформлена по ГОСТам. Почему бы не применить всю мощь CSS Paged Media Module и больше не думать над отступами?

  • Полный Spectre уязвимостей

    Новый год в IT начался с разделения мира на «до» и «после». Кто-то бросается покупать процессоры, не подверженные Meltdown и Spectre. Кто-то утверждает, что ничего не изменилось. А кто-то слышал названия уязвимостей, но так и не разобрался, в чем их суть. Наши тайные агенты объяснят вам доступным языком, откуда «хайп» и что нужно знать фронтэнд-разработчикам, чтобы их сайты не майнили биткоины без их ведома.

  • JS Decorators — приоденьте свой код

    Во многих языках программирования есть возможность изменять поведение метода без вмешательства в его код: в C# — атрибуты, в Java — аннотации, в Python — декораторы. Появление декораторов в JavaScript было запланировано еще в стандарте ES2016, но что-то пошло не так. Какие есть реализации стандарта, как его использовать уже сейчас и зачем Тони Старку J.A.R.V.I.S. — постараемся разобраться в докладе.

  • Houdini — великий разоблачитель

    Пока JavaScript-разработчики вовсю используют Babel и полифилы для внедрения новых возможностей языка, адепты CSS вынуждены ждать поддержки полезных свойств хотя бы вечнозелеными браузерами. Но всего один «рыцарь на белом коне» может все исправить. Знакомьтесь, CSS Houdini.

Podcasts