Спикерпанк 2022

Никита Дубко, доброжелюбный бородач
Саша Шинкевич, счастливая работная

Саша

организатор
спикер
разработчик
руководитель
Google Developer Expert
Bravado

Никита

организатор
спикер
разработчик
руководитель
Google Developer Expert
Yandex

80+ докладов на двоих

Идеальный доклад. Голая правда. Никита Дубко и Александра Шинкевич

Про что поговорим?

про подготовку доклада;
про само выступление;
про лайфхаки от бывалых.

Обязательно
светить лицом?

Блог?

Org team?

Если уж
решились

Подготовка

Зачем я это делаю?

Цели

хочу пропиарить продукт;
хочу прокачать персональный бренд;
хочу поделиться знаниями;
хочу научить делать правильно;
попросили помочь.

Хочу

❤︎

Выбор темы

Что я могу рассказать?

рабочий кейс;
интересное API;
будущее;
пет-проект;
что угодно интересное.

Вы не уникальны

(в наличии проблемы)

Вы уникальны

(в решении проблемы)

Какая основная мысль доклада?

Тема и описание ✓

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

Тема и описание ✓

Тебе не нужен Bootstrap! Или нужен? Или все же не нужен?
Времена славы фреймворка Bootstrap, как и библиотеки jQuery, прошли. Мир меняется, стандарты развиваются, и появляются интрументы, которые лучше соответствуют потребностям разработчиков. Но в основе Bootstrap лежат полезные конфепции и понятии, о которых стоит знать. Я расскажу, почему подобные библиотеки полезно хоть раз в жизни пощупать руками на примере Bootstrap. А также о том, чему подобные фреймворки не научат верстальщиков, но что стыдно не применять в 2019 году.

Тема и описание ✕

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

Главред

Типограф

Подача заявки

тема доклада;
описание доклада для сайта;
описание доклада для ПК;
видео для ПК;
личные данные (имя, фамилия, компания, твиттер);
фото;
портфолио докладов.

Гайды от организаторов

Code of Conduct

Сбор материала

Куча знаний
↓
Сценарий

Notion

Логические части
↓
Материалы

Сценарий

Кто аудитория?

Сколько времени на выступление?

Какой доклад я делаю?

Доклад — личная история

Евгений Кот: Улыбаемся и машем, или зачем быть спикером?

Доклад — туториал

Make a World on Pure CSS / Юлия Миоцен

Доклад — вдохновение

Вадим Макишвили, Яндекс | 36 | FrontTalks 2014

Доклад — погружение

Картинки как коробки. Что же там внутри? - Полина Гуртовая

Структура — классика

о спикере;
план доклада;
содержание доклада;
выводы, резюме;
контакты спикера;
благодарность аудитории.

Структура — история

завязка истории;
о спикере в истории;
развитие истории;
вынесенный урок;
контакты спикера.

Структура — решение

проблема;
решение проблемы;
выводы.

Экспериментируйте

Путь героя

всё плохо
↓
хватит это терпеть
↓
борьба
↓
враг побеждён

экспозиция
↓
завязка
↓
развитие + кульминация
↓
развязка

Demystifying public speaking

1. Экспозиция

Почему я?

Захватить внимание

работаю в Booble, Yamzex, Shmeta — опыт лидеров;
постоянно практикуюсь в теме — актуальность;
являюсь «звездой» в теме — экспертиза;
имею крутой результат — глубина материала;
никто до меня не рассказывал — уникальность;
набил(а) шишки в процессе — опыт.

Продажа вакансий

2. Завязка

Конфликт

3. Развитие

Путь выхода из конфликта

баг в продакшене — починка;
недостаток знаний — погружение;
несовершенство платформы — костыли для неё;
вызов — решение.

Расскажи историю

Реши проблему

Пирамида Минто

Практика

Как применить

Эмоции

Интрига и шок

Примеры

Для базового уровня a11y достаточно знаний вёрстки.
Видео в один кадр может весить меньше кадра-картинки.
Смотрите, какое элегантное решение. Оно не работает.
Нас всех заменят роботы. Или нет.

4. Развязка

О чём был рассказ?

Побуждение к действию

5*. Контакты

Спасибо, вы котики!

Ссылка на слайды: mefody.dev/talks/speakerpunk-2022/

Twitter: @elonmusk
Telegram: t.me/neiskluchenie

Показать программному комитету

Показать коллегам

Ваши вопросы

Dungeons & Dragons

Разминаем огуречики, 5 мин

Слайды
Мультимедиа

Конкуренты за внимание

твиттер;
телеграм;
почта;
инстаграм;
тикток;
рабочий созвон;
...

8 секунд

You Now Have a Shorter Attention Span Than a Goldfish

Какие ваши
любимые доклады?

Шоу

iPhone 1 - Steve Jobs MacWorld keynote in 2007

Спикер
+
Мультимедиа
+
❤︎

В чём делать?

Где удобнее

slides.com

github.com/shower

Изучите инструмент

запись речи
дополнение к речи

Доступность

Сколько слайдов?

1 слайд

Вадим Макишвили, Яндекс | 36 | FrontTalks 2014

2500+ слайдов

New Adventures in Front-End, 2019 Edition / Виталий Фридман

Карго-культ TypeScript в украинских аутсорсерах [ru] / Илья Климов

8 секунд

Смерть через Power Point — Алексей Каптерёв

Движение на экране

Стиль

Дефолтные темы

Comic Sans

Спикерский стиль
или
Стиль под доклад

Спикерский стиль

Вадим Макеев (тема в Shower);
Роман Дворнов (Keynote);
Полина Гуртовая (рисунки от руки);
Евгений 🐈 (шрифт).

Рик и Морти

Война текстовых редакторов: редактор кода vs IDE, Александра Шинкевич

DC Comics / Batman

Как внедрить стандарты разработки / Александра Шинкевич

Алиса Льюиса Кэролла

«Алиса, пойдём во фронтенд!» / Никита Дубко

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

Стиль конференции

Тебе не нужен Bootstrap! Или нужен? Или все же не нужен?

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

Нужен ли дизайн?

Не нужен

Но поможет

Слайды на «аутсорс»

не видно

видно

«Всё познаётся
в сравнении»

Длина синего кита
достигает 33 метров

Длина синего кита
33 метра

33 метра

Звёздные войны: Пробуждение силы / Джей Джей Абрамс

Лицензии на картинки

Рисунки

Картинки как коробки. Что же там внутри? - Полина Гуртовая

😉 Эмодзи 🚀

Код?

Текстом

Только нужное

// my-paint.js
registerPaint('my-paint', class MyPaint {
    static get inputProperties() { return ['--foo']; }
    static get inputArguments() { return ['<color>']; }
    static get contextOptions() { return { alpha: true }; }

    paint(ctx, geom, properties, args) {
        // ctx - контекст для рисования, как в canvas
        // geom - размеры доступной для рисования области
        // properties - свойства, на которые реагирует paintWorklet
        // args - переданные в paintWorklet аргументы
        // Можно рисовать почти как на обычном canvas
    }
});

// my-paint.js
registerPaint('my-paint', class MyPaint {
    static get inputProperties() {
        return ['--foo'];
    }

    paint(ctx, geometry, properties, args) {
        // рисуем на canvas
    }
});