Programmer Way | AI

​​Google Analytics.
Неделю назад я поставил себе на сайт аналитику от гугла, теперь стало понятно, зачем гуглу информация о вашей стране, возрасте, поле. При правильном использовании это может лучше понять аудиторию и повысить продажи, улучшить конверсию и приток от рекламы

Я узнал, что меня смотрят из разных уголков планеты, от США до Колумбии и это очень вдохновляет. Ведь всего в несколько кликов я узнал немного больше о посетителях моего сайта, просто подключив скрипт на станицу. Планирую дальше допиливать сайт, так как осталось очень много косяков, да и jQuery я давно уже не использую

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

​​Задачки на собеседованиях. 
Вчера посмотрел собеседование очень странного джуна, а вопросы были минимум как для миддла. Заголовок видео не соврал:) пока смотрел, успел выписать кучу интересных моментов, вот некоторые из них:
•Includes
•Yield
•Tree shaking
•Set, Map и др.

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

​​Вебстудия.
Это определенная команда разработчиков, чаще всего: дизайнер, верстальщик и бэкендщик(настройщик cms). С такой командой уже можно искать крупных клиентов, хотя первое время вебстудия будет уходить в минус и будет потрачено кучу нервов, поэтому не каждый решается её создать 

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

+1 работа в портфолио.
В этот раз решил запилить собственную анимацию при скролле, получилось неплохо, решил верстать макет в фигме, так как у меня не работал авакод, макет простой, но объёмный, посмотреть можно тут. Во время верстки возник интересный вопрос: «А всегда ли главный экран должен быть фулскином и как это влияет на пользователя?» что думаете? Напишите в чате

​​Как верстали в 2008.
Как верстальщики справлялись, когда у них не было флексов и гридов, а векторные изображение почти не использовались, очень интересное видео о том, как создавали компонент с помощью костылей, а потом ещё прописывали дополнительный код для IE6

Без border-radius, без box-shadow, все приходилось вырезать в фотошопе и вставлять в таблицы, JavaScript в css. Иногда полезно узнать то, что было, чтобы лучше предсказать тенденцию. Можете ещё посмотреть видео о том как бы это выглядело сейчас

​​Ведение соц. сетей.
Для программистов, в особенности фрилансеров, вести соц. сети это очень полезно. Что вам мешает завести станицу в инстаграм, фейсбук, вк, писать статьи в твиттер — все это даёт большие возможности. Тем полно, а опыт, который вы получаете, безграничен и вы можете делиться им вечно. Я уже не говорю, что для фрилансера это может стать основным источником заказчиков

Так почему никто не ведёт соц. сети, для получение бесплатного фидбека, нахождения работодателей, заказчиков? Сложно, лень, нет времени. Are you kidding? То есть на просиживание штанов в соц. сетях есть время, а на ведение нет? Да, это сложно и да порой будет хотеться забить на все, но зачем тогда вообще идти в программисты, если боятся неизвестности, боятся меняться

Лучшим советом в этом случае будет не сомневаться, либо вести, либо не вести, ведь если вы сомневаетесь, то вы уже тратите свою энергию и вы уже делаете что-то не так

GitHub.
Удалённый хостинг для различных проектов, если ещё не знакомы с ним, то советую посмотреть это видео, но сейчас не об этом, интересно посмотреть ваши профили и проекты, подписывайтесь на мой github профиль, чтобы я смог быстро найти ваш профиль, взамен я подпишусь на вас. Планирую сделать описание для всех репозиториев, чтобы было удобнее пользоваться и вообще будет полезно узнать, как вы оформляете проекты

Red Square.
Это мой самый бесполезный проект, но самый прикольный. По сути это обычный красный квадрат, которому можно изменять размер, цвет, задавать обводку или даже сделать его кругом. Хотел потренировать навыки взаимодействие с css и работой с DOM

