Пользователи Angie получили возможность мониторить состояния веб-сервера через визуальную консоль

С новыми версиями у пользователей Angie появилось сразу несколько возможностей организовать мониторинг состояния веб-сервера. Один из них — Console Light — легковесная визуальная консоль для мониторинга активности в реальном времени. Она отображает ключевые показатели нагрузки и производительности сервера.

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

К слову, а демо-версию Console Light вы можете попробовать по ссылке.

#новость дня

Google сегодня 25 лет! По этому поводу у них дудл с антологией логотипов. Не так уж и много поменялось.

Давайте перепись олдов и прочих нонконформистов в комментариях: кто чем пользовался до гугла или хотя бы до прихода гугла в вашу страну?

Я помню, на Апорте искал песни, простите, Арии году так в 2000. Гугла в РФ тогда не было.

Забавно, что российские Яндекс, Рамблер и Апорт появились раньше. Да и вообще по миру Google был очень не первый.

#фишка дня

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

Буквально — используя параметры строки запроса (query string parameters).

Ну то есть что-то вроде https://buy.that?title=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.

А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.

А очень просто!

<a href="">Reload</a>

Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108

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

Не пишите лишнего, котаны!

#http #html #trick

#ссылка дня

Не так давно я обновил логотип канала, до того момента это был символ пустого фрагмента, </>, выражаясь языком React.js, на фоне логотипов кучи Веб-технологий, с которыми я работал.

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

Так вот, я это к чему. Когда это всё происходило, не было ресурса https://icones.js.org/

По его названию можно было бы подумать, что там одни только иконки. Но нет!

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

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

Но вот вам, котаны, берите и пользуйтесь 🙂

#icons #logos #emoji #flags

#фишка дня

Я недавно писал пост про реализацию панелей с изменяемым размером. Ну как в редакторах или на том же кодпене: https://t.iss.one/htmlshit/2211

Так вот, забудьте. Если стоит задача просто сделать пару панелек и дать возможность изменять их размер, это можно сделать чистым CSS!

Да, многие уже догадались, что речь идёт о свойстве resize: https://codepen.io/alinaki/pen/MWZXzMY

Интересный момент — если элемент блочный, overflow обязательно должно быть hidden.

«Не, погоди, а где панели-то?»

Терпение! Глядите, что придумал небезызвестный Jhey: https://codepen.io/alinaki/pen/zYyaMQB

Суть в том, что создаётся грид:

  grid-template-columns: auto 1fr;

И в первую из панелей вставляется элемент resizer, с включённым нужным нам свойством.

А вот дальше натурально магия: браузеры не дают возможности стилизовать уголок-ручку, за которую надо дёргать, а она очень маленькая.

Джей вышел из ситуации интересным способом: заскейлил элемент в несколько раз и примерно на месте ручки поместил псевдоэлемент. А чтобы остальной блок не мешался — обрезал его через clip-path.

По-моему, это гениально. И работает фактически везде!

#css #trick #resize

#заметка дня

Чем отличаются auto-fit и auto-fill в гридах?

Отвечает Александр Друзь.

Функцию repeat используют чтобы не писать повторяющиеся определения колонок или строк. Помимо конкретного их числа, можно задать и автоматическое их заполнение при помощи пресловутых auto-fit и auto-fill, сравните на иллюстрации. Тут можно было бы и закончить :)

Так в чем же разница, словами? :)

При использовании repeat движок гридов создает столько колонок или строк, сколько вообще может уместиться в заданные рамки. Отличие fit от fill буквально в том, что fill задаст контенту минимально возможный размер, сохранив "фантомные", незаполненные, в примере, колонки. А fit — заполнит (впишет) контент, схлопнув те самые фантомные колонки.

В общем, всё довольно просто.

#css #grid #repeat #бородач

#фишка дня

Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).

Вот только есть нюанс.

Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?

Использовать селектор атрибута: [readonly].

Пример: https://codepen.io/elad2412/pen/wvpmjGR

Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.

Скелетон вернётся с новыми подробностями о фронтенде завтра.

#css #html #input #бородач

#шпаргалка дня

