WAI-ARIA Authoring Practices перенесли сюда и обновили дизайн - не теряйте!

#frontend #accessibility

🎥 Пятничное чтиво

Сегодня не чтиво, а скорее смотриво. Приближаются выходные, самое время для сериалов, но коротких, чтобы успеть досмотреть и не отвлекаться в течении рабочей недели.

Пару месяцев назад посмотрел сериал Выбывшая. Рекомендую посмотреть, чтобы понять, как начинаются стартапы, и на что приходится идти чтобы они не потонули. Правда в этом случае, основатели зашли слишком далеко. Фильм основан на реальных событиях.

#fridayreading

Это будет моя самая короткая статья.

Когда-то я был молод и зелен и решал проблемы именно так, как их решают джуны. Алгоритм такой:

1. Узнать о проблеме
2. Локализовать проблему
3. Загуглить проблему и решение
4. Пофиксить проблему

Например: эксель-файл содержит ошибку, и поэтому не может быть обработан. Я открывал файл, редактировал проблемную строчку, закрывал файл. Проблема решена.

Или другой пример: не отработал скрипт из-за ошибки в коде. Чиню ошибку, скрипт начинает работать.

Прошло 10 лет... Алгоритм претерпел изменения:

1. Узнать о проблеме
2. Локализовать проблему
3. Загуглить проблему и посмотреть много решений
4. Понять, почему это произошло
5. Понять, что нужно сделать, чтобы это не произошло снова
6. Понять, что ещё затронуто проблемой
7. Понять, где ещё потенциально могут возникнуть похожие проблемы
8. Пофиксить проблему
9. В зависимости от количества необходимых усилий, пофиксить всё сопутствующее
10. Рассказать пацанам в слаке про свой фейл (== поделиться опытом)

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

Или другой пример: не отработал скрипт из-за ошибки в коде. Разбираюсь, кто написал скрипт, почему писал ручками вместо того, чтобы вызвать какую-то команду для настройки и деплоя, где ещё подобные ошибки могут быть (и в этом проекте, и в проектах других клиентов), чиню и делаю всё возможное, чтобы это не произошло опять.

К чему всё это
Пожалуйста, не решайте конкретную проблему. Это никогда не работает. Оно сломается снова.

Решайте класс проблем. Выходите за рамки проблемы, ищите похожие, ищите связанные. Будьте ответственными и любопытными.

Иначе я так и буду находить XSS в тех же местах, о которых писал ранее.

https://www.youtube.com/watch?v=kD_t1HkK21Y

​​Интеграция Notion и Алисы 💥

В одном из предыдущих постов я писал, как настроить интеграцию между Notion и Apple Shortcuts. Сегодня (дабы поддержать отечественного производителя) расскажу об интеграции Notion и Алисы.

Настраивается всё очень просто — инструкцию можете найти здесь. Если кратко, то процесс интеграции выглядит следующим образом:

- Создаёте новую интеграцию тут и копируете токен
- Копируете идентификатор страницы или базы данных
- Отправляете всё в навык и всё готово

Навык отлично подходит для добавления дел в инбокс. Если вы (как и я) ведёте список дел в базе данных, то при конфигурации укажите её идентификатор, тогда навык будет добавлять новые строки. Если вы укажите идентификатор страницы, то навык будет добавлять новую запись в to-do list.

Если вы хотите поучаствовать в разработке навыка, то вот здесь найдёте исходники навыка. Если у вас есть какие-то предложения по улучшению навыка вступайте вот в этот чат.

#planning #notion #timemanagement #алиса

Обязанности, полномочия, вознаграждение

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

Вот вроде бы очередная очевидная вещь, но если посмотреть по сторонам, повспоминать свой опыт, поузнавать чужой, то можно увидеть, что много где не очень так, или даже совсем не так.

