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