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

Опубликовали видео с моего доклада на OdessaFrontend про переменные в CSS. Там есть разбор второй задачи и объяснение. Ну и сам доклад, надеюсь, вам понравится. Кому лень смотреть весь доклад, вот ссылка на саму задачу: 14:28

#задача_2

Полное видео тут: http://bit.ly/2QAstwR

#задача_3

<div class="wrap">
<h1 class="noscript">Title</h1>
<p class="text">Lorem, ipsum.</p>
<p class="text">Placeat, modi.</p>
<p class="text">Mollitia, tempora?</p>
</div>

.text:first-child {
color: red;
}

Объясните максимально доступно: почему текст ни в одном из блоков не станет красным?

Ответы, как обычно, сюда: @fominua

Медиавыражения в CSS — это не только max-width

bit.ly/2Rb4gNT

Больше месяца назад я публиковал опрос, про то, когда же можно использовать !important. Варианты ответов были запутанными и перекликались друг с другом, но это было сделано не только для того, чтобы вас запутать. Ответы были подобраны так, как они обычно звучат в самом сообществе, так как нет однозначного мнения. Многие примерно понимают, в каких ситуациях !important оправдан, другие просто сильно себя убедили, что это плохо и не используют, третьи об этом всём не думают и пишут его там где хочется. Я попробовал разобраться, когда же всё таки можно 😄

Вы прислали много ответов на #задача_3, но доступно объяснить, почему же текст ни в одном из блоков не станет красным, получилось не у многих.

На самом деле, ответ на поверхности, но проблема поиска этого ответа заключается в том, что вы пытаетесь наделить псевдоклассы какими-то волшебными свойствами. Если переписать этот же пример на обычные классы, а не на псевдо, то, наверное, 100% ответивших дали бы правильный ответ.

<div class="wrap">
<h1 class="noscript first">Title</h1>
<p class="text">Lorem, ipsum.</p>
<p class="text">Placeat, modi.</p>
<p class="text">Mollitia, tempora?</p>
</div>

.text.first {
color: red;
}

- Почему ни один элемент не стал красным?
- Потому что у нас нет ни одного элемента, у которого есть класс .text и класс .first.

То же самое и с псевдоклассом :first-child.

Псевдокласс first-child получит первый элемент в родителе, а классы .text есть только у второго, третьего и четвертого. Выходит, что у нас просто нет такого элемента, у которого был бы класс .text и псевдокласс :first-child 🤷🏻‍♂️

Я как-то записывал видео с обзором на Chrome Dev Tools. Тогда у меня ещё не было канала, поэтому я про него ничего и нигде не писал.

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

Приятного просмотра! И не забудьте поставить лайк 😁

http://bit.ly/2ts5AnH

Очень простая #задача_4 😁

<div class="wrap">
<div class="card">First Card</div>
<div class="card">Second Card</div>
<div class="card">Third Card</div>
<div class="card">Fourth Card</div>
</div>

<style>
.card {
width: 25%;
display: inline-block;
background-color: red;
}
</style>

Все элементы шириной 25% и их всего 4, но они почему-то не становятся в одну строку.

Объясните максимально доступно: почему элементы не становятся в одну строку и как это можно исправить?

Опубликую самый доступный и развёрнутый ответ 😉
Ответы, как обычно, сюда: @fominua

#немногооффтоп

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

https://telegra.ph/Pro-menya-02-14-2

Очень рад, что #задача_4 получила такой активный отклик! К моему удивлению, очень многие хорошо сформулировали проблему и объяснили, почему же блоки не становятся в одну строку, но не так хорошо ориентировались в решениях. Я думал ситуация ровно обратная 😄

Попробуем подвести итог:

1. Почему?

Когда мы превращаем элемент в inline-block - он получает преимущества строчных и блочных элементов. От строчных элементов инлайн-блок получит основную особенность - набирать свою ширину за счёт объёма контента внутри и возможность становиться частью строки. Именно это даёт нам возможность выстроить несколько блоков в ряд.

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

Откуда берётся этот пробел? Он возникает из-за того, что мы форматируем код, и каждый наш перенос кода на новую строку, создаёт какое-то количество пробелов, а браузер потом это всё равно отображает как один пробел. Я думаю вы знаете про такое поведение.

Мы убедимся, что это пробелы, если попробуем записать наши инлайн-блоки в строку:

<div class="wrap">
<div>...</div><div>...</div><div>...</div><div>...</div>
</div>

Теперь никакой проблемы - блоки стали в одну строку, как и планировалось. Однако так записывать код мы не можем, потому, что при большом объёме кода такое форматирование сделает код абсолютно не читаемым.

2. Как исправить?

В интернете описано много способов решения этой проблемы (например тут и тут). Однако хороших способов не так уж и много.

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

2.1. Если размер шрифта равен нулю, то и размер пробела будет равен нулю.

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

<div class="wrap">
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>
</div>

<style>
.wrap {
font-size: 0;
}

.card {
width: 25%;
display: inline-block;
background-color: red;
font-size: 16px;
}
</style>

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

2.2. Если проблема заключается в наличии пробела, то просто уберите его 😅

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

