Мое увольнение

Это была моя первая официальная работа. Классный офис, зона отдыха с большой плазмой, YouTube, PS4. Чай, кофе, снеки, фрукты, конфеты, печенье - всё, как на картинках из крутых офисов Яндекса и Google.

Мы отмечали каждый праздник: компания дарила нам подарки, заказывала доставку еды. По пятницам мы оставались в офисе, играли в настольные игры или смотрели фильмы. Для нас заказывали кучу пицц и роллов. Каждый четверг проводились мероприятия - викторины, командные игры, а также "технические четверги", где кто-то выступал с презентацией на техническую тему. Я выступил с темой ООП.

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

Мой первый корпоратив в этой компании прошёл в прикольном кафе с банкетом, ведущим, танцами и конкурсами.

Но был и обратный момент: первый месяц я работал без зарплаты. Второй месяц моя зарплата составила 10 тысяч рублей, третий - 15 тысяч, а последующие месяцы - 25 тысяч. Я быстро рос профессионально, выполнял все задачи и даже работал дома. В пути на работу и обратно я читал книги и документацию.

Когда я попросил о повышении зарплаты, мне отказали, обещая повышение на 10 тысяч только через месяц. Я сказал, что подумаю. Конечно, я мог согласится и пока не нашел новую работу получать зарплату. Но я так не мог. В четверг я сказал что увольняюсь и начал искать работу. Мне нужно было доработать до понедельника. За выходные я сделал 4 технических задания и меня пригласили на 4 собеседования. В понедельник после последнего дня я прошел 2 собеседования и получил два оффера. Остальные проходить не стал. Выбрал компанию где больше понравилось. Работаю в ней до сих пор. Зарплату предложили почти в 3 раза больше чем было.

Продолжение следует...

#story_1

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