Шпаргалка по веб разработке, 1С

Если нужно на стороне сервера сделать небольшую задержку, то в php есть функция sleep(4), она на 4 секунда задержит ответ.

Когда делал свой слайдер, то при частом клике по кнопкам вправо/влево сбивались подсчёты сдвига слайдов, потому что ещё не закончилась анимация сдвига слайда кликал снова и подсчёты нарушались. Исправил тем, что задал флаг для анимации и поставил его в false, при клике по кнопке я проверяю, чтобы фдаг был false, значит можно выполнить действия, выполнял действия и ставил флаг в положение true. Затем вешаем событие transitionend на тот блок, который анимируется, в моём случае это обёртка слайдов и в обработчике этого события обратно ставим флаг в положение false, это значит что кликая много раз на кнопку ничего не произойдёт, пока анимация не закончится, как только она закончилать флаг меняется и снова можно произвести действия по клику.

Ссылка на IconMoonТут

Ссылка на библиотеку CDN для font-awesome Тут

Meta теги, которые учитывает Яндекс - тут.

Meta теги, которые учитывает Google - тут

У slick слайдера есть событие afterChange, вот тут его описание. Без разницы как прокручивается слайдер, по клику на стрелки или перетаскиванием мыши, обработчик этого события предоставляет нам переменные текущего слайда, следущего слайда, варианты разные. Записываю это, потому что нужно было чтобы при прокрутке сладера, получить информацию из текущего элемента и дальше уже использовать эту информацию в своих целях.

Посмотреть и разобраться со слайдером swiper на чистом js. Тут

Чтобы подключить шрифты гугл по cdn, то вот тут(google fonts). Чтобы скачать шрифты в проект то тут(google fonts helper). Также у гугл есть шрифтовые иконки по типу FontAwesome, чтобы их подключить пишем в теге head html файла такую ссылку <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">, можно перейти на их сайт - https://fonts.google.com/icons?selected=Material+Icons и там выбрать иконки, справа от иконок будет показан тег span и при выборе иконки будт показан класс для этого тега и слово, которое надо вписать в этот тег.

Когда я пытался сделать для мобильного меню плавное заезжание и выезжание, т.е. плавное изменение высоты списка ul, то высота менялась у списка, а пункты меню не скрывались. Надо просто когда меняю высоту у списка, задать этому списку overflow: hidden и ещё убирать padding, иначе они мешают. А добавлять падинги уже через js.

Посмотреть у Минина видео о плагине Quokka, он ускоряет разработку на js.

Посмотреть у Минина 4х часовое видео о графиках на Canvas

Посмотреть у Минина курс для новичков по Git и GitHub

Вот тут находится сайт textilite.ru. Это админ панель для управления содержимым на статическом сайте

Когда делаю модальные окна, то чтобы при открытии окна прокрутка документа блокировалась надо прописывать вот такое свойство у тела документа - document.body.style.overflow = 'hidden';, ну а при закрытии удалять св-во hidden - document.body.style.overflow = '';

Как вычислить сколько занимает % блок, если известна общая ширина контейнера и шира блока в px. Например блок занимает 494пикселя, а общая ширина 1270пикселов, тогда в свойстве flex: 0 0 494 / 1270 * 100%;. Точно также можно перевести и line-height: 29 / 24 * 100%; 29px это высота строки в px, а 24 это размер шрифта. Всё это пишется в scss файле

Есть такое занчение свойства justify-content: space-evenly; , оно похоже на space-around, но делит расстояние между элементами поровну