{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Техноблог",
    "home_page_url": "https:\/\/blog.toliklunev.ru\/",
    "feed_url": "https:\/\/blog.toliklunev.ru\/rss\/",
    "icon": "https:\/\/blog.toliklunev.ru\/user\/userpic@2x.jpg",
    "author": {
        "name": "Анатолий Лунёв",
        "url": "https:\/\/blog.toliklunev.ru\/",
        "avatar": "https:\/\/blog.toliklunev.ru\/user\/userpic@2x.jpg"
    },
    "items": [
        {
            "id": "53",
            "url": "https:\/\/blog.toliklunev.ru\/all\/primenenie-optional-v-java\/",
            "title": "Применение Optional в Java",
            "content_html": "<p><i>Техноблог возвращается из стазиса. Теперь я верчусь в мире Java и заметки тоже будут про этот мир. Буду писать про всякие интересные штуки, которые обнаруживаю. Возможно, они миллион раз были где-то описаны, но мне это не важно, так как заметки скорее для себя, но может быть они ещё кому-то будут интересны.<\/i><\/p>\n<p>Представим, что вам по цепочке вызовов нужно достать какое-то значение:<\/p>\n<pre class=\"e2-text-code\"><code>final Any thing = holder.getValue().getData().getObject().getAnythingElse();<\/code><\/pre><p>При этом, в любом звене этой цепочки может вернуться null и случится <s>аппокалипсис<\/s> NullPointerException. Но он нам не нужен, а если вернулся null, нужно просто вернуть какое-нибудь дефолтное значение.<\/p>\n<p>Можно обернуть всё это горой if-ов:<\/p>\n<pre class=\"e2-text-code\"><code>if(null != holder ) {\r\n    if(null != holder.getValue()) {\r\n        if(null != holder.getValue().getData()) {\r\n            ...\r\n        }\r\n    }\r\n}<\/code><\/pre><p>Можно попробовать завернуть в try-catch (никогда так не делайте):<\/p>\n<pre class=\"e2-text-code\"><code>try {\r\n    final Any thing = holder.getValue().getData().getObject().getAnythingElse();\r\n} catch (NullPointerException e) {\r\n    final Any thing = &quot;Default Value&quot;;\r\n}<\/code><\/pre><p>Но красивым, и, на мой взгляд, лучшим решением будет использовать Optional:<\/p>\n<pre class=\"e2-text-code\"><code>final Any thing =\r\n    Optional.ofNullable(holder)\r\n        .map(Valuer::getValue)\r\n        .map(Wrapper::getData)\r\n        .map(Some::getObject)\r\n        &lt;...&gt;\r\n    .orElse(&quot;Default Value&quot;);<\/code><\/pre><p>Каждый map проверит значение, возвращённое методом, на null и вернётся или нужное нам значение или заданное в блоке orElse.<\/p>\n",
            "date_published": "2018-03-14T00:29:56+04:00",
            "date_modified": "2018-03-14T11:58:31+04:00",
            "_date_published_rfc2822": "Wed, 14 Mar 2018 00:29:56 +0400",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "53",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "42",
            "url": "https:\/\/blog.toliklunev.ru\/all\/psevdoprotokol-tel\/",
            "title": "Псевдопротокол tel:",
            "content_html": "<p>Мобильные браузеры определяют телефон по тапу на нём и предлагают совершить звонок — это удобно. Но это работает, только если  в вёрстке телефон сделан единым текстом. Однако часто дизайнеры оформляют телефон так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/tel1.png\" width=\"215\" height=\"42\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/tel2.png\" width=\"204\" height=\"42\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/tel3.png\" width=\"203\" height=\"36\" alt=\"\" \/>\n<\/div>\n<p>В данном случае случае телефон придётся разбить на два блока, и единого текста, как не пытайся, не выйдет. Мобильный браузер, скорее всего, не определит телефон.<\/p>\n<p>На помощь приходит псевдопротокол tel. Оборачиваем телефон в ссылку с этим протоколом:<\/p>\n<pre class=\"e2-text-code\"><code>&lt;a href=&quot;tel:+7 (123) 456-78-90&quot;&gt;\r\n\t&lt;span class=&quot;code&quot;&gt;+7 123&lt;\/span&gt;\r\n\t&lt;span class=&quot;number&quot;&gt;456-78-90&lt;\/span&gt;\r\n&lt;\/a&gt;<\/code><\/pre><p>Теперь по тапу на ссылку браузер определит телефон.<\/p>\n",
            "date_published": "2014-12-29T21:14:02+04:00",
            "date_modified": "2017-01-17T23:24:10+04:00",
            "image": "https:\/\/blog.toliklunev.ru\/pictures\/tel1.png",
            "_date_published_rfc2822": "Mon, 29 Dec 2014 21:14:02 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/psevdoprotokol-tel\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog.toliklunev.ru\/pictures\/tel1.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/tel2.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/tel3.png"
                ]
            }
        },
        {
            "id": "39",
            "url": "https:\/\/blog.toliklunev.ru\/all\/bystry-sposob-poluchit-svg-iz-vektornogo-sloya-v-fotoshope\/",
            "title": "Быстрый способ получить svg из векторного слоя в фотошопе",
            "content_html": "<p><strong>Данный способ работает только в Photoshop CC.<\/strong><\/p>\n<p>Первым делом создаём в домашней папке пользователя файл generator.json, со следующим содержимым:<\/p>\n<pre class=\"e2-text-code\"><code>{\r\n  &quot;generator-assets&quot;:  { \r\n    &quot;svg-enabled&quot;: true\r\n  }\r\n}<\/code><\/pre><p>Файл можно скачать (<a href=\"http:\/\/blog.toliklunev.ru\/download\/generator.json\" download=\"generator.json\">generator.json<\/a>), для ускорения процесса.<\/p>\n<p>Ставим галку в меню File → Generate → Image Assets.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/image-assets.png\" width=\"451\" height=\"657\" alt=\"\" \/>\n<\/div>\n<p>Затем переименовываем нужный слой, даём ему любое имя, заканчивающиеся на .svg (например pic.svg).<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/pic.svg.png\" width=\"280\" height=\"225\" alt=\"\" \/>\n<\/div>\n<p>И вуаля. Рядом с psd файлом получаем папку, в которой будет лежать готовый svg.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/svg-in-folder.png\" width=\"677\" height=\"108\" alt=\"\" \/>\n<\/div>\n<p>Можно переименовывать даже группу слоёв.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/group.svg.png\" width=\"387\" height=\"355\" alt=\"\" \/>\n<\/div>\n<p>Фотошоп довольно умно сгенерирует единый svg файл, учитывая все эффекты слоёв.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/svg-code.png\" width=\"745\" height=\"875\" alt=\"\" \/>\n<\/div>\n",
            "date_published": "2014-11-04T02:23:17+04:00",
            "date_modified": "2017-01-18T23:41:29+04:00",
            "image": "https:\/\/blog.toliklunev.ru\/pictures\/image-assets.png",
            "_date_published_rfc2822": "Tue, 04 Nov 2014 02:23:17 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/bystry-sposob-poluchit-svg-iz-vektornogo-sloya-v-fotoshope\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog.toliklunev.ru\/pictures\/image-assets.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/pic.svg.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/svg-in-folder.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/group.svg.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/svg-code.png"
                ]
            }
        },
        {
            "id": "37",
            "url": "https:\/\/blog.toliklunev.ru\/all\/fishka-inputa-dlya-faylov-o-kotoroy-ne-vse-znayut\/",
            "title": "Фишка инпута для файлов, о которой не все знают",
            "content_html": "<p>Оказывается, при указании файла в браузере совсем необязательно мучится со стандартным диалоговым окном выбора файлов.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/filedialog.png\" width=\"768\" height=\"434\" alt=\"\" \/>\n<\/div>\n<p>Достаточно всего лишь перетащить нужный файл прямо на инпут.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/dropfile.png\" width=\"436\" height=\"424\" alt=\"\" \/>\n<\/div>\n<p>К сожалению, это волшебство никак не распространяется на лейб для инпута. Поэтому, если вы каким-либо образом пытаетесь оформить стандартный инпут, растяните его по размерам блока и скройте с помощью прозрачности.<\/p>\n",
            "date_published": "2014-10-12T06:11:55+04:00",
            "date_modified": "2014-10-12T06:41:03+04:00",
            "image": "https:\/\/blog.toliklunev.ru\/pictures\/filedialog.png",
            "_date_published_rfc2822": "Sun, 12 Oct 2014 06:11:55 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/fishka-inputa-dlya-faylov-o-kotoroy-ne-vse-znayut\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog.toliklunev.ru\/pictures\/filedialog.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/dropfile.png"
                ]
            }
        },
        {
            "id": "35",
            "url": "https:\/\/blog.toliklunev.ru\/all\/cssfont\/",
            "title": "CSS Шрифт",
            "content_html": "<p>Большинство веб-сервисов для подготовки кастомных шрифтов к вёрстке конвертируют шрифт в 4-5 разных форматов, при том что конвертировать имеет смысл только в один формат, в woff. Woff лёгок, и поддерживается всеми современными браузерами. При этом woff имеет смысл кодировать в base64 и вставить непосредственно в css файл с помощью data:uri.<\/p>\n<p>Об этом ещё в 2012 году <a href=\"http:\/\/artgorbunov.ru\/bb\/soviet\/20121129\/\" target=\"_blank\">писал<\/a> Артём Поликарпов. С тех пор, как я прочитал совет Артёма, я подготавливал все шрифты вручную, т. е. конвертировал файл сначала в woff, затем кодировал в base64, затем создавал css-файл и вставлял в него всё полученное. И мечтал о сервисе, который делал бы за меня всё это автоматически. Но, к сожалению, так и не нашёл такого, и поэтому сделал сам. Собственно вот:<\/p>\n<div style=\"overflow: hidden;\"><iframe src=\"https:\/\/cssfont.toliklunev.ru\/\" frameborder=\"0\" width=\"340px\" height=\"450px\" style=\"margin-top: -87px;\"><\/iframe>\n<\/div><p><a href=\"https:\/\/cssfont.toliklunev.ru\/\" target=\"_blank\">Открыть в новой вкладке<\/a><\/p>\n<p>Плюсы шрифта в css:<\/p>\n<ul>\n<li>нужно подключить всего один файл;<\/li>\n<li>меньше запросов к серверу;<\/li>\n<li>текст не прыгает при загрузке шрифта.<\/li>\n<\/ul>\n<p>Минусы:<\/p>\n<ul>\n<li>не поддерживается ИЕ ниже 9-го.<\/li>\n<\/ul>\n<p>От поддержки 8-го ИЕ я отказался (рекомендую и вам), по нескольким причинам:<\/p>\n<ul>\n<li>шрифт в формате eot (специальный формат для ИЕ), у меня не работал практически никогда, и как сделать, чтоб заработал, я понятия не имел;<\/li>\n<li>человеку с ИЕ 8 будет не до вашего кастомного шрифта, из-за которого этот браузер начнёт ещё больше тормозить, да ещё и сайт из-за него грузится дольше будет, поэтому имеет смысл подобрать стандартный шрифт.<\/li>\n<\/ul>\n<p>Ссылки по теме:<br \/>\n<a href=\"http:\/\/habrahabr.ru\/post\/180615\/\" target=\"_blank\">Ещё один способ устранить ВОШ<\/a><\/p>\n",
            "date_published": "2014-08-26T00:19:32+04:00",
            "date_modified": "2018-03-14T22:18:24+04:00",
            "_date_published_rfc2822": "Tue, 26 Aug 2014 00:19:32 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/cssfont\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "32",
            "url": "https:\/\/blog.toliklunev.ru\/all\/o-skrinshotah-veb-stranic\/",
            "title": "О скриншотах веб-страниц",
            "content_html": "<p>Есть вещь, которая мне совершенно непонятна в современных браузерах. А именно отсутствие человеческой возможности сделать скриншот страницы в полный рост.<\/p>\n<p>Сейчас эта задача решается какими-то сторонними расширениями и плагинами, которые работают ужасно абсолютно все. Лично я пользуюсь вот <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/webpage-screenshot\/ckibcdccnfeookdmbahgiakhnjcddpki\">этим<\/a> для хрома и плачу каждый раз, когда использую его.<\/p>\n<p>Самое интересное то, что браузер итак уже отрендерил страницу, на которой я нахожусь. Значит её изображение уже есть где-то у него в памяти. Неужели разработчикам так сложно добавить где-нибудь в настройках браузера незаметную кнопку «Сохранить изображение страницы»? Загадка.<\/p>\n<p><strong>UPD:<\/strong> Нашёл расширение получше: <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/joxi-screenshot-capture\/jhcdlkgjiehgpnpolkbnmpffjodigbkb\" target=\"_blank\">Joxi<\/a>. И сервис, который вообще всё за тебя делает: <a href=\"http:\/\/www.s-shot.ru\/\" target=\"_blank\">S-shot<\/a>.<\/p>\n",
            "date_published": "2014-08-23T06:46:10+04:00",
            "date_modified": "2014-09-05T18:03:30+04:00",
            "_date_published_rfc2822": "Sat, 23 Aug 2014 06:46:10 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/o-skrinshotah-veb-stranic\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "14",
            "url": "https:\/\/blog.toliklunev.ru\/all\/jqueryhelpers\/",
            "title": "Швейцарский нож jQuery-разработчика — jQuery Helpers",
            "content_html": "<p>Каждый веб-разработчик, работающий с jQuery, со временем начинает собирать удачные решения и ходы, для того, чтобы применять их в будущих проектах. Со временем таких решений накапливается много, некоторые из них перерастают в плагины, а некоторые небольшие, но полезные куски кода копируются из проекта в проект. Похожим образом получилось и у меня. И сейчас я хочу поделиться с вами своими наработками. Надеюсь, для кого-то из вас они тоже окажутся полезными :-)<\/p>\n<p>Можно <a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\" target=\"_blank\">посмотреть на Гитхабе<\/a> или сразу <a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/archive\/master.zip\">скачать<\/a>.<\/p>\n<p><a href=\"#makeActive\">makeActive<\/a><br \/>\n<a href=\"#cycle\">cycle<\/a><br \/>\n<a href=\"#genHtml\">genHtml<\/a><br \/>\n<a href=\"#insertCount\">appendCount, prependCount<\/a><br \/>\n<a href=\"#onlyDigits\">onlyDigits<\/a><br \/>\n<a href=\"#parseInt\">parseInt, parseFloat<\/a><br \/>\n<a href=\"#breakdown\">breakdown<\/a><br \/>\n<a href=\"#cleaner\">cleaner<\/a><br \/>\n<a href=\"#dataObject\">dataObject<\/a><br \/>\n<a href=\"#popup\">popup<\/a><br \/>\n<a href=\"#transmit\">transmit<\/a><br \/>\n<a href=\"#attr\">src, href<\/a><br \/>\n<a href=\"#disable\">disable, enable<\/a><br \/>\n<a href=\"#hash\">hash, pathname<\/a><br \/>\n<a href=\"#run\">run<\/a><br \/>\n<a href=\"#removeSpaces\">removeSpaces<\/a><br \/>\n<a href=\"#reverse\">reverse<\/a><br \/>\n<a href=\"#ending\">ending<\/a><\/p>\n<p><h2 id=\"makeActive\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/makeActive.js\" target=\"_blank\">makeActive<\/a> (’classname’ || object{classname, selector})<\/h2><\/p>\n<p>Часто возникает ситуация, когда нужно назначить класс таким образом, чтобы элемент был единственным его обладателем в ряду соседних элементов. Эту проблему помогает решить makeActive. По умолчанию назначается класс active. Нужный класс можно передать строкой :<\/p>\n<pre class=\"e2-text-code\"><code>$(this).makeActive('my_class_name');<\/code><\/pre><p>Или передать объект, заключающий в себе название класса и селектор соседних элементов:<\/p>\n<pre class=\"e2-text-code\"><code>$(this).makeActive({\r\n\tclassName: 'my_class_name',\r\n\tselector: 'div'\r\n});<\/code><\/pre><p>Пример:<\/p>\n<iframe height=\"170\" width=\"600\" src=\"http:\/\/fiddle.jshell.net\/codefucker\/28DB8\/1\/show\/light\/\" frameborder=\"0\"><\/iframe>\n<pre class=\"e2-text-code\"><code>$('div').click(function(){\r\n    $(this).makeActive();\r\n});<\/code><\/pre><p><h2 id=\"cycle\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/cycle.js\" target=\"_blank\">cycle<\/a> (’next’ || ’prev’)<\/h2><\/p>\n<p>Не знаю как вам, а мне иногда катастрофически не хватает циклических next \/ prev в jQuery. Эту проблему я решил, написав хелпер cycle, который принимает next или prev в качестве строки.<\/p>\n<p>Пример:<\/p>\n<pre class=\"e2-text-code\"><code>$('#prev').click(function(){\r\n    $('.wrap div.active').cycle('prev').makeActive();\r\n});\r\n\r\n$('#next').click(function(){\r\n    $('.wrap div.active').cycle('next').makeActive();\r\n});<\/code><\/pre><iframe  height=\"200\" width=\"600\" src=\"http:\/\/fiddle.jshell.net\/codefucker\/28DB8\/4\/show\/light\/\" frameborder=\"0\"><\/iframe>\n<p><h2 id=\"genHtml\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/gen.js\" target=\"_blank\">genHtml<\/a> (code, count)<\/h2><\/p>\n<p>Иногда бывает задача создать определённое количество html элементов, например для пагинации слайдера.<\/p>\n<p>Конструкции вроде:<\/p>\n<pre class=\"e2-text-code\"><code>$('.slide').each(function(i){\r\n\tvar $li = $('&lt;li&gt;').append('&lt;a&gt;&lt;span&gt;'+ (i+1) +'&lt;\/span&gt;&lt;\/a&gt;');\r\n\t$pagination.append($li);\r\n});<\/code><\/pre><!-- или что хуже:\r\n<code>$('ul').append('<li><\/li><li><\/li><li><\/li><li><\/li><li><\/li>');<\/code>> --><p>меня всегда бесили. Поэтому был написан хелпер genHtml, который принимает тег строкой и количество.<\/p>\n<p><h2 id=\"insertCount\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/gen.js\" target=\"_blank\">appendCount, prependCount<\/a><\/h2><\/p>\n<p>Вставляют нужное количество html элементов на страницу, используя genHtml. Синтаксис такой же как у genHtml.<\/p>\n<p><h2 id=\"onlyDigits\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/onlyDigits.js\" target=\"_blank\">onlyDigits<\/a><\/h2><\/p>\n<p>Иногда требуется текстовый инпут, в который физически можно ввести только цифры. К великому сожалению, стандартные средства html не предлагают такого функционала (даже <mark>&lt;input type=&quot;number&quot; \/&gt;<\/mark> в котором это было бы логично). Для этого существует хелпер onlyDigits.<\/p>\n<pre class=\"e2-text-code\"><code>$('input').onlyDigits();<\/code><\/pre><iframe height=\"87\" src=\"http:\/\/fiddle.jshell.net\/codefucker\/28DB8\/9\/show\/light\/\" frameborder=\"0\"><\/iframe>\n<p><h2 id=\"parseInt\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/parse.js\" target=\"_blank\">parseInt, parseFloat<\/a><\/h2><\/p>\n<p>Вызываются у блока с числом или инпута и возвращают число сразу с типом number.<\/p>\n<p><h2 id=\"breakdown\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/breakdown.js\" target=\"_blank\">breakdown<\/a><\/h2><\/p>\n<p>С помощью этого хелпера, можно разбить число пробелами по разрядам.<\/p>\n<pre class=\"e2-text-code\"><code>$('#num').breakdown();<\/code><\/pre><iframe height=\"92\" src=\"http:\/\/fiddle.jshell.net\/codefucker\/28DB8\/14\/show\/light\/\" frameborder=\"0\" ><\/iframe>\n<p><h2 id=\"cleaner\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/cleaner.js\" target=\"_blank\">cleaner<\/a><\/h2><\/p>\n<p>В современных приложениях реализована такая удобная, особенно на мобильных устройствах, штука, как крестик для очистки инпута от введённых в него данных. В браузеры, к сожалению, перекочёвывать она не сильно спешит. Насколько я знаю, такой крестик есть только в интернет экплорере, но последний не предоставляет возможностей для оформления этого элемента.<\/p>\n<p>Для этих целей был написан хелпер cleaner. Он добавляет рядом с инпутом <mark>&lt;a class=&quot;clean&quot; \/&gt<\/mark>, который можно оформить с помощью css как душе угодно.<br \/>\nЖелательно перед использованием обернуть инпут в какой-нибудь див, а крестик прижать вправо абсолютным позиционированием. А после этого добавить инпуту паддинг справа, чтобы текст не заезжал на крестик. Да, к сожалению всё это не так удобно, как мне хотелось бы, но работаю над упрощением. Для стандартного использования написан <a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/cleaner.scss\" target=\"_blank\">css-код<\/a>, который желательно просто копировать в основной файл стилей своего проекта и изменять.<\/p>\n<iframe height=\"87\" src=\"http:\/\/fiddle.jshell.net\/codefucker\/28DB8\/13\/show\/light\/\" frameborder=\"0\" style=\"margin-left: -5px;\"><\/iframe>\n<p><h2 id=\"dataObject\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/dataObject.js\" target=\"_blank\">dataObject<\/a><\/h2><\/p>\n<p>Данный хелпер позволяет доставать javascript-объекты из атрибутов data-*. Используется также, как и стандартный метод .data() в jQuery, только вместо строки возвращает объект.<\/p>\n<p><h2 id=\"popup\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/popup.js\" target=\"_blank\">popup<\/a> ([object{close, link}])<\/h2><\/p>\n<p>Иногда нужен простой попап, который бы закрывался при клике за его пределами. Для этого был написан хелпер popup. При вызове он добавляет элементу класс shown, и удаляет при закрытии (я использую добавление класса, а не show\/hide, чтобы управлять анимацией появления при помощи css). Метод может принимать объект, с атрибутами link и close. link — ссылка, при клике на которую будет показан попап. close — элемент внутри попапа (крестик), при клике на который попап будет закрыт.<\/p>\n<p><h2 id=\"transmit\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/transmit.js\" target=\"_blank\">transmit<\/a> (’method’, [options array])<\/h2><\/p>\n<p>Все мы постоянно пишем колбеки для разных событий, и почти всегда используем анонимные функции для этого. Но конструкции вроде этой:<\/p>\n<pre class=\"e2-text-code\"><code>$(window).load(function(){\r\n\t$('#object').click();\r\n});<\/code><\/pre><p>мне кажутся нелогичными и трудночитаемыми, когда намного логичней было бы так:<\/p>\n<pre class=\"e2-text-code\"><code>$(window).load($('#object').click);<\/code><\/pre><p>Но jQuery перезаписывает контекст у колбеков. И конечно в 99% случаев это удобно, но не в данном.<br \/>\nХелпер transmit частично решает эту проблему, позволяя писать так:<\/p>\n<pre class=\"e2-text-code\"><code>$(window).load($('#object').transmit('click'));<\/code><\/pre><p><h2 id=\"attr\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/attr.js\" target=\"_blank\">src, href<\/a><\/h2><\/p>\n<p>Возвращают\/изменяют значение атрибутов src и href у элементов на странице. Мне не хватало таких методов как val() у инпутов, только для ссылок.<\/p>\n<p><h2 id=\"disable\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/disable.js\" target=\"_blank\">disable, enable<\/a><\/h2><\/p>\n<p>disable — добавляет атрибут <mark>disabled<\/mark> у элементов, enable — убирает.<\/p>\n<p><h2 id=\"hash\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/attr.js\" target=\"_blank\">hash, pathname<\/a><\/h2><\/p>\n<p>Возвращают\/изменяют соответствующие части href у ссылок на странице.<\/p>\n<p><h2 id=\"run\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/run.js\" target=\"_blank\">run<\/a><\/h2><\/p>\n<p>Запускает функцию в контексте текущей выборки, а не для каждого элемента отдельно, в отличии от <a href=\"http:\/\/api.jquery.com\/each\/\" target=\"_blank\">each<\/a>.<\/p>\n<p><h2 id=\"removeSpaces\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/removeSpaces.js\" target=\"_blank\">removeSpaces<\/a><\/h2><\/p>\n<p>Удаляет пробелы между элементами. Служит, в основном, для решения проблем с инлайн-блоками.<\/p>\n<p><h2 id=\"reverse\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/reverse.js\" target=\"_blank\">reverse()<\/a><\/h2><\/p>\n<p>Разворачивает порядок следования jQuery объектов.<\/p>\n<p><h2 id=\"ending\"><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/helpers\/ending.js\" target=\"_blank\">ending<\/a> (end1, end2, end3, count)<\/h2><\/p>\n<p>Хелпер для формирования окончаний у слов во множественном числе.<\/p>\n<iframe height=\"87\" src=\"http:\/\/fiddle.jshell.net\/codefucker\/28DB8\/11\/show\/light\/\" frameborder=\"0\" style=\"margin-left: -5px;\"><\/iframe>\n<p>Для определения возможностей браузера я рекомендую использовать <a href=\"http:\/\/modernizr.com\/\" target=\"_blank\">Modernizr<\/a>. Но в своей работе я сталкивался с тем, что не все нужные мне тесты были реализованы в нём. Поэтому я написал парочку своих, расширив jQuery.support, и оформив всё в файл jquery.support.js.<\/p>\n<p><h2><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/support\/calc.js\" target=\"_blank\">jQuery.support.calc<\/a><\/h2><\/p>\n<p>Определяет, поддерживает  ли браузер css-функцию calc. Актуально для старых версий оперы и 8-го экслорера.<\/p>\n<p><h2><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/support\/flash.js\" target=\"_blank\">jQuery.support.flash<\/a><\/h2><\/p>\n<p>Определяет, установлен ли Flash на компьютере пользователя.<\/p>\n<p><h2><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/support\/mobile.js\" target=\"_blank\">jQuery.support.mobile<\/a><\/h2><\/p>\n<p>Детектит мобильные браузеры.<\/p>\n<p><h2><a href=\"https:\/\/github.com\/codefucker\/jQueryHeplers\/blob\/master\/src\/support\/preserve3d.js\" target=\"_blank\">jQuery.support.preserve3d<\/a><\/h2><\/p>\n<p>Проверяет, поддерживается ли браузером 3D представления. Актуально, если вы хотите использовать в своём проекте <mark>transform-style: preserve-3d;<\/mark>.<\/p>\n<p>Хелперы собираются в один файл с помощью <a href=\"http:\/\/gruntjs.com\/\" target=\"_blank\">Гранта<\/a>. Если проект получит развитие, в дальнейшем будет добавлена страница онлайн-сборки, где вы сможете собрать jQuery Helpers, выбрав только  необходимые вашему проекту хелперы.<\/p>\n<p><strong>UPD:<\/strong> Произошла какая-то фигня, и я не заметил, как публикнул недописанный черновик. Но это даже хорошо, т. к. я бы ещё месяц его мусолил. Так что кто увидел — тссс.<\/p>\n",
            "date_published": "2014-08-07T17:47:06+04:00",
            "date_modified": "2017-01-21T21:51:09+04:00",
            "_date_published_rfc2822": "Thu, 07 Aug 2014 17:47:06 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/jqueryhelpers\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "16",
            "url": "https:\/\/blog.toliklunev.ru\/all\/finalreject\/",
            "title": "finalReject — наипростейшая заглушка для старых версий IE",
            "content_html": "<p>finalReject — Плагин, отображающий, в устаревших версиях Internet Explorer, заглушку с предложением обновить браузер. Заглушка накладывается поверх сайта в виде попапа, и в случае чего может быть закрыта пользователем. При этом, после закрытия, она не исчезает навсегда, а прикрепляется к верхней части окна браузера, и продолжает отображаться в минимизированном виде.<\/p>\n<p>Полная заглушка выглядит вот так:<\/p>\n<iframe width=\"806\" height=\"378\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/c5uey\/2\/show\/light\/\"><\/iframe>\n<p>Установка плагина предельно проста. Достаточно скачать архив по <a href=\"https:\/\/github.com\/codefucker\/finalReject\/archive\/master.zip\" onclick=\"yaCounter25967218.reachGoal('finalReject_download');\">ссылке<\/a> и распаковать папку reject в корень сайта. Или в любое другое место на сайте.<\/p>\n<p>Подключается плагин самым нативным способом: с помощью условных комментариев. Например для отображения заглушки во всех версиях IE ниже 9, достаточно добавить в блок &lt;head&gt; следующий код:<\/p>\n<pre class=\"e2-text-code\"><code class=\"xml\">&lt;!--[if lt IE 9]&gt;\r\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;\/reject\/reject.css&quot; media=&quot;all&quot; \/&gt;\r\n\t&lt;script type=&quot;text\/javascript&quot; src=&quot;\/reject\/reject.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;![endif]--&gt;<\/code>\n<\/pre>\n<p>В 7-9 версиях Internet Explorer плагин отображается и работает так, как задумано. В 6-й не совсем, но тоже адекватно.<\/p>\n<p><a href=\"https:\/\/github.com\/codefucker\/finalReject\/\">Страница плагина на Гитхабе<\/a>. Буду рад вашим старам, и пулл реквестам :-)<\/p>\n<p><i>На какое-то время, эта заметка в блоге будет являться официальной страницей плагина, пока я не придумаю что-нибудь поинтересней.<\/i><\/p>\n<p>UPD: Теперь finalReject можно установить с помощью bower:<\/p>\n<pre class=\"e2-text-code\"><code>$ bower install final-reject --save<\/code><\/pre><p>UPD2: Можно ничего не скачивать и не устанавливать, а просто добавить в &lt;head&gt; код:<\/p>\n<pre class=\"e2-text-code\"><code class=\"xml\">&lt;!--[if lt IE 9]&gt;\r\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/rawgit.com\/codefucker\/finalReject\/master\/reject\/reject.css&quot; media=&quot;all&quot; \/&gt;\r\n\t&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/rawgit.com\/codefucker\/finalReject\/master\/reject\/reject.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;![endif]--&gt;<\/code>\n<\/pre>\n<p>UPD3: Текст заглушки можно изменить с помощью аттрибута data-text:<\/p>\n<pre class=\"e2-text-code\"><code>&lt;!--[if lt IE 9]&gt;\r\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/rawgit.com\/codefucker\/finalReject\/master\/reject\/reject.css&quot; media=&quot;all&quot; \/&gt;\r\n\t&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/rawgit.com\/codefucker\/finalReject\/master\/reject\/reject.min.js&quot; data-text=&quot;Unfortunately, the browser you use, outdated and can not properly display the site. Please download any of the following browsers:&quot;&gt;&lt;\/script&gt;\r\n&lt;![endif]--&gt;<\/code><\/pre>",
            "date_published": "2014-05-04T23:22:55+04:00",
            "date_modified": "2019-07-02T16:33:36+04:00",
            "_date_published_rfc2822": "Sun, 04 May 2014 23:22:55 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/finalreject\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "6",
            "url": "https:\/\/blog.toliklunev.ru\/all\/kak-podruzhit-sublime-text-i-sass-na-windows\/",
            "title": "Как подружить Sublime Text 2 и SASS на Windows",
            "content_html": "<p>Если ты не знаешь что такое SASS, можешь почитать <a href=\"http:\/\/habrahabr.ru\/post\/140612\/\">тут<\/a>. Вкратце: очень крутая штука.<\/p>\n<p>Для начала, для того, чтобы получить возможность компилировать <a href=\"http:\/\/sass-lang.com\/\">sass\/scss<\/a> файлы необходимо установить <a href=\"http:\/\/rubyinstaller.org\/downloads\/\">Ruby<\/a>. Во время установки обязательно проследи чтобы стояла галочка, добавляющая Ruby в Path.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/sass\/ruby.png\" width=\"513\" height=\"398\" alt=\"\" \/>\n<\/div>\n<p>После установки запусти командную строку (cmd). Это можно сделать нажав Win + R и набрав cmd. В командной строке набери «gem install sass». Должно появится что-то вроде этого:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/sass\/gem.png\" width=\"677\" height=\"342\" alt=\"\" \/>\n<\/div>\n<p>SASS установлен. Теперь ты можешь компилировать sass\/scss файлы, используя командную строку:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/sass\/compile.png\" width=\"677\" height=\"342\" alt=\"\" \/>\n<\/div>\n<p>Но гораздо удобней делать это через текстовый редактор, например <a href=\"http:\/\/www.sublimetext.com\/\">Sublime Text<\/a><\/p>\n<p>Для начала в Sublime должен быть установлен Package Control. Если он у тебя ещё не установлен, нажми <b>ctrl+ё<\/b>, вставь в открывшуюся консоль следующие строки:<\/p>\n<pre class=\"e2-text-code\"><code>import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http:\/\/sublime.wbond.net\/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')<\/code><\/pre><p>После установки перезапусти Sublime.<\/p>\n<p>Теперь Package Control доступен из вкладки Preferences.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/sass\/package_control.png\" width=\"207\" height=\"291\" alt=\"\" \/>\n<\/div>\n<p>Нажми на него или используй хоткей <b>ctrl+shift+P<\/b> и набери <b>Install Package<\/b>, затем <b>SASS Build<\/b> и установи плагин.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/sass\/insatall.png\" width=\"408\" height=\"69\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.toliklunev.ru\/pictures\/sass\/sass_build.png\" width=\"414\" height=\"399\" alt=\"\" \/>\n<\/div>\n<p>Перезапусти Sublime.<\/p>\n<p>Всё, теперь ты можешь компилировать sass\/scss файлы нажав <b>ctrl+B<\/b>.<\/p>\n<p>Скомпилированный файл появится рядом, с таким же именем и расширением css.<\/p>\n<p><b>Важно!<\/b> В пути до компилируемого файла не должно быть русских символов. Да, в 21-м веке это звучит странно, но у Sublime возникают с этим проблемы. Если ты знаешь как это победить, поделись в комментариях.<\/p>\n<p>Если файл не компилируется, а в консоли выводится что-то вроде этого:<\/p>\n<pre class=\"e2-text-code\"><code>Traceback (most recent call last):\r\n  File &quot;.\\sublime_plugin.py&quot;, line 337, in run_\r\n  File &quot;.\\exec.py&quot;, line 154, in run\r\n  File &quot;.\\exec.py&quot;, line 45, in __init__\r\nUnicodeDecodeError: 'ascii' codec can't decode byte 0xcf in position 6: ordinal not in range(128)<\/code><\/pre><p>то есть одно магическое действие, которое может решить проблему.<\/p>\n<p>Кликни в меню Preferences → Browse Packages...<\/p>\n<p>открой файл \/Default\/exec.py и замени строку<\/p>\n<pre class=\"e2-text-code\"><code>proc_env[k] = os.path.expandvars(v).encode(sys.getfilesystemencoding())<\/code><\/pre><p>на<\/p>\n<pre class=\"e2-text-code\"><code>proc_env[k] = os.path.expandvars(v.decode(sys.getfilesystemencoding())).encode(sys.getfilesystemencoding())<\/code><\/pre><p>Это должно помочь.<\/p>\n<p>Чтобы сэкономить время, можешь установить плагин SublimeOnSaveBuild, и тогда компиляция будет происходить сразу после сохранения (по нажатию ctrl+S).<\/p>\n<p>Для подсветки синтаксиса sass\/scss файлов установи плагины в Sublime, которые так и называются SASS и SCSS, или другие, в названии которых содержится highlight.<\/p>\n<p>Если тебе когда-нибудь понадобится обновить SASS, просто набери в командной строке «gem update sass».<\/p>\n",
            "date_published": "2014-04-29T18:58:52+04:00",
            "date_modified": "2017-01-21T20:38:35+04:00",
            "image": "https:\/\/blog.toliklunev.ru\/pictures\/sass\/ruby.png",
            "_date_published_rfc2822": "Tue, 29 Apr 2014 18:58:52 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/kak-podruzhit-sublime-text-i-sass-na-windows\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog.toliklunev.ru\/pictures\/sass\/ruby.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/sass\/gem.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/sass\/compile.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/sass\/package_control.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/sass\/insatall.png",
                    "https:\/\/blog.toliklunev.ru\/pictures\/sass\/sass_build.png"
                ]
            }
        },
        {
            "id": "2",
            "url": "https:\/\/blog.toliklunev.ru\/all\/kak-sverstat-strelku-bez-kartinok\/",
            "title": "Как сверстать стрелку без картинок",
            "content_html": "<p>Прочитав эту заметку, вы узнайте как сверстать вот такую симпатичную стрелочку:<\/p>\n<iframe width=\"400\" height=\"160\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/0\/show\/light\/\"><\/iframe>\n<h2>«Рисуем» треугольники<\/h2>\n<p>Возьмём обычный бокс с бордером, для наглядности раскрасив стороны в разные цвета:<\/p>\n<iframe width=\"215\" height=\"260\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/1\/show\/\"><\/iframe>\n<pre class=\"e2-text-code\"><code>.box{\r\n\tborder-style: solid;\r\n\tborder-top-color: blue;\r\n\tborder-right-color: green;\r\n\tborder-bottom-color: yellow;\r\n\tborder-left-color: red;\r\n}<\/code><\/pre><pre class=\"e2-text-code\"><code>&lt;div class=&quot;box&quot; style=&quot;width: 200px; height: 200px; border-width: 2px&quot;&gt;&lt;\/div&gt;<\/code><\/pre><p>А теперь увеличим размер бордеров, одновременно уменьшив бокс:<\/p>\n<iframe width=\"215\" height=\"260\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/3\/show\/\"><\/iframe>\n<pre class=\"e2-text-code\"><code>&lt;div class=&quot;box&quot; style=&quot;width: 100px; height: 100px; border-width: 52px&quot;&gt;&lt;\/div&gt;<\/code><\/pre><p>Убёрем высоту и ширину совсем:<\/p>\n<iframe width=\"215\" height=\"260\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/4\/show\/\"><\/iframe>\n<pre class=\"code\"><code data-language=\"html\"><div class=\"box\" style=\"width: 0; height: 0; border-width: 102px\"><\/div><\/code>\n<\/pre>\n<p>Треугольники готовы.<\/p>\n<h2>«Рисуем» стрелку<\/h2>\n<p>Заготовка:<\/p>\n<iframe width=\"215\" height=\"80\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/5\/show\/\"><\/iframe>\n<pre class=\"e2-text-code\"><code>.arrow{\r\n\tposition: relative;\r\n\tbackground: #09F;\r\n\tdisplay: inline-block;\r\n\twidth: 200px;\r\n\tpadding: 5px;\r\n\tcolor: #FFF;\r\n}<\/code><\/pre><pre class=\"e2-text-code\"><code>&lt;div class=&quot;arrow&quot;&gt;&amp;nbsp;&lt;\/div&gt;<\/code><\/pre><p>Добавим знакомые нам треугольники, с помощью псевдоэлемента :after, раскрасив все в один цвет, и сделав прозрачным левый бордер:<\/p>\n<iframe width=\"210\" height=\"260\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/6\/show\/\"><\/iframe>\n<pre class=\"e2-text-code\"><code>.arrow:after{\r\n\twidth: 0;\r\n\theight: 0;\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tborder: 100px solid red;\r\n\tborder-left-color: transparent;\r\n\tz-index: 10;\r\n\tcontent: &quot;&quot;;\r\n}<\/code><\/pre><p>Хитрым образом спозиционируем псевдоэлемент:<\/p>\n<iframe width=\"315\" height=\"265\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/7\/show\/\"><\/iframe>\n<pre class=\"e2-text-code\"><code>\/* добавляем *\/\r\n.arrow:after{\r\n\ttop: 50%;\r\n\tright: -100px;\r\n\tmargin-top: -100px;\r\n}<\/code><\/pre><p>Скроем выступы и покрасим бордеры в цвет фона:<\/p>\n<iframe width=\"210\" height=\"85\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/8\/show\/\"><\/iframe>\n<iframe width=\"210\" height=\"85\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/9\/show\/\"><\/iframe>\n<pre class=\"e2-text-code\"><code>\/* добавляем *\/\r\n.arrow{\r\n\toverflow: hidden;\r\n}\r\n\r\n.arrow:after{\r\n\tborder-color: #FFF;\r\n\tborder-left-color: transparent;\r\n}<\/code><\/pre><p>Стрелка готова, для крутости можно добавить градиент:<\/p>\n<iframe width=\"210\" height=\"85\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/10\/show\/\"><\/iframe>\n<p>У метода есть 2 недостатка:<\/p>\n<ul>\n<li>фон должен быть однородным,<\/li>\n<li>по-настоящему многострочную стрелку сделать не получиться, потому-что<\/li>\n<\/ul>\n<iframe width=\"210\" height=\"140\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/11\/show\/\"><\/iframe>\n<p>но вполне возможно подобрать значение правого паддинга для 2-3 строк<\/p>\n",
            "date_published": "2012-09-16T23:37:27+04:00",
            "date_modified": "2019-07-02T16:32:57+04:00",
            "_date_published_rfc2822": "Sun, 16 Sep 2012 23:37:27 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/kak-sverstat-strelku-bez-kartinok\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        }
    ],
    "_e2_version": 3254,
    "_e2_ua_string": "E2 (v3254; Aegea)"
}