3 этапа улучшения вашей повседневной жизни разработчика

вступление

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

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

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

Этап 1. Подготовка к успеху

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

1.1 Руководство по стилю

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

• либо создайте свой собственный базовый проект с нуля, соответствующий вашим предпочтениям, либо
• используйте готовые фреймворки с открытым исходным кодом, такие как Finsweet , Relume или Wizardry или любые другие.

1.2 Переменные

Благодаря недавнему обновлению Webflow использование переменных стало еще более интуитивно понятным и эффективным. Организовав переменные в хорошо продуманные группы, вы можете упростить разработку и повысить эффективность. Рекомендую рассмотреть возможность создания таких групп, как:

• Общие цвета
• Фон
• Текст
• Размер текста
• Размер текста Мобильный
• Контейнер (максимальная ширина)
• Размеры значков

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

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

1.3 Приоритизация доступности

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

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

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

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

Этап 2 – Освоение процесса разработки

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

2.1 Пользовательский код

«Стоп. Зачем? Для чего? Да как такое может быть?! Ведь будущее уже наступило и зачем нам код сейчас?» - можете сказать вы. Но давайте будем честными: без знания кода вы можете начать разбираться в веб-разработке и быстро начать свою карьеру, но оставаться конкурентоспособными и создавать необыкновенные вещи с помощью простой функциональности перетаскивания no-/. low-code платформы не похоже на правду Поэтому добро пожаловать в бесконечное развитие и обучение, о которых я говорил в своей предыдущей статье .

2.1.1 HTML

При работе на платформах с низким кодом, таких как Webflow, возникает соблазн полагаться исключительно на элементы div и текстовые элементы для создания структуры. Но именно в этом мы и отличаемся от вчерашних себя тем, что, как минимум, прочитав мою статью, берем на себя ответственность за качество готового продукта. Убедитесь, что ваша разметка соответствует семантическим соглашениям, используя такие элементы, как <header>, <nav>, <main>, <aside>, <footer> и другие, а также исправьте уровень заголовков для повышения ясности и доступности.

2.1.2 CSS:

