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

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

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

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

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

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

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

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

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

Спасибо!

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

А что вы думаете, если бы исходно формулировались не технические, а более предметные 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>

Василий!

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

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

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

Привет!

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

Василий!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Руст!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы кто такие?