Всем привет! В последнее время посты выходили довольно редко, все потому, что я работал над заказом, до этого мне удавалось брать лишь мелкие заказы до 10-15$, однажды мне даже пришел заказ 50$, нужно было сделать редизайн готовой верстки: поменять цвета, шрифт, некоторые классы, у меня уже был об этом пост на канале, поэтому не буду зацикливаться. Но это были просто мелкие доработки, нововведения в существующие проекты и исправление багов, мне же хотелось сделать что-то с нуля, а не копошиться в чужом коде

Предисловие

На весенних каникулах я поехал к бабушке, 24.03 я решил прислать свое резюме в чат по поиску вакансий(JavaScript Jobs), мне написал заказчик и предложил сделать верстку, он мне прислал макет, бюджет был 200$, оценив работу я решил взять время с запасом, так как с заказчиком никогда не работал и правки могут затянуться, остановились на 6 днях

Оплата

По этому поводу очень много споров, и как правильно никто толком и не знает, из-за того, что с заказчиком я никогда не работал, предложил ему сверстать регистрацию, если ему подойдет как я верстаю, то он оплачивает 50% и я продолжаю верстку, после отправки архива — переводит оставшуюся сумму. Безусловно, рискуют все! На этапе когда я верстаю станицу регистрации заказчик может просто отказаться от работы, на этапе когда исполнитель получает предоплату и может кинуть в чс, на этапе когда архив уже сброшен и можно уже не оплачивать работу исполнителя; остается только надеяться на адекватность, хотя меня до последнего посещали мысли, что заказчик может просто не заплатить мне, а большая часть работы уже сделана. Хотя это тоже некая мотивация, ведь когда получаешь 100% предоплату, то под конец можешь просто разлениться. Все зависит от суммы: если заказ маленький, то лучше оплату сделать одним платежом, средний — разделить по 50%, большой — либо составлять договор, либо работать по частям

Верстка

Ближе к вечеру того же дня прислал готовую верстку, сложность была в том, что фон у блока выходил за края контейнера, а при адаптиве, весь фон должен быть на всю ширину. Изначально думал сделать абсолютным позиционированием, а на мобилках скрыть и сделать фон для блока, но из-за того, что блок занимает не 50% ширины, при сужении/расширении все начинает ехать, тогда я вспомнил про один ролик, но там это было для картинок, поэтому я взял от туда формулу и переделал под себя

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

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

Вечером я приехал домой, скинул на рассмотрение верстку и лег спать, под утро приступил к верстке профиля, картинки у меня уже были выгруженны, поэтому мне оставалось просто сверстать, был один интересный момент: в блоке реквизиты между текстом был одинаковый отступ, решением было сделать контейнер, который будет автоматически заполнять все пространство и раздвигать в разные углы оставшийся текст, и прописать ему justify-content: space-evenly; не каждый день такое свойство используешь. Справка: равномерно распределяет все элементы по ширине flex-блока, элементы имеют равное пространство вокруг. Если по простому, то элементы имеют одинаковые отступы к друг другу и к краям контейнера

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

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

На следующий день я так и не увидел дизайна, пришлось написать заказчику, он сказал, что поторопит дизайнера; после обеда дизайн был готов, футер я сверстал без проблем, а вот с селектом пришлось повозиться: нашел пару библиотек, но все они использовали jquery, тогда я написать в чаты по верстке, в одном из них мне подсказали библиотеку Сhoices.js , она была на нативном js и с удобным поиском, и хотя я никогда до этого с ней не работал, за день селект был готов

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

Итог

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

PS: Для тех, кому интересно сколько мне лет, отвечаю — 11 апреля мне исполниться 15

2 — https://colorhunt.co/palette/123723

3 — https://colorhunt.co/palette/133121

4 — https://colorhunt.co/palette/22272

Сразу к делу:

1) слайдер на маленьких устройствах

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

2)data-da

Дизайнеры часто жонглируют блоками, а чтобы перекидывать блоки на автомате существует dynamic adaptive(da), подробнее рассказывал в этом посте

3) градиент через псевдоэлемент

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

