Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Давай обсудим в скайпе

Мне достаточно часто пишут с предложением пообщаться по скайпу. Причем ни толком темы, ни самих вопросов заранее никто не присылает. Максимум – это достаточно прозрачное направление вроде “Есть вопросы по reactjs” или “Вопросы по angularjs” или “Есть идея, давай в скайпе обсудим”.

skype

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

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

Поделиться:

Мои eslint настройки

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

screen-shot-2017-04-11-at-9-54-28

Мой eslint базируется на airbnb – так уж получилось, что именно airbnb являются самым популярным вариантом по индустрии и я решил не отходить от моды 😉 Однако, меня конечно не во всем устраивает их подход, поэтому я перекрываю некоторые их правила своими, особенно что касается разработки под реакт.

В общем рекомендую такой подход и всячески его поддерживаю. Мои настройки можно посмотреть вот здесь:

https://github.com/artemdemo/eslint-config-artem
https://github.com/artemdemo/eslint-config-artem-react

Ссылки по теме:
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
Выносим настройки eslint в отдельный репозиторий

Поделиться:

Debugging The Web (Chrome Dev Summit 2016)

В продолжение предыдущего поста – еще одно видео о новых фичах DevTools для хрома. К сожалению пока доступно только в канари, но в конце-концов должно оказаться и в хроме.

Поделиться:

Chrome DevTools Masterclass

Пробежимся по основным моментам:

  • Открываем экспериментальные возможности инструментов разработчика в хроме.
  • Используем workspace для работы с исходным кодом прямо в хроме.
  • Используем Command Menu для быстрого доступа к всем командам (Command+Shift+P).
  • Network Panel – активируем Capture screenshots для записи скриншотов (иконка с камерой, на той же строчка, что и кнопка записи сетевой активности)
  • Расширенный фильтр загруженных ресурсов. Например, по размеру “larger-than:10K” (бес пробелов), либо негативный поиск по тому же условию “-larger-than:10K”; по статусу “status-code:500”
  • Добавление колонки в “Network Panel”, если хотим отображать какие-то кастомные headers.
  • Оптимизация анимации – Rendering -> Paint Flashing, для того чтобы определить приходится ли браузеру рендерить заново много элементов.
  • Для движущихся элементов, например, бокового меню стоит использовать css свойства transform: translateX(), translate3d() и т.п. вместе с will-change: transform. Это оптимизирует рендеринг, так как браузер выведет такие элементы в отдельный слой рендера.
  • Посмотреть сколько есть слоев и почему хром из разделил можно во вкладке Layers. Если ее сразу не видно, то нужно ее включить в DevTools Menu (три вертикальные точки) -> More Tools -> Layers
  • Удерживая различные клавиши (Shift, Command, Alt) можно увеличивать или уменьшать css шагами по 10, 100 и 0.1 единиц (Если не удерживать, то шаг будет равен единице).
  • Используем getEventListeners(element) в консоле для того, чтобы получить список обработчиков событий, которые висят на переданном элементе.
  • Глобальный поиск по всем файлам проекта во вкладке Search (вкладка в нижней части DevTools, там где открывается консоль)
  • Conditional breakpoint – кликаем правой клавишей мыши по номеру строки, на которую хотим добавить breakpoint, во всплывающем окне мы можем прописать условие, которое если возвращает true, то breakpoint срабатывает, если нет, то проходит дальше. Можно добавить тут команду console.log(variable) , для того чтобы отслеживать переменную в скопе и код не будет стопориться, так как console.log() всегда вернет undefined.
  • Чекбокс Async позволяет получать более детальный “стактрейс” после того как код остановился по брейкпойнту, особенно когда брейкпойнт находился внутри асинхронной функции
  • Snippets – библиотека блоков кода, которые можно быстро взять и внедрить в любую страницу. DevTools -> Sources -> Snippets.
    Удобство в том, что они хранятся в хроме и доступны по запросу.

Ссылки по теме:
Как открыть скрытые экспериментальные возможности в хроме (инструкция со скриншотами)
Umar Hansa – рассылка и курсы по DevTools
Addy Osmani
Paul Irish

Поделиться:

Peek – запись десктопа в gif на linux

