Типичные заблуждения новичков про фронтенд.

Фронтенд – это несложно, соответственно, самый простой способ попасть в IT.

«Начну с легкого, а потом можно перейти на что-то более "серьезное"».

Топ заблуждение. Опытные ребята сейчас ухмыляются 😏

Первой подсказкой, что это не так, вам послужит Фрай и фон за ним на картинке к первому посту ☝🏻

Сегодня объём технологий, методологий, инструментов, фреймворков и прочего в этой сфере настолько большой, что складывается впечатление – это невозможно изучить за всю жизнь 👶🏻👨🏻‍💻👴🏻

Пока я писал этот абзац, в любом случае зарелизили что-то новое. Скорее всего очередной JS-фреймворк, если нет, то как минимум пару новых свойств в CSS, которые IE уже внедрил, а остальные никогда не внедрят, но вам они точно нужны 🤯

Каждый фронтенд-разработчик на вопрос: с чем бы он хотел ознакомиться в ближайшее время, напишет вам список как минимум из пяти пунктов, вне зависимости от того, сколько лет он уже разрабатывает (если он, конечно, не ленивая жопа, которая зависла где-нибудь на верстке таблицами) 🧐

Это большая область в разработке, которая из-за бурного развития веб-технологий «отжимает» всё бОльшую часть рынка 😎

Вывод: разработка интерфейсов – это интересная и далеко не лёгкая область в разработке. Развиваться в этой сфере можно почти бесконечно. Есть базовый набор знаний, с которого следует начать, но если вам это нравится, вам обязательно будет интересно и будет, куда расти 📚

Если у вас остались сомнения по этому поводу, пишите, обсудим 😋

#frontend_fake

Как не нужно тестировать ваши новые фичи в продакшине показывает компания МТС 😂😂😂

https://agileday.mts.ru/

Ладно, уже пофиксили. Но тем, кто не успел заценить я оставлю скрин 😬

Мы тут активно тестируем нашего бота, который, поговаривают, самый умный из существующих на рынке. Машинное обучение, нейросети, все дела... 😂

Ну а если серъёзно, то мы наконец-то запустили свою службу поддержки для Студентов. Разработали это на базе нашей внутренней системы, куда прилетают все заявки и откуда компетентные в вопросе ребята смогут ответить на все вопросы 😎

Особенность системы в том, что Студенту достаточно просто написать боту свой вопрос, и он попадёт к оператору, но при этом вместе с сообщением он получит необходимую информацию о Студенте, чтобы как можно быстрее решить проблему и не тратить время на уточняющие вопросы: "А какой у вас email?", "А в какой группе вы учитесь?", "Как зовут вашего преподавателя?" 🙌

Пока в поддержку можно написать только через Telegram, но если будет востребовано, то добавим аналоги 🤔

Мы всё ещё тестируем, чтобы улучшить, но вы тоже можете в этом поучаствовать 😉

Бот тут: @hillel_bot
А вопросы и замечания — сюда: @fominua

#h_dev

Тут со мной поделились крутым тестом на понимание того как работают селекторы. Можете проверить свои знания 😬
P.S. Спасибо Андрею за ссылку)

И ещё: я тут готовлю очередной пост для вас, надеюсь он будет интересен, но хотелось бы получить от вас обратную связь. Если у вас есть вопросы или интересные идеи для разбора, напишите мне (@fominua) и возможно эта тема станет очередным постом в этом канале 😱 Спасибо)

А какие у вас рефлексы? 😑

Асинхронность

Бывает, происходят странные вещи. Сижу я за ноутбуком, дописываю пост, публикую его в Скучный Фронтенд, потом решаю сходить за кофе и, конечно же, по пути до кухни встречаю кого-то из студентов. Приветствую, спрашиваю: «Как дела?», «Уже работаешь?», «Ну, это круто, поздравляю!». Чуть дальше сталкиваюсь с кем-то из коллег: «В смысле не работает?», «А ты кэш чистил?», «Хорошо, проверим, спасибо!». И вот я почти добрался до кофе-машины. Сделав кофе, возвращаюсь, захожу к ребятам в кабинет, обсуждаем что-то из ближайшего релиза, принимаем решение как сделать лучше, и я ухожу к себе. Дохожу до своего стола, сажусь, открываю ноутбук, затем канал, чтобы посмотреть, есть ли какой-то отклик, и понимаю, что со времени публикации последней записи прошло полгода 🤦🏻‍♂️

Думаю вам знакомо что-то подобное, когда, например, решил лечь пораньше или на пару минут заглянуть в YouTube, но всё пошло не по плану. Это, конечно же, никак меня не оправдывает, но, тем не менее, прошу понять и простить 😁

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

Ловушка

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

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

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

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

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

В самом печальном случае, знаете, что получается? Такой студент после окончания курсов знает на 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