Фриланс #9. Проект ещё проект

Разбавим разборы инструментов и суровой реальности.

Иииии барабанная дробь, ещё проекты.

Все сложилось в лучших традициях фриланса: то пусто, то густо.

Сразу 2 проекта, сейчас расскажу об одном, в ближайшее время о другом, в том числе почему же он секретный.

Начнёмс, на первый-второй рассчитайсь:

1. Проект версия лайт. Одностраничный сайт-лендинг про машинки;
2. Проект версия хард на blazor syncfusion и под грифом TOP Secret .

Машинки

Нежданно негаданно полетел прикольный проект

Рабочий процесс. Что же за машинки?

Проект в очередной раз прилетел на волне сарафанного радио.

Нормальная оплата, хорошие сроки и проект уже в Figma. Постепенно дизайнером допиливались разрешения для других устройств, но нам это никак не мешало.

Разберём принципы на которых мы базировались пр

Основа на которой мы базировались была сделана. Сразу прилетела предоплата и мы начали работу.

Разберём принципы на которых мы базировались при верстке

1. Разделили верстку на компоненты.
2. Вытащили необходимые элементы из Figma.
3. Подключили необходимые шрифты;
4. Создали правила для цветовых решений сайта.

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

Для чего это делается:

• Повторное использование кода или code reuse и компонентный подход. Это достаточно важные принципы хорошего кода.

Примеры больших и малых форм:

1. Например есть у нас кнопка которая используется везде на сайте как в примере выше.

Жёлтый фон(background-color), тёмные буквы(color), начертание(font-weight) bold, размер шрифта(font-size)14рх и т.д.

Делаем из её отдельным компонентом, и используем в качестве составного для других компонентов.

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

Да звучит непонятно, но это определённо стоит попробовать.

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

Структура сайта для примера

2. К примеру есть у нас что-то крупное что всегда используется на сайте. Шапка и подвал(header и footer).

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

Вот на этот элемент с трассой я убил немало времени.

Трасса какого-то то Игоря)

Сайт кстати создавался с применением JSON. Массивы.

Что-то вроде этого. Архивы не факт что найду по этому проекту фотоархивы

Вообще порой изучая какие-либо моменты в проекты в части json React и js из того, что сделал deментор, мне кажется вот ещё чутка и будет проведен ритуал вызова демона с помощью программного кода.

Да, сейчас, когда я немного поизучал Javascript и php стало понятнее, но до этого казалось, все так и случится.

Особенно, когда разбирался с галереями реализованными через массивы.

Работа с картами

Это первый проект в котором пришлось запихивать Яндекс.карты на сайт. Я слабо себе представлял как это работает, но на сайте карт довольно неплохо все расписано.

И зная наименование объекта можно легко дёрнуть кусок карты и вставить полукилометровую ссылку на сайт.

Даже можно курсор метки на карте сделать свой - кастомный.

Закидываем карту на сайт.

Работы прошли быстро, было пару правок картинок и структуру. В целом терпимо и без напряга.

Были внесены последние правки и заказчик довольно долго сохранял молчание.

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

А теперь время для Порше:

Именно этот сайт мы и делали

Заранее предупреждаю:

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

#фриланс

#заработок в интернете

#проект

#авто