Руслан Куянец | Reactify – Telegram
Руслан Куянец | Reactify
5.85K 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 Router и создал отдельную страницу для новостей. К сожалению, не успел их смонтировать.😢

Завтра я отправляюсь в Архыз, кататься на сноуборде. Я взял выходной на работе, чтобы насладиться горами в выходные.🏂

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

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

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

Надеюсь на ваше понимание и поддержку.🤝

С марта планирую ежемесячно проводить розыгрыш недельного менторства, который включает индивидуальное обучение в нашем чате и персональные созвоны. Уверен, это будет полезно.
👍94🔥2🤝2
This media is not supported in your browser
VIEW IN TELEGRAM
🔥25👍5🎉5
This media is not supported in your browser
VIEW IN TELEGRAM
Передаю привет🤚🏻

Как обычно на горнолыжных курортах ужасный интернет и Wi-Fi. По максимуму ограниченно использование соц сетей. Даже знаете, не привычно, дискомфортно.

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

«Чем меньше новых нейронных связей создаётся, тем сложнее человеку запоминать новую информацию.»
🔥14👍3💯2😁1🤝1
Всем привет 👋

Хорошо покатался на выходных, но к сожалению, где-то отравился. Ночь была не из приятных😢

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

Ещё 6 часов на машине ехать😢

Вообще, для себя понял, что я сильно привязан к ноутбуку. Отдых с плохим интернетом становится проблемой. Много дел всегда. Хотяб вечер необходимо уделять проектам, работе, каналам и ученикам.

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

Всем хороших выходных ✌️
👍7😢4👏1🤣1😨1
Исследование Работа.ру: большинство россиянок интересуют сотрудники сферы IT

«52 процента опрошенных женщин собираются найти женихов в сфере IT, 47 — в нефтегазовой отрасли. 37 процентов жительниц России считают, что самые интересные мужчины работают в банковской и финансовой области»

Если нужна жена, то вам точно в IT.😅
👍3😁3🤣3
Составные компоненты

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

Основные части:
Родительский компонент (контейнер): Управляет состоянием и координирует взаимодействие между дочерними компонентами.

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

Преимущества:
Модульность: Улучшает переиспользование кода за счет разделения интерфейса на мелкие компоненты.

Гибкость: Дает возможность настраивать поведение и внешний вид компонентов через пропсы.

Облегчение поддержки: Упрощает обновление и поддержку кода благодаря централизованному управлению состоянием.

#react #patterns
👍6🔥2🎉1👌1
Удаленная работа

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

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

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

Работая из дома, я значительно экономлю время, которое раньше тратилось на дорогу до офиса и обратно. Это время теперь можно посвятить отдыху, семье или любым другим делам.
🔥16👍6👌1🥴1
Геттеры пропсов

Подход "геттеры пропсов" (Props Getters) в React — это шаблон проектирования, используемый для создания более гибких и переиспользуемых компонентов. Он позволяет библиотекам и компонентам предоставлять пользователю API для управления поведением компонента с помощью получения свойств (props), которые затем могут быть изменены или объединены перед передачей дочернему компоненту.

В основе этого паттерна лежит функция, которая возвращает объект свойств (props), который затем может быть передан дочернему компоненту. Эта функция может принимать аргументы, позволяющие пользователю указывать, какие именно свойства должны быть изменены или добавлены.

Преимущества
Гибкость: Пользователи компонента могут изменять и добавлять пропсы, не переписывая основную логику компонента.

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

Управление состоянием: Упрощает управление состоянием вложенных компонентов, предоставляя централизованный способ для их настройки.

Недостатки
Сложность: Может увеличить сложность кода, особенно если используется в больших и сложных компонентах.

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

#react #patterns
👍6👌2🔥1
Умные и глупые компоненты

В разработке на React, "умные" компоненты управляют состоянием и логикой, в то время как "глупые" компоненты отвечают за отображение UI и принимают данные через props.

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

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

Использование этих подходов позволяет разделить ответственность в приложении: умные компоненты для управления данными и логикой, глупые — для UI. Это упрощает тестирование, поддержку и масштабирование приложений, позволяя вносить изменения в логику или внешний вид независимо друг от друга.

#react
👍7🔥2👌2
Функциональное программирование

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

В отличие от императивного программирования, где выражается последовательность команд для изменения состояния программы, ФП сосредотачивается на описании желаемого результата.

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

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

