F.A.Q.

Варианты «clearfix-хака» и его замен: сводная таблица

Вдогонку статье о новом значении свойства display, призванном избавить верстальщиков от нужды в clearfix-хаках — своего рода «шпаргалка», показывающая, в чем именно бывают проблемы с float-ами и какие из решений — исторических, теперешних и перспективных — какие из этих проблем решают (а какие — создают взамен:).

(далее…)

Новый display:flow-root — не clearfix, но что это и зачем?

Новые значения свойства display из модуля CSS Display 3-го уровня (за развитием которого мы следили с позапрошлого года) потихоньку проникают в браузерную реальность. Первая ласточка — display:contents — уже больше года поддерживается в Firefox, без всяких префиксов и флагов. Вторая ласточка «прилетит» вот-вот: в Firefox 53+ и Chrome 57+ появляется display: flow-root. И оно уже работает в ночных сборках и Canary соответственно.

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

(далее…)

Заблуждения разработчиков

Перевод статьи Developer Fallacies с сайта heydonworks.com, опубликовано на css-live.ru с разрешения автора — Хейдона Пикеринга.

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

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

(далее…)

О моратории на новые браузерные функции, предложенном PPK

Перевод статьи On PPK’s moratorium on new browser features с сайта https://dev.opera.com/, с разрешения автора — Брюса Лоусона

Знаменитый разработчик и автор множества статей Питер Пол Кох (PPK) недавно призвал к «мораторию на новые браузерные функции на год или около того». Если вы не читали его статью «Хватит толкать веб вперед», просмотрите ее: он выдвигает интересные тезисы, как всегда.

(далее…)

Как стать выдающимся фронтенд-разработчиком

Перевод статьи How to Become a Great Front-End Engineer с сайта philipwalton.com, c разрешения автора— Филипа Уолтона.

Недавно я получил электронное письмо от читателя моего блога, которое почему-то заставило меня всерьез задуматься. Вот что оно гласило:

Привет, Филип, можно спросить, как вы стали выдающимся фронтенд-разработчиком?

Что-нибудь посоветуете?

(далее…)

Создание аудиоплеера при помощи HTML5. Часть 3: микроданные и внешний вид

Перевод статьи Making An Audio Player With HTML5, Part 3: Microdata and Skinning с сайта demosthenes.info, c разрешения автора — Дадли Стори.

В первых двух статьях этого цикла я представил концепцию и код для собственного аудиоплеера. Прототип, который сконструирован к этому моменту – «сырой», без какого-либо оформления: HTML5 и JavaScript был написан на скорую руку, чтобы убедиться, что базовая концепция работает. В этой статье я сосредоточусь на улучшении внешнего вида плеера и добавлении микроданных, прежде чем вводить дополнительные функции в четвёртой статье.

(далее…)

Создание аудиоплеера при помощи HTML5. Часть 2: прототипирование

Перевод статьи Making An Audio Player With HTML5, Part 2: Prototyping с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Существует два подхода для создания почти чего угодно. Первый – это взяться за дело с наскока, разрабатывая от целого к частному, набивая шишки о проблемы по мере их появления и надеясь, что вы во всём разберётесь. Второй – это создать ряд простых тестов: разрабатывая от частного к целому, проверяя каждый шаг, прежде чем использовать плоды своих трудов для создания окончательного, законченного произведения.

(далее…)

Секреты браузерных инструментов разработчика (часть 2)

Перевод статьи Secrets of the Browser Developer Tools с сайта devtoolsecrets.com, c разрешения автора — Энди Смита.

Редактирование

Редактирование кода при помощи консоли.

Увеличение/уменьшение CSS-значений

Если у вас есть элемент, для которого необходимо изменить поле, отступ, ширину или высоту, то вы можете использовать клавиши управления курсором, чтобы увеличить/уменьшить размер. Просто используйте клавиши управления курсором вниз и вверх, чтобы увеличить/уменьшить значение на 1 единицу.

Вы можете увеличить/уменьшить значение на 10 единиц, удерживая клавишу «Shift» и нажимая клавиши управления курсором «вверх» и «вниз»; также можно увеличить/уменьшить значение на 0.1 единицы, удерживая клавишу «Alt» и нажимая клавиши управления курсором «вверх» и «вниз»;

