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

Наличие свойства в объекте

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

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

const product = {
    title: 'iPhone 15 Pro',
    price: 900,
    rate: 5
}

Вот способы проверить наличие свойств:

'title' in product // true
'currency' in product // false

product.hasOwnProperty('title') // true
product.hasOwnProperty('currency') // false

product['title'] //  iPhone 15 Pro
product['currency'] // undefined

#JavaScript #object

Под конец года ОЧЕНЬ много дел. Запускаю платформу, запускаю свое другое приложение, проект на работе. Тяжко конечно😅

Но ничего, скоро Новый год! Елку сегодня нарядили. На выходных решил отдохнуть (жить тоже нужно) поеду в Домбай кататься на сноуборде🏂

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

Курс потихоньку заполняю, выходит неплохо. К сожалению нормального встроенного редактора кода для платформы нет. А так хотелось как в htmlacademy крутые тренажеры😢

Но вообще это даже к лучшему, выполнять задания и писать код НУЖНО у себя локально, в рабочем редакторе кода, настраивать проект самостоятельно, запускать проект и дебажить код.

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

В общем продумаю и сделаю все в лучшем виде😎

#academy

Reactify Teams - Работа в командах

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

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

Хочу так же привлечь новичков из других профессий: Backend Разработчиков, UI/UX Дизайнеров, Тестировщиков. Было бы действительно круто.

Даже пост уже написал для поиска😅

"Сообщество Reactify ищет друзей среди Дизайнеров и Backend Разработчиков чтобы вместе учиться! Мы с начинающими Frontend Разработчиками собираемся в команды для создания интересных проектов. У вас есть возможность создать дизайн/backend для приложения, работать в команде и получать бесценный опыт."

#teams

Хочу рассказать вам про платформу Reactify Academy

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

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

На платформе предусмотрено множество функций:

1. Геймификация: Уровни, рейтинг и звания. Создание наград и значков за прохождение курсов и участие в событиях. Шкала прогресса.

2. События: Различные мероприятия, такие как задача недели или курс недели, где участники могут зарабатывать баллы. Таблица лидеров и соревнования

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

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

5. Конференции: Любой участник сообщества может выступить на мини-конференции, обсуждая разнообразные темы, от HTML, CSS, React до поиска работы.

6. Собеседования: В рамках плагина конференций буду проводить собеседования для желающих.

Мы уже сформировали большое сообщество (почти 1000 человек), и важно, чтобы процесс обучения приносил удовольствие. Я здесь, чтобы помочь вам в этом.

Я надеюсь, что платформа Reactify Academy станет началом успешного пути для многих разработчиков.

#academy

Кстати, подарили микрофон. С нового года приступаю к съёмкам курса по CSS.

Курс по HTML в процессе добавления на платформу. 👌🏻

Рост разработчика

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

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

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

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

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

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

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

С наступающим Новым годом!🎄🎉

Параметры по умолчанию в JavaScript

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

- Код становится более читаемым и понятным.
- Избавляет от лишних проверок a = a || 0.

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

Поделюсь решением за деньги

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

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

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

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

Как вы думаете, правильно ли поступает этот разработчик? Или его следует вычислить по IP-адресу?

#story

Объектные обертки

В JavaScript, объектные обертки (Wrapper Objects) используются для предоставления объектного представления примитивным типам данных, таким как строки (String), числа (Number) и булевы значения (Boolean). Эти обертки позволяют примитивам обладать свойствами и методами объектов, улучшая их функциональность.

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

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

На той неделе начал переносить MVP проект SVG Editor в рабочее приложение админ панель.

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

Теперь самая интересная часть - внедрение этого функционала в приложение. SVG Editor - это отдельный редактор для дизайнеров в админ панели. Он будет открываться на новой странице и иметь обширный функционал. Грубо говоря - мини Figma.

Разумеется MVP был реализована как черновик, очень грязно, много лишнего, совсем нет типизации. Мне нравятся слова в книге "Чистый код" Роберта Мартина:

'Сначала ты делаешь черновик и потом причесываешь его до того состояния, в котором тебе было бы приятно его читать'

