Подписка на блог

Ещё есть Тумблер и ЖЖ.

В  Телеграме пишу обо всяком и собираю по крупицам годноту, которая потом появляется в блоге.

А в  Твиттере иногда репощу всякие смехуечки и пишу о том, как всё плохо.

Все остальные соцсеточки только для того, чтобы пошарить ссылку на новый пост.

7 заметок с тегом

гитхаб

npm.plugin.zsh v1.1

Обновил свой плагин для zsh, который добавляет кучу разных сокращений для npm, о котором я когда-то рассказывал.

Теперь он при запуске nrsh! удаляет не только npm-shrinkwrap.json, но и package-lock.json. Давно пора было это допилить, но я чего-то медлил.

Помимо этого добавились ещё два сочетания:

  • nrpl! делает то же самое, что и nrsh!, а нужен потому, что возможно уже сейчас есть те, кто не знают, что npm-shrinkwrap.json существовал;
  • ns для npm search.

О том, как обновить (или установить, если вы вдруг почему-то ещё не) написано в репозитории.

13 февраля   npm   zsh   гитхаб

Про Гитхаб

Я тут вдруг понял, что не рассказывал никогда в блоге про то, что есть у меня на Гитхабе. Исправляюсь.

Вообще, я сегодня на коленке набросал один npm-пакет, и хотел написать коротко про него, но потом понял, что может быть имеет смысл рассказать обо всём интересном, что есть. Почему бы и нет.

Вот список того, что может вам как-то пригодиться:

  • university
    Все файлы (кроме учебников), которые у меня сохранились после обучения в университете. Возможно, если вы учитесь на схожей специальности, вы что-то там найдёте для себя.
  • npm-ls-analysis
    Небольшой скрипт, который берёт выдачу npm ls и собирает из неё массив с информацией по каждому пакету: сколько раз он встречается и каких версий. Можно посмотреть, сколько разных версий какого-нибудь postcss установлено. ¯\_(ツ)_/¯
  • inherited-css-properties
    Просто список стилевых свойств, которые наследуются. Когда-то я так и не смог его нигде найти, и решил самостоятельно собрать в одном месте.
  • whatcolourisit
    Это как минимум красиво — igoradamenko.com/whatcolourisit.
  • advblock
    Я терпеть не могу разного рода «консультанты» на сайтах. Особенно, когда они выскакивают и назойливо перехватывают моё внимание. Потому я собираю их в отдельном фильтре для Адблока (или любого другого совместимого блокировщика). Если вас они тоже бесят, добавляйте фильтр в настройки своего расширения, как написано в репе.
  • npm.plugin.zsh
    Набор сокращений для запуска npm-скриптов. ni, nid, nis, nrm и всё вот это вот (тут ещё я могу напомнить о том, как у меня вообще терминал работает).
  • jira.plugin.zsh
    Ещё один плагин, но на этот раз не для npm, а для того, чтобы переходить из терминала в таски в Джире. Основная его фича — распознавать код задачи в имени гит-ветки, и открывать её в браузере. Удобно.
  • awsm.css
    Про эту стилевую библиотеку я уже писал. Делает красивой вашу некрасивую, но семантичную вёрстку.
  • bem-react-helper
    Скрипт, который каждый день помогает мне готовить вёрстку по БЭМ в Реакте. Круче чем всё, чем вы пользовались до этого, конечно же.
  • zoom-gesture
    То, о чём я изначально собирался написать. Мне тут сразу в двух проектах понадобилось сделать обработку зума, как с помощью скролла мышки, так и с помощью пинч-жеста. Сделяль ¯\_(ツ)_/¯. Если вам вдруг внезапно тоже нужно, приходите, берите, пишите о багах, если будут.
28 декабря   awsm.css   css   npm   zsh   бэм   гитхаб   джира   я

Ежедневные инструменты. Браузер

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