Обязанности
Адизес говорит, что каждый человек должен иметь конкретные и понятные обязанности, чтобы точно знать, что он должен делать, что не должен, где все зависит от него, а где другой человек подхватит.
На практике же бывает, что обязанности могут расплываться со временем. Сегодня Вася делает А, завтра понадобится еще и Б. Сейчас попробуем Васю нагрузить, если будет тащить и не сопротивляться, то теперь и Б – его обязанность. А послезавтра мы даже не будем явно это проговаривать, но понадеемся, что Вася еще и В начнет делать.

Почему? Просто потому что оно где-то рядом, а если Вася уже А и Б делает, то, наверное, и В должен.

В результате ни Вася, ни его товарищи не понимают, кто точно за это В отвечает, а что делать, если Г появится, а почему вообще всё так изменилось? Если это всё явно не проговаривать и не фиксировать, то получится одновременно и слишком много «якобы ответственных» и слишком мало «действительно ответственных».

Полномочия
Ну это прям классика тимлидского жанра и руководителей среднего и низкого уровней.
В типичном случае тебе говорят: «Ты теперь ответственен за процессы, внутреннее устройство и результаты команды». А где-то внизу мелким шрифтом приписка, что фондом оплаты труда ты не владеешь никак, инициировать найм, или увольнение ты не можешь, а весь твой арсенал управления командой строится либо на хорошем профессиональном авторитете, либо как Таракан, Таракан, Тараканище – «он рычит, он кричит, и усами шевелит».

Надо ли объяснять, насколько человек принимает ответственность за то, куда приедет машина, если ему не дали педали и руль?

Вознаграждение
Вознаграждение очень тонкая и дискуссионная тема. Хотел даже написать отдельный пост про плюсы и минусы премий, например. Ну может когда-нибудь и напишу.
А сейчас по теме поста общая идея такая: человек должен понимать, что за труды получит адекватное вознаграждение. «Адекватное» – грубый и упрощенные аналог слова «соразмерное». Если Вася работает с 9 до 6, а Петя с 8 до 20, да еще и в субботу выходит, чтобы выполнить пятилетку за 3 года, но при этом у них одинаковый оклад, то как скоро Петя демотивируется, перестанет выдавать высокий результат, да еще и обидится на всю компанию?

То же самое касается любителей сотрудников с «горящими глазами». Вполне справедливое желание мечтать о таких. Любой каприз за ваши деньги. Только если окажется, что деньги платят без какой-то понятной мотивационной системы, то глупо будет удивляться, что глаза так и не загорелись. А если у кого и загорелись, то со временем потухли.

Итог
На мой взгляд, комбо из понятных обязанностей, необходимых полномочий и адекватного вознаграждения – хорошая система для построения эффективной командной работы.

Ну и в целом хороший повод задуматься: а так ли у вас? А чего вам не хватает? А почему этого не хватает? А что вам мешает это сделать?

Новое свойство Статус в Notion

По многочисленным просьбам Notion добавил новое свойство Status. У него много преимуществ, почитать о них можно вот здесь, в официальной документации Notion, если больше нравится видео формат - то посмотреть можно здесь.

Для своей системы планирования я выделяю 2 главных преимущества:

1. У статуса, есть значение по-умолчанию. Больше не будет задач, у которых пустой статус 🎉
2. Можно легко мигрировать с поля Select, которое часто использовалось в качестве поля Status. Достаточно просто изменить тип поля на Status и он автоматически конвертирует все значения. Ни фильтры, ни доски, после конвертации не пострадают.

Пример конвертации селекта в статус в комментариях.

#notion

Help pick a syntax for CSS nesting - Chrome Developers
https://developer.chrome.com/blog/help-css-nesting/

XSS в React

Одним из самых больших преимуществ реакта является его безопасный дизайн, который предотвращает появление большинства XSS (Cross-Site-Scripting) уязвимостей.

