Советы Василия Половнёва, Юрия Мазурского и Фёдора Борщёва

Как бороться с багами? Часть десятая: не утонуть в багах и глюках

Как, по твоему опыту, лучше организовать процесс сдачи задачи и код-ревью в рамках спринта, чтобы определить, кто будет делать ревью, и чтобы при этом задачи, которые были спланированы у ревьюеров, не факапились?

Типовые решения в вёрстке. Как форматировать ХТМЛ

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

Я работаю ява-программистом уже 2,5 года, более 1,5 лет в одной московской компании — по сути это моя первая серьёзная работа в роли разработчика (до этого были не очень удачные места работы).

Стоит ли менять работу, если уже порядком поднадоело, но есть новые проекты и в целом хоть какой-то прогресс ощутим?

Дело в том, что у нас появился очень опытный лид, принёс практику DDD и в целом другой взгляд на разработку. Но с ним получается не так много взаимодействовать, и сейчас задачи более-менее понятны и без какого-либо интереса.

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

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

Как вы решаете подобного рода вопросы?

Как сделать всю страницу полем для загрузки файла по методике дрэг энд дроп, а не только в какую-то размеченную область на странице?

Как бороться с багами? Часть четвёртая: отслеживать производительность

Непрерывная доставка

Специфичность селекторов в ЦСС

Как написать аккуратный код? Часть четвёртая: ответственность

Расскажите, как автор советов работает с маргиналиями?

Если верстать руками через float, получается, что на узком экране с линейным отображением сноска будет до абзаца, к которому относится. Неправильно как-то. Судя по коду, советы бюро дублируют текст и до, и после абзаца как раз на этот случай, а показывают только что-то одно в зависимости от размера экрана. Как это выглядит для автора советов?

Отслеживаете ли вы производительность отдельных программистов? Для принятия решения по ЗП, например.

Если нет, то по каким критериям на интервью понимаете, что человек достаточно мотивирован сам по себе?

Фёдор, привет, у меня небольшой вопрос, связанный со стартапами и билингами.

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

Билинг, имхо (может, я тут неправ?), — это очень сложный программный продукт, и писать и поддерживать его своими силами для стартапа может быть очень затратно. Какие, вообще, тут есть варианты?

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

Просьба сохранить анонимность и не указывать почту.

Рецепты колоночных раскладок

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

Как вести себя новичку в этой ситуации?

Фёдор!

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

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

На вопрос меня натолкнуло недавнее исследование HackerRank 2020

Привет!

Что делать, если меня, технического директора, потихоньку отстраняют от дел? Я с нуля построил здесь всё: выработал концепцию технического решения; построил инфраструктуру; набрал команду, сладил её, мы все как одна большая дружная семья — каждый знает всё, что ему нужно делать; и впереди ещё столько планов.

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

Типовые решения в вёрстке. Почему не стоит использовать float

Почему какие-то значения font-weight в СSS пишут цифрами, а какие-то словами? (вопрос для Ани Даниловой)

Как написать аккуратный код? Часть третья: заменяемость

Типовые решения в вёрстке. Обёртка для страницы

Расскажите о минимальной гигиене информационной безопасности. Что дизайнер, редактор, руководитель может сделать прямо сейчас, чтобы обезопаситься?

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

Типовые решения в вёрстке. Как подключить шрифты

Добрый день!

Какую библиотеку JS вы используете при смещении фона в проекте «Конструктор плакатов и презентаций Актиона» в блоке «Плакат окулиста» в нижней части страницы?

Фёдор!

Как быть, если всё моё время уходит на разработку всё новых и новых фич? Какие подходы могут помочь высвободить время?

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

Типовые решения в вёрстке. Как сверстать простую шапку страницы с меню

Как написать аккуратный код? Часть вторая: связность

Адаптивные изображения, тег picture

Автотесты «на пальцах». Четвёртая часть: гигиена

Аккуратный код: зацепление

Адаптивные изображения, атрибуты srcset и sizes

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

Пришёл в один стартап. Увидел, что у них бэк (Python/Flask) и фронт (ReactJS) лежат в одном репозитории. Когда я сказал, что было бы хорошо их разделить, то получил вопрос: «А зачем?». С удивлением сказал, что это правильно. А мне в ответ: «Ты можешь конкретнее объяснить, почему это нужно сделать, ибо правда у всех своя?».

И знаете, я не нашёлся чем ответить. Вот не могу объяснить им, почему лучше разделить.

Хотелось бы, чтобы гуру ответил :-)

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

Хочется узнать ваше мнение: что на ваш взгляд показывает уровень развития этой культуры в компании/команде?

Как избежать эффекта Упячки при загрузке картинок

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

Насколько я понимаю, ты — за первый вариант: считаешь, что разработчик, который не думает, а просто делает — не нужен. Можешь рассказать об этом?

Что делает тег meta с атрибутом name="viewport"? Зачем его указывать?

Автотесты «на пальцах». Вторая часть: что и как тестировать у модуля

Как следить за качеством кода? Часть третья: процессы

Принципы надёжной вёрстки

Автотесты «на пальцах». Первая часть: пирамида тестов

Как следить за качеством кода? Часть вторая: метрики

Что такое СВГ и как его использовать в ХТМЛ-вёрстке?

Объективно и субъективно

Как следить за качеством кода? Часть первая: зачем

Вы используете Зеплин в бюро, чтобы разработчики смотрели макеты?
В совете про макеты для технологов Юрий Мазурский пишет, что разработчик смотрит макеты прямо в Фотошопе. Разве это не менее удобно, чем Зеплин?

Что вы посоветуете начинающему «полководцу»?

Несколько месяцев назад меня повысили из обычного разработчика до «тимлида». На деле это оказалось намного более сильной переменой, чем я ожидал. Это был переход от «мага» к «полководцу» (метафора из совета). Менеджеры и клиенты теперь ждут от меня ответа за проект в целом, команда ждёт обратной связи и лидерства, все ждут адекватного планирования, инициативы и так далее — вы знаете.

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

Что вы можете посоветовать в такой ситуации? Есть ли смысл в специальных курсах или тренингах? Если да, то каких? Какие книги стоит почитать? Что-нибудь ещё?

Спасибо!

Фёдор, у меня вопрос о вашем посте в телеграм-канале о доверии и бирюзовом подходе.

А что вы думаете, если бы исходно формулировались не технические, а более предметные KPI? Не число автоматических тестов, QA-инженеров и этапов приёмки, а аптайм сервиса или количество критических ошибок, пролезших на продакшен. Стало бы лучше?

Или в таких случаях стоит предложить команде сформулировать и сами KPI, и конкретные значения, и меры по их достижению?

Как правильно, эффективно и уважительно по отношению к сотрудникам?

Как лучше готовить макеты для технологов? Что имеет смысл делать или объяснять технологу, а что нет?

Василий, привет!

Я хорошо представляю, как в JS обрабатывать горячие клавиши: Ctrl+I, Ctrl+G и прочие. Но не могу понять, как отслеживать и обрабатывать их последовательность, например, если нужно вводить пароли или чит-коды вслепую, без поля для ввода.

Как это сделать? С какой стороны подойти к задаче?

Существует ли более-менее универсальный способ проверить компетентность веб-разработчика, если сам почти ничего не понимаешь в этом?

ЦСС-переменные: как использовать и для чего могут пригодиться

Василий, расскажите о принципе «не протыкал — не сделал».

У меня к тебе просьба осветить вопрос постановки задачи разработчику, который знает проект и для того, который не знает и придёт на замену первому. Как менеджеру ставить задачи так, чтобы ротация в команде не заставляла пережёвывать все задачи устно по 100 раз?

Режимы наложения в ЦСС

Василий, здравствуйте.

