Фриланс. Первые шаги и проект

{"document":[{"text":[{"type":"string","attributes":{},"string":"Пришла пора рассказать о об этом после 4х месяцев молчания я созрел и сделал \"насечки\". Что ж начнём!"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Как готовил Вовочка: \" учится никогда не поздно\"."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Учится разработке начал поздновато в 2017, мне предлагали давно, я понятное дело отказывался. Иногда на меня накатывает, что я сам дурак, но уже позняк и отпускает. Боржоми не поможет."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"attachment","attributes":{"caption":"Фамилия как-бы намекает.","presentation":"gallery"},"attachment":{"caption":"","contentType":"image/jpeg","filename":"Screenshot_20220108-223225_Samsung Internet.jpg","filesize":929841,"height":2400,"pic_id":7399,"url":"https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/01/21/Screenshot_20220108-223225_Samsung_Internet.jpeg","width":1080}},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Ибо меня все устраивало, денег хватало и на оплату текущих надобностей, отдых и хотелки. Да и жил я тогда один. Социалка на работе прилично покрывала поездки в отпуск, одевала и обувала. Прям как армия родимая.\n\nВсе изменилось когда женился. Ведь все понимают, что брак и семья это не только штамп в паспорте, но и ответственность как личная, так и финансовая. Семейный отдых, дети, ремонт, планирование бюджета.\n\nПоявилась необходимость повышения фин. дохода и я обратился к своему товарищу(назовём его модным словом \"deментор\" это как в Азкабане у Д. Роулинг и в обучении на курсах, ввиду его методики обучения. Его специализация сайты, приложения в общем и целом фронтенд разработка.\n\nОн провел мне вводную лекцию, дал пару ссылок на ресурсы и как говорится в бой грызть твёрдые горные породы зернистого строения именуемые HTML и СSS.Сказал, в чем писать код. В данном случае это PhpStorm и понеслась: Теги, классы, разметка, свойства, best practice, вложенность. Ввиду особенности моей учебной специальности - электричество и электропривод, программирование было для меня предметом на один семестр C++ в универе и Паскаль в школе."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"attachment","attributes":{"caption":"PhpStorm основная среда разработки","presentation":"gallery"},"attachment":{"caption":"","contentType":"image/jpeg","filename":"IMG_20220111_155645_185.jpg","filesize":139802,"height":800,"pic_id":7400,"url":"https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/01/21/IMG_20220111_155645_185.jpeg","width":1280}},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Банально сейчас даже не вспомнить, что мы писали на C++ курсовая или просто какая то задачка по программированию."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["bulletList","bullet"]},{"text":[{"type":"string","attributes":{},"string":"Так вот о чем это я с HTML CSS было тоже самое только тут уже пришлось полностью погружаться, смотреть уроки на YouTube, искать примеры кода с применением кода. Безусловно тут помог сайт htmlbook.ru."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Да я люблю книги, но читать документацию в книгах не очень. Плюс ещё сказывается профф выгорание - стал читать НТД по диагонали. Если за что то зацепился, то возвращаюсь и перечитываю внимательно."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{"bold":true},"string":"\nОтступление. Нормативная техническая документация.\n"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Почему так вышло? По работе приходится много читать нормативку. ГОСТы, стандарты организации(СТО) - их в последнее время часто встретить на упаковках продукты, проекты, правила, инструкции и прочее."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"attachment","attributes":{"caption":"Для примера","presentation":"gallery"},"attachment":{"caption":"","contentType":"image/jpeg","filename":"f19bb18bc927e116b6a723dc64be1586.jpg","filesize":26262,"height":550,"pic_id":7401,"url":"https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/01/21/f19bb18bc927e116b6a723dc64be1586.jpeg","width":390}},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"СТО как правило пишут на основании ГОСТов, правил, приказов. Где-то они полностью копируют государственные документы, но чаще идут по пути \"затяжки гаек \" то есть ужесточения требований.\n\nНе берусь говорить за все СТО, но очень часто бывает путаница ровно как и в государственных документах. Странные формулировки из-за которых можно трактовать по-разному, нет дополнительных комментариев и разъяснений.\n\nНу или взять например современную тенденцию передать какой-нибудь старый ГОСТ типа в \"новый\" и признать приборы работающие по старому вне недействительными. А для чего, правильно чтобы покупали новое.\n\nТакой себе своеобразный способ стимуляции потребления.\n\nИменно поэтому и читаю по диагонали...\n"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Вернёмся к основной теме."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["heading1"]},{"text":[{"type":"string","attributes":{},"string":"Первый проект"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["heading1"]},{"text":[{"type":"string","attributes":{},"string":"\nИзучал я значит теги, свойства пробовал, смотрел видяшки и тут приходит сообщение на телегу от deментора: \"у нас проект, ты готов?\"; на карту падают деньги; приходит архив с psd внутри(файл фотошоп). Запускаю я значит фотошоп и понимаю.\n\nЧто это жесть, адаптивный дизайн, огромный макет, что моему ноутбуку очень плохо, он с трудом переваривает фотошоп и большие файлы в нем.\n"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Примечание: я начал изучать матчасть к тому времени месяца 3. Вечерами после работы или в выходные, в отпуске и командировке, там где позволял интернет."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["quote"]},{"text":[{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Техника"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["heading1"]},{"text":[{"type":"string","attributes":{},"string":"\nСтарость не радость для Acer Aspire 5930G лохматого 2007года. С его могучим Core 2 Duo 2Gb DDR2 и GeForce 9600. После этого проекта его немного прокачал:\n\nпочистил,заменил проц на самый мощный на данном сокете,посадил его на хорошую термопасту, поставил оперативку на 4Gb - это максимум был на тот момент для ноутбуков с SO DIMM DDR2,накатил систему на SSD. И он пошуршал значительно быстрее, при этом он постоянно жил на подставке кулере для того чтобы справляться с хорошей нагрузкой.\n"},{"type":"attachment","attributes":{"caption":"Мой старичок Acer Aspire 5930G. Многим ему обязан","presentation":"gallery"},"attachment":{"caption":"","contentType":"image/jpeg","filename":"acer_aspire_5930g_gesamtklein_18.jpg","filesize":59028,"height":600,"pic_id":7403,"url":"https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/01/21/acer_aspire_5930g_gesamtklein_18_XdwoNoH.jpeg","width":800}},{"type":"string","attributes":{},"string":"\n\nПотом макет перенесли в Zeplin это такая приятная штука и самое главное полезная для разработки сайтов. Она \"нарезает\" макет на составные части, разделяет версии. И после этого работать с макетом одно удовольствие."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Тут тебе и размеры и расстояния до элементов, цвета(при отсутствии хорошего монитора это спасает), шрифты, текст и прочие полезные вещи. Наглядно с описанием и возможностью скачки картинок, вставленных в макет."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Ведь макет сайта в интернете ни что иное, как \""},{"type":"string","attributes":{"italic":true},"string":"бутерброд с начинкой из границ, шрифтов и элементов\"."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Разработка"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["heading1"]},{"text":[{"type":"string","attributes":{},"string":"\nРазработка шла примерно месяца полтора с последующей сдачей проекта и правками по требованиям заказчика. Мне сейчас сложно вспомнить временнЫе детали.\n\n"},{"type":"attachment","attributes":{"caption":"Схема для примера с habr","presentation":"gallery"},"attachment":{"caption":"","contentType":"image/jpeg","filename":"lc0qvddpmxb4sxei8yf8dmgvh2w.jpeg","filesize":115047,"height":454,"pic_id":7404,"url":"https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/01/21/lc0qvddpmxb4sxei8yf8dmgvh2w.jpeg","width":807}},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Работали по фронтенду вдвоём с deментором, разбили макет на отдельные элементы(компоненты), каждый работал в своём чтобы не было конфликтов версий. С меня HTML CSS, с дементора контроль и Javascript."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"При этом изучать пришлось много:"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"PhpStorm. Изучение функций, структуры проекта и работы со специальной сборкой;"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["bulletList","bullet"]},{"text":[{"type":"string","attributes":{},"string":"Компонентный подход к разработке. Разбивка дизайна на логические элементы позволяет вести разработку в составе команды одновременно по разным составляющим и упрощает дальнейшую поддержку проекта."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["bulletList","bullet"]},{"text":[{"type":"string","attributes":{},"string":"Если попроще, когда вам нужно заменить(исправить) 1 блок в стопке, то вы его берете и меняете. Вам не нужно менять всю стопку."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"attachment","attributes":{"caption":"Как в дженга","presentation":"gallery"},"attachment":{"caption":"","contentType":"image/jpeg","filename":"254721.jpg","filesize":143076,"height":1092,"pic_id":7407,"url":"https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/01/21/254721.jpeg","width":819}},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Работа с препроцессорами jade и scss, то есть верстка сайта на упрощённом языке, который при сборке проекта будет конвертироватся в стандартный. Упрощает процесс разработки;"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["bulletList","bullet"]},{"text":[{"type":"string","attributes":{},"string":"Работа с системой контроля версий Git(Bitbucket) и решением конфликтов. Они неизбежны, так как и сборка тоже дорабатывалась под проект, но решаемы. Это кстати очень круто, работа с компа на расстоянии 2500км, мгновенное получение обновлений кода по запросу;"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["bulletList","bullet"]},{"text":[{"type":"attachment","attributes":{"caption":"Конфликт версий наглядно)","presentation":"gallery"},"attachment":{"caption":"","contentType":"image/jpeg","filename":"JLfx3YBPgr0.jpg","filesize":179931,"height":1222,"pic_id":7408,"url":"https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/01/21/JLfx3YBPgr0.jpeg","width":1080}},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Работа с адаптивным дизайном. Медиазапросы(@media) и флекс(flexbox). Это как бы 3 сайта в одном. Раньше были версии ПК и мобильная в браузере это отображалось как m.домен.ру;И много много тегов и свойств css. Чтение нормативки, пробы и так далее.\n\nОбучение проходило стремительно и в боевом режиме. Это один из приёмов моего deментора.\n\nДень - работа;\n\nВечер - домашние дела;\n\nПоздний вечер-ночь - верстка проекта.\n\nМне было по кайфу работать над проектом, это вызов, интересная учеба, финансовые плюшки.\n\nВключаешь музыку, грузишь проект и погнал. А уж когда поймаешь так называемый \"поток\" когда код легко льётся, дизайн обретает нужную структуру - это просто песня. Время летит незаметно и ты сразу видишь результаты своей работы, что не может не радовать.\n\n"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Структура разработки"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["heading1"]},{"text":[{"type":"string","attributes":{},"string":"\nИзначально в проекте 3 действующих лица в части выполнения. Возьмём типовой пример порой они могут быть разного порядка, степени зависимости.\n"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"Дизайнер - получает ТЗ, рисует макет и согласовывает с заказчиком."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["numberList","number"]},{"text":[{"type":"string","attributes":{},"string":"Фронтэнд-разработчик либо команда - смотрит макет, смотрит на возможность выполнения, согласует сроки выполнения, принимает заказ, собирает команду и воплощает макет в код страницы. Это я."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["numberList","number"]},{"text":[{"type":"string","attributes":{},"string":"Бэкэнд-разработчик - перетаскивает готовый код проекта на сервер и настраивает его работу.Оплата"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["numberList","number"]},{"text":[{"type":"string","attributes":{},"string":"Оплата"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["heading1"]},{"text":[{"type":"string","attributes":{},"string":"\nКак проходила оплата труда фронтэнд-разработчика в нашем проекте. Общая сумма делится на 3 равных платежа.\n"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]},{"text":[{"type":"string","attributes":{},"string":"1й платёж - это предоплата. Аванс, получили деньги, исходники макета или доступ к нему на Zeplin, Figma, начинаем работу."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["bulletList","bullet"]},{"text":[{"type":"string","attributes":{},"string":"2й платёж - средняя оплата. По времени разработки - экватор работы над проектом. Данный момент очень полезен в плане того, заказчик уже видит наполовину готовый проект. Может внести небольшие корректировки в дизайн с обязательным согласовыванием с командой разработки."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["bulletList","bullet"]},{"text":[{"type":"string","attributes":{},"string":"3й платёж - постоплата. Выплата происходит после сдачи проекта и последующих правок. Когда заказчик всем доволен мы получаем деньги, ставим плюсик в карму и репутацию."},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["bulletList","bullet"]},{"text":[{"type":"string","attributes":{},"string":"Результат"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":["heading1"]},{"text":[{"type":"string","attributes":{},"string":"\nРазработка велась для компании "},{"type":"string","attributes":{"href":"https://incol.ru/"},"string":"Типография \"Индустрия Цвета \""},{"type":"string","attributes":{},"string":"\n"},{"type":"attachment","attributes":{"caption":"Тот самый сайт","presentation":"gallery"},"attachment":{"caption":"","contentType":"image/jpeg","filename":"Screenshot_20220122-001120_Chrome.jpg","filesize":713514,"height":2400,"pic_id":7410,"url":"https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/01/21/Screenshot_20220122-001120_Chrome.jpeg","width":1080}},{"type":"string","attributes":{},"string":"\nНовый дизайн для их сайта взамен устаревшего ПК.\n\nПолный адаптив для ПК, планшета и мобильного.\n\nВот таким был мой первый опыт в разработке, а ведь это было только начало.\n\n"},{"type":"string","attributes":{"blockBreak":true},"string":"\n"}],"attributes":[]}],"selectedRange":[6540,6540]}