Читатель, наверное, знает, что я пользуюсь браузером от Яндекса. Я давно уже писал о причинах, потому отдельно на этом останавливаться не будем, а перейдём сразу к расширениям.

Встроенные

В Я.Браузере есть некоторое количество встроенных фич, которые скорее всего можно подключить в другие браузеры с помощью расширений.

Переводчик

Встроенный переводчик очень удобный. Выглядит это так. Вы просто выделяете какой-то кусок текста и жмёте на появившийся рядом треугольник (или просто вызываете контекстное меню):

Не скажу, что он переводит идеально, но когда при чтении статьи тебе не понятна какая-то фраза или пара слов — очень удобно перевести их прямо на месте.

Поиск в контекстном меню

Помимо переводчика в контекстом меню есть ещё одна клёвая штука — это встроенные результаты поиска. Если в тексте вам вдруг непонятен какой-то термин, или автор пишет о неизвестном вам, например, городе, то можно быстро глянуть, что это такое (плюс посмотреть на изображения):

Поиск по странице

Если предыдущие фичи я ещё представляю как отдельные расширения, то есть ли эта в качестве какого-то плагина, например, к Хрому, не знаю. Насколько я понял, Яндекс Браузер пока единственный, кто так умеет (причём, довольно давно).

Собственно, о чём я? О нечётком поиске по странице. Причём, как на английском:

Так и на русском (обратите внимание на окончания):

Это безумно удобно и не понятно, почему вообще может быть как-то иначе.

Кажется, это все наиболее важные функции Я.Браузера, которыми я пользуюсь повседневно, но аналогов которых нет в других браузерах. Помимо них ещё есть различные привязанные к сервисам Яндекса (типа Adviser, который показывает меньшие цены на аналогичные товары в других магазинах), но я ими почти не пользуюсь, так что пропустим.

Постоянные

Этих больше, чем встроенных, и на них я уже смогу давать ссылки, потому что когда-то их сам скачивал. «Постоянные» потому, что они включены всегда и ими я пользуюсь наиболее часто. Какие-то для работы, какие-то для развлечений, какие-то для экономии времени. Ниже будет ещё список «непостоянных», которые есть, но выключены и включаются иногда, когда нужны.

Pocket

Всё, что я читаю или смотрю в интернете, я стараюсь пропускать через Покет, потому что иначе это съедает много времени (работаешь-работаешь, а потом увидел интересную статью и залип). Расширение в этом помогает: кликнул, страница улетела в список «на потом» и ты спокойно работаешь дальше, зная, что точно о ней не забудешь.

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

Яндекс.Музыка и Радио

Это крутое расширение, с помощью которого можно управлять Я.Музыкой, Я.Радио, Ютубом, музыкой из ВК и многими другими источниками. Удобно то, что сочетания клавиш устанавливаются глобальные, потому можно включить какой-то плейлист в ВК, перейти в любимую IDE, работать и в процессе переключать треки, не отвлекаясь от кода. Плюс оно умеет ставить на паузу текущий источник, если вы запустили новый (например, играла Я.Музыка, а вы вдруг открыли видео на Ютубе).

1Password

Очень удобное приложение и расширение к нему, которое хранит ваши персональные данные и умеет заполнять по требованию формы с логинами и паролями, личными данными, реквизитами карт, паспортными данными и пр. Помимо этого приучает к тому, чтобы пользоваться разными и сложными паролями на сайтах, потому что вам не нужно их самостоятельно запоминать. Пусть страдает машина. Для мобильных девайсов есть свои приложения, а на тот случай, когда вам нужно авторизоваться где-то на чужом компьютере, есть HTML-страничка, которую можно легко скинуть на флешку и пользоваться. Когда-нибудь я ещё расскажу о 1Password отдельно, а пока просто попробуйте, если ещё не.

Follow RSS

