Заметки по WEB
(php, JavaScript, HTML, CSS и т.п.)

Меня всегда привлекали задачи, когда программирование применяется для решения необычных задач - чаще всего это какие-то соревнования в "песочнице" (например, как описанные здесь) или просто олимпиадные задачи. Самому, к сожалению, пока не довелось поучаствовать в реализации чего-то подобного, а по работе в основном занят решением более классических прикладных задач - журналы и справочники, формы ввода данных, отчёты и т.п. Поэтому, когда наткнулся на статью с заголовком: Сотворение мира за 20 минут на JavaScript, или минималистичная модель эволюции не мог её пропустить и с большим удовольствие прочитал.

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

PS Конечно, эта заметка к WEB-разработке отношения не имеет, но так как автор несмотря на первоначальное решение использовать Python, в итоге использовал JavaScript размещу её здесь.

Недавно, обсуждая на работе грядущее плановое обновление SSL-сертификатов, вспомнил, что читал про планируемое сокращение максимального срока их действия (напомню, что сейчас их выпускают на 398 дней). Так как деталей "с ходу" не вспомнил - пришлось искать эту статью, поэтому теперь решил сохранить себе. Итак:

• с 15 марта 2026 года — максимальный срок их действия будет сокращён до 200 дней;
• с 15 марта 2027 года — до 100 дней;
• с 15 марта 2029 года срок действия сертификата будет сокращён до 47 дней, а DCV — до 10 дней.

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

До 2029 года, конечно, может ещё что-то поменяться, но видимо всё же надо будет подумать об автоматизации этого процесса.

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

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

Если заинтересовало или просто хочется посмотреть - могу прислать ссылку. :-)

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

Пока разработка продвигается параллельно: я делаю WEB-версию, а Андрей полноценное приложение под Android на Java. Уже успели реализовать часть от первоначально запланированного функционала. Правда, не ту, которую планировали/обсуждали изначально, но зато в прошлую пятницу удалось в той или иной мере воспользоваться нашими разработками.

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

UPD: Добавил снимки экрана:

Так как для уточнения этого вопроса в последнее время несколько раз пришлось прибегать к документации (возможно, из-за параллельного использования нескольких языков программирования) решил сохранить себе "для памяти". Напомню, что ложноподобное (falsy) значение — значение, которое становится false в булевом контексте (при использовании приведения типов, например, в условных конструкциях или циклах).

Для JavaScript ложноподобны только:

1. Ключевое слово false.
2. Ноль (любой) - т.е. ноль типа Number (к нему также относятся 0.0, 0x0 и т.п.), отрицательный ноль типа Number (-0.0, -0x0 и т.д.), а также ноль типа BigInt (также 0x0n, здесь обратите внимание, что не может быть негативного нуля типа BigInt — отрицательный 0n равняется 0n).
3. Пустая строка - вне зависимости от типа указания ("", '', ``)
4. null — отсутствие какого-либо значения.
5. undefined — примитивное значение.
6. NaN — значение, не являющиеся числом (NotANumber).

Все остальные значения являются истинноподобными (truthy), включая любые непустые сроки, пустые и непустые массивы и объекты, а также обе бесконечности (Infinity и -Infinity)

PS Из всех объектов ложноподобным будет только document.all, так как объект считается ложноподобными тогда и только тогда, когда у него есть внутренний слот [[IsHTMLDDA]]. Этот слот есть только в объекте document.all, и его нельзя задать через JavaScript.

Прочитал статью, в которой приводились примеры, когда для получения необходимых визуальных эффектов теперь можно использовать только современные возможности HTML и CSS не прибегая к использованию необходимого ранее для реализации такого поведения JavaScript.

Для себя отметил следующие возможности:

• Поле ввода с автозаполнением (datalist)
• Текст, разворачивающийся при клике на заголовке ("Аккордеоны", details и summary)
• Модальные диалоговые окна (dialog)

PS Отмечу, что в комментариях к статье была информация о неполной поддержке этих возможностей отдельными браузерами.

