yoksel

Бухвалова Юлия. Комментарии к проекту.

Ссылка на проект: https://yoksel.github.io/A11y-course/

Свёрстаны все элементы, добавлены состояния. Системный фокус заменён на ярко-зелёный, потому что синий системный сливается с фиолетовыми кнопками.

Мобильной версии и версии без JS нет, не успела сделать.

Изменения в дизайне при вёрстке

yoksel

.video {
  /* Get aspect ratio */
  --aspect-ratio: calc(var(--height) / var(--width));
  /* Add units to height */
  --height-with-units: calc(var(--height) * 1px);

  max-width: 100%;

  /* Get minimal of initial height
     or height calculated from window width */

yoksel

<iframe
    width="560" height="315"
    style="--width: 560; --height: 315;"
    class="video"
    ...
></iframe>

yoksel

Set custom property type

https://developer.mozilla.org/ru/docs/Web/API/CSS/registerProperty

https://www.w3.org/TR/css-properties-values-api-1/#example-2

Via JS

CSS.registerProperty({

yoksel

Форматирование

• Используем отступ в 2 пробела
• В названиях классов не используем camelCase
• Не используем в селекторах атрибуты ID, кроме крайней необходимости
• При использовании нескольких селекторов каждый переносится на следующую строку
• Перед открывающей скобкой { ставим пробел
• В правилах ставим пробел после двоеточия :, до двоеточия пробелов нет
• Закрывающую скобку } ставим на новой строке, отбиваем пробелами на один уровень с правилами

yoksel

Проекты на JavaScript

https://github.com/yoksel/shop-admin-page — админка магазина, учебный проект https://github.com/yoksel/emoji-brush — рисовалка эмоджами. Использует веб-комоненты, SVG и textPath

Проект на реакте

https://github.com/yoksel/svg-filters — конструктор SVG-фильтров

Проекты на ноде

yoksel

Команды VoiceOver вводятся нажатием клавиш Control и Option (клавиши VO)

Open the Web Item rotor: VO-U

VoiceOver: Web Commands (найти на странице Web Commands)

• VO + A — читать всё от выделенного и дальше
• VO + Shift-Down Arrow — начать взаимодействовать с элементом
• VO + Shift-Up Arrow — закончить взаимодействовать с элементом

yoksel

lsof -i -P -n | grep LISTEN

yoksel

[
  {
    "keys": ["super+shift+alt+a"],
    "command": "prompt_add_folder"
  },
]

yoksel

// ==UserScript==
// @name         Adv Screens
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.livejournal.com/*
// @match        https://www.lj-13.dev.lj.rambler.tech/*
// @grant        none
// ==/UserScript==