Подскажите, есть ли смысл учить Ruby и Ruby on Rails в 2019 году? Цель — веб-разработка для проектов, похожих на сайт бюро, маркетплейсов вроде catery.ru и подобных.

Если нет, то какие альтернативы будут хорошими для начинающего?

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

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

Что в нашем случае могло бы быть MVP?

Здравствуйте, Юрий!

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

Василию Половнёву.

В одном из советов Артём рассказывал о том, как придумали билинг и Бюрокассу в Издательстве бюро.

А как выглядел сам переход на новые, переписанные с нуля, сервисы в техническом плане?

Как организовать работу удалённой команды разработчиков?

Часть вторая: абсолютное позиционирование

Как донести подход HADI до руководства, которое ничего не понимает в разработке?

Василий и Юрий, привет!

Посоветуйте, что почитать, чтобы прокачаться в Гите?

Часть первая: дробление

Как резать фичи на основе метрик и экспериментов?

Расскажите о безголовом Хроме. А лучше покажите, как используете в бюро.

Советы о фронтенде

Кто ты?

Дизайнер обратился ко мне с просьбой сверстать подобный блок. Я ответила ему, что сверстать рамку с прерыванием без мороки с маской не получится, так как на фоне есть картинка. Я права, или есть способ проще?

Руст, в логотипе используется шрифт PT Sans, в вёрстке тоже. Но логотип в вёрстке отличается от логотипа в макете. Как быть?

Василий, расскажите о принципе «в письме всё есть».

Руст, а чем плох br?

Заметила, что на широких экранах сайт бюро в какой-то момент перестаёт тянуться. Как это устроено?

У меня есть форма, находящаяся где-то на странице и плавающая кнопка. При клике на кнопку нужно плавно прокрутить страницу к форме. Как это лучше всего сделать?

Василий, Руст, привет!

Расскажите, как в бюро верстают электронные письма и рассылки?

Третья часть: рассылки Школы и Издательства бюро

Руст, стоит задача придумать интересные эффекты и анимации для изображений, что вы можете посоветовать для обучения, где подсмотреть, где вдохновиться?

Василий, Руст, привет!

Расскажите, как в бюро верстают электронные письма и рассылки?

Вторая часть: рассылка советов

Руст, можно ли сделать такую кнопку без фоновой картинки? Продолжение

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

Я не программист, так что мне, пожалуйста, для тупых.

Руст, можно ли сделать такую кнопку без фоновой картинки?

Василий, Руст, привет!

Расскажите, как в бюро верстают электронные письма и рассылки?

Скажите, Руст, есть способ заставить такую анимацию работать в зависимости от скролла?
Я имею в виду скорость анимации, ну и чтоб останавливалась, когда не скроллишь, и крутилась назад, когда скроллишь обратно.

Каким способом лучше всего сделать простую анимацию на спрайтах? Можно ли обойтись без яваскрипта?

Как работает кнопка «Скопировать» в подборках? Откуда в буфере обмена берётся текст, которого нет в тексте подборки?

Расскажите, как устроена аутентификация по URL из писем?

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

Заходим с телефона на главную. Там меню в виде:

Новости Проекты Книги Школа …

От ссылки «Школа» видна первая только буква. Жмем на неё.
Открывается соответствующая страница и «Школа» отображается по центру, хотя порядок элементов меню прежний.

Вопрос: каким образом?

Руст, как вы проверяете соответствие вёрстки макету? Какие инструменты используете?

Как программно спрятать экранную клавиатуру в Айфоне?

Василий, расскажите об обязанностях технического директора в бюро?

Руст, важный вопрос: EM или REM? :-)

В совете о воспроизведении багов вы пишете, что, если информации не хватает, её стоит посмотреть в логах, Ролбаре или уточнить у клиента. А как? Как попросить клиента помочь с дебагом?

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

Как бороться с багами? Часть восьмая: порефлексировать

При разборе работ студентов вы указали, что заголовок на этой картинке можно сверстать текстом. Как?

