Проблема широкоформатных мониторов.

У меня широкоформатный монитор с пропорциями 21:9, который занимает абсолютно всё пространство. Места для второго монитора просто нет, а он мне очень нужен.

Запись экрана в стандартном формате 16:9 не самая простая задача. Постоянно приходится настраивать окна под пропорции, привычные для YouTube. Эту проблему я решил с помощью программы PowerToys и FancyZones.

Настройка OBS тоже не самая дружелюбная для меня в этом плане. До сих пор разбираюсь, как всё настроить и получить конечный результат в разрешении 1080p.

В общем, после записи около 10 роликов, я осознал, что с этим нужно что-то делать. Первый вариант, который мне предложил Google, это использовать карту видеозахвата. Подключаем её к выходу из видеокарты, вставляем в карту видеозахвата. В Windows указываем новому "виртуальному" монитору заветные 1920*1080. Записываем в OBS весь монитор. Однако, это решение оказалось для меня дорогим.

Продолжил поиски и наткнулся на эмулятор монитора с использованием HDMI-затычки. Он выглядит как небольшая флешка и стоит от 200 до 400 рублей. Описание меня смутило: "для майнинга", но я решил, что 200 рублей не жалко потратить, если не сработает.

В итоге всё сработало. Берешь HDMI-затычку, вставляешь в видеокарту (даже для интегрированной графики), появляется "виртуальный монитор". В Windows настраиваешь его на 1920*1080. Переносишь все программы для записи в виртуальный монитор в полноэкранный режим. В OBS указываешь запись всего экрана.

Stylelint 16 уже вот-вот почти-почти готов

- Все устаревшие правила из 15 версии стайллинта (список) больше не будут применяться. Рекомендуется удалить эти правила из конфигурационных файлов.
- Поддержка Node.js версий 14 и 16 прекращена. Теперь минимально поддерживаемая версия - 18.12.0.
- Изменения в поддержке расширений файлов: для ESM изменена с .js на .mjs, для CommonJS - с .js на .cjs.
- Изменился формат объекта, возвращаемого Promise при вызове stylelint.lint(). Теперь есть новые свойства: report (отформатированные проблемы) и code (автоисправленный код). Устаревшее свойство output больше не рекомендуется использовать.
- Изменения в объектах форматеров и правил: теперь объекты` stylelint.formatters` и stylelint.rules в Node.js API возвращают функции Promise. Рекомендуется использовать await при доступе к этим объектам.
- Вывод проблем теперь осуществляется в stderr вместо stdout для CLI. При использовании опций --fix и --stdin, исправленный код будет выводиться в stdout, а проблемы в stderr.
- Изменение кода выхода для флага ошибок: код выхода для флага ошибок изменен с 2 на 64, чтобы 2 использовался только для проблем линтинга. Это изменение позволяет различать ошибки флага и проблемы линтинга.

Решили значится мы в HTML Academy вернуть старые добрые времена.
Теперь любой студент профессии сможет повторно пройти любой курс профессии абсолютно бесплатно, но без наставника.

Обновил editorconfig-cli до версии 2.0.8, в которой обновил все зависимости и отказался от манкипатчинга Object.prototype[Symbol.iterator].

Библиотека editorconfig-cli предназначена для работы с файлами конфигурации .editorconfig из командной строки.

В спецификации Selectors Level 4 есть два псевдокласса: :user-valid и :user-invalid, которые позволяют улучшить пользовательский опыт при работе с формами.

Немного истории
В CSS уже есть похожие псевдоклассы :valid и :invalid, у которых есть одна важная деталь: они срабатывают мгновенно, что не всегда уместно. Например, если пользователь вводит номер телефона, то псевдокласс :invalid сработает сразу, как только пользователь введет первую цифру, а не дождется ввода всех 10 цифр. Поле начнет уведомлять пользователя об ошибке, которую пользователь ещё не успел совершить.

