<?xml version="1.0" encoding="utf-8" ?><rss version="2.0" xmlns:tt="http://teletype.in/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>zhan.blog</title><generator>teletype.in</generator><description><![CDATA[Личный блог о веб-разработке, технологиях, полезных инструментах и собственных проектах. Иногда — о фильмах, играх, сериалах и другом.]]></description><image><url>https://img2.teletype.media/files/53/43/53436460-9d25-4faa-a2d9-3680d7792852.png</url><title>zhan.blog</title><link>https://zhan.page/</link></image><link>https://zhan.page/?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog</link><atom:link rel="self" type="application/rss+xml" href="https://teletype.in/rss/zhan.blog?offset=0"></atom:link><atom:link rel="next" type="application/rss+xml" href="https://teletype.in/rss/zhan.blog?offset=10"></atom:link><atom:link rel="search" type="application/opensearchdescription+xml" title="Teletype" href="https://teletype.in/opensearch.xml"></atom:link><pubDate>Fri, 11 Sep 2026 11:08:20 GMT</pubDate><lastBuildDate>Fri, 11 Sep 2026 11:08:20 GMT</lastBuildDate><item><guid isPermaLink="true">https://zhan.page/xiaomi-monitor-a24i-ela5444eu</guid><link>https://zhan.page/xiaomi-monitor-a24i-ela5444eu?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog</link><comments>https://zhan.page/xiaomi-monitor-a24i-ela5444eu?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog#comments</comments><dc:creator>zhan.blog</dc:creator><title>Xiaomi Monitor A24i ELA5444EU [обзор]</title><pubDate>Sat, 05 Sep 2026 23:05:44 GMT</pubDate><media:content medium="image" url="https://img3.teletype.in/files/27/c7/27c78321-dd27-47c6-90dc-aa9a00e90526.png"></media:content><category>⚙️ Технологии</category><description><![CDATA[<img src="https://img1.teletype.in/files/04/e5/04e58767-cdf0-4a40-9636-ae153b96f620.png"></img>Ранее в качестве дополнительного монитора я использовал Dell P2419H. Он хорошо справлялся со своей задачей, однако со временем я решил заменить его на более современную модель. Так мой выбор пал на Xiaomi Monitor A24i.]]></description><content:encoded><![CDATA[
  <figure id="f2ki" class="m_original">
    <img src="https://img1.teletype.in/files/04/e5/04e58767-cdf0-4a40-9636-ae153b96f620.png" width="2560" />
  </figure>
  <p id="Pkh7">Ранее в качестве дополнительного монитора я использовал <a href="https://zhan.page/dell-p2419h" target="_blank">Dell P2419H</a>. Он хорошо справлялся со своей задачей, однако со временем я решил заменить его на более современную модель. Так мой выбор пал на Xiaomi Monitor A24i.</p>
  <p id="CYZr">Сейчас он используется у меня в качестве дополнительного монитора рядом с основным <a href="https://zhan.page/samsung-m8" target="_blank">Samsung M8</a>. На основном экране я обычно работаю с браузером и проверяю результат, а на Xiaomi пишу код, верстаю сайты и выполняю другие рабочие задачи.</p>
  <p id="lbH8">После <a href="https://zhan.page/dell-p2419h" target="_blank">Dell P2419H</a> монитор приятно удивил сразу несколькими моментами. И главным из них для меня стала частота обновления 100 Гц.</p>
  <h2 id="EKuy">Распаковка и комплектация</h2>
  <p id="utSW">Xiaomi Monitor A24i поставляется в не большой фирменной коробке. На лицевой стороне сразу указаны основные характеристики: диагональ 24 дюйма, разрешение Full HD и частота обновления 100 Гц.</p>
  <figure id="oVoF" class="m_original">
    <img src="https://img3.teletype.in/files/a0/60/a060dfa3-a2af-4a32-99ae-cdf3f7a45176.jpeg" width="5712" />
  </figure>
  <p id="QslV">Внутри всё аккуратно уложено в защитный пенопласт.</p>
  <figure id="EEJx" class="m_original">
    <img src="https://img4.teletype.in/files/fa/53/fa53a86b-bb0d-4a4d-bceb-ee91b199af22.jpeg" width="5712" />
  </figure>
  <p id="Evlx">В комплект входят:</p>
  <ul id="wiJW">
    <li id="Jl7Q">монитор;</li>
    <li id="sXYe">подставка;</li>
    <li id="JebX">адаптер питания;</li>
    <li id="RBpf">кабель HDMI;</li>
    <li id="kZiT">документация;</li>
    <li id="Tyuc">необходимые элементы для сборки.</li>
  </ul>
  <figure id="3vWN" class="m_original">
    <img src="https://img4.teletype.in/files/f5/6c/f56cccc2-356f-4bb8-aa92-d6497297ecbb.jpeg" width="5712" />
  </figure>
  <p id="GqJU">Комплектация вполне стандартная, но в ней есть всё необходимое, чтобы сразу собрать монитор и начать работу. Отдельно отмечу наличие HDMI-кабеля в комплекте. Сам монитор также оснащён HDMI и DisplayPort 1.4.</p>
  <h2 id="L5kn">Дизайн</h2>
  <p id="oExs">Внешне монитор выглядит очень минималистично. Тонкие рамки с трёх сторон делают его современным, а нижняя рамка немного толще и содержит логотип Xiaomi.</p>
  <figure id="tZoM" class="m_original">
    <img src="https://img1.teletype.in/files/0a/63/0a6338cb-e36d-4ed9-8c46-d76e19b517f5.jpeg" width="5712" />
  </figure>
  <p id="ta2P">Для дополнительного монитора такой дизайн подходит отлично. Он не привлекает к себе слишком много внимания и хорошо смотрится рядом с основным экраном.</p>
  <p id="OAnO">Сам дисплей имеет диагональ 23,8 дюйма и разрешение 1920×1080. Используется IPS-матрица с частотой обновления до 100 Гц. Xiaomi также заявляет 99% охвата sRGB и заводскую калибровку цвета с ∆E&lt;2.</p>
  <h2 id="1WLR">100 Гц</h2>
  <p id="AMvK">Больше всего после перехода с <a href="https://zhan.page/dell-p2419h" target="_blank">Dell P2419H</a> меня удивила частота обновления 100 Гц.</p>
  <p id="2L1u">Казалось бы, для дополнительного монитора, на котором я в основном пишу код и работаю с текстом, это не самая важная характеристика. Но разница с обычными 60 Гц действительно заметна.</p>
  <p id="TpmG">Прокрутка страниц и текста стала значительно плавнее. Более комфортно ощущается перемещение курсора и работа с окнами. Даже при обычной повседневной работе за компьютером к 100 Гц быстро привыкаешь.</p>
  <p id="kOHk">Особенно это заметно при длительной работе. Поскольку я часто использую этот монитор для программирования и вёрстки сайтов, плавность интерфейса оказалась приятным дополнением, которого я изначально даже не ожидал от относительно простого дополнительного монитора.</p>
  <p id="sfxG">Официально Xiaomi Monitor A24i поддерживает разрешение 1920×1080 при частоте обновления до 100 Гц.</p>
  <h2 id="v81i">Использование в качестве дополнительного монитора</h2>
  <p id="HzD6">Сейчас Xiaomi Monitor A24i используется у меня именно как дополнительный экран.</p>
  <p id="5PMA">На нём удобно держать открытым редактор кода, работать с HTML и CSS, а также заниматься вёрсткой сайтов. Основной монитор при этом остаётся для просмотра результата работы, браузера и других задач.</p>
  <p id="eSQ5">Такой вариант использования оказался для меня очень удобным. Несмотря на одинаковое Full HD-разрешение, дополнительный экран отлично справляется именно с рабочими задачами.</p>
  <p id="Y7Sd">Текст выглядит достаточно чётко, а IPS-матрица обеспечивает хорошие углы обзора. При работе с кодом и сайтами никаких серьёзных проблем с качеством изображения я не заметил.</p>
  <p id="uy0K">В целом для программирования, работы с текстом, браузером и повседневных задач возможностей этого монитора вполне достаточно.</p>
  <h2 id="dfZ5">VESA-крепление</h2>
  <p id="JnOD">Монитор поддерживает крепление VESA, что для меня было важно. Однако здесь есть небольшой нюанс, который я заметил после замены <a href="https://zhan.page/dell-p2419h" target="_blank">Dell P2419H</a>.</p>
  <p id="LmOV">У старого Dell крепление VESA находилось практически в центральной части корпуса. У Xiaomi оно расположено ниже.</p>
  <p id="T7Sn">Из-за этого после установки на тот же кронштейн монитор оказался немного выше, чем был раньше. Пришлось немного поднять основной монитор, чтобы он лучше сочетался с дополнительным экраном.</p>
  <p id="Ty3h">Это нельзя назвать серьёзной проблемой, но при переходе с другого монитора и использовании уже существующего крепления этот момент стоит учитывать.</p>
  <h2 id="ogAJ">Небольшие недостатки</h2>
  <p id="yBvR">За время использования я заметил несколько мелких недостатков.</p>
  <p id="QgJd">Первый — немного коротковатый кабель питания. В моём случае его длины почти хватает, но буквально немного не хватает для более удобной прокладки.</p>
  <p id="mbxN">Второй момент связан с расположением VESA-крепления. Как я уже писал выше, из-за его расположения в нижней части корпуса монитор на моём кронштейне теперь находится немного выше, чем раньше находился <a href="https://zhan.page/dell-p2419h" target="_blank">Dell P2419H</a>.</p>
  <p id="mvjN">Но оба этих недостатка для меня не являются серьёзными. Они скорее относятся к небольшим особенностям, которые замечаешь при установке и настройке рабочего места.</p>
  <h2 id="u1nK">Выводы</h2>
  <p id="PuCq">Переход с <a href="https://zhan.page/dell-p2419h" target="_blank">Dell P2419H</a> на Xiaomi Monitor A24i оказался удачным решением.</p>
  <p id="doRB">Монитор отлично подходит для моей основной задачи — использования в качестве дополнительного экрана для программирования, написания кода и вёрстки сайтов. IPS-матрица, Full HD-разрешение и тонкие рамки делают его хорошим современным рабочим монитором.</p>
  <p id="MlSq">Но больше всего меня приятно удивила частота обновления 100 Гц. Даже для обычной работы за компьютером разница с 60 Гц действительно ощущается. Интерфейс, прокрутка и перемещение окон выглядят заметно плавнее, и после некоторого времени использования возвращаться к более низкой частоте уже не хочется.</p>
  <p id="uHki">Да, кабель питания мог бы быть немного длиннее, а расположение VESA-крепления оказалось не самым удобным именно для моего рабочего места. Но это небольшие недостатки, которые никак серьёзно не влияют на общее впечатление от устройства.</p>
  <p id="SDcZ">В целом я доволен покупкой. Xiaomi Monitor A24i оказался хорошей заменой Dell P2419H и отлично справляется с ролью дополнительного монитора. Могу рекомендовать его тем, кто ищет недорогой современный монитор для работы, программирования, учёбы и повседневного использования.</p>

]]></content:encoded></item><item><guid isPermaLink="true">https://zhan.page/4-instrumenta-dlya-raboty-s-izobrazheniyami-kotory</guid><link>https://zhan.page/4-instrumenta-dlya-raboty-s-izobrazheniyami-kotory?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog</link><comments>https://zhan.page/4-instrumenta-dlya-raboty-s-izobrazheniyami-kotory?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog#comments</comments><dc:creator>zhan.blog</dc:creator><title>4 инструмента для работы с изображениями, которые у меня в закладках</title><pubDate>Sat, 05 Sep 2026 23:55:15 GMT</pubDate><category>💻 webDev</category><description><![CDATA[Мой небольшой набор:]]></description><content:encoded><![CDATA[
  <p id="UnYG">Мой небольшой набор:</p>
  <p id="xZ0x"><strong>1. ImageCompressor</strong></p>
  <p id="R7id">Когда нужно просто сжать изображение.</p>
  <p id="uGoX">🔗 <a href="https://imagecompressor.com/ru/?utm_source=zhan.blog" target="_blank">ImageCompressor</a></p>
  <p id="60Hl"><strong>2. ImageConverter</strong></p>
  <p id="wPeP">Когда нужно поменять формат изображения.</p>
  <p id="m1iZ">🔗 <a href="https://imageconverter.com/ru/?utm_source=zhan.blog" target="_blank">ImageConverter</a></p>
  <p id="HelM"><strong>3. Convertio</strong></p>
  <p id="4EPK">Когда нужно конвертировать что-то более экзотическое.</p>
  <p id="Vus0">🔗 <a href="https://convertio.co/ru/?utm_source=zhan.blog" target="_blank">Convertio</a></p>
  <p id="Kv8H"><strong>4. Converter for Media</strong></p>
  <p id="TyKC">Если речь уже о WordPress и автоматической выдаче WebP/AVIF.</p>
  <p id="g1AN">🔗 <a href="https://wordpress.org/plugins/webp-converter-for-media/?utm_source=zhan.blog" target="_blank">Converter for Media</a></p>
  <p id="q8V3">Последний вариант интересен тем, что плагин умеет автоматически создавать WebP и AVIF для изображений WordPress и отдавать соответствующий формат браузеру.</p>

]]></content:encoded></item><item><guid isPermaLink="true">https://zhan.page/NgCOyVsAWqh</guid><link>https://zhan.page/NgCOyVsAWqh?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog</link><comments>https://zhan.page/NgCOyVsAWqh?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog#comments</comments><dc:creator>zhan.blog</dc:creator><title>Vite + WordPress — зачем я вообще это сделал</title><pubDate>Sat, 05 Sep 2026 23:52:34 GMT</pubDate><media:content medium="image" url="https://img4.teletype.in/files/b5/2a/b52aa791-af15-43a4-8b57-99d4ba26f030.png"></media:content><category>💻 webDev</category><description><![CDATA[<img src="https://avatars.mds.yandex.net/i?id=6678ac8c7848556329765f25830dd6f6_l-5910641-images-thumbs&amp;n=13"></img>В своих новых WordPress-темах я начал активно использовать Vite.]]></description><content:encoded><![CDATA[
  <figure id="Yihr" class="m_original">
    <img src="https://avatars.mds.yandex.net/i?id=6678ac8c7848556329765f25830dd6f6_l-5910641-images-thumbs&n=13" width="1280" />
  </figure>
  <p id="HyfE">В своих новых WordPress-темах я начал активно использовать Vite.</p>
  <p id="g2JB">Раньше структура была гораздо проще: подключил CSS, подключил JS — и работаешь.</p>
  <p id="BIa1">С Vite проект становится больше похож на современный frontend-проект:</p>
  <ul id="ZKRY">
    <li id="NKQ2">нормальная сборка;</li>
    <li id="uvEt">работа с модулями;</li>
    <li id="fWMt">dev server;</li>
    <li id="LEpU">оптимизация production-сборки;</li>
    <li id="esC5">удобная работа с JavaScript и CSS.</li>
  </ul>
  <p id="xljt">Но есть и обратная сторона — приходится нормально организовать взаимодействие Vite и WordPress.</p>
  <p id="mpAO">Особенно интересно было разобраться с dev/build режимами и manifest.</p>
  <p id="lPM5">Пришлось с нуля переписать структуру темы.</p>

]]></content:encoded></item><item><guid isPermaLink="true">https://zhan.page/dell-p2419h</guid><link>https://zhan.page/dell-p2419h?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog</link><comments>https://zhan.page/dell-p2419h?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog#comments</comments><dc:creator>zhan.blog</dc:creator><title>Dell P2419H [обзор]</title><pubDate>Sat, 05 Sep 2026 22:41:46 GMT</pubDate><media:content medium="image" url="https://img4.teletype.in/files/70/04/7004221e-e415-4eec-bf91-61997d2c6582.png"></media:content><category>⚙️ Технологии</category><description><![CDATA[<img src="https://img1.teletype.in/files/cb/49/cb4930b5-2c9a-47a9-8202-f19558bd6ded.jpeg"></img>Dell P2419H долгое время использовался у меня в качестве дополнительного монитора. Основным монитором был Samsung M8, а Dell стоял рядом и использовался преимущественно для работы.]]></description><content:encoded><![CDATA[
  <figure id="Vq7x" class="m_original">
    <img src="https://img1.teletype.in/files/cb/49/cb4930b5-2c9a-47a9-8202-f19558bd6ded.jpeg" width="2048" />
  </figure>
  <p id="c5qi">Dell P2419H долгое время использовался у меня в качестве дополнительного монитора. Основным монитором был <a href="https://zhan.page/samsung-m8" target="_blank">Samsung M8</a>, а Dell стоял рядом и использовался преимущественно для работы.</p>
  <p id="iUeo">Такая связка оказалась для меня очень удобной. На Dell P2419H я в основном писал код и верстал сайты, а на основном Samsung M8 открывал браузер и сразу смотрел результат работы.</p>
  <p id="dFQc">Несмотря на то, что Dell P2419H уже нельзя назвать новой моделью, для подобного сценария использования он отлично подходит и полностью справляется со своими задачами.</p>
  <h2 id="DloT">Дизайн</h2>
  <p id="XHjZ">Dell P2419H выглядит достаточно просто и минималистично. Здесь нет каких-то необычных элементов или яркого дизайна, но именно благодаря этому монитор хорошо вписывается практически в любое рабочее пространство.</p>
  <p id="8a2f">Рамки вокруг экрана достаточно тонкие, поэтому при использовании двух мониторов рядом они не слишком отвлекают. Подставка выглядит аккуратно и при этом позволяет удобно расположить монитор на рабочем столе.</p>
  <p id="VG1v">В целом дизайн можно назвать скорее рабочим и практичным. Dell P2419H не пытается выглядеть как премиальное или игровое устройство — это обычный монитор, основной задачей которого является комфортная ежедневная работа.</p>
  <h2 id="qIPk">Дисплей</h2>
  <p id="KTDY">Диагонали 24 дюйма мне было вполне достаточно именно для дополнительного монитора. Конечно, по сравнению с большим <a href="https://zhan.page/samsung-m8" target="_blank">Samsung M8</a> экран ощущается заметно меньше, но для работы с кодом этого размера вполне хватает.</p>
  <p id="rGiq">На Dell P2419H я обычно открывал редактор кода. На основном мониторе в это время был открыт браузер с разрабатываемым сайтом. Благодаря этому не приходилось постоянно переключаться между окнами — код находился на одном экране, а результат можно было сразу увидеть на другом.</p>
  <p id="4RGI">Для верстки и программирования такой сценарий оказался особенно удобным. Можно одновременно работать над сайтом, проверять изменения в браузере и держать перед глазами больше информации.</p>
  <p id="PnNH">Разрешения Full HD для 24-дюймового дополнительного монитора также вполне достаточно. Текст отображается комфортно, и при длительной работе с кодом у меня не возникало желания заменить его на модель с более высоким разрешением.</p>
  <h2 id="Vy58">Удобство работы</h2>
  <p id="kheh">Главное преимущество Dell P2419H для меня заключалось именно в том, насколько хорошо он подошёл на роль второго монитора.</p>
  <p id="KkQW">Я не использовал его для просмотра фильмов, игр или каких-то других развлечений. Практически всё время на нём были открыты редактор кода, терминал, браузер с инструментами для разработки или другие рабочие приложения.</p>
  <p id="RGHX">При этом Samsung M8 оставался основным экраном, на котором я смотрел результат работы. Такое разделение оказалось намного удобнее, чем постоянное переключение между окнами на одном мониторе.</p>
  <p id="DdUe">Особенно это ощущается во время верстки сайтов. Можно изменить HTML или CSS на Dell P2419H и сразу посмотреть, как изменился сайт, на <a href="https://zhan.page/samsung-m8" target="_blank">Samsung M8</a>.</p>
  <p id="O0WF">Для меня два монитора значительно удобнее одного большого экрана именно в таком сценарии, поскольку каждое устройство выполняет свою задачу.</p>
  <h2 id="GH1g">В качестве дополнительного монитора</h2>
  <p id="0q4D">На мой взгляд, Dell P2419H лучше всего подходит именно в качестве дополнительного монитора.</p>
  <p id="wvxu">24-дюймовый экран не занимает слишком много места на рабочем столе, но при этом его достаточно для комфортной работы с кодом, документами, браузером и другими приложениями.</p>
  <p id="TQkd">В качестве основного монитора лично мне всё же больше нравится использовать экран большей диагонали и с более высоким разрешением. Но рядом с таким монитором Dell P2419H становится отличным дополнением.</p>
  <p id="yXeU">Необязательно покупать второй большой или дорогой монитор. Для размещения кода, дополнительных окон и рабочих инструментов возможностей Dell P2419H вполне достаточно.</p>
  <h2 id="cvmg">Выводы</h2>
  <p id="W8qB">Dell P2419H оставил у меня положительное впечатление. Это простой, качественный и удобный монитор, который хорошо подходит для ежедневной работы.</p>
  <p id="DXxA">В моём случае он использовался преимущественно как дополнительный экран. На нём я писал код и верстал сайты, а на основном <a href="https://zhan.page/samsung-m8" target="_blank">Samsung M8</a> сразу проверял результат в браузере. Для такого сценария эта связка оказалась очень удобной.</p>
  <p id="qypY">Конечно, сейчас существуют модели с более высоким разрешением, большей диагональю и различными дополнительными возможностями. Но если нужен хороший монитор именно в качестве второго экрана для работы, программирования или других повседневных задач, Dell P2419H вполне может стать отличным вариантом.</p>
  <p id="0vg9">Лично для меня это был хороший дополнительный монитор, который полностью выполнял свою задачу и делал работу за компьютером значительно удобнее.</p>

]]></content:encoded></item><item><guid isPermaLink="true">https://zhan.page/svg-to-base64-encode</guid><link>https://zhan.page/svg-to-base64-encode?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog</link><comments>https://zhan.page/svg-to-base64-encode?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog#comments</comments><dc:creator>zhan.blog</dc:creator><title>Конвертировать SVG в Base64</title><pubDate>Sat, 05 Sep 2026 22:33:00 GMT</pubDate><media:content medium="image" url="https://img2.teletype.in/files/da/ca/daca8553-4259-486c-8b4b-d0a986d3d64e.png"></media:content><category>👤 Моё</category><description><![CDATA[<img src="https://img1.teletype.in/files/00/23/00237d01-0316-409e-9a5e-0f915d3512ed.png"></img>SVG — удобный формат для иконок, логотипов и другой векторной графики. Обычно SVG используется как отдельный файл, который подключается к странице через &lt;img&gt;, &lt;svg&gt; или CSS.]]></description><content:encoded><![CDATA[
  <figure id="uZm7" class="m_original">
    <img src="https://img1.teletype.in/files/00/23/00237d01-0316-409e-9a5e-0f915d3512ed.png" width="1774" />
  </figure>
  <p id="r5ok">SVG — удобный формат для иконок, логотипов и другой векторной графики. Обычно SVG используется как отдельный файл, который подключается к странице через <code>&lt;img&gt;</code>, <code>&lt;svg&gt;</code> или CSS.</p>
  <p id="s3yx">Но иногда удобнее встроить изображение прямо в код.</p>
  <p id="65Do">Например, использовать SVG в качестве фонового изображения:</p>
  <pre id="888M">background-image: url(&quot;data:image/svg+xml;base64,...&quot;);</pre>
  <p id="8B5h">Для этого SVG необходимо преобразовать в формат Base64.</p>
  <p id="c11a">Вручную делать это неудобно, поэтому я добавил на сайт ещё один небольшой бесплатный инструмент — <strong>конвертер SVG в Base64</strong>.</p>
  <h2 id="c6zo">Что умеет конвертер</h2>
  <p id="7mVZ">Инструмент позволяет быстро преобразовать SVG в несколько готовых форматов:</p>
  <ul id="FOA1">
    <li id="dlDF"><strong>Base64-строку</strong>;</li>
    <li id="ACXH"><strong>Data URI</strong>;</li>
    <li id="ao1M">готовый код для <strong>HTML</strong>;</li>
    <li id="OdWb">готовое значение для использования в <strong>CSS</strong>.</li>
  </ul>
  <p id="LqI4">Можно загрузить SVG-файл с компьютера или просто вставить SVG-код вручную.</p>
  <p id="Ladw">После этого конвертер автоматически обработает данные и покажет готовый результат, который можно сразу скопировать.</p>
  <h2 id="WCa3">Как пользоваться</h2>
  <p id="OKiV">Всё максимально просто:</p>
  <ol id="XRxo">
    <li id="2yz9">Перетащите SVG-файл в область загрузки или выберите его с компьютера.</li>
    <li id="eA9q">Либо вставьте SVG-код вручную.</li>
    <li id="MVdb">Получите готовые варианты результата.</li>
    <li id="HsMR">Скопируйте нужный формат одной кнопкой.</li>
  </ol>
  <p id="7a66">Например, если вам нужна строка для <code>background-image</code>, не придётся отдельно искать сервис для кодирования, а затем вручную собирать CSS-код.</p>
  <p id="E1m7">Конвертер сразу подготовит нужный вариант.</p>
  <h2 id="puWO">Зачем преобразовывать SVG в Base64</h2>
  <p id="n5fZ">Чаще всего такой формат может пригодиться при работе с HTML и CSS.</p>
  <p id="kk9x">Например, когда нужно встроить небольшую SVG-иконку прямо в стили:</p>
  <pre id="MjwE">.icon {
    background-image: url(&quot;data:image/svg+xml;base64,...&quot;);
}</pre>
  <p id="9VQX">Это позволяет использовать изображение без отдельного запроса к файлу.</p>
  <p id="OXD7">Также готовая строка может пригодиться для:</p>
  <ul id="3bnI">
    <li id="JTZq">CSS-фонов;</li>
    <li id="2r4W">HTML-кода;</li>
    <li id="oGWr">Data URI;</li>
    <li id="XdNP">небольших встроенных иконок;</li>
    <li id="NcQs">email-верстки;</li>
    <li id="xnSk">различных frontend-задач.</li>
  </ul>
  <p id="lDJ1">Конечно, Base64 подходит не для каждого случая. Для крупных изображений использовать отдельный SVG-файл часто удобнее. Но для небольших иконок и отдельных элементов встроенный формат может быть вполне практичным решением.</p>
  <h2 id="PADF">Всё работает прямо в браузере</h2>
  <p id="8Sdw">Для работы с инструментом ничего не нужно устанавливать.</p>
  <p id="1TGo">Загруженные SVG-файлы и вставленный код обрабатываются локально в браузере и никуда не отправляются.</p>
  <p id="fh1I">Также есть ограничение на максимальный размер файла — <strong>2 МБ</strong>, при этом поддерживаются только SVG-файлы.</p>
  <h2 id="kXd3">Небольшой инструмент для frontend-разработки</h2>
  <p id="P9ff">Я сделал этот конвертер в первую очередь как простой инструмент, который может пригодиться во время разработки.</p>
  <p id="nZxs">Не нужно искать отдельный сервис, копировать код между несколькими страницами или устанавливать дополнительные программы.</p>
  <p id="QyKa"><strong>Загрузили SVG или вставили код → получили Base64, Data URI, HTML и CSS → скопировали нужный вариант.</strong></p>
  <p id="vSNN">Если занимаетесь frontend-разработкой, работаете с вёрсткой или просто иногда используете SVG в HTML и CSS — возможно, <a href="https://zhan.dev/items/svg-to-base64-encode/?utm_source=zhan.blog" target="_blank">этот инструмент сможет немного сэкономить время</a>.</p>

]]></content:encoded></item><item><guid isPermaLink="true">https://zhan.page/seo</guid><link>https://zhan.page/seo?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog</link><comments>https://zhan.page/seo?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog#comments</comments><dc:creator>zhan.blog</dc:creator><title>Yoast SEO или SEOPress?</title><pubDate>Sat, 05 Sep 2026 22:27:56 GMT</pubDate><media:content medium="image" url="https://img4.teletype.in/files/f8/88/f8888c79-74c6-4f5b-9a3d-ff8a753690de.png"></media:content><category>💻 webDev</category><description><![CDATA[<img src="https://avatars.mds.yandex.net/i?id=c297d845732692b3f9521707ee421add_l-4377722-images-thumbs&amp;n=13"></img>Для SEO я долго использовал Yoast SEO.]]></description><content:encoded><![CDATA[
  <figure id="zqZi" class="m_original">
    <img src="https://avatars.mds.yandex.net/i?id=c297d845732692b3f9521707ee421add_l-4377722-images-thumbs&n=13" width="2400" />
  </figure>
  <p id="bx2R">Для SEO я долго использовал Yoast SEO.</p>
  <p id="VtcQ">Это один из самых известных SEO-плагинов WordPress: сейчас у него более 10 млн активных установок.</p>
  <p id="JhDT">Мне нравится большое количество настроек и то, что практически всё необходимое для базового SEO уже есть внутри.</p>
  <p id="6fHS">Но сейчас я начал пробовать <strong>SEOPress</strong>.</p>
  <p id="sv2D">Пока рано говорить, что я окончательно перешёл на него — хочу сначала нормально поработать с ним на нескольких проектах.</p>
  <p id="HAMQ">Поэтому будет интересно сравнить их уже не по чужим обзорам, а по собственному опыту.</p>
  <p id="EpTo"><em>Продолжение эксперимента с SEOPress ещё будет.</em></p>
  <p id="9gdc">Попробовать <a href="https://wordpress.org/plugins/wordpress-seo/?utm_source=zhan.blog" target="_blank">Yoast SEO</a></p>
  <p id="EMZs">Попробовать <em><a href="https://wordpress.org/plugins/wp-seopress/?utm_source=zhan.blog" target="_blank">SEOPress</a> </em></p>

]]></content:encoded></item><item><guid isPermaLink="true">https://zhan.page/case</guid><link>https://zhan.page/case?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog</link><comments>https://zhan.page/case?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog#comments</comments><dc:creator>zhan.blog</dc:creator><title>Конвертер регистров текста</title><pubDate>Sat, 05 Sep 2026 22:24:12 GMT</pubDate><media:content medium="image" url="https://img1.teletype.in/files/44/d5/44d5cd0d-9609-4c0b-a771-928004ee9435.png"></media:content><category>👤 Моё</category><description><![CDATA[<img src="https://img1.teletype.in/files/4e/cb/4ecb98ff-bc57-450d-a6b9-9acf846fe866.png"></img>Иногда текст приходит в не самом удобном виде.]]></description><content:encoded><![CDATA[
  <figure id="oMFx" class="m_original">
    <img src="https://img1.teletype.in/files/4e/cb/4ecb98ff-bc57-450d-a6b9-9acf846fe866.png" width="1774" />
  </figure>
  <p id="SPuK">Иногда текст приходит в не самом удобном виде.</p>
  <p id="zaZ0">Например, вам отправили:</p>
  <p id="NRFR"><strong>ЭТОТ ТЕКСТ НУЖНО ПЕРЕПЕЧАТАТЬ</strong></p>
  <p id="xuZJ">А нужен обычный вариант:</p>
  <p id="Ptta"><strong>Этот текст нужно перепечатать</strong></p>
  <p id="BF92">Или, наоборот, нужно быстро преобразовать обычный текст в <strong>ВЕРХНИЙ РЕГИСТР</strong>.</p>
  <p id="2KAl">Вручную перепечатывать весь текст или исправлять каждую букву — не самое удобное занятие. Особенно если речь идёт о длинном предложении, нескольких абзацах или большом количестве текста.</p>
  <p id="pzDb">Поэтому я добавил на сайт ещё один небольшой, но полезный инструмент — <strong>конвертер регистров текста</strong>.</p>
  <p id="vm0i">С его помощью можно быстро изменить регистр текста без ручной перепечатки.</p>
  <h2 id="Sst9">Как пользоваться конвертером</h2>
  <p id="pup6">Работа с инструментом занимает буквально несколько секунд:</p>
  <ol id="uURt">
    <li id="cBml">Вставьте текст в поле ввода.</li>
    <li id="CVRI">Выберите нужный вариант преобразования.</li>
    <li id="ZeaN">Получите готовый результат.</li>
    <li id="LnK5">При необходимости сразу скопируйте его.</li>
  </ol>
  <p id="HEk8">Конвертер поддерживает несколько вариантов изменения текста:</p>
  <ul id="dUYD">
    <li id="vMcy"><strong>Верхний регистр</strong> — все буквы становятся заглавными.</li>
    <li id="nqLT"><strong>Нижний регистр</strong> — весь текст преобразуется в строчные буквы.</li>
    <li id="FI0o"><strong>Заглавные буквы</strong> — каждое слово начинается с заглавной буквы.</li>
    <li id="chOc"><strong>Инверсия регистра</strong> — заглавные буквы становятся строчными, а строчные — заглавными.</li>
  </ul>
  <p id="dzdy">Например, текст:</p>
  <blockquote id="qyHO">ЭТОТ ТЕКСТ НУЖНО ПЕРЕПЕЧАТАТЬ</blockquote>
  <p id="9VYU">можно быстро преобразовать в:</p>
  <blockquote id="kkor">Этот текст нужно перепечатать</blockquote>
  <p id="fogu">или в:</p>
  <blockquote id="CHdI">этот текст нужно перепечатать</blockquote>
  <p id="sOcv">Всё зависит от того, какой вариант вам нужен.</p>
  <h2 id="VQlb">Всё работает прямо в браузере</h2>
  <p id="dF7j">Для работы с конвертером не нужно устанавливать дополнительные программы или куда-либо загружать текст.</p>
  <p id="NPNd">Преобразование происходит локально — прямо в браузере.</p>
  <p id="rij2">Это значит, что можно быстро вставить текст, изменить его регистр и сразу использовать готовый результат в документе, сообщении, публикации или любом другом месте.</p>
  <h2 id="XGjV">Для чего может пригодиться</h2>
  <p id="Pnis">Такой инструмент может быть полезен в самых разных ситуациях.</p>
  <p id="KY5c">Например, когда нужно:</p>
  <ul id="uSCu">
    <li id="m0lQ">исправить случайно набранный текст в верхнем регистре;</li>
    <li id="SyFY">быстро преобразовать текст в <strong>ВЕРХНИЙ РЕГИСТР</strong>;</li>
    <li id="moif">сделать весь текст строчными буквами;</li>
    <li id="lOA6">изменить оформление заголовков;</li>
    <li id="Gmew">привести текст к более удобному виду;</li>
    <li id="pU9N">обработать длинное предложение или несколько абзацев без ручной перепечатки.</li>
  </ul>
  <p id="HDhE">Особенно удобно, когда текст уже готов, но его оформление нужно быстро изменить.</p>
  <p id="Wp8u">Вместо того чтобы редактировать каждую букву вручную, достаточно вставить текст в конвертер и выбрать нужный вариант.</p>
  <h2 id="MAhT">Просто, быстро и без лишнего</h2>
  <p id="CbEu">Я старался сделать этот инструмент максимально простым.</p>
  <p id="91KJ">На странице есть поле для исходного текста, готовый результат и несколько вариантов преобразования регистра. Также результат можно быстро скопировать одной кнопкой.</p>
  <p id="5YxW"><strong>Вставили текст → выбрали нужный регистр → получили результат → скопировали.</strong></p>
  <p id="VkOX"><a href="https://zhan.dev/items/case/?utm_source=zhan.blog" target="_blank">Маленький инструмент</a>, который не нужен каждый день, но в подходящий момент может здорово сэкономить время.</p>

]]></content:encoded></item><item><guid isPermaLink="true">https://zhan.page/pochemu-ya-postepenno-otkazyvayus-ot-jquery-v-wp</guid><link>https://zhan.page/pochemu-ya-postepenno-otkazyvayus-ot-jquery-v-wp?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog</link><comments>https://zhan.page/pochemu-ya-postepenno-otkazyvayus-ot-jquery-v-wp?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog#comments</comments><dc:creator>zhan.blog</dc:creator><title>Почему я постепенно отказываюсь от jQuery в WordPress</title><pubDate>Sat, 05 Sep 2026 22:16:40 GMT</pubDate><media:content medium="image" url="https://img4.teletype.in/files/fc/ee/fcee6c42-cc29-443e-99d5-9525d2608c3d.png"></media:content><category>💻 webDev</category><description><![CDATA[<img src="https://img4.teletype.in/files/78/fb/78fbfa06-2a6a-4353-b9e6-64a3666144f1.png"></img>В своих новых проектах я полностью отказался от jQuery в пользу vanilla JS.]]></description><content:encoded><![CDATA[
  <figure id="7CWD" class="m_original">
    <img src="https://img4.teletype.in/files/78/fb/78fbfa06-2a6a-4353-b9e6-64a3666144f1.png" width="2048" />
  </figure>
  <p id="A6FE">В своих новых проектах я полностью отказался от jQuery в пользу vanilla JS.</p>
  <p id="Y1mB">Не потому что jQuery плохой.</p>
  <p id="S6yf">Просто для многих задач, которые раньше решал через jQuery, современного JavaScript уже вполне достаточно.</p>
  <p id="oKvs">Например:</p>
  <p id="rOAq">— работа с DOM; <br />— обработчики событий; <br />— fetch; <br />— классы; <br />— модальные окна; <br />— мобильное меню; <br />— AJAX-запросы.</p>
  <p id="8a45">Плюс мне нравится, что в результате не нужно тащить дополнительную библиотеку туда, где она фактически не нужна.</p>
  <p id="wxzI">Сейчас как раз переписываю часть своей WordPress-структуры и параллельно перевожу JavaScript на vanilla JS.</p>
  <p id="Onxj">Посмотрим, насколько удобно будет поддерживать такой проект дальше.</p>

]]></content:encoded></item><item><guid isPermaLink="true">https://zhan.page/samsung-m8</guid><link>https://zhan.page/samsung-m8?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog</link><comments>https://zhan.page/samsung-m8?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog#comments</comments><dc:creator>zhan.blog</dc:creator><title>Samsung M8 [обзор]</title><pubDate>Sat, 05 Sep 2026 22:05:09 GMT</pubDate><media:content medium="image" url="https://img4.teletype.in/files/f1/b5/f1b58950-e34b-4121-91f5-88a41673773c.png"></media:content><category>⚙️ Технологии</category><description><![CDATA[<img src="https://img3.teletype.in/files/ef/44/ef44ec07-203e-4326-8249-13cd7476a5d4.jpeg"></img>Samsung M8 уже некоторое время является моим основным монитором. Я использую его каждый день для работы, иногда играю на нём и смотрю видео. За время использования он стал важной частью моего рабочего места, и в целом могу сказать сразу: устройством я очень доволен.]]></description><content:encoded><![CDATA[
  <figure id="gd5W" class="m_original">
    <img src="https://img3.teletype.in/files/ef/44/ef44ec07-203e-4326-8249-13cd7476a5d4.jpeg" width="3000" />
  </figure>
  <p id="gCkg">Samsung M8 уже некоторое время является моим основным монитором. Я использую его каждый день для работы, иногда играю на нём и смотрю видео. За время использования он стал важной частью моего рабочего места, и в целом могу сказать сразу: устройством я очень доволен.</p>
  <p id="7gWY">При выборе монитора для меня было важно получить большой и качественный экран, на котором будет комфортно проводить много часов подряд. Samsung M8 отлично подошёл под эти задачи.</p>
  <h2 id="NNss">Дизайн</h2>
  <p id="mAFD">Одной из причин, почему Samsung M8 сразу привлекает внимание, является его дизайн. Монитор выглядит минималистично и современно, поэтому хорошо вписывается в рабочее пространство.</p>
  <p id="Ppfy">Тонкий корпус, аккуратная подставка и практически безрамочный экран создают ощущение дорогого и продуманного устройства. На рабочем столе он выглядит скорее как часть современной экосистемы, чем просто обычный монитор.</p>
  <p id="OSeO">При этом для меня важен не только внешний вид. Samsung M8 используется у меня как основной монитор, поэтому гораздо важнее оказалось то, насколько комфортно с ним работать каждый день.</p>
  <h2 id="u2VU">Дисплей</h2>
  <p id="6bEI">Большой экран Samsung M8 отлично подходит для работы. На нём удобно одновременно держать открытыми несколько окон, работать с кодом, браузером и другими приложениями.</p>
  <p id="aA0r">Большая диагональ особенно ощущается при длительной работе. Не приходится постоянно переключаться между окнами, а на экране помещается значительно больше полезной информации.</p>
  <p id="lNvY">Монитор также хорошо подходит для просмотра видео. Большой экран делает фильмы и ролики значительно приятнее, особенно если проводить за компьютером много времени.</p>
  <p id="kiYT">Иногда я использую Samsung M8 и для игр. Конечно, это не специализированный игровой монитор, но для моих сценариев его возможностей вполне достаточно.</p>
  <p id="MJ1z">В целом это достаточно универсальное устройство: на нём одинаково удобно работать, играть и смотреть видео.</p>
  <h2 id="ufZw">Встроенные функции</h2>
  <p id="Q737">Одной из особенностей Samsung M8 являются его смарт-функции. Монитор можно использовать не только как обычный дисплей, но и как самостоятельное устройство с различными приложениями и дополнительными возможностями.</p>
  <p id="x2Xk">Однако лично я этими функциями практически не пользуюсь. Монитор подключён к компьютеру и большую часть времени используется именно в качестве основного экрана.</p>
  <p id="3LYM">То же самое касается встроенных динамиков. Они здесь есть, но я предпочитаю использовать наушники <a href="https://zhan.page/sony-wh-1000xm6-obzor" target="_blank">Sony WH-1000XM6</a>, поэтому встроенный звук для меня практически не имеет значения.</p>
  <h2 id="0uuQ">Веб-камера</h2>
  <p id="Pq3Z">В Samsung M8 предусмотрена встроенная веб-камера, однако здесь есть один нюанс, с которым я столкнулся при использовании монитора.</p>
  <p id="sc0K">Камера работает только при подключении монитора к компьютеру через USB Type-C. У меня же монитор подключён через DisplayPort, поэтому в таком режиме встроенная камера напрямую не работает.</p>
  <p id="ZH65">При необходимости её можно использовать отдельно, подключив камеру напрямую к компьютеру через USB Type-C.</p>
  <p id="Savw">Для меня это не стало серьёзной проблемой, поскольку веб-камерой я пользуюсь не так часто, но этот момент стоит учитывать при выборе способа подключения монитора.</p>
  <h2 id="WGQ2">Цветопередача в Windows 11</h2>
  <p id="DJ4q">Ещё один небольшой недостаток связан с Windows 11. Система по умолчанию не добавляет для Samsung M8 подходящий цветовой профиль, из-за чего цвета отображаются немного некорректно.</p>
  <p id="DC28">Чтобы решить эту проблему, я скачал из интернета и установил цветовой профиль Samsung S32CM80x. После этого цветопередача стала нормальной и монитор начал отображать изображение так, как ожидаешь.</p>
  <p id="yLld">Это не критичная проблема, и решается она достаточно просто, но хотелось бы, чтобы Windows 11 автоматически определяла монитор и устанавливала подходящий профиль без дополнительных действий со стороны пользователя.</p>
  <h2 id="LC1r">Выводы</h2>
  <p id="ryOn">Samsung M8 оказался отличным монитором для моего основного сценария использования. На нём удобно работать, смотреть видео и играть. Большой экран, современный дизайн и общее качество устройства делают работу за компьютером значительно комфортнее.</p>
  <p id="mg6K">Да, я практически не использую смарт-функции и встроенные динамики, а встроенная веб-камера имеет ограничения в зависимости от способа подключения. Также пришлось самостоятельно установить цветовой профиль для нормальной цветопередачи в Windows 11.</p>
  <p id="xxXt">Но для меня все эти недостатки не смогли испортить общее впечатление от устройства.</p>
  <p id="8VnW">Samsung M8 стал моим основным монитором, которым я пользуюсь каждый день, и за всё время использования я ни разу не пожалел о своём выборе. В целом я очень доволен этим монитором и могу рекомендовать его тем, кто ищет большой, красивый и универсальный экран для работы, развлечений и повседневного использования.</p>

]]></content:encoded></item><item><guid isPermaLink="true">https://zhan.page/boxicons</guid><link>https://zhan.page/boxicons?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog</link><comments>https://zhan.page/boxicons?utm_source=teletype&amp;utm_medium=feed_rss&amp;utm_campaign=zhan.blog#comments</comments><dc:creator>zhan.blog</dc:creator><title>Boxicons — большая коллекция бесплатных иконок</title><pubDate>Wed, 02 Sep 2026 21:57:23 GMT</pubDate><category>💻 webDev</category><description><![CDATA[Если вы делаете сайты, наверняка периодически ищете нормальные SVG-иконки.]]></description><content:encoded><![CDATA[
  <p id="5q3r">Если вы делаете сайты, наверняка периодически ищете нормальные SVG-иконки.</p>
  <p id="DAs7">Я уже давно использую <strong>Boxicons</strong>.</p>
  <p id="AOT1">У них есть большая коллекция иконок разных категорий, в том числе отдельный набор бесплатных иконок.</p>
  <p id="V5A0">Мне особенно нравится, что библиотека подходит именно для веб-разработки.</p>
  <p id="qwDv">Можно использовать иконки как SVG или подключить их через icon font.</p>
  <p id="UICx">А бесплатные иконки распространяются по лицензии CC 4.0, код — MIT, а шрифты — SIL OFL 1.1.</p>
  <p id="7AA6">Если делаете сайты — рекомендую добавить в закладки.</p>
  <p id="s4nN"><a href="https://boxicons.com/" target="_blank">Перейти на сайт</a></p>

]]></content:encoded></item></channel></rss>