iFrame в HTML

Это элемент с помощью которого мы можем встраивать на веб страницу другую веб страницу😅

Например, я разрабатываю плагин для Figma. Figma мне предоставляет доступ к своему приложению с помощью iFrame. Ты можешь разрабатывать приложение в приложении. У этого приложения свой body, noscript, head. Единственное такие приложения ограниченны для безопасности, чтобы разработчик не мог залезть в 'родительское приложение'.

Так же на наш сайт мы можем встраивать карты Google, другие сайты, YouTube видео.

1️⃣ С помощью атрибута src можно указать URL, который будет загружен в <iframe>.
2️⃣ Атрибуты width и height позволяют задать размеры <iframe>, обычно указываемые в пикселях или процентах.
3️⃣ Атрибут allowfullscreen позволяет <iframe> переходить в полноэкранный режим

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

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

Сам много чего узнал😅 Много всего появилось с того момента как я изучил HTML.

Видео без воды, динамичное, с примерами и логикой использования. Поймет даже ребенок. Тут все что есть в HTML. Сделано по доке, статьям, еще доке.

Освежите память, узнайте новое, закрепите старое.

Осталось немного...

Съемки и монтаж видеокурса по HTML завершены. Видео идёт 1 час 50 минут.

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

Сильно намучался. Мои компы не тянут видеоредакторы😅, очень много материалов, слайдов, аудио и видео. Я монтировал, сшивал все по частям для качества.

В понедельник выйдет в YouTube. Рассчитываю на вашу поддержку.

Видео по TypeScript уже почти 10.000 просмотров. Надеюсь видео по HTML наберёт не меньше. 🍀

Метод 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

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

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

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

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