Руслан Куянец | Reactify – Telegram
Руслан Куянец | Reactify
5.85K subscribers
703 photos
52 videos
39 files
286 links
Я IT-специалист, ментор и основатель проекта YeaHub и сообщества Reactify. Здесь рассказываю про Frontend и IT.

Менторство:
https://reactify.ru

YouTube канал:
https://youtube.com/@reactify-it

YeaHub:
https://yeahub.ru/

Связь:
@ruslan_kuyanets
Download Telegram
🖥 Функция-конструктор в JavaScript

Она позволяет задавать шаблон для объектов, чтобы каждый новый объект, созданный через этот конструктор, имел определенные свойства и методы. Давайте разберем, как работает функция-конструктор.

✏️ Создание функции-конструктора
Функция-конструктор выглядит как обычная функция, но она пишется с заглавной буквы по соглашению, чтобы отличаться от других функций. Внутри конструктора используется this для задания свойств создаваемого объекта.


function Person(name, age) {
this.name = name; // свойство name
this.age = age; // свойство age
}


🎮 Создание объектов с помощью конструктора
Чтобы создать объект с помощью конструктора, используется оператор new. Он:

- Создает новый пустой объект.
- Связывает его с this внутри конструктора.
- Возвращает этот объект.


const person1 = new Person("Alice", 25);
console.log(person1.name); // Alice
console.log(person1.age); // 25


Добавление методов в конструктор
Если мы добавим метод прямо в конструктор, то он будет копироваться в каждый новый объект, что может тратить память.


function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log(`Hi, I'm ${this.name}`);
};
}

const person1 = new Person("Alice", 25);
person1.sayHello(); // Hi, I'm Alice


⚙️ Оптимизация с prototype
Для методов можно использовать prototype, чтобы метод существовал в одном экземпляре и не копировался для каждого объекта.


function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype.sayHello = function() {
console.log(`Hi, I'm ${this.name}`);
};

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

person1.sayHello(); // Hi, I'm Alice
person2.sayHello(); // Hi, I'm Bob


💭 Как работает this в конструкторе
В функции-конструкторе this указывает на новый объект, который создается при вызове через new. Это позволяет настраивать свойства и методы нового объекта.

💎 Продвинутые аспекты
- Наследование. Используя прототипы, можно создавать наследуемые свойства и методы.
- Проверка с instanceof. Для проверки, создан ли объект через конструктор, можно использовать instanceof.


console.log(person1 instanceof Person); // true


#javanoscript #this #function
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥5💯1
Я за активность и действия, и в любой сфере всегда найдутся люди, которым проще искать пути наименьшего сопротивления. Хотя лень действительно движет прогресс вперед, порождая различные лайфхаки для упрощения работы, суть остается простой: у многих рекрутеров задача не в том, чтобы найти идеального специалиста, а просто закрыть вакансию. Им платят за процесс, а не за качество найма.

В итоге не всегда самые компетентные и талантливые специалисты находят работу — часто именно те, кто умеет «адаптироваться» под автоматические фильтры и алгоритмы. Это ситуация, когда накрутка и ухищрения становятся частью игры. И все потому, что качественная работа выполняется лишь единицами. «Смузихлеб» — явление, где эффективность приносится в жертву потоку задач.

Накрутка, фильтры и нейронки не нужны, если каждый начнет выполнять свою работу на 100%.

Посмотрите видео Антохи, рекомендую 👍

🔗 https://www.youtube.com/watch?v=XMh6jFELLsw
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥5💯3
⛔️ Топ причин, по которым могут уволить во время испытательного срока

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

На пет-проектах многие привыкают работать без четких стандартов: если текст не выровняли, то "потом как-нибудь". Ведь заказчика нет, никто не будет настаивать на исправлениях. Но это не норма. В продакшн-разработке у вас есть макет, и вы обязаны реализовать его точно до пикселя.

1. Невнимательность к качеству верстки
Представьте, что вы — мидл-разработчик в компании с зарплатой 200к. Если на проверку вы отправите верстку, не соответствующую макету, вас не только неоднократно отправят на доработку, но и запомнят как ненадежного сотрудника. Поверьте, никто не захочет тратить дни на тестирование вашего кода, если вы каждый раз правите только одно замечание, а следом появляются новые. Это загружает тестировщика, который гоняет вас с правками 4-5 дней, и раздражает коллег, вынужденных ревьюить один и тот же код снова и снова.