Может показаться что, если вы используете реакт, то вы в безопасности, ведь:
● React по-умолчанию экранирует текст, перед тем как его отрендерить
● dangerouslySetInnerHTML не позволяет рендерить тэг script и просто удаляет его

Однако это не так. В реакт всё ещё существуют способы эксплуатации XSS уязвимостей.

1️⃣ JavaScript URL - href аттрибут
В реакте всё ещё возможно использовать javascript: схему вместо http: и https: для эксплуатации XSS. Например, если приложение позволяет вводить URL, то пользователь может ввести следующий адрес javascript:alert('XSS') . В таком случае указанный javascript код будет выполнен, когда пользователь попытается перейти по ссылке. Поэтому очень важно валидировать полученный url.

2️⃣ dangerouslySetInnerHTML
В данном случае имя свойства говорит само за себя. Несмотря на то, что оно не позволяет рендерить тэг script, есть множество иных способов эксплуатации XSS с помощью этого поля. Один из самых простых примеров - использование тэга img вместе с onerror. Больше примеров можно найти здесь. Поэтому свойство dangerouslySetInnerHTML должно использоваться в связке с библиотекой DOMPurify для предотвращения XSS.

3️⃣ Native API
Если по каким-то причинам, вам необходимо использовать нативный API браузера, то в данном случае важно быть в двойне осторожным, ведь тут реакт уже не поможет:
● Постарайтесь использовать innerText вместо innerHTML
● Вы все также можете использовать библиотеку DOMPurify

Чтобы подробнее ознакомиться с предотвращением XSS уязвимостей в React приложении советую прочитать следующий цикл статей:
● Preventing XSS in React (Part 1): Data binding and URLs
● Preventing XSS in React (Part 2): dangerouslySetInnerHTML
● Preventing XSS in React (Part 3): escape hatches and component parsers

#xss #react #security #frontend

📖 Пятничное чтиво

Пятничное чтиво с небольшим опазданием. Время от времени пишу о том, как я использую Notion. Сегодня решил порекомендовать статью о появлении любимого сервиса.

История успеха Notion: из конструктора сайтов в универсальную базу знаний

#fridayreading #notion

🧼 Экранирование и санитайзинг

Для предотвращения XSS существует 2 техники:

Экранирование (Escaping) - замена опасных символов, их безопасными аналогами. Например “>” будет заменён на "&gt;", “<” — "&lt;". Это необходимо, так как символы “<”, “>” в HTML имеют особое значение - они определяют начало и конец html-тэга.

Санитайзинг (Sanitization) - удаление вредоносного текста в строке. Например, удаление тэга script - “Hello <script>world()</script>” ⇒ “Hello".

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

Почему?
Цель санитайзинга - удалить лишь опасный текст — это javascript-код, который может быть выполнен в браузере пользователя. При этом тэги <b>, <img>, <p> не несут в себе никакой опасности и они не всегда должны быть удалены из строки. Но, если мы будем использовать санитайзинг вместо экранирования, данные тэги могут сломать разметку нашего приложения.

Ещё по теме:
- Экранирование (или что нужно знать для работы с текстом в тексте)
- Preventing XSS in React (Part 2): dangerouslySetInnerHTML


#xss #security #frontend

Реализация Completed Date для задач в Notion

Последний год я использую Notion для ведения задач и проектов. Иногда полезно оглянуться и посмотреть, чем я занимался последний месяц или в четверг прошлой недели.

Первое, что приходит в голову добавить поле Completed At и выставлять его вручную при завершении задачи, но удобства в этом мало. Никаких готовых решений, типа вэбхука, который будет вызываться при завершении задачи и выставлять текущую дату я не нашёл.

К счастью у Notion есть публичный API, который можно использовать для этих целей. Алгоритм следующий:
- Получить все задачи изменённые сегодня и с пустым полем Completed At
- Среди полученных задач выбрать те, что в списке Done
- Выставить значение Modified At в поле Completed At