Как работают псевдоклассы `:user-valid` и `:user-invalid`
Эти псевдоклассы используются для представления элемента с правильным или неправильным вводом соответственно, но только после значительного взаимодействия пользователя с ним.

Что такое "после значительного взаимодействия"? Такое взаимодействие остается на усмотрение браузера, но можно сказать, что это означает, что псевдоклассы сработают только после того, как пользователь покинет поле ввода. Например, если пользователь вводит номер телефона, то псевдокласс :user-invalid сработает только после того, как пользователь покинет поле ввода, а не сразу, как только пользователь введет первую цифру.

Применение
Можно считать, что уже можно использовать :user-valid и :user-invalid как лучшую возможность сообщить об ошибке, так как поддержка в браузерах уже полная.

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

Что ещё
Вообще, тема валидации очень сложная, и принятие решения, когда подсказывать пользователю об ошибке, а когда нет, не так просто. В каких-то моментах лучше это сделать мгновенно с понятным текстом ошибки, а в каких-то лучше отложить до значительного взаимодействия пользователя с полем ввода. Но это уже совсем другая история.
Знания того как работают :user-valid и `:user-invalid`позволят вам улучшить UX, и более точно контролировать ситуацию над валидацией полей.

Гляньте небольшой пример работы этих псевдоклассов - https://codepen.io/expa/pen/KKJyZjg

В HTML5 теперь можно добавлять элемент <hr> в <select> для визуального разбиения информации.

Content model:
  Zero or more option, optgroup, hr, and script-supporting elements.

Работает в Chrome 119, Safari 17

Не отключайте кнопки
Ну либо делайте это крайне осторожно.

Иногда делают так, что добавляют атрибут disabled для <button>, когда пытаются отключить возможность повторной отправки формы.
Как это работает для пользователя, который "табается" по форме: пользователь заполняет первое поле формы, затем второе, переходит к кнопке "Отправить", нажимает "Enter", и его фокус с кнопки улетает прямо в ад. Не надо так!

Современный CSS

Что такое "современный" CSS? Какие спеки, или какие CSS-свойства должен знать современный верстальщик, чтобы считаться современным?
Читая в резюме требование "Знание CSS3" - это что конкретно значит? Если раньше нам всем было хиханьки да хаханьки над таким требованием, то теперь это действительно определённый список.

И так к сути: W3C решил ввести эпохи в виде списка спецификаций. Каждая такая эпоха, или же конкретный список спецификаций теперь будет группироваться под именами "CSS3", "CSS4", "CSS5", "CSSnext".
С одной стороны это замечатально - теперь у нас есть конкретный список, который должен знать любой уважающий себя специалист именующий себя "современный верстальщик".

С другой стороны, не применяя ric, rex, rlh из CSS4 в своих проектах не делает из меня несовременного верстальщика или же эту спеку можно игнорировать? Я бы игнорировал как необязательную.

Ну а вы пока посмотрите эту замечательную доску - https://github.com/orgs/CSS-Next/projects/1/views/2, которая ведёт нас к определению современного CSS.

О чём-то таком я мечтал для HTML3 в HTML Academy.

Я ничего не успеваю

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

Мы все знакомы с бесконечным списком задач и с постоянным ощущением, что мы ничего не успеваем. Но давайте зададим себе вопрос: а правда ли мы не успеваем, или это всего лишь иллюзия?

Часто, пытаясь сделать всё сразу, мы попадаем в ловушку постоянной занятости. Представьте, что если взять на вооружение принцип "1-2 крупные задачи, остальное - по остаточному принципу".

Выберите 1-2 ключевые задачи, которые действительно имеют значение для вас. Посвятите им основное внимание и ресурсы. Когда они будут выполнены, вы можете себя с уверенностью называть успешным человеком!

Остальные дела? Делайте их по остаточному принципу. Если у вас осталось свободное время после основных задач, уделите его второстепенным, но не менее важным вопросам. Это позволит вам избежать ощущения, что ничего не успеваете.

