Привет! Поговорим о командах git, не настолько часто применяемых, как git add

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

👌 Хотите видеть всю историю git прямо в редакторе кода? Установите расширение Git Graph(VS Code) - все изменения будут отражены в виде дерева.

Подробнее о git stash читайте в части 2.
#git

Привет! Продолжаем разговор о git - на этот раз подробно о git stash

Читать часть 1 о git

▫️git stash save 'check menu' - сохраняем именованный stash
▫️git stash list - просматриваем список сохраненных stash (их может быть несколько и у них есть номера, которые можно использовать для перехода к конкретному stash)
▫️git stash pop - загружает stash в текущую ветку и удаляет stash
▫️git stash apply - загружает stash, но в отличие от git stash pop не удаляет его
▫️git stash apply "stash@{n}" - загружаем stash с номером n - некоторые системы требуют здесь кавычки, некоторые наоборот

🔗 Шпаргалка по консольным командам git
#git

Привет! Простые эффекты для кнопок для быстрого применения.

Кнопки на codepen
Чистый css даже без @keyframes.
Иногда вам дают макет без styleguide и нужно срочно придумать для кнопок простые эффекты.
Сложные будут, но их буду разбирать отдельно.
#css #buttons

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

Привет! Книжная полка - вам могут пригодится эти книги (не только программирование, в списке разные книги для людей, занимающихся цифровым творчеством):

➡️ Программирование, теория для подготовленных:
О шаблонах проектирования и их применении, ограничениях - на примерах
▫️Паттерны проектирования
▫️Паттерны объектно-ориентированного проектирования
Вся правда о javascript:
▫️Вы не знаете JS - серия книг

➡️ Новичкам:
▫️Грокаем алгоритмы - алгоритмы решения классических задач для программистов
▫️Javascript, сильные стороны - используй лучшее в javascript
▫️Теоретический минимум по computer science - все, что нужно знать разработчику
▫️От джуна до синьора - как улучшить код и не только на конкретных примерах
▫️Психбольница в руках пациентов. Алан Купер об интерфейсах - интерфейсы для пользователя, а не для разработчика.

➡️ Вечная классика, легендарные книги:
▫️Искусство программирования
▫️Компьютерные сети

➡️ Дизайн, креатив, творчество:
▫️Кисло-сладкий дизайн: руководство и советы для новичка в веб-дизайне - о том, как выполнять заказы, какие особенности работы, о портфолио
▫️Кради, как художник - 10 уроков творческого самовыражения
▫️Пиши, сокращай - как создавать сильный текст

➡️ Цифровой дизайн, общая теория:
▫️Школа дизайна. Макет. - основные правила и практические примеры создания макетов
Шрифт:
▫️Школа дизайна. Шрифт. - основные правила и методы работы со шрифтом
▫️Дизайн для недизайнеров. Принципы оформления и типографики для начинающих
Цвет:
▫️Искусство цвета - закономерности цветовых контрастов, цветовой гармонии и цветового конструирования

➡️ Вам может быть интересно, разное:
▫️Теоретический минимум по Big data. Все, что нужно знать о больших данных
▫️Карьера программиста - прохождение собеседования, программирование, алгоритмы
▫️PANTONE. 35 вдохновляющих палитр для жизни и творчества - источник вдохновения
▫️Фантасмагория с головоломками

Ссылка на отдельный пост с книгами по дизайну

Ссылка на пост о том, как учиться программированию

Когда ты фронтендер на все 100%

Привет! ❗️Update и дополнение❗️ про обводку текста - в прошлом посте про обводку найден недочёт

➡️ Итак, один из способов сделать обводку текста: задать тень для него (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 работать не будет, в этом случае,
используйте стили:
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: red;
  -webkit-text-fill-color: transparent;

➡️ И бонус: градиентный текст(может поддерживаться не всеми браузерами):
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(to bottom right, darkblue, lightgreen, orange);

🔗 Посмотреть примеры в codepen
#css #обводка_текста

Привет! Подборка интересных телеграм-каналов о веб-дизайне для вдохновения и новых идей:

🎨https://xn--r1a.website/levelofnorm

🎨https://xn--r1a.website/desinspire

🎨https://xn--r1a.website/webdesign_uiux

И бонусом канал о карьере разработчика, создании резюме и поиске работы в ИТ:

🏆https://xn--r1a.website/doroninit

А в этом чате можно узнать много нового, задать вопрос и познакомиться с коллегами по цеху разработки:

🙋‍♀️🙋‍♂️https://xn--r1a.website/natti_jun_front_chat

Копирование массив и объектов в JS в следующем посте

Привет! Как скопировать массив или объект в 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];

2) Копирование объектов
const user = {login: 'kruglov', password: '3456'};

/*  Как и для массива, так неверно, мы получим ссылку на оригинальный объект */
const copyUser = user;

/* можно использовать spread-оператор */

const copyUser = {...user};

/* Для тех объектов, значения ключей которых - примитивы, можно использовать Object.assign() */

Object.assign(copyUser, user);

/* Можно в assign передать несколько объектов для копирования */

/* Для глубокого копирования объектов, ключи которых не примитивы, можно использовать JSON.parse */

const userCopy = JSON.parse(JSON.stringify(user));

/* Терзаем задачу дальше? - начиная с версии 17 NodeJS доступна функция structuredClone.
Еще можно использовать библиотеку lodash, функция cloneDeep */

/* в тексте поста переопределяются const переменные, поскольку они не будут вместе в одном коде, выбирайте подходящий */

Документация:
🔗 https://learn.javascript.ru/object-copy
🔗https://doka.guide/js/shallow-or-deep-clone/
#js #frontend