Чистые функции:
JavaScript позволяет создавать чистые функции, не изменяющие внешние переменные и возвращающие одинаковый результат при одинаковых входных данных.

Функции высшего порядка:
JS поддерживает функции высшего порядка, позволяя функциям принимать другие функции в качестве аргументов или возвращать их. Это позволяет создавать гибкие и мощные абстракции.

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

Неизменяемость:
Хотя JS по умолчанию не обеспечивает полную неизменяемость данных, существуют практики и библиотеки, позволяющие работать с данными в неизменяемом стиле.

Встроенные функции для работы с коллекциями:
Методы map, filter и reduce объекта Array являются примерами встроенных функциональных утилит, которые облегчают применение функциональных парадигм для обработки коллекций данных без изменения исходных данных.

#JavaScript
👍5🔥2💯2🎉1
Event Loop

Это достаточно сложная тема в JavaScript. Нужно действительно понять логику. Есть полезный сайт, на котором можно визуально посмотреть, как он работает.

https://www.jsv9000.app/

Можете вставить такой код и посмотреть, на работу. Весьма наглядно.


const promise = new Promise((resolve, reject) => {
console.log(1);
setTimeout(() => {
console.log("timerStart");
resolve("success");
console.log("timerEnd");
}, 0);
console.log(2);
});

promise.then((res) => {
console.log(res);
});

console.log(4);


Еще одно из самых понятных видео есть у Ulbi TV.

https://www.youtube.com/watch?v=zDlg64fsQow
🔥8👍4👌2
PostCSS

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

Ключевые особенности:

Модульность: выбор только тех плагинов, которые нужны для проекта.
Поддержка будущих CSS стандартов: использование новых CSS возможностей сегодня.
Автоматизация: автопрефиксер, минификация CSS и другие оптимизации.
Улучшенный синтаксис: переменные, вложенности, подобно Sass и Less.

https://postcss.org/

#css #web #postcss
👍9👌3🔥2
YeaHub Опрос

Всем привет, буду благодарен если вы пройдете небольшой опрос с вариантами ответов. Это поможет нам в разработке платформы. Займет менее 5 минут👌

https://forms.gle/JtxKyFKbQKrEmDVg6
👌4👍3🔥1
YeaHub Новости

Мы в процессе настройки Frontend нашего приложения. Пока ждем дизайн, без дела не сидим. Также настроили UI Kit репозиторий.

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

Backend уже активно разрабатываем. Скоро появится авторизация и некоторые CRUD операции по добавлению Этапов проверки, Вопросов, Профессий и т.д.

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

Скоро приступим к разработке интерфейса.

https://github.com/YeaHubTeam/yeahub-web-client
https://github.com/YeaHubTeam/yeahub-ui-kit
https://github.com/YeaHubTeam/yeahub-backend

#yeahub
👍6🔥2🫡2
Babel

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

Преимущества Babel:

Совместимость: Позволяет использовать новые функции JavaScript, не беспокоясь о поддержке старых браузеров.

Эффективность: С помощью плагинов и пресетов автоматизирует оптимизацию кода, ускоряя разработку.

Интеграция в проект:

Интеграция начинается с установки через npm или yarn, включая babel-core и babel/preset-env. Конфигурация производится через файл .babelrc или babel.config.js, где указываются нужные пресеты и плагины.

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

#babel #JavaScript
👍6👌2🔥1
Реализация функции filter в JavaScript

Когда на собеседованиях задают задачу реализовать какой-либо существующий метод JavaScript, цель состоит не только в том, чтобы проверить ваши знания языка, но и в том, чтобы увидеть, насколько хорошо вы понимаете механизм работы методов изнутри. Рассмотрим такой пример на методе filter.

Метод filter является стандартным методом массивов в JavaScript, который используется для фильтрации элементов массива по определенному критерию. Он делает это, применяя функцию обратного вызова (callback) к каждому элементу исходного массива и создавая новый массив из элементов, для которых функция обратного вызова возвращает true.

Основные принципы работы метода filter:

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

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

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

#JavaScript #собеседование #filter #array
👍9🔥2👌1
Всем привет, нужно еще немного ответов🥺

Пройдите пожалуйста опрос. Очень важно знать. Опрос быстрый, всего 11 вопросов, не надо отвечать развернуто, там есть варианты ответа. Спасибо за помощь 👌


https://forms.gle/JtxKyFKbQKrEmDVg6
4🔥1🥴1🤝1