Tampermonkey — расширения для выполнения пользовательских скриптов на страницах сайтов.

Серфил я по интернету, и тут у меня возникла надобность в выполнении определенного JavaScript кода на страничках конкретного сайта.

На тот момент я знал, что существует такое расширение Tampermonkey, так как я подключал через него скрипт от SaveFrom, который позволял скачивать медиафайлы с YouTube, ВКонтакте и прочих подобных ресурсов. Но вот сам я подобных скриптов до того момента не писал.

Решил я устранить этот недочет. Итак сделам краткий обзор этого плагина.

Само меню плагина выглядит таким вот образом

  1. Статус плагина
  2. Пользовательские скрипты, активные на сайте
  3. Открывает дашборд с открытым окном создания нового скрипта, в котором будет добавлена актульная запись для активации скрипта на странице, с которой вы активировали этот пункт меню
  4. Проверка обновления добавленных скриптов. По идее позволяет обновлять скрипты, добавленные с удаленных ресурсов, как SaveFrom например.
  5. Открывает дашборд плагина

Следующим предлагаю рассмотреть дашборд

Здесь находятся 5 вкладок. Перечислю их слева направо:

  1. Создание нового скрипта
  2. Установленные скрипты — перечень скриптов и управление ими (включение/отключение, редактирование, удаление)
  3. Настройки
  4. Утилиты — импорт/экспорт скриптов и настроек
  5. Помощь — список горячих клавиш

Здесь всё довольно просто и понятно.

Нас, как разработчиков, больше всего интересует редактор скриптов. Откроем ка мы его и посмотрим что там есть

Как видим в скрипте есть блок, похожий на своебразный jsDoc. В нем прописывается информация о плагине(название, автор, версия и тд), сайты, на которых скрипт будет активен, разрешения на выполнение тех или иных действий, подключение сторонних скриптов с интернета (jQuery и тд) и много чего другого, с чем я пока не работал.

Код нашего скрипта мы должны писать в теле анонимной функции, где стоит комментарий // Your code here…

Давайте-ка теперь попробуем написать и выполнить свой первый на Tampermonkey.

Для этого мы должны сделать следующее:

  1. Зайти на сайт, на котором мы хотим выполнить скрипт
  2. Выбрать в меню плагина Create a new script
  3. Прописать код, который мы хотим чтобы у нас выполнился и сохранить скрипт
  4. Обновить страничку, на которой мы решили создать скрипт

Вуаля, скрипт работает. Вот вам мой скринкаст проделанных операций.

P.S: это было вступление к использованию Tampermonkey. Далее я вам покажу как можно использовать его, чтобы пользоваться интернет сайтами было приятнее, или же вы могли бы выполнять некоторые свои операции в автоматическом режиме 🙂

Превращение snake_case ключей запроса в camelCase

Мне привычнее всего использовать camelCase на стороне backend для названия ключей в объектах или ассоциативных массивах (PHP).

Поскольку я начал писать проект с нуля, мне сказали что можно будет самому задать формат входных данных, так что я решил что они будут приходить уже в формате camelCase. Но как выяснилось сегодня, к моему API будут приходить запросы от стороннего сервиса и оказывается у них данные будут приходить с snake_case индексами.

И вот тут я задался вопросом, как же мне это преобразовать в желаемый вид. Ввел запрос для поиска модуля под Node.js, но прямого ответа не нашел. Было много ответов на stackoverflow c самописными функциями под преобразование строк.

Решил я побродить по связанным ответам и нашел такой вопрос, где интересовались как Express.js преобразовывает входные данные в camelCase.
Ответ на тот вопрос был прекрасным решением моей проблемы

const humps = require('humps');
const converted = humps.camelizeKeys(objectToConvert);

Постобработка HTML после вставки в js строку в PhpStorm/WebStorm

В PhpStorm сейчас существуют сложности при вставке HTML размети c строку переменной Javascript. Я имею ввиду что-то подобное такой операции.

<div id="complex-module">
     <div class="container">
         <label for="first-name">
             <input id="first-name" type="text">
         </label>
     </div> 
</div> 
<script type="text/javascript">
     function render() {
         const markup = '';
     } 
</script>

Когда я переписываю статический HTML у меня часто возникает необходимость перенести разметку в переменную Javascript.
При попытке выполнить это мы получим вот такой результат, что не есть совсем хорошо.
<div id="complex-module"> 
</div> 
<script type="text/javascript"> 
    function render() { 
        const markup = '<div class="container">\n' + 
            '        <label for="first-name">\n' + 
            '            <input id="first-name" type="text">\n' + 
            '        </label>\n' + 
            '    </div>'; 
    } 
</script>

Желанным для меня является следующий результат
<div id="complex-module"> 
</div> 
<script type="text/javascript"> 
    function render() { 
        const markup = '<div class="container">' + 
                '<label for="first-name">' + 
                    '<input id="first-name" type="text">' + 
                '</label>' + 
            '</div>'; 
    } 
</script>

PhpStorm позволяет делать замены используя регулярные выражения, но мне всегда не хватало хотя бы маленького примера, чтобы научиться их правильно использовать.
После того, как я более близко познакомился с регулярными выражениями, я нашел способ как мне этого достичь.
Для этого я написал следующее выражение:
^([^'"]*)(['"])(\s*)(.*)\\n(['"].*)$
$1$3$2$4$5

А чтобы всё корректно сработало и на последней части строки разметки на просто нужно внутри возле закрывающей дописать \n. А дальше просто применяем выражение 🙂

Скринкаст с примером использования данного выражения

P.S: чтобы всё сработало корректно надо поставить галку активного режима регулярных выражений.

Диалог замены в PhpStorm
Диалог замены в PhpStorm

Публикация багов, найденных в ПО JetBrains

Всегда раньше удивлялся как люди находят баги в тех или иных приложениях, но вот с недавних пор и сам начал их замечать в используемых продуктах. К их числу я могу отнести как самые обычные сайты(самые обычные интернет-магазины, лендинги, сайт по изучению английского языка Puzzle English и даже Bug Tracker JetBrains), так и используемого ПО (IDE от JetBrains, WordPress, Bootstrap и прочие).
Пока навыки английского были слабенькими, я попросту мирился с этими багами. Но благодаря повышение этих самых навыков с помощью ресурса, я стал в состоянии корректно сформулировать суть бага на английском языке и опубликовать его на баг треккере JetBrains.
Первый свой баг я опубликовал ещё в марте 2017. С тех пор на данный момент у меня имеется опубликованных 38 багов: 3 уже пофиксили, 17 находятся в состоянии Open, 17 обозначили как дублирующиеся или по другим причинам не засчитали актуальными и одному поставили статус Won’t fix (по сути баг, но он не слишком значительный, но чтобы его устранить необходимо будет много чего менять, короче говоря придрался я с этим багом).
А вот последний релиз PhpStorm EAP (Early Access Program) вышел мягко говоря с серьезным багом: сломался JavaScript Code Completion в файлах с PHP и JavaScript. Теперь по сути стало невозможным c прежней продуктивностью писать JavaScript код в PHP файлах в PhpStorm EAP. Для этих целей я стал использовать Visual Studio Code.
Надеюсь данный баг скоро пофиксят. На самом баг треккере ему поставили приоритет Major, но вот я посмотрел на количество назначенных задач на ответственного человека и скоростью решения мягко говоря не попахивает.
Кому не сложно поставьте голос на самом баге для ускорения его решения. Для этого нужно залогиниться, что можно легко сделать через аккаунт Google.
Всем спасибо!

Книжный блог

Встретил я примерно 3 года назад у кого-то в соц.сети ссылку на Книжный блог.
Тогда мне приглянулась возможность создание списка книг к прочтению. Так я и начал пользоваться этим сервисом.
Помимо этого есть возможность создать список прочитанных книг, прочитать рецензии о книгах или добавить свою собственную. Аналогичный функционал есть и для цитат. С остальными возможностями при желании вы можете ознакомится самостоятельно.

Также вы можете на своем сайте разместить такие виджеты для прочитанных книг, желаемых к прочтению и топ лучших. Есть возможность выбора одной из двух тем.

BookMix.ru

Изучение английского

Со средины января 2017 года возвратился к активному изучению английского.

В конце 2015 приобрел абонемент на сайте Puzzle English. Тогда он мне обошелся примерно в 500 грн.

Начал я изучать материалы, но потом подвернулся шанс устроится на работу сисадмином и я перешел на изучение нужных знаний и навыков. И как-то всё застопорилось.

С сисадминстом не сложилось. Но оно и хорошо, ведь я устроился программистом, а именно об этом я мечтал, но даже и не думал, что у нас в городе возможны подобные вакансии.

Сейчас же вижу, что английский мне нужен всё чаще и чаще, и вспомнил я об вишеупомянутом ресурсе.

За это время у них обновился дизайн, добавились новые сервисы. Они правда по купленному абонементу не доступны, но предлагают сделать скидку.

Цена за всё лично для меня сейчас небольшая, но размер скидки мог бы быть и побольше.

Но сейчас не об этом. Рассмотрем те сервисы, которые мне доступны и которыми я пользуюсь. Итак, мне приглянулись Тренировка слов, Видеопазлы, Грамматика, Данетка и Багаж слов.

Слышал ещё что по сериалам хорошо учить зарубежный язык. У них есть такой сервис, который входит в мой абонемент. Начал смотреть Готем, но как-то не очень пошло: за месяц лишь 2 серии просмотрел. Не большой я любитель сериалов.

Также ещё несколько сервисов пробовал: Мастер фраз, Дуель умов и Аудиопазлы, но от них я большой пользы не замечаю.

В будущих заметках добавлю краткий обзор упомянутых мною понравившихся сервисов.