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

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

Кто ты?

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

Руст, в логотипе используется шрифт 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 или что-то другое?

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

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

Вы кто такие?