💡 Что делать:
- Проверяйте верстку на соответствие макету с помощью Pixel Perfect.
- Старайтесь устранять все замечания разом, чтобы не засыпать коллег бессмысленными коммитами.


2. Отправка неаккуратных Pull Request
Задача — отправлять чистый, аккуратный коммит с минимальным количеством файлов и изменений. Если в файле не было задачи или необходимости в правках, не вносите туда изменения, даже если это просто пробел, кавычка или отступ. Изменение структуры, не связанной с задачей, отвлекает и создает беспорядок в истории проекта.

💡 Что делать:
- Добавляйте в PR только те файлы, которые реально были затронуты задачей.
- Не меняйте стили и форматирование файлов, если это не связано с вашей задачей.


3. Отправка нерабочей функциональности
Если вы сделали кнопку для открытия меню, убедитесь, что меню действительно открывается. Когда тестировщик запускает ваше приложение и видит, что оно не работает, это считается серьезной ошибкой. Подобные ошибки сразу попадают в "черный список". Ошибки функциональности — это прямой показатель недоработки перед сдачей.

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


4. Игнорирование пограничных случаев
Ваш код должен обрабатывать все возможные случаи, в том числе и пограничные. Например, пустые данные, необычные пользовательские вводы, нестандартные разрешения экранов. Это позволяет избежать "неожиданных" ошибок на продакшене и сохранить положительную репутацию кода.

💡 Что делать:
- Обдумайте все сценарии, в которых может использоваться функциональность, и протестируйте их.
- Чаще перезагружайте страницу, чтобы понять, возникнет ли ошибка, если данные придут пустыми, или нужного поля не будет


❗️ Следите за тем, что вы даете на проверку!

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

Учитесь работать над ошибками и доводить каждую задачу до идеала.

#frontend #work
Please open Telegram to view this post
VIEW IN TELEGRAM
👍33🔥4💯3
🥵 Стресс после трудоустройства

Трудоустройство в IT — это всегда вызов. Независимо от уровня опыта, у большинства возникают одинаковые опасения: "Разберусь ли в проекте?", "Не разочарую ли команду?", "Смогу ли выполнить ожидания?" Эти вопросы сопровождают нас не только в начале карьеры, но и спустя годы работы.

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

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

💡 Вот несколько советов для снижения стресса на новом месте:

1. Дайте себе время
Не требуйте от себя всего сразу. Привыкание к проекту занимает время.

2. Задавайте вопросы
Никто не ожидает, что вы всё знаете. Спрашивайте — это быстрее приведет к пониманию задач.

3. Осваивайте поэтапно
Беритесь за одну задачу за раз, избегайте перегрузки.

4. Найдите коллег для поддержки
Опытные сотрудники могут поделиться знаниями и упростить адаптацию.

5. Фиксируйте прогресс
Записывайте успехи, чтобы видеть результаты и укреплять уверенность.

6. Снимите самокритику
Ошибки неизбежны. Оценивайте свои усилия, а не только результаты.

7. Берегите здоровье
Режим сна и питания помогут избежать выгорания.

Антоха на стриме рассказал подробнее про трудоустройство и испытательный срок. Кстати, у него новый YouTube-канал — в ближайшее время он выпустит много годного контента 👍

https://www.youtube.com/live/KMsrfLvRLN0?si=TEFseo6--7wDmqGF&t=520
Please open Telegram to view this post
VIEW IN TELEGRAM
💯12👍5🔥32
👩‍💻 React Новости

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

Ставьте лукас, если смотрели React Новости 👍

🔗 Ссылка на видео
Please open Telegram to view this post
VIEW IN TELEGRAM
👍28🔥3💯2
🖥 DOM Mutation Observer

Mutation Observer — это интерфейс, позволяющий отслеживать изменения в DOM, такие как добавление или удаление элементов, изменение атрибутов или текста. Он предоставляет более эффективный способ наблюдать за изменениями, чем старые методы вроде Mutation Events, так как не блокирует поток выполнения и может отслеживать сразу несколько изменений.

Mutation Observer полезен, если нужно:
- отслеживать изменения в структуре DOM (например, добавление или удаление элементов);
- реагировать на изменения атрибутов элементов;
- мониторить текстовое содержимое элементов, например, для динамически обновляемых данных.


Создание Mutation Observer

Создать Mutation Observer можно с помощью конструктора MutationObserver, в который передается колбэк-функция. Эта функция будет вызываться с массивом записей (`MutationRecord`), описывающих изменения.


const observer = new MutationObserver((mutationsList) => {
mutationsList.forEach((mutation) => {
console.log(mutation);
});
});


Каждый объект `mutation` в `mutationsList` содержит информацию о произошедшем изменении, включая:
- `type` — тип изменения (`childList`, `attributes`, или `characterData`);
- `target` — целевой элемент, где произошло изменение;
- `addedNodes` и `removedNodes` — список добавленных или удаленных узлов, если `type` — `childList`;
- `attributeName` — имя измененного атрибута, если `type` — `attributes`.


Начало наблюдения

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


const targetNode = document.getElementById('targetElement');
observer.observe(targetNode, {
childList: true, // следить за добавлением и удалением дочерних элементов
attributes: true, // следить за изменением атрибутов
characterData: true, // следить за изменением текстового содержимого
subtree: true // отслеживать изменения во всех потомках
});


Остановка наблюдения

Когда больше не нужно отслеживать изменения, можно остановить наблюдение с помощью метода disconnect():


observer.disconnect();


Полезные параметры конфигурации
- `childList`: отслеживает добавление и удаление дочерних элементов.
- `attributes`: отслеживает изменения атрибутов у целевого элемента.
- `characterData`: отслеживает изменения текстового содержимого.
- `subtree`: если установлено в `true`, позволяет отслеживать изменения не только у целевого элемента, но и у всех его потомков.


#javanoscript #observer
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👍52
🖥 Intersection Observer

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

Intersection Observer полезен, если нужно:
- отслеживать появление элементов на экране (например, для ленивой загрузки изображений);
- анимировать элементы при их появлении в зоне видимости;
- отслеживать видимость рекламы или элементов пользовательского интерфейса.


Создание Intersection Observer

Создать Intersection Observer можно с помощью конструктора IntersectionObserver, в который передается колбэк-функция. Эта функция будет вызываться с массивом записей (IntersectionObserverEntry), описывающих пересечения.


const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry);
});
});


Каждый объект entry в entries содержит информацию о пересечении, включая:
- isIntersecting — флаг, указывающий, находится ли элемент в зоне видимости;
- target — целевой элемент, для которого произошло пересечение;
- intersectionRatio — процент видимой части элемента;
- boundingClientRect — размеры и положение целевого элемента относительно видимой области.


Начало наблюдения

Чтобы начать наблюдение, нужно использовать метод observe и указать целевой элемент:


const targetNode = document.getElementById('targetElement');
observer.observe(targetNode);


Остановка наблюдения

Когда больше не нужно отслеживать пересечения, можно остановить наблюдение с помощью метода unobserve() или полностью прекратить работу с disconnect():


observer.unobserve(targetNode);
observer.disconnect();


Полезные параметры конфигурации

При создании IntersectionObserver можно указать дополнительные настройки, которые управляют его поведением:
- root: элемент, который будет использоваться в качестве контейнера для отслеживания видимости. По умолчанию — null, то есть будет использоваться viewport.
- rootMargin: отступы вокруг root, которые позволяют изменять зону видимости (например, rootMargin: "0px 0px -50% 0px").
- threshold: массив значений (от 0 до 1), задающий, какой процент видимости элемента должен быть достигнут, чтобы вызвался колбэк. Например, threshold: [0, 0.5, 1] вызовет колбэк при 0%, 50%, и 100% видимости.


#javanoscript #intersection_observer
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥62💯2
🥸 Дедовщина в IT

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

IT — обычная сфера, как и все. Не надо делать из нее романтику или заставлять каждого изучать computer science, алгоритмы и т.п. Хороший фронтендер — это человек, который применяет технологии, справляется с задачами и умеет писать код.

Если будет время, посмотрите это видео на досуге. База 💯.

https://www.youtube.com/watch?v=MGWZP4OjCHM
Please open Telegram to view this post
VIEW IN TELEGRAM
17🔥6👍4💯2
🤫 Почему ИИ не заменит программистов

Ко мне часто приходят на консультации по фронтенд-разработке, и один из самых популярных вопросов звучит так:
"А стоит ли вообще начинать учиться, если ИИ скоро заменит программистов? Я боюсь, что выучу всё, а работы не будет, потому что всё будут делать машины."

Я решил поделиться своими мыслями на эту тему. Вот несколько причин, почему я уверен, что ИИ не заменит программистов:

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

Креативность и нестандартное мышление
Программирование — это не просто написание кода. Это поиск новых решений, генерация идей и эксперименты. ИИ отлично справляется с рутиной, но творческий процесс, интуиция и способность мыслить "вне коробки" остаются человеческой прерогативой.

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

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

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

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

Недавно слышал мнение, что ИИ достиг своего "потолка эффективности". Увеличение мощностей больше не дает таких же резких улучшений, как раньше. Это отражает принцип Парето: 20% усилий дают 80% результата.

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

А что вы думаете?

#ai
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18💯6🔥41
👀 Контроль сотрудников на работе: история из личного опыта

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

Рабочий день начинался с обязательного включения тайм-трекера. Программа фиксировала всё: время работы, активность на клавиатуре и мыши, а также записывала экран. Если активность снижалась, мог последовать вопрос от тимлида: "Почему у тебя так мало активности? Ты целый день ничего не делал?".

Самое сложное заключалось в том, что после 10 минут бездействия таймер сбрасывался на 10 минут назад и останавливался. Нужно было набирать ровно 8 часов активности — ни минутой меньше. Представьте, как я бегал в туалет, делал чай или обедал! У меня не было ноутбука, поэтому я буквально каждые 8 минут возвращался к компьютеру, чтобы не сбился таймер.

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

Этот опыт научил меня многому, но и вымотал колоссально. Теперь я с пониманием отношусь к людям, которые сталкиваются с подобными системами контроля.

А у вас был подобный опыт? Делитесь в комментариях!
Если интересна тема, рекомендую видео Антохи: https://youtu.be/3eMAc4Dc5sY.

Флешбеки до сих пор... 😬
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10😢21🔥1💯1
Forwarded from YeaHub
🚀 [Версия 1.0.0] - Релиз платформы!

Привет, друзья! 🎉 Мы рады сообщить, что первая версия нашей платформы готова и доступна! В этой версии:

✔️ Добавлен сервис подготовки к собеседованиям.

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

🔥 Что дальше? Следите за обновлениями – скоро будет ещё больше интересных возможностей!

👍 Обучайтесь, общайтесь, растите вместе с https://yeahub.ru

#release #news #update #yeahub
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥22👍75💯1
Какие претензии у айтишников к новичкам?

Это дополнение к посту о Дедовщине в IT. Стрим про Гейткиперов)
Залетайте на стрим 🔥

https://www.youtube.com/watch?v=fGl689uzDuY
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥1🤝1
Грейд: Мидл+/Сеньор

Компания: Wildberries

Опыт: 3.5

Этап: Финал

Вилка: 250к - 300к

Пример собеседования, на котором копают опыт и софты. Куча вопросов. Собеседование проходило недавно

Вопросы:
- Можешь рассказать, почему решил уйти с текущего проекта?
- Что тебе больше всего нравится в твоей работе?
- Приходилось ли тебе взаимодействовать с другими командами, и что обычно включало это взаимодействие?
- Как вы получали задачи: был ли бэклог, кто их формировал?
- Какую роль ты играл в декомпозиции задач? Какие подходы предлагал, по какому принципу действовал?
- Можешь вспомнить задачу, которая была самой неопределенной? Как справлялся с ней?
- Что, на твой взгляд, важнее — интересы бизнеса или интересы пользователя?
- Продвигаешь ли ты свои идеи и новшества в команде? Как ты аргументируешь свои предложения?
- По каким признакам или метрикам определяешь, что команда действительно продуктивна и приносит ценность?
- Какой был состав команды, в которой ты работал?
- Как у вас проходило код-ревью? Что для тебя в нем важно, и что бы не хотелось видеть?
- Бывали ли сложности в общении с коллегами? Может, вспомнишь какой-то спорный случай?
- Сталкивался ли ты с неэффективными процессами? Как к этому относишься?
- Приходилось ли тебе принимать риски — продуктовые или технические? Как ты к ним подходил?
- Были ли ситуации, когда горели сроки? Как ты считаешь, кто в этом виноват?
- Как ты организуешь свое личное развитие, что читаешь? Какие видишь перспективы?
- Интересно ли тебе попробовать себя в роли менеджера?
- Был ли у тебя опыт самостоятельного ведения проектов?
- Какая из задач была для тебя самой сложной? Почему?
- Как ты организуешь работу над задачей? Используешь ли планирование?
- Получал ли ты развивающий фидбек по своим софт-скиллам? Как на это реагировала?
- Как оцениваешь задачи? Вспомни случай, когда пришлось работать с претензией или получать обратную связь — как действовал?
- Какие у тебя ожидания от новой команды?
- Какие ожидания у тебя к руководителю?
- Как ты оцениваешь качество своей работы?
1🔥7👍42🤔1
Forwarded from авось прорвемся (Аня)
Двойные стандарты в айти

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

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

я уже писала об этом огромный пост, советую заценить:
Лицемерие в айти

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

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

когда я увольнялась, в моем резюме от компании красовался весь стек айосера и 6 мать их лет опыта!


ну я короче это, сеньор)))

и недавно появилась такая вот забавная тенденция: теперь уже эти аутстаффы проверяют опыт кандидатов по трудовой, прежде чем человека на собес позвать, чтобы НЕ ТРАТИТЬ НА НЕГО ВРЕМЯ, а то вдруг он уже накрутил и мы ему еще если накрутим, то он ж не справятся, порвется, а мы на деньги перед заказчиком попадем!!!

короче, лохов без опыта не берём, возьмем только опытных))


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

я уже не говорю о том, как походы на собесы с накруткой от аутстаффа портят вам карьеру в дальнейшем, так как ваше СУПЕРНАКРУЧЕННОЕ резюме будет храниться в базах тех компаний, когда вы захотите уволиться из своего аутстаффа и выйти самостоятельно на рынок…но об этом в следующем посте

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

❗️помните, если вы попадете не к тому работодателю со своим реальным небольшим опытом — вам его все равно накрутят и воспользуются вами. если уж решили вкатываться, то играйте по правилам рынка

расслабьтесь, ребятки, тут давно такие правила
всех чмок всем пис 👍
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥4💯31
🌈 Утилитарные классы

Утилитарные классы — это классы, которые применяют одно конкретное стильовое свойство. Например, text-center, bg-blue, p-4 и другие. Каждый из этих классов отвечает за отдельную задачу, такую как выравнивание текста, установка фона или добавление отступов. Их основная цель — сделать разработку быстрее и проще, не создавая громоздкие и избыточные CSS-правила.

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

👀 Пример использования утилитарных классов

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


<div class="bg-gray-100 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-bold text-center mb-4">Заголовок</h2>
<p class="text-base text-gray-700">Некоторое описание...</p>
<button class="bg-blue-500 text-white p-2 rounded mt-4">Кнопка</button>
</div>


bg-gray-100 — задает светло-серый фон для карточки.
p-6 — добавляет отступы (padding) размером 1.5rem со всех сторон.
rounded-lg — округляет углы элемента.
shadow-md — добавляет тень.
text-xl — увеличивает размер шрифта заголовка.
font-bold — делает текст жирным.
text-center — выравнивает текст по центру.
mb-4 — добавляет отступ снизу у заголовка.
bg-blue-500 — задает синий фон кнопке.
text-white — делает текст кнопки белым.
p-2 — добавляет отступы для кнопки.
rounded — округляет углы кнопки.
mt-4 — добавляет отступ сверху у кнопки.


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

🎮 Утилитарные классы в Tailwind CSS

Tailwind CSS — это фреймворк, который полностью построен на утилитарных классах. Вместо того чтобы создавать отдельные CSS-правила для каждого компонента, в Tailwind используются уже готовые утилитарные классы, которые можно применять прямо в HTML-разметке. Это позволяет ускорить разработку и уменьшить объем CSS-кода, так как вы не пишете одни и те же правила для разных элементов, а просто комбинируете готовые классы.

Пример с использованием Tailwind CSS:


<div class="bg-blue-500 text-white p-4 rounded-lg shadow-lg">
<h1 class="text-2xl font-semibold text-center">Привет, мир!</h1>
<p class="mt-2 text-base">Это пример использования утилитарных классов в Tailwind CSS.</p>
</div>


В данном примере:
bg-blue-500 и text-white отвечают за цвета фона и текста.
p-4 — отступы.
rounded-lg — округление углов.
shadow-lg — тень.
text-2xl и font-semibold — стиль заголовка.
text-center — выравнивание текста по центру.
mt-2 — отступ сверху для параграфа.


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

#css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍133🔥2💯2
🥇 Топ 6 сложных вопросов в JavaScript (По версии YeaHub)

1. Объясните концепцию прототипного наследования в JavaScript.
Для новичков это сложно, так как прототипное наследование отличается от классического, и требует понимания работы с prototype и цепочки прототипов.

2. Что такое __proto__ и prototype?
Термины часто путают, и для их понимания нужно хорошо разобраться в механизме наследования JavaScript.

3. Какие есть способы оптимизации ресурсоемких операций в JavaScript для улучшения производительности рендеринга контента?
Вопрос охватывает широкий круг тем: от дебаунсинга/троттлинга до работы с Web Workers и Virtual DOM.

4. Какие ключевые метрики используются для оценки производительности веб-сайта?
Метрики вроде FCP, LCP, TTI и CLS требуют понимания принципов работы браузеров и инструментов анализа.

5. Что такое CSS Houdini?
Вопрос сложен, так как Houdini относится к продвинутым возможностям CSS, с которыми новички редко сталкиваются.

6. Какие техники используются для критического CSS и ленивой загрузки стилей?
Вопрос требует знания оптимизаций загрузки, которые выходят за рамки базового понимания JavaScript.

❗️ Почему эти вопросы сложны?
- Неочевидные темы для новичков. Начинающие часто изучают основы: переменные, циклы, функции, но не погружаются в нюансы, как, например, прототипное наследование или CSS Houdini.
- Широкий охват знаний. На собеседовании могут ожидать объяснений с примерами и понимания теории, что сложно освоить быстро.
- Редкость на практике. Некоторые темы, как CSS Houdini или критический CSS, менее распространены и не всегда встречаются в повседневной работе.

Не согласны с подборкой? Присоединяйтесь к YeaHub (@yeahub_community) и предлагайте свои вопросы или оценки! Вместе сделаем IT лучше и удобнее для всех 🚀

👍 @yeahub
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥42💯1
Forwarded from YeaHub
5 вопросов к разработчику, который накрутил опыт и устроился в IT

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

1. Что побудило вас накрутить опыт? Считаете ли вы это оправданным шагом, и как вы оцениваете его последствия для себя и рынка IT?
Я решительно хотел устроиться программистом в ограниченные сроки, обучение с ментором с проработкой легенды и доведением до трудоустройства для меня выглядело как более надёжный вариант. Сейчас со своими задачами на работе справляюсь, так что в целом мой работодатель получил для себя рабочее звено, которое ему требовалось. Но всё же без навыков просто через накрутку в моей компании работать бы не получилось, я работаю среди коллег с действительным сильным опытом. Толковым ребятам накрутка позволяет преодолеть некоторый воздушный барьер и занять позицию, где будет комфортно и им от хорошой зп и условий, и работодатель будет в целом доволен своим сотрудником. Но правда, что накрученные и при этом слабообученные и недостаточно компетентные специалисты идут бизнесу в минус, ухудшают рабочие процессы.


2. Какие трудности возникли во время накрутки? Было ли что-то, что вас особенно удивило или оказалось сложнее, чем ожидалось?
Было сложно от себя продумывать легенду, хотя на деле хватало небольшого базового рассказа на 2 минуты. Изучение технических вопросов собеседований в целом было самым лёгким этапом, хотя порой попадались вопросы, которые не затрагивал, или которые уже слышал, но подзабыл и перед собеседованием не повторил, или в каких-то вопросах немного не хватало детальности, но в целом вопросы - самое лёгкое. А вот задач собеседований много разных и можно наткнуться на ту, которую ты просто не знаешь или не знаешь какой-то трюк небольшой, хотя, прорешав достаточный набор разных, в целом можешь справиться или хотя бы просто показать своё мышление.


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


4. Как проходила подготовка к собеседованиям? Какие стратегии вы использовали, чтобы успешно пройти интервью?
Вёл конспект с задачами, где записывал просто пустой скелет задачи с пустой функцией и консоль логом для результата, потом по памяти проходился к такому списку и смотрел, что помню, а что нет, повторял те задачи, которые не помнил. Прогонял в голове вопросы собесов и легенду, вопросы собесов выучивал на созвонах в сообществе ментора, смотрел записи чужих собеседований.


5. Удалось ли устроиться? Насколько сложной оказалась работа на новом месте, и с какими трудностями вы сталкиваетесь в реальных задачах?
Устроился и работаю, справляюсь с задачами, первые 2 недели привыкал ко всему новому, потом стало гораздо спокойнее и стал просто работать размеренно. Даже за первые несколько рабочих недель прокачался значительно, привык выполнять ТЗ в большом проекте. Мне сильно помогли навыки, которые я приобрёл во время обучения у своего ментора так, что придя на работу я с первой же недели вклинился в проект и начал в нём выполнять задачи. Сейчас ещё просто хочется поскорее ещё понабраться опыта и поработать с разными рабочими задачами для большей уверенности. В целом задачи бывают разные, но решаемые, со временем приходит какое-то решение.


#interview
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍73
🖥 CSS Houdini: Что это и зачем он нужен?

CSS Houdini — это набор API, который открывает доступ к "внутренностям" браузера, позволяя разработчикам управлять процессом рендеринга CSS.

С Houdini можно создавать кастомные свойства, работать с анимациями, управлять раскладкой элементов и даже разрабатывать свои типы CSS-процессоров.

📌 Custom Properties and Values API
Позволяет задавать пользовательские свойства с типизацией.

CSS.registerProperty({
name: '--main-color',
syntax: '<color>',
inherits: false,
initialValue: 'black',
});

Теперь --main-color можно использовать как любое CSS-свойство, например, в анимациях.

📌 Paint API
Используется для создания кастомных графических эффектов.

class MyPaintWorklet {
paint(ctx, size, properties) {
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, size.width, size.height);
}
}
registerPaint('my-paint', MyPaintWorklet);

// Затем в CSS:
.element {
background: paint(my-paint);
}


📌 Animation Worklet API
Упрощает создание сложных анимаций с минимальным воздействием на производительность. Например, плавные анимации, работающие на уровне композитора.

📌 Layout API
Дает контроль над раскладкой элементов. С ним можно реализовать свои алгоритмы расположения, например, нестандартные сетки.

📌 Parser API
Открывает доступ к разбору и интерпретации CSS-свойств.

Преимущества CSS Houdini
- Расчеты выполняются на уровне браузера, а не в основном потоке JavaScript.
- Вы можете создавать уникальные стили и эффекты, не дожидаясь поддержки новых CSS-фич.
- С его помощью можно создать настоящую экосистему кастомных стилей.



// paint.js
class DotsWorklet {
paint(ctx, size, props) {
const radius = size.width / 10;
ctx.fillStyle = props.get('--dot-color').toString();
for (let y = radius; y < size.height; y += 2 * radius) {
for (let x = radius; x < size.width; x += 2 * radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fill();
}
}
}
}
registerPaint('dots', DotsWorklet);

// styles.css
:root {
--dot-color: red;
}

.element {
background: paint(dots);
}


CSS Houdini — это будущее веб-разработки, которое уже наступило. Если вы хотите выделяться и использовать передовые технологии, начинайте изучать Houdini прямо сейчас. 💡

#css #browser #frontend #houdini
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12👍9💯4
Куда пропал?

