​​Отправка заявок на почту.
Очень часто требуется реализовать отправку сообщений из формы заказчику на почту или телеграмм(об этом уже был пост). А сегодня речь пойдет о валидации и отправки на почту без перезагрузки страницы(с помощью 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 подтягивать тоже важно

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

​​Пробелы в теории.
Раз уж это мой блог, то я тут рассказываю не только про свои успехи, но и про провалы. Вчера я узнал, что много не знал и это так и есть

У меня проявились проблемы с теорией флекса, я использовал сокращённое свойство flex не понимая, что оно делает, просто потому, что это работает. Все таки теория важна и стоит понимать зачем писать то или иное свойство, ведь на этом строится база для больших и интересных проектов и без этих знаний не получиться по-настоящему творить

Каждый в моей ситуации сделал бы свои выводы. Я же почитал статью на MDN, буду ещё не раз к ней обращаться, чтобы запомнить и больше не делать таких глупых ошибок, хотя надо было просто учить теорию, такие дела

​​Pet project.
Это проект, который ты делаешь для себя, некая тренировка скилов, сам делаешь дизайн, функционал и придумываешь идею. В таких проектах не будет правок от сторонних людей, только твое мнение, за это их и любят, ведь можно сделать что-то своё, раскрыть на полую свой потенциал и прокачать знания того или иного ЯП

А какие у вас есть pet project? Напишите в чате!

​​Grid или flex?
Сталкивать эти технологии лоб в лоб нет никакого смысла, так как они используются для разных задач. Flex работает только в одной плоскости x либо y, а с помощью сеток grid можно размещать и комбинировать элементы сразу в 2 плоскостях

Немного о поддержке, flex можно спокойно использовать и в львиной доле браузеров все работает, как швейцарские часы, но вот с гридами все немного иначе, если вы зайдёте в can I use, то увидите баснословные 96%! Но не спешите радоваться, так как другие свойства работают не во всех браузерах и везде по-разному

Сейчас верстка на flexbox, это обыденная вещь, но гриды стоит и нужно учить. За гридами будущее! Поэтому я нашёл свежий плейлист по гридам, где простыми словами объясняется довольно обширная тема тык

​​3 причины почему не нужен Pixel Perfect.
1)Дизайн макет и разные отступы. Дизайнер не верстальщик! Он не верстал макеты и не знает частые ошибки, которые опытному верстальщику видны невооружённым глазом, поэтому советы от верстальщика будут более уместны, чем полное соответствие макету. Простой пример: 
Внутренние и внешние отступы, если дизайнер сделал отступ от края блока до заголовка меньше, чем отступ заголовка до текста, то визуально кажется, что заголовок принадлежит другому блоку, а не тексту

2) Нужно больше времени, а разницы почти нет. Все упирается во время, ваш сайт будет верстать в разы сложнее и дольше, на что это влияет? Ни на что! Ваш сайт не будет грузиться быстрее, не будет выше в поисковых выдачах и даже не будет смотреться красивее, чем без pixel perfect(ну это уже зависит от проекта)

3) Измерять каждый пиксель — это бесполезный и никому не нужный труд, но если заказчик решил, что ему нужна pixel perfect верстка, то пускай готовиться к завышенным ценам, так как верстальщики не любят вымерять каждый пиксель

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

​​Logo.
Юху! Закончил верстку интернет магазина, это был первый опыт в верстке такого большого проекта. Скажу сразу — это не так страшно, как может показаться, header и footer везде повторяются, а большинство страниц однотипны. Основной труд здесь сконцентрирован на главной, каталоге, карточке товара и корзине, ещё может «О нас», но я решил отнести к однотипным, так как там только текст 

За время марафона знатно прокачал навыки верстки и дополнил свой стартовый шаблон большим количеством фич, так же обновил снипетты HTML,SCSS,JS

Теперь буду бомбить react и немного поверстаю, решил учить react постепенно, чтобы сразу не забивать голову. Давно хотел посмотреть курс «React путь самурая», а потом сделаю главный pet project, ради которого все это затевалось — чат на реакте