Настал момент 'причесывания' кода. Я пишу так чисто, типизирую все, продумываю каждое наименование. От этого самому приятно. Раскладываю код по полочкам, улучшаю то, что написал ранее. Применяю те знания, которые получил из книг и статей, пока делал это приложение👌

#job #work #story

Создание HTML-разметки в JavaScript

До появления современных фреймворков и библиотек, таких как React, Angular, или Vue.js, процесс создания интерактивных веб-интерфейсов и шаблонов во многом опирался на ручное управление DOM в JavaScript.

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

#обучающийПост #JavaScript #DOM #html

📹 YouTube - 2.000

👩‍💻 TypeScript Видео - 10.500

🚀 Reactify Academy - СКОРО

🖥 Reactify Teams - СКОРО

Всем спасибо! 🎉

MFGA 😎
Make Frontend Great Again

Сегодня вечером приступаю к установке своей платформы для обучения на сервер. Куплю домен, настрою.

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

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

Reactify Academy 🚀

UPD: купил домен, чтобы не заняли reactify.ru 💡 (тут пока пусто)

#academy

Реализуйте функцию map в JavaScript

Когда на собеседованиях просят реализовать какой-либо существующий метод JavaScript, это не только проверка ваших знаний языка, но и способ увидеть, насколько хорошо вы понимаете, как методы работают «под капотом». Давайте рассмотрим такой пример на методе map.

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

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

#JavaScript #собеседование #map #array

Цель до конца этого года — собрать от 1200 до 1500 единомышленников на этом канале и 3000 на моем YouTube канале. Возможно не успею, но попробовать стоит.

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

В следующем году я хочу попробовать это. Реализовать совместные проекты. Воплощать идеи в реальность. Собирать людей вместе, создавать вместе, работать в команде. Некие open source проекты.

Как вам идея? Хотели бы поучаствовать?

#teams

Бесплатные API для практики Frontend разработчика

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

OpenWeatherMap API:
Предоставляет данные о погоде, включая прогнозы и текущие условия.
Идеален для погодных приложений и виджетов.

JSONPlaceholder API:
Бесплатный API для получения фиктивных данных, таких как пользователи и комментарии.
Отлично подходит для тестирования и прототипирования.

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

CoinGecko API:
Данные о криптовалютах, включая цены и рыночную капитализацию.
Идеален для трекеров криптовалют и аналитических платформ.

Finnhub API:
Обширные финансовые данные, включая акции и криптовалюты.
Отлично подходит для финансовых приложений и платформ для торговли.

The Movie Database (TMDb) API:
Информация о фильмах и ТВ-шоу, включая рейтинги и обзоры.
Подходит для киноприложений и сайтов с обзорами.

eBay API:
Доступ к торгам eBay, включая поиск товаров и управление заказами.
Идеален для интеграции с приложениями электронной коммерции.

У меня в https://github.com/MirgradR во многих проектах используются API, в том числе из этого списка.

Методы взаимодействия с вкладками браузера и синхронизации между ними

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

Local Storage:

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

Если мы поменяем тему в одной вкладке то она поменяется и в другой

 localStorage.setItem('theme', 'dark'); 

Broadcast Channel API:

Оповещение всех вкладок о событиях, например, о выходе пользователя из системы.

Отправка сообщения 'logout' через канал и все вкладки, подписанные на этот канал, получают уведомление.

 const channel = new BroadcastChannel('user_channel'); channel.postMessage('logout'); 

Window.postMessage():

Безопасный обмен данными между вкладками.

Вкладка отправляет сообщение другой вкладке, которая принимает и обрабатывает это сообщение.

 window.opener.postMessage('Hello', '*'); 

События фокуса и блюра:

Отслеживание активности вкладок для управления контентом.

Пауза видео при потере фокуса вкладкой и возобновление воспроизведения при возврате фокуса

 window.addEventListener('blur', pauseVideo);
window.addEventListener('focus', playVideo); 

Visibility API:

Управление активностью вкладки в зависимости от ее видимости.

Приостановка обновлений на вкладке, когда она не видна

 document.addEventListener('visibilitychange', handleVisibilityChange); 

Shared Worker:

Совместное использование ресурсов и синхронизация действий между вкладками.

Обмен данными о новых сообщениях в чате через общего воркера

 new SharedWorker('worker.js'); 

#обучающийПост #JavaScript #browser #event

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