🟨 The Rolling Scopes School

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

На платформе не один общий курс по frontend, а различные курсы по JavaScript в зависимости от уровня, а также по технологиям, которые с ним связаны (React, Angular, Node.js, Aws и т.д.)
На текущий момент программы построены преимущественно на английском языке, но есть и на русском.
Раньше это было не просто обучение, а также возможность попасть на стажировку в Epam при условии, что в конце обучения будешь находиться в топ-100 учеников. Возможно в будущем эта практика опять возобновится.

Плюсы:
➕ Бесплатно
➕ Собственная платформа —> четкие дедлайны и описание следующих заданий
➕ Большое комьюнити —> на новый курс записываются тысячи учеников, энтузиасты дополировывают платформу и сам процесс обучения, не смотря на то ,что школа основана в 2013 году.
➕ Кросс - ревью —> это не опциональная часть, а обязательное требование при выполнении некоторых заданий, чтобы получить баллы за свою работу.

Минусы:
➖ Недостаточно обратной связи от более опытных людей —> на некоторых уровнях может не достаться ментор. Основная обратная связь приходит от таких же студентов. Но при этом по каждой теме проходит Q&A сессия.

Надо быть готовым, так как интенсивность обучения очень высокая, что потребует большой вовлечённости, чтобы за относительно короткий срок освоить необходимую минимальную базу.
https://rs.school/

🔮 Strada

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

Бесплатный вариант - надо выбрать курс и просто пройти его, составляя еженедельный отчет о пройденном материале в формате короткого видео на ютубе. При выполнении двух условий (отчет на ютубе, соблюдение сроков) вам вернут деньги за обучение. Из всех, кто использовал данный вариант, вроде только один человек смог выдержать эти, казалось бы, несложные условия.
Платный вариант - есть два курса по frontend и backend на node.js. Примерная стоимость роадмапа ~ 30к за 9 месяцев. Иногда проводят акции, например, два роадмапа по цене одного и т.д. Считаю, что цена довольно приемлемая по сравнению с раскрученными курсами за 200-300к.

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

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

Плюсы:
➕ Условно бесплатно, либо приемлемая цена ~3-4к в месяц
➕ Собственная платформа —> дедлайны есть, но тут концепция одного дня, то есть каждый день выдается новое задание, которое нужно выполнить сегодня. В среднем занимает 2-4 часа.
➕ Ламповое комьюнити —> можно получить совет на определенную тему, иногда делятся вакансиями с ребятами, которых нет в открытом доступе. Также иногда устраивают сходки в разных городах России.
➕ Кросс - ревью —> это обязательная часть. Если его не делаешь, то твой код не посмотрят на эфире
➕ Бот-ментор —> если вопрос повис в воздухе или никто из ребят не смог ответить, можно задать вопрос ментору. В этом случае будет гарантированный ответ.

https://strada.one/

RegEx - это то, что я начал использовать почти каждый день

Регулярные выражения — формальный язык, используемый в компьютерных программах, работающих с текстом, для поиска и осуществления манипуляций с подстроками в тексте...(Определение из интернета)

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

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

Немного примеров:
1) Модификатор в БЭМ отделяется "—" или "_". Можно найти html файл, в котором и увидеть как принято в проекте, либо написать короткое регулярное выражение: [a-z]—[a-z]
2) Часто бывает нужно найти не вызов функции, а ее определение. Например, ищем определение функции в less .f-example\(.*\) \{
3) При локализации - регулярное выражение для поиска русских слов, исключая комменты в файлах (?<!(<!--.*))(?<=\s|^|>|"|')[а-яёА-ЯЁ]+(?=\s|$|<|"|')(?!.*-->)
В последнем примере используются негативные опережающая и ретроспективные проверки. А такой диапазон [а-яёА-ЯЁ] , вместо \w, так как \w работает только с латиницей.

Базовое знание RegEx очень упрощает поиск определенного файла, чтобы не перебирать десятки файлов вручную. Оно также поможет избежать человеческой ошибки (пропустил слово) во время локализации.

Для тестирования регулярного выражения использую сайт: https://regex101.com/
Также можно обращаться к LLM написать регулярку, но часто их приходится доделывать после ответа.

Последний пост из серии.
Предыдущие: первый и второй.

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

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

Плюсы:
➕ Собственная кривая обучения
➕ Удобный темп
➕ Моментальная обратная связь

Минусы:
➖ Цена (час занятия с senior-ом начинается от 3к)

С учетом занятий раз в неделю с сеньором в течение года сумма выйдет ~150к. Получается всё равно дешевле в разы, чем раскрученные курсы из интернетов.

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

https://fullstackopen.com/en/
https://www.theodinproject.com/

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

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

Ниже роадмапы для охвата основных тем:
https://neetcode.io/roadmap
https://maxcode.dev/roadmaps/dsa/

Завтра будет пост с примером такой задачи, где нужно посчитать сумму элементов блока матрицы, но чтобы метод подсчета работал за O(1).

range-sum-query-2d
(matrix-block-sum решается подобным образом)

В описании требуется, чтобы метод sumRegion работал за O(1)
Чтобы этого добиться надо использовать префиксные суммы, то есть заранее посчитать суммы блоков.

🪴 Надо считать только те блоки, у которых верхний левый угол соответствует крайнему положению. --> проходимся двумя вложенными циклами и заполняем Map. Для простоты расчета для n-ой позиции нам стоит:
1️⃣ Прибавить предыдущее левое значение из Map (если есть)
2️⃣ Прибавить значение верхней позиции из Map (если есть)
3️⃣ Вычесть значение , которое находится по диагонали влево & вверх (если есть)

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

Выполняем следующие действия:
🟥 = 💚 - 💙 - 🩷+ 💜

Чтобы получить сумму произвольного красного блока. Из суммы зеленого блока вычитаем две полосы (верхнюю синюю и левую розовую), а затем прибавляем фиолетовый угловой блок.

Это отличный пример, который показывает, что знания синтаксиса языка, а также работы с двумерным массивом будет недостаточно, чтобы решить задачу. Надо предварительно познакомиться с префиксными суммами и концепцией подобных задач(см. картинку)

🐳 Ставь кита, если бы решил эту задачу с двух ног

Где же изучить sql —> здесь

С клиентской стороны важно знать куда обращаться и как это всё отрисовать. Я считаю, что не лишним будет изучить хотя бы базово реляционные базы данных(БД).

Бытует мнение, что БД и работа с ними для frontend'еров не нужны. Но иногда можно очень быстро сделать выборку по данным(аналитика, логи ошибок), поставить нужные условия и построить график. Тем более это всё укладывается в условный SELECT

1310. xor-queries-of-a-subarray

📍 Чтобы решить эту задачу, надо знать, что такое исключающее или (XOR).
В javascript операцию XOR между двумя числами выполняет знак ^ .
Дает единицу тогда, когда только один из двух битов равен 1.
🏷️ Небольшая шпаргалка:
0 ^ 0 = 0
0 ^ 1 = 1
1 ^ 0 = 1
1 ^ 1 = 0

Ход решения:

1️⃣ Посчитать префиксные XOR для каждого последующего элемента. Начальный элемент будет равен 0.
2️⃣ Чтобы получить массив answers, надо проделать операцию XOR между двумя значения prefixXOR, притом второе значение берем с индексом + 1.

Пояснения 🪴
📎 arr = [1,3,4,8], queries = [[0,1],[1,2],[0,3],[3,3]]
// 1 = 0001
// 3 = 0011
// 4 = 0100
// 8 = 1000

📎 Массив prefixXOR = [0, 1, 2, 6, 14]
// 0 : 0
// 1 : 0001 -> 1
// 2 : 0011 ^ 0001 = 0010 -> 2
// 3 : 0100 ^ 0010 = 0110 -> 6
// 4 : 1000 ^ 0110 = 1110 -> 14

📎 Массив answers = [2, 7, 14, 8]
// 0 : 00 ^ 10 = 10 -> 2
// 1 : 001 ^ 110 = 111 -> 7
// 2 : 0000 ^ 1110 = 1110 -> 14
// 3 : 0110 ^ 1110 = 1000 -> 9

💡Почему же применение XOR к заранее посчитанным prefixXOR дает нужный результат в диапазоне?
На примере [1, 2]:

prefixXOR для index 1 = 0001 ^ 0 =1
prefixXOR для Index 2 (добавляем + 1, чтобы включить текущий правый конец) = 0001 ^ 0011 ^ 0100 = 6
XOR для диапазона [1, 2] без префиксных XOR: 0011 ^ 0100 = 7.

Таким образом, можно заметить, что всё, что до нужного диапазона, самоуничтожиться. 0001 ^ 0001 = 0.

Оздоровительная физкультура

Как же прекрасна удаленная работа! На первый взгляд минусов совершенно нет: никуда не надо ходить, сидишь себе целый день за компом, пишешь код... Но есть один нюанс.

Превалирующий малоподвижный образ жизни оказывает негативное влияние на здоровье. Есть куча статей и видео на эту тему. Эксперты утверждают, что 2-3 интенсивные тренировки в неделю не исправят ситуацию при сидячем положении в течение 8 часов, а могут даже усугубить.

Нужна двигательная активность во время работы.
Выход — делать каждые 30-40 минут перерыв на приседания.

Почему приседания?
Если кратко, то во время выполнения задействуются самые большие группы мышц, а значит, кровь прогоняется активнее.

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

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

Долго не мог найти удобный формат, чтобы заставить себя приседать в течение дня. Держать в голове — бессмысленно. Вести электронный счетчик — чересчур. Записывать в блокнот — неудобно: записи теряются среди других и нужно проводить арифметические вычисления вручную, либо зачеркивать палочки.

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

P.S. Оптимальная планка для меня — около 100 приседаний за день. Но, возможно, когда-нибудь дойду до рекордов Приседалыча, но это не точно

Как говорит мой закадычный друг: "Курсов много не бывает."

Под конец августа начал проходить курс по node.js и вот прошло 6 модулей длительностью 7 месяцев.

Я преследовал следующие цели:
расширение кругозора, выработку привычки ежедневно учиться, создание места для маневра (fullstack, backend), получение базовых навыков для создания серверов на node.js

Ко всему прочему на курсе ламповая атмосфера и формат мне импонирует(отсутствие видео с объяснениями); общение, задания в текстовом формате, иногда созвоны.

Изучил базово node.js, потом перешел на написание с помощью express, а затем уже на моднейший фреймворк nest.js. В качестве базы данных на протяжении всего курса использовалась Mongo. Также к середине обучения начал применять подход TDD(Test Driven Development). Было неприятно, но один из проектов получилось написать полностью следуя этому подходу. Потрогал немного микросервисы на nest.js. Также было много полезностей, отдельно их не выношу.

Обучение необходимо по двум причинам:
1) Не учишься - отстаешь
2) Отвлечение от рабочей рутины

