Эффект Даннинга — Крюгера или когда начинать искать работу.

Ты начал учить js 6 месяцев назад и думаешь, что твоих знаний недостаточно для поиска работы. Зато появилось понимание об остутствии таланта, аналитического склада ума, да и вообще, кому я нахер такой нужен.

Время — не показатель, поэтому тебе нужно пойти и протестировать свои навыки на реальном собеседовании. Будь готов, ты обязательно облажаешься. На первом, втором. Дай себе возможность запороть 10 собеседований, кайфуй от этого. Предварительно, можешь решить несколько задач с codewars на разные темы. Например, вот эти.

Алгоритм поиска примерно следующий:
1. Идёшь на собеседование.
2. Не проходишь его.
3. Учишь темы и разбираешь вопросы с собеседования.
4. Возвращаешься к первому пункту.

Будет вообще next level, если ты будешь фиксировать разбор тем в репозитории на гитхаб. А ещё лучше, если между 3 и 4 пунктом ты разберешь вопросы в своём репозитории и отправишь их в собеседующую компанию. И говоришь такой: "Смотрите, я сделал level up".

​​Чёт я не понял, так в какой колбе воды больше?

Постов долго не было из-за наших любимых дедлайнов, исправляемся !

💣💥 БЭМ, БАМ, ТАРАРАРАМ.

Блок. Элемент. Модификатор.

БЭМ — это компонентный подход к веб–разработке, от которого у меня немного подгорает, но работодатели его очень любят и требуют. Вроде бы в документации описана основная суть, но после первого прочтения нихрена не понятно. Попробую изложить основную суть, помидорами не закидывать:

Блок — это независимый элемент, который можно переиспользовать. Можно вообще перенести блок на другой сайт и он должен работать. Если что я говорю о HTML и CSS: копируем полностью блок и стили, он должен выглядеть аналогично и на другом сайте, в идеале конечно. От абстрактных понятий к действиям. Что мне сделать, что обозначить блок в разметке? Задать элементу атрибут class. А теперь к особенностям :

— Назови класс блока осознанно, например: navigation, menu, button.

— Чтобы ты мог переиспользовать этот кусок кода, не нужно задавать блоку внешние отступы, границы. Никаких марджинов!

— Не обращайся к блоку через тег или id в css, только классы. Тоже для повторного использования.

Блоки можно вкладывать друг в друга, нет ничего плохого если мы напишем:

✅
<!-- Блок `header` -->
<header class="header">
<!-- Вложенный блок `logo` -->
<div class="logo"></div>

<!-- Вложенный блок `navigation` -->
<ul class="navigation"></ul>
</header>

Раньше часто делал такую ошибку, потому что думал, что в блоке должны быть только элементы. Так делать не надо.

❌
<!-- Блок `header` -->
<header class="header">
<!-- Это уже элемент `logo`. Его нельзя использовать вне хэдера -->
<div class="header__logo"></div>

<!-- Это уже элемент `navigation`. Его нельзя использовать вне хэдера -->
<ul class="header__navigation"></ul>
</header>

Углубимся в БЭМ?
P.S. В последнее время больше верстаю. Тебе интересно смотреть видосы с версткой в ускоренном режиме?

​​Движ. Мотивация. Конференция.

В эту субботу я был на конференции "Я ❤️ Фронтенд", которую организовал Яндекс. Не буду рассказывать насколько было атмосферно и лампово, потому что этого не передать текстом (а было действительно круто). Поэтому вкратце расскажу про доклады, начну с М — мотивации:

— Иван Бакаидов. "Глазные интерфейсы".

2020 год, ты верстаешь сайты на дивах, не задумываешься об аксессибилити, семантике и прочей "ненужной" херне. А почему не задумываешься? Потому что ты видишь всё тот же красивый сайт, интуитивно понимаешь куда нужно кликнуть, чтобы получить желаемый результат. **незаметно подхожу к тебе и говорю: "Не все могут так же" **. Докладчик — человек с проблемами опорно-двигательного аппарата и речи по причине ДЦП, — он каждый день видит сайты на дивах и радуется, как же легко, черт возьми, по ним навигироваться. Немного отошел от сути. Доклад про интерфейсы будущего, которые реальны уже в 2020 году. Ты ведь помнишь фантастику, где герои управляют интерфейсами глазами? Тони Старк, Мстители и вот это всё. Сейчас ты можешь так же. Не так эффектно, но всё же. Для этого понадобится eye tracker и софт для него. Софтом как раз и занимается Иван, он разрабатывает библиотеку компонентов под этот трэкер.

Вот ссылка на запись трансляции, загляни, если стало интересно. Продолжаем?

​​Самое время обсудить то, что обсуждают сейчас все. 👨‍🔬

Я знаю о чём ты думаешь последнюю неделю, а может и месяц. Сложно сконцентрироваться, тяжело работать, безызвестность. А всё из-за чего? Ты просто забыл как работает box-sizing в css. **Нервный смешок от неудавшейся шутки**. Короче, если ты подписан на меня, то тебе скорее всего осточертела эта ситуация. Поэтому давай просто вернемся в мир фронтенда. Ты уже знаешь про box-sizing если верстал сайтик по макету, все делал честно, выверял пиксели, а потом решил проверить верстку на pixel perfect и охренел. А почему? Потому что дефолтное значение box-sizing: content-box .

От хаоса к порядку:

— box-sizing – Это css свойство, которое определяет каким образом рассчитывать высоту и ширину элемента. Блочную модель css составляют padding – внутренний отступ, margin – внешний отступ, border – граница или обводка и content – контентная область элемента, его содержимое.