Буду делаться наработками и интересными материалами с вами, посмотреть результат можно тут, код прикреплю к посту

​​Игра то Google.
Решил немного разбавить ленту. Google выпустила веб игру в канун Хеллоуина. Управление происходит посредством рисования символов, у каждого противника есть свои символы, которые надо повторить. Игра доступна каждому пользователю, стоит лишь кликнуть на логотип кампании

А тем временем я продолжаю изучать React, чтобы создать свой чат. Сегодня познакомился с компонентой, сам реакт для меня не кажется какой-то дикостью, так как я уже немного изучал его, но были слабые навыки нативного Jan, да и сам не сильно понимал зачем он мне

Веселого Хеллоуина!

​​Улучшение для верстки №5.
Процентный line-height. Коротко о line-height, это свойство регулирует межстрочный интервал, простыми словами свойство отвечает за расстояние между верхним и нижним этажом текста. Можно указывать в пикселях, процентах, rem,em

Во всех программах для чтения макета: avocode, figma, photoshop, zeplin, line-height указывается в пикселях, поэтому при изменении шрифта, во время адаптива, появиться проблема с большим line-height, чтобы все время не изменять его можно воспользоваться простой формулой и добавить ее к себе в снипетты

line-height: (line-height в пикселях / font-size);

Калькулятор Гоблина.
Просто появилась идея сделать калькулятор драгоценных металлов, люблю делать мелкие pet projects, ведь благодаря ним начинаешь лучше понимать структуру языка, да и просто классно сделать что-то от души

Суть: Гоблину нужно посчитать своё состояние в разных драгоценностях: золоте, алмазах, изумрудах и сапфирах. 1 алмаз равен 2 золотым монетам, 1 изумруд равен 2 алмазам, а 1 сапфир равен 2 изумрудам. Вот такой незамысловатый калькулятор, результат можно глянуть тут

Макет туристического сайта.
Яркий макет, много интерактива, есть адаптивная версия. Есть сложный поиск, табы и слайдер. 
Макет можно открыть в sketch, figma, avocode

Тип: лендинг
Формат: fsketch
Уровень: сложный

#макет

PS: небольшое обновление канала :)

​​React. 
Знакомство с ним оказалось довольно быстрым, так как уже пытался писать какие-то программки на нём. React — это библиотека(фреймворк) разработанная программистами из Facebook, для создание SPA приложений. Основным отличием react является компоненты и их пропсы

Компонента — функция возвращающая jsx разметку, но эту функцию никто не вызывает, ее вызывает сам реакт под капотом. Но как тогда ее вызывать? Компонента это ещё и тег, в который можно поместить props

Props — объект, который передаётся компоненте, в качестве параметра, туда можно положить ключ-значение, чтобы впоследствии вывести его в компоненте

А пока, я продолжаю изучать react и скоро поделюсь новой информацией

​​Выгорание.
Изучать что-то новое это всегда сложно, поэтому программирование должно нравиться, иначе случиться выгорание. Не путайте выгорание с «нет результатов», выгорание случается у более опытных программистов, которые уже видят потолок или просто занимаются не тем по жизни

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

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

Желаю вам поменьше выгораний и не бросайте то, что реально нравиться, а лучше изучайте новое

​​Куда пойти программисту.
Офис — место для быстрой прокачки навыков, там собираются опытные специалисты своего дела. Много полезных знакомств и интересных людей. Подходит для людей, которые любят компанию и хотят быстрого старта

Фриланс — место, где тебе не подскажут и в тоже время место свободного графика. На фрилансе ты сам распределяешь время, финансы, отдых, сам ищешь заказчиков, учишься общаться с людьми и учишься вести деловую переписку

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

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

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

Где трудитесь вы? Проголосуйте в опросе!