Мелкие задачи имеет свойство отвлекать и часто являются абсолютно не важными. Не позволяйте им отвлекать вас от главного.

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

Сборка наших курсов

Однажды я решил, что сборщик для проектов в курсе HTML2 сделать публичным, чтобы у всех была возможность поучаствовать в развитии проекта. С тех пор сборка получила 127 коммитов и это были прекрасные коммиты. Мне нравится то, что получилось сейчас.

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

Посмотрите на полный список последних изменений - https://github.com/htmlacademy/html2-basic-template/releases/tag/v2.0.2, он просто огромный, хотя сборке проекта не первый год.. Есть куда расти.

Приглашаю всех поучаствовать в жизни сборки. Необязательно знать JS и писать крутой код. Можно исправить опечатку, доуточнить фразу или просто поделиться своей идеей в issue. Предложение по улучшению можно сделать как обычно с помощью форка и создания пулреквеста.

Сон

Сон является ключевой частью нашей жизни!

Сон – это не просто перерыв между будильниками. Это время восстановления и обновления, когда наше тело и разум готовятся к новому дню.

Важно помнить о фазах сна. Мы переживаем несколько циклов в ночь, включая фазы REM (быстрого глазного движения) и глубокого сна. Глубокая фаза - это своего рода "ремонтный цех" для нашего организма.

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

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

Помните, что сон - это не роскошь, а неотъемлемая часть заботы о себе. Позвольте своему телу и разуму погрузиться в мир сновидений, чтобы проснуться обновленными и готовыми к новым вершинам!

Препроцессоры

Отказались от использования препроцессора Less на курсе HTML2. Ранее студентам предоставлялся выбор между препроцессорами SASS и Less.

Причин отказа было несколько:
- Поддержка препроцессора охватывала множество аспектов: стартовую сборку, материалы, демонстрации, скринкасты. Внесение изменений для одного препроцессора затрагивало другой. Это требовало вдвое больше времени, чем работа с одним препроцессором.
- Отличия в препроцессорах: несмотря на схожесть препроцессоров, существовали нюансы в их применении. Например, выражение 1 / -1 в гридах вело себя по-разному в каждом препроцессоре, что требовало учета при разработке программы.
- Рыночные требования: чаще всего предпочтение отдается SASS. Игнорирование такого частого выбора было невозможным. Тем не менее я считаю, что освоив один препроцессор, второй уже не представляет проблемы. Следует добавить, что некоторые крупные компании успешно используют Less.
- Отслеживание обновлений: CSS развивается на высоких темпах, и необходимо следить за тем, успевают ли препроцессоры за этим развитием. Для меня до сих пор остается загадкой, как была решена проблема с CSS-нестингом в препроцессоре. В любом случае, приходится уделять время отслеживанию обновлений, чтобы понимать, в каком направлении движется препроцессор, и соответствует ли он нашим потребностям.
- Продолжительность поддержки и активность сообщества: рассмотрены данные о продолжительности поддержки каждого препроцессора, а также активность и ответственность сообщества разработчиков на форумах и в социальных сетях. Например, по какому препроцессору чаще всего задают вопросы на различных форумах и какие чаще всего получают ответы с правильным решением.

Бэклоги

В комментариях упомянул про раздутые бэклоги. Бэклоги - это такое хранилище задач, которые должны быть выполнены в будущем. Обычно бэклоги переполнены из-за нехватки ресурсов. В компании работает сотрудник, который выполняет 10 задач в неделю, а новых задач в неделю появляется 20 штук. Так и возникают бэклоги. В каждой компании проблема переполненности решается либо уже готовыми подходами, либо придумывают все сами с нуля.

Я поделюсь, как моя команда работает с бэклогом. Бэклог для нас — это святыня, которую нужно холить и лелеять. Бэклог нужно постоянно поддерживать и держать в чистоте.

