Руслан Куянец | Reactify – Telegram
Руслан Куянец | Reactify
5.85K subscribers
705 photos
52 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
Ближайшие дни контента не будет. Всем отличных выходных! Отдыхать тоже нужно иногда💪🏻
Сегодня стал мужем✌️
🔥25👍5
Всем привет! Завтра выхожу из отпуска. На выходных ездили с женой в классный отель Movenpick Resort & SPA Anapa.

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

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

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

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

Все эти возможности должны мотивировать вас, как и меня. А если вы ещё и влюбитесь в это дело, то действительно, вы не будете работать в своей жизни ни дня.

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

P.S На фото я в холле отеля после завтрака записываю идеи для YouTube и телеги
💯131
Еще хочу с октября начать новый "Сериал" создавать на чистом js css html приложение, как React Новости. Развивать его, писать всю ту же функциональность и логику но на чистом js.

Так вот, нам нужно выбрать какое приложение мы будем создавать😃

Пишите в комменты свои идеи, я тоже буду накидывать.

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

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

Мы - не все. Мы - лучше. Будем с вами параллельно изучению технологий React, Redux, TS, Router (которые нужны для работы) углублять знания и навыки по чистому js. Создавать приложения, как когда то создавали наши коллеги - без готовых инструментов.
4
https://youtu.be/am_UiIvha5M?si=AgHZITfRhoPLJCPc

Мой курс по React сегодня перешагнул за 1000 просмотров. Кто смотрел? Что я упустил? Все ли понятно было? Я впервые такое длинное видео делал со сценарием. Тяжело было записывать, много информации держал в голове, чтобы все учесть и в нужный момент рассказать
👍8
🗺Условные операторы и структуры управления потоком в программировании

Давайте представим, что ваши программируемые инструкции — это навигационные указания, а вы стоите на перекрёстке, выбирая, куда пойти.

1️⃣If-Else
If-else — это как знакомый вам проводник, который подходит к вам и говорит: "Если на улице идёт дождь, то возьмите зонт. В противном случае, если идет снег, наденьте теплую куртку. Иначе просто идите так, как вы одеты сейчас". То есть, этот проводник помогает вам сделать выбор, основываясь на различных условиях, одно за другим.

2️⃣Switch
Теперь переходим к switch. Представьте, что у вас есть большая панель с кнопками, и на каждой кнопке написаны различные метки (case 1, case 2 и так далее). Вы просто ищете нужную метку и нажимаете на соответствующую кнопку, чтобы получить инструкции для этого конкретного случая. Это немного быстрее и организованнее, особенно когда у вас есть много меток, потому что вы можете прямо перейти к нужной, минуя другие.

3️⃣Объектные Литералы
Наконец, объектные литералы можно представить как умный телефон с приложением для навигации. Вам просто нужно ввести свой запрос, и приложение мгновенно предоставит вам правильные указания, без необходимости проверки каждого возможного маршрута или условия. Это потому, что все возможные маршруты уже заранее загружены в приложение, что позволяет быстро и прямо переходить к нужной инструкции.

👍If-else хорош для простых, последовательных проверок условий.

💡Switch делает код чуть более структурированным и удобным для большого количества условий, но всё же требует последовательного просмотра.

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

#ОбучающийПост #JavaScript #объектные_литералы
👍10
Помню давно я видел график, который сравнивал скорость выполнения условных операторов if-else, switch и объектных литералов при различном количестве кейсов. По этому графику, до 7 кейсов разница в производительности между switch и if-else была не существенной, но затем обе начинали показывать увеличение времени выполнения. При этом, рост у switch был менее выраженным по сравнению с if-else.

С другой стороны, объектные литералы в этом сравнении изначально шли немного медленнее, но после 7 кейсов их время выполнения оставалось стабильным, не зависимо от того, было ли там 7 или 100000 кейсов. Это делает их потенциально более предпочтительным выбором для ситуаций с большим количеством кейсов.

Я не смог найти его, поэтому нарисовал😃

#ОбучающийПост #JavaScript #объектные_литералы
👍81🔥1
Тут кстати автор упомянул про Дерево переходов, оптимизацию switch-case
Forwarded from Войти в IT
Часть 2

Сейчас же компилятор, когда видит switch использует либо дерево из условных переходов, либо использует таблицу переходов.
С другой стороны, при использовании конструкции switch-case не нужно забывать про особенности работы с ключевыми словами break и default.

Некоторые забывают, например, слово break и в результате имеют некорректное выполнение программы (выполняется не только нужный case, но и последующие, пока не встретится break)
Что еще хочу сказать. switch хорошо работает с константными целыми или перечисленными типами. В этом случае компилятор даже может подсказать, что есть проблема.
3
🛠 Switch-case действительно имеет оптимизацию.
Компилятор или интерпретатор используют Дерево переходов. Оно позволяет вам мгновенно перейти к правильному кейсу. Это значительно ускоряет процесс поиска, потому, что вы можете пропустить много ненужных кейсов.

Тем не менее, если количество кейсов растет, время на поиск правильного кейса тоже может увеличиваться, хотя, возможно, не так сильно, как с if-else

Что выбирать зависит от задачи.
Если у вас немного вариантов (1-3) то if else
Если у вас 4-7 то имеет место быть switch-case
Если вариантов, условий больше - 8, 9, 12, 20, то возможно ваш выбор это объектный литерал💪

