У нас в Компьютерной школе Hillel есть отдел, который занимается разработкой внутреннего софта.

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

Эта система готовилась нами довольно долго, хотя внешне выглядит просто (это пока 😉). Под капотом того, что с виду очень простое, скрыто много автоматизации, которая сделает обучение у нас более комфортным для Студентов и упростит некоторые бизнес-процессы.

Буду делиться новостями о наших разработках под хэштегом: #h_dev

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

Фронтенд – это несложно, соответственно, самый простой способ попасть в 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 и люди, которых я там встретил, с которыми успел пообщаться, натолкнули меня на пару интересных мыслей. Поделюсь ими в вами.