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

🔹DOMContentLoaded

Событие DOMContentLoaded отмечает момент, когда весь HTML был полностью загружен и проанализирован, то есть DOM-дерево было полностью построено. Это не ожидает загрузки стилей, изображений или других зависимых ресурсов. Другими словами, это момент, когда основная структура страницы готова и можно начинать работать с DOM.

document.addEventListener('DOMContentLoaded', function() {
console.log('DOM fully loaded and parsed');
});

🔹Load Event

Событие load срабатывает позже, после того как весь контент страницы (включая скрипты, стили, изображения и другие внешние ресурсы) был полностью загружен. Это означает, что вся страница, со всеми своими ресурсами, полностью доступна для работы.

window.addEventListener('load', function() {
console.log('All resources finished loading');
});

Почему это важно?

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

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

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

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

Что делает строчка "use strict";?

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

Достоинства:

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

🟢Больше ошибок, а не странных поведений: Как если бы ваше авто предупреждало вас о том, что вы забыли закрыть дверь, вместо того чтобы просто позволить вам уехать с открытой дверью.

🟢Требование к уникальности имен параметров функции: Это как запрет на использование одинаковых имен для двух ваших домашних питомцев, чтобы избежать путаницы при вызове их.

Недостатки:

🔴Отказ от некоторых "удобных" функций: Это может быть как отказ от использования вашего любимого, но вредного для здоровья блюда.

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

🔴Проблемы с объединением кода: Если представить ваш проект как строительство дома, это может быть как попытка совместить новый, модный дизайн с устаревшими строительными материалами - они просто могут не подойти друг другу.

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

Сегодня выходит следующая серия! Мы будем рефакторить наше приложение, чистить код, добавлять HOC и кастомные хуки. На следующей неделе я наконец-то запишу видео о встрече с HR и рекрутерами. Расскажу вам, как выделиться среди других соискателей: о составлении резюме, откликах и многом другом.

В запасе осталась еще одна задача - изменение дизайна, чтобы было красиво на больших экранах, а то сейчас дизайн только для телефонов.

Потом возможно будет еще одна добивочная таска, немного изменим логику, будем так же пользоваться запросом latest-news и будем отображать их в баннерах. Разделим логику списка новостей и баннеров.

И после этого уже перейдем к другим задачам, первая из которых - TypeScript. Большинство проголосовало за то, чтобы мы переписали приложение на TS с JS. И это правильно.

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

Новое видео на канале. Еще много будет чистки кода. Когда добавим навигацию - изменим фильтрацию новостей. Добавим redux - вынесем все в отдельные компоненты виджеты. Добавим rtk-query - удалим кастомный фетч данных. Будем улучшать наш код постоянно и постепенно.

https://youtu.be/Yi1D_u2SU2w

Доброе утро ребята! Теперь я тысячник💪🏻😄

https://news-reactify.vercel.app/

Простой дизайн, но сейчас мне прям нравится. Теперь не только для мобильных телефонов😄

Записал два видео:
1) Изменил дизайн и отрефакторил, повыносил из мейн компоненты
2) Очистил мейн полностью🤩
Добавил эндпоинт latest-news и теперь баннеры и список новостей это разные блоки с разными новостями😎

Получилось очень круто, все гораздо чище. Читать одно удовольствие

Дальше по плану Typenoscript. Наверное нужно будет делить на две серии

Честно говоря я не пробовал vite проект переносить на ts. Но все возможно. Как раз получу опыт. Просто CRA я помню было муторно переписывать с js на ts. Разберемся

Всем привет. Снял видео на тему поиска работы, составления резюме и тд. С той встречи с hr и рекрутерами. Осталось смонтировать. Получилось около 15 советов👌🏻 Думаю что это видео будет полезно всем, особенно новичкам. Опубликую его через неделю📺

Как вам мой инфоцыганский уголок?

Обещаю, что выпускать платные курсы не буду🤔

Кто не пьёт - тот проиграл?🤔😂

Планирую в конце месяца начать записывать видео по JavaScript. Но тогда React Новости будут выходить не 2 раза в неделю, а один.

Буду стараться выпускать что-нибудь интересное, чтобы самому освежать память, улучшать понимание каких-то базовых вещей, основ.

Ведение блога - как один из способов улучшить свои знания. Ведь если можешь что-то объяснить другому, значит сам это понял😄

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

К сожалению если не используешь что-то в работе, то со временем забываешь это🙃

И это нормально.

https://youtu.be/2olzuyO1g8I

Новое видео. Добавили дизайн для широких экранов и почистили код! Приятного просмотра

Взял недельный отпуск на работе. Пару дней отдыхаю от кода на базе отдыха. Далее за 3 дня хочу доделать свой сервис. Ну и на выходных будет уже полноценный отдых от всего на море😄

На самом деле отдыхать сложно. Что если писать код мне интересно? Решать задачи интересно? Записывать видео? Может я так отдыхаю. А чилить у бассейна мне скучно. Я всегда с радостью встречаю понедельник и конец отпуска🙃

На работе ждёт интересная задача. Дома ждёт мой сервис, ютуб, книги😂

Хочу домой делать интересные для меня вещи. Но вынужден лежать у бассейна с термальной водой.

Лайк если не нравится лежать у бассейна👍🏻

Кит если нравится 🐳

Каррирование (или карринг) — это процесс превращения функции с множеством аргументов в последовательность функций, каждая из которых принимает только один аргумент. Давай разберем это на простом языке и с примерами.

