Метод splice в JavaScript

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

Удаление

splice(start, deleteCount) - удалим элементы начиная с индекса start и количество deleteCount

Добавление

splice(start, 0, item1, ..., itemN) - добавляет элементы (item1, ..., itemN) в массив, начиная с индекса start, без удаления существующих.

Изменение

splice(start, deleteCount, item1, ..., itemN) - заменяет deleteCount элементов в массиве, начиная с индекса start, на новые элементы (item1, ..., itemN).

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

HTML с 0 до Профи. Полный курс + Практика

На YouTube канале вышло новое видео. В этом курсе понятно разобраны все темы HTML. Курс подойдет не только для новичков, он остается актуальным для всех уровней.

Полезно вспомнить все. Мне нравится такая цитата:

"Лучший способ научиться чему-то - научить других. Второй лучший способ научиться чему-то - сделать это самому."

От вас жду поддержку видео😌

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

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

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

Бесплатные 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, в том числе из этого списка.

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

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

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

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

#teams

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#job #work #story

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

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

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

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

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

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

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

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

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

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

#story

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#academy

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

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

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

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

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

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

#teams