Если до вечера починят то выложу новое видео на канал. Продолжение нашего сериала React Новости.
В видео реализуем поиск по ключевому слову и debounce.
Сможем искать интересующие нас новости👍🏻
В видео реализуем поиск по ключевому слову и debounce.
Сможем искать интересующие нас новости👍🏻
🔥8
Привет всем!
Сейчас я занимаюсь крайне увлекательной задачей на работе — созданием редактора SVG с нуля. Этот проект предполагает наличие панели инструментов, аналогичной той, что есть в Figma, где можно менять порядок элементов, группировать их, регулировать приоритет, а также модифицировать другие свойства, такие как цвет, видимость, названия и так далее.
В процессе работы над этим проектом мне предстоит создать алгоритм для парсинга SVG, интерфейс для визуализации элементов, а также функционал drag-and-drop для перетаскивания слоёв. Эта задача невероятно увлекательна, ведь тут можно наглядно увидеть, как пригождаются алгоритмы обхода деревьев, группировки элементов и понимание рекурсии. Кроме этого, передо мной стоит вызов по созданию эффективной структуры данных для хранения и модификации этих элементов, а также методов для сохранения и последующего чтения этих файлов.
Часто новички задаются вопросом о необходимости изучения алгоритмов. Скорее всего, в начале карьеры вам не придётся сталкиваться с такой сложной задачей, и более опытные коллеги возьмут на себя решение сложных функциональных задач. Однако стоит осознать, что со временем вам, возможно, придётся создавать и разрабатывать свои, более сложные алгоритмы. В связи с этим, для гармоничного развития профессионала в сфере веб-разработки необходимо развивать все аспекты: практиковаться в кодировании, изучать архитектуру и паттерны, решать алгоритмические задачи и углублять знания в теории компьютерных наук и устройстве компьютера.
Для новичков может быть сложно осознать всю важность этого процесса, и им может не хватить мотивации для освоения столь обширного материала сразу. Именно поэтому я считаю, что начинать углубленное изучение этих аспектов стоит уже имея позицию junior разработчика, чтобы в будущем сформировать сильную основу, позволяющую переходить на следующий уровень карьерной лестницы.
Сейчас я занимаюсь крайне увлекательной задачей на работе — созданием редактора SVG с нуля. Этот проект предполагает наличие панели инструментов, аналогичной той, что есть в Figma, где можно менять порядок элементов, группировать их, регулировать приоритет, а также модифицировать другие свойства, такие как цвет, видимость, названия и так далее.
В процессе работы над этим проектом мне предстоит создать алгоритм для парсинга SVG, интерфейс для визуализации элементов, а также функционал drag-and-drop для перетаскивания слоёв. Эта задача невероятно увлекательна, ведь тут можно наглядно увидеть, как пригождаются алгоритмы обхода деревьев, группировки элементов и понимание рекурсии. Кроме этого, передо мной стоит вызов по созданию эффективной структуры данных для хранения и модификации этих элементов, а также методов для сохранения и последующего чтения этих файлов.
Часто новички задаются вопросом о необходимости изучения алгоритмов. Скорее всего, в начале карьеры вам не придётся сталкиваться с такой сложной задачей, и более опытные коллеги возьмут на себя решение сложных функциональных задач. Однако стоит осознать, что со временем вам, возможно, придётся создавать и разрабатывать свои, более сложные алгоритмы. В связи с этим, для гармоничного развития профессионала в сфере веб-разработки необходимо развивать все аспекты: практиковаться в кодировании, изучать архитектуру и паттерны, решать алгоритмические задачи и углублять знания в теории компьютерных наук и устройстве компьютера.
Для новичков может быть сложно осознать всю важность этого процесса, и им может не хватить мотивации для освоения столь обширного материала сразу. Именно поэтому я считаю, что начинать углубленное изучение этих аспектов стоит уже имея позицию junior разработчика, чтобы в будущем сформировать сильную основу, позволяющую переходить на следующий уровень карьерной лестницы.
👍7
Всплытие событий – это когда информация о том, что произошло какое-то событие (например, клик мышью), передается от самого "младшего" элемента, на котором это событие произошло, к его "родителям" один за другим, пока не достигнет самого "верхнего" элемента (чаще всего это документ веб-страницы).
Эта особенность позволяет нам назначать обработчики событий не только конкретному элементу, но и "ловить" эти события на родительских элементах, что часто облегчает работу с интерфейсами.
К примеру, у вас на веб-странице присутствует определённый элемент, который, при клике на него, перенаправляет пользователя на другую страницу. Однако внутри этого элемента расположены две дополнительные кнопки, которые предназначены для других действий (например, открытие меню). Так вот, при нажатии на одну из этих кнопок, может случиться так, что активируется и главный элемент, который перенаправляет на другую страницу — это явление и называется всплытием событий.
Для предотвращения такого вида всплытия, вы можете воспользоваться методом event.stopPropagation(). Применив его в функции-обработчике события клика для внутренних кнопок, вы остановите всплытие события, и клик по кнопке не будет вызывать действие главного элемента. Это позволит избежать нежелательного перенаправления на новую страницу при попытке взаимодействовать с внутренними кнопками.
#JavaScript #ОбучающийПост
Эта особенность позволяет нам назначать обработчики событий не только конкретному элементу, но и "ловить" эти события на родительских элементах, что часто облегчает работу с интерфейсами.
К примеру, у вас на веб-странице присутствует определённый элемент, который, при клике на него, перенаправляет пользователя на другую страницу. Однако внутри этого элемента расположены две дополнительные кнопки, которые предназначены для других действий (например, открытие меню). Так вот, при нажатии на одну из этих кнопок, может случиться так, что активируется и главный элемент, который перенаправляет на другую страницу — это явление и называется всплытием событий.
Для предотвращения такого вида всплытия, вы можете воспользоваться методом event.stopPropagation(). Применив его в функции-обработчике события клика для внутренних кнопок, вы остановите всплытие события, и клик по кнопке не будет вызывать действие главного элемента. Это позволит избежать нежелательного перенаправления на новую страницу при попытке взаимодействовать с внутренними кнопками.
#JavaScript #ОбучающийПост
👍5
👆При клике на <div>, который оборачивает всю карточку пользователя, будет вызван обработчик goToProfile, что приведёт к переходу на страницу профиля пользователя.
👆При клике на кнопку "Удалить", сначала сработает обработчик handleDelete, который вызовет функцию onDelete и остановит всплытие события благодаря event.stopPropagation(). Это предотвратит вызов обработчика goToProfile и, следовательно, переход на страницу профиля пользователя не произойдёт.
#JavaScript #code
👆При клике на кнопку "Удалить", сначала сработает обработчик handleDelete, который вызовет функцию onDelete и остановит всплытие события благодаря event.stopPropagation(). Это предотвратит вызов обработчика goToProfile и, следовательно, переход на страницу профиля пользователя не произойдёт.
#JavaScript #code
👍3🔥1
Разница между «атрибутом» (attribute) и «свойством« (property)
🔹Атрибуты (Attributes)
Атрибуты — это дополнительные значения, которые вы можете назначить тегам в вашем HTML-коде. Они представлены в исходном коде страницы и первоначально устанавливают свойства элементов.
<input type="text" value="Hello, World!" disabled>
В данном примере type, value и disabled — это атрибуты тега input.
Особенности атрибутов:
1️⃣Строковые значения: Даже если атрибут представляет число или другой тип данных, его значение всегда будет строкой.
2️⃣Нечувствительность к регистру: Имена атрибутов можно записывать любыми буквами — большими или маленькими, это не повлияет на работу.
3️⃣Видны в innerHTML: Если вы посмотрите на свойство innerHTML элемента, то увидите все атрибуты, указанные в разметке.
🔹Свойства (Properties)
Свойства — это характеристики DOM-узлов, которые вы можете читать или изменять с помощью JavaScript. Они представляют текущее состояние элемента в браузере, которое может меняться во время выполнения скрипта.
const inputElement = document.querySelector('input');
inputElement.value = "New Text";
В данном примере мы меняем свойство value у объекта inputElement.
Особенности свойств:
1️⃣Различные типы данных: Свойства могут иметь различные типы данных, не только строки.
2️⃣Чувствительность к регистру: Имена свойств нужно указывать в точном регистре, в отличие от атрибутов.
3️⃣Интерактивность с JavaScript: Свойства представляют собой характеристики объектов JavaScript и могут изменяться в любое время при выполнении скрипта.
#JavaScript #ОбучающийПост #HTML
🔹Атрибуты (Attributes)
Атрибуты — это дополнительные значения, которые вы можете назначить тегам в вашем HTML-коде. Они представлены в исходном коде страницы и первоначально устанавливают свойства элементов.
<input type="text" value="Hello, World!" disabled>
В данном примере type, value и disabled — это атрибуты тега input.
Особенности атрибутов:
1️⃣Строковые значения: Даже если атрибут представляет число или другой тип данных, его значение всегда будет строкой.
2️⃣Нечувствительность к регистру: Имена атрибутов можно записывать любыми буквами — большими или маленькими, это не повлияет на работу.
3️⃣Видны в innerHTML: Если вы посмотрите на свойство innerHTML элемента, то увидите все атрибуты, указанные в разметке.
🔹Свойства (Properties)
Свойства — это характеристики DOM-узлов, которые вы можете читать или изменять с помощью JavaScript. Они представляют текущее состояние элемента в браузере, которое может меняться во время выполнения скрипта.
const inputElement = document.querySelector('input');
inputElement.value = "New Text";
В данном примере мы меняем свойство value у объекта inputElement.
Особенности свойств:
1️⃣Различные типы данных: Свойства могут иметь различные типы данных, не только строки.
2️⃣Чувствительность к регистру: Имена свойств нужно указывать в точном регистре, в отличие от атрибутов.
3️⃣Интерактивность с JavaScript: Свойства представляют собой характеристики объектов JavaScript и могут изменяться в любое время при выполнении скрипта.
#JavaScript #ОбучающийПост #HTML
❤2👍2
Media is too big
VIEW IN TELEGRAM
Мой первый JavaScript пет проект. После публикации, смотрел погоду только в нем😃
Так же это первое приложение в котором я использовал API и асинхронность. Было тяжко, возился пару дней, не понимал как отправлять запрос, куда добавлять апи ключ. Еще и работа со временем, нужно было учитывать часовой пояс и правильно отображать время.
Это отличная мотивация, когда реализовываешь свои идеи. Это приложение я придумал и реализовал сам, просто увидел подборку бесплатных API. Подсмотреть негде было, потому что не нашел в ютубе. Пришлось самому ковыряться. 👍
После завершения работы над этим приложением я уже с большей уверенностью создавал другие🎯
В нашем с вами приложении React Новости я планирую создать полноценный виджет с погодой, где будет погода на неделю и возможность выбора даты😎
Так же это первое приложение в котором я использовал API и асинхронность. Было тяжко, возился пару дней, не понимал как отправлять запрос, куда добавлять апи ключ. Еще и работа со временем, нужно было учитывать часовой пояс и правильно отображать время.
Это отличная мотивация, когда реализовываешь свои идеи. Это приложение я придумал и реализовал сам, просто увидел подборку бесплатных API. Подсмотреть негде было, потому что не нашел в ютубе. Пришлось самому ковыряться. 👍
После завершения работы над этим приложением я уже с большей уверенностью создавал другие🎯
В нашем с вами приложении React Новости я планирую создать полноценный виджет с погодой, где будет погода на неделю и возможность выбора даты😎
👍6🔥4
Когда мы загружаем веб-страницу, браузер проходит через ряд этапов, чтобы полностью отобразить страницу. В этом процессе два основных события, которые имеют значение для веб-разработчиков, это 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
🔹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
👍5
Что делает строчка "use strict";?
Когда вы включаете строгий режим, используя эту строчку, вы говорите браузеру: "Будь строже со мной, не позволяй мне делать некоторые вещи, которые могут привести к ошибкам или плохому коду".
Достоинства:
🟢Предотвращает случайное создание глобальных переменных: Это как когда вы говорите друзьям, чтобы они предупреждали вас, если вы начнете что-то делать неосознанно, например, терять ключи.
🟢Больше ошибок, а не странных поведений: Как если бы ваше авто предупреждало вас о том, что вы забыли закрыть дверь, вместо того чтобы просто позволить вам уехать с открытой дверью.
🟢Требование к уникальности имен параметров функции: Это как запрет на использование одинаковых имен для двух ваших домашних питомцев, чтобы избежать путаницы при вызове их.
Недостатки:
🔴Отказ от некоторых "удобных" функций: Это может быть как отказ от использования вашего любимого, но вредного для здоровья блюда.
🔴Ограниченный доступ к некоторым свойствам функции: Это как если бы вы не могли вспомнить имя человека, с которым только что познакомились - информация (о вызывающей функции и аргументах функции) больше не доступна.
🔴Проблемы с объединением кода: Если представить ваш проект как строительство дома, это может быть как попытка совместить новый, модный дизайн с устаревшими строительными материалами - они просто могут не подойти друг другу.
#JavaScript #ОбучающийПост #usestrict
Когда вы включаете строгий режим, используя эту строчку, вы говорите браузеру: "Будь строже со мной, не позволяй мне делать некоторые вещи, которые могут привести к ошибкам или плохому коду".
Достоинства:
🟢Предотвращает случайное создание глобальных переменных: Это как когда вы говорите друзьям, чтобы они предупреждали вас, если вы начнете что-то делать неосознанно, например, терять ключи.
🟢Больше ошибок, а не странных поведений: Как если бы ваше авто предупреждало вас о том, что вы забыли закрыть дверь, вместо того чтобы просто позволить вам уехать с открытой дверью.
🟢Требование к уникальности имен параметров функции: Это как запрет на использование одинаковых имен для двух ваших домашних питомцев, чтобы избежать путаницы при вызове их.
Недостатки:
🔴Отказ от некоторых "удобных" функций: Это может быть как отказ от использования вашего любимого, но вредного для здоровья блюда.
🔴Ограниченный доступ к некоторым свойствам функции: Это как если бы вы не могли вспомнить имя человека, с которым только что познакомились - информация (о вызывающей функции и аргументах функции) больше не доступна.
🔴Проблемы с объединением кода: Если представить ваш проект как строительство дома, это может быть как попытка совместить новый, модный дизайн с устаревшими строительными материалами - они просто могут не подойти друг другу.
#JavaScript #ОбучающийПост #usestrict
❤3🔥1
Сегодня выходит следующая серия! Мы будем рефакторить наше приложение, чистить код, добавлять HOC и кастомные хуки. На следующей неделе я наконец-то запишу видео о встрече с HR и рекрутерами. Расскажу вам, как выделиться среди других соискателей: о составлении резюме, откликах и многом другом.
В запасе осталась еще одна задача - изменение дизайна, чтобы было красиво на больших экранах, а то сейчас дизайн только для телефонов.
Потом возможно будет еще одна добивочная таска, немного изменим логику, будем так же пользоваться запросом latest-news и будем отображать их в баннерах. Разделим логику списка новостей и баннеров.
И после этого уже перейдем к другим задачам, первая из которых - TypeScript. Большинство проголосовало за то, чтобы мы переписали приложение на TS с JS. И это правильно.
Вообще база TS достаточно легкая, и зачем отдельно его учить, если можно начать как можно быстрее его применять. Так что будет большая серия, будем переписывать все файлы и добавлять типизацию🥲
В запасе осталась еще одна задача - изменение дизайна, чтобы было красиво на больших экранах, а то сейчас дизайн только для телефонов.
Потом возможно будет еще одна добивочная таска, немного изменим логику, будем так же пользоваться запросом latest-news и будем отображать их в баннерах. Разделим логику списка новостей и баннеров.
И после этого уже перейдем к другим задачам, первая из которых - TypeScript. Большинство проголосовало за то, чтобы мы переписали приложение на TS с JS. И это правильно.
Вообще база TS достаточно легкая, и зачем отдельно его учить, если можно начать как можно быстрее его применять. Так что будет большая серия, будем переписывать все файлы и добавлять типизацию🥲
👍6
Новое видео на канале. Еще много будет чистки кода. Когда добавим навигацию - изменим фильтрацию новостей. Добавим redux - вынесем все в отдельные компоненты виджеты. Добавим rtk-query - удалим кастомный фетч данных. Будем улучшать наш код постоянно и постепенно.
https://youtu.be/Yi1D_u2SU2w
https://youtu.be/Yi1D_u2SU2w
YouTube
React Новости. Рефакторинг, useFetch, withSkeleton. React приложение новостей. [6]
В данном видео мы направим наши усилия на рефакторинг нашего приложения, оптимизируем код и разработаем компоненты высшего порядка (HOC) вместе с кастомными хуками. Это позволит нам сделать структуру проекта более чистой и легко масштабируемой, предоставив…
🔥6👍1
https://news-reactify.vercel.app/
Простой дизайн, но сейчас мне прям нравится. Теперь не только для мобильных телефонов😄
Записал два видео:
1) Изменил дизайн и отрефакторил, повыносил из мейн компоненты
2) Очистил мейн полностью🤩
Добавил эндпоинт latest-news и теперь баннеры и список новостей это разные блоки с разными новостями😎
Получилось очень круто, все гораздо чище. Читать одно удовольствие
Дальше по плану Typenoscript. Наверное нужно будет делить на две серии
Честно говоря я не пробовал vite проект переносить на ts. Но все возможно. Как раз получу опыт. Просто CRA я помню было муторно переписывать с js на ts. Разберемся
Простой дизайн, но сейчас мне прям нравится. Теперь не только для мобильных телефонов😄
Записал два видео:
1) Изменил дизайн и отрефакторил, повыносил из мейн компоненты
2) Очистил мейн полностью🤩
Добавил эндпоинт latest-news и теперь баннеры и список новостей это разные блоки с разными новостями😎
Получилось очень круто, все гораздо чище. Читать одно удовольствие
Дальше по плану Typenoscript. Наверное нужно будет делить на две серии
Честно говоря я не пробовал vite проект переносить на ts. Но все возможно. Как раз получу опыт. Просто CRA я помню было муторно переписывать с js на ts. Разберемся
👍6❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Как вам мой инфоцыганский уголок?
Обещаю, что выпускать платные курсы не буду🤔
Обещаю, что выпускать платные курсы не буду🤔
❤8🔥4
Планирую в конце месяца начать записывать видео по JavaScript. Но тогда React Новости будут выходить не 2 раза в неделю, а один.
Буду стараться выпускать что-нибудь интересное, чтобы самому освежать память, улучшать понимание каких-то базовых вещей, основ.
Ведение блога - как один из способов улучшить свои знания. Ведь если можешь что-то объяснить другому, значит сам это понял😄
Вообще самый высокий уровень знаний обычно в момент прохождения собеседований. Именно в это время ты знаешь всю теорию, можешь с закрытыми глазами реализовать 30 алгоритмов😂
К сожалению если не используешь что-то в работе, то со временем забываешь это🙃
И это нормально.
Буду стараться выпускать что-нибудь интересное, чтобы самому освежать память, улучшать понимание каких-то базовых вещей, основ.
Ведение блога - как один из способов улучшить свои знания. Ведь если можешь что-то объяснить другому, значит сам это понял😄
Вообще самый высокий уровень знаний обычно в момент прохождения собеседований. Именно в это время ты знаешь всю теорию, можешь с закрытыми глазами реализовать 30 алгоритмов😂
К сожалению если не используешь что-то в работе, то со временем забываешь это🙃
И это нормально.
https://youtu.be/2olzuyO1g8I
Новое видео. Добавили дизайн для широких экранов и почистили код! Приятного просмотра
Новое видео. Добавили дизайн для широких экранов и почистили код! Приятного просмотра
YouTube
React Новости. Новый дизайн, рефакторинг, чистый код. React приложение новостей. [7]
В этом видео мы добавим резиновый дизайн для больших экранов. Вынесем все в отдельные компоненты и почистим наш код.Присоединяйтесь к нашему практическому ку...
🔥6
Взял недельный отпуск на работе. Пару дней отдыхаю от кода на базе отдыха. Далее за 3 дня хочу доделать свой сервис. Ну и на выходных будет уже полноценный отдых от всего на море😄
На самом деле отдыхать сложно. Что если писать код мне интересно? Решать задачи интересно? Записывать видео? Может я так отдыхаю. А чилить у бассейна мне скучно. Я всегда с радостью встречаю понедельник и конец отпуска🙃
На работе ждёт интересная задача. Дома ждёт мой сервис, ютуб, книги😂
Хочу домой делать интересные для меня вещи. Но вынужден лежать у бассейна с термальной водой.
Лайк если не нравится лежать у бассейна👍🏻
Кит если нравится 🐳
На самом деле отдыхать сложно. Что если писать код мне интересно? Решать задачи интересно? Записывать видео? Может я так отдыхаю. А чилить у бассейна мне скучно. Я всегда с радостью встречаю понедельник и конец отпуска🙃
На работе ждёт интересная задача. Дома ждёт мой сервис, ютуб, книги😂
Хочу домой делать интересные для меня вещи. Но вынужден лежать у бассейна с термальной водой.
Лайк если не нравится лежать у бассейна👍🏻
Кит если нравится 🐳
👍9