Понадобилось записать небольшой фрагмент десктопа и приложить это в пул-реквесте. С видело не получится, потому что github и bitbucket откажутся загружать его на свои сервера. Значит только gif. Начал искать решение для линукса. В итоге наткнулся на весьма интересный проект – Peek. Официального релиза еще не было, но для моих задач все сработало отлично.

Peek - gif recorder for linux

Под убунту можно поставить через командную строку: https://github.com/phw/peek#ubuntu

Но я в итоге скачал установочный файл от OpenSUSE Tumbleweed. Там выбираем Ubuntu 16.04 -> Show unstable packages (на а что поделать, раз официального релиза еще не было). Скачиваем установочный пакет дебиана и ставим как обычно.

Поделиться:

Office UI – Fabric JS

Реакт компоненты в стиле приложений офиса для создания интерфейсов. Майкрософт не устает радовать своими работами в open source community.

Документацию для каждого из компонентов можно посмотреть вот здесь: http://dev.office.com/fabric#/components. Примеры включают в себя не только сами компоненты, но и рекомендации по использованию и дизайну.

office-ui-fabric-js

Поделиться:

Chrome extension – url-carousel

В порядке эксперимента написал плагин для хрома URL-carousel.

Суть плагина достаточно простая – он в отдельном табе открывает поочередно сайты из списка. Дополнительные табы не открываются.

url-carousel-promo

url-carousel-screenshot

Зачем именно так, когда есть решения, которые просто переключают открытые табы?

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

Разумеется, что каждое “перелистование” – это загрузка сайта заново, но нас это особо не напрягало.

Весь исходный код как обычно можно найти на моем гитхабе: https://github.com/artemdemo/url-carousel.

Что под копотом:

  • React
  • Redux
  • Sagas
  • Bootstrap CSS

Ссылки по теме:
URL-carousel
Исходный код на github’е

Поделиться:

Git alias – короткие команды в git

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

У меня есть две группы алиасов (от “alias” – синонимы). Короткие команды для замены более длинных стандартных версий и новые команды с новым интерфейсом. Начнем с команд-сокращений, которые для меня очень актуальны, потому я не использую GUI для работы с гитом:

Про команды для графиока коммитов я уже писал, поэтому расскажу лучше о другой команде для вывода локальных веток. Она отличается от стандартной git branch тем, что сортирует их по времени использования:

Команды все также нужно добавить в файл ~/.gitconfig в раздел [alias]

На последок, у меня есть несколько специфичная команда, которой, тем не менее я часто пользуюсь – вернуться на мастера с текущей ветки, обновить мастер и удалить предыдущую ветку. Полезно, когда вы в команде ведете разработку в параллельных ветках и потом “мержите” все в мастер. Добавляем ее в тот же раздел “[alias]”:

Поделиться:

У меня не получится написать пузырьковую сортировку мелом на доске

Из прекрасного за последнее время:

“Привет, меня зовут Давид. У меня не получится написать пузырьковую сортировку мелом на доске. Я все время ищу код в интернете. Я не решаю загадки”

(с) Давид Хансон – создатель Ruby-On-Rails, основатель и CTO Basecamp

Поделиться:

Как тестировать в explorer’е когда на компьютере стоит линукс

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

Итак, что нам потребуется:
2 пучка лука
чайная ложка соли
яйца

* VirtualBox
* Скомпанованный файл с системой (Windows конечно) и браузером

VirtualBox берем на сайте производителя: https://www.virtualbox.org/wiki/Downloads
Скачиваем под нашу комплектацию и идем брать виндоус. Который скачивается с официального сайта майкрософта https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

Вариантов тут достаточно много от IE8 до Edge. Выбираем то что хотим тестировать (разумеется можно скачать несколько) и виртуальную машину в которой будем запускать – в моем случае VirtualBox. Скачиваем. На секундочку там файлик будет в несколько гигобайт, так что держитесь.

Далее разархивируем, это тоже замет время – гигабайтами ворочать это не быстрое мероприятие. Хотя если у вас SSD, то может все пройдет и быстро.

На выходе получим еще один файл, который уже открываем в VirtualBox – тоже займет некоторое время. Причины все те же, так что не буду нудить 😉

virtualbox-windows

Кстати, для того чтобы изменить разрешение, нужно кликнуть правой кнопкой мыши вот на эту кнопку:

virtualbox-windows-select-resolution

Поделиться: