{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Блог Чуденкова Алексея, заметки с тегом: ui",
    "home_page_url": "https:\/\/blog.chudenkov.ru\/tags\/ui\/",
    "feed_url": "https:\/\/blog.chudenkov.ru\/tags\/ui\/json\/",
    "icon": "https:\/\/blog.chudenkov.ru\/user\/userpic@2x.jpg",
    "author": {
        "name": "Чуденков Алексей",
        "url": "https:\/\/blog.chudenkov.ru\/",
        "avatar": "https:\/\/blog.chudenkov.ru\/user\/userpic@2x.jpg"
    },
    "items": [
        {
            "id": "78",
            "url": "https:\/\/blog.chudenkov.ru\/",
            "title": "jQuery: иконка показать пароль в поле при вводе",
            "content_html": "<pre class=\"e2-text-code\"><code>$(this).toggleClass(&quot;help-eye help-eye-off&quot;);\r\n  var input = $($(this).attr(&quot;toggle&quot;));\r\n  if (input.attr(&quot;type&quot;) == &quot;password&quot;) {\r\n    input.attr(&quot;type&quot;, &quot;text&quot;);\r\n  } else {\r\n    input.attr(&quot;type&quot;, &quot;password&quot;);\r\n  }\r\n});<\/code><\/pre>",
            "date_published": "2020-03-12T17:27:24+03:00",
            "date_modified": "2020-03-12T17:27:37+03:00",
            "_date_published_rfc2822": "Thu, 12 Mar 2020 17:27:24 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "78",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "77",
            "url": "https:\/\/blog.chudenkov.ru\/all\/js-risuem-logotip\/",
            "title": "JS: Рисуем логотип",
            "content_html": "<p>Я бродил по Codepen в поисках интересных решений для анимаций форм и объектов на CSS и наткнулся на клёвую реализацию анимации SVG логотипа. Принцип прост — указываем для каждого элемента path в SVG класс и он будет анимирован. Можно на прелоадер поставить, будет эффектно.<\/p>\n<p class=\"codepen\" data-height=\"377\" data-theme-id=\"light\" data-default-tab=\"html,result\" data-user=\"alexey-chudenkov\" data-slug-hash=\"KKpqKwd\" style=\"height: 377px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Animated SVG Logo\">\r\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/alexey-chudenkov\/pen\/KKpqKwd\">\r\n  Animated SVG Logo<\/a> by Alexey  Chudenkov (<a href=\"https:\/\/codepen.io\/alexey-chudenkov\">@alexey-chudenkov<\/a>)\r\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\r\n<\/p>\n<script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n",
            "date_published": "2020-02-29T11:50:49+03:00",
            "date_modified": "2020-02-29T13:22:48+03:00",
            "_date_published_rfc2822": "Sat, 29 Feb 2020 11:50:49 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "77",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "75",
            "url": "https:\/\/blog.chudenkov.ru\/all\/jquery-zapretit-vvodit-probely-v-e-mail\/",
            "title": "jQuery: запретить вводить пробелы в E-Mail",
            "content_html": "<p>Защита от дурака, который может скопировать и вставить почту с пробелами или хуже того ещё и написать её с пробелами.<\/p>\n<pre class=\"e2-text-code\"><code>$(&quot;#input_Id&quot;).change(function()\r\n     $(this).val($(this).val().replace(\/ +\/g, ''))\r\n});<\/code><\/pre>",
            "date_published": "2020-02-10T14:05:01+03:00",
            "date_modified": "2020-02-10T14:05:21+03:00",
            "_date_published_rfc2822": "Mon, 10 Feb 2020 14:05:01 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "75",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "72",
            "url": "https:\/\/blog.chudenkov.ru\/all\/css3-samaya-prostaya-animaciya-knopki\/",
            "title": "CSS3: самая простая анимация кнопки при наведении",
            "content_html": "<p class=\"codepen\" data-height=\"506\" data-theme-id=\"light\" data-default-tab=\"css,result\" data-user=\"alexey-chudenkov\" data-slug-hash=\"VwYoKgV\" style=\"height: 506px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Button Fill Left to Right\">\r\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/alexey-chudenkov\/pen\/VwYoKgV\">\r\n  Button Fill Left to Right<\/a> by Alexey  Chudenkov (<a href=\"https:\/\/codepen.io\/alexey-chudenkov\">@alexey-chudenkov<\/a>)\r\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\r\n<\/p>\n<script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n",
            "date_published": "2020-02-02T11:50:15+03:00",
            "date_modified": "2020-02-05T23:47:47+03:00",
            "_date_published_rfc2822": "Sun, 02 Feb 2020 11:50:15 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "72",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "69",
            "url": "https:\/\/blog.chudenkov.ru\/all\/js-opredelyaem-vklyuchyon-caps-lock-ili-net\/",
            "title": "JS: Определяем включён Caps Lock или нет",
            "content_html": "<p>На W3C нашёл простой и отличный способ определения капса. Для чего? Всё для UI\/UX! Особенно, если аудитория слегка деревянная. Итак, реализация:<\/p>\n<pre class=\"e2-text-code\"><code>var input = document.getElementById(&quot;myInput&quot;);\r\nvar text = document.getElementById(&quot;text&quot;);\r\ninput.addEventListener(&quot;keyup&quot;, function(event) {\r\n  if (event.getModifierState(&quot;CapsLock&quot;)) {\r\n    text.style.display = &quot;block&quot;;\r\n  } else {\r\n    text.style.display = &quot;none&quot;\r\n  }\r\n});<\/code><\/pre><div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.chudenkov.ru\/pictures\/Screenshot_3.png\" width=\"461\" height=\"248\" alt=\"\" \/>\n<\/div>\n",
            "date_published": "2020-01-15T22:46:54+03:00",
            "date_modified": "2020-01-15T22:46:46+03:00",
            "image": "https:\/\/blog.chudenkov.ru\/pictures\/Screenshot_3.png",
            "_date_published_rfc2822": "Wed, 15 Jan 2020 22:46:54 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "69",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog.chudenkov.ru\/pictures\/Screenshot_3.png"
                ]
            }
        }
    ],
    "_e2_version": 3365,
    "_e2_ua_string": "E2 (v3365; Aegea)"
}