Как конкретно мы работаем с бэклогом:
- Все задачи изначально содержатся в бэклоге.
- Каждую неделю бэклог полностью отсматривается с нуля.
- Все задачи имеют приоритет: важная, неважная, делать как можно быстрее.
- У каждой задачи есть теги: раздел, тип материала и другие, по которым в дальнейшем можно сортировать список задач.
- В бэклоге чистота: нет задач, которые никогда не будут делаться.

При составлении недельного спринта уже не надо думать, так как всё необходимое уже сделано в самом бэклоге. Берем приоритетные важнейшие задачи. Остальные, менее важные, ждут своей очереди.

Тут ещё можно добавить, что правильного подхода к работе - нет. Если только подходящий вашей команде. Даже в HTML Academy у каждой команды свой подход.

Синий свет, излучаемый мониторами

Однажды декабрьским холодным вечером, когда уже было давно темно, я чувствовал дикую усталость и утомление. Глаза болели от вечного смотрения в экраны. Пошел к доктору. Он ничего хорошего мне не сказал. Доктор сказал много всякого, что теперь нельзя и можно делать, но этот список был настолько бесконечным, что не знал, за что взяться. По итогу, все хорошо.

Одним из многочисленных способов уменьшения утомления стала покупка очков. Специальных очков! Эти очки имеют фильтр синего цвета. При носке очков всё начинает желтить. Тогда-то я и познакомился с синим спектром, который так активно излучают наши дисплеи.

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

Интересная статья на эту тему: https://habr.com/ru/companies/ua-hosting/articles/481740/

Только первый пункт, носка специальных очков, хорошо повлияло на усталость моих глаз. Мне стало гораздо лучше. Может конечно плацебо =)

Другим способом уменьшения влияния синего света стало настройка монитора. Хороший монитор имеет функцию "Low Blue Light", которая регулирует интенсивность синего цвета.

Это конечно не единственное, что я сделал, чтобы уменьшить усталость глаз, но об этом расскажу в следующих постах. Берегите здоровье!

Создал короткую памятку-шпаргалку про URL. Эти знания URI схемы дают способность точно определять и взаимодействовать с ресурсами, что полезно при разработке веб-сайтов, работе с API, улучшении SEO.

https://gist.github.com/nikolai-shabalin/33044ad95bfb60fee55235fadf1172ec

Ещё один сценарий использования :has()

если вы пропустили, то :has() позволяет выбирать элементы содержащие что-то нужное. Например, a:has(img) выбирает все `<a>` у которых внутри есть` <img>`

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

Раньше, мы бы руками вешали класс-модификатор .article--wide и молили бэкендеров добавлять этот класс, а теперь можно обойтись современным CSS5.

.grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

article:has(img) {
  grid-column: span 2;
  grid-row: span 2;
}

Посмотреть пример можно на кодпене - https://codepen.io/expa/pen/dyadBvB

Этого не могло не случиться.

Все мы постоянно создаем аккордеоны, но не используем нативный details/summary, потому что все элементы открываются, не давая возможности открывать только один элемент. Однако такое поведение скоро добавят.

HTML5 добавляет атрибут name к элементу <details>.

Content attributes:
  Global attributes
  name — Name of group of mutually-exclusive details elements
  open — Whether the details are visible

При использовании этого атрибута несколько элементов <details> с одинаковыми именами образуют группу. Одновременно может быть открыто не более одного элемента в группе.

Пример:

<details name="name">
  <summary>Как меня зовут?</summary>
  <p>Коля</p>
</details>
<details name="name">
  <summary>Какая у меня фамилия?</summary>
  <p>Шабалин</p>
</details>

Теперь, если открыт первый <details>, при открытии второго первый закроется.

Новая возможность позволит разработчикам интерфейсов перейти на нативный details/summary, что сделает пользовательский опыт более последовательным и в целом более качественным в ряде областей:
- Сочетания клавиш и работа с фокусом;
- Поддержка вспомогательных технологий через ARIA;
- Интеграция с функциями браузера, такими как поиск на странице.