Pull to refresh
0
talgautb @talgautb read⁠-⁠only

Разработчик фронтенда

Send message

Как генерировать осмысленные коммиты. Применяем стандарт Conventional Commits

Reading time 8 min
Views 115K


Привычный хаос в названиях коммитов. Знакомая картина?

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

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

Читать дальше →
Total votes 72: ↑71 and ↓1 +70
Comments 84

Как я создавал карты континентов для своей игры

Reading time 23 min
Views 46K
image

Часть 1. SVG и системы координат


До недавнего времени размеры карт в моей игре Dragons Abound были фиксированными и несколько недетерминированными. Я считал их «региональными» — не картами всего мира, но его значительными частями, такими например, как западное побережье США или часть Европы. Меня вполне устраивал этот масштаб, но я хотел немного поэкспериментировать с игрой, чтобы посмотреть, смогу ли я генерировать карты целого мира (или хотя бы большего размера). Но прежде чем я приступлю к этому, давайте немного поговорим о картах фэнтези-миров.

Мир — это большое пространство. Большинство карт фэнтезийных «миров» даже близко не походят на истинный размер. Возьмём, например, Средиземье, в котором происходит действие «Властелина колец»:


Хоть и кажется, что на ней запечатлён огромный мир, на самом деле Средиземье создано на основе Европы.
Читать дальше →
Total votes 55: ↑54 and ↓1 +53
Comments 5

Зацените: сделал стол

Reading time 6 min
Views 144K


TL;DR В статье описывается мой опыт постройки стола c нуля из фанеры. От проектирования до сборки.

Я очень долго страдал от плохих столов. Все они неудобные, плохого качества, маленькие и, самое главное, ШАТКИЕ. Более-менее приличные столы стоили тысячи долларов. В итоге я решил изготовить стол самостоятельно.

Основные требования к столу:

  • Устойчивость! Предметы на столе не должны трястись, если резко положить руки на стол или оттолкнуться от него. Мой стол весит ~120кг. С его края можно делать сальтухи, при этом на другом конце паять SMD компоненты.
  • Ширина и глубина столешницы. Столы шириной 60 см — это унижение. Мне нужно иметь запас по глубине, чтобы можно было отодвинуть ноутбук вперед, и при этом получить достаточное рабочее пространство.
  • Вместительность. Мне нужны полки, чтобы разместить там оборудование: паяльники, лабораторный блок питания, осциллограф, аудио усилитель и т.д. При этом полки должны быть так же устойчивы, как и стол.
  • Цена. Я не готов выложить за стол несколько тысяч долларов. Мой стол обошелся в ~$300 с учётом покупки всего инструмента для сборки и покраски.
Total votes 261: ↑250 and ↓11 +239
Comments 559

Эффективное использование Github

Reading time 13 min
Views 122K

Github — важная часть жизни современного разработчика: он стал стандартом для размещения opensource-проектов. В «2ГИС» мы используем гитхаб для разработки проектов web-отдела и хостинга проектов с открытым кодом.

Хотя большинство из нас пользуются сервисом практически каждый день, не все знают, что у него есть много фишек, помогающих облегчить работу или рутинные операции. Например, получение публичного ключа из URL; отслеживание того, с каких сайтов пользователи приходят в репозиторий; правильный шаринг ссылок на файлы, которые живут в репозиториях гитхаба; горячие клавиши и тому подобное. Цель этой статьи — рассказать о неочевидных вещах и вообще о том, что сделает вашу работу с гитхабом продуктивнее и веселее (я не буду рассматривать здесь работу с API гитхаба, так как эта тема заслуживает отдельной статьи).


Содержание



Читать дальше →
Total votes 149: ↑148 and ↓1 +147
Comments 38

Жизнь разработчика (в картинках)

Reading time 1 min
Views 65K
Взято отсюда специально для хабра. Возможно, в некоторых из ситуаций вы узнаете себя.

Когда я показываю босу, что окончательно пофиксил баг



Когда проджект-менеджер входит в офис



Читать дальше →
Total votes 884: ↑700 and ↓184 +516
Comments 132

ReactJS 15.0.2 Tutorial

Reading time 16 min
Views 50K

Мы создадим простой, но реалистичный модуль комментариев для блога, упрощенный аналог модуля комментариев реального времени, предлагаемый такими ресурсами как Disqus, LiveFyre и Facebook.


Мы обеспечим:


  • Представление для отображения всех комментариев
  • Форму для ввода и отправки комментариев
  • Задел на будущее, для подключения настоящего бэк-енда

Также будут реализованы:


  • Optimistic commenting: комментарии появляются на странице раньше чем они сохраняются на сервере, что визуально ускорит наш модуль
  • Live updates: комментарии других пользователей появляются на странице в реальном времени
  • Markdown formatting: пользователи могут использовать Markdown-разметку для форматирования текста

Финальная версия


Ссылка на GitHub

Читать дальше →
Total votes 17: ↑13 and ↓4 +9
Comments 26

Тпиогрфаика для дислексиков

Reading time 3 min
Views 32K
Часть читателей заметила в заголовке опечатку. Часть заметила обе. Часть не заметила вообще. Если вы из третьей группы, то с большой вероятностью вы — дислексик.
Дислексия — это вид специфического нарушения обучения, имеющий неврологическую природу. Она характеризуется неспособностью быстро и правильно распознавать слова, осуществлять декодирование, осваивать навыки правописания. Эти затруднения связаны с неполноценностью фонологических компонентов языка. Они существуют, несмотря на сохранность других когнитивных способностей и полноценные условия обучения.
Конечно, Интернет стремительными шагами движется ко всё большему проценту медиа в воспринимаемом потоке информации. Тем не менее, текст был, есть и остаётся средством передачи огромной части знаний, получаемых из Сети.

Другой важный тренд — всё чаще уделяют внимание проблемам юзабилити для людей с ограниченными способностями. В то же время, о проблемах дислексиков почти не говорят, и это недоразумение стоит исправить. Недаром, по разнообразным статистикам, в развитых странах можно говорить о 5—15 % дислексиков в популяции (хотя в России подобной статистики не существует).
Читать дальше →
Total votes 68: ↑56 and ↓12 +44
Comments 127

Как проектировать для людей с цветовой слепотой

Reading time 4 min
Views 22K


Примерно 8-10% мужчин и 0.5% женщин имеют ту или иную форму дальтонизма. То есть, на каждые 100 посетителей вашего сайта будет 10 таких, которые видят цвета иначе. И как убедиться, что ваш интерфейс одинаково доступен для любых пользователей? Есть много противоречивой информации на тему того, каким должен быть дизайн для дальтоников. Мы сделали выжимку с основными принципами, которые стоит учитывать в дизайне, чтобы добиться цветовой различимости интерфейса.
Читать дальше →
Total votes 19: ↑19 and ↓0 +19
Comments 37

Тестирование вёрстки на визуальные регрессии с помощью PhantomCSS

Reading time 9 min
Views 24K
Работа с чужим кодом — одна из распространенных и сложных проблем, с которыми мне приходилось сталкиваться в своей работе. Почти в каждом случае предыдущий разработчик писал код не так, как бы мне этого хотелось.

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

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

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

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

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

На этот раз было решено построить визуально регрессионный набор тестов.
Читать дальше →
Total votes 24: ↑22 and ↓2 +20
Comments 1

История одного байта

Reading time 15 min
Views 54K
Предисловие.
Этот рассказ имеет свою длинную историю. Для многих это, возможно, будет махровый баян, но мне кажется он стоит того, что бы его прочитали новые люди.
Во всех источниках, где я встречал его сведения об авторе были просты и незатейливы: Dmitry Galuscenko. Если кто-то может указать сайт или e-mail — напишите в комментариях, я с удовольствием добавлю.
Итак, начнем.


Мне не хватало байта. Всего одного. Да, да. Того самого, что из восьми бит состоит. Что? Hет, я не псих, хотя одному богу известно, сколь тонкой была граница отделявшая меня от этого состояния.
Hо все по порядку
Total votes 140: ↑121 and ↓19 +102
Comments 120

400 потрясающих бесплатных сервисов

Reading time 16 min
Views 717K

