<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Rafael </title>
    <description>The latest articles on DEV Community by Rafael  (@rafa-2bf5801af808188).</description>
    <link>https://dev.to/rafa-2bf5801af808188</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4021610%2F6102418c-2151-48f4-9727-002d7f92fd7f.png</url>
      <title>DEV Community: Rafael </title>
      <link>https://dev.to/rafa-2bf5801af808188</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/rafa-2bf5801af808188"/>
    <language>en</language>
    <item>
      <title>Благодаря EPYC Venice, заглядываем в будущее настольных процессоров Zen 6</title>
      <dc:creator>Rafael </dc:creator>
      <pubDate>Sat, 25 Jul 2026 11:57:59 +0000</pubDate>
      <link>https://dev.to/rafa-2bf5801af808188/blaghodaria-epyc-venice-zaghliadyvaiem-v-budushchieie-nastolnykh-protsiessorov-zen-6-4b1i</link>
      <guid>https://dev.to/rafa-2bf5801af808188/blaghodaria-epyc-venice-zaghliadyvaiem-v-budushchieie-nastolnykh-protsiessorov-zen-6-4b1i</guid>
      <description>&lt;p&gt;Моя Мысль такая — это последние или предпоследние поколение классической модели вычеслений.&lt;br&gt;
Далее она должна стать частью более сложной гетерогенной архитектуры, где память и вычесления сложно переплетены на разных уровнях абстракций.В разработке таких структур поможет ИИ, &lt;br&gt;
Мысль пришла на чтение этой статьи, мне вспомнилось что в 2019 году я обсуждал, что память и вычесления надо "засовывать внутрь абстракции процесов" и делать разные уровни абстракций. Т.е. компьютер становится сетевой моделью микроэвм внутри одной "большой" ЭВМ, где видеокарта это ЭВМ, память это ЭВМ, сетевая карта это ЭВМ, кеш между ядрами это тоже ЭВМ, блок ИИ это ЭВМ, декодер это ЭВМ и т.д.&lt;br&gt;
Статью которая мне напомнила эту мысль взял тут - &lt;a href="https://ru.gecid.com/news/zavdyaki_epyc_venice_zaglyada_mo_u_majbutn_nast_lnih_procesor_v_zen_6/" rel="noopener noreferrer"&gt;https://ru.gecid.com/news/zavdyaki_epyc_venice_zaglyada_mo_u_majbutn_nast_lnih_procesor_v_zen_6/&lt;/a&gt;&lt;br&gt;
Притом понятно что 12-16 ядер на "сборку" чиплет это условно максимальный предел для нераспареливаемых задач, далее не имеет смысла. Тяжело представит код сраспралеливанием более 75%, кроме специфических медия, и математических случаев, но на этот случай есть вариант много чиплетных сборок.см.Закон Амдала - &lt;a href="https://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%BA%D0%BE%D0%BD_%D0%90%D0%BC%D0%B4%D0%B0%D0%BB%D0%B0" rel="noopener noreferrer"&gt;https://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%BA%D0%BE%D0%BD_%D0%90%D0%BC%D0%B4%D0%B0%D0%BB%D0%B0&lt;/a&gt;,&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Бытовые ПК 24 ядер и 48 потоков&lt;/li&gt;
&lt;li&gt;Серверные 256 ядер и 512 потоков&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;25-07-2026 11:07&lt;br&gt;
Благодаря EPYC Venice, заглядываем в будущее настольных процессоров Zen 6&lt;br&gt;
Вызывает искреннее удивление смена стратегии AMD, которая на июльском мероприятии Advancing AI объявила об официальном запуске серверных процессоров EPYC Venice на новой архитектуре Zen 6, заставив геймеров ждать выхода настольных Ryzen Olympic Ridge вплоть до начала 2027 года.&lt;/p&gt;

&lt;p&gt;Раньше компания всегда показывала новые разработки первым делом для ПК, но на этот раз приоритет сместился на дата-центры и ИИ. Впрочем, этот анонс не столько рассекретил, сколько окончательно подтвердил многочисленные слухи о характеристиках будущих настольных процессоров, которые давно витали в воздухе.&lt;/p&gt;

&lt;p&gt;Главным технологическим скачком станет переход на новейший 2-нанометровый техпроцесс TSMC N2P. Здесь кроется ключевая интрига для всего рынка: Intel наконец-то догнала AMD по уровню передовых техпроцессов, ведь раньше она традиционно оставалась в роли догоняющей. Будущая линейка Intel Nova Lake-S также будет строиться на 2-нанометровых мощностях TSMC, так что разработчики впервые оказываются в равных условиях. Тем интереснее будет увидеть, чья архитектура выжмет максимум из этого техпроцесса.&lt;/p&gt;

&lt;p&gt;Для пользователей настоящей революцией станет возвращение битвы за количество ядер и изменение их компоновки. Впервые за много лет один CCD будет содержать не 8, а сразу 12 ядер, благодаря чему топовый настольный процессор с двумя CCD предложит впечатляющие 24 ядра и 48 потоков. Вместе с этим объем базового L3-кеша вырастет до 48 Мегабайт на CCD (96 Мегабайт у флагмана), а будущие версии с фирменной технологией 3D V-Cache получат еще больший запас памяти. К тому же AMD полностью переработает контроллер оперативной памяти, добавив родную поддержку скоростных модулей DDR5-7200 CUDIMM.&lt;/p&gt;

