frontend | ежица-разработчица

Привет! Пост о коллекциях HTML-элементов. Что такое, почему не массив, она живая или нет, они еще и разные и так далее 📝 Сначала определения: коллекция HTML-элементов - набор элементов веб-страницы, порядок в котором соответствует порядку в DOM. 📝 Бывают живые коллекции и статические - живую можно изменить с помощью js, а статическую нет. 📝 Есть две разных структуры данных HTMLCollection и NodeList: HTMLCollection - это только HTML-теги, а NodeList- это еще и текст, оставшийся без тега, и, например, комментарий...

Привет! Поговорим о методах и свойствах js, связанных с родителями и потомками в DOM-дереве Сначала немного определений: чем отличаются дочерние узлы и дочерние элементы? 📝Дочерние элементы - это прямые потомки элемента, а дочерние узлы - это потомки вместе со своими потомками и так далее Итак, методы и свойства js, связанные с темой: ➡️ contains - возвращает Boolean-значение, проверяет, является ли элемент дочерним узлом другого элемента: item.contains(list) - является ли item дочерним узлом...

Для frontend-разработчиков Привет! Полезные расширения для Chrome: ➡️ ColorZilla - пипетка, получить цвет с любого места веб-страницы 🔗 ➡️ Perfect Pixel - сверить с макетом путем наложения на страницу 🔗 ➡️ Vue Devtools - просмотр компонентов Vue, state, данных, время выполнения запросов 🔗 ➡️ React Developer Tools - просмотр компонентов React 🔗 ➡️ Redux Developer Tools - к React в комплект, state, данные, время 🔗 ➡️ Wappalyzer - узнать стек сайта 🔗 ➡️ Project Naptha - скопировать текст...

Привет! Как скопировать массив или объект в javascript? 1) Копирование массива const names = ['Oliver', 'Sophia', 'William', "Emma', 'Ethan']; /* неправильно, copyNames содержит ссылку на names, при изменении элементов copyNames изменится names */ const copyNames = names; /* правильно, copyNames независимая копия, под неё в памчти выделено собственное место и её можно менять не изменяя names */ const copyNames = names.slice(); /* так тоже можно скопировать массив */ const copyNames = [...names];...

И с градиентом! Как сделать на css обводку текста? ➡️ Итак, один из способов: задать тень (text-shadow), причем тени задаем с каждой стороны text-shadow: 1px 0 1px #000,     0 1px 1px #000,    -1px 0 1px #000,    0 -1px 1px #000; Удобно, если у текста несколько обводок, например: text-shadow:   -2px 0 red,   0 2px violet,   2px 0 red,   0 -2px blue; ❗️Однако, если нужно, чтобы текст при этом был прозрачным, то color: transparent; при наличии text-shadow...

Что за книги? - И про frontend, и просто про код, и про творчество. По ссылкам будет информация о конкретной книге для дальнейшего поиска Список книг ➡️ Программирование, теория для подготовленных: О шаблонах проектирования и их применении, ограничениях - на примерах ▫️Паттерны проектирования ▫️Паттерны объектно-ориентированного проектирования Вся правда о javascript: ▫️Вы не знаете JS - серия книг ➡️ Новичкам: ▫️Грокаем алгоритмы - алгоритмы решения классических задач для программистов ▫️Javascript,...

В том числе git stash - подробно Привет! Поговорим о командах git, не настолько часто применяемых, как git add ▫️git diff > diff.patch - создания файла изменений, diff.patch - имя файла ▫️git merge <имя_ветки_для_слияния> - выполняет слияние. Создает новый коммит с изменениями обеих веток. Сохраняет историю обеих веток ▫️git rebase - выполняет перенос коммитов из одной ветки в другую. Внимание, история коммитов веток изменится. Удобно, если ветка источник больше не нужна ▫️git branch -d <имя _ветки_для...

Инструкция по центрированию в CSS: 1) flex-контейнер: display: flex; justify-content: center; align-items: center; Вместо центровки контейнера можно блоку задать align-self: center; или margin: auto; 2) Если контейнер имеет фикс ширины или она в процентах, то блок центрируем по горизонтально: margin: 0 auto; 3) Можно использовать позиционирование, например: .container {   border: 1px solid black;   position: relative;   width: 100%;   height: 100%; } .block {   border:...

#ящик_с_инструментами #веб_разработка Установка и настройка Open Server Предыстория: Зачем нужен OpenServer? - Например у вас php-файлы и вам надо запустить локальный сервер. Решила написать инструкцию, также написала рекомендации по решению часто возникающих проблем ▫️скачиваем, устанавливаем и запускаем ▫️Открываем папку Open Server/domains и создаем папку сайта, например my-site ▫️в панели запущенных программ значок open server, если красный - не запущен, желтый запускается, зеленый запущен ▫️клик...

Привет! Поговорим о методах массивов в Javascript. Часть 1 Вводные материалы: 🔗Что такое массив? - читать 🔗Что такое метод? - читать ✍️Список методов (названия методов - ссылки на страницы MDN): 1) forEach() - применяет переданную функцию-callback ко всем элементам массива по очереди, но ничего не возвращает 2) map() - также применяет callback, но возвращает новый массив 3) filter() - применяет к каждому элементу переданную функцию проверки условия и возвращает новый массив элементов, для которых...