Из фич: темная тема, которая запоминается при перезагрузке браузера, zoom, изменяемое боковое меню(немного помог один знакомый). Это первая версия, так что там есть много косяков, которые я постараюсь исправить. Вообще на верстку особо не акцентировал внимание, хотел поработать с нативным js. Получилось прикольно, ссылку прикреплю к посту, можете сами потестить

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

Теперь немного об отдыхе, это не только лежание на диване. Отдых — это в первую очередь отвлечение. Есть люди, которые могут отдыхать просто переключаясь на другой тип работы, например: рисование, лепка, уборка и тд. Я же отдыхаю, когда бегаю с друзьями или хожу на турники

И самым большим советом для программистов будет отдыхать вне экрана. Это означает не сидеть за телефонам, телевизором или играть в какие-то игры, лучше пойти на природу и проветрить мозги

​​Ключевые слова.
Много кто видел, но мало кто знает. В видео автор рассказывает про ключевые слова такие как: initial, inherit, unset, revert для задания css свойств. Если вкратце, то:

Initial — каждое свойство в css имеет начальное (initial) значение. Оно никак не связано с типом HTML-элемента, к которому применяется

Inherit — наследует нужный стиль у ближайшего родителя

Unset — ключевое слово unset работает так же, как и inherit для наследуемых свойств. Для ненаследуемых свойств unset ведет себя как initial

Revert — сбрасывает стили до браузерных значений

​​Улучшения для верстки №6.
Другой адаптив. Допустим, чтобы поменять шрифт у заголовка на определенных расширениях, вы создаёте файл на подобие media.scss, затем прописываете все бреикпоинты, которые вы используете в проекте. Обращаетесь к заголовку, даже если вы работаете по БЭМу, порой вложенность бывает очень большой. И только потом изменяете ему шрифт. Звучит сложно, правда?

А если я вам скажу, что можно прописывать медиа запросы прямо в стилях заголовка, но вы тут же возразите мол: «Медиа запросы разбросанные по разным файлам влияют на производительность сайта» и тут я с вами соглашусь, но есть одно но — gulp, а точнее его пакет gulp-group-css-media-queries. Этот пакет объединяет все медиа запросы в единый файл и подключает его в самый конец scss кода. Если вы ещё не знаете, что такое gulp, то можете посмотреть это видео, там же и есть подробное применение этого пакета

​​API и json.
Множество программ и библиотек предоставляют свой API, но что это такое? Сейчас разберёмся

API — это предоставление программой доступа к ее функционалу, если вкратце, то это набор команд, благодаря которым можно взаимодействовать с данной программой, библиотекой и тд. Это делается через определенный запрос, обычно ответ присылается в json формате, затем он обрабатывается и выдаётся на клиентскую часть, как какой-то элемент. У каждого программиста есть своё понимание API, я постарался объяснить простым языком

json — самый распространённый формат передачи данных. Json текст выглядит практически так же как и JavaScript объект. Так же для передачи данных можно использовать устаревший xml или portobuf

Ещё советую глянуть прикреплённое видео по API

noUiSlider.
Ползунок для выбора диапазона или просто значений на сайте. С большим функционалом от передачи значений на сервер до соединения с полем ввода 

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

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

​​Новые правила деловой переписки.
Я прочёл эту книгу и могу посоветовать ее тем, кто часто общается по почте или просто ведёт переписку с начальством, клиентом, заказчиком. Если у вас есть свободные двадцать минут на эту книгу, читайте всё до первого раздела и дальше посмотрите на любые разборы из раздела «Практика»

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

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

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

Закончить хотел бы цитатой из книги: «Например, фрилансер сделал себе красивый личный сайт с работами, биографией и всем остальным, что нужно для резюме. Теперь ему удобнее не сочинять письмо на каждую вакансию, а кидать одну ссылочку. Но читателю может быть неудобно переходить на сайт и искать там нужную информацию. А удобство читателя нам важнее»

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

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

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

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

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

#макет

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

Когда мы обращаемся к одному классу, то по-умолчанию 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 все возвращаем на место и добавляем плавности. Готовый результат, а так же код прикреплю к посту

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

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

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

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

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

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

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

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