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

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

Поделиться:

О вечном

Есть вещи, которые нам до конца не осознать

  • Величину вселенной
  • Смысл жизни
  • И почему Number('') выдает 0
Поделиться:

Обновил стартовый репозиторий на react, redux и webpack

Давно пора было, но все руки не доходили (отговорка столетия ;))

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

Итак, что сделано:

  • Обновил все npm пакеты
  • Перешел на webpack 2
  • Добавил тесты
  • Добавил npm-check для автоматизации обновлений
  • Добавил хуки для git (впрочем их использовать не обязательно, конечно, как и все остальное)

Так что можно смело использовать для старта проекта на реакте.

Кстати, сам репозиторий находится вот тут: https://github.com/artemdemo/react-webpack-starter

Поделиться:

Скорость выборки css селекторов

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

Разные селекторы по скорости работы. Чем ниже, тем хуже.

  1. ID, например #header
  2. Класс, например .promo
  3. Тип, например div
  4. Выбрать относительно соседей, например h2 + p
  5. Прямое родство, например li > ul
  6. Вложенность, например ul a
  7. Универсальный, например *
  8. Атрибут, например [type="text"]
  9. Псевдо классы, например a:hover

Ссылки по теме:
Writing efficient CSS selectors

Поделиться:

Задаем node environment через webpack

Node environment требуется задавать, для того чтобы react собирался максимально оптимально, без лишних отчетов в консоль и без лишних проверок. Многие npm пакеты используют такой же подход, поэтому имеет смысл знать и помнить об этом подходе.

Есть несколько способов задать среду, в конце концов это всего лишь переменная. Один из вариантов, это задавать ее через webpack – делается очень просто:

Поделиться:

Нельзя проголосовать за свой собственный пост

Вот она реальность того, что у программистов тоже ограниченное количество памяти 😂

vote-for-your-own-post

Транскрипт:
На картинке пример решения некой проблемы от Мартина Середински, датирован январем 2010. Ниже комментарий от того же Мартина от 12 сентября 2011 – “Я только что столкнулся точно с такой же проблемой, загуглил ответи и нашел этот. Он мне идеально подошел и я рашил поблагодарить автора проголосовав за его решение и получил сообщение ‘Вы не можете голосовать за свой собственный комментарий’. Слишком много работы убивает мозговые клетки..”

Поделиться:

Полифил по юзерагенту

Интересное решение – https://polyfill.io/. Ребята предоставляют CDN с полифилами для браузера. Причем он умный – читает юзерагента из заголовков запроса и передает только нужные полифилы, а не все скопом.

polyfill

Поделиться:

Коллеция веб демок – анимация, скрипты

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

demo-house

Ссылки по теме:
https://github.com/airen/DemoHouse
https://airen.github.io/DemoHouse/

Update
По какой-то причине автор удалили этот репозиторий, но github пользователи так просто не сдаются и есть копии:
https://github.com/ichance/DemoHouse-copy

Поделиться: