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

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

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

YeaHub:
https://yeahub.ru/

Связь:
@ruslan_kuyanets
Download Telegram
Что такое :hover, :active, :disabled, :las-child?
Anonymous Quiz
12%
Селекторы
2%
Классы
22%
Псевдоэлементы
64%
Псевдоклассы
👍9👌1
На работе столкнулся со сложной задачей. Я создаю графический редактор SVG для веб приложения, использую Canvas API, Three Js, Fabric Js для работы с графикой, ну и для интерфейса - наш любимый React, Next Js.

Сделано полноценное приложение с возможностью изменять SVG с функционалом как в Figma (перемещение, изменение, удаление, группировка, работа со слоями и много другого).

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

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

Было принято решение отвлечься и заняться другой задачей.

А как вы поступаете, когда не можете решить задачу, или не можете понять тему?
👨‍💻7👌2
Закончил съемку видео по React Context. Реализовал смену темы в приложении.

Это не курс по Контексту, это практическое видео. Я реализовал сначала функционал смены темы и показал как сложно передавать пропсы на 5-6 вложенностей по всему приложению, чтобы сменить тему. Потом уже вынес все в контекст.

Получилось наглядно и понятно.

Приступил к монтажу✌️
👍9🔥5
Перенес в очередной раз релиз своего сервиса. Есть некий страх запуска, что не все учел, что есть ошибки и недоработки. Решил хорошо все протестировать до нового года, добавить немного дополнительных фич, различных инструментов и тд.

У меня огромный список (возможно 50-60 фич) который я отложил так как если я его буду делать то мой сервис никогда не запуститься😄

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

В мире стартапов часто говорят о концепции "минимально жизнеспособного продукта" (MVP). Идея заключается в том, чтобы не тратить слишком много времени и ресурсов на создание "идеального" продукта сразу, потому что часто невозможно точно предугадать, что понадобится пользователям.

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

#мысли
🔥9
Есть история

Знакомый со школы решил сделать игру. Он не умел программировать, не умел делать дизайн и тд.

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

Последнее из того что я знаю - они работали почти год и расходиться не собирались. Прикольное умение - собирать команду и управлять ею.

Часто встречаю в чатах людей которые ищут новичков или единомышленников для помощи в реализации своего продукта. Вам и дизайн бесплатно сделают за идею и код напишут и денег еще дадут😁

Я в этом плане человек стеснительный и делегировать не умею. Но очень хочу научиться. Начну с нового года, а пока буду стараться допилить сервис в одиночку😬

#история
👍9🔥1
Опыт в Резюме

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

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

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

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

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

Управлял - указывает на вашу роль в руководстве командами, проектами или ресурсами.

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

Инициировал - подчеркивает вашу роль в начале новых проектов или стратегий.

Провел - указывает на успешное осуществление какого-то мероприятия или проекта.

Внедрил - показывает, что вы внесли новшества или изменения, которые были реализованы.

Улучшил - подчеркивает ваш вклад в повышение качества, эффективности или производительности.

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

Проанализировал - демонстрирует вашу способность к аналитическому мышлению и выявлению ключевых вопросов.
👍11
Мое старое резюме Web-разработчик (Раздел Опыт работы)

На тот момент у меня было 6 месяцев опыта работы. Я работал в аутсорсинг компании и успел побывать на 3х проектах за полгода.
Пример того как красиво можно расписать весь свой опыт, немного приукрасить, немного сделать выразительней.

Обязанности:


* Разработка web приложений
* Переписывание старого функционала на новый
* Разработка приложений на React/Redux, Typescript
* Интеграция Frontend с Backend
* Создание мини библиотек и пере используемых компонент
* Разработка нового функционала

Достижения:

Разрабатывал крипто кошелек приложение
(Frontend: React, Typescript, Redux;
Mobile: React Native, Typescript, Redux)
- Реализовал с нуля страницу SEPA переводов для приложения крипто кошелька (формы, валидация, двухфакторная защита, виджеты, создание получателей, интерфейс)
- Реализовал страницу с историей операций по счетам
- Реализовал страницу с заказом карты
- Добавил UI изменения

Разработка Frontend/Backend приложения для создания отчетности внутри компании
(Backend: Nodejs, Express, Typescript, MongoDB;
Frontend: React, Typescript, Redux)
- Внедрил авторизацию пользователей
- Создал документацию с Swagger
- Реализовал эндпоинты для стандартных операций
- Написание интерфейса для приложения

Разработка приложения по подбору персонала
(Frontend: React, Typescript, Redux; Backend: Nodejs, Express, MongoDB)
- Участие в разработке архитектуры приложения
- Внедрил поиск, фильтрацию, манипуляции с карточками кандидатов
- Интеграция Frontend с Backend
- Создание интерфейса приложения
- Написание юнит тестов
- Оптимизация приложения
👍9🔥3
React Context. Смена темной и светлой темы. React приложение новостей. [13]

В этом видео мы реализуем смену темной и светлой темы в нашем приложении React Новости. Познакомимся с React Context, наглядно увидим пользу контекста.

Новое видео на канале! Продолжение React Новости
🔥9👍2
theme.zip
23 KB
Картинки к 13 серии React Новости
Деструктуризация в JavaScript

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

#JavaScript #обучающийПост
👍8
Чистил почту и нашел старое письмо на мой отклик на HH. Мне предложили решить тестовое задание.

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

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

Но мы то с вами умеем, мы создаем React Новости!

Ссылка на тестовое:

https://gist.github.com/vmosyaykin/cd3ef13106c4ac16f8e47a13114f39fd
👍6🔥3👌3
Растем😎
👍10🔥6👏1
bind, call, и apply в JavaScript

Методы bind, call, и apply в JavaScript используются для управления контекстом выполнения (значением this) функций. Хотя все три метода служат для манипуляций с this, они работают немного по-разному.

bind()

- Создает новую функцию, которая, когда вызвана, имеет заданный контекст (значение this).
- Используется для постоянного привязывания функции к определенному контексту. Возвращает новую функцию.

call()

- Вызывает функцию с указанным контекстом (this) и аргументами, переданными индивидуально.
- Полезен для вызова функции с определенным контекстом, особенно когда требуется передать аргументы по отдельности.

apply()

- Похож на call, но аргументы передаются в виде массива.
- Используется для вызова функции с определенным контекстом, когда аргументы уже представлены в виде массива (или подобного массиву объекта).

Основные различия

- bind возвращает новую функцию, в то время как call и apply немедленно вызывают функцию.
- call требует перечисления аргументов индивидуально, тогда как apply принимает массив аргументов.

#обучающийПост #JavaScript #this
👍13👨‍💻3
Всем привет, мне интересно чьи видео вам более понятны и больше заходят? (Можно несколько)
Anonymous Poll
32%
Владилен Минин
63%
UlbiTV
18%
Bogdan Stashchuk
19%
IT-Kamasutra(Димыч)
7%
RED Group
24%
Archakov Blog
11%
Другое
Оверинжениринг

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

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

Оверинжениринг может привести к тому, что программа станет трудной в поддержке и понимании, а также замедлит процесс разработки, потому что команде приходится работать с чрезмерно усложненным кодом. Это как если бы ты построил лабиринт вместо прямой дороги – людям будет сложнее его пройти.
👍10🔥4
Каким будет вывод этого фрагмента кода?
Anonymous Quiz
34%
start, end, 1, 2
10%
start, end, 2, 1
22%
start, 1, 2, end
34%
start , 1 , end, 2
🔥6👍3👨‍💻1
Приступил к написанию сценария для видеокурса по HTML. Хочу сделать супер понятное видео, которое облегчит понимание логики и основ создания веб приложений.

Постараюсь в видео грамотно донести мысль, чтобы после просмотра, новичок сразу начал верстать и практиковаться. Будет ПОЛНЫЙ курс, без воды, с моим видением и советами.

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

Если мы не можем на что-то повлиять то нужно отпустить ситуацию чтобы не загнать себя. Просто плыть по течению.

Хотел устроится на работу до ноября и не получилось?
- Ничего страшного, значит у тебя есть время закрыть пробелы и улучшить навыки.

Хотел устроится в большую компанию, но получилось только в аутсорсинг с 30к зп?
- Это возможность вырасти, получить опыт.

Хотел запустить свой сервис до октября, но не запустил?
- У тебя есть шанс доработать его, улучшить, добавить что-то новое

Ищите во всем плюсы, главное идти дальше, делать хоть что-то и не стоять на месте. Каждый ваш шаг дает вам сотню новых возможностей и вариантов действий.

Мне понравилась цитата из одной книги:

"Продвигайтесь вперед шаг за шагом, сохраняйте гибкость и будьте готовы к переменам. Возможно, вы не придёте к изначальной цели, зато придете к чему-то гораздо лучшему."
👍14👌2👨‍💻1
Каким будет вывод этого фрагмента кода?
Anonymous Quiz
49%
start, 1, 3, end, 2
11%
&start, 1, end, 2, 3
16%
start, end, 1, 2, 3
24%
start, end, 1, 3, 2