Рад представить дополнение оригинального списка из 300 потрясающих бесплатных сервисов. Автор оригинальной статьи Ali Mese добавил ещё +100 новых сервисов, которые помогут найти все — от источников вдохновения и редакторов фотографий до создания опросов и бесплатных иконок.

И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



A. Бесплатные веб-сайты

  • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
  • Bootswatch: Бесплатные темы для Bootstrap.
  • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
  • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
  • Strikingly: Конструктор веб-сайтов.
  • Layers: Создание сайтов на WordPress (new).
  • Bootstrap Zero: Самая большая коллекция бесплатных шаблонов Bootstrap (new).
  • Landing Harbor:  Продвижение мобильного приложения c помощью бесплатного лендинга (new).
Читать дальше →
Total votes 108: ↑89 and ↓19 +70
Comments 38

Подборка бесплатных инструментов для разработчиков

Reading time 28 min
Views 186K
Сегодня мы представляем вашему вниманию адаптированную подборку инструментов (в том числе облачных) для разработчиков, которые позволяют создавать по-настоящему качественные проекты. Здесь представлены исключительно SaaS, PaaS и IaaS сервисы, предоставляющие бесплатные пакеты для разработчиков инфраструктурного ПО.

Читать дальше →
Total votes 96: ↑89 and ↓7 +82
Comments 38

Дайджест продуктового дизайна, октябрь 2015

Reading time 15 min
Views 9.3K
Уже пять лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-сентябрь 2015.

Дайджест продуктового дизайна, октябрь 2015
Читать дальше →
Total votes 15: ↑13 and ↓2 +11
Comments 0

iOS Инструменты разработчика

Reading time 26 min
Views 35K

Вступление


Всем привет, меня зовут Григорий, последние 5 лет занимался программированием под iOS. Сейчас решил сменить сферу деятельности и ударился в веб, но чтобы добро не пропадало, хочу поделиться с сообществом своими наработками, накопившимися за это время. Библиотеки выложены на GitHub и добавлены в CocoaPods. Инструкции по установке и использованию вы сможете найти по ссылкам на GitHub, здесь же будет краткое описание.

Минимальная поддерживаемая версия — iOS 6.0.
Читать дальше →
Total votes 38: ↑35 and ↓3 +32
Comments 27

7 правил создания красивых интерфейсов

Reading time 8 min
Views 180K


Недавно мы в «Я люблю ИП» закончили курсы по дизайну от trydesignlab.com. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Именно поэтому мы решили её перевести. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу #design101@iloveip.

Вступление


Сначала о главном. Это руководство не для всех. Это руководство прежде всего для:
  • разработчиков, которые хотят уметь делать хорошие интерфейсы для себя, если вдруг прижмёт;
  • UX-дизайнеров, которые знают, что хороший UX-дизайн продаётся лучше в красивой UI-упаковке.

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

А пока давайте я расскажу, что вы найдёте в этой статье.

Читать дальше →
Total votes 86: ↑81 and ↓5 +76
Comments 34

5 экспериментов по визуализации данных

Reading time 7 min
Views 30K
Этой весной мы в лаборатории экспериментировали с самыми разными данными: характеристиками танков в игре World of Tanks, статистикой правильных и неправильных ответов на тренажёре ПДД, температурными рекордами в городах России, нарушениями в работе маршрутных такси Нижнего Новгорода, историей изменения цен на авиабилеты. Результатом экспериментов стали 5 наглядных интерактивных визуализаций:



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

Читать дальше →
Total votes 46: ↑45 and ↓1 +44
Comments 5

Создание gulp-плагина на примере построения графа зависимостей для модулей Angular JS

Reading time 4 min
Views 10K

Предисловие


В данной статье я поделюсь с вами опытом, как быстро и безболезненно создавать простые плагины для gulp. Статья ориентирована на таких же чайников, как и я. На тех, кто до сих пор лишь использовал готовые плоды gulp, срывая их с великого Древа Познания NPM, и не имел серьезного опыта работы с Node JS и его стримами.

Я не буду отвечать на вопросы вида «А зачем создавать свои плагины, если уже написано все, что только возможно?». Придет время, и вам за полчаса нужно будет написать что-то очень специфичное для вашего проекта. Перерыв весь npm, вы найдете один заброшенный плагин с убогим функционалом, автор которого недоступен, код ужасен и так далее. А может быть, это будет настолько специфичная задача, что вы не найдете абсолютно ничего.