(далее…)

Создание аудиоплеера при помощи HTML5. Часть 1: функции и дизайн

Перевод статьи Making An Audio Player With HTML5, Part 1: Features and Design с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Возможно, вы не настолько стары, чтобы помнить дни WinAmp-а, который был (в своём первноначальном воплощении) основной программой для проигрывания MP3 с "киллер-фичей" в виде настраиваемых тем. Сегодня у вас есть возможность создать свой собственный плеер, используя  HTML5 и JavaScript, и настроить его внешний вид при помощи CSS. Планирование и разработка этого плеера позволит разработчикам познакомиться с HTML5-мультимедиа, JavaScript DataViews и WebAudio API.

(далее…)

Секреты браузерных инструментов разработчика (часть 1)

Перевод статьи Secrets of the Browser Developer Tools с сайта devtoolsecrets.com, c разрешения автора — Энди Смита.

Секреты

Общие советы

Общие советы и подсказки, которые не входят ни в одну категорию.

Как найти инструменты разработки

Если инструменты разработчика — полная загадка для вас, вам могло оказаться непросто найти их!

Как и через главное меню, вы легко можете открыть инструменты разработчика, либо нажав «F12» в Windows или «Cmd» ⌘, «Option» ⌥ и «I» в Mac, либо кликнув правой кнопкой мыши по странице и выбрав пункт «Исследовать элемент»

В Safari вам сначала понадобится включить панель инструментов разработчика, поставив флажок в меню Настройка > Дополнения > Показать меню «Разработка» в строке меню.

В Opera вам понадобится включить панель инструментов разработчика через Дополнительные инструменты > Включить инструменты разработчика.

Поскольку Firebug – это расширение для Firefox, вам нужно установить дополнение с http://getfirebug.com/.

(далее…)

Лень — двигатель регресса: эффективный поиск ответов на вопросы

Приветствую, сообщество!

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

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

Мой основной посыл — учитесь думать и решать самостоятельно! Только таким образом можно добиться действительно значимых результатов в любой деятельности. О том, как и с помощью чего развить в себе это незаменимое качество, я и расскажу.

(далее…)

Путь верстальщика

Основано на реальных событиях…

Будучи администратором одного из известных форумов, я часто сталкиваюсь с тем, что начинающие веб-технологи не знают, с чего начать своё обучение, какую читать литературу и в каком направлении им двигаться. Периодически мне доводится слышать один и тот же вопрос — «Как стать хорошим верстальщиком?». Краткий ответ может оставить у новичка ещё больше вопросов, поэтому одного или нескольких постов с ответами на форуме недостаточно, чтобы полностью описать все необходимые, на мой взгляд, пункты. 

В этой статье я решил исправить ситуацию и описать свой путь обучения, который считаю наиболее правильным и эффективным.

(далее…)

Нестандартные шрифты в web, вместе с FontSquirrel

Развитие интернет технологий, обеспечивает все новые и новые методы подачи информации пользователю. Полет фантазии дизайнеров порождают чудесные интерфейсы, используя красочные иллюстрации и эффекты. Но сайт это не просто картина на выставке, а в первую очередь контент, текстовая информация. В плане оформления текста дизайнер, как правило, ограничен так называемыми "безопасными шрифтами". Набором шрифтов, которые в той или иной форме поддерживаются любым устройством с любой ОС. Случается так, что идея будущего сайта толкает художника рисовать такой дизайн, в котором стандартные шрифты не вписываются эстетически. 

Бывают другие случаи, когда компания заказчик диктует использование их фирменного шрифта, который своим видом дает понять, что это именно та компания, и не какая другая. Дизайнеру в рисовании в этом плане несколько проще, он может использовать в макете любой шрифт. Но когда макет передается в руки верстальщику, тут то, как раз и возникают трудности. Как показать нужный шрифт на странице, если он не является стандартным? Тут нам на помощь приходит несколько решений: нестандартное – используем сторонние библиотеки cufon, google fonts, и другие, или стандартное – css правило @font-face. Вот о последнем подробнее пойдет речь далее.

(далее…)