<!-- Мой комментарий -->
<div>...</div>

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

<div class="wrap">
<div>...</div><!--
--><div>...</div><!--
--><div>...</div><!--
--><div>...</div>
</div>

Что я только что сделал? 😣 Я создал комментарий, который начинается сразу после закрывающего тега </div> и заканчивается перед следующим открывающим тегом <div>. Таким образом, все пробелы остаются, но они находятся внутри комментария и браузер не рендерит нам часть, которая заключена в коммент, а мы при этом сохранили форматирование кода.

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

Селекторы в CSS

Мы можем писать селекторы в CSS по тегам, классам, атрибутам и id. Какие из этих вариантов вы считаете допустимыми, а какие нет?

И если какие-то считаете недопустимыми, то напишите почему)
Очень интересно) @fominua

Круто, что большинство ответило правильно - селекторы лучше всего писать по классам.

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

Опишу вкратце:

1. Селекторы по Id
У id есть один основной недостаток - он должен быть уникальным на странице. Этого уже достаточно, чтобы отказаться от него в вёрстке. Это не значит, что его совсем нельзя использовать. Для работы с элементом из JS или для использования стандартных механизмов браузера на базе id'шников - пожалуйста. Но не пишите селекторы по id.
Даже если вам кажется, что этот элемент точно один на странице, и у него уже есть id, то можно к нему обратиться по id и в CSS - не делайте так. Всё равно вы придёте к ситуации, когда этот элемент или его стиль надо будет снова использовать, и вы все равно замените его на class. Так зачем этот момент откладывать?

2. Селектор по атрибуту
Такой селектор обычно нужен в отдельных специфичных задачах, и использовать его там - то, что надо. Но в стандартном случае нам такой вариант не подойдёт. Мы, конечно, можем элементу задать свои выдуманные атрибуты, так почему бы не использовать класс?

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

- вы сильно завязываете все на вложенности, когда пишете селекторы вида: header div nav li a {}. Стоит поменять хоть немного структуру в html, и вам уже придётся переписать селектор. Более того, селекторы становятся очень сложными просто из-за необходимости более "тонкой" выборки элементов. И вы начинаете выдумывать, каким селектором выбрать этот элемент. С классом такой проблемы не будет, или будет, но очень редко;

- браузер иначе читает ваш селектор. Селектор вида .noscript div {} браузер парсит в обратную сторону. Сначала он выберет все элементы div на странице, а после этого проверит, какие из них входят в элемент с классом .noscript и, зная, сколько обычно у вас тегов div на странице, вы понимаете, насколько больше лишней работы сделает браузер в таком случае. Если заменить этот селектор на подобный: .noscript .badge {}, то даже при обратном парсинге селектора, браузер скорее всего найдет не так много элементов с классом .badge, а потом проверит, какие из них находятся внутри элемента .noscript.

4. Селектор по классу
Селектор по классу - это вообще ваш бро. Он сколько угодно раз может повторяться на странице. У одного элемента может быть несколько классов (чем не может похвастаться id). Прикрутите к этому ещё и рекомендации какого-то БЭМ'а, например, и получаете очень крутой и гибкий способ влиять на элементы из CSS.

Если вы хотите с чем-то поспорить или дополнить, я всегда только за: @fominua

Меня часто спрашивали про то, где можно разместить своё портфолио или куда загрузить свой проект, чтобы похвастаться перед друзьями. И я по этому случаю записал видео про бесплатный хостинг для статичных сайтов Github Pages: http://bit.ly/2VSFB4C

Если вы вдруг ещё не слышали про этот сервис, посмотрите это короткое видео.

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

А во второй половине видео я рассказываю, как ещё и бесплатно получить домен.

И конечно же, лайк, подписка, колокольчик - не забывайте 😄

Как быстро проверить вёрстку?

Для этого есть очень удобный инструмент - CSS Layout Debugger. Это одна не очень сложная строка кода на JavaScript, которая разметит все блоки на вашей странице, и вы по внешнему виду блоков сможете определить проблемные места.

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

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

Более краткие варианты записи по ссылке

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

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

Жду вас 1 апреля в 20:00. Регистрация обязательна.

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

На прошлой неделе прошла наша первая встреча #boringtalks. Если судить по отзывам и моему личному впечатлению - получилось достаточно полезно и продуктивно, несмотря на то, что немного вышли за тайминг. Спасибо всем за отличные вопросы и такую высокую явку 👍🏻

Хочу продолжить развитие этого формата, по-этому у меня есть к вам несколько вопросов, а так же хочу создать группу, где бы мы могли более оперативно общаться по поводу грядущих мероприятий и обсуждать новые посты. Для этого публикую опрос, в котором вы можете отметить все варианты, которые вам подходят 😉

Юра записал отличное интервью с Александром Конотопским, основателем компании AJAX (это не про асинхронные запросы), которая стала компанией Apple в сфере охранных систем. Они выпускают "железо", пишут софт в Украине и просто делают отличный продукт. Если вам интересно послушать про разработку и про развитие продуктовой компании в Украине, то уверен вам понравится.

https://bit.ly/2KlOvke