404.
Самая распространённая ошибка сервера, это когда он не может найти нужную станицу по запросу. Для этой ошибки в wp даже предусмотрена отдельная страница 404.php

Я уже рассказывал про это в одном из своих постов, но теперь я сделал собственную станицу и подключил ее к wp! Поправил слайдер и пару мелочей по верстке и плагинам

Сейчас стоит вопрос:
«Делать ли отправку форм через плагин или не нагружать сайт и сделать все в ручную?»
Думаю всё-таки сделать самому так как подключать целый плагин для 2 форм бессмысленно, если у вас есть другое мнение — напишите в чате

​​Улучшение верстки №1.
Запускаю новую рубрику, в ней я расскажу про крутые фичи, о которых мало кто знает, начнём!

_ibg.
Многие на курсах говорят, что картинку беграундом лучше не ставить, все дело в том, что при посадке на CMS изменяются пути и поэтому нужно прибегать к костылям. Да и удобнее поменять картинку прямо в HTML, чем лезть в стили. Для этого был придуман ibg(image background), подробности есть по ссылке или в этом видео

PS: родителю картинки не забудь указать:
  &__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

  }
Чтобы отобразилось

8 проектов для того, чтобы стать Full Stack разработчиком.
Давно не было статей, увидел одну английскую статью с крутыми идеями для прокачки навыков

Проекты идут от простого к сложному и в каждом есть что-то интересное тык

​​​​Улучшение верстки №2.
Вторая часть рубрики, сегодня речь пойдет о снипеттах 

Допустим что бы создать структуру документа в html вводим ! + tab. За этим способом вы можете вводить в программу свои "сокращения". Снипетты можно создать не только для html, но и для любых языков программирования. Правильно сделанные снипетты могут ускорить процесс програмивания в решении рутинных задач

Также к этому посту будет прикреплённо видео с подробным разбором снипеттов в vs code

Image Uploader.
Сделал первый проект из недавнего поста о 8 идеях для Full Stack. Получилось даже лучше чем планировал, сделал за все выходные.

Все четко по ТЗ:
•Файлы можно загрузить дропом в область или нажав на кнопку
•Они автоматически(без перезагрузки страницы) летят на сервер
•Во время загрузки срабатывает прелоадер
•По итогу выводиться картинка и ссылка(копируется в буфер обмена по нажатии на кнопку)
•Ссылка ведёт на картинку

Задание выполнено, даже сделал адаптивно. Поиграться с кодом можно тут, скоро куплю домен и хостинг и уже смогу кидать демо с бэкендом

DLE.
Постов не было т. к. трудился над заказом. Пару слов о заказе: сайт с электронными книгами, нужно было сделать редизайн(поменять стили, цвета, шрифты и расположение блоков), бюджет был 50$

Сайт находился на cms DLE, не сильно разбираюсь в рейтингах, но комьюнити маленькое. На сайте не было файлов .php, вместо них были .tpl(что-то типа упрощенного php, встречался с ними, когда брал заказы по opencart), но при открытии файлов все буквы у меня почему-то слетали, потом я загуглил и оказалось что у сайта другая кодировка, файлы соответственно нужно открывать с такой кодировкой, теперь буду внимательней

​​Улучшение для верстки №3.
Правильно выбранная среда разработки значительно ускоряет процесс. Поставь тему с цветами не режущими глаз, например я использую horizon theme

Но на этом среда разработки не заканчивается. Стул, стол, освещение — играют важную роль. Стоит уже сразу задумываться о своём здоровье, выбери удобный для себя стул, настрой освещение, чтобы комфортно было работать и можно было сосредоточиться именно на процессе, а не на скрипящем стуле

Самое первое на что нужно обращать при выборе железа, нет, это не на мощность, а на экран, в идеале лучше купить сразу несколько мониторов

Улучшая среду ты ускоряешь процесс

​​Ещё одна небольшая работа в портфолио. 
Сегодня решил немного поверстать, получилась прикольная работа, из фич: адаптивный слайдер, прикольный бургер и решил поиграться с ховерами в футере

​​Домен и хостинг. 
Теперь я владелец сайта в интернете. Планирую поковыряться в возможностях хостинга и потестить всякие штуки вроде отправки писем на почту и тд. А пока расскажу как все было:

Доменное имя. Домен который я планировал был уже занять, поэтому я просто выбрал tsykunov.com , приобрёл на reg.ru , после оплаты на почту пришло письмо с логином и паролем, а так же подтверждением почты. 

Хостинг. С хостингом все немного посложнее, выбор был большой, да и я не разбираюсь в них. Выбор был между макхостом, beget и hostinger. Изначально планировал купить на hostinger с расположением в Нидерландах, но слишком низкая цена заставила насторожиться(возможно, потом перейду на него), а пока решил выбрать beget

​​I miss you!
Нашёл крутую мини-библиотеку, которая меняет иконку станицы, когда пользователь переключает вкладку. Видел это на некоторых сайтах и мне всегда было интересно как это сделано, теперь ты тоже знаешь. Единственный минус — наличие jQuery, но в остальном хорошее дополнение для сайта

​​Блок Элемент Модификатор.
Методология БЭМ создана в Яндексе для разработки сайтов, которые надо делать быстро, а поддерживать и обновлять долгое время. БЭМ значительно ускоряет верстку, я пробовал писать классы по-разному, но остановился на этой методологии

Основным плюсом БЭМ является возможность использовать блок несколько раз и не путаться 
 во вложенности, ну и конечно модификаторы. Приведу очень частый пример, есть title, но в некоторых блоках он чёрный и можно просто добавить класс title_black и тогда будет понятно зачем он нужен и не будет нагромождения непонятных классов

Хороших уроков по бэму не нашёл, если знаете — поделитесь в чате, но лучше всего познавать на практике, это будет намного эффективнее

