🗣Модальное окно — это эмуляция диалогового окна браузера, появляющегося поверх страницы в ответ на действия пользователя и блокирующего доступ к основному содержимому страницы.
⏺ Используется для : отображения второстепенного содержимого на странице
⏺ Подходит для: настроек, создания новых документов, заполнения компактных форм или шагов пошагового мастера.
Например, модальное окно может использоваться для ввода адреса - при клике на ссылку модальное окно открывается.
⏺ Избегайте использования модального окна для больших форм. Большие формы - это формы, которые не умещаются на двух экранах монитора. Если необходимо сохранить контекст страницы при работе с такими формами, возможно стоит рассмотреть использование боковой панели (сайдпейдж).
🟢 С появлением нового типа объектов Set в стандарте ES6 и его комбинацией со спред-оператором (...), можно быстро создать новый массив из старого, содержащий только уникальные значения.
🟢 При изучении JavaScript, мы всегда встречаем стандартный цикл for в учебных материалах:
for (let i = 0; i < array.length; i++){ console.log(i); }
🟢 Этот шаблон следует использовать, верно? Однако, он не является оптимальным. На каждой итерации будет пересчитываться длина массива array. И хотя иногда это может быть полезно, чаще всего более эффективным будет кэшировать ее после первого расчета. Для этого мы создаем переменную length вместе с определением счетчика цикла в первой части условия:
for (let i = 0, length = array.length; i < length; i++){ console.log(i); }
🟢 Такой код остается лаконичным, но при работе с большими массивами будет немного более эффективным.
➡️Укорачивание
🟢 Один из широко известных JavaScript-трюков - сокращение массива, который всегда полезно вспомнить.
🟢 Для удаления нескольких значений с конца массива не обязательно использовать методы slice(), splice() или pop(). Просто присвойте новое значение свойству length массива:
С момента появления в JavaScript функций-генераторов прошло немало времени, но многие разработчики все еще относятся к этой звездочке (астериск) с некоторой опаской.
Функция-генератор представляет собой обычную функцию, которую можно приостановить в любой момент для получения промежуточного значения с помощью метода next().
Существует возможность, что генератор будет иметь конечное число промежуточных точек, и когда они закончатся, выполнение функции остановится, а вызов next вернет undefined.
console.log(greet.next().value); // 'How are you?'
console.log(greet.next().value); // 'Bye'
console.log(greet.next().value); // undefined
🗣Но никто не мешает зациклить функцию для бесконечной генерации значений:
function* idCreator() { let i = 0; while (true) yield i++; }
const ids = idCreator();
console.log(ids.next().value); // 0
console.log(ids.next().value); // 1
console.log(ids.next().value); // 2 // etc...
👀 Обратите внимание, что при первом вызове функции происходит лишь создание объекта-генератора с методом next(), но сама функция не возвращает никакого значения.
⚡️ Для улучшения ваших навыков в работе с JavaScript важно изучить разнообразные концепции и функции языка с помощью практических проектов.
⚡️ Создание целевых проектов позволит вам применить полученные знания на практике, освоить основные элементы и овладеть конкретными концепциями, прежде чем приступать к более сложным задачам.
⚡️ Вы можете играть с внешним видом по своему вкусу. С помощью этого проекта вы познакомитесь и сможете использовать различные функции времени в JavaScript.
🖥Node.js - это среда выполнения JavaScript, которая позволяет запускать JavaScript на стороне сервера. Она базируется на движке V8 от Google и обеспечивает возможность создания высокопроизводительных веб-приложений.
✔️Установка
➡️ Перейдите на официальный сайт Node.js ➡️ Скачайте установочный файл Node.js для вашей операционной системы (Windows, macOS, Linux). ➡️ Запустите установочный файл и следуйте инструкциям мастера установки. ➡️ После установки можно проверить, что Node.js установлен корректно, открыв терминал (командную строку) и введя команду node -v.
⚡️ Если у вас появится версия Node.js, значит установка прошла успешно.
🟢 После установки Node.js можно использовать его для выполнения JavaScript на сервере, создания веб-серверов, API и многих других задач.
Если вам понравился пост, добавьте 🔥🔥🔥. Вам не сложно — админу приятно 🙂
🖥CSS3 Flexbox - это новая технология, внедренная в последнюю версию CSS, которая позволяет гибко управлять раскладкой блоков внутри контейнера-родителя.
🔵 Эта сетка обеспечивает возможность управлять колоночной структурой основной HTML разметки, ориентацией блоков, похожей на таблицы, порядком их расположения, а также другие возможности.
🔵 Благодаря CSS Flexbox, блоки легко выравниваются по горизонтали и вертикали.
🔵 CSS-правило предназначено для выстраивания flexbox-сетки, которая строится из дочерних html-тэгов, расположенных внутри некоторого родительского контейнера. Для задания данной сетки необходимо установить правило display в значение:
➡️display: flex; — для блокового отображения;
➡️display: inline-flex; — для инлайнового отображения.
➡️Выравниваем горизонтально justify-content
➡️justify-content
🟢 flex-start Выравнивает по левой кромке. Дефолтное значение
🟢 flex-end Выравнивает по правой кромке.
🟢 center Выравнивает по середине.
🟢 space-between Элементы равномерно распределены по ширине контейнера-родителя, при этом первый и последний элементы выровнены соответственно по левому и правому краю без отступов, а остальные элементы размещены между ними с одинаковыми интервалами.
🟢 space-around По всей ширине так, что между каждыми двумя блоками будет одинаковый отступ, а по края его половина.
🟢 initial Задание дефолтного значения.
🟢 inherit Предназначено для сообщения css-интерпретатору, что значение нужно брать у родительского тэга.
🖥 Медиа-запросы представляют собой CSS правила, которые позволяют адаптировать стили элементов в зависимости от характеристик устройства. Другими словами, это возможность определять, какие стили следует применять на веб-странице в зависимости от условий.
💩 Это делает сайт более удобным для пользователей, независимо от устройства и позволяет эффективно управлять отображением элементов. 💩 Подходы Mobile First и Desktop First имеют свои особенности и могут быть применены в зависимости от проекта. 💩 Пользование логических операторов позволяет создавать более сложные и адаптивные стили, что улучшает пользовательский опыт и SEO-оптимизацию сайта. 💩 Внедряйте адаптивный дизайн осознанно, делая ваш сайт доступным и удобным для всех пользователей.