&lt;p&gt;Новый техпроцесс N2P обеспечит среднее снижение энергопотребления на 10 % при том же количестве ядер. Это высвобождает дополнительный запас мощности, который AMD направит на наращивание частот. Если базовые серверные Zen 6 работают до 5,00 ГГц, а V-Cache версии — до 5,15 ГГц, то настольные Ryzen за счет нового техпроцесса смогут выйти на базовый диапазон 6,0–6,2 ГГц. Это поставит их в один ряд с процессорами Intel Raptor Lake Refresh, которые сейчас удерживают рекорд частоты на ПК после того, как Intel снизила показатели в Arrow Lake.&lt;/p&gt;

&lt;p&gt;Впереди нас ждет ожесточенная битва новых архитектур, платформ и ядерных конфигураций, ведь противостояние Zen 6 и Nova Lake-S на одинаковых 2-нанометровых рельсах будет как никогда равным.&lt;/p&gt;

&lt;p&gt;wccftech.com&lt;br&gt;
Павлик Александр&lt;/p&gt;

</description>
      <category>hard</category>
    </item>
    <item>
      <title>[Boost]</title>
      <dc:creator>Rafael </dc:creator>
      <pubDate>Sat, 25 Jul 2026 11:49:33 +0000</pubDate>
      <link>https://dev.to/rafa-2bf5801af808188/25-07-2026-1107-blaghodaria-epyc-venice-zaghliadyvaiem-v-budushchieie-nastolnykh-protsiessorov-zen-6-vyzyvaiet-9mp</link>
      <guid>https://dev.to/rafa-2bf5801af808188/25-07-2026-1107-blaghodaria-epyc-venice-zaghliadyvaiem-v-budushchieie-nastolnykh-protsiessorov-zen-6-vyzyvaiet-9mp</guid>
      <description></description>
    </item>
    <item>
      <title>(html) - старый стандарт</title>
      <dc:creator>Rafael </dc:creator>
      <pubDate>Tue, 21 Jul 2026 16:35:30 +0000</pubDate>
      <link>https://dev.to/rafa-2bf5801af808188/html-staryi-standart-2f5a</link>
      <guid>https://dev.to/rafa-2bf5801af808188/html-staryi-standart-2f5a</guid>
      <description>&lt;p&gt;Главным первоисточником информации о первых 18 тегах является официальный исторический архив Консорциума Всемирной паутины (W3C).&lt;br&gt;
Этот документ называется «HTML Tags» («Теги HTML»). Тим Бернерс-Ли впервые опубликовал его в сети в конце 1991 года. [1] &lt;br&gt;
Оригинальную копию этой страницы, которая физически хранилась на первом в мире веб-сервере в CERN, можно изучить непосредственно в &lt;a href="https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html" rel="noopener noreferrer"&gt;архиве документов W3C 1992 года&lt;/a&gt;. [2] &lt;/p&gt;
&lt;h2&gt;
  
  
  Полный список тех самых 18 тегов:
&lt;/h2&gt;

&lt;p&gt;Если открыть этот исторический документ, то в нем описаны следующие элементы:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;   1. &amp;lt;a&amp;gt; — Anchor (тот самый тег для гиперссылок и якорей).
   2. &amp;lt;title&amp;gt; — заголовок страницы (название вкладки).
   3. &amp;lt;p&amp;gt; — абзац текста.
   4. &amp;lt;h1&amp;gt; — заголовок 1-го уровня.
   5. &amp;lt;h2&amp;gt; — заголовок 2-го уровня.
   6. &amp;lt;h3&amp;gt; — заголовок 3-го уровня.
   7. &amp;lt;h4&amp;gt; — заголовок 4-го уровня.
   8. &amp;lt;h5&amp;gt; — заголовок 5-го уровня.
   9. &amp;lt;h6&amp;gt; — заголовок 6-го уровня.
   10. &amp;lt;ul&amp;gt; — маркированный (неупорядоченный) список.
   11. &amp;lt;li&amp;gt; — элемент списка.
   12. &amp;lt;dl&amp;gt; — список определений.
   13. &amp;lt;dt&amp;gt; — термин в списке определений.
   14. &amp;lt;dd&amp;gt; — описание (определение) термина.
   15. &amp;lt;address&amp;gt; — информация об авторе и контактах.
   16. &amp;lt;menu&amp;gt; — список меню (устарел, хотя в HTML5 переосмыслен).
   17. &amp;lt;dir&amp;gt; — список директорий (полностью удален из современного HTML).
   18. &amp;lt;isindex&amp;gt; — тег для создания простого поля поиска по документу (полностью удален). [3, 4] 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Два тега-«бонуса» из того же документа
&lt;/h2&gt;

&lt;p&gt;В самом тексте источника также упоминаются еще два специфических тега, из-за чего некоторые исследователи насчитывают 20 элементов: [4] &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;nextid&amp;gt;&lt;/code&gt; — технический тег для генерации уникальных идентификаторов старыми текстовыми редакторами.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;lt;plaintext&amp;gt;&lt;/code&gt; — тег, который заставлял браузер игнорировать любую разметку до самого конца документа и выводить код как обычный текст. [4] &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Примечательно, что таких привычных нам базовых тегов, как &lt;code&gt;&amp;lt;html&amp;gt;, &amp;lt;head&amp;gt;, &amp;lt;body&amp;gt; или &amp;lt;img&amp;gt;,&lt;/code&gt; в самом первом документе Тима Бернерса-Ли еще не существовало — они появились чуть позже. [5, 6] &lt;br&gt;
Хотите узнать, какой именно тег из этого списка исчез самым первым и почему, или как работал встроенный поиск через тег&lt;code&gt;&amp;lt;isindex&amp;gt;?&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;[1] &lt;a href="https://ru.wikipedia.org/wiki/HTML" rel="noopener noreferrer"&gt;https://ru.wikipedia.org&lt;/a&gt;&lt;br&gt;
[2] &lt;a href="https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html" rel="noopener noreferrer"&gt;https://www.w3.org&lt;/a&gt;&lt;br&gt;
[3] &lt;a href="https://craftsmen.nl/html-from-the-stone-age-to-the-21st-century/" rel="noopener noreferrer"&gt;https://craftsmen.nl&lt;/a&gt;&lt;br&gt;
[4] &lt;a href="https://www.webdesignmuseum.org/web-design-history/tim-berners-lee-published-a-document-called-html-tags-1991" rel="noopener noreferrer"&gt;https://www.webdesignmuseum.org&lt;/a&gt;&lt;br&gt;
[5] &lt;a href="https://www.w3.org/People/Raggett/book4/ch02.html" rel="noopener noreferrer"&gt;https://www.w3.org&lt;/a&gt;&lt;br&gt;
[6] &lt;a href="https://sky.pro/wiki/html/istoriya-html-ot-nachala-do-segodnyashnego-dnya/" rel="noopener noreferrer"&gt;https://sky.pro&lt;/a&gt;&lt;/p&gt;

</description>
      <category>frontend</category>
      <category>html</category>
      <category>web</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Free Lossless Image Format (FLIF) ?</title>
      <dc:creator>Rafael </dc:creator>
      <pubDate>Tue, 21 Jul 2026 16:22:28 +0000</pubDate>
      <link>https://dev.to/rafa-2bf5801af808188/free-lossless-image-format-flif--4205</link>
      <guid>https://dev.to/rafa-2bf5801af808188/free-lossless-image-format-flif--4205</guid>
      <description>&lt;p&gt;Free Lossless Image Format (FLIF) — это открытый формат сжатия растровых изображений без потери качества, разработанный в 2015 году с целью заменить PNG, lossless WebP, BPG и JPEG 2000. По заявлениям создателей, он обеспечивает наивысшую степень компрессии в своем классе, делая файлы значительно меньше аналогов без ущерба для исходных пикселей. [1, 2, 3] &lt;/p&gt;

&lt;h2&gt;
  
  
  Ключевые особенности формата
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Алгоритм MANIAC. Сжатие основано на уникальном методе Meta-Adaptive Near-zero Integer Arithmetic Coding (производная от CABAC), который подстраивается под контекст изображения в реальном времени. [1, 4] &lt;/li&gt;
&lt;li&gt;Прогрессивное декодирование. По умолчанию файлы используют чересстрочную запись. Даже при частичной загрузке (например, при слабом интернет-соединении) пользователь сразу видит изображение целиком в низком качестве, которое постепенно детализируется. [1] &lt;/li&gt;
&lt;li&gt;Универсальность. Одинаково эффективно сжимает как фотографии, так и графику, чертежи, медицинские снимки (МРТ) и текстовые документы. [2, 5] &lt;/li&gt;
&lt;li&gt;Продвинутые параметры. Поддерживает анимацию, альфа-канал (прозрачность), цветовые модели RGB, RGBA, Grayscale и глубину цвета до 16 бит на канал. [1, 2] &lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Сравнение эффективности сжатия
&lt;/h2&gt;

&lt;p&gt;Формат FLIF демонстрирует впечатляющие показатели экономии дискового пространства и сетевого трафика. В среднем файлы FLIF оказываются меньше конкурентов в режиме Lossless (без потерь):&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Формат для сравнения&lt;/th&gt;
&lt;th&gt;На сколько FLIF эффективнее (меньше по размеру)&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Обычный PNG&lt;/td&gt;
&lt;td&gt;на ~43% меньше&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Сжатый через ZopfliPNG&lt;/td&gt;
&lt;td&gt;на ~33% меньше&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Lossless BPG&lt;/td&gt;
&lt;td&gt;на ~22% меньше&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Lossless JPEG 2000&lt;/td&gt;
&lt;td&gt;на ~37% меньше&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Lossless WebP&lt;/td&gt;
&lt;td&gt;на ~14–15% меньше&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Текущий статус проекта
&lt;/h2&gt;

&lt;p&gt;Несмотря на технологическое превосходство в сжатии, FLIF не получил широкого распространения и сегодня считается устаревшим. Главными причинами стали высокая нагрузка на процессор при кодировании и отсутствие встроенной поддержки в популярных браузерах.&lt;br&gt;
В итоге авторы FLIF объединили свои усилия с другими разработчиками для создания JPEG XL (JXL). Новый формат JPEG XL вобрал в себя лучшие идеи FLIF (включая его наработки по энтропийному сжатию), добавил поддержку сжатия с потерями и стал официальным преемником технологии. [6] &lt;br&gt;
Если вы хотите узнать больше о практическом применении формата, подскажите:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Для каких целей или задач вы рассматриваете использование FLIF?&lt;/li&gt;
&lt;li&gt;Интересуют ли вас инструменты для конвертации файлов в этот формат?&lt;/li&gt;
&lt;li&gt;Хотите узнать больше о его преемнике — JPEG XL?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;[1] &lt;a href="https://ru.wikipedia.org/wiki/Free_Lossless_Image_Format" rel="noopener noreferrer"&gt;https://ru.wikipedia.org&lt;/a&gt;&lt;br&gt;
[2] &lt;a href="https://www.prophotos.ru/news/17409-flif-novyy-format-faylov-so-szhatiem-izobrazheniya-bez-poter" rel="noopener noreferrer"&gt;https://www.prophotos.ru&lt;/a&gt;&lt;br&gt;
[3] &lt;a href="https://www.keycdn.com/support/flif" rel="noopener noreferrer"&gt;https://www.keycdn.com&lt;/a&gt;&lt;br&gt;
[4] &lt;a href="https://opennet.ru/43074-flif" rel="noopener noreferrer"&gt;https://opennet.ru&lt;/a&gt;&lt;br&gt;
[5] &lt;a href="https://www.online-convert.com/ru/file-format/flif" rel="noopener noreferrer"&gt;https://www.online-convert.com&lt;/a&gt;&lt;br&gt;
[6] &lt;a href="https://www.kansoftware.ru/?tid=26136" rel="noopener noreferrer"&gt;https://www.kansoftware.ru&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>tect iframe CodePen</title>
      <dc:creator>Rafael </dc:creator>
      <pubDate>Tue, 21 Jul 2026 16:07:13 +0000</pubDate>
      <link>https://dev.to/rafa-2bf5801af808188/tect-iframe-codepen-59o4</link>
      <guid>https://dev.to/rafa-2bf5801af808188/tect-iframe-codepen-59o4</guid>
      <description>&lt;ul&gt;
&lt;li&gt;&lt;a href="https://dev.to/p/markdown_basics"&gt;Markdown Basics - DEV Community&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/mwanahamuntu_/how-to-embed-your-codepens-into-your-dev-to-posts-it-s-easy-4iji"&gt;How to Embed CodePens into your dev.to posts - It's easy. - DEV Community&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/devteam/ways-to-enhance-your-dev-posts-useful-embeds-1g0f"&gt;Ways to enhance your DEV posts! Useful embeds. - DEV Community&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/p/editor_guide"&gt;Editor Guide - DEV Community&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Это специальная настройка, которая управляет тем, что именно читатель увидит в первую очередь, когда откроется ваша статья.Разберем эту команду по частям: default-tab=html,result &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;default-tab= — переводится как «вкладка по умолчанию». Эта команда указывает плееру CodePen, какие панели активировать при загрузке страницы.&lt;/li&gt;
&lt;li&gt;html — включает отображение панели с вашим HTML-кодом.result — включает отображение панели с результатом (работающей интерактивной страницей).,

&lt;ul&gt;
&lt;li&gt;(запятая) — знак разделения.  Она приказывает плееру включить обе панели одновременно, разделив экран пополам.Что в итоге увидит читатель статьи?
/&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Экран разделится на две части:В одной половине читатель будет видеть ваш исходный HTML-код.В другой половине он сразу увидит, как этот код работает (картинку, анимацию, кнопку и т.д.).&lt;br&gt;
Другие варианты, которые можно использовать:&lt;br&gt;
Если вы измените слова после знака =, поведение плеера поменяется:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;default-tab=css,result — покажет панель со стилями CSS и результат.&lt;/li&gt;
&lt;li&gt;default-tab=js,result — покажет панель с логикой JavaScript и результат.&lt;/li&gt;
&lt;li&gt;default-tab=result — скроет весь код.
Читатель увидит только чистый готовый результат, а код сможет посмотреть, только если сам нажмет кнопку «Edit on CodePen».&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/editor/FRR-from-Mars/embed/019f7fe8-5e41-7938-b8b7-1303705da74b?height=600&amp;amp;default-tab=html,result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
    </item>
    <item>
      <title>(html) — ссылки заглушки</title>
      <dc:creator>Rafael </dc:creator>
      <pubDate>Mon, 20 Jul 2026 14:59:16 +0000</pubDate>
      <link>https://dev.to/rafa-2bf5801af808188/html-ssylki-zaghlushki-3dc8</link>
      <guid>https://dev.to/rafa-2bf5801af808188/html-ssylki-zaghlushki-3dc8</guid>
      <description>&lt;h2&gt;
  
  
  Создание  ссылок в некуда(заглушек)
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Рекомендуемые способы&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; &lt;strong&gt;Способ 1: Тег &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; без атрибута &lt;code&gt;href&lt;/code&gt;&lt;/strong&gt; — Официальный стандарт спецификации HTML5 (так называемый &lt;em&gt;placeholder link&lt;/em&gt;). Используется, когда ссылка должна служить временной заглушкой (например, для текущей страницы в меню). Для превращения в полноценную заглушку со стилем ссылки требует CSS-правила &lt;code&gt;cursor: pointer;&lt;/code&gt;.

