Спикерпанк 2021

Никита Дубко и Саша Шинкевич

Спикерпанк 2021

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

Саша

Никита

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

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

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

Подготовка

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

Цели

Хочу

❤︎

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

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

<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. Экспозиция

Почему я?

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

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

2. Завязка

Конфликт

3. Развитие

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

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

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

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

Интрига и шок

Примеры

4. Развязка

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

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

5*. Контакты

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

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

Twitter: @elonmusk
Telegram: t.me/neiskluchenie

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

Ваши вопросы

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

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

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

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

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

Рик и Морти

Война текстовых редакторов: редактор кода 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
    }
});

Номера слайдов

Ссылки на источники

Google Search

Опасная зона

Анимации?

Качество связи

Видео и звук

на свой страх и риск

Фоновая музыка

эмоции

Теперь я - тимлид, но почему мне так плохо?

Авторские права

А если не слайды?

@dark_mefody/status/1434123381381738497

Лайв-кодинг

GDG Minsk Web August Meetup

Видео лайв-кодинга?

Скрайбинг

@homyasusina/status/1177964321931976704
@homyasusina/status/1365977463550017539

Репетиции

нужны!

С кем?

Назначить заранее

Есть дедлайн

Онлайн-прогон
=
онлайн-выступление

Отправить видео ПК

Картинка

веб-камера ноутбука

+ источник света впереди

хорошая камера

+ источник света

– свет в комнате

+ второй источник света

+ цветная подсветка

+ фильтр

2+ источника света

Варианты света для съемки видео в домашних условиях
Aputure MC

Веб-камера?

Стоя или сидя?

Интернет

16:9

Звук

Не встроенный

Meteor Mic
AT2005USB

Гарнитура

Руководство для записи подкаста

Приготовления

Фолбек на всё

Работа с браузером

Видео

Интернет

Мобильный интернет

Аудио в видео

Озвучка видео

Заминка

Шутка в кармане

Слайды — проще

⇧ + ⌘ + F

F11

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

Выступление

Перед выступлением

Настроение

❤︎

Успокоиться
или взбодриться?

Медитации

Зарядка

Танцы

Шутки
перед выступлением

Я — молодец

Боятся все

Приведите друзей на выступление

Приготовьте домашних

Договориться с соседями

Детей
и домашних животных
увезти из города

Водичка

Туалет

Нотификации

Тестовый запуск

ATEM Mini

Позвонить организатору

Голос и артикуляция

Размять рот

(губы, язык, щёки)

Распевка для быстрого разогрева голоса

HarmonyVoiceNN

Скороговорки

Тёплый чай с маслом

Дыхание

Пранаяма

Внешний вид

По одёжке встречают

Опрятно

Косметика

Косметика

(и мужчинам тоже)

Под целевую аудиторию

Во время выступления

Улыбка

❤︎

Уверенный старт

Впечатление

Запоминающееся начало

Громко и чётко

Дыхание

Вовлечение аудитории

Водичка

Не тараторьте

Жестикулируйте

В меру

Открытые позы и жесты

iPhone 1 - Steve Jobs MacWorld keynote in 2007

Смотрите в камеру

Два монитора

Монитор + планшет

Заметки в онлайне
не видно

Телесуфлёр

Выделять мышкой

Выделять лазером

Большой список

Кликер

Logitech Spotlight

Читать текст

Следить за временем

Ассистент

Шутки

Q&A

Как ответить?

@yayalexisgay/status/1356284504718135297

Вы не можете всё знать

Задающему вопрос
тоже страшно

Оглаф

Советы бывалых

Не планируйте ничего
после выступления

Шарьте слайды

Чатик на телефоне

Отложенные сообщения
в Telegram

Видео доклада
вместо доклада?

Ретроспектива

❤︎ осталось?

Доклад можно повторять

Митап
=
Подготовка к конференции

Коллеги
=
Подготовка к митапу

Подсматривайте

Поддерживайте

You are breathtaking!

Слайды: mefody.dev/talks/speakerpunk-2021/

Саша: @neesoglasnaja
Никита: @dark_mefody