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

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

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

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

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

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

гитхаб

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

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

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

Встроенные

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

Переводчик

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

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

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

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

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

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

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

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

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

Кажется, это все наиболее важные функции Я.Браузера, которыми я пользуюсь повседневно, но аналогов которых нет в других браузерах. Помимо них ещё есть различные привязанные к сервисам Яндекса (типа 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   вёрстка   гитхаб   разработка

Как понять, что в мире фронтенда всё плохо

Достаточно посмотреть на список зависимостей среднестатистического сборщика и увидеть там тонны повторяющихся зависимостей, часть из которых будет отличаться друг от друга версиями. Написал для этого небольшой скрипт на пайтоне. Пробуйте. У меня на одном из проектов так:

{
  "count": 6920,
  "packages": {
    "glob": {
      "different": 6,
      "total": 28,
      "versions": {
        "4.5.3": 2,
        "7.0.6": 1,
        "7.0.5": 1,
        "7.1.0": 10,
        "3.1.21": 2,
        "5.0.15": 12
      }
    },
    "readable-stream": {
      "different": 5,
      "total": 182,
      "versions": {
        "2.0.6": 76,
        "1.0.34": 43,
        "1.1.14": 15,
        "2.1.4": 1,
        "2.1.5": 47
      }
    },
    "through2": {
      "different": 5,
      "total": 79,
      "versions": {
        "0.4.2": 1,
        "1.0.0": 1,
        "0.6.5": 39,
        "2.0.1": 36,
        "0.5.1": 2
      }
    },
...

Улучшаем Тудуист

Я уже достаточно долго пользуюсь Тудуистом — пожалуй, самым крутым туду-приложением. Фактически я его использую для планирования всего-всего. Как рабочих проектов, так и своих. И для университета. И для обычных повседневных задач.

Однако, у него есть несколько проблем, которые меня раздражают.

Первая прилетела с недавним обновлением — это автоматическое распознавание дат в задачах. Ребята посчитали, что раз эта фича уже полгода работает на мобильных устройствах, то и в вебе она будет хороша, однако, это далеко не так. Быть может для тех, кто добавляет по одной задаче в день, она действительно удобна. Мне же, с моими десятками задач, это только мешает. На форуме Тудуиста многие жаловались на это, однако, разработчики пока не спешат делать эту фичу опциональной, а просто говорят, мол, вы можете сбросить распознанную дату нажав на Esc. Однако работает это из рук вон плохо, да и это долго. (на самом деле нет, читайте внизу)

Вторая существовала давно, и несмотря на мои просьбы, её до сих пор не устранили. Дело в том, что горячие клавиши на добавление новой задачи (Q и Ctrl+Q) работают только на английской раскладке. И это не может не бесить, потому что нужно переключить раскладку дважды чтобы добавить задачу.

В общем, я накидал два небольших скрипта, которые правят эти проблемы. Первый — Todoist Date Parser Block, второй — Todoist Cyrillic Shortcuts. По названиям понятно, какой из них за что отвечает.

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

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

Обновление от 03.10.2015: Команда Тудуиста запилила наконец-то выключатель автоматического распознавания даты. Фактически, первый скрипт уже более не нужен, если только у вас нет веских причин оставаться на обновлениях 700—702. Подробнее о выключателе читайте в центре поддержки Тудуиста.

2015   гитхаб   инструменты   тудуист