​​SSL.
Думаю многие видели замочек на некоторых сайтах, так вот это SSL сертификат, он служит для более быстрой и безопасной передачи данных. Обычно его дают бесплатно на один год домен провайдеры, а потом нужно доплачивать некую сумму

Лично я решил не брать, хотя https протокол выглядит посолиднее и если у вас интернет магазин или какой-то проект где нужны данные пользователей(вроде кредитных карт или паспортных данных), то лучше переплатить, но получить безопасное соединение и меньший шанс утечки информации

А вообще если тебе интересно, какие ещё есть протоколы и как работает интернет, то советую глянуть это видео тык

Рано или поздно каждый веб программист приходит к необходимости приобрести хостинг, ведь если ты никогда не работал с ним, то на реальном проекте придётся потратить немало времени на понимание

+ 1 к портфолио.
Сверстал небольшой, но красивый лендинг, использовал mobile first и анимацию средствами нативного js. Кому интересно, то прикреплю код, кстати подписывайтесь на github . Итог можно посмотреть тут

​​Анимация сайта. 
Сегодня расскажу какие бывают анимации и где их использовать, начнём с простого:

1) анимация при наведении 
Это та анимация, которая срабатывает, когда ты наводишь курсором на ссылку, записывается обычными средствами css
@media (min-width: 992px){   
  &:hover{
   }
 }

2) keyframes анимация 
Тут уже больше возможностей и есть где разгуляться фантазии. Благодаря keyframes можно делать покадровую анимацию элемента, задавать задержку, продолжительность, тип... Знаю отличный и понятный урок по keyframes тык

3) анимация при скролле
Это уже более обширный вид анимации, для которого обычно подключают библиотеки вроде wow.js и других. Но я нашёл другую более удобную библиотеку под названием ScrollReveal, библиотека позволяет гибко, а главное быстро настраивать анимацию при прокрутке страницы. Все готово уже с коробки, осталось только пользоваться

​​Приоритетность стилей в css.
Иногда нужно перебить какой-то стиль или записать свой поверх другого, но многие путают приоритеты, сегодня разберёмся 

Самый маленький приоритет имеет обращение к элементу, например 
p {
  color: red;
}

Затем следуют классы
.red{
 color: red;
}

Но классы пересевает id
#blue{
 color: blue;
}

Id перебивает стили внутри тега(в HTML файле)
<p style = "color: green"></p>

А потом идёт легендарный !important
p {
  color: red !important;
}

PS: обращения можно вкладывать друг в друга, так будет расти их приоритет, подробнее тык

​​Улучшение верстки номер №4.
В прошлых частях мы поговорили о снипетах и рабочем месте. А тема сегодняшнего поста пойдёт о препроцесорах. одни из самых популярных препроц. Это 
• Sass
• Scss
• Less

Основана их суть — ускорения верстки. Одни из основных возможностей предпроцесоров:
Циклы, Переменные, Миксины И удобный синтаксис. Также предпроцесоры очень помогают при вёрстке по методологиям (Например Бем). Я рекомендую попробовать каждый из них, и выбрать лучшие для себя. Но less уже почти не используется, поэтому рекордную выбирать между sass и scss, в прикрепленном ролике подробно описываются различия этих препроцессоров 

#Улучшениеверстки

​​Отправка заявок на почту.
Очень часто требуется реализовать отправку сообщений из формы заказчику на почту или телеграмм(об этом уже был пост). А сегодня речь пойдет о валидации и отправки на почту без перезагрузки страницы(с помощью Ajax)

Валидация формы — дополнительная проверка на правильность заполнения формы через js
пример:
В поле с почтой обязательно должны быть символы @ и . 

С помощью Ajax можно отправлять запросы на сервер без перезагрузки страницы, это очень удобно. Подготовил очень подробный часовой урок по валидации форм и отправкой их на почту, советую посмотреть

Если есть вопросы — пишите в чате

Обводка текста CSS.
Прикольный эффект для текста, который выделит ваш сайт на фоне других, рекомендую делать большой font-size, чтобы обводка лучше смотрелась, обычно встречал в различных выпадающих меню, но это уже на ваше усмотрение. Посмотреть пример можно тут 

Кому интересно, вот код из примера:
      a{
        font-size: 80px;
        font-weight: 700;  
        -webkit-text-stroke-color: #ba5353;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke-width: 0.02em;
        background-clip: text;
        -webkit-background-clip: text;
        background-repeat: no-repeat;
        background-image: linear-gradient(#ba5353 0%,#ba5353 100%, );
        transition: all .5s ease;
        background-size: 0 100%;
        -webkit-background-size: 0 100%;
        @media (min-width: 992px){
          &:hover{
            background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
          }
         }
      }

Wordpress для разработчика.
Уроков много, но все они бегло пробегаются по основам и очень сложно найти реально годные и крутые видео. Сам по себе Wordpress это большая тема в которую стоит углубиться, чтобы лучше понимать психологию создания сайтов

Мой друг запустил серию видео для разработчиков, которые хотят прокачивать свои знания и разрабатывать крутые темы и плагины тык

​​Новый рубеж.
Во время школы времени почти не было. Теперь буду восстанавливать прежний уровень и через день выпускать статьи

В планах сверстать 2 интернет магазина по марафонам, ещё нашёл большое количество ярких и современных макетов, которые буду верстать на каникулах. В идеале ещё написать свой чат на реакте(нашёл целый плейлист по созданию чата), пока не планирую развиваться в сторону react, но думаю навыки не будут лишними, а js подтягивать тоже важно

Могу по запросу скинуть ссылки на курсы, пишите в личку. Желаю вам заниматься тем, чем нравиться, вне зависимости от жизненных обстоятельств!