&:before {
      content: "";      
      background-color: #333333;      
      position: absolute;      
      width: 100%;      
      height: 100%;      
      top: 0;      
      left: 0;      
      opacity: 0.4;      
      z-index: -1;    
 }

4) повторяющийся фон

Важно сделать верстку практичной, заказчик может поменять текст и тогда верстка не должна ломаться, пример:

высота картинки зависит от количества текста, поэтому лучше сделать через повторяющийся фон (спасибо Даниил Дубченко)

5) убрать сдвиг контента при запрете скролла(во время открытия popup)

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

6) ховер только на десктопе

Многие упускают этот момент, но это очень сильно бесит, а иногда даже мешает, решение очень простое:

@media (min-width: 992px){   
   &:hover{
   }
 }

7) большой палец(скопление кнопок и большой шрифт)

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

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

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

Сейчас я расскажу вам о возможных пассивных доходах для программистов

Свой сайт.

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

Курс.

Поделитесь своим опытом в одном или нескольких курсах. Разместите его на том же Udemy и получайте пассивный доход

Канал на ютубе.
Если вам по душе короткие видео, то можете создать канал на ютубе. Даже самый маленький канал в IT тематике способен приносить хороший пассивный доход

Инстаграм, фейсбук, телеграм.

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

Платные шаблоны.

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

Главное делайте полезное людям и они вас отблагодарят, так де подписывайтесь на канал со статьями, впереди еще много полезного!

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

Логотип был одним целым с блоком иконок, переписывать всю структуру было долго и тогда я вспомнил про data-da(dynamic adaptive)

Это удобная утилита позволяет прямо из html изменять файловую структуру на нужных расширениях. Data-da принимает 3 аргумента:

Куда(menu__body)

Какой по счету(0)

На каком расширении(767)

Подробнее можно почитать тут

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

Сегодня VS Code становиться самым популярным IDE и для ускорения и удобства работы программисты придумали библиотеки, фреймворки и плагины. О последних сейчас и пойдет речь

Список плагинов:

• All Autocomplete — Подсказка тегов, функции и тд.
• Auto Close Tag — Закрывает теги
• Auto Rename Tag — Переименовывает теги
• Better Comments — Делает красивые комментарии
• Bracket Pair Colorizer — Выделение вложенностей разным цветом
• jQuery Code Snippets — Снипеты для jQuery
• Material Icon Theme — Отличная тема для иконок
• Polacode — Делает красивый скриншот кода
• Prettier - Code formatter — Форматирует код
• vscode-icons — Еще одна хорошая тема для иконок
• WordPress Snippets — Автоматически подставляет функции, классы, контент для WP

Подписывайтесь на канал статей ProgrammerWay, удачи и скоро увидимся!

Мечты сбываются, я мечтал взять заказ на фрилансе этим летом и вот теперь это свершилось!

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

Общение с заказчиком.

Мне написал шестой заказчик, с вопросом о сроках, я написал, что готов выполнить за 1 день и оплатой в 6$. В ТЗ были 2 правки, 1 — сделать на главной открытое меню, а 2 -— оправить табы под тему интернет магазина, сайт был на OpenCart(до этого я с ним еще не работал, но заказ я взял)

Проблемы и их решения.

После этого заказчик скинул доступ в админку и на хостинг, но со вторым у меня возникли проблемы, спросив у заказчика я узнал, что это был Ftp( его используют чтобы не давать доступ к хостингу незнакомому человеку), «Теперь мне надо скачать сайт» -- подумал я, но оказалось, что для этого используется специальная программа FileZilla и теперь сайт был у меня на руках, пришлось попутно изучать OpenCart и читать статьи, после пару статей я смог найти ответ на первое задание, я сразу понял, что нужно 2 меню, 1 для главной, с открытым меню, а 2 для остальных страниц, поэтому мои запросы исходили из этой истины, после завершения 1 задания я приступил делать второе...

Скорость и обучение.

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

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

Я нашел нужный код, но при вставке выбивало ошибку, тогда я полез в php файл и оказалось, что эта переменная не была объявлена, но даже после этого выбивало ошибку, тогда покопавшись в коде я заменил часть кода на нужную проверку и все заработало!

Итог.

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