Скрипт, реализующий этот алгоритм, запускается каждый час с помощью GitHub Actions. Теперь вы можете просто добавить новое представление Done для вашей таблицы задач.

Исходники скрипта, можно найти здесь в репозитории на GitHub.

#notion

​​Диаграммы - Mermaid

Хорошо нарисованная диаграмма может объяснить концепцию гораздо лучше текста, к тому же диаграмму гораздо легче понять, ведь вам не нужно ничего визуализировать у себя в голове пока вы читаете текст.
Особенно часто приходится рисовать диаграммы при написании документации к коду, например, когда необходимо нарисовать архитектуру проекта или его части.
Для создания диаграмм очень удобно использовать Mermaid. Синтаксис выглядит следующим образом:

graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

К тому же Mermaid поддерживается:
- GitHub
- GitLab
- Notion

Таким образом, вы можете хранить ваши диаграммы прямо в Markdown разметке. Просто нарисуйте вашу диаграмму в Mermaid Live Editor и скопируйте код в вашу документацию. Больше не нужно хранить диаграммы в виде картинок и искать исходники каждый раз, когда необходимо внести правки! Все ваши диаграммы — просто код.

#notion #documentation #github #gitlab

📖Пятничное чтиво

Я купил книгу Getting Things Done (GTD) около 3 лет назад и только в этом году у меня дошли руки, чтобы прочесть её. Вчера наткнулся на статью GTD за 15 минут: прагматическое руководство. Неплохо подходит, не только чтобы освежить всё это в памяти, но и как краткий экскурс в GTD. Поэтому рекомендую к прочтению.

Основные моменты:

- GTD - это методика организации и отслеживания задач и проектов
- Цель GTD — сделать так, чтобы человек полностью доверял бы системе сбора задач, идей и проектов
- Техника GTD основана на ведении списков:
- Входящие (Инбокс)
- Следующие действия
- Список ожидания
- Проекты
- Когда-нибудь/может быть
- Основная цель инбокса — разгрузить мозг. Просто записывайте все мысли, задачи, проекты, которые приходят вам в голову в инбокс.
- Инбокс необходимо обрабатывать регулярно.
- Определение следующего действия, которое должно быть физическим, видимым действием, приближающим проект к его цели — самое важное «правило» GTD.
- Если вы делегировали задачу другому человеку, если вы отправили email и ждёте ответа — внесите это в “Список Ожидания”
- Проект — это любая цель, для достижения которой нужно выполнить более одного действия
- Контексты действий — это «теги», которыми снабжают элементы в списках Следующие действия. Они представляют собой сведения о том, где может быть выполнено то или иное действие, или о том, что именно нужно для его выполнения.
- Еженедельный обзор — актуализация списков следующих действий и проектов. Что-то нужно перенести из списка Когда-нибудь/Может быть в список следующих действий, что-то необходимо удалить совсем, потому что это больше не актуально.

#fridayreading #gtd #planning

Как не выносить мозг коллегам на выходных

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

В таких ситуациях лучше отложить на понедельник. В идеале — написать письмом. Если не терпится — написать в Телеграм и не отправлять прямо сейчас, а зашедулить сообщение: зажать кнопку отправки и выбрать дату-время.

📖Пятничное чтиво - Преемник

Наконец-то в отпуске смог дочитать книгу “Преемник”, которую заказал ещё в начале года.

Удивительно, как жизнь одного человека может описать судьбу страны последних 30 лет. Книга проводит нас по всем основным событиям, которые случились после распада СССР, и описывает события, которые произошли уже в современной России:
- Путч
- Чеченские войны
- Дефолт
- Норд Ост
- События на Болотной площади
- и так далее

Прочитав книгу, можно знать:
- На какие сделки и компромиссы нужно идти в политической борьбе
- Почему решения в нашей стране принимаются именно так, как они сейчас принимаются
- Как случилось так, что вся опозиция либо “сидит” либо находится за границей

