{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Dmitry Podgorniy, posts tagged: разработка",
    "home_page_url": "https:\/\/blog.dmitrypodgorniy.com\/tags\/razrabotka\/",
    "feed_url": "https:\/\/blog.dmitrypodgorniy.com\/tags\/razrabotka\/json\/",
    "icon": "https:\/\/blog.dmitrypodgorniy.com\/user\/userpic@2x.png",
    "author": {
        "name": "Дмитрий Подгорный",
        "url": "https:\/\/blog.dmitrypodgorniy.com\/",
        "avatar": "https:\/\/blog.dmitrypodgorniy.com\/user\/userpic@2x.png"
    },
    "items": [
        {
            "id": "174",
            "url": "https:\/\/blog.dmitrypodgorniy.com\/all\/luchshee-regulyarnoe-vyrazhenie-dlya-validacii-email-v-web-forma\/",
            "title": "Лучшее регулярное выражение для валидации email в web формах",
            "content_html": "<pre><pre class=\"e2-text-code\"><code>\/[^@]+@[^@\\.]+\\.[^@]+\/<\/code><\/pre><\/pre>\n<p>Оговорка “на клиенте” сделана не просто так. Задача валидации на клиенте – подсказать пользователю, где он ошибся в написании email-а. Важно случайным образом не запретить пользователю с непредусмотренным емейлом воспользоваться формой. Учитывая то, какие варианты емейла могут быть (неожиданные домены, появляющиеся по пучку каждый месяц, ip адреса в качестве домена, и символы точки и симполы +, и другие неизвестные широкому обывателю вещи), напрашивается вывод, что лучшая валидация проверит емейл на наличие текста вида текст-собачка-текст-точка-текст.<\/p>\n",
            "date_published": "2015-04-21T18:19:11+02:00",
            "date_modified": "2018-02-22T00:05:34+02:00",
            "_date_published_rfc2822": "Tue, 21 Apr 2015 18:19:11 +0200",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.dmitrypodgorniy.com\/all\/luchshee-regulyarnoe-vyrazhenie-dlya-validacii-email-v-web-forma\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "176",
            "url": "https:\/\/blog.dmitrypodgorniy.com\/all\/ne-zamechai-poka-rabotaet\/",
            "title": "Не замечаешь пока работает",
            "content_html": "<p>Внимание программиста не обращается на то, что уже работает, и что он считает само собой разумеющимся. При этом чем меньше программист смотрит по сторонам на соседние технологии, Фреймворки, библиотеки, тем меньше вероятность, что он поймет недостатки того решения, которое он использует сегодня. Немалую роль играет неумение отличить привычное от понятного (понятное может быть привычным, но сложным в освоении).<\/p>\n<p>Сознание не концентрирует внимание на то, что работает, пока работающая схема не ломается. Сознание различает только негативные сигналы, пропуская позитивные. Пока изменения в приложении даются просто, внимание не обращается на удобство и удачный подход к проектированию. Только при трудностях начинаешь  осознавать неудачность решения.<\/p>\n<p>Удачность решения можно оценить только когда поймешь сколько ресурсов надо было бы потратить, если бы решение оказалось иным. Только опыт позволит отличить удачное решение от неудачного.<\/p>\n",
            "date_published": "2015-04-20T21:32:27+02:00",
            "date_modified": "2018-02-22T00:05:52+02:00",
            "_date_published_rfc2822": "Mon, 20 Apr 2015 21:32:27 +0200",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.dmitrypodgorniy.com\/all\/ne-zamechai-poka-rabotaet\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "171",
            "url": "https:\/\/blog.dmitrypodgorniy.com\/all\/o-meteorjs\/",
            "title": "О meteorjs",
            "content_html": "<p><a href=\"https:\/\/www.meteor.com\">Метеор<\/a> – фреймверк, который включает в себя полный стек разработки: клиент, сервер, бд. Метеор реализовал собой концепцию “один и тот же код для клиента и сервера”.<\/p>\n<p>Я начал знакомство с этим фреймверком с версии 0.4, уже два года как. Параллельно я смотрел на другие инструменты, разрешающие те же задачи, что и метеор (expressjs, socketio, sailsjs, backbone, mongoosejs, swarmjs, react, и другие, названия которых так и не вспомню). Я искал и подбирал те инструменты, которые позволят быть мне продуктивным, создавать и поддерживать проекты самостоятельно. Инструмента лучше метеора, я не нашел.<\/p>\n<p>Что делает метеор: он радикально упрощает разработку приложений.<\/p>\n<ol start=\"1\">\n<li>Используется один и тот же код для сервера и клиента. Я рад, что был выбран чистый js, а не какой-нить кофе (хотя код на кофе можно использовать наравне с js, нужно только добавить соответствующий пакет).<\/li>\n<li>Подход к работе с базой данных на клиенте и сервере одинаковый. Один и тот же код работы с данными используется как для клиента, так и для сервера. Это достигается эмуляцией mongo api в браузере (с некоторыми ограничениями). Ограничение данных, доступных для клиента описывается в одном месте.<\/li>\n<li>Большинство вещей, нужных для разработки идут из коробки: бутсрапинг приложения, темплейты, данные, пакетная система, сборка-минификация проекта, работа с аккаунтами и почтой. Бесплатный хостинг и деплой на него в одну команду. Пока не хватает нативного деплоймент менеджера из коробки (сейчас пользуюсь сторонним <a href=\"https:\/\/github.com\/arunoda\/meteor-up,\">https:\/\/github.com\/arunoda\/meteor-up,<\/a> деплою на digitalocean, ненарадуюсь), не хватает фреймверка для тестирования из коробки. Над этими пакетами сейчас идет работа.<\/li>\n<li>Концепция реактивности. Код пишется так, что за обновлением данных на сервере следует немедленная реакция всех клиентов. На клиенте изменения данных отражаются автоматически на отображении страницы. Весь код, необходимый реактивности уже вшит в фреймверк (в работу с бд, темплейтами, сессионными данными). Работа с фреймверком сводится чисто к манипуляции с данными, без необходимости писать обертки-сихронизаторы, пробрасывать события, чтобы связать изменения зависимых данных.<\/li>\n<\/ol>\n<p><b>Почему метеор имеет значение<\/b>. История показывает, что выживают те технологии, которые решают задачи лучше других. Такие технологии как PHP, javascript выжили и распространились в большей степени не от того, что они хороши сами по себе, а потому что лучше других решали задачи (генерация html, и оживление страничек в браузере). Так вот метеор – это та технология, которая лучше других справляется с теми задачами, которые сегодня стоят перед веб разработчиками (работа с бд, изоляция вьюх, “умные” теплейты, деплой). javascript как язык, на котором говорит веб, одинаковые концепции для сервера и клиента, отсутствие необходимости совершать выбор стека технологий, необходимые инструменты из коробки: все это делает разработку на метеоре намного проще, если сравнивать с разработкой на самособранном стеке (сервер expressjs или connect, база mongodb, орм для базы mongoose, сокет-сервер socketio, клиент angular, backbone + react, что-то для деплоя и т. д.).<\/p>\n<p>Из личных положительных впечатлений: написанный код не требует многих абстракций, и выглядит плоским. По странице можно понять какая часть кода отвечает за работу той или иной части.<\/p>\n<p>Из минусов.<\/p>\n<ol start=\"1\">\n<li>Метеор – это полный стек. И так или иначе придется мириться с тем выбором, который был сделан создателями (в плане движка теплейтов, реактивности, подхода к работе с событиями и т. д.). Я понимаю, что хочется использовать знакомые вещи вместо незнакомых потому что так проще. Поэтому я считаю что метеор не подходит для тех, кто не готов довериться этому стеку технологий.<\/li>\n<li>Целый набор новых парадигм (во всяком случае подходы метеора отличаются от тех, с которыми я сталкивался, разрабатывая сайты на expressjs и socketio). Новые парадигмы порождают непривычные проблемы. Попытка применить опыт разработки на том же expressjs к работе с метеором ведет к большему количеству вопросов, чем ответов.<\/li>\n<li>Не поддерживается windows. Разработку из под винды вести сегодня не получится. Поддержка винды – это то, над чем сейчас активно ведется работа.<\/li>\n<\/ol>\n<p>Для знакомства с технологией:<\/p>\n<p>Пошаговый туториал<br \/>\n<a href=\"https:\/\/www.meteor.com\/install\">https:\/\/www.meteor.com\/install<\/a><\/p>\n<p>Документация на английском<br \/>\n<a href=\"http:\/\/docs.meteor.com\/#\/full\/\">http:\/\/docs.meteor.com\/#\/full\/<\/a><\/p>\n<p>Книженция, где создают приложение на метеоре<br \/>\n<a href=\"https:\/\/www.discovermeteor.com\">https:\/\/www.discovermeteor.com<\/a><br \/>\nи ее перевод <a href=\"http:\/\/ru.discovermeteor.com\/\">http:\/\/ru.discovermeteor.com\/<\/a><\/p>\n<p>Годный блог про то как работают кишечки фреймверка<br \/>\n<a href=\"http:\/\/meteorhacks.com\">http:\/\/meteorhacks.com<\/a><\/p>\n<p>Поиграться с метеором без необходимости его устанавливать (или чтобы поразрабатывать из-под винды):<br \/>\n<a href=\"http:\/\/meteorpad.com\">http:\/\/meteorpad.com<\/a><\/p>\n<p>Раздел форума, где я могу помочь и подсказать по метеору<br \/>\n<a href=\"http:\/\/forum.jscourse.com\/c\/meteor\">http:\/\/forum.jscourse.com\/c\/meteor<\/a><\/p>\n",
            "date_published": "2014-12-11T22:58:52+02:00",
            "date_modified": "2018-02-22T00:06:11+02:00",
            "_date_published_rfc2822": "Thu, 11 Dec 2014 22:58:52 +0200",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.dmitrypodgorniy.com\/all\/o-meteorjs\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "164",
            "url": "https:\/\/blog.dmitrypodgorniy.com\/all\/kak-pridumyvat-horoshie-imena-peremennyh\/",
            "title": "Как придумывать хорошие имена переменных",
            "content_html": "<p><b>1<\/b>. Имя переменной должно называться сущностью из предметной области. Чем абстрактнее название переменной, тем сложнее понимать программу.<\/p>\n<pre><pre class=\"e2-text-code\"><code>\/\/ Абстрактно\r\nfunction drive(settings) {}\r\n\r\n\/\/ Конкретно\r\nfunction drive(pathDirections) {}<\/code><\/pre><\/pre>\n<p><b>2<\/b>. Если думать о программе на русском, то не всегда нужное слово для названия переменной с легкостью извлекается из головы. В таком случае можно воспользоваться электронным переводчиком. Он же предложит несколько вариантов перевода одного и того же термина.<\/p>\n<p><b>3<\/b>. Синонимы могут быть лучше первого вспомнившегося перевода. Пользуйся <a href=\"http:\/\/thesaurus.com\">http:\/\/thesaurus.com<\/a> для поиска синонимов. Там же найдешь антонимы.<\/p>\n<p>Какими еще способами можно улучшить именование переменных?<\/p>\n",
            "date_published": "2014-08-24T02:56:13+02:00",
            "date_modified": "2018-02-22T00:08:02+02:00",
            "_date_published_rfc2822": "Sun, 24 Aug 2014 02:56:13 +0200",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.dmitrypodgorniy.com\/all\/kak-pridumyvat-horoshie-imena-peremennyh\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "163",
            "url": "https:\/\/blog.dmitrypodgorniy.com\/all\/nedoocenennye-annotacii-event-i-fires\/",
            "title": "Недооцененные аннотации @event и @fires",
            "content_html": "<p>Аннотации вкупе с редактором, который их хорошо поддерживает (в моем случае webstorm) намного упрощают разбирательство того как работает программа.<\/p>\n<p>С помощью аннотаций удобно указывать что происходит, а не как это происходит. Например, реальность такова, что для подобного результата, к примеру, наследование класса, существует множество библиотек и подходов. Каждый фреймверк несет свой подход. Чтобы понять, какие методы содержаться в экземпляре класса (для удобного автокомплита), прийдется выполнить весь js код. Аннотации же позволяют указать зависимость между классами, не указывая как именно эта зависимость реализована.<\/p>\n<pre><pre class=\"e2-text-code\"><code>\/**\r\n * @constructor\r\n *\/\r\nfunction EventEmitter() {}\r\nEventEmitter.prototype.on = function () {}\r\nEventEmitter.prototype.off = function () {}\r\nEventEmitter.prototype.trigger = function () {}\r\n\r\n\r\n\/**\r\n * @constructor\r\n * @extends EventEmitter\r\n *\/\r\nfunction Model() {}\r\nModel.prototype.ready = function () {}\r\n\r\n\/**\r\n * @constructor\r\n * @extends Model\r\n *\/\r\nfunction UserAccount() {}\r\n\r\nvar ua = new UserAccount(1)<\/code><\/pre><\/pre>\n<p>Подобное использование аннотаций позволяет редактору подсказывать методы экземпляров<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.dmitrypodgorniy.com\/pictures\/methods-autocomplete.gif\" width=\"497\" height=\"328\" alt=\"\" \/>\n<\/div>\n<p>А так же переходить к определению класса, от которого происходит наследование<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.dmitrypodgorniy.com\/pictures\/to-superclass.gif\" width=\"497\" height=\"328\" alt=\"\" \/>\n<\/div>\n<p><b>Теперь о недооцененных аннотациях<\/b><br \/>\n<a href=\"http:\/\/usejsdoc.org\/tags-event.html\">@event<\/a> описывает событие подобно еще одному типу данных. Метод, который стреляет событие описывается с помощью аннотации <a href=\"http:\/\/usejsdoc.org\/tags-fires.html\">@fires<\/a>. А так же метод, который слушает событие помечается аннотацией <a href=\"https:\/\/github.com\/jsdoc3\/jsdoc\/blob\/master\/changes.md#320-may-2013\">@listens<\/a>. При корректной поддержке редакторами (я скорее ожидаю этого от webstorm), установить порядок связей в приложении становится намного проще. Реалии веб разработки такие, что почти все проекты используют EventEmitter, Mediator, Stream паттерны. Используя аннотации и продвинутый редактор, установить связь между классами, методами не составляет большой сложности. Большая сложность заключается в понимании того, как связаны объекты между собой, когда объекты подписываются на события. Место, где стреляется событие приходится искать вручную.<\/p>\n<p>Я удивился, что подобная функциональность не была реализована до сих пор к вебшторме. Единственная сложность, с которой я сталкивался в при разборе больших проектов – понимание где стреляется событие, на которое происходит подписка. Аннотации, описанные выше, должны были бы неимоверно упростить понимание хитросплетений событий.<\/p>\n<p>Из хороших новостей – поддержка этих аннотаций <a href=\"http:\/\/youtrack.jetbrains.com\/issue\/WEB-11838\">запланирована<\/a>.<\/p>\n",
            "date_published": "2014-08-17T16:43:29+02:00",
            "date_modified": "2018-02-22T00:08:13+02:00",
            "image": "https:\/\/blog.dmitrypodgorniy.com\/pictures\/methods-autocomplete.gif",
            "_date_published_rfc2822": "Sun, 17 Aug 2014 16:43:29 +0200",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.dmitrypodgorniy.com\/all\/nedoocenennye-annotacii-event-i-fires\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/blog.dmitrypodgorniy.com\/pictures\/methods-autocomplete.gif",
                    "https:\/\/blog.dmitrypodgorniy.com\/pictures\/to-superclass.gif"
                ]
            }
        },
        {
            "id": "156",
            "url": "https:\/\/blog.dmitrypodgorniy.com\/all\/proverka-pravopisaniya-dlya-dvizhka-blogengine\/",
            "title": "Проверка правописания для движка blogengine",
            "content_html": "<p>Качество правописания у меня страдает. Решение – автоматическая проверка набираемых текстов прямо на уровне движка. Правописание можно проверять в комментариях и при наборе статьи. Для проверки используется <a href=\"http:\/\/api.yandex.ru\/speller\/\">API Яндекс спеллера<\/a>.<\/p>\n<p>Код и инструкция по установке – на гитхабе: <a href=\"https:\/\/github.com\/podgorniy\/blogengine-speller\">https:\/\/github.com\/podgorniy\/blogengine-speller<\/a><\/p>\n",
            "date_published": "2014-06-15T20:05:43+02:00",
            "date_modified": "2018-02-22T00:09:27+02:00",
            "_date_published_rfc2822": "Sun, 15 Jun 2014 20:05:43 +0200",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.dmitrypodgorniy.com\/all\/proverka-pravopisaniya-dlya-dvizhka-blogengine\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "155",
            "url": "https:\/\/blog.dmitrypodgorniy.com\/all\/poproboval-pisat-proekt-na-es6\/",
            "title": "Попробовал писать проект на es6",
            "content_html": "<p>Классы – круто. В es < 6 Так или иначе приходилось эмулировать создание классов, хоть и на прототипном наследовании. Поддержка на уровне языка дает чистый читабельный код.<\/p>\n<p>Деструктивное присваивание, оператор spread и rest arguments используется не так часто, как мне казалось, когда я думал о es6.<\/p>\n<p>Функции-стрелки – круто. Хоть я и писал серверный код, все равно пару раз понадобились, сделали код чище. Требуют сноровки и внимательности, чтобы не превратить код в нечитаемую лапшу, когда вкладываются одна в другую. Возможно я всего лишь еще не научился читать es6.<\/p>\n<p>Квазилитералы волшебны. Для логгирования самое то. Опять-таки, из-за того, что приложение было серверным, строки со вставками вычислений не надо было генерировать в том количестве, что требует клиентский код.<\/p>\n<p>Как только проект чуть разросся (5 классов), столкнулся с бедной поддержкой языка редактором (писал в саблайме). Переход к методу или классу не работает, а пользоваться поиском не с руки. Еще столкнулся с проблемой с подсветкой синтаксиса. Из-за непривычности синтаксиса допускал много ошибок, которые в редакторе не были видны, и приходилось запускать приложение, а потом из stack trace понимать в какой строке допустил описку.<\/p>\n<p>Эти два фактора свели на “нет” все прелести нового стандарта, и в итоге недоделанный проект я переписываю на es5.на<\/p>\n<p>Общие впечатления от es6 – самые теплые. Через пол года повторю эксперимент.<\/p>\n<p>Писал код, прогоняя его через <a href=\"https:\/\/github.com\/google\/traceur-compiler\">traceur-compiler<\/a>. Для ноды разработка происходит прозрачно: скрипт инициализации проекта подтягивает traceur, тот умеет переписывать функцию импорта модулей, я указываю какие модули являются es6, и при их импорте traceur, прогоняет содержимое через свою магию. Все преобразования es6-es5 происходят в памяти, дополнительных файлов не создается. Проект стартует-рестартует быстро.<\/p>\n<p>Если не понятно о чем я говорю, и интересно, то <a href=\"\/blog\/all\/slaydy-i-resursy-o-novshestvah-ecmascript-6\/\">тут<\/a> можно найти список статей, рассказывающих про новшества es6. А <a href=\"\/talks\/es6-whats-new\/\">тут<\/a> – посмотреть на слайды с моего выступления на оную же тему. (чтобы увидеть заметки к слайдам, перейди в режим перезентующего, нажав на клаве <i>S<\/i>)<\/p>\n<p><b>UPD<\/b> Поддержка Webstorm-ом es6 на порядок лучше того сетапа, которым я пользовался <a href=\"https:\/\/www.youtube.com\/watch?v=jbfkcmxLLKY\">https:\/\/www.youtube.com\/watch?v=jbfkcmxLLKY<\/a><\/p>\n",
            "date_published": "2014-06-11T21:26:57+02:00",
            "date_modified": "2018-02-22T00:09:39+02:00",
            "_date_published_rfc2822": "Wed, 11 Jun 2014 21:26:57 +0200",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.dmitrypodgorniy.com\/all\/poproboval-pisat-proekt-na-es6\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "153",
            "url": "https:\/\/blog.dmitrypodgorniy.com\/all\/pro-vybor-tehnologiy\/",
            "title": "Про выбор технологий",
            "content_html": "<p>Выбор инструментов и технологий должен быть обусловлен критериями, в которых строится проект. Бюджет, размер команды, планы на будущее, опыт людей, с которыми нужно будет работать – все влияет на выбор инструментов. Молодые амбициозные технологии хороши для домашних проектов так как цены ошибки невелика, а шанс, что потенциал технологии будет соответствовать заверениям маркетологов, присутствует.<\/p>\n<p>Проверенные временем, опенсорсные, на которые уже завязано много работающего кода – для потенциально долгоживущих за счет инертности. Бывает, лучше выбрать кривоватое решение с большим коммьюнити, чем прекрасное решение “в точку” без единой живой души, кто им пользуется.<\/p>\n<p>Тем, кто убежден, что “популярность === высокое качество”, у меня плохие новости: ваше видение мира не соответствует действительности.<\/p>\n<p>Для быстрого прототипирования нужны уже известные, ненакладные во времязатратах инструменты.<\/p>\n<p>Пускать выбор технологий на самотек не стоит. Тогда в случае ошибочного выбора сложно будет извлечь опыт из ситуации (то есть сравнить предположения, ожидания с результатом)<\/p>\n",
            "date_published": "2014-06-01T22:37:00+02:00",
            "date_modified": "2018-02-22T00:10:05+02:00",
            "_date_published_rfc2822": "Sun, 01 Jun 2014 22:37:00 +0200",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.dmitrypodgorniy.com\/all\/pro-vybor-tehnologiy\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "151",
            "url": "https:\/\/blog.dmitrypodgorniy.com\/all\/integraciya-dash-v-alfred\/",
            "title": "Интеграция dash в alfred",
            "content_html": "<p>Есть 2 прекрасных инструмента, которыми я активно пользуюсь во время разработки. Это <a href=\"http:\/\/kapeli.com\/dash\">dash<\/a> и <a href=\"http:\/\/alfredapp.com\/\">alfred<\/a>. Даш имеет плагин для интеграции с альфредом. Плагин работает криво, сначала предлагая список возможных вариантов выбора в выпадающем списке альфреда, в котором нужно тыкнуть интересующий вариант, и только потом откроется приложение даш. При этом плагин предлагает назначить отдельное сочетание клавиш на запуск даш, и на поиск выделенного текста в даш.<\/p>\n<p>Какого поведения хотелось бы: по одному и тому же хоткею всегда открывается даш. Если был выделен текст, этот же текст ищется в даше. Реализация состоит из одной строки. Зная что даш регистрирует свой протокол, благодаря которому можно открывать окно поиска через консоль<\/p>\n<pre><pre class=\"e2-text-code\"><code>open dash:\/\/forEach<\/code><\/pre><\/pre>\n<p>, пишем скрипт открытия даша, куда аргументом передаем выделенный текст. Готовый воркфлоу: <a href=\"https:\/\/github.com\/podgorniy\/alfred-dash\/blob\/master\/Dash.alfredworkflow?raw=true\">https:\/\/github.com\/podgorniy\/alfred-dash\/blob\/master\/Dash.alfredworkflow?raw=true<\/a><br \/>\nПосле установки не забудь назначить хоткей для запуска воркфлоу. У меня это<\/p>\n<pre class=\"e2-text-code\"><code>ctrl+shift+d<\/code><\/pre><p>.<\/p>\n",
            "date_published": "2014-05-24T20:40:08+02:00",
            "date_modified": "2018-02-22T00:10:50+02:00",
            "_date_published_rfc2822": "Sat, 24 May 2014 20:40:08 +0200",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.dmitrypodgorniy.com\/all\/integraciya-dash-v-alfred\/",
            "_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": "150",
            "url": "https:\/\/blog.dmitrypodgorniy.com\/all\/otladka-stiley-dinamicheskogo-dom-a\/",
            "title": "Отладка стилей динамического DOM-а",
            "content_html": "<p>Под отладкой я принимаю необходимость подкрутить свойства стилей узла через вебинспектор, и сразу же увидеть результат применения. Осложняющим фактором будет видимое отсутствие элемента на странице. Элемент может быть не виден до определенного события. Может быть несколько причин невидимости. Рассмотрим случаи:<\/p>\n<p><b>Случай 1. Тривиальный<\/b><br \/>\nЭлемент находится в DOM, но скрыт, и появляется при наведении мышки на своего родителя.<br \/>\nВ этом случае удобнее воспользоваться возможностью вебинспектора форсить состояние элемента будто на него наведена мышка. Обрати внимание, что элемент, на котором зафорсен hover, подсвечивается оранжевыми точками.<\/p>\n<p>Страница для тренировки: <a href=\"http:\/\/dmitrypodgorniy.com\/demos\/dynamic-visibility\/hover.html\">http:\/\/dmitrypodgorniy.com\/demos\/dynamic-visibility\/hover.html<\/a><br \/>\nВ динамике:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.dmitrypodgorniy.com\/pictures\/force-hover-chrome.gif\" width=\"520\" height=\"370\" alt=\"\" \/>\n<\/div>\n<p><b>Случай 2. Терпимый<\/b><br \/>\nЭлемент добавляется и удаляется из DOM динамически. При этом DOM сам по себе не сильно изменяется. Такое поведение можно встретить на несложных сайтах с плагинами-меню. Чтобы отладить стили всплывающего элемента, словим момент добавления элемента в DOM с помощью установки breakpoint на мутацию DOM-а. Находясь в режиме отладки, хром не выполняет скрипты, которые должны бы скрыть элемент, но позволяет изменять стили элемента.<\/p>\n<p>Не забудьте убрать breakpoint после того, как закончите отладку, чтобы не попадать в отладчик каждый раз при модификации DOM. Список всех breakpoint можно найти во вкладке “Sources”<\/p>\n<p>Страница для тренировки: <a href=\"http:\/\/dmitrypodgorniy.com\/demos\/dynamic-visibility\/dynamic-dom.html\">http:\/\/dmitrypodgorniy.com\/demos\/dynamic-visibility\/dynamic-dom.html<\/a><br \/>\nВ динамике:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.dmitrypodgorniy.com\/pictures\/break-on-subtree-modifications.gif\" width=\"645\" height=\"555\" alt=\"\" \/>\n<\/div>\n<p><b>Случай 3 (запущенный)<\/b><br \/>\nЭлемент добавляется и удаляется с помощью js или с использованием хитрых стилей. При этом с первой попытки не удалось понять механику добавления, а DOM страницы меняется очень уж часто, и подход из предыдущего случая не помогает.<\/p>\n<p>Идея – попасть в режим отладки прямо из консоли, введя debugger. При этом не потеряв фокус на странице. Помогает хитрость: нужно скрыть консоль, выполнить действие, чтобы элемент появился, открыть консоль (в этот момент она получает фокус, но фокус со страницы не пропадает), напечатать debugger. Теперь, в режиме отладки, можно менять стили, а элемент не будет скрываться, пока мы не выйдем из этого режима.<\/p>\n<p>Страница для тренировки: <a href=\"http:\/\/dmitrypodgorniy.com\/demos\/dynamic-visibility\/hover.html\">http:\/\/dmitrypodgorniy.com\/demos\/dynamic-visibility\/hover.html<\/a><br \/>\nВ динамике:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/blog.dmitrypodgorniy.com\/pictures\/debugger-freeze.gif\" width=\"645\" height=\"419\" alt=\"\" \/>\n<\/div>\n",
            "date_published": "2014-05-18T20:39:51+02:00",
            "date_modified": "2018-02-22T00:11:08+02:00",
            "image": "https:\/\/blog.dmitrypodgorniy.com\/pictures\/force-hover-chrome.gif",
            "_date_published_rfc2822": "Sun, 18 May 2014 20:39:51 +0200",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.dmitrypodgorniy.com\/all\/otladka-stiley-dinamicheskogo-dom-a\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/blog.dmitrypodgorniy.com\/pictures\/force-hover-chrome.gif",
                    "https:\/\/blog.dmitrypodgorniy.com\/pictures\/break-on-subtree-modifications.gif",
                    "https:\/\/blog.dmitrypodgorniy.com\/pictures\/debugger-freeze.gif"
                ]
            }
        }
    ],
    "_e2_version": 3254,
    "_e2_ua_string": "E2 (v3254; Aegea)"
}