Как бороться с багами? Часть седьмая: исправить

Добрый день!

Можно ли достичь эффекта переливания без встраивания этого видео на сайт?

Можно ли сверстать заголовок так, чтобы вместо цвета он был залит изображением?

Как бороться с багами? Часть шестая: изолировать

Как сверстать прокручивающееся меню для мобильных, как у вас на новом сайте?

Как бороться с багами? Часть пятая: повторить

Расскажите, почему вы используете jQuery для хождения по дереву и управления событиями. В чём преимущество перед «чистым» JS?

Как бороться с багами? Часть четвёртая: алгоритм

Тег <img> умеет масштабировать картинки пропорционально — заданная в процентах ширина автоматически даёт соответствующую высоту. Мне именно такая резиновость как раз нужна.

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

Получается, что внешняя по отношению к этой вёрстке штука слишком сильно влияет на самочувствие макета. Есть ощущение, что это неправильно.

Как быть?

Василий!

Что должен уметь ведущий разработчик в бюро? Чем он отличается от фронтенд-разработчика?

Вопрос веб-разработчикам.

Что делать с версткой под IE? У меня уже сил нет. Даже когда каждое свойство проверяю на поддержку браузером тут http://caniuse.com/, всё равно косяки появляются. И это я проверяю на IE11, ниже лезть вообще страшно.

С отладкой в браузере вообще кошмар. В режиме «Исследовать элемент» IE зависает нещадно на любом компьютере. Ладно, продираешься через всё, исправляешь, и в итоге стили под IE со всеми хаками и обходными путями весят больше, чем стили с уточнениями для всех остальных браузеров вместе взятые. Иногда реально уже проще верстать сразу под IE и потом минимально подгонять под другие.

Борюсь с желанием ставить заглушки. Расскажите, что делаете вы, чтоб всё нормально было?

Как бороться с багами? Часть третья: логи

Руст, скажите, в бюро не преступление использовать Бутстрап? А если не в прототипах, а в рабочих проектах? Если да, но с оговорками, то расскажите поподробнее.

Как бороться с багами? Часть вторая: отслеживание ошибок

Привет, бюро!

Как правильно сверстать такие карточки? Плитка, ховер с тенью, можно листать, двухпиксельная обводка. У знакомого верстальщика проблемы. Может, стоит вообще избегать подобного сочетания?

Как бороться с багами? Часть первая: гигиена кода

А чем ещё дизайнеру могут помочь инструменты разработчика в браузере?

Как сайт бюро сменил домен с artgorbunov.ru на bureau.ru?

Как, в принципе, сменить домен сайта, не теряя пользовательских данных?

Аня Данилова рассказывает в своих советах про вариативные шрифты. А можно ли их уже применять в вебе?

font-family: Bureauserif, Georgia, serif;

Что за font-family? Где его взять?

Как сверстать такую плашку с размытием фона?

Заметил, что сайт бюро перешел на HTTPS. Расскажите, как переходили?

Как сделана залипающая кнопка на странице книжной полки? Я понимаю, что это сделано с помощью position: sticky, но непонятно, как в конце кнопка встаёт на место.

Руст, Василий и Илья, привет!

Расскажите о дизайне REST API.

Руст, пытаюсь сверстать меню с помощью инлайн-блоков, но между элементами появляются мусорные пробелы. Откуда они берутся? Я победил их отрицательными отступами, но кажется, что должен быть способ получше.

Василию Половнёву: как быстро и без миганий загружать веб-шрифты?

Василий и Руст!

Расскажите как верстать электронные письма?

На фоне современных браузеров там прошлый век и чёрная магия: таблицы, инлайновые стили и теги font.

Какие библиотеки подойдут, с чего начать изучение, что прочитать?

Как отлаживать странное? Например, стили для печати, сайт в десятом Айфоне или почтовую рассылку в Андроиде?

Вопрос к технологам.

Почему при оборачивании картинки появляется лишний пробел, и как вы с этим боритесь?