Все события описываются так, что ощущение что ты сам находишься в эпицентре событий.

#fridayreading #politics #book

Система личного планирования в Notion. Эпизод 1 — Инбокс

Наконец-то, спустя пару тройку месяцев, я смог заставить себя сесть и дописать статью о том, как я пользуюсь Notion. Пока опубликовал лишь только первую часть, на следующей неделе должен закончить и вторую.

Было бы круто, если бы вы поделились, какими программами и методологиями вы пользуетесь для ведения Инбокса и Системы планирования в целом.

#notion #gtd #planning

Система личного планирования в Notion. Эпизод 2 — Управление проектами

В начале недели вышла первая часть статьи, где я рассказал о Инбоксе и о различных способах его настройки.

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

В общем, читаем, ставим лайки, подписываемся на канал 😃.

#notion #gtd #planning #PARA

📖Пятничное чтиво

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

- Управление проектами – управление людьми
- Как поймать «поток», и как сделать так, чтобы он не сорвался

#fridayreading #timemanagement

📖Пятничное чтиво - Compound Components

Сегодня советы для React разработчиков. Если вы не знаете, что делать со сложными компонентами, пишите сложные рендеры и используете кучу вложенных тернарников, то рекомендую ознакомиться с подходом Compound Components:

👉 Александр Дунай (Альфа-Банк) — Улучшаем качество кода React-приложения с помощью Compound Components
👉 Kent C. Dodds - React Hooks: Compound Components

#fridayreading #react

​​💳 Карта UnionPay в 2022

Последний отпуск я ездил в Турцию, поэтому, чтобы чувствовать себя белым человеком и платить картой, решил выпустить карту Union Pay Русского Стандарта.

Основные моменты:
- Карта не именная, поэтому можно сделать за один день
- Обслуживание 3000 в год
- Двойная конвертация - Лиры ⇒ Юани ⇒ Рубли. Поэтому курс может быть немного хуже официального. Но гораздо выгоднее чем покупать доллары и рубли в Российских банках. Например, если курс лиры - 3.2, то у вам посчитается примерно по курсу 3.4-3.5 рубля за лиру
- Комиссия за снятие в банкоматах - 2%, минимум 100 рублей
- Если вы пытаетесь использовать карту за границей и она не работает, проверьте, возможно данный банк не поддерживает карты UnionPay. Так в Черногории нет ни одного банка, который бы работал с данной платёжной системой, а в Азербайджане с UnionPay работает всего один банк.
- При снятии наличных в банкомате может отображаться неверная сумма, списанная в рублях. После того как операция будет подтверждена, в приложении отобразится корректная сумма. Это наглядно можно увидеть на картинке.

Турция:
- Карта работает буквально везде
- Не всегда проходит оплата в долларах, оплата в лирах работает стабильно
- Не всегда работает бесконтактная оплата, чип работает стабильно
- В банкоматах можно снимать как лиры, так доллары и евро

Сербия:
- Всё почти также хорошо, как и в Турции. Большинство банков работает с UnionPay. Но не все, я не смог снять наличку в местном Райффайзен банке.
- В магазинах обычно установлено два терминала. Если оплата на первом не проходит — уточняют “UnionPay?” и просят оплатить на втором терминале. Кассир в Заре сказала, что сейчас многие русские используют UnionPay.
- Лучше иметь с собой наличные, в некоторых магазинах и кафе не получится оплатить через UnionPay.

Ещё о UnionPay:
- Гайд в свободный мир - UnionPay
- Опросник по работе карт UnionPay выпущенных банками РФ (СНГ)

📖 Пятничное чтиво - Turmoil in Twitter

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

Несколько моментов из статьи:

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

Статье уже 3 недели. Если вы знаете продолжение истории было бы круто, если бы вы рассказали в комментариях. Ссылки на источники приветствуются 👍.

#fridayreading