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

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

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

YeaHub:
https://yeahub.ru/

Связь:
@ruslan_kuyanets
Download Telegram
Инкапсуляция в React

Инкапсуляция — это принцип объектно-ориентированного программирования, который используется для ограничения доступа к определённым компонентам кода. В функциональном программировании, на которое ориентирован React, инкапсуляция достигается через функции и модули.

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

В примере компонент Counter инкапсулирует состояние count и функцию increment. Внешний код не имеет доступа к состоянию напрямую, а взаимодействует с ним через публичный интерфейс, представленный функцией increment и JSX-разметкой.

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

#frontend #react #ооп
👍154🔥2💯1
😁18🔥4👍3
Frontend Гладиаторы: Этап 1/4

Турнир полным ходом идет 🔥

Смонтирую весь процесс в YouTube. Интересный опыт. Если все оценят, то будем раз в 1-2 месяца проводить такие состязания 📌

#frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8💯3🔥2
Паттерн Наблюдатель в JavaScript. Продвинутый Frontend на реальных примерах

В этом видео мы рассмотрим Паттерн Наблюдатель (Observer) в контексте JavaScript и Frontend разработки.

Для проекта Рецептов используем Webpack, JavaScript.

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

Видео уже на канале! Четвертая серия видеокурса
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #patterns #observer #redux
👍7🔥64
Инверсия зависимостей в React

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

В React этот принцип реализуется путем передачи зависимостей компоненту через пропсы или контекст, вместо их непосредственного создания внутри компонента.

Здесь компонент UserList зависит от абстракции userService, а не от конкретной реализации. Это позволяет легко заменять реализацию сервиса, например, для тестирования или при изменении источника данных.

При использовании компонента мы передаем конкретную реализацию сервиса

Таким образом, инверсия зависимостей делает компоненты более гибкими, тестируемыми и менее связанными с конкретными реализациями зависимостей.

#frontend #react #solid
👍13🔥43
Forwarded from авось прорвемся (Аня)
Лицемерие в айти

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

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

— ой, а что, ты не хотел врать при поиске работы?
теперь ты будешь врать на работе за деньги и проходить собеседования в продуктовые компании с накруткой опыта и стека, чтобы аутстафф побольше смог заработать на перепродаже тебя
УРА!

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

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

1. накрутка опыта от работодателя:
пару лет назад я искала работу с 1 годом опыта в резюме и нашла её за неделю! тогда рынок хоть и трясло, но такой жесткой инфляции опыта ещё не было.
после пары недель работы мне прилетела заявка на то, что нужно пройти одно собеседование на проект!
я была рада, так как хотелось поскорее начать писать код в команде, а не в одиночку. и тут меня попросили немного дополнить резюме…когда я его впервые открыла, там было уже 3 года опыта.
собес я прошла успешно на своих знаниях как могла тогда, но синдром самозванца терзал мою голову еще полгода точно, так как перформить в команде как трехлетний мидл или даже сеньор я не могла и жестко перерабатывала по 12-14 часов и на выходных

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

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

спустя время меня отправляли на собесы с 4, 5 и о боже, самое крутое, с 6 годами опыта при реальных 2

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


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

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

получается, им можно записывать, хранить и шерить записи собесов, а тебе — нет? хм


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

получается, компаниям можно врать, приукрашивать и утаивать некрасивые подробности работы, а тебе — нет? хм


меня правда удивляет реакция рынка на то, что теперь некоторые кандидаты используют такие же инструменты, что и аутстафф компании, которые их же и научили этому, показав, как работает найм в айти изнутри
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥4💯41
Задайте вопрос на стриме 🤝

https://www.youtube.com/watch?v=KJ6RD9_znf4
👍52🔥2
Руслан Куянец | Reactify pinned «Задайте вопрос на стриме 🤝 https://www.youtube.com/watch?v=KJ6RD9_znf4»
This media is not supported in your browser
VIEW IN TELEGRAM
Вчера провели стрим на 4.5 часа. Тяжко было😅 Старался отвечать на все вопросы😎