Делаю небольшой перерыв и продолжаю дальше. Давно ждут курсы от Кобеца.

Анимации

Анимации работают только для конечных состояний. И тут возникает проблема: как анимировать элемент, у которого высота равна 'auto' и зависит от содержимого, которое заранее неизвестно.
Спойлер: никак с помощью нативного css

Но можно возразить на этот счет: "Уже завезли свойство interpolate-size в css для height: auto".
В таком случае надо использовать caniuse и заметить, что это свойство плохо поддерживается многими браузерами. Такое не используем.

Тут я нашел два выхода:
1) Эмпирический коэффициент, который из начального состояния высоты посчитает конечную.
Получилось плохо. Зависит от многих факторов, всех учесть невозможно и всё равно получается неточно.
2) Отрисовать незаметно элемент в DOM'e в конечном состоянии, зафиксировать высоту и в дальнейшем использовать.

Получить высоту элемента в потоке html страницы можно с помощью offsetHeight. Но это свойство надо всегда применять с осторожностью, так как оно очень ресурсоемкое из-за того что вызывает reflow.

Статья про reflow

Экстраверт или интроверт

Один из плюсов обучения в универе (а их довольно мало) — это возможность встретить выдающихся людей и что-то у них почерпнуть. Мне посчастливилось тренироваться у Баринова В.В. Помимо интересных тренировок, он всегда делился своими мыслями и взглядами на некоторые вещи через призму баскетбола.

Одно из его наставлений заключалось в следующем: «Я могу быть в жизни экстравертом или интровертом — это неважно, но, когда я играю в баскетбол, я полностью экстраверт. Это выражается в том, что я открыт к передачам, активен и всё в таком духе».

Очень классный посыл, и именно поэтому я его запомнил. Более того, эту же мысль можно применить ко многим другим сферам жизни. Например, вам может нравиться досуг интроверта: уединённая обстановка и тишина. Но в работе важно уметь включать экстраверта:

- Спросить о непонятном моменте, который тормозит процесс,
- Обсудить решение,
- Сделать или получить ревью,
- Поделиться знаниями
и так далее.

Разработка в большинстве своём — это про общение и взаимодействие с другими людьми.

Rebase или merge

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

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

Для тех, у кого не так много опыта с rebase, можно перестраховаться так: создавать временную ветку перед rebase'ом или еще одну локальную копию проекта (отнимает много места).

Почти довёл своё рабочее место до идеала: купил нормальное кресло Samurai S-3.05.

Можно работать в разных условиях, но безусловно каждая мелочь влияет на продуктивность и здоровье.
Как в истории с Брейлсфордом и британским велосипедным спортом, где искали варианты улучшений хотя бы на 1 %. Также можно улучшать и рабочее место, пока будет нечего улучшать.

P.S. Хруст в шее — один из симптомов остеохондроза.