👁‍🗨 CODORUM

Интересная идея кнопки, по нажатию на которую появляется текст на чистом html и CSS, без добавления функции на JavaScript 🟨 Всё что необходимо это прописать саму кнопку, текст в файле index.html и три стиля в файле index.css 📁 С кнопкой связан скрытый checkbox. При нажатии на кнопку ставится галочка в checkbox. Подробнее в видео 👁‍🗨 Код с видео:

// ✦ index.html
<label for="btn" class="btn">Кнопка</label>
<input type="checkbox" id="btn"></input>
<div class="text">привет</div>


// ✦ index.css
.text, input[type="checkbox"] {
  opacity: 0;
  margin-top: -10px;
  transition: opacity 400ms, margin-top 500ms;
  display: block;
}

input[type="checkbox"]:checked ~ .text {
  opacity: 1;
  margin-top: 10px;
}

.btn {
  padding: 6px 18px;
  background-color: #485dff;
  color: #eceeff;
  cursor: pointer;
  border-radius: 8px;
}

Недавно я опубликовал последнюю часть по разработке сайта-визитки на ReactJS (все части в плейлисте на моём ютуб каналe). Это серия роликов, где я поэтапно показываю как разрабатываю одностраничный сайт-портфолио используя NodeJS и библиотеку React ⚛️ Если вы еще не смотрели ни одной части — предлагаю посмотреть на то, что у нас получилось по итогу в ролике обзор финального результата 👈 жми, чтобы посмотреть 🔴 В рамках частей мы также рассмотрели интересные моменты html верстки 🟧, стилизации и создании некоторых CSS анимаций 🟦 Буду благодарен, если поддержите видео лайком и напишите свое мнение в комментарии под видео 💬

Где чаще всего используют JavaScript? 🟨 Хочу показать интересные данные, основанные на результатах исследования Developer Ecosystem Survey, которое ежегодно проводит JetBrains 📊 JavaScript остается основным инструментом для фронтенд-разработки. 86% респондентов работают с фронтендом, включающим создание веб-сайтов, веб-приложений и пользовательских интерфейсов 🖥 Хотя JavaScript менее популярен в бэкенде, его все же широко используют через платформу Node.js. Примерно 34% разработчиков используют JavaScript для бэкенд-разработки, что делает его важнейшим инструментом для создания серверных частей приложений 🟩

Загрузил финальную 19 часть по разработке сайта-визитки на ReactJS на ютуб канал — адаптация блока гарантий и подвала 👈 жми, чтобы посмотреть 🔴 В которой мы адаптировали 6-й и 7-й блоки для моб. устройств, чем закончили адаптацию страницы и сайт-визитку в целом. Из нового: рассмотрели новую конструкцию, подобную конструкции с долларом, применяющую разные классы, в зависимости от значений двух переменных, для кнопки, переносящей нас в начало страницы ⚛️ Буду благодарен, если поддержите видео лайком 👍

У нас новый диктор! 🎙 Просим сравнить качество звука и подачу предыдущего диктора и нового диктора в следующем посте 👇

Рассмотрим тип объекта Date в JavaScript ⚜️ Date – это тип объекта, который позволяет создавать, представлять и взаимодействовать с датами и временем (год, месяц, день, час, минута и другие) ⏰ Существуют методы для получения и изменения даты и времени (детальнее на скрине) ⏲️ Стоит учесть, что отсчет месяцев начинается с нуля, где январь - 00, февраль - 01 и так далее 👁‍🗨 Код со скрина:

const TimeNow = new Date();

// методы для получения компонентов времени объекта TimeNow
let year = TimeNow.getFullYear();
let month = TimeNow.getMonth();
let day = TimeNow.getDate();
let hours = TimeNow.getHours();
let min = TimeNow.getMinutes();
let sec = TimeNow.getSeconds();

console.log(`Сегодня ${day}.${month + 1}, ${year} год`);


// пример метода по установке времени для объекта TimeNow (час, минута)
TimeNow.setHours(14, 30);

Опубликовал 18 часть по разработке сайта-визитки на ReactJS на ютуб каналe — адаптация блока отзывов 👈 жми, чтобы посмотреть 🔴 В этой части мы адаптировали 5-й блок под мобильные устройства. Прописали дополнительные классы для элементов блока моб. версии и подкорректировать шаблон отзывов, изменили концепцию контейнера с отзывами. Показал лайфхак для плашек (выделения слов в тексте) - как сделать плашки неразрывными/неуязвимыми для переносов текста 🟧 Буду благодарен, если поддержите видео лайком 👍

17 часть по разработке сайта-визитки на ReactJS уже на ютуб канал — адаптация блока портфолио 👈 жми, чтобы посмотреть 🔴 В ней мы настроили отображение 4-го блока для мобильных устройств, при этом сохранив основные функции без необходимости их редактирования. Адаптировали блок в главном компоненте Main и компоненты имеющие отношение к блоку. Немного изменили идею стилизации и отображения элементов блока и компонентов для мобильных устройств 📱 Буду благодарен, если поддержите видео лайком 👍

Как сделать отступы между элементами div контейнера компактно? 🔳 Вместо привычного CSS свойства для отступа margin можно использовать лишь одно свойство gap, которое задаст одинаковый отступ со всех сторон элемента и тем самым сэкономит много места 🟦 Единственное, свойство gap лучше задавать в классе контейнера с элементами, а не в самих классах элементов, при условии, что у самого класса контейнера нет свойств размера, тем самым размер контейнера будет регулироваться элементами (пример на гифке) 👁‍🗨