😂🙈 это по сути иллюстрация того, как начиная работать в компании, чувствуешь себя самозванцем.

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

Привет! Полезные расширения для Chrome:

➡️ ColorZilla - пипетка, получить цвет с любого места веб-страницы 🔗

➡️ Perfect Pixel - сверить с макетом путем наложения на страницу 🔗

➡️ Vue Devtools - просмотр компонентов Vue, state, данных, время выполнения запросов 🔗

➡️ React Developer Tools - просмотр компонентов React 🔗

➡️ Redux Developer Tools - к React в комплект, state, данные, время 🔗

➡️ Wappalyzer - узнать стек сайта 🔗

➡️ Project Naptha - скопировать текст с картинки 🔗

➡️ Web Developer Checklist - проверяет качество фронтенд-кода, проблемные области сайта 🔗

➡️ Check My Links - проверяет работоспособность всех ссылок 🔗

➡️ Page Ruler - быстро определяет размеры элемента на странице 🔗

➡️ Flickr Tab - для вдохновения: при открытии новой вкладки, в ней показывается красивая фотография 🔗

➡️ EditThisCookie - все cookies сайта, добавлять, изменять, копировать в json-формате 🔗

➡️ LambdaTest - тест в различных браузерах, эмуляторах устройств 🔗

➡️ LightHouse - тест оптимальности, проверка seo 🔗
#dev

Привет! Про медиа-запросы в js-коде:

Например, у нас js-поведение блока зависит от размера экрана, добавим переменную:
let x = window.matchMedia("(max-width: 700px)") и дальше можно по условию выполнять действия.

Документация: https://www.w3schools.com/howto/howto_js_media_queries.asp🔗

#js #frontend

Привет! Обновление гайда по webpack

Читать гайд

Что нового?
⬆️ добавляем папку node_modules в .gitignore
⬆️ Избавляемся от dist, копируем html, все картинки, sprite.svg, favicon

Что и так есть в гайде?
✔️сборка от пустой папки проекта
✔️sass, тестовые стили
✔️локальный сервер
✔️копирование ресурсов(но ранее в гайде копировались не все ресурсы)

🔗Документация
🔗Статья, более продвинутая настройка webpack
#webpack

Привет! Врываюсь с методами js, для родителей и потомков в DOM-дереве

Привет! Поговорим о методах и свойствах js, связанных с родителями и потомками в DOM-дереве

Сначала немного определений: чем отличаются дочерние узлы и дочерние элементы?
📝Дочерние элементы - это прямые потомки элемента, а дочерние узлы - это потомки вместе со своими потомками и так далее

Итак, методы и свойства js, связанные с темой:

➡️ contains - возвращает Boolean-значение, проверяет, является ли элемент дочерним узлом другого элемента:
item.contains(list) - является ли item дочерним узлом list

➡️ closest - возвращает элемент, либо null, ищет ближайший элемент, соответствующий селектору. Может вернуть сам элемент, либо ближайшего родителя, который соответствует селектору, либо null, если таковых нет:
btnBuy.closest('.card-item') - так можно получить карточку товара - родителя данной кнопки, чтобы например, поменять стили карточки при нажатии на кнопку

➡️ element.parentNode и element.parentElement - эти свойства возвращают родителя для element. Отличие только в том, что для тега html parentNode вернет document, а parentElement - null.

➡️ element.childNodes и element.children - так же похожи, оба возвращают потомков element, но element.childNotes - вернет дочерние узлы, а element.children - дочерние элементы. Приставка Node как раз и означает узел

➡️ element.firstChild и element.lastChild - позволяют получить первого и последнего потомков element.
#js #dom

Привет! Разбираемся в коллекциях HTML-элементов

Привет! Пост о коллекциях HTML-элементов. Что такое, почему не массив, она живая или нет, они еще и разные и так далее

📝 Сначала определения: коллекция HTML-элементов - набор элементов веб-страницы, порядок в котором соответствует порядку в DOM.

📝 Бывают живые коллекции и статические - живую можно изменить с помощью js, а статическую нет.

📝 Есть две разных структуры данных HTMLCollection и NodeList:
HTMLCollection - это только HTML-теги, а NodeList - это еще и текст, оставшийся без тега, и, например, комментарий.

📝 HTMLCollection всегда живая, а NodeList может быть статической, но может быть и живой - в зависимости от того, каким образом она получена

Методы получения элементов
▫️element.querySelector('.card') - производит поиск внутри element и возвращает первый соответствующий

▫️element.querySelectorAll('.item') - аналогичен, но возвращает коллекцию элементов, соответстующих селектору. И это статический NodeList.

▫️element.getElementById('user') - возвращает один элемент с заданным id, следует помнить, что на странице может быть только один элемент с данным id - это уникальный идентификатор

▫️element.getElementsByClassName('text') и element.getElementsByTagName('li') - оба возвращают HTMLCollection

▫️element.getElementByName('user-name') - крайне редко встречается, но возвращает живой NodeList. Также, живой NodeList вернет свойство childNodes

Почему не массив? - Массив отсортирован по индексам, коллекция не имеет индексов, хотя и итерируется - по порядку добавления в DOM. Коллекцию можно преобразовать в массив, например const arrLink = Array.from(linksCollection);

Перебрать коллекцию HTMLCollection можно перебрать используя цикл for ... of (не путать с for... in), а NodeList можно также перебрать методом forEach
#dom #collection

[Раньше я быстро писал некрасивый и нерабочий код, но спустя многие годы упорной работы я перестал писать его быстро]

Всем удачного дня!