С помощью этого расширения (по ссылке их там два, не перепутайте) я добавляю РСС-ленты различных блогов, паблики ВКонтакте, аккаунты в Твиттере, каналы на Ютубе и пр. в свой аккаунт в Feedly, чтобы потом читать их в общей ленте в приложении Reeder. Если вы не пользуетесь ничем таким, то скорее всего вам и не интересно это расширение. Хотя я бы посоветовал подобную связку, потому что не нужно бегать в различные социальные сеточки, блоги и т. д., а можно получать контент по мере его выхода и читать в удобном интерфейсе (и в офлайне, конечно же, тоже). О таком же наборе инструментов когда-то писал Илья Бирман.

Octotree

Дополнение для Гитхаба. Позволяет всегда видеть дерево директорий репозитория и перемещаться по файлам намного быстрее, чем без него. Хотя это, конечно, не отменяет того факта, что у Гитхаба клёвый набор горячих клавиш, из-за которых им можно пользоваться почти без мышки.

uBlock Origin

Насколько мне известно, самый быстрый и клёвый блокировщик рекламы на данный момент. В отличие от всяких AdBlock и прочих ребят, он не продавался Гуглу, не делал белые списки для рекламы и всё прочее (но врать не буду, могу чего-то не знать). Уточню лишь, что есть две версии: uBlock и uBlock Origin. Когда-то они разделились, но в итоге uBlock Origin сейчас развивается, а uBlock загнулся.

Пользуюсь им уже довольно давно и ставлю всем знакомым. Если вы вдруг почему-то до сих пор пользуетесь другим блокировщиком рекламы, подумайте о переходе. Формат фильтров у большинства расширений одинаковый, потому вы сможете перенести свои списки без особых проблем. К слову, я ненавижу назойливые скрипты-консультанты на сайтах, потому у меня для них есть свой чёрный список.

Ghostery

Крутейший блокировщик всего подряд: от кнопок «Поделиться» до следящих за вами рекламных скриптов. К примеру, прямо сейчас, когда я пишу эту заметку, он блокирует Яндекс.Метрику, с помощью которой я за вами слежу. Ибо нефиг :-)

А поставил я его ещё давно из-за того, что всякие недобрые ребята промышляют кликджекингом, о чём я когда-то писал.

The Great Suspender

У меня есть не очень хорошая привычка. Я открываю вкладки «чтобы было», и потом не закрываю их, потому что они могут висеть как напоминание о чём-либо. День-два-неделю-месяц — вообще легко. Ноут перезагружается раз в месяц, браузер восстанавливает вкладки, так что, они могут висеть постоянно. Однако, это нагружает систему и отжирает память у всего остального. Потому для таких ребят как я придумали расширение, которое оставляет вкладку открытой, но выгружает из памяти всё её содержимое. То есть, вкладка вместо открытого сайта превращается просто в ссылку на этот сайт.

Video Speed Controller

Как и многие в этом диком XXI веке, я редко смотрю видео в интернете на оригинальной скорости. Чаще всего ускоренное в полтора-два раза, а иногда и ещё быстрее. Это экономит время и нисколько не убавляет смысла увиденного.

HTTPS Everywhere

Как понятно из названия, это расширение по умолчанию перенаправляет на HTTPS-версии сайтов (в том числе при загрузке ассетов и пр.), если вдруг почему-то этого не сделали авторы этих сайтов. Немного успокаивает параноика во мне.

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

Непостоянные

friGate

Это очень простое расширение для проксирования запросов к сайтам. Я пользуюсь встроенной в браузер версией, потому не скажу, какая это именно из тех, что представлены на сайте, но думаю, что они все работают примерно одним и тем же образом. В настройках создаётся список сайтов (там есть предустановленный на 200+ доменов), запросы к которым нужно проксировать. У меня мои списки разбиты по странам, чтобы было удобно переключать при пересечении границы. Работает быстро, потому в Испании, например, я без проблем пользовался Яндекс.Музыкой. Однако, есть ненулевая вероятность, что он сливает обо мне все данные куда-либо, потому я его включаю только при необходимости, и из другого браузера.