Что это значит на практике?

Допустим, у нас есть простая функция, которая складывает три числа:

function sum(a, b, c) {
return a + b + c;
}

Теперь, вместо того чтобы передавать все три аргумента сразу, мы можем "каррировать" эту функцию, чтобы она принимала аргументы по одному:

function sum(a) {
return function(b) {
return function(c) {
return a + b + c;
}
}
}

sum(1)(2)(3); // результат: 6

Зачем это нужно?

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

#ОбучающийПост #JavaScript #каррирование

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

#каррирование #code #JavaScript

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

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

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

Сегодня же День программиста!

Это крутая, творческая и иногда непростая профессия. Мне нравится создавать что-то новое и постоянно учиться — чувствую себя действительно творческим человеком. Особенно здорово разбираться в логике приложения, делать код чище и лучше. Да, я немного перфекционист в этом вопросе. Также я обожаю общаться и быть частью айти-сообщества — это приносит мне радость. И вообще, мне нравится начинать новую рабочую неделю в понедельник, потому что знаю: меня ждёт много интересного.

Программирование подарило мне все это.

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

Хочу пожелать всем, кто мечтает стать программистом, обязательно достичь этой цели. Если вы чувствуете, что это сделает вашу жизнь лучше, то у вас все получится! Желаю вам удачи, мотивации и сил. И пусть в следующем году этот праздник будет и вашим праздником на полную катушку! Я постараюсь помочь вам в этом.

С праздником!

Разницу между атрибутами async и defer при подключении внешних скриптов в HTML документе.

🔹async

Когда вы используете атрибут async, браузер продолжает парсить HTML-документ, в то время как скрипт загружается в фоновом режиме. Как только скрипт загрузится, парсинг HTML приостанавливается, чтобы скрипт мог быть выполнен. Это может привести к тому, что скрипты будут выполняться не в том порядке, в котором они указаны в документе, если они зависят друг от друга.

🔹defer

Атрибут defer, с другой стороны, также позволяет браузеру продолжить парсинг HTML-документа во время загрузки скрипта. Однако, в отличие от async, он гарантирует, что скрипты будут выполнены в том порядке, в котором они появляются в документе, и только после полной загрузки HTML-документа, перед событием DOMContentLoaded.

🔍Визуально разницу можно представить так:

1️⃣Без async или defer: HTML → Скрипт загружается и выполняется → HTML продолжает загружаться.

2️⃣С async: HTML и скрипт загружаются параллельно → Скрипт выполняется, как только загрузится (HTML может ещё не быть полностью загружен).

3️⃣С defer: HTML и скрипт загружаются параллельно → Скрипт выполняется только после полной загрузки HTML (и в том порядке, в котором они указаны в документе).

🛠Использование:

Используйте async, когда скрипты независимы друг от друга и могут выполняться в любом порядке.

Используйте defer, когда скрипты зависимы друг от друга и должны выполняться в определенном порядке.

#JavaScript #ОбучающийПост #defer #async #HTML

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

Конечно, даёт о себе знать не особо большой опыт в бекенде, так как бекенд пошёл как-то сам по себе, изучал его на практике, а вот фронтенд изучал углублённо, знаю тонкости, особенности, и имею хороший опыт. Хотя сейчас стараюсь улучшить свои знания в бекенд разработке, читаю про архитектуру, подходы, дизайн систем, про БД. Однако если по фронту у меня был ментор на работе, который заложил основу, то по бекенду такого не было.

Ну ничего, выпишу вопросы, пойду на IT завтрак, там много бекендеров, дам тему для обсуждения.😆 А пока оставлю так как сделал🤓 В любом случае все можно исправить, только к тому моменту, когда руки дойдут, пользователей будет не 100, а 10000) и нужно будет придумывать скрипты и миграции, чтобы без потери данных всё перевести из одного формата в другой, а потом еще на фронтенде этот формат правильно отображать. Ужас. Почему же я изначально выбрал фронтенд, а не бекенд😩

Короче разобрался я с датой, конечно мне кажется сделал небольшие костыли, но в целом цели добился. Тестирую смс рассылку😎

Огонёк если хотели бы проснутся утром и увидеть такое смс напоминание на урок по фронтенду😄

https://github.com/roll-over/unknown-interview

Ребята разрабатывают tinder/HH. Open source проект. Вы можете поинтересоваться, как можно принять участие, обычно в таких проектах должен быть чат где ребята списываются и общаются.

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

Также интересно посмотреть на код своих коллег😌

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

🔍Лексическая Область Видимости - означает, что функция имеет доступ ко всем переменным, которые были в ее области видимости в момент создания. Это создает "замкнутую" область видимости, защищая переменные от внешнего доступа.

🔑Доступ к Внешним Переменным - функции, созданные внутри другой функции, имеют доступ к переменным этой внешней функции, даже после того, как внешняя функция завершила свое выполнение. Это обеспечивает своего рода "память" для функций.

🧐Проще говоря, замыкание - это когда ты создаешь функцию, эта функция видит все, что вокруг нее (в этом же файле, сверху, в компоненте и тд). И если ты эту функцию передашь в другой файл и вызовешь ее там, то эта функция будет знать все те переменные. Вы знаете все улицы своего города, если вы переедете в другой город то вы все равно их будете знать.

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

#JavaScript #ОбучающийПост #замыкание