Кто-нибудь смотрел стрим?
🔥20👍8🤝2😁1
В планах на этой неделе выпустить 2-3 видео в YouTube

📌 Все концепции в React
📌 Все хуки в React
📌 Все виды оптимизаций в React

Какое больше всего хотели бы увидеть?
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥6💯21
Frontend Гладиаторы: Стань королем Web арены

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

Зачем это нужно?
✔️ Подготовка к собеседованиям: Учитесь отвечать на вопросы грамотно и уверенно.
✔️ Прокачка навыков: Получите новые знания и улучшите существующие в игровой форме.
✔️ Борьба со стеснением: Практикуйте формулирование мыслей и уверенное общение.
✔️ Мотивация: Соревнование с другими участниками создаст дополнительный стимул для развития.
✔️ Обучение у других: Смотрите, как отвечают другие участники, и учитесь на их примере.

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

#frontend #react #web
Please open Telegram to view this post
VIEW IN TELEGRAM
👍73🔥2
Лонг пуллинг и шорт пуллинг

Лонг пуллинг и шорт пуллинг — это методы клиент-серверного взаимодействия для получения данных.

📌 Лонг пуллинг (Long Polling)
Клиент отправляет запрос на сервер и ожидает ответа, пока сервер не предоставит новые данные. После получения данных клиент сразу же отправляет новый запрос.

✔️ Преимущества: Быстрое получение данных в реальном времени.

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



📌 Шорт пуллинг (Short Polling)
Клиент периодически отправляет запросы на сервер с фиксированными интервалами для проверки наличия новых данных. Сервер отвечает немедленно, и процесс повторяется.

✔️ Преимущества: Простота реализации, отсутствие необходимости удерживать соединения.

Недостатки: Задержка между проверками, увеличение нагрузки на сервер из-за частых запросов.


#frontend #basic
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥4🤝1
🎙 Личный опыт

Моя первая работа была в аутсорс-аутстафф компании, где я был джуном и получал 25 тысяч рублей в месяц, а работал аутстаффом за 350 тысяч рублей в иностранной компании. Представьте, сколько компания заработала на мне. При этом я справлялся с 80% задач. Если возникали сложности, мой наставник помогал мне, и я как будто сам сдавал задачу. Достаточно отлаженный механизм: один наставник и пять джунов, которые пишут задачи на других проектах, а ты за ними следишь и иногда помогаешь. Джуны получают 25 тысяч, а компания – по 200-300 тысяч за аренду. Все всё понимают и всех всё устраивает, ведь задачи закрываются. Накрутка – это частая практика в компаниях.

📌 На фото моя первая работа

#interview #work
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍32
👍 Всем привет!

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

В основном канале постараюсь сфокусироваться на фронтенде. Также планирую запустить YouTube-канал, ведь есть много интересных тем для обсуждения.

https://news.1rj.ru/str/ruslan_kuyanets_it
Please open Telegram to view this post
VIEW IN TELEGRAM
👍42🔥2
Вопрос на собеседовании по CSS: Что такое схлопывание отступов? | CSS | Собеседование

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

https://www.youtube.com/watch?v=s4YTfgj4vOY

#frontend #css
👍7🔥2💯1
JavaScript — это высокоуровневый, интерпретируемый, компилируемый во время выполнения, динамически типизированный, однопоточный, с возможностью асинхронного выполнения, мультипарадигмальный язык программирования, широко используемый для разработки веб-приложений.

Основные характеристики JavaScript:

