Frontend – Легкий вход в IT
793 subscribers
25 photos
2 videos
1 file
11 links
Блог как войти во Frontend-IT. Мотивация и практика!

Поможет с обучением - @it_unilt, пиши :3
Download Telegram
📝 Начальная задача с собеседования.

Напишите функцию countRepeatedCharacters, которая принимает строку и возвращает объект. Этот объект должен содержать количество повторяющихся символов в строке. Символы, которые появляются только один раз, не должны включаться в результат.


function countRepeatedCharacters(str) {
// Ваш код здесь
}

console.log(countRepeatedCharacters("hello world"));
// Ожидаемый вывод: { l: 3, o: 2 }

console.log(countRepeatedCharacters("javascript"));
// Ожидаемый вывод: { a: 2 }

console.log(countRepeatedCharacters("abcde"));
// Ожидаемый вывод: {}


Условия:
- Учтите регистр: символы 'a' и 'A' считаются разными.
- Функция должна игнорировать пробелы и другие неалфавитные символы, учитывая только буквы.
- Постарайтесь сделать решение эффективно с точки зрения времени выполнения.

💁 Админ: @it_unilt
👍3
📝 Начальная задача с собеседования.

Найдите недостающий номер в последовательности от 1 до n

Вы получили массив чисел от 1 до n, но одно из чисел потерялось. Напишите функцию, которая находит недостающее число.


const input = [3, 7, 1, 2, 8, 4, 5];
console.log(findMissingNumber(input)); // 6


💁 Админ: @it_unilt
👍8
📝 Средняя задача с собеседования.

Дан массив целых чисел nums и целое число target. Найдите индексы двух чисел из массива, которые в сумме дают target. Предполагается, что каждая входная сумма имеет одно решение, и вы не можете использовать один и тот же элемент дважды.

Условия:
Вы должны вернуть ответ в виде массива с двумя индексами.
Массив может содержать отрицательные и положительные числа.


const input = [2, 7, 11, 15];
const target = 9;
console.log(twoSum(input, target)); // [0, 1]


Усложнение:
Легкое решение можно реализовать за O(N^2), например, с использованием вложенных циклов. Сложное решение должно использовать хранилище (например, объект или Map) для достижения сложности O(N).

💁 Админ: @it_unilt
👍5
📝 Начальная задача с собеседования.

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


const input = ["eat", "tea", "tan", "ate", "nat", "bat"];
console.log(groupAnagrams(input));
// [["eat", "tea", "ate"], ["tan", "nat"], ["bat"]]


Усложнение:
Простое решение – использовать O(n^2) вложенные циклы.
Оптимальное решение – O(n) с использованием объекта или Map.

💁 Админ: @it_unilt
👍6🔥1
Про чистый код

Всегда меня очень вдохновляла мысль писать супер правильный, структурированный и читаемый код. Это была один из тех аспектов, которые мне нравилась в проге. Ты можешь написать одно и то же огромным количеством способов. А какой из них лучший - вот это я хотел узнать. И знаете, нет, я ни разу не читал книги про чистый код и не смотрел даже статьи. Прочитать что-то и вбить себе в голову, что надо так - не мое. Писать код одним способом, а потом понимать, что это не самый оптимальный путь - это самый кайф. Ты максимально понимаешь причину почему надо делать так, а не иначе. И когда тебя спросят - «почему ты делаешь так, а не так» - вместо «нуу я тут прочитал», ты скажешь - «так если иначе, то будут такие проблемы..». И нет, это не значит, что я не прислушивался к опытным коллегам. Наоборот, когда мне говорили и обосновывали почему надо делать так, я полностью воспринимал это, тк это было на реальных примерах. И последний год я создаю свою личную доку по коду, где уже описал около 30ти пунктов - как называть переменные, как писать функции, как организовывать структуру и подобное.. Мои золотые правила) И это реально то, от чего я получаю удовольствие)
15
▎Что мешает войти во Frontend IT 2025

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

Коротко
Описал все то, что мешает новичкам войти во Frontend и дал решение этих проблем. А также описал, что через это проходят все новички, и это совершенно не повод забрасывать обучение)

Содержание
- Для кого эта статья и откуда я брал данные
- Проблемы с началом обучения
- Проблема с огромным количеством технологий
- Проблема с огромным количеством теории
- Первый итог по обучению
- Проблемы с восприятием теории
- Второй итог по обучению
- Проблемы с поиском работы
- Проблемы с составлением резюме и портфолио
- Проблемы с поиском достойных вакансий
- Проблемы с прохождением собеседований
- Итог по поиску и устройству на работу
- Итог
- Советы, чтобы избежать всех этих проблем
- Спасибо за внимание!