Загрузил 16 часть по разработке сайта-визитки на ReactJS на ютуб канал — адаптация блока услуг 👈 жми, чтобы посмотреть 🔴 В которой мы адаптировали 3 блок для мобильных устройств. Разобрали применение разных комбинаций классов для html элементов отталкиваясь от значений нескольких переменных, благодаря использованию конструкции со знаком доллара, ну и еще пару неочевидных моментов CSS стилизации 🟦 Буду благодарен, если поддержите видео лайком 👍

Опубликовал 15 часть по разработке сайта-визитки на ReactJS на ютуб канал — адаптация модального окна 👈 жми, чтобы посмотреть 🔴 В этой части мы перенесли функцию по определению соотношения ширины и высоты экрана устройства пользователей посещающих наш сайт, и определение переменной isPortrait в отдельный компонент (теперь можем подключать этот компонент с функцией ресайза в компоненты, где нужна адаптация под моб. устройства подобно кастомному хуку). И адаптировали модальное окно ⚛️ Буду благодарен, если поддержите видео лайком 👍

Благодаря простенькому методу length можно узнать количество элементов в интересующем нас массиве в JavaScript 🟨 Для этого можно объявить новую переменную, указав через знак равно название массива, количество элементов которого мы хотим узнать и метод length 📐 Ну и вывести эту новую переменную, отображающую количество элементов в массиве, в консоль 👁‍🗨 Код со скрина:

const persons = ['Pinkman', 'Fring', 'Eladio'];

const length = persons.length;

console.log(`Количество элементов в массиве persons:`, length);

14 часть по разработке сайта-визитки на ReactJS уже на ютуб канале — адаптация приветственного блока 👈 жми, чтобы посмотреть 🔴 В ней мы адаптировали 2-й блок под моб. устройства, благодаря тернарному выражению и переменной isPortrait. Создали 2 варианта html-архитектуры (web & mobile) для блока, как делали ранее для header блока. В зависимости от переменной isPortrait отображаем тот или иной вариант html-архитектуры (про неё подробнее в 12 части) 📱 Буду благодарен, если поддержите видео лайком 👍

Загрузил 13 часть по разработке сайта-визитки на ReactJS на ютуб канал — написание бургер меню 👈 жми, чтобы посмотреть 🔴 В которой мы создали бургер меню для мобильной версии. Отошли от концепции стандартного бургер меню, закрывающего 90% экрана по ширине при открытии и вместо этого создали удобное аккуратное выпадающее бургер-меню ⚛️ Буду благодарен, если поддержите видео лайком 👍

Продолжаем рубрику разборов возможных вопросов из собеседований по JavaScript 🟨 👉 Что означает глубокая (deep) и поверхностная (shallow) копия объекта? ➖ Поверхностная копия (shallow copy) создает новый объект и копирует в него лишь ссылки на вложенные объекты из оригинального объекта ➖ Глубокая копия (deep copy) создает новый объект с полностью независимыми копиями всех вложенных объектов из оригинального объекта Глубокая копия нужна, если нужно избежать изменения в исходном объекте при изменениях в её копии. Потому как если вносить изменения во вложенные объекты в shallow копии - изменения применяются и для вложенных объектов внутри оригинального объекта, который был скопирован 👁‍🗨

Опубликовал 12 часть по разработке сайта-визитки на ReactJS на ютуб канале — адаптация header блока 👈 жми, чтобы посмотреть 🔴 В этой части мы приступили к адаптации страницы под мобильные устройства 🟧 👁‍🗨 Рассмотрели как можно выполнять адаптацию без лишней монотонной работы, используя лишь: ➖ функцию по определению ширины и высоты устройства, с которого открыт сайт, с хуком useEffect ➖ одну переменную с хуком useState ➖ тернарные выражения Буду благодарен, если поддержите видео лайком 👍

11 часть по разработке сайта-визитки на ReactJS уже на ютуб канале — создание функции смены темы 👈 жми, чтобы посмотреть 🔴 В ней мы написали функцию смены темы в отдельном Реакт компоненте, которая регулирует тему страницы. Такой компонент похож на кастомный хук, который импортируется в разные компоненты для добавления какого-то функционала, в нашем случае - для манипулирования значением темы для смены применяемой CSS коллекции (светлой/тёмной) ⚛️ Буду благодарен, если поддержите видео лайком 👍

С помощью метода findLast можно найти последний элемент массива удовлетворяющий определенное условие в JavaScript 🟨 Для этого достаточно задать массив, прописать метод findLast, в скобках которого указать условие для элемента 🔦 Отталкиваясь от этого условия будут поочередно перебираться все элементы с конца массива, пока не будет найден первый с конца массива элемент удовлетворяющий заданное условие 🔬 Когда такой элемент будет найден – он будет выведен в консоль, в случае кода на скрине, и поиск будет остановлен 👁‍🗨 Код со скрина:

const numbers = [1, 2, 3, 4, 5];

const lastNum = numbers.findLast(num => num % 2 === 0);

console.log("Последний парный элемент массива numbers:", lastNum);

Загрузил десятую часть по разработке сайта-визитки на ReactJS на ютуб канал — настройка навигации по странице 👈 жми, чтобы посмотреть 🔴 В которой мы доработали header блок, настроили навигацию по странице: теперь по нажатию на разделы в меню нас плавно переносит к частям страницы, где расположены эти разделы. Также добавили кнопку в нижнем правом углу экрана, которая появляется в конце страницы и по нажатию переносит нас в начало страницы 🟧 Буду благодарен, если поддержите видео лайком 👍