Сейчас все мое свободное время посвящено развитию YeaHub и менторству. Мы уже запустили платформу, активно дорабатываем её функционал и разрабатываем новые сервисы. Моя цель — создать центральное место для всех IT-специалистов, сформировать активное сообщество, организовывать конференции, митапы и объединять единомышленников для реализации новых проектов и продвижения платформы.

В планах — сформировать большое IT-сообщество, проводить профессиональные встречи и создать более 20 сервисов для обучения, развития, карьеры, досуга и работы. Работа идёт полным ходом, постепенно воплощаем эти идеи в жизнь.

Менторство активно развивается: каждую неделю проводим 6–7 групповых занятий — лекции, митапы, собеседования и лайвкодинг. Создали полный курс по фронтенду, завершили курс по Webpack, подготовили материалы по линтерам и форматерам и другим технологиям и инструментам. Ученики трудоустраиваются. Практику расширяем на платформе YeaHub, приходит много новых ребят, заряженных на результат.

С января планирую вернуться к съёмке видео на YouTube. Основные темы — материалы из обучения, такие как Webpack, архитектура приложений, инструменты и другие важные аспекты. Также хочу записать новые курсы по JavaScript и CSS на основе текущих материалов с менторства.

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

На этих выходных выступаю с докладом «Как понять программирование, если вы не технарь?» в ОМ. А 16 декабря стартует мастермайнд, где вместе с IT-специалистами, блогерами, менторами и стартаперами будем обсуждать точки роста и возможности для развития. Веду активную айтишную жизнь

Если среди моих подписчиков есть бэкендеры, владеющие Nest.js, и вы хотите принять участие в развитии YeaHub, обязательно пишите! Мы создаём платформу с огромными возможностями.

Как у вас дела? Что нового происходит? Кстати, с наступающим Новым годом! 🎄

https://github.com/YeaHubTeam/yeahub-platform
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍32
🌐 Экосистема YeaHub

Сейчас мы активно развиваем экосистему YeaHub. Уже создали тематические Telegram-каналы, которые в будущем заменим полноценными сервисами на платформе. Планируем запустить агрегатор IT-мероприятий, сервис поиска работы и множество других решений.

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

🖥 YeaHub: Главные новости IT, обсуждения с экспертами и аналитика рынка.

👩‍💻 YeaHub Tech: Полезные гайды, статьи и материалы для развития ваших навыков.

🗓
YeaHub Events: Анонсы митапов, конференций, соревнований и вебинаров.

💵
YeaHub Job: Свежие вакансии, стажировки и лучшие карьерные советы.

🖥 YeaHub Frontend: Теория, задачи, тесты и вопросы для подготовки к собеседованиям.

Вы можете поддержать развитие YeaHub, подписавшись на наши каналы и делясь обратной связью. Это поможет нам сделать платформу ещё лучше!


#yeahub
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍3💯1
💡 Как понять программирование, если вы не технарь?

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

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

- Читайте материал вслух, затем кратко перескажите своими словами.
- Ведите конспекты, создавайте шпаргалки для быстрого повторения.
- Изучайте темы через разные форматы: видео, книги, интерактивные задания. Это поможет понять материал с разных сторон.

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

Определитесь с мотивацией и целями
Перед началом обучения важно принять твёрдое решение двигаться вперёд. Постоянные сомнения и мысли вроде "вдруг я трачу время впустую?" могут сбить с пути. Для этого:

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

Уверенность в себе и чёткий план помогут не отвлекаться и эффективно использовать время.

Регулярность — залог успеха
Изучение программирования требует постоянства. Большие перерывы приводят к откатам: забываются концепции, снижается мотивация. Найдите комфортный ритм, чтобы занятия стали привычкой.
Если чувствуете, что подходите к сложной теме, не откладывайте. Работайте над ней, пока материал свеж в голове. Это поможет быстрее преодолеть барьер и закрепить знания.

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

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

Погружайтесь в среду
Для эффективного обучения окружите себя программированием:

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

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

Не забывайте об отдыхе
Перерывы и смена активности важны для усвоения информации. Часто решение приходит не во время напряжённых размышлений, а после отдыха. Дайте себе время, чтобы «созреть».
Иногда спустя неделю или даже месяц изучение знакомой темы может стать легче. Новые нейронные связи сформируются, а информация ляжет на уже усвоенные знания.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👍4🤝3