Очень удивился, когда узнал какого объема/размера могут быть сейчас скрипты на JavaScript используемые на некоторых современных сайтах... Пока не открыли статью попробуйте сами предположить некоторый объем (например, в килобайтах или мегабайтах). Так, как мне кажется, читать будет интереснее...

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

Вообще, меня давно удивляет и в какой-то степени даже возмущает ситуация с непропорциональным ростом требований к "железу" со стороны ПО.

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

В статье на примерах объясняется назначение следующих заголовков:

• HTTP Strict Transport Security (HSTS) - говорит браузеру, что в течение указанного времени он не должен взаимодействовать с приложением по небезопасным протоколам
• HTTP Public Key Pinning (HPKP) - механизм, который позволяет сообщать браузеру, какие SSL-сертификаты следует ожидать при подключении серверу (неоднозначный заголовок).
• Expect-CT - сообщает браузеру, что он должен выполнить дополнительные «фоновые проверки», чтобы убедиться, что сертификат является подлинным.
• X-Frame-Options - определяет можно ли встроить ваше приложение в виде iframe на внешних веб-сайтах.
• Content Security Policy (CSP) - утилиты следующего поколения для предотвращения множества атак, от XSS (межсайтовый скриптинг) до перехвата кликов (клик-джеккинга)
• X-XSS-Protection - заменен CSP, обеспечивает аналогичный тип защиты - используется для смягчения атак XSS в старых браузерах.
• Feature policy - переименован в Permissions Policy - позволяет установить доступность конкретных функция браузера (камера, микрофон и т.п.).
• X-Content-Type-Options - регулирует возможность для браузера автоматически обнаруживать (и исправлять) тип содержимого загружаемого ресурса (опасно, когда вместо изображения загружают скрипт с "неправильным расширением).
• Cross-Origin Resource Sharing (CORS) - сообщает браузеру, что можно получать запросы из других источников.
• X-Permitted-Cross-Domain-Policies - сильно связанны с CORS, нацелены на междоменные политики для продуктов Adobe.
• Referrer-Policy - используется для смягчения проблем с конфиденциальностью, сообщая браузеру, что он должен только маскировать URL-адрес в заголовке Referer или вообще его не указывать.

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

В итоге, как теперь можно увидеть мой сайт получает отметку "A+" (при первой проверке было "F"). Также дополнительно скрыл ненужный заголовок x-powered-by, который отображал название и версию используемого на сайте ПО, и настроил кеширование с помощью Cache-Control.

PS Также по этой теме можно посмотреть ещё следующие статьи:

• Памятка и туториал по HTTP-заголовкам, связанным с безопасностью веб-приложений
• Шпаргалка для разработчика: создаём безопасное веб-приложение

Наткнулся на отличную статью, в которой на примерах подробно описывается семантическое назначение HTML-элементов: header, nav, main, section, article, aside, address. Рекомендую к прочтению, а себе "на память" сохраню только основные тезисы:

• main - основное содержимое (контент) страницы (ради чего она создавалась).
• aside - дополнительный, но тематически связанный с окружающим контент (например, статьи или дополнительные ссылки по теме).
• section - тематически сгруппированный контент (раздел страницы, смысл которого определяется обязательным заголовком, но зависит от окружения).
• article - независимая область страницы. Если оставить только её, то смысл оставшегося не теряется (в этом отличие от section)
• nav вместе с ol и ul - используется для выделения навигации. Если порядок пунктов важен, то используем ol (хлебные крошки, пангинация), если нет, то ul.
• header (и footer) - можно использовать не только для разметки "шапки" (и "подвала") всей страницы, но и для выделения соответствующих блоков внутри элементов: main, section, article, aside.
• address - контактная информация.

PS: Надо будет скорректировать вёрстку сайта.

Добавлено 14.01.2022 г.:

Прочитал ещё одну статью про использование тегов HTML5 для структурированной разметки документов. Из неё себе сохраню следующее:

1. Структурирование бывает явным ("новые" теги HTML5) и неявным (h1..h6).
2. Неявные разделы могут находиться внутри явных разделов, но не наоборот.
3. Для просмотра структуры документа удобно использовать outliner.
4. В комментариях к статье была ссылка на хорошее объяснение взаимного вложения тегов section и article.