Установка и настройка Open Server
Зачем надо: например у вас php-файлы и вам надо запустить локальный сервер

▫️скачиваем, устанавливаем и запускаем
▫️Открываем папку Open Server/domains и создаем папку сайта, например my-site
▫️в панели запущенных программ значок open server, если красный - не запущен, желтый запускается, зеленый запущен
▫️клик по значку, Настройки -> Домены, добавьте созданный в domains домен
▫️Дополнительно -> phpMyAdmin - БД, указываем имя пользователя и пароль, откроется страница работы с базой
▫️Мои проекты -> my-site запуск сайта
▫️Также Настройки -> Меню задайте браузер и редактор по умолчанию

🟥 нет доступа к c://windows/system32/drivers/etc/hosts:
▫️если файла нет, создайте в другой папке файл hosts без расширения, вставьте в него стандартный текст этого файла, сохраните и перетащите в etc
▫️если не работает, можно запретить изменять hosts: Настройки -> Сервер -> поставьте галочку и в файле hosts напишите в конце строку: 127.0.0.1 my-site

Еще про восстановление hosts файла

Учим ООП, друзья))
Учебник

Привет! Генерация id во временных данных в вашем приложении(на примере vue)
id как в базе данных - произвольная строка - плагин uuid

1) npm install uuid | yarn add uuid
2) подключаем:
    import { v4 as uuidv4 } from 'uuid';
3) применяем к массиву:
    state.notes.forEach((note) => {
      note.id = uuidv4();
  });
4) смотрим результат с помощью  vue devtools для chrome

#id #generation_id

Тоже часто думаю о развитии из frontend в fullstack

Привет! Основные способы центрирования блоков в 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: 1px solid red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

4) Если известны размеры элемента:
.block {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  position: absolute;
  left: calc(50% - 300px / 2);
  top: calc(50% - 300px / 2);
}

5) Если нужно строчный элемент центрировать по горизонтали в контейнере, то контейнеру задаем
text-align: center;

🔗Ссылка на полное руководство по центрированию
#css #центрирование

Привет! Про обводку текста
Если нам надо сделать границу у кнопки - мы задаем border.
Как сделать обводку текста - то есть, как будто каждую букву обвели ручкой по контуру?
Нужно задать тень для текста (text-shadow), причем тени задаем с каждой стороны
text-shadow: 1px 0 1px #000,
    0 1px 1px #000,
   -1px 0 1px #000,
   0 -1px 1px #000;

Как сделать текст при этом прозрачным? - Читайте об этом, а также о том, как сделать градиентный цвет текста в этом посте

#css #обводка_текста

Привет! Поговорим о командах 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