Статья не помещается в обычное телеграм-сообщение, поэтому опубликовал тут в telegaph: https://telegra.ph/CHto-meshaet-vojti-vo-Frontend-IT-2025-02-23.

Удачки в прочтении)

💁 Админ: @it_unilt
10🔥6
📝 Начальная задача с собеседования.

Слово с самым высоким рейтингом

Условия:
Каждая буква слова набирает очки в зависимости от ее положения в алфавите a = 1, b = 2, c = 3 и т. д. Например, оценка abad равна 8 ( 1 + 2 + 1 + 4). Вам нужно вернуть слово с наивысшим баллом в виде строки

Если два слова имеют одинаковую оценку, верните слово, которое встречается первым в исходной строке.

Пример:


high('man i need a taxi up to ubud') // 'taxi'
high('aa b') // 'aa'


💁 Админ: @it_unilt
👍8
Чем занимается frontend-разработчик

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

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

Но на самом деле, на плечах фронтенд-разработчика не только написание компонент для интерфейса и тому подобного. Он может заниматься сборкой приложения, заниматься CI, а иногда и CD (если коротко, это то, как твое javascript приложение превратится в удобную статику для браузера, и то как эта статика попадет на сервер, который отдает эту статику клиенту(браузеру)). Но javascript универсальная штука, поэтому, иногда фронтенд-разработчик может браться и за разработку простенького бэкэнда, который как правило, представляет прослойку над другим реальным бэкэндом, который пишут полноценные бэкэндеры. Или же можете написать какой-нибудь nodejs скрипт, который, ну например, спарсит что-то не из фронтенда и превратит во что-то другое, что будет использоваться во фронтенде. Или можете написать свое eslint правило (которое проверяет ваш код на вами заданную корректность). Тут как бы может быть много разных извращений, которые достаточно интересно писать).

Поэтому Frontend это точно не про создание сайта, и на самом деле, не только про написание javascript компонент для интерфейса. Разнообразие того, что может делать frontend-разработчик огромное. И это круто, ведь одинаковая работа по-настоящему наскучивает, особенно если работаешь уже много лет.

Вперед во фронтенд!

💁 Админ: @it_unilt (по любым вопросам фронтенда)
👍16🔥41
Задача: "Сортировка массива по частоте элементов"

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

Пример:

const input = [1, 1, 2, 2, 2, 3];
console.log(frequencySort(input)); // [2, 2, 2, 1, 1, 3]


Усложнение задачи:
Реализуйте решение с временной сложностью O(n log n) и дополнительной памятью O(n).

💁 Админ: @it_unilt (по любым вопросам фронтенда)
👍5🔥31
Профессия разработчика больше не актуальна?

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

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

Как это будет? Простые задачи стажеров и младших разработчиков будет полностью выполнять ИИ, остальные разработчики будут лишь проверять код. Задачи посложнее будут решаться ИИ под контролем разработчика. Устаканится эта схема через год-полтора в крупных компаниях, в маленьких - попозже.

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

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

Ну а я лишь могу только посоветовать проверенные способы, которые изобрел сам, кликай - @frontend_smart. Вижу их актуальность сейчас как никогда раньше. Возможно, мы последнее поколение прогеров, хехе) Успевай, чтобы не остаться у разбитого корыта.

💁 Админ: @it_unilt (по любым вопросам фронтенда)
👍7
Задача: Повернуть изображение на 90 градусов по часовой стрелке

📝 Условие:
Дана матрица, представляющая собой изображение. Поверните изображение на 90 градусов (по часовой стрелке).

🌐 Пример:


const input = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]
console.log(rotate(input))
/*
[
[7, 4, 1],
[8, 5, 2],
[9, 6, 3]
]
*/


💡 Условия:
- Матрица квадратная, ее размерность от 1 до 20.
- Поворот должен быть выполнен на месте, то есть без использования дополнительной матрицы.

⚡️ Усложнение:
- Простое решение может иметь временную сложность O(n^2) и использовать дополнительную матрицу того же размера.
- Оптимальное решение должно иметь временную сложность O(n^2), но выполнять поворот на месте, используя только константную дополнительную память O(1).

Делитесь своими решениями в комментариях! 💻

💁 Админ: @it_unilt (по любым вопросам фронтенда)
👍7
▎Задача: Преобразование объекта в строку запроса