— box-sizing: content-box; – Таким образом, мы говорим браузеру, что контентная область занимает всю ширину и высоту элемента, не считая паддингов и бордеров. В этом случае проблематично рассчитывать размеры элемента, поэтому лучше не использовать значение content-box.

— box-sizing: border-box; — Здесь всё прозрачнее. Ширина и высота элемента включают в себя паддинги, бордеры и контентную область. Т.е. задали элементу ширину 240px — она и будет 240px. Поэтому используй border-box, чтобы не удивляться результатам верстки.

P.S. Не болейте 😘

​​React. Умные и глупые компоненты. 🤦‍♂️

В разных источниках их называют по-разному:
– Умные / Stateful / Компонент, основанный на классе
– Глупые / Stateless / Функциональный

Названий много, а суть одна. Умные – компоненты, у которых есть состояние. Глупые – у которых состояния нет.

Что такое состояние? State(состояние) — это джаваскрипт объект, изменяемые данные.

Глупый компонент выглядит так, его основная функция в отображении информации. Он тупой, ему пришли какие-то данные извне, он их показал. На этом всё:

const FunctionalComponent = (props) => {
return (
<div>
show some info for user
</div>
)
}

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

class Counter extends React.Component {
   
  state = { count: 1 };
   
  handleCount(value) {
      this.setState((prevState) => ({count: prevState.count+value}));
  }
 
  render() {
    <div>
<div>{this.state.count}</div>
<button onClick={this.handleCount}>Кликни сюда и увеличивай счётчик</button>
</div>
  }
}

За отображение информации в умном компоненте отвечает метод render() . Также мы определили обработчик handleCount(), который будет вызываться по клику на кнопку. Внутри handleCount вызывается метод setState, который изменяет состояние компонента. Мы не переопределяем this.state = {...}, а вызываем this.setState. Это важно, об этом тоже в другой раз😉

Компонентный подход сокращает количество рутинных действий. А ты используешь React в работе?

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

У меня появилась цель попасть в зарубежную компанию за +/- год. Буду решать много литкода, делать портфолио и все-такое. Было бы интересно посмотреть такой контент на ютубе?

Залил я значит первый видос на ютуб, порешал задачку с удалением повторяющихся чисел из массива. Пока буду решать литкод + придумывать новые форматы, будет классно если будут пожелания. Хорошего дня!

P. S. С ютубом еще разбираюсь и думаю будет много факапов, вот сейчас например не могу засетить шапку профиля 😔

https://youtu.be/ZZGhTH1ob0c

Полезная штука для подготовки к интервью в ФААНГ 🙃

Наконец-то реакции добавил, хочется видеть обратку от вас. На очереди комменты!

Оптимизация приложений - маст хэв сейчас, поисковики ранжируют страницы в зависимости от различных характеристик, да и на собесах часто спрашивают про способы оптимизации, как посчитать в цифрах все это дело и т.д. Поэтому вот классная статья про web vitals:
https://habr.com/ru/company/vk/blog/577792/

Не прошло и года (прошло), а я снова вернулся в тг и хочу радовать полезным и не очень контентом. Конечно же, я не особо готовился к алгоритмам и собесам за все это время, но оправдываю себя тем, что были у меня на это причины связанные с переездом в другую страну и т.д. 😄

Сейчас я возобновляю подготовку к собесам и план вырисовывается неплохой, первое что хочу сделать - пройти курс на [Coursera по алгоритмам от Princeton University](https://www.coursera.org/learn/algorithms-part1/home/welcome), все уже его очень нахваливают! Не знаю пойдет ли по плану или нет, но постараюсь постить сюда ежедневный/еженедельный отчет об успехах и провалах на этом пути. Из прикольного - курс на джаве, а я ее толком и не знаю, поэтому приходится параллельно читать туториал и делать домашку.

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

Алгоритм, который проблему решает называется Union Find. В простейшей имплементации в качестве структуры данных - int массив, где значения элементов это их индексы. Например - [0, 1, 2, 3, 4, 5]. Ну и нам нужно написать два метода:
- connected(int p, int q). Принимает два индекса и возвращает нам boolean, связаны элементы или нет.
- union(int p, int q). Тоже принимает два индекса, но он уже должен связывать два элемента, построить путь между ними.

Решение в принципе простое и готов им поделиться, но не знаю будет ли это полезно 🙂
Надеюсь, у вас все хорошо, see ya!

Продолжаю проходить курс на coursera после болезни, на очереди Quick Union алгоритм.
В целом от предыдущего алгоритма Union Find этот отличается подходом, теперь мы будем строить связь "родительский узел" - "дочерний узел" в виде деревьев, но без всяческих улучшений этот алгоритм по time compexity будет даже хуже чем предыдущий.

Задача: нам все так же нужно реализовать два метода
- connected(int p, int q). Принимает два индекса и возвращает нам boolean, связаны элементы или нет.
- union(int p, int q). Тоже принимает два индекса, но он уже должен связывать два элемента, построить путь между ними.

На входе массив - [0, 1, 2, 3, 4, 5]. Если хотим связать два элемента, то будем присваивать в значение второго индекс певрого. Например, после операции union(2, 4) массив изменится на [0, 1, 2, 3, 2, 5]

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

По скорости получается O(N) для union и conntected, что так себе на самом деле. В первом было лучше O(N) для union и O(1) для connected.

Но этот алгоритм улучшается, в следующих сериях раскроем как!


Stay tuned ❤️

Примерно так выглядит структура! А вот ссылка на лекцию - https://www.youtube.com/watch?v=-y6cwaj43qA