В приведенной картинке разметка такая:

<a href="#" style="border: solid 1px red;">
  <img src="//bureau.ru/bb/soviet/i/polovnyov.png" />
</a>
<a href="#" style="border: solid 1px red; display: inline-block;">
  <img src="//bureau.ru/bb/soviet/i/kulmatov.png" />
</a>

Василий!

У меня вопрос к примеру из совета о вёрстке картинок: https://bureau.ru/soviet/20170831/

У абзаца и заголовка третьего уровня одинаковые font-size и line-height. Почему заголовку надо задавать дополнительный отступ, чтобы он попал в интерлиньяж?

(Продолжение)

Привет!

Как железобетонно определить, печатный ли символ ввёл пользователь?

Василий!

У меня вопрос к примеру из совета о вёрстке картинок: https://bureau.ru/soviet/20170831/

У абзаца и заголовка третьего уровня одинаковые font-size и line-height. Почему заголовку надо задавать дополнительный отступ, чтобы он попал в интерлиньяж?

Зачем дизайнеру Бутстрап?

Что дизайнеру стоит знать об адаптивном дизайне в вёрстке?

Чем дизайнеру могут помочь инструменты разработчика в браузере?

Как раскладывать ХТМЛ-элементы на странице? (Часть третья: флексбоксы в каталогах и выдаче)

Как раскладывать ХТМЛ-элементы на странице? (Часть вторая: флексбоксы)

Рустам, существует ли современный способ вывода знака рубля для всех устройств, начиная от Оперы Мини и заканчивая письмами, в разных вариантах начертания и размерах шрифта?

Как в ХТМЛ верстать картинки, списки и таблицы?

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

Выходит, что контейнер должен иметь ширину 100% и каждый блок нужно ограничивать по ширине отдельно. Как это удобно оформлять в вёрстке?

Как раскладывать ХТМЛ-элементы на странице? (Часть первая: боксы и позиционирование)

С помощью чего собрать простой прототип на веб-технологиях?

Привет, Руст!

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

(Продолжение)

Зачем дизайнеру прототипирование при помощи веб-технологий? С чего начать?

Планируете ли выложить Педанта в открытый доступ?

Что писать в комментарии к коммиту?

Привет, Руст!

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

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

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

Вопрос Василию Половнёву.

Здравствуйте. В одном из советов про редизайн Михаил вскользь упомянул, что раскладка работает без админки. А на чём всё держится? Как устроен сайт бюро изнутри, расскажите, пожалуйста.

(Вторая часть)

Руст!

Что думаешь про точки с запятой в Яваскрипте? Зачем их ставить?

Вопрос Василию Половнёву.

Здравствуйте. В одном из советов про редизайн Михаил вскользь упомянул, что раскладка работает без админки. А на чём всё держится? Как устроен сайт бюро изнутри, расскажите, пожалуйста.

Пропустите, пожалуйста, без очереди — мне только спросить!

Руст, как элегантно вставить любое ХТМЛ-содержимое в треугольный контейнер?

(Продолжение)

Вопрос Василию Половнёву: как начать писать тесты в «махровом легаси»?

Пропустите, пожалуйста, без очереди — мне только спросить!

Руст, как элегантно вставить любое ХТМЛ-содержимое в треугольный контейнер?

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

Руст, какую систему именования выбрать для небольшого проекта — БЭМ, SMACSS или что-то другое?

(Продолжение)

Василий, привет!

Расскажи про устройство поиска в ваших книгах? В чём и как храните данные? Как показываете превьюшки текста в поиске? Что почитать на эту тему? Как дела?

(Вторая часть)

Руст, какую систему именования выбрать для небольшого проекта — БЭМ, SMACSS или что-то другое?

Василий, привет!

Расскажи про устройство поиска в ваших книгах? В чём и как храните данные? Как показываете превьюшки текста в поиске? Что почитать на эту тему? Как дела?

Вы кто такие?