&lt;ul&gt;
&lt;li&gt;Отключает выбор ссылки с клавы методом &lt;code&gt;таб&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Важное дополнение об accessibility:&lt;/strong&gt; Этот способ делает ссылку &lt;strong&gt;нефокусируемой с клавиатуры&lt;/strong&gt; (&lt;code&gt;Tab&lt;/code&gt;). Эксперты по доступности (из Гарварда) и разработчики на Stack Overflow категорически рекомендуют добавлять атрибут &lt;code&gt;tabindex="0"&lt;/code&gt;, чтобы пользователи могли взаимодействовать с ней с клавиатуры. Без этого элементарно &lt;code&gt;cursor: pointer&lt;/code&gt; недостаточно.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Способ 2: &lt;code&gt;href="#блабла"&lt;/code&gt; + &lt;code&gt;onclick="return false;"&lt;/code&gt;&lt;/strong&gt; — Рабочее решение с перехватом события. Конструкция &lt;code&gt;return false;&lt;/code&gt; в JavaScript блокирует стандартное поведение браузера. Ссылка сохраняет внешний вид, но при клике страница не скроллится наверх.

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;#блабла&lt;/code&gt; - любой контекст после решетки, можно 1 символ, пусто не рекомендовано запустит обработку события переход на &lt;code&gt;#&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Нерекомендуемые способы&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Способ: &lt;code&gt;javascript:void(0);&lt;/code&gt;&lt;/strong&gt; —  Оператор &lt;code&gt;void(0)&lt;/code&gt; возвращает &lt;code&gt;undefined&lt;/code&gt;, благодаря чему браузер игнорирует переход, страница не прыгает вверх, а URL в адресной строке не засоряется лишними символами.