Но опять же даже на 20-50 кейсов, вы сильной разницы не почувствуете, ведь это не значит что if else начнет дико тормозить. Но все мы стараемся по максимому оптимизировать наш код, сделать его чище, быстрее и понятнее.

Дальше расскажу про применение, покажу примеры
🔥61
1️⃣ Первый пример

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

#code #JavaScript #объектные_литералы
🫡1
2️⃣ Второй пример

Мы используем объектный литерал renderByPage, где каждому ключу соответствует функция, возвращающая соответствующий компонент JSX. Затем, вы динамически выбираете и возвращаете нужный компонент, обращаясь к свойству объекта с использованием переменной page.

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

И хотя обе части кода достигают одного и того же результата, первый способ (через объектный литерал) является более компактным и масштабируемым, особенно когда у вас есть много возможных страниц. Это также делает код более чистым и легким для чтения и поддержки, поскольку вы можете легко добавить или удалить страницы, просто изменяя объект renderByPage, не трогая логику выбора страницы.

#code #JavaScript #объектные_литералы
👍2
3️⃣ Третий пример

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

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

#code #JavaScript #объектные_литералы
👌1
🔍 Сравнение NaN и undefined

🔹 NaN — это специальное значение, которое представляет "не число". Оно возникает как результат некорректной математической операции. Важно отметить следующие особенности NaN:

Самый заметный "подводный камень" - NaN не равно самому себе. То есть, NaN === NaN вернет false.
Для проверки на NaN лучше использовать функцию isNaN().

🔹 undefined — это специальное значение, которое указывает на то, что переменная была объявлена, но не инициализирована значением.

🧐 Строгое сравнение (===)
При строгом сравнении, тип данных и значение обоих операндов должны быть идентичными.

NaN === NaN – вернет FALSE.
undefined === undefined – вернет TRUE.
NaN === undefined – вернет FALSE, так как NaN и undefined являются различными типами данных.

😃 Нестрогое сравнение (==)
Нестрогое сравнение сравнивает значения, но не учитывает типы данных, что может привести к некоторым неожиданным результатам.

NaN == NaN – вернет FALSE, так как NaN не равно ничему, даже самому себе.
undefined == undefined – вернет TRUE.
NaN == undefined – вернет FALSE, несмотря на то, что сравнение не строгое, NaN и undefined остаются неравными.

#JavaScript #NaN #undefined #ОбучающийПост
👍8
Завершил монтаж видео, о том, как составлять резюме, искать работу, что делать чтобы вас заметили, а так же советы по трудоустройству и развитию в целом. Планирую в пятницу выложить.

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

Постарался сделать это видео максимально полезным. Там около 15-18 советов. Все эти советы я сформулировал после встречи с представителями больших компаний, hr и рекрутерами. Они рассказали как происходит найм их глазами, на что они обращают внимание.

Уверен будет интересно и полезно👌🏻😌
🔥14👍3
Что будет выведено в консоль в следующем коде?

#quiz #JavaScript
Anonymous Quiz
27%
true, false, true
16%
true, true, true
41%
false, false, false
16%
true, false, false
Завтра ещё выложу видео продолжение React Новости.
Будет короткая серия с исправлениями.
Добавим слайдер для списка категорий. Будем листать категории стрелочками👌🏻
👍8
ООП (Объектно-ориентированное программирование) – это стиль программирования, в котором основное внимание уделяется объектам и классам, а не процедурам. В ООП объекты могут взаимодействовать друг с другом, имея свойства (характеристики) и методы (действия). Это помогает организовывать код более структурированно и гибко.

Принципы:

1️⃣Инкапсуляция: Это скрытие внутренних деталей объекта и предоставление ограниченного набора публичных методов для взаимодействия с этим объектом. Это помогает избегать нежелательного взаимодействия с внутренними частями объекта.

2️⃣Наследование: Это механизм, с помощью которого один класс может наследовать атрибуты и методы от другого класса. Это способствует повторному использованию кода и установлению отношений "есть" между объектами.

3️⃣Полиморфизм: Это возможность объектов с одинаковым интерфейсом иметь различное поведение. В ООП это чаще всего реализуется через переопределение методов в подклассах.

4️⃣Абстракция: Это процесс создания простых классов, которые определяют общую характеристику набора объектов. Это помогает сосредоточиться на том, что делает объект, а не как он это делает.

На сегодняшний день функциональное программирование намного популярнее ООП, как минимум в JavaScript/React и в других фреймворках.

ООП сложнее осваивать новичку, да и опытные разработчики не всегда хорошо пишут код ООП.

🌐 Зачем нам его изучать? Даже если вы не планируете полностью погружаться в мир ООП, его основные принципы можно эффективно применять и вне контекста объектно-ориентированного программирования, сделав ваш код более организованным и масштабируемым.

#JavaScript #обучающийПост #ООП
👍42
Поделюсь с вами данным YouTube каналом.
https://youtu.be/q2TyxOzBTdg?si=WBRO6e3q8XutPpbo

Это плейлист по ООП. В свое время, эти видео помогли мне понять концепции ООП. Автор объясняет это очень понятно, никто другой так не объяснил. Как минимум я не встречал таких видео.

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

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

Reactify рекомендует 👍

#JavaScript #advice #ООП
🔥7