Такой задачей для меня стала визуализация большого проекта, использующего Angular JS. Было огромное количество angular-модулей, связи между которыми были для меня уже не столь очевидными. Плюс мне хотелось видеть «диверсантов» — модули, которые каким-либо образом нарушали общую концепцию проекта (например, лезли в другой модуль не через провайдера, а напрямую).

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

Если читателя интересует лишь этот плагин, а не сама статья, то вот ссылка на проект на github и на npm. Всем остальным — добро пожаловать под кат.
Читать дальше →
Total votes 10: ↑10 and ↓0 +10
Comments 2

Прогрессивный JPEG: новый best practice

Reading time 6 min
Views 90K
Сравнение скорости загрузки прогрессивного и последовательного jpeg
С точки зрения пропускной способности канала, изображения — обжоры. В среднем, они занимают наибольший (62%) средний трафик сайтов и чаще всего их передача является узким местом. Загружаясь, изображения рвут страницу, расталкивая другие элементы вокруг и вызывая неуклюжую перерисовку (прим. перев.: от этого, конечно, можно избавиться определенной версткой, но тогда нужно хардкодить или ограничивать размеры картинок). Загрузка изображения на странице воспринимается или как «тик, тик, тик, тик, тик, готово», или же сначала вообще ничего нет, а потом внезапно «бум!» и оно появляется ниоткуда. Все понимают, что подразумевается под «тик, тик, готово» и «бум» и всех нас это немного раздражает, потому что мы чувствуем, сколько времени наших прелестных и коротких жизней потеряно в ожидании загрузки картинок.
Читать дальше →
Total votes 79: ↑64 and ↓15 +49
Comments 88

Как сделать доклад на конференции, если вы этого никогда не делали

Reading time 4 min
Views 32K
image

Для консультантов выступление на профильных конференциях — это часть работы, но вот я перестал быть консультантом, и оказалось, что для моих новых коллег выступление — это вызов. Это статья не про то, как «отгандапасить» аудиторию по всем правилам, цель — описать простой алгоритм подготовки выступления на конференции. Подготовить отличный доклад очень нетривиально, но сделать хороший доклад совсем не сложно.

Типичная схема организации выступления


Типичная схема выступления на конференции подразумевает следующие шаги:
  • Принятие решения о выступлении на конференции — примерно за 3 месяца до конференции.
  • Подача темы выступления и краткой аннотации (включая формат и длительность), а также резюме — примерно за 2 месяца до мероприятия.
  • Предоставление готовой презентации, расширенной аннотации, резюме и фотографии — за месяц и ближе к мероприятию.
  • Публикация точной программы — хорошо, если за неделю до мероприятия.
  • Собственно выступление.
  • Кулуарное общение и организация контактов на мероприятии.
  • Фиксация результатов выступления — в течение 3-х дней после мероприятия.

По желанию выступающего или по специфике мероприятия сроки могут пропорционально сокращаться.
Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Comments 10

N+4 полезных книг

Reading time 5 min
Views 81K


Привет! В посте блиц-обзор книг, которые будут полезны IT-специалистам, бизнесменам и тем, кто просто любит читать интересные технические вещи. Рядом с каждой – пояснения, чем оно может быть нужно. Этот обзор, в отличие от других ежегодных, более технически-прикладной.

Начнём со «Справочника по инженерной психологии» Вудсона и Коновера.

«Справочник по инженерной психологии» — Вудсон, Коновер


Книга о том, какие бывают кнопки и рычаги, как на них нажимают люди. И как проектировать так, чтобы люди работали с системой эффективно. Радует тем, что рассматривает пользователя как базовую систему ввода-вывода, замеряя его среднюю скорость передачи информации (около 20 бит в секунду на кнопочные интерфейсы), скорости ввода и вывода.
Читать дальше →
Total votes 58: ↑55 and ↓3 +52
Comments 8

Information

Rating
Does not participate
Location
Астана, Акмолинская обл. (Целиноградская обл.), Казахстан
Registered
Activity