Руслан Куянец | 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
Как проверить, является ли число конечным?

В JavaScript для проверки того, является ли число конечным, можно использовать встроенную функцию Number.isFinite(). Эта функция возвращает true, если переданное ей значение является конечным числом, и false в противном случае.

const num1 = 100;
console.log(Number.isFinite(num1));
// Выведет true, потому что 100 - это конечное число

const num2 = Infinity;
console.log(Number.isFinite(num2));
// Выведет false, потому что Infinity - это не конечное число

const num3 = NaN;
console.log(Number.isFinite(num3));
// Выведет false, потому что NaN - это не число

const num4 = "100";
console.log(Number.isFinite(num4));
// Выведет false, потому что "100" - это строка


#обучающийПост #JavaScript #number
👍6
Недавно посмотрел видео Димыча. Он очень понятно объясняет технические темы. Видео про архитектуру бэкенд приложений. В целом дает базовое понимание как все устроенно. Полезно знать даже если вы не бэкендер

https://www.youtube.com/live/B5ha6ips8hE?si=BEDUlQTBVlSZYG9l
🔥5
Блочная модель CSS

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

1. Содержимое (Content): Это основная часть блока, где располагается текст, изображения или другие элементы.

2. Внутренние отступы (Padding): Расстояние между содержимым и границей элемента. Padding увеличивает размер элемента, но остается частью элемента, что означает, что фоновый цвет или изображение элемента будет распространяться на область внутренних отступов.

3. Граница (Border): Обрамляет содержимое и внутренние отступы. Граница является важной частью визуального представления элемента и может быть стилизована различными способами.

4. Внешние отступы (Margin): Пространство вокруг элемента, отделяющее его от других элементов. Внешние отступы не влияют на размер самого элемента, но определяют расстояние между элементами.

Все части блока, кроме внешних отступов (margin), включаются в общую ширину и высоту элемента в CSS.

#обучающийПост #css #block
👍5
Изучаем CSS

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

Вот пример для изучения отдельных тем в CSS:

1. Flexbox
https://flexboxfroggy.com/#ru

2. Grid
https://cssgridgarden.com/

#css #flexbox #grid #study #free #game
👍5🔥5
Задачи по JavaScript

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

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

Основы арифметических операций, создание функций, возврат значений.

2. Написать функцию, которой передаем, имя, фамилия и возраст, и получаем строку "Привет Иван Петров с возрастом 17 лет".

Работа со строками, конкатенация строк, использование параметров в функциях.

3. Написать функцию, которая принимает пол человека ('M','F') в виде строки, результат функции возвращает строку "Ваш пол мужской" (или женский) или же "Ваш пол не опеределен".

Условные операторы, сравнение строк.

4. Сделайте функцию, которая принимает параметром число от 1 до 7, а возвращает день недели на русском языке.

Массивы, условные операторы, работа с индексами массивов.

5. Написать функцию, которая принимает строку (в этом тексте 3-5 предложений), верните каждое первое слово в каждом предложении, через запятую.

Работа со строками, методы split и join, циклы, массивы.

6. Написать функцию, которой передаем имя, и она возраващает приветствие в зависимости от времени суток (Доброе утро\день\вечер\ночи Иван).

Работа с датами и временем, условные операторы, динамическое формирование строк.

7. Создай новую функцию, в которую передаешь имя и возраст человека и получаешь сообщение (Иван имеет возраст 44 и он зрелый). А также вызови внутри своей функции, функцию из прошлого задания.

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

#JavaScript
👍81
Существует множество сайтов с огромным количеством задач, разбитых по группам, сложности. На этих сайтах можно решать задачи онлайн в удобном редакторе кода и сразу же проверять решение.

Вот два достаточно популярных:

https://www.codewars.com/
https://leetcode.com/

Мне больше нравится codewars 👍
🔥6
Смысл легких задач - закрепление основ языка программирования. Ведь решая их мы используем различные методы строк, массивов, работаем с условными операторами и циклами.

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

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

"Программирование – это марафон, а не спринт, и каждый шаг вперед, даже самый маленький, ведет к прогрессу." - Конфуций
😁7
Жиза😅
😁13
Интернет

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

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

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

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

Протоколы: Протоколы, такие как TCP/IP, определяют, как данные передаются и получаются. Они работают как правила, обеспечивающие стандартизированную и эффективную коммуникацию между устройствами.

Сервисы: Интернет предлагает различные сервисы, такие как Всемирная паутина (WWW), электронная почта, передача файлов (FTP), видеозвонки и многие другие.

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

Приложения: С развитием интернета появилось множество приложений, от простых веб-страниц до сложных облачных вычислений и искусственного интеллекта.
👍5
Что такое :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, Typenoscript
* Интеграция Frontend с Backend
* Создание мини библиотек и пере используемых компонент
* Разработка нового функционала

Достижения:

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

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

Разработка приложения по подбору персонала
(Frontend: React, Typenoscript, 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