Ловушка

Читая базовые лекции по фронтенду, я пришел к одному странному выводу, который самим студентам чаще всего не очевиден. Ну как и мне самому раньше.

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

И вот, как правило, последние попадают в «ловушку». В том курсе, что я читаю, мы начинаем с самых основ, и человеку, который уже что-то умеет, сначала просто скучно. И, соответственно, он не фокусируется на том, что изучается в начале, чтобы заполнить возможные пробелы, а отвлекается, возможно, пытаясь изучать что-то наперёд или просто решая какие-то более сложные задачки, чем сейчас на занятии.

Именно в этом и заключается «ловушка», потому что этот студент проходит этапы:
- мне скучно, я это знаю;
- скучно, я это уже делал;
- скучно, я это уже умею;
- скучно;
- скучно;
- скучно;
- ой, кажется, я всё пропустил 😳

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

В самом печальном случае, знаете, что получается? Такой студент после окончания курсов знает на 10% больше, чем до их начала. Что самое ужасное для него — это то, что ребята, которые пришли с ним на первое занятие и с трудом разобрались как создать файл index.html, теперь верстают лучше него и владеют материалом больше. Только потому, что те, кто начинали с чистого листа, старались не упустить ни одной детали и получали материал в правильном порядке, хорошо и правильно выполняли задания (студент из «ловушки», как правило, в заданиях больше «хвастается», что он уже и так умеет больше, чем то, что вы сейчас учите, тем самым не акцентируя внимание на важных моментах).

Я это всё к чему? Если вы вдруг в этом описании частично узнали себя, то у меня для вас будет несколько советов:

1. Не расслабляйтесь
Убедите себя в обратном, что всё, что вы уже знаете, неверно. И вам теперь надо узнать, как же всё-таки правильно. Вы удивитесь, когда в тех вещах, которые вы якобы знали, вы будете открывать что-то новое, тем самым заполняя пробелы.

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

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

4. Работайте и не ленитесь
Хочется сразу сказать: «Спасибо, кэп!», но это действительно так. Именно те, кто усердно трудятся, выполняют задания, читают материалы по пройденной теме и задают вопросы, получают максимальный результат.

Надеюсь, этот пост был небольшой подсказкой вам в том, каких ошибок не стоит допускать. И надеюсь, никто из вас не попадёт в такую «ловушку», а если вдруг у вас есть свои наблюдения или мнение по поводу этой ситуации, с удовольствием обсужу с вами: @fominua

Вы все слышали про страшный !important, который лучше не использовать. Но почему? Вы знаете ответ?

Этот ответ может быть довольно развёрнутым, поэтому давайте зайдём с другой стороны.

Когда всё-таки МОЖНО использовать !important? А я чуть позже дам свой ответ на этот вопрос.

#задача

У нас есть кнопка, на которой написано "Invite new user", а при уменьшении экрана она превращается в кнопку "+". Но пользователю надо дать понять, что именно эта кнопка предназначена для приглашения нового юзера.

Как бы вы это сверстали? Конечно же, нужен самый элегантный способ 😄

Ссылки на свои codepen присылайте в личку @fominua
Позже опубликую одно из решений с разбором

И тут же по теме: знаете про CSS Custom Properties? Поделитесь своими кейсами их использования в ваших задачах. Даже если считаете, что используете их очень банально, всё равно пишите 😁

Я не просто так вас спрашивал про кастомные свойства в CSS, хотел про это написать пост. Но лучше приходите 18 декабря на митап OdessaFrontend я вам лично расскажу 😁

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

Кто-то очень упоролся, но это выглядит забавно 😁
http://bit.ly/2E26uc1

Если вы работали с DOM, то я думаю вы понимаете насколько это жёстко 🤦🏻‍♂️

Вдруг вы где-то видели подобные фановые штуки, присылайте) С удовольствием посмотрю, а потом поделюсь со всеми)

#задача_2

:root {
--primary-color: 20px;
}

header {
background-color: red;
}

header {
background-color: var(--primary-color);
}

Какого цвета будет фон у блока и почему?
Свои ответы присылайте сюда: @fominua

Последний митап Odessa Frontend и люди, которых я там встретил, с которыми успел пообщаться, натолкнули меня на пару интересных мыслей. Поделюсь ими в вами.

Вы заметили как много существует крутых докладов и статей в сети?
Уверен, у вас обязательно было так, что вы смотрели какой-то крутой доклад, открывали для себя что-то новое, вас это очень захватывало. Вы тут сразу же представляли, какой крутой этот спикер, как много он знает и какой идеальный у него проект, а вам приходится писать ваш говнокод на JQuery или ковырять старое приложение на Backbone и стыдиться своей "ущербности".

Подумайте над тем, почему же ни один такой крутой спикер не взял и:
- не пересмотрел все доклады про то, как делать круто и не делать плохо,
- не прочитал все статьи, как надо и как не надо,
- не прочитал трижды всю документацию
- не написал свой самый крутой код сразу без ошибок, с тестами, на тайпскрипте с элементами машинного обучения и 3D-визуализации?

Потому что идеала не существует. Всегда есть миллионы мелочей, которые влияют на конечный результат любого проекта: сроки, деньги, бизнес со своими требованиями, клиент со своим странным желанием, пользователь, который опять нажал не туда и, конечно же, разработчик, который не знает от чего зависит this функции или относительно чего позиционируется absolute.

Это я к чему: не бойтесь и не стыдитесь быть не идеальными. Всего знать невозможно. Вы никогда не будете знать всех правильных ответов на этот тест. Нужно понять, что ценность не в том, что вы знаете ответы на все вопросы, а в том, что вы умеете искать эти ответы и правильно задавать вопросы для их поиска. Крутого проекта не будет никогда, проект крутой прям сейчас. И насколько он крут, зависит во многом от вас.

Не пытайтесь быть идеальными, будьте собой.

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

Опубликовали видео с моего доклада на 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, не ломаете зависимость размеров шрифтов и никак не влияете на сами элементы, между которыми вы избавлялись от пробелов. Вы просто решили саму проблему, не создав никаких новых 😬