1. Высокоуровневый: JavaScript обеспечивает абстракцию от аппаратных деталей, предоставляя удобный синтаксис и встроенные функции для работы с данными, манипуляций с DOM и сетевыми запросами.
2. Интерпретируемый: Исторически JavaScript выполнялся интерпретатором, который считывает, анализирует и выполняет код непосредственно во время его выполнения. Однако современные движки JavaScript, такие как V8 от Google, используют Just-In-Time (JIT) компиляцию, что позволяет ускорить выполнение кода.
3. Компилируемый во время выполнения (JIT): Современные JavaScript-движки компилируют код в машинный язык непосредственно перед его выполнением, что позволяет добиться высокой производительности при сохранении гибкости интерпретируемого языка.
4. Динамически типизированный: В JavaScript типы переменных определяются во время выполнения. Переменная может изменять свой тип в процессе работы программы, что обеспечивает гибкость, но может приводить к ошибкам времени выполнения.
5. Однопоточный: JavaScript выполняется в одном потоке, что означает выполнение одной операции в каждый момент времени. Это упрощает модель конкурентного выполнения, но требует использования асинхронных механизмов для обработки долгих операций, чтобы не блокировать основной поток.
6. Асинхронное выполнение: JavaScript поддерживает асинхронное программирование через механизмы колбэков, промисов и async/await, что позволяет эффективно обрабатывать операции ввода-вывода без блокировки основного потока.
7. Мультипарадигмальный: JavaScript поддерживает несколько парадигм программирования, включая императивное, объектно-ориентированное и функциональное программирование.
8. Событийно-ориентированный: JavaScript часто используется для создания событийно-ориентированных программ, где выполнение кода инициируется событиями, такими как клики мыши или сетевые запросы.
9. Встроенный в браузеры: JavaScript является неотъемлемой частью веб-браузеров, обеспечивая динамическое взаимодействие с веб-страницами. Все современные браузеры включают JavaScript-движки для выполнения кода.

#javanoscript #frontend
👍15🔥6😁1
REBASE

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

Представим, что вы работали над фичей 3 недели. За это время другие разработчики 10 раз сделали слияние. Ваш код отличается на 10 коммитов. В таком случае слияние может стать довольно сложной задачей.

Периодически делайте ребейзинг своей ветки. Это позволит:

- Сохранить актуальную историю коммитов.
- Избежать конфликтов при слиянии.

Как сделать ребейзинг:

1. Перейдите на ветку develop.
git checkout develop

2. Обновите ее
git pull

3. Перейдите на свою ветку
git checkout my-branch

4. Сделайте ребейс
git rebase develop


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

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

#git #rebase
👍17🔥3💯1🫡1
Отзыв ученика. На обучении 2 месяца, начали искать работу, откликаться🤝
До этого общался с множеством менторов, остановился на мне👍

От тебя задач прилетает много, и это круто – не успеваешь всё выполнять, а уже понимаешь, что растёшь! С тобой можно по-настоящему апнуть харды и подтянуть софты, а если ещё и все мероприятия посещать, то вообще сказка. Общался с другими менторами, у них ответ один: лучше Тимура (ULBI) не научим – готовим только к собесам. Если хочешь подтянуть харды, смотри его курс😁


Что нового на обучении:
1. Каждую неделю групповое собеседование
2. Каждую неделю групповой лайвкодинг
3. Каждую неделю 1-2 митапа на технические темы
4. Каждую неделю общий созвон
5. Интеграция с YeaHub. Мы набираем обороты, уже 8 учеников практикуются в YeaHub, работают в командах, читают чужой код.
6. Куча гайдов и примеров для поиска работы, написания резюме и подготовки к собеседованиям
7. Большая база знаний: Тех Вопросы, Задачи, Софт Вопросы

✔️ Такого нет ни у кого. Я за качество.

#mentor #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👍31
Как браузер читает JSX?

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

Чтобы браузер мог понять JSX, необходимо преобразовать его в обычный JavaScript. Этот процесс называется транспиляцией. Для этого обычно используются специальные инструменты или сборщики (например, Babel), которые преобразуют JSX в эквивалентный JavaScript код.


const element = <h1>Hello, World!</h1>;

const element = React.createElement('h1', null, 'Hello, World!');


В примере выше JSX трансформируется в вызов React.createElement, который создает элемент с тегом h1 и содержанием "Hello, World!".

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

#frontend #react #jsx
👍17🔥1🤝1