​​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 подтягивать тоже важно

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

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

У меня проявились проблемы с теорией флекса, я использовал сокращённое свойство 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 и скоро поделюсь новой информацией

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

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

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

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

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

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

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

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

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

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