📝 Условие:
Объект, где ключи — это строки, а значения могут быть строками, числами или массивами. Нужно преобразовать его в строку запроса для URL, учитывая, что массивы должны быть представлены в виде многократных ключей с одинаковыми значениями, а числа и строки должны быть представлены в обычном формате.

🌐 Пример:


const input = { name: "John", age: 30, hobbies: ["reading", "travelling"], active: true }
console.log(toQueryString(input))
// Output: "name=John&age=30&hobbies=reading&hobbies=travelling&active=true"


💡Ограничения:

- Обработать как строки, так и массивы.
- Преобразовать объект в строку запроса в нужном формате.

⚡️ Усложнение: Решение должно работать за O(N), где N — это количество ключей и значений в объекте, и не использовать встроенные методы типа URLSearchParams.

Делитесь своими решениями в комментариях! 💻

💁 Админ: @it_unilt (по любым вопросам фронтенда)
🔥31
▎Задача: Обработка промисов с задержкой

📝 Дано:
Массив промисов, каждый из которых возвращает значение через случайную задержку. Необходимо создать функцию, которая будет запускать все промисы последовательно, а не параллельно. После выполнения каждого промиса, его результат должен быть выведен в консоль.

🌐 Пример:


const input = [
new Promise(resolve => setTimeout(() => resolve("Первый"), 1000)),
new Promise(resolve => setTimeout(() => resolve("Второй"), 500)),
new Promise(resolve => setTimeout(() => resolve("Третий"), 1500))
];

processPromises(input);
// Output:
// "Первый" (через 1 секунду)
// "Второй" (через 1.5 секунды)
// "Третий" (через 3 секунды)


💡 Ограничения:

-Промисы должны быть выполнены последовательно.
- Результат каждого промиса должен быть выведен в консоль сразу после выполнения.
- Промисы могут иметь разные задержки.

⚡️ Усложнение: Решение должно быть реализовано с использованием async/await, и выполняться за O(N), где N — это количество промисов в массиве.

Делитесь своими решениями в комментариях! 💻

💁 Админ: @it_unilt (по любым вопросам фронтенда)
🔥3
▎Задача: Перевод строк в объект с подсчётом повторений

📝 Дано:
Функция, которая принимает строку и возвращает объект, где ключами будут все уникальные слова из строки, а значениями — количество их вхождений в строку. Строка состоит из слов, разделённых пробелами.

🌐 Пример:


const input = "apple banana apple orange banana apple";
console.log(countWords(input));
// Output: { apple: 3, banana: 2, orange: 1 }


💡 Ограничения:
- Строка состоит только из букв и пробелов.
- Слова в строке могут быть разделены множественными пробелами.
- Регистр символов должен быть игнорируемым (например, "apple" и "Apple" считаются одинаковыми).

⚡️ Усложнение: Решение должно работать за O(N), где N — длина строки.

Делитесь своими решениями в комментариях! 💻

💁 Админ: @it_unilt (по любым вопросам фронтенда)
🔥2
▎Задача: Работа с функциями и замыканиями

📝 Дано:
Напишите функцию createCounter, которая создает и возвращает объект-счетчик. Этот объект должен содержать 3 метода:

increment() — увеличивает счетчик на 1.
decrement() — уменьшает счетчик на 1.
getValue() — возвращает текущее значение счетчика.

🌐 Пример:


const counter = createCounter();

counter.increment();
counter.increment();
console.log(counter.getValue()); // 2

counter.decrement();
console.log(counter.getValue()); // 1


💡 Ограничения:
- Функция должна возвращать объект с указанными методами.
- Методы должны работать корректно, изменяя внутреннее состояние счетчика.

⚡️ Усложнение:
Решение должно использовать замыкания и не использовать глобальные переменные для хранения состояния счетчика.

Делитесь своими решениями в комментариях! 💻

💁 Админ: @it_unilt (по любым вопросам фронтенда)
🔥5👍21
К сожалению, уверен, что многие, кто отложил покупку все еще не устроились на работу фронтендерами.

Может пора начать и уже в скором времени устроиться по лучшему разработанному плану?)
А вообще после затишья готовлю новую инфу о ИИ в разработке. Это стало моим ежедневным инструментом и никуда не уйдет)
🔥10
Залетайте кто хочет исправить проблемы со сном. Некий дневник сна со 100% хэпиэндом и раскрытием секретов)

https://t.me/long_good_sleep