​​Сотрудничество с дизайнерами.
Представьте, вы нашли хорошего дизайнера, вы видели его работы и понимаете, что он делает реалистичные макеты, без всяких там штук, которые почти невозможно сделать. Теперь представьте, что этого дизайнера заказчик попросил посоветовать верстальщика и он даёт ваш контакт. Звучит круто? Безусловно! Так почему бы так же не сделать?:)

Работа с партнерами это целая гора плюсов:
• проверенный человек(не кинет и не скроется с деньгами)
• уже работал и знаешь чего ожидать(дизайн, верстка и тд)
• дополнительный доход 
• дополнительные клиенты
• ещё больше известности о вас(если планируете развивать свой бренд)

Как это работает?
Пишешь, знакомишься, просишь портфолио, если дизайн адекватный, то показываешь своё портфолио и предлагаешь сотрудничество: «Если тебя попросят сказать верстальщика — дай мой номер, взамен я тебе дам 15% от заказа»

Это пример с дизайнером, но их может быть очень много, верстка, натяжка, seo и тд. Ведь заказчики обитают не только на фриланс биржах

​​Своя библиотека.
Решил создать библиотеку, чтобы понять как работают такие библиотеки, как swiper, typed, nouislider и другие

OnResize. Иногда нам нужно исполнить код только на определённом расширении. Допустим, по макету блок на расширении 767px превращается в слайдей, после 767px нам код слайдера не нужен, да и могут возникнуть ошибки. Поэтому я решил запилить такую простенькую библиотеку

Она включает 4 параметра, из которых 2 обязательных:
size: 767(размер)
code: функция с кодом, который нужно выполнить, в нашем случаи — инициализация слайдера 

По умолчанию стоит max-width, но благодаря двум оставшимся параметрам это можно изменить см. документацию, кстати о документации, это был мой первый опыт ее написания, не судите строго. Может у кого будут советы по коду, пишите, буду благодарен за обзор кода

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

Когда мы обращаемся к одному классу, то по-умолчанию swiper берет первый блок на странице, остальные слайдеры, с таким же классом начинают «ломаться», решением данной проблемы будет перебор через forEach:

let sliderCatalog = document.querySelectorAll(".catalog__block");

 sliderCatalog.forEach(element => {
      new Swiper(element.querySelector('.catalog__items'), {
      slidesPerView: 1,
      pagination: {
        el: element.querySelector('.catalog__info'),
        type: 'fraction'
      },
      });
   });

Иногда одинаковые слайдереры находятся ещё и в табах( в основном на каких-то каталогах товаров), поэтому вы можете столкнуться с проблемой, что все сделано правильно, но остальные слайдеры не работают, это связано со свойством display: none; так как значение none полностью удаляет объект со страницы, а так как стили подключаются первыми, js не успевает инициализировать слайдеры, лечиться это все следующим образом: 
Обертке задаём position: relative; а самим блокам 
&__block{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    transition: all .3s ease-in-out;
    &._active{
      opacity: 1;
      visibility: visible;
      position: static;
    }
  }
При _active все возвращаем на место и добавляем плавности. Готовый результат, а так же код прикреплю к посту

WOODER — Макет для тренировок.
Во макете реализованы интересные и нестандартные вещи, не стыдно будет положить в портфолио, буду его скоро верстать, расскажу чему научился и что нового узнал 

Тип: лендинг
Уровень: средний

#макет

FullPage.
Идея с фулскрином мне понравилась и я решил попробовать, хотя этот макет не сильно подходит под фулскрин, но его можно немного переделать. 

Как вы уже догадались в этом поможет библиотека FullPage.js, она очень популярна и гибко настраивается под любую задачу, прикреплю уроки к посту, сверстайте какой-то макет(можете взять выше приведённый wooder) и можете смело добавлять в портфолио навык работы с FullPage.js. Прикреплю к посту 2 интересных урока

Я уже совсем скоро буду проступать к верстке wooder и обязательно покажу интересные фишки, а пока хочу немного улучшить свой сайт — добавить кнопку «Загрузить ещё работы», основной функционал уже реализовал, осталось только поправить стили