Очень простая #задача_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

А ещё, если посмотреть это видео полностью, то можно выиграть такую охранную систему себе домой 😄
Про конкурс подробно в видео.

Обсудили недавно вышедший рейтинг городов для айтишников по версии DOU: https://youtu.be/2Z21AIMqnEU и о том, справедливо ли Одесса аж на 10-ом месте 🤷🏼‍♂️

Отличное видео: https://youtu.be/7nrDctGYOIk и авторы обещают продолжение серии 💪🏻

Знаю, что около 90% подписчиков этого канала - выпускники Компьютерной школы Hillel.

Если вы уже давно закончили обучение, то возможно пропустили: у нас был релиз несколько месяцев назад, в котором появилась возможность прямо из LMS отправить своё резюме нам на проверку.

Сделать это можно тут: https://lms.ithillel.ua/profile/cvs

Зачем это нужно?

Во-первых наши рекрутеры проверят ваше резюме и могут дать рекомендации по его улучшению.

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

Пользуйтесь и пишите свои замечания, спасибо 😉

Рассказал вчера в прямом эфире, почему, по моему мнению украинские IT-компании стали зарабатывать больше и как это сказывается на нашем рынке разработки

https://www.youtube.com/watch?v=pceiDigemac

В hillel.tech начинается летняя интернатура по Front End (Angular) в Одессе.

Интернатура оплачиваемая, по итогам которой, возможно возьмем кого-то ко мне в команду.

Подробно про интернатуру тут: https://bit.ly/3zOtS8P

Вопросы по интернатуре и свои резюме можно отправлять сюда: @hr_hillel_odessa

Приходите, буду рад поработать с вами 😄

На момент написания этого разбора 68% участников опроса ответили, что .reduce() возвращает любой тип данных. Радует, что это большинство, но процент мог бы быть больше 😄

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

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

[1, 2, 3, 4].reduce((acc, item) => acc+= item);

// Результат: 10

Попробуем разобраться.

Метод reduce принимает коллбек, который будет вызываться на каждой итерации при переборе массива.

Первым аргументом этот коллбек принимает так называемый аккумулятор. Его часто пытаются наделить какими-то особенными свойствами, однако это обычная переменная, в которую мы можем что-то записать, и это "что-то" не обнуляется при следующем вызове коллбека, а остаётся. Таким образом, при каждом вызове коллбека мы можем что-то записывать в эту переменную, накапливая значения либо перезаписывая прошлое значение (это уже как мы решим).

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

Помимо коллбека, reduce принимает вторым аргументом значение по умолчанию. Это значение, которое будет записано при инициализации в аккумулятор.

[1, 2, 3, 4].reduce((acc, item) => acc+= item, 0);

Теперь в конце, после коллбека, я передаю значение 0 как стартовое значение для аккумулятора.

Ну вот reduce и возвращает number. В чём подвох?

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

Что всё-таки вернёт reduce?

0. Число

1. Строку

[1, 2, 3, 4].reduce((acc, item) => {
acc += `Слово${item}`;
return acc;
}, '');

// Результат: "Слово1Слово2Слово3Слово4"

2. Массив

[1, 2, 3, 4].reduce((acc, item) => {
acc.push(item * 2);
return acc;
}, []);

// Результат: [2, 4, 6, 8]

3. Объект

[1, 2, 3, 4].reduce((acc, item) => {
acc[`value-${item}`] = item;
return acc;
}, {});

// Результат: {value-1: 1, value-2: 2, value-3: 3, value-4: 4}

4. Undefined

[1, 2, 3, 4].reduce((acc, item) => {
acc = undefined;
return acc;
});

// Результат: undefined

По такому же примеру можно вернуть любой тип данных. Хоть он и достаточно синтетический, но он отлично отражает то, что reduce вернёт что угодно. Любое значение, которое будет записано в аккумулятор.

А вообще с помощью reduce можно решать много интересных задачек. Какие вам приходилось решать? Делитесь в комментариях 😁