Руслан Куянец | Reactify

Подборка библиотек для вашего приложения

1️⃣ react-advanced-cropper: Инструмент для обрезки изображений с настраиваемыми параметрами и интерактивным интерфейсом.

2️⃣ react-calendar: Компонент календаря для выбора дат, предоставляющий легкую интеграцию в формы и интерфейсы.

3️⃣ dayjs: Легковесная библиотека для обработки и форматирования дат, предлагающая простой и интуитивно понятный API.

4️⃣ three: Библиотека для создания 3D-графики, используемая с React через обертки, такие как react-three-fiber, для визуализации 3D-сцен.

5️⃣ swiper: Слайдер с широким спектром настроек для создания динамических и адаптивных слайд-шоу.

#libs

Вот о чем подумал

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

Реально, Магнит, Леруа, Хендерсон, Спортмастер, Лента, Метро, О'Кей, Лукойл, Газпром, Пятерочка — все создают приложения для того, чтобы учитывать бонусы, предлагать акции, делать рассылки, организовывать доставку товаров. Даже у различных кофеен и ресторанов есть свои приложения.

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

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

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

Использование буфера обмена в JavaScript и React

Буфер обмена — это временное хранилище для данных, которые пользователи копируют (Ctrl+C) или вырезают (Ctrl+X), чтобы вставить (Ctrl+V) их в другом месте. JavaScript предоставляет несколько способов взаимодействия с буфером обмена, что особенно полезно в веб-приложениях.

Для доступа к буферу обмена мы используем Clipboard API

#обучающийПост #JavaScript #react #clipboard

Множественные асинхронные запросы

Бывают случаи когда вам необходимо сделать много разных запросов на сервер и получить данные. Есть разные варианты для реализации этого:

Использование Async/Await:
- Последовательное выполнение запросов.
- Каждый запрос выполняется один за другим.
- Полезно, когда второй запрос зависит от результата первого.

Использование Promise.all:
- Параллельное выполнение всех запросов.
- Оптимально для независимых запросов, когда порядок не важен.
- Если один из промисов отклоняется, весь Promise.all отклоняется.

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

Использование Цикла For...Of с Async/Await:
-Последовательное выполнение запросов для каждого элемента в массиве.
-Подходит для сценариев, где требуется обрабатывать элементы массива по очереди.

#JavaScript #обучающийПост #promise #async

Тем временем🚀

Видео по TypeScript уже 7300 просмотров

Подписчиков на канале 1664

Уже монтирую видеокурс по html ✌️
Пока что все получается отлично. Очень хорошо проработал сценарий и текст, чтобы новички все поняли, но и ребята по старше не заскучали😅

Самый подробный курс будет, при этом минимум воды, имхо.

Задержка в коде

Иногда в процессе программирования возникает необходимость внести паузу в выполнение кода. Часто для этого используется setTimeout, но при множественном использовании это может стать довольно громоздким и менее удобным. К тому же, оборачивание логики в setTimeout не всегда идеально сочетается с асинхронными операциями и обещаниями (promises).

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

Представим, что у нас есть кнопка, при нажатии на которую текст копируется в буфер обмена. Чтобы явно показать пользователю, что действие выполнено, мы временно меняем текст на кнопке на "Успешно!". Это важно, так как без визуального подтверждения пользователь может не понять, что текст успешно скопирован. Однако, мы также хотим дать понять, что можно совершить действие снова. Для этого через несколько секунд мы возвращаем текст кнопки к исходному состоянию "Копировать".

#react #JavaScript #sleep #setTimeout #code

Кастомные React Hooks

Одна из главных концепций React - это хуки. Когда начинающие изучают хуки, у них может возникнуть вопрос: а зачем вообще нужны кастомные хуки? Использовать встроенные хуки, такие как useState или useEffect, действительно удобно и понятно. Но когда дело доходит до создания собственных хуков, может возникнуть некоторая путаница.

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

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

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

#react #обучающийПост #hook

Всем привет! Совсем недавно открыл для себя перевод видео с иностранного языка от Яндекса. Ты открываешь любое видео на иностранном языке в YouTube и смотришь его на русском языке.

Где смотреть? Вот небольшая инструкция:

1. Откройте Яндекс Браузер.
Перевод видео работает только в Яндекс Браузере и в приложении Яндекс.

2. Запустите иностранное видео в поиске Яндекса, в Яндекс Видео, на YouTube, Vimeo, VK или на платформе Coursera.

3. Нажмите на кнопку перевода. Это может занять несколько минут: Браузер сообщит, когда будет готово.

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

Теперь вам не нужно смотреть русских блогеров которые копируют контент иностранных, можно ведь смотреть напрямую😅

https://yandex.ru/project/browser/streams/technology

Я завершаю сценарий для курса по HTML и завтра после работы начну съемки и монтаж. На работу над этим видео уйдет вся неделя.

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

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

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

Я стараюсь не копировать тексты, а собираю информацию с различных ресурсов и формирую материалы на основе собственного опыта.

Так что ждите анонсов! Вы первые протестируете платформу!

Вы подходите по навыкам

На HH система рекомендаций становится все лучше благодаря усилиям разработчиков. Это отличный инструмент для ускорения процесса подбора кандидатов или поиска подходящей компании.

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

Как это можно использовать в свою пользу?

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

#job #resume

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

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

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

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

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

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

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

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

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

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