Цифровой пролетарий
50 subscribers
20 photos
20 links
«У самурая нет цели, есть только путь» © (какой-то японец)

Пишет @Kkroosh
Download Telegram
Привет! Это пост-знакомство 👋.

Немного обо мне:

🏆 Вошел в ТОП-15 среди 978 участников в соревнованиях CodeRun от Яндекса в категории frontend (сезон 2023 года)
🎓 Закончил МГТУ имени Н. Э. Баумана
📍Работаю разработчиком интерфейсов в БФТ

В школе нравилась информатика, к тому же учитель проводил интересные уроки (операции в разных системах счисления, программы на pascal'е), но в тот момент не рассматривал эту стезю как будущую профессию.
Из интересного: в 9-ом классе даже стал призером муниципального этапа Всероссийской олимпиады по информатике.
В итоге пошел учиться на инженера-конструктора, а в середине обучения в универе решил написать первый "Hello, world" на Js и затянуло)

👽 В этом блоге буду рассказывать о развитии в качестве разработчика и моментах, с которыми пришлось столкнуться.
Please open Telegram to view this post
VIEW IN TELEGRAM
Всегда ли для обработки ошибок, возникающих в промисах нужно использовать метод .catch()?

Предварительно с основными понятиями можно ознакомиться на следующих ресурсах:
1) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
2) https://learn.javascript.ru/promise-basics

Всегда ли нужно использовать в качестве обработки ошибки метод .catch(), ведь вторым аргументом в методе .then() мы можем прокинуть колбек на случай ошибки.
На этот вопрос лучше ответить, взяв какой-нибудь пример.
Напишем функцию getsState, которая будет возвращать состояние промиса.
Работать она будет таким образом: возвращает зарезолвенный промис с нужным нам значением "resolve", "reject", "pending".

const p1 = Promise.resolve();
const p2 = Promise.reject();
const p3 = new Promise(() => {});


//По привычке можно написать так
function getState(promise){
return new Promise((resolve, reject) => {
promise
.then(() => resolve("fulfilled"))
.catch(() => resolve("rejected"))
queueMicrotask(
() => resolve("pending")
);
})
}

getState(p1).then((state) => console.log(state));
getState(p2).then((state) => console.log(state));
getState(p3).then((state) => console.log(state));

Вопрос: Что получим в данном случае?

fulfilled
pending
pending



Почему же для второго случая неправильный ответ? Сейчас разберемся. Промисы - это контейнерные типы, а методы промисов (then, catch, finally), также создают некий контейнер/новый промис при каждом использовании. Помимо событийного цикла, где распределяются микро и макро задачи, нужно учитывать итерации промисов (в node такое вроде называется tick). Функция queueMicrotask добавляет промис в текущую итерацию промисов, поэтому выше получили не тот ответ, который ожидали.

Если мы напишем такой вариант, то он будет работать, как нам бы хотелось

const p1 = Promise.resolve();
const p2 = Promise.reject();
const p3 = new Promise(() => {});

function getState(promise){
return new Promise((resolve, reject) => {
promise
.then(
() => resolve("fulfilled"),
() => resolve("rejected")
);
queueMicrotask(
() => resolve("pending")
);
})
}

getState(p1).then((state) => console.log(state));
getState(p2).then((state) => console.log(state));
getState(p3).then((state) => console.log(state));


fulfilled
rejected
pending
Чуть позже будет серия постов про подходы к обучению с нуля фронтенду❤️
Please open Telegram to view this post
VIEW IN TELEGRAM
🟨 The Rolling Scopes School

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

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

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

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

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

Иногда возникает проблема: сторонние запросы не должны блокировать отрисовку основного контента.
Как проверить, что никакой из n запросов не влияет на отображение сайта? 🔜Сымитировать долгий ответ от сервера по определенному url'у.

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

📍Одно из решений - это поднять сервер на node.js, используя другой порт. Тогда надо будет во всех нужных местах заменить настоящий url на http://localhost:3000/, например.
📍Но существует решение поудобнее: использовать Fiddler.

Fiddler - это отладочный прокси-сервер, используемый для регистрации, проверки и изменения трафика HTTP и HTTPS между компьютером и веб-сервером.
У данного инструмента очень большой спектр возможностей. Но в основном я использую его для вышеописанной проблемы и иногда для изменения ответа от сервера. Изменять ответ можно также и в devtools (Override content)
Please open Telegram to view this post
VIEW IN TELEGRAM
🔮 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).