&lt;ul&gt;
&lt;li&gt;- &lt;strong&gt;Почему плохо:&lt;/strong&gt; Нарушает принцип ненавязчивого JavaScript, смешивает поведение с разметкой, может вызывать проблемы в браузерах с блокировщиками ссылок (некоторые антивирусы/расширения обрабатывают такие ссылки как подозрительные).&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Актуальная рекомендация:&lt;/strong&gt; Избегать.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Способ:  &lt;strong&gt;Атрибут &lt;code&gt;href="#"&lt;/code&gt;&lt;/strong&gt; — Переносит пользователя на пустой якорь (в самый верх страницы). Это ломает пользовательский опыт (UX) при длинном скролле и засоряет URL-строку символом решетки.&lt;/li&gt;
&lt;li&gt;Способ:  &lt;strong&gt;Атрибут &lt;code&gt;href="##"&lt;/code&gt; или &lt;code&gt;href="#!"&lt;/code&gt;&lt;/strong&gt; — Решает проблему со скроллом наверх (так как браузер ищет несуществующий ID), но все еще засоряет адресную строку и историю переходов браузера лишними символами.&lt;/li&gt;
&lt;li&gt;Способ:  &lt;strong&gt;Пустой атрибут &lt;code&gt;href=""&lt;/code&gt;&lt;/strong&gt; — «Нежелательное поведение: браузер воспринимает пустую строку как ссылку на текущую страницу, что приводит к перезагрузке. Этого стоит избегать, хотя технически это не ошибка валидации.»&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Учебно тренировочный   способ допустим&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;*&lt;em&gt;Атрибут &lt;code&gt;href="##"&lt;/code&gt; или `href="#!"
*&lt;/em&gt;*&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  CSS для  способа 1
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`css&lt;br&gt;
/* Вариант 1: Для разработки и тестирования (подсветка забытых ссылок) */&lt;br&gt;
a:not([href]) {&lt;br&gt;
    color: red;&lt;br&gt;
    text-transform: uppercase;&lt;br&gt;
    border: 2px dashed red;&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;/* Вариант 2: Для живого сайта (превращение плейсхолдера в обычную ссылку) &lt;em&gt;/&lt;br&gt;
a:not([href]) {&lt;br&gt;
    cursor: pointer;&lt;br&gt;
    color: #0066cc; /&lt;/em&gt; задать цвет как у обычной ссылки */&lt;br&gt;
} &lt;br&gt;
`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;В чём фишка каждого варианта:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Первый вариант (закомментированный)&lt;/strong&gt; — это идеальный инструмент для отладки. Он работает как «сигнализация»: сразу подсвечивает красным цветом и рамкой все ссылки без адреса, чтобы верстальщик случайно не забыл поставить реальную ссылку перед запуском сайта.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Второй вариант&lt;/strong&gt; — это чистовое решение для продакшена. Оно возвращает ссылке-заглушке стандартный внешний вид и привычный пользователю курсор-палец (&lt;code&gt;cursor: pointer&lt;/code&gt;), который у тега &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; без &lt;code&gt;href&lt;/code&gt; по умолчанию пропадает.&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  Источнки
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://htmlacademy.ru/blog/html/empty-links?ysclid=mrqj0f3x6467807025" rel="noopener noreferrer"&gt;Как ставить пустые ссылки —&amp;nbsp;журнал «Доктайп»&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://ru.stackoverflow.com/questions/863464/%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B0-%D1%81-%D0%B7%D0%B0%D0%B3%D0%BB%D1%83%D1%88%D0%BA%D0%BE%D0%B9" rel="noopener noreferrer"&gt;html - Ссылка с заглушкой - Stack Overflow на русском&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://sky.pro/wiki/html/sozdanie-html-ssylki-kotoraya-nikuda-ne-vedet-reshenie/" rel="noopener noreferrer"&gt;Создание HTML-ссылки, которая никуда не ведет: решение&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://breadcrumbs.gitbook.io/base-1/1.-12.-kak-delat-pustye-ssylki" rel="noopener noreferrer"&gt;1. 12. Как делать пустые ссылки? | Разметка&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://translated.turbopages.org/proxy_u/en-ru.ru.7102ec94-6a5e2bd1-55ba3f4c-74722d776562/https/stackoverflow.com/questions/1830927/how-do-i-make-a-link-that-goes-nowhere" rel="noopener noreferrer"&gt;html - How do I make a link that goes nowhere? - Stack Overflow&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;ul&gt;
&lt;li&gt;&lt;a href="https://stackoverflow.com/questions/5292343/is-an-anchor-tag-without-the-href-attribute-safe/5292454#comment64135186_5292454?lastactivity" rel="noopener noreferrer"&gt;html - Is an anchor tag without the href attribute safe? - Stack Overflow&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Обратите внимание, что без &lt;code&gt;href&lt;/code&gt; &lt;code&gt;cursor: pointer&lt;/code&gt; Стиль не будет автоматически добавлен в элемент.&lt;/li&gt;
&lt;li&gt;&lt;a href="https://stackoverflow.com/review/first-posts/5646546" rel="noopener noreferrer"&gt;Обзор первых сообщений - Stack Overflow&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;С точки зрения доступности &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt;без href не поддается вкладке, все ссылки должны быть пригодны для вкладки, поэтому добавьте &lt;code&gt;tabindex="0"&lt;/code&gt;Если у тебя нет тельца.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://accessibility.huit.harvard.edu/technique-keyboard-accessible-links" rel="noopener noreferrer"&gt;✎ Technique: Keyboard accessible links | Digital Accessibility​ Services&lt;/a&gt;
***&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>(html) — Markdown. Extra to html</title>
      <dc:creator>Rafael </dc:creator>
      <pubDate>Mon, 20 Jul 2026 10:17:11 +0000</pubDate>
      <link>https://dev.to/rafa-2bf5801af808188/stackedit-mdextra-to-html-1jp6</link>
      <guid>https://dev.to/rafa-2bf5801af808188/stackedit-mdextra-to-html-1jp6</guid>
      <description>&lt;p&gt;Это ситуация возникла потому что в стандартном маркдаун нет дефениции, но она есть в маркдаун-эктсра&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Пример разметки "дефениции" на markdown.extra
Яблоко
:   Плод яблони, который употребляется в пищу в свежем
    виде, служит сырьём в кулинарии и для приготовления
    напитков. 

Апельсин
:   Плод апельсинного дерева, родом из Китая.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;YES

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://michelf.ca/projects/php-markdown/dingus/" rel="noopener noreferrer"&gt;PHP Markdown: Dingus&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://stackedit.io/app#" rel="noopener noreferrer"&gt;StackEdit&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Источники
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://michelf.ca/projects/php-markdown/extra/" rel="noopener noreferrer"&gt;PHP Markdown Extra&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://softwaremaniacs.org/blog/2006/01/02/markdown-extra/" rel="noopener noreferrer"&gt;Markdown. Extra.&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;блог дижок - &lt;a href="http://ibnteo.klava.org/project/rss_markdown_blog" rel="noopener noreferrer"&gt;RSS &amp;amp; Markdown Blog - Блог Вольки&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="https://belousovv.ru/php/MarkdownExtra" rel="noopener noreferrer"&gt;Описание Markdown Extra | Belousovv.ru&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>(html) — Как ставить пустые ссылки</title>
      <dc:creator>Rafael </dc:creator>
      <pubDate>Sat, 18 Jul 2026 15:39:04 +0000</pubDate>
      <link>https://dev.to/rafa-2bf5801af808188/html-kak-stavit-pustyie-ssylki-5efc</link>
      <guid>https://dev.to/rafa-2bf5801af808188/html-kak-stavit-pustyie-ssylki-5efc</guid>
      <description>&lt;h2&gt;
  
  
  Стащил к себе
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://htmlacademy.ru/blog/html/empty-links?ysclid=mrqj0f3x6467807025" rel="noopener noreferrer"&gt;Как ставить пустые ссылки —&amp;nbsp;журнал «Доктайп»&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Как ставить пустые ссылки&lt;br&gt;
Евгений Шкляр&lt;br&gt;
3–5 минут&lt;/p&gt;

&lt;p&gt;Пустые ссылки делают, когда страницы ещё нет, а ссылка на неё уже есть. Например, в меню может быть ссылка на каталог, который ещё не начали верстать. Второй случай использования — когда нужно что-то показать на странице, но без перезагрузки страницы. Например, при создании модальных окон.&lt;/p&gt;

&lt;p&gt;Есть несколько способов указывать пустые ссылки. Рассмотрим, чем грозит использование того или иного способа.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;a href=""&amp;gt;Каталог&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Один из самых худших вариантов, так как полностью перезагружает страницу. Скорее всего, с целью борьбы с ним и были созданы остальные способы создания пустых ссылок.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;a href="#"&amp;gt;Каталог&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Изменяет адрес страницы, добавляет в конце #. Если было htmlacademy.ru, то после клика станет htmlacademy.ru/#. Прокручивает страницу к самому верху сайта. Если ссылка была в футере, то сайт прокрутится до самого начала. Это не всегда желательное поведение, поэтому этот вариант тоже отбросим.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;a href="##"&amp;gt;Каталог&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;или&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;a href="#!"&amp;gt;Каталог&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Эта версия лучше, чем предыдущий способ, так как страница не прокручивается вверх. При этом меняется адрес страницы, а также добавляется # в конце адреса. Этот способ работает не во всех браузерах, поэтому есть следующий.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;a href="#no_scroll"&amp;gt;Каталог&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Можно сделать полноценную якорную ссылку, но при этом без элементов с id="noscroll". Этот способ работает во всех браузерах, не скроллит страницу к началу, но меняет ссылку, добавляя #noscroll в конец адреса.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;a href="javascript:void(0);"&amp;gt;Каталог&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Достаточно старый способ, который благодаря JavaScript буквально просит ссылку ничего не делать. Правильнее было бы написать javascript: undefined;, но этот вариант длиннее, поэтому придумали более короткую замену void (0), который также возвращает undefined. Этот вариант был создан ещё в то время, когда JavaScript инлайнили в разметку. Ссылка в этом случае никуда не прокручивается, что лучше, чем в предыдущем варианте. Сам же метод позволял создать AJAX-запрос без перезагрузки страницы. Например, при открытии попапа делается запрос у сервера на его контент, затем попап открывается, и отрисовывается полученный контент от сервера.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;a href="bla-bla-bla" onclick="return false;"&amp;gt;Ссылка&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;На самом деле, когда программистам нечем заняться, они начинают придумывать новые способы. Просто потому что они могут. В этом методе ничто никуда не прокручивается и не прыгает. В href можно добавить что угодно, а в JavaScript не добавлять новый onclick. Хотя раньше это было важно. Сейчас новое событие можно добавить с помощью addEventListener.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;a&amp;gt;Каталог&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;В новой спецификации разрешили вообще не указывать href, если он не нужен. Ссылка как будто превращается в &lt;span&gt;: удаляется стандартное подчёркивание снизу и синий цвет, указанный по умолчанию. С такой ссылки удаляются состояния: active, focus, так как с ней нельзя взаимодействовать. Это очень хорошо, так как ссылки, действительно, пока нет. Но при этом пользовательская стилизация, которую пишете вы, продолжает работать. В целом, можно сказать, что это самый ленивый и правильный вариант, однако он не всем подходит.&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;Определите, с какой целью вам нужно использовать пустые ссылки и изучите все преимущества и недостатки каждого метода. Только после этого вы сможете грамотно и корректно написать код.&lt;/p&gt;

&lt;p&gt;«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами. &lt;/p&gt;

</description>
    </item>
    <item>
      <title>(html) - Инструменты</title>
      <dc:creator>Rafael </dc:creator>
      <pubDate>Sat, 18 Jul 2026 14:55:49 +0000</pubDate>
      <link>https://dev.to/rafa-2bf5801af808188/html-instrumienty-48g2</link>
      <guid>https://dev.to/rafa-2bf5801af808188/html-instrumienty-48g2</guid>
      <description>&lt;ul&gt;
&lt;li&gt;/&lt;/li&gt;
&lt;li&gt;&lt;a href="https://neocities.org/dashboard" rel="noopener noreferrer"&gt;Neocities - Dashboard&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Онлайн редакторы с iframe&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://codepen.io/your-work" rel="noopener noreferrer"&gt;Your Work - CodePen&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Онлайн редакторы  для быстрой проверки и обучения&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://silvertests.ru/HTML_Online_Editor.aspx?ysclid=mruslhkiwe266980068" rel="noopener noreferrer"&gt;Онлайн HTML Редактор&lt;/a&gt; - тормозит&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://learnjs.ru/html-online-editor/" rel="noopener noreferrer"&gt;HTML редактор онлайн - редактор HTML, CSS и JavaScript с предпросмотром&lt;/a&gt;

&lt;ul&gt;
&lt;li&gt;html, css, js&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.schoolsw3.com/html/tryit.php?ysclid=mrut0faftp63008876" rel="noopener noreferrer"&gt;HTML Редактор — SCHOOLSW3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Онлайн редактор визуальный&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://be1.ru/html-redaktor-online/?ysclid=mrusleap6t522385473" rel="noopener noreferrer"&gt;HTML редактор онлайн - Be1.ru&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://editorhtmlonline.com/ru/?ysclid=mrusyr75ee420798996" rel="noopener noreferrer"&gt;HTML редактор онлайн — перевод текста в HTML код&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;валидатор html&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://validator.w3.org/" rel="noopener noreferrer"&gt;The W3C Markup Validation Service&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://veomedia.ru/valid/html/?ysclid=mrut8sykkj513984244" rel="noopener noreferrer"&gt;HTML‑валидатор онлайн — проверить разметку сайта | ВеоМедиа&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  - &lt;a href="https://codeshack.io/html-validator/" rel="noopener noreferrer"&gt;HTML Validator - Check &amp;amp; Validate HTML Code Online&lt;/a&gt;
&lt;/h2&gt;




</description>
    </item>
    <item>
      <title>(html) - источники информаци</title>
      <dc:creator>Rafael </dc:creator>
      <pubDate>Sat, 18 Jul 2026 14:49:31 +0000</pubDate>
      <link>https://dev.to/rafa-2bf5801af808188/html-istochniki-informatsi-1jaa</link>
      <guid>https://dev.to/rafa-2bf5801af808188/html-istochniki-informatsi-1jaa</guid>
      <description>&lt;h2&gt;
  
  
  Заметка для централизованного сбора интернет источников
&lt;/h2&gt;




&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://webref.ru/" rel="noopener noreferrer"&gt;WebReference&lt;/a&gt;

&lt;ul&gt;
&lt;li&gt;WebReference (webref.ru) — образовательный ресурс для веб‑разработчиков: здесь публикуют справочники, руководства и учебные материалы по веб‑технологиям. Проект тесно связан с htmlbook.ru и создан тем же автором— Владом Мержевичем.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>(html) — постинг картинок</title>
      <dc:creator>Rafael </dc:creator>
      <pubDate>Sat, 18 Jul 2026 14:43:36 +0000</pubDate>
      <link>https://dev.to/rafa-2bf5801af808188/html-postingh-kartinok-mcj</link>
      <guid>https://dev.to/rafa-2bf5801af808188/html-postingh-kartinok-mcj</guid>
      <description>&lt;h2&gt;
  
  
  Рабочая заметка для проверки сервисов
&lt;/h2&gt;




&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Сервис&lt;/th&gt;
&lt;th&gt;Карта&lt;/th&gt;
&lt;th&gt;Регистрация&lt;/th&gt;
&lt;th&gt;Бесплатное хранилище&lt;/th&gt;
&lt;th&gt;Макс. размер файла&lt;/th&gt;
&lt;th&gt;Прямая ссылка&lt;/th&gt;
&lt;th&gt;Особенности&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;ImgBB&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;Необязательно&lt;/td&gt;
&lt;td&gt;Не указано (Pro — безлимит)&lt;/td&gt;
&lt;td&gt;32 МБ&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;Очень простой, идеально для сайтов :contentReference[oaicite:0]{index=0}&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;ImageKit.io&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;3 ГБ&lt;/strong&gt; + &lt;strong&gt;20 ГБ/мес. трафика&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;25 МБ&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;CDN, API, оптимизация изображений :contentReference[oaicite:1]{index=1}&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Postimages&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;Необязательно&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Неограничено&lt;/strong&gt;*&lt;/td&gt;
&lt;td&gt;32 МБ&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;Не удаляет изображения из-за неактивности :contentReference[oaicite:2]{index=2}&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Catbox.moe&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Неограничено&lt;/strong&gt;*&lt;/td&gt;
&lt;td&gt;200 МБ&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;Максимально простой сервис&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;ImageChest&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;Желательно&lt;/td&gt;
&lt;td&gt;Не указано&lt;/td&gt;
&lt;td&gt;~20 МБ&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;Удобные альбомы&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Pixeldrain&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;Необязательно&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Неограничено&lt;/strong&gt;*&lt;/td&gt;
&lt;td&gt;20 ГБ&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;Больше файловый хостинг, чем фотохостинг :contentReference[oaicite:3]{index=3}&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;p&gt;🥈 ImageKit.io -  &lt;a href="https://imagekit.io/plans/" rel="noopener noreferrer"&gt;Pricing plans | ImageKit.io&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Когда сайт становится серьезнее.&lt;/p&gt;

&lt;p&gt;Плюсы:&lt;/p&gt;

&lt;p&gt;CDN;&lt;br&gt;
кэширование;&lt;br&gt;
изменение размера изображений через URL;&lt;br&gt;
API;&lt;br&gt;
хорошая скорость.&lt;/p&gt;

&lt;p&gt;Именно это уже ближе к профессиональному стеку.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>(html) — Что такое «heder»</title>
      <dc:creator>Rafael </dc:creator>
      <pubDate>Sat, 18 Jul 2026 14:43:04 +0000</pubDate>
      <link>https://dev.to/rafa-2bf5801af808188/html-chto-takoie--4k0e</link>
      <guid>https://dev.to/rafa-2bf5801af808188/html-chto-takoie--4k0e</guid>
      <description>&lt;ul&gt;
&lt;li&gt;Header как шапка страницы. Самый частый сценарий — разместить header в начале body и использовать его как общую шапку сайта.&lt;/li&gt;
&lt;li&gt;С точки зрения UX хедер должен обеспечивать аудитории быстрый доступ к основным функциям — меню, профилю, строке поиска. Такая структура помогает легко ориентироваться и сокращает барьеры на пути к целевому действию.&lt;/li&gt;
&lt;li&gt;Для того чтобы сделать header для сайта, разберемся в первую очередь с его размером. Размер хедера для сайта составляет 1024 px в ширину, но он может варьироваться от 1024 px до 1920 px. &lt;/li&gt;
&lt;li&gt;В хедере, как правило, не используются изображения, за исключением логотипа. Поэтому он должен иметь высокое разрешение.&lt;/li&gt;
&lt;li&gt;Если в шапку сайта вы поместили важную информацию, то используйте фиксированный скролинг. Это нужно для того, чтобы эта информация оставалась на виду у пользователя. Например, это эффективно, когда в хедере есть кнопка лидогенерации.
-Следите за высотой шапки сайта. Если работаете над информационным ресурсом, то оптимальный размер высоты шапки составляет 100-200 пикселей. Для лендингов, а также сайтов-визиток можно сделать хедер выше. Важно, чтобы хедер не мешал пользователям воспринимать контент на сайте. &lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  РЕСУРСЫ
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://yandex.ru/adv/edu/materials/chto-takoe-heder?ysclid=mrq0c46nfv701732858" rel="noopener noreferrer"&gt;Хедер: что это такое, как сделать шапку сайта — header в HTML&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://convertmonster.ru/blog/design-and-ux-ui/sozdaem-idealnyj-header-i-footer-sajta/?ysclid=mrq0lhv9tr671623701" rel="noopener noreferrer"&gt;Создаем идеальный header и footer сайта | Convert Monster&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://purpleschool.ru/knowledge-base/html/semantic-elements/header?ysclid=mrq0orxhfp323811348" rel="noopener noreferrer"&gt;⭐ Тег header в HTML | PurpleSchool&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://htmlbook.ru/samlayout/verstka-na-html5/shapka-stranitsy?ysclid=mrq0rgp6r598632663" rel="noopener noreferrer"&gt;Шапка страницы | htmlbook.ru&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://doka.guide/html/header/?ysclid=mrq1822lt4350561382" rel="noopener noreferrer"&gt;⭐ &lt;code&gt;&amp;lt;header&amp;gt;&lt;/code&gt; — HTML — Дока&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
  </channel>
</rss>