• мысленно разделите весь ваш будущий код на глобальный и локальный. Добавьте глобальный CSS в компонент Navbar. Таким образом, вы получите к нему доступ с любой страницы, а также увидите, как применяются стили, еще до публикации проекта.

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

  
  

 <style> @media screen and (hover:hover) { //Insert your code here... } </style>

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

  Хотя в Webflow легко создать адаптивный дизайн, ширина макетов для планшетов начинается с 991 пикселя. Получается, что экран 1024 применяет к себе все стили рабочего стола. Однако у меня еще не было ни одного проекта, в котором бы мне не приходилось отдельно писать стили для экрана 1024. Я бы посчитал этот пункт обязательным для проверки. Регистрировать стили отдельно или нет, зависит от каждого отдельного проекта.

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

 <style> /* About page Start */ //Insert your code here... /* About page End */ </style>

• Вместо того, чтобы полагаться исключительно на анимацию Webflow, я настоятельно рекомендую использовать анимацию CSS, чтобы сделать вашу страницу проще и эффективнее, не влияя на ее производительность.

  Встроенный инструмент анимации Webflow облегчает новичку создание хорошего веб-сайта с многочисленными взаимодействиями. Однако, если мы говорим о продвинутых методах разработки, важно отметить, что CSS-анимация чрезвычайно легкая и не замедляет работу страницы своим присутствием. И наоборот, анимации веб-флоу, которые по сути направлены только на изменение CSS-свойств элементов, работают через JS и тем самым замедляют работу страницы. В маленьких проектах это не заметно, но заметно в крупных. В любом случае, я советую вам как можно чаще использовать CSS в любом проекте вместо нативной анимации Webflow, даже для практики. Мы помним, что привычка появляется после многочисленных повторений . Давайте сформируем его.

• Если взаимодействие пользователя с анимацией лотереи не планируется, гораздо лучше использовать файл mp4 вместо .json и даже оптимизированный .json. Производительность в Safari скажет вам спасибо.

2.1.3 JavaScript:

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

• Следуйте рекомендациям по размещению JavaScript, включая использование глобальных настроек для глобальных сценариев проекта и настроек страницы для локальных сценариев.

• Используйте атрибуты <async> и <defer> для сценариев, которые можно загружать параллельно, чтобы оптимизировать время загрузки страницы.

  
  

2.2 Компоненты веб-процесса

Как часто, изучая дизайн своего проекта, вы задаете себе вопрос: Какие повторяющиеся элементы в проекте можно использовать в качестве шаблонов на разных страницах? Компоненты в Webflow позволяют поддерживать согласованный, эффективный и масштабируемый рабочий процесс проектирования путем создания настраиваемых блоков из элементов и дочерних элементов. Вы можете повторно использовать эти блоки на своем сайте и изменять их в одном месте, чтобы избежать индивидуального пересмотра каждого повторяющегося макета (источник — https://university.webflow.com/lesson/comComponents?topics=layout-design ).

Часто это может быть:

• Навбар
• Нижний колонтитул
• Кнопка - если она нестандартная, имеет индивидуальный дизайн и эффекты и/или разветвленную структуру.
• CTA Banner — одна или две его разновидности часто используются на протяжении всего проекта.
• И мой более используемый символ — Раздел — там должен быть пустой раздел с тегом и классом, внутри него все стандартные классы, включая контейнер, Заголовок 2, абзац и несколько пустых блоков div. Уверяю вас, это наиболее часто используемый компонент, который вы будете использовать. Просто добавьте его, отсоедините и завершите часть разработки. Добавив его в качестве основы, вы сможете сэкономить много времени вместо того, чтобы добавлять каждый блок div отдельно.

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

2.3 Группировка медиа-активов

Используйте группировку активов, чтобы их было легче найти и управлять ими. Например, у вас массивная панель навигации и в ней много ссылок с значками. Часть из них дизайнер уже подготовил, другую обещал закончить за 3 дня, а последняя часть еще находится на рассмотрении у клиента. Пока дизайнер рисует новые варианты, потом клиент просматривает половину из них, вносит правки и утверждает вторую половину и наконец отправляет вам на разработку, скорее всего у вас в панели ассетов уже будет много других изображений. Изображения иконок будут битыми и найти/заменить их в дальнейшем будет неудобно. В этом случае группировка активов облегчит жизнь. Группировка позволяет содержать все медиафайлы в вашем проекте в чистоте и порядке.

2.4 Запаситесь папкой «Архив», чтобы сохранить:

• статические версии динамических страниц СMS . В случае каких-либо изменений или правок вам будет гораздо проще сделать это в статической версии, а затем перенести на страницу СMS. Особенность страниц СMS в Webflow такова, что при соединении всех необходимых элементов с соответствующими полями в Коллекции вы не сможете скопировать элемент, в котором это соединение присутствует, и перенести его на статическую страницу.

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

• Тестовая страница для экспериментов.

  
  

Этап 3 – Финальные правки

Что важно сделать по окончании проекта перед передачей его клиенту, чтобы вас не покидало ощущение, что ваш проект сейчас действительно вышел на новый уровень:

3.1 Очистка проекта:

• удалить неиспользуемые классы и анимации.

• удалить закомментированный, неиспользуемый код.

• удалите неиспользуемые носители. Если в панели много ненужного и нет возможности удалить его по отдельности, предлагаю хак : удалить все ресурсы - опубликовать проект - перезагрузить вебфлоу - и занести в актив панели только те медиа, которые используются в проекте.

  
  

3.2 Создайте руководство пользователя проекта для клиента.

Помимо страницы руководства по стилю должна быть страница с описанием того, как использовать готовый проект. Хороший разработчик — это тот, кто думает о том, как клиент будет управлять проектом в будущем. Насколько легко будет вносить изменения и какая степень свободы будет у клиента в управлении ими. Благодаря веб-потоку это может быть максимально близко к совершенству. Имея знание CSS и понимание принципов работы компонентов веб-флоу, вы сможете собрать проект, в котором будет легко изменять текущие страницы или создавать новые.

3.3. Присвойте резервным копиям уникальные имена.

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

Заключение

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

Этап 1 – Подготовка

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

Этап 2 – Прямое развитие

• Добавьте навыки кодирования в качестве ценного набора навыков, чтобы открыть безграничные возможности веб-разработки.
• Используйте компоненты Webflow как мощные инструменты для обеспечения перспективности ваших проектов.
• Организуйте медиа-ресурсы в группы для облегчения доступа и управления.
• Сохраняйте папку «Архив» для хранения неиспользуемых элементов для дальнейшего использования.

Этап 3 – Прямо домой

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

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

Спасибо за прочтение!

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