Уникальное предложение!

Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.svg

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

#pr #process #work #бородач

#фишка дня

Один из моих любимых вопросов на собеседованиях был про поведение Array.prototype.sort().

Вы не представляете какое количество людей просто не задумывается о том, что sort — мутирующий метод, то есть он возвращает не новый массив, а ссылку на изменённый текущий.

Да, в большинстве случаев ничего страшного не произойдёт, но в остальных — будет неприятно.

Так вот, к чему это я. С выходом Firefox 115 в июле этого года мы получили иммутабельные методы работы с массивами во всех браузерах:
.toReversed()
.toSorted()
.toSpliced()
.with()

Если что, with — это про замену элементов по индексам.

Есть и полифиллы на core-js, так что без работы никто не останется.

И это прекрасно.

#js #array #sort

#фишка дня

Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...

...и ваша секция уехала под шапку ко всем чертям. Что же делать?

Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.

В чем отличие 2 от 3?

Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.

Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

#css #scroll #snap #anchor #бородач

#видео дня

Тут Андрей Ситник (PostCSS и Logux) выложил видео с митапа Злых Марсиан в Лиссабоне. Мне кажется, ни Андрея ни Марсиан отдельно представлять не надо 🙂

Продублирую выложеные видео здесь и, заодно, напомню об одном предстоящем событии, уже не Марсиан 🙂

1. Роман Шамин о том, как делать динамическую тему приложения: https://www.youtube.com/watch?v=K6ksuVzTz5U

2. Ольга Русакова о том, как продвигать опенсорс-проекты: https://www.youtube.com/watch?v=9Xg__hgL8zg

3. Глеб Строганов об адаптации иконок к особенностям шрифтаа: https://www.youtube.com/watch?v=0fQhhEM1AMw

4. Александр Байгельдин о Cloudflare Workers: https://www.youtube.com/watch?v=mjCMW8MpP30

5. И рэп про разработку, а заодно как сделать рабочую кассету на React и SVG, от Элизабет Оливейры: https://www.youtube.com/watch?v=bcbnkm2IZjk

А отдельное событие, о котором я хотел вам напомнить, это ViteConf, уже завтра: https://viteconf.org/23/

Сгенерируйте себе билетик и добавьте в календарь, котаны!

#events #vite

#codepen дня

Гори всё синим пламенем!

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

Впрочем Awwwards получили :)

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

Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa

Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂

Спасибо Ксении Кондрашёвой.

#webgl #shader #бородач

#ссылка дня

В сентябре прошла Practical ML Conf от Яндекса и вот, наконец, стали доступны записи.

Наиболее интересные доклады:

1. Zero-cost fault tolerance в распределённом глубоком обучении

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

2. Multi-view pathology detection on medical images

Евгений Сидоров, Head of AI, Third Opinion, рассказал о методе анализа медицинских снимков на основе множественных проекций – он позволяет восполнить недостаток трехмерной визуальной информации. Интересно, что здесь применили опыт из самоуправляемых автомобилей.

Я в университете максимум такие изображения воссоздавал по данным, но уж никак не анализировал...

3. Геоэмбеддинги: векторное представление контекста в пространственной аналитике

Юлий Шамаев из ВТБ рассказал как его команда использует ИИ, чтобы определить лучшее расположение для банкоматов и банковских отделений.


Записи докладов доступны здесь

#фишка дня

Я не знаю, зачем вам эта информация, но в CSS в числе типов есть Infinity.

Ах, вы не знали, что CSS давно уже типизированный язык? Ну я напомню: https://t.iss.one/htmlshit/1971

Скоро вернусь с постом, котаны, не переключайтесь.

#статья дня

Глупо считать, что сложные системы это привилегия айти, пусть даже айти зачастую пронизывает их с ног до головы. Хотя, конечно, стоит признать, что даже кажущиеся простыми системы на самом деле далеко не такие (на иллюстрации — система уведомлений в Slack).

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

Сегодняшняя статья имеет простое и понятное название: «How Complex Systems Fail», имеется перевод на русский: «Как ломаются сложные системы». Автор — доктор Ричард Кук. В смысле медицины доктор.

В чём суть? Всё просто: опасность – неотъемлемый атрибут сложных систем. На этом можно было бы и закончить, но там ещё 17 пунктов. Кому-то они помогут расслабиться, очень надеюсь.

Забавно, что некоторые из пунктов отлично вписываются в рефакторинг. Например:

10. Все действия специалистов – авантюры
14. Изменения создают новые виды сбоев
18. Работа без сбоев требует опыта работы со сбоями

Прописные истины? Возможно. Но их стоило собрать в одном месте. И собрали — аж в 1998 году.

В общем, всем рекомендую, котаны.

#system #testing

#статья дня

Скорее даже заметка от Софии Валитовой о порядке применения трансформаций в CSS, но концентрация знаний зашкаливает. В чём же весь вопрос?

Как вы можете помнить, не так давно все современные движки браузеров стали поддерживать определение трансформаций не только в правиле transform, но и в индивидуальных. То есть:

transform: translateX(20px) rotate(40deg) scale(1.5);

может быть записано как:

translate: 20px;
rotate: 40deg;
scale: 1.5;


Но так ли это на самом деле? И да и нет. В первом случае порядок важен, во втором — нет, он всегда будет translate👉rotate👉scale. И, естественно, повторяющиеся правила будут схлопнуты.

Подробнее — в заметке Софии. Вообще у неё очень много полезного выходит, глубоко копает в спеки.

#css #transform #бородач

#фишка дня

Как предотвратить взаимодействие пользователя с элементом?

pointer-events: none — скажете вы.

Да. Но нет. А что насчёт клавиатурного фокуса? А скринридеры? Так не пойдёт.

Благо, есть решение!

Начиная с Firefox 112 и Safari 15.5 у нас наконец-то есть поддержка атрибута inert. Что это такое?

Ну, исходя из названия inert (инертный) он ни с чем не должен взаимодействовать. Как инертные газы (как вам отсылочка, пахнуло школьной химией, да?).

То есть, если вы зададите элементу атрибут inert, то:
1. Будет предотвращена обработка события click.
2. Элемент перестанет получать фокус и...
3. ...станет недоступен для скринридеров (исключён из a11y tree).

Поддержка уже давно есть в Chrome, начиная со 102 версии, и теперь, с вводом в строй Firefox 112 — есть во всех современных движках.

Ну и, естественно, присущие атрибуту свойства можно повторить ручками, вот пример: https://codepen.io/alinaki/pen/ZEqJepB

#inert #attribute #html #a11y #бородач

#такое дня

Вы, наверное, уже слышали, что Adobe выпустила Photoshop for Web: https://photoshop.adobe.com/

Работает только в Chrome, потому что — кто бы мог подумать — Google активно участвовал в создании и подгонке кода. По этому поводу даже выпустили статью о процессе создания и об используемых технологиях: https://web.dev/ps-on-the-web/

Впрочем, со времён порта Quake 3 мало что поменялось, разве что, используя всё тот же Emscripten, код на C++ стали собирать в WebAssembly, а не чистый JavaScript 🙂

Кстати, по этому поводу они в процессе добавили отладку WebAssembly в девтулзы.

Собственно, вот и статья: https://web.dev/ps-on-the-web/

А теперь здоровая такая ложка дёгтя.

Не секрет, что я нахожусь в Финляндии. Но я не могу потестировать! Мне пишет, что продукт заблокирован в моей стране.

И всё бы ничего, GPDR и прочее, вот только нюанс: не открывается лишь с личного профиля. С рабочего и дублёра — открывается.

И единственное отличие, что я нашёл — это второй язык в профиле браузера. Русский.

И есть у меня дикое предположение, что Adobe использует сложный фингерпринтинг и блокирует по языку, предполагая, что я в РФ. Даже если это не связано конкретно с языком — причина очевидна.

Не очень приятно. Поэтому, используйте https://www.photopea.com/ для ваших мелких задач. Меня не подводила, дизайны сайтов и превьюшек открываются отлично 🙂

#webassembly #chrome #photoshop