SaveFrom.net

Просто расширение, которое позволяет сохранять музыку и видео из различных медиа-хостингов и социальных сетей. Иногда это нужно, например, чтобы скачать записи каких-то конференций в дорогу или вроде того. Работает исправно, но выглядит как-то подозрительно, потому постоянно включённым не держу.

Tampermonkey

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

RESTMan

Простенькое расширение для создания тестовых запросов. Пользуюсь им редко, потому может быть есть что-то и покруче, но меня устраивает то, что тут есть :-)

ModHeader

Полезное и простое расширение, когда нужно добавить или подменить какие-то заголовки к запросу.

React Developer Tools

Помогает дебажить приложения на Реакте, отслеживая состояния и пропсы компонентов. Требуется не часто, но полезное.

AngularJS Batarang

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

Angular Watchers

Проще и быть не может — просто счётчик активных вотчеров для текущего состояния приложения на Ангуляре. Особенно удобен в виде графика. Ангуляром в наше время, кажется, хипстеры уже не пользуются, но когда нужно ускорить какой-то «древний» проект, прям очень помогает. Когда-нибудь я напишу «для истории» о том, куда нужно смотреть и что нужно править, чтобы заставить Ангуляр работать побыстрее. А то ведь ещё никто не написал!

Page Ruler

Удобная линейка для измерения каких-то объектов на сайте. Выключена, потому что на Маке я как батя всё измеряю на глаз и с помощью встроенной тулзы, которая снимает скриншоты и показывает размер выделенной области, или же с помощью панели разработчика. Но иногда всё равно пригождается.

Looper for YouTube

На тот случай, когда включаю какой-нибудь музыкальный сет на Ютубе (например, этот). Удобно поставить его на повтор и не париться.

Go Fucking Work

Когда-то блокировал им различные социальные сети и прочее, что отвлекает от работы. Обычно обещает засунуть мне что-нибудь в задницу, если я не вернусь к работе. Вдруг вам такое нравится ¯\_(ツ)_/¯.

LetyShops

Это, думаю, совсем не нуждается в представлении. Кэшбэк-сервис для покупок во всяких там Алиэкспрессах. Удивительно, сколько денег может набежать от заказов всяких мелочей из Китая.

∗∗∗

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

А в прошлый раз я рассказывал о том, как устроен мой терминал.

Зарелизил вторую версию awsm.css

С кодовым именем “Charmander”. Почему бы не называть их именами покемонов.

Я, вроде бы, не писал здесь про awsm.css, потому начну с небольшой предыстории.

Что это вообще такое

Год назад, в качестве лабораторной работы по веб-программированию в университете я сделал небольшую CSS-библиотечку, которая превращала обычный, чисто написанный HTML в красивый. Шрифты там, отступы и всё вот это вот. После этого я её использовал для всех подобных лабораторных, для курсовой, для веб-морд к лабораторным по другим предметам и пр.

Ключевой особенностью было то, что не нужны никакие классы, айдишники, атрибуты и пр. Я на работе и так постоянно сталкивался с этим, потому здесь получилась своеобразная отдушина. Плюс это в очередной раз вынуждало задуматься о семантике в вёрстке, потому что поведение библиотеки должно быть очевидным. Например: если картинка вставлена в абзац, то она прибивается к краю, а если вне него — то выравнивается по центру.

Как всё развивалось

Сперва я просто пытался всунуть туда как можно больше элементов. Таблицы? Конечно! Формы? Безусловно! Кнопки? Ну куда же без них!

Я завёл кучу ишьюс на Гитхабе, в надежде, что если я сам всё это не осилю, то придёт кто-то, кому это понравится, и доведёт до ума. Так примерно и случилось, но не совсем.

Сделав пару демок, я зарелизил несколько версий, написал об этом повсюду и сел ждать. Чего-то непонятного. Какого-нибудь фидбека, чтобы понять, куда нужно развиваться. И вот однажды пришёл человек, который создал первый пулреквест. И за ним ещё один, и ещё один. Я всё радостно принимал, ведь это так круто, когда тебе помогают (на самом деле нет).

Подобные проекты — это не какой-то инструмент у которого есть чёткое API и параметры, по которым можно оценить, всё ли хорошо с ним. Оценивать всё приходилось по внешнему виду, по каким-то своим ощущениям. И потому с теми, кто приходил помочь, не всегда находился общий язык. Кто-то писал на почту, кто-то в ишьюс. В итоге я пришёл к тому, что если не взять всё в ежовые рукавицы, то первоначальная идея потонет в куче чужих мнений и ощущений.

Решил, что на новогодних выходных перепилю всё так, как мне нравится. Прям с нуля.

Взял и переписал

Думал, что сделаю это быстро, а в итоге потратил почти неделю. Однако, теперь всё выглядит так, как мне нравится (ну почти). Пробегусь по некоторым особо клёвым моментам.

Адаптивная типографика

Чтобы всё плавненько адаптировалось, размер шрифта меняется от 16px на мобильных до 20px на десктопах. Выглядит это красиво, потому что нет никаких скачков.

Индикаторы скролла

В макОС есть проблема, которой нет в других ОС. В ней скрываются скроллбары. На самом деле это ни разу не проблема, а очень крутая фича. Однако, иногда не совсем понятно, когда нужно поскролить, а когда нет. Например, в блоках с кодом или в таблицах. Осм (awsm по-русски, ага) рисует в таких случаях тёмную рамку в той стороне, где предполагается скролл. Выглядит клёвенько:

Это же поведение помогает реализовать другую клёвую фичу..

Адаптивные таблицы

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

Подчёркивание в 1px

Если у вас ретина, то обязательно посмотрите на подчёркивание у ссылок в библиотеке, оно в один ретиновый пиксель. Это клёво выглядит, потому что оно тоньше, чем обычный border: 1px solid;. Я давно искал, где бы это применить. Недавно сделал это у Ильи Бирмана в меню, оказалось так круто, что не смог устоять. Добавил и сюда.

Модные инструменты

Не обошлось без интеграции с PostCSS. Если кто-то использует его в своей работе, то библиотека подключается как плагин и просто инжектит себя в начало всего CSS-кода.

Ещё небольшой набор всякого:

  • Stylelint;
  • Editorconfig;
  • Travis CI;
  • CSSO.

Убрал всё лишнее

Выкинул поддержку форм, удалил кучу неиспользуемых в реальной жизни стилей. В предыдущих версиях ещё была огромная «красивая» шапка. Убрал её тоже, потому что красота-красотой, но пользы от неё не было вовсе.

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

О дальнейшем развитии

Сейчас весь кайф в том, что если открыть любую страничку, которая свёрстана с помощью Осм, то контента там больше, чем служебной информации — тегов, атрибутов и пр. Хочется как-то донести это до людей, чтобы можно было просто взять и начать использовать, не вникая в код. Например, сделать какие-то темы для блоговых движков, для генераторов статических сайтов и пр. Если вам вдруг захочется заняться — пишите. Когда-нибудь я сделаю это всё и сам, но вдруг в вас больше энтузиазма и хочется просто себя попробовать в чём-то. Плюс, это хороший старт для участия в опенсорсе.

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

Нид хэлп

Сегодня, после релиза второй версии, библиотека набрала ещё некоторое количество звёзд, и вот теперь их число наконец-то трёхзначное.

И заодно попала в дневные тренды Гитхаба по HTML:

Но это не предел, и вы всегда можете:

2017   awsm.css   css   html   вёрстка   гитхаб   разработка
Ctrl + ↓ Ранее