Frontend — Выбор ультрабука для фронтенда и веб-дизайна


Содержание

Выбираем профессию frontend- и backend-разработчика: принципы и отличия

Статья о том, что такое frontend- и backend-разработка, чем отличаются и как взаимодействуют между собой. Разбираемся и выбираем себе направление.

Традиционно эти две сферы разработки разделяют на сцену и закулисье. Во frontend вы работаете на глаза пользователя, в backend же — на его опыт и ощущения. В Skillbox мы учим и frontend, и backend. Остается только выбрать направление своей будущей профессии. А теперь подробнее.

Что такое
frontend-разработка?

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

Пишет про дизайн и маркетинг в Skillbox. С 2011 по 2020 год писала про бизнес в деловые СМИ, соучредитель агентства копирайтинга «Абзац».

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

Чтобы наглядно понять frontend-разработку, откройте страницу любого сайта — перед собой вы увидите интерфейс. Щёлкнув правой кнопкой мыши, откроете код страницы в браузере.

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

Компоненты frontend-разработки

  • HTML (HyperText Markup Language) — язык разметки документов для создания структуры страницы: заголовки, абзацы, списки и так далее.
  • CSS (Cascading Style Sheets) — язык для описания и стилизации внешнего вида документа. Благодаря CSS-коду браузер понимает, как именно отображать элементы. CSS задаёт цвета и параметры шрифтов, определяет, как будут располагаться разные блоки сайта, и так далее. Ещё он позволяет выводить один и тот же документ в разных стилях, например, для печати (обычной или шрифтом Брайля), вывода передачи на экран или чтения голосом.
  • JavaScript — это язык, который создавался, чтобы оживить веб-страницы. Его задача — реагировать на действия пользователя, обрабатывать клики мышкой, перемещения курсора, нажатия клавиш. Ещё он посылает запросы на сервер и загружает данные без перезагрузки страницы, позволяет вводить сообщения и многое другое.

Что такое
backend-разработка?

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

Например, когда вы вводите запрос на странице поисковика и жмёте клавишу Enter, frontend заканчивается и начинается backend. Ваш запрос отправляется на сервер Google или «Яндекса», где расположены алгоритмы поиска. Именно там случается всё «волшебство». Как только на мониторе появилась информация, которую вы искали, — вновь происходит возвращение в зону frontend.

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

Backend — это процесс объединения сервера с пользователем.

Компоненты backend-разработки

Backend-разработчик применяет те инструменты, что доступны на его сервере. Он вправе выбрать любой из универсальных языков программирования, например, Ruby, PHP, Python, Java. Всё зависит от конкретного проекта и задачи заказчика.

Также для backend-разработки используются системы управления базами данных:

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

Как взаимодействуют frontend и backend?

Взаимодействие frontend и backend происходит по кругу:

  • frontend отправляет пользовательскую информацию в backend;
  • информация обрабатывается;
  • и возвращается обратно, приняв понятную форму.

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

Существует несколько вариантов взаимодействия frontend и backend:

  • HTTP-запрос напрямую отправляется на сервер, сервер ищет информацию, встраивает ее в шаблон и возвращает в виде HTML-страницы.
  • Вариант с использованием инструментария AJAX (Asynchronous JavaScript and XML). В этом случае запрос отправляет JavaScript, загруженный в браузер, а ответ приходит в формате XML или JSON.
  • Одностраничные приложения, которые загружают данные без обновления страницы. Это делается также при помощи AJAX или фреймворков Angular и Ember.
  • Ember или библиотека React помогают использовать приложение и на сервере, и в клиенте. Frontend и backend взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.

Обязанности frontend- и backend-разработчиков, как правило, разделены, но бывают моменты, когда программист решает проблемы как на стороне сервера, так и в клиентской части. Оба вида разработки подразумевают и технические, и творческие компоненты. Нередко на рынке встречаются специалисты, которые уверенно чувствуют себя как во frontend, так и в backend и могут совмещать их.

Заключение

Начать свой путь в обеих отраслях можно с 12-месячного курса Skillbox «Профессия веб-разработчик». Он подходит для новичков и программистов с небольшим опытом. За год вы на практике изучите основные языки программирования и создадите портфолио, которое поможет найти перспективную и хорошо оплачиваемую работу.

Руководство по современному Веб-фронтенду

Семантика

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

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

Краткость

Старайтесь писать меньше кода — используйте новые семантические элементы. Забудьте ваши старые XHTML привычки.

Общедоступность

Не стоит заниматься этим пунктом в последнюю очередь. Совсем не обязательно быть экспертом по WCAG (Web Content Accessibility Guidelines — Руководство по созданию доступного контента), чтобы улучшить свой сайт, можно начать с малого:

  • Научиться правильно и по назначению использовать свойство alt.
  • Для ссылок и кнопок использовать соответствующие семантические элементы HTML5 (а не зверства вроде

Хоть определение языка и кодировки не является обязательным, рекомендуется определять их и на уровне HTML-документа, даже если они передаются в HTTP-заголовках. Предпочитайте UTF-8 любым другим кодировкам.

Производительность

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

Точки с запятыми

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

Боксовая модель

Такая модель, в идеале, должна быть одинаковой для всего документа. Глобальное объявление < box-sizing: border-box; >приемлемо, но для конкретных элементов страницы не стоит изменять их боксовую систему.

Поведение элементов

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

Кроме того, не выводите элемент за пределы страницы.

Позиционирование

В CSS существует множество способов позиционирования элементов, но постарайтесь ограничиться использованием списка свойств с такими значениями (в порядке приоритета):

Селекторы

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

Без необходимости не переопределяйте селекторы.

Спецификация элементов

Не нужно делать селекторы сложными для переопределения. Для этого уменьшите частоту использования спецификатора id и избегайте использования правила !important .

Переопределение

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

Наследование

Не дублируйте объявления стилей, которые могут быть пронаследованы.

Компактность

Старайтесь писать компактный код — используйте сокращенную форму записи.

Для ясности предпочитайте осмысленные английские названия.

Префиксы

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

Анимация

Предпочитайте переходы анимациям. Анимацию стоит применять только для свойств элемента opacity и transform .

Единицы измерения

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

Цвета

Если вам необходима прозрачность, используйте rgba . В любом другом случае — используйте hex формат.

Отрисовка

Не загружайте ресурс, создать который можно средствами CSS.

Обходные приемы

Не используйте их.

JavaScript

Производительность

Предпочитайте правильный, выразительный, читабельный код производительному. В основном не JavaScript будет узким местом производительности вашей системы. Оптимизировать стоит такие моменты как сжатие изображений, перепостроение дерева DOM и доступ из сети. Если и выбирать совет из этого документа, то выбирайте этот.

Не храните состояние

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

Встроенные конструкции языка

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

Приведение типов

Если это обоснованно, используйте неявное преобразование типов. В любых других случаях избегайте этого.

Циклы

Не используйте циклы, поскольку они вынуждают вас использовать изменяемые объекты. Используйте методы объявленные в array.prototype .

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

Параметры функций

Не используйте объект arguments . Лучше использовать синтаксис функции с переменным количеством параметров, поскольку:

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

Функция Apply

Забудьте о функции аpply() . Используйте оператор развертки вместо нее.

Функция Bind

Не используйте функцию bind() , существует более идиоматичный подход:

Функции высшего порядка

Используйте вложенные функции только в случае необходимости.

Композиция

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

Кэширование

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

Переменные

Используйте const вместо var , там где это возможно:

Условные операторы

Предпочитайте IIFE (вызываемое “по месту” функциональное выражение) конструкциям типа if , else if , if , else и switch выражениям.

Итерирование объектов

Где это возможно, не используйте for..in .

Объекты как пары “ключ/значение”

Обычно лучше использовать объект как пару “ключ/значение”, это решение более мощное, но существуют случаи, когда объекты правильнее использовать как экземпляры класса Object .

Каррирование

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

Читабельность

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

Переиспользование кода

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

Зависимости

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

Что нужно знать frontend разработчику сегодня

Фундаментальными технологиями фронтенд разработки являются HTML (для создания структуры страницы), CSS (для стилизации) и JavaScript (для интерактивности). По этой причине базовые знания в вышеупомянутых областях непременно вам необходимы. Однако, в 2020 году необходимо знать, что такое фреймворки, системы контроля версий и многие другие вещи, упрощающие жизнь современному разработчику. Давайте подробней остановимся на каждой из них.

HTML и CSS

HTML (Hyper Text Markup Language) и CSS (Cascading Style Sheets) являются основой веб-разработки. Без этих двух технологий вы не сможете создавать веб-дизайн и получите на выходе простой текст на экране. Вы даже не сможете добавить изображение на страницу без HTML!

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

JavaScript

JavaScript позволяет добавить огромный функционал вашей веб-странице. Вы можете создавать довольно функциональные веб-приложения используя только HTML, CSS и JavaScript (сокращенно JS). На самом базовом уровне, JS позволяет вам добавить интерактивности. Вы можете использовать его для создания карты, которая обновляется в реальном времени, интерактивных элементов и онлайн-игр. Такие сайты, как Pinterest используют JavaScript по полной для создания дружелюбного пользовательского интерфейса.

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

JQuery

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

JavaScript фреймворки

JS фреймворки (включая AngularJS, Backbone, Ember и ReactJS) предоставляют готовую структуру вашего JavaScript кода. Существуют различные типы фреймворков под разнообразные нужды, однако четыре вышеупомянутых являются самыми популярными в списке требований при приеме на работу в 2020 году. Фреймворки действительно ускоряют процесс разработки, предоставляя вам ускоренный старт, и могут использоваться в связке с библиотеками вроде JQuery для минимизации временных затрат на написание типовых блоков.

Frontend фреймворки

CSS и Frontend фреймворки (самым популярным является Bootstrap) делают для CSS то же, что и JS фреймворки для JavaScript: они ускоряют разработку, предоставляя отправную точку с готовой стартовой структурой проекта. Поскольку от проекта к проекту базовые CSS блоки повторяются, фреймворк, определяющий все за вас, является очень полезным. Большинство работодателей требуют знание того, что такое frontend фреймворки и как с ними работать.

RESTful сервисы и API

Не вдаваясь в технические подробности, REST расшифровывается, как Representational State Transfer, что означает “передача состояния представления”. В общих чертах, это технология, упрощающая связь компонентов в сети. И RESTful сервисы и API — это сервисы архитектуры REST. Почитать об этом подробнее вы можете здесь.

Предположим, вы решили написать приложение, которое отсортирует всех ваших друзей в социальной сети по дате добавления. Вы можете сделать запрос к RESTful API ВКонтакте для получения списка ваших друзей. То же самое возможно и с Twitter, и с Facebook, которые также используют RESTful API.

Системы управления контентом и платформы E-commerce

Практически каждый веб-сайт построен на системе управления контентом (CMS). Платформы E-commerce являются одной из разновидностей CMS. Самая популярная в мире CMS — это WordPress, которая находится за занавесом миллионов сайтов, почти 60% всех сайтов, использующих CMS, построены на WordPress. Другие популярные CMS это Joomla, Drupal и Magento. Даже поверхностные знания этих систем дадут вам преимущество при устройстве на работу.

Тестирование и отладка


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

Unit-тесты — это процесс тестирования отдельных блоков исходного кода и специализированный фреймворки для подобного рода тестирования предоставляют достаточно удобный функционал. Существуют разные фреймворки для разных языков программирования.

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

Отладка — это процесс устранения всех ошибок (багов), найденных в процессе тестирования. Разные компании используют различные подходы в тестировании и отладке, но если вы когда-либо это делали, вам не трудно будет приспособиться.

Git и системы контроля версий

Системы контроля версий позволяют вам отслеживать изменения, вносимые в код со временем. Они также позволяют легко возвращаться к предыдущим версиям кода, если вы что-либо испортите. Git — это наиболее распространенная система контроля версий. Знание Git для разработчика является необходимым требованием практически в каждой компании. У нас вы можете изучить основы работы с git.

Что должен знать профессиональный фронтенд-разработчик сегодня

В последние несколько лет React, одна из библиотек JavaScript, становится стандартом frontend разработки — и это на руку кроссплатформенным разработчикам, с такими преимуществами React Native, как:

  • простая и интуитивно понятная философия объявления представлений (views) и состояний (state), делающая код чистым, читаемым и легкоотлаживаемым;
  • умный и эффективный рендеринг, который перерисовывает компоненты только в случае необходимости, при изменении состояния.

Говоря простым языком, React связывает вместе HTML и JavaScript.

Что же касается CSS, никто больше не пишет на чистом CSS в наши дни, поэтому знание таких препроцессорных языков, как Sass или Less является, так скажем, необходимостью для фронтенд-разработчика в 2020 году.

Учитывая вездесущность множества форм-фактором различных устройств (мобильные телефоны, планшеты, десктопные ПК), мы бы также рекомендовали к изучению способы построения адаптивных web-страниц. Существует большое разнообразие библиотек JavaScript и CSS, которые прекрасно справляются с этой задачей. Многие из них основаны на рекомендациях Google’s Material Design.

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

  • Webpack для модульной сборки (хотя опыт Webpack довольно ужасен и выбор сообщества в области сборки меняется каждые 1-2 года);
  • JSON Web Token для авторизации (своего рода, замена куки, которые ранее были стандартом);
  • Relay/GraphQL или Redux или Flux, в зависимости от того, насколько глубоко вы хотите погружаться в потоки и выборки данных;

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

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

Наш совет: если вы ещё только начинаете знакомство с frontend-разработкой, пройдите наш курс по HTML.

От нуля до героя фронтенда (Часть 1)

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

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

Руководство разбито на две части для более простого усвоения материала. Часть 1 посвящена разработке интерфейсов на HTML и CSS. Часть 2 будет о Javascript, фреймворках и паттернах дизайна.

Основы HTML и CSS

В разработке фронтенда все начинается с HTML (рус. — здесь и далее примечание переводчика с указанием языка статьи по ссылке) и CSS (рус.). HTML и CSS контролируют то, что вы видите на странице. HTML диктует содержимое в то время как CSS регулирует стили и раскладку.

Для начала прочитайте пособия по HTML (рус.) и CSS (рус.) от Mozilla Developer Network (MDN). MDN предоставляет пошаговые объяснения важных концепций HTML и CSS. К тому же каждая глава длинной всего в один экран и проиллюстрирована интерактивными демо на CodePen и JSFiddle.

После прочтения этих материалов загляните на курс Создай сайт (англ.) от CodeAcademy. Потребуется всего несколько часов для прохождения этого курса. Он даст хорошую основу для построения сайтов на HTML и CSS. Если вы хотите больше, то Построение веб-форм (англ.) — еще одно руководство от CodeAcademy, которое научит вас создавать и стилизовать веб-формы.

Чтобы попрактиковаться в CSS попробуйте CSS Diner (англ.). Это забавная игра с задачками по CSS. Другой важный аспект HTML и CSS — раскладка. LearnLayout (рус.) интерактивный учебник, показывающий как создавать раскладки на HTML и CSS.

Так же изучите как пользоваться Google Fonts (англ.) при помощи статьи Основы Google Font API (англ.) от CSSTricks или Руководство по Google Font API (рус.). Типографика — это фундаментальная основа интерфейса. Когда у вас появится время, я крайне рекомендую вам прочитать эту бесплатную онлайн-книгу Professional Web (англ.) от Donny Truong. Она научит вас всему, что вы должны знать о типографике во фронтенд-разработке.

Изучая все эти ресурсы, не беспокойтесь особо о том, чтобы все запомнить. В первую очередь сосредоточьтесь на понимании того, как HTML и CSS взаимосвязаны.

Практика основ HTML и CSS

Теперь, когда вы имеете представление об основах HTML и CSS, давайте повеселимся. В этом разделе есть два эксперимента для вашей практики создания сайтов и интерфейсов. Я использую термин “эксперимент” поскольку в ходе эксперимента вы осознаете на сколько сильно ваш успех зависит от ваших неудач.

Эксперимент 1

В нашем первом эксперименте мы будем использовать CodePen. CodePen это площадка для фронтенда (“песочница”), где вы можете писать HTML и CSS код без создания файлов на вашем компьютере. Там так же есть функция живого предпросмотра, которая обновляется сразу после сохранения кода.

Используя CodePen, вы убиваете двух зайцев сразу. С одной стороны вы практикуете HTML и CSS. C другой стороны вы создаете основу для портфолио с иллюстрациями вашего прогресса. Мы так же будем использовать Dribbble, который полон вдохновляющего дизайна.

Идите на Dribbble и найдите дизайн, код для которого вы сможете написать за пару часов. Я выбрал несколько примеров, с которых вы можете начать: 1, 2, 3, 4 и 5. Я выбирал дизайны, ориентированные в первую очередь на мобильную разработку, потому что они менее сложны, чем их аналоги для обычных экранов. Тем не менее вы вольны выбрать вариант для десктопов.

Когда вы определились с дизайном, идите и попробуйте сверстать его на CodePen. Если вы застряли, помните что StackOverflow (англ.) ваш друг. Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили. Так же взгляните на некоторые примеры на CodePen. Я прикрепляю несколько хороших ссылок:

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

Если у вас нет за плечами опыта в дизайне, вероятнее всего, ваш дизайнерский глазомер не настроен. Фронтенд-разработчик с хорошим дизайнерским чутьем будет в состоянии отличить хороший дизайн и сверстать его идеально. Я написал статью несколько недель назад о том, как развить свое дизайнерское чутье (рус.).

Эксперимент 2

Надеюсь, первый эксперимент дал вам определенную уверенность в написании HTML и CSS. Для эксперимента 2 мы заглянем на ряд сайтов, затем напишем код нескольких компонентов.

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

  • Dropbox for Business: Попробуйте повторить их секцию с баннерами (так называемые hero image (англ.))
  • AirBnB: Попробуйте повторить их футер
  • PayPal: Попробуйте повторить их навигацию
  • Invision: Попробуйте повторить секцию регистрации (signup) в нижней части страницы
  • Stripe: Попробуйте повторить секцию оплаты

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

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

К тому же помните, что вы всегда можете посмотреть HTML или CSS любого сайта. Просто кликните правой кнопкой мыши на странице или на определенном элементе, выберите “Просмотреть код” и появится панель с HTML кодом в левой части и CSS кодом в правой. После окончания верстки или в момент, когда вы в тупике проинспектируйте свой код и посмотрите, как взаимодействуют ваши HTML и CSS.

Лучшие практики HTML и CSS

То, что вы узнали выше — основы HTML и CSS. Следующим шагом будет изучение лучших практик. Лучшие практики представляют из себя набор правил, которые улучшат качество вашего кода.

Семантичная разметка

Одним из лучших правил для HTML и CSS это написание семантичной разметки. Хорошая веб-семантика означает использование подходящих HTML тегов и “говорящих” названий классов в CSS, которые будут передавать структурный смысл.

Например, тег h1 говорит нам, что вложенный текст является важным заголовком. Другим примером является тег footer, который говорит нам что элемент должен располагаться внизу страницы. Для дальнейшего изучения прочтите Основы семантической верстки на HTML5 (рус.) и Для чего нужна семантика в именах классов (англ.) от CSSTricks.

Соглашение об именах в CSS

Следующая важная хорошая практика в CSS собственно соглашение об именах. Хорошее именование, как семантичная разметка, передает смысл и помогает сделать наш код предсказуемым, удобным для чтения и поддержки. Вы можете почитать о разных соглашениях в статье OOCSS, ACSS, BEM, SMACSS: что это? Что мне использовать? (англ.) или Правильный CSS: OOCSS, SMACSS, BEM и SASS (рус.).

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

Сброс CSS

Браузеры имеют небольшие различия при отрисовке стилей, начиная от отступов и до высоты строк. По этой причине всегда сбрасывайте CSS. MeyerWeb — самый популярный способ. Если вы хотите копнуть глубже, то можете почитать Создайте свой собственный файл Reset.css (англ.).

Кроссбраузерная поддержка

Кроссбраузерная поддержка означает что ваш код поддерживает большую часть современных брузеров. Некоторые свойства CSS^ например transition, требуют префиксов (англ.) для их верной работы в разных браузерах. Можете почитать о префиксах в статьях CSS Vendor Prefixes (англ.) или Вендорные префиксы (рус.). Главное что вы должны запомнить — тестируйте свои сайты во всех браузерах, включая Chrome, Firefox и Safari.

Препроцессоры и постпроцессоры CSS

C момента своего появления в 1990-х, CSS проделал огромный путь. Поскольку пользовательские интерфейсы становятся все сложнее, разработчики придумывают инструменты, позволяющие облегчить работу над их созданием. Для этого и предназначены пре- и постпроцессоры.

Препроцессоры представляют из себя расширения для языка CSS, которые добавляют наворотов типа переменных, миксинов и наследования. Два самых главных препроцессора Sass и Less. На 2020 год Sass более распространен. Bootstrap, популярный CSS фреймворк, переключился с Less на Sass. К тому же когда большинство людей заводят речь о Sass, то они на самом деле говорят о SCSS (рус.).

Постпроцессоры CSS вносят изменения в код после того, как он был написан или после компиляции препроцессора. Например, некоторые постпроцессоры, тот же PostCSS, имеют плагины для автоматического добавления префиксов.

Когда вы впервые открываете для себя препроцессоры и постпроцессоры, появляется соблазн использовать их везде. Тем не менее начните с простого и добавляйте переменные, миксины только там, где это действительно необходимо. Статья, о которой я упоминал ранее, CSS у Medium чертовски хорош (англ.), так же рассказывает о том, какие возможны излишки при работе с препроцессорами.

Система сеток и отзывчивость

Сетки в CSS это структура, позволяющая вам “укладывать” элементы горизонтально и вертикально.

Такие фреймворки, как Bootstrap, Skeleton и Foundation предусматривают стили, управляющие строками и колонками в раскладке. В то время как фреймворки, безусловно, полезны, стоит понимать саму суть работы сеток. Прекрасные обзоры на эту тему: Понимание CSS сеток (англ.) и Don’t Overthink Grids (англ.).

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

Вы можете почитать больше на тему медиавыражений в статье Введение в медиавыражения (англ.). Так же, поскольку мы вступили в эру mobile-first (рус.), загляните в Введение в медиавыражения Mobile-First (англ.).

Отработка лучших практик HTML и CSS

Теперь вы вооружены самыми лучшими практиками. Давайте проверим их в бою! Целью следующих двух экспериментов является практика написания чистого кода и наблюдение за долгосрочным эффектом повышения читабельности и поддерживаемости.

Эксперимент 3

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

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

Ниже несколько вопросов, на которые вы должны себе ответить в процессе рефакторинга.

  • Не двусмысленны ли названия классов? Через полгода я все еще смогу понять, что означает название класса?
  • Семантичен ли мой HTML и CSS? Можно ли с первого взгляда определить структуру и взаимоотношения элементов?
  • Использую ли я одни и те же цвета в коде? Не будет ли логичнее вынести их в переменные Sass (англ.)?
  • Работает ли мой код в Safari так же хорошо, как в Chrome?
  • Нельзя ли заменить часть кода на систему сеток, например Skeleton?
  • Не слишком ли часто я использую !important? Как я могу это исправить?

Эксперимент 4

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

В качестве последнего эксперимента создайте собственный сайт-портфолио. Для фронтенд-разработчика портфолио—самый важный актив. Сайт-портфолио предназначен для демонстрации ваших работ. Что еще более важно, это постоянно обновляющийся отчет вашего прогресса в разработке. Поэтому создавайте портфолио даже если у вас 1–2 работы.

Если первый вариант вашего портфолио не идеален — это нормально! Портфолио пройдет через множество итераций (рус.). В первую очередь важно использовать при разработке все ваши навыки.

Будьте в курсе

До тех пор, пока HTML и CSS не выйдут из употребления, важно оставаться в курсе всех событий в области фронтенда.

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

Учитесь на примерах

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

Стайлгайды

Стайлгайды в вебе это наборы CSS компонентов и паттернов, которые могут быть использованы на разных сайтах. Ключевой вещью для обучения является понимание того, как повторно использовать компоненты на основе HTML и CSS и не нарушать принцип “Не повторяйся” (рус.).

Соглашения о коде

Соглашения о коде призваны сделать ваш код читабельным и легким в поддержке. Некоторые из этих ссылок, например CSS Guidelines (англ.), являются набором советов по улучшению написания HTML и CSS в то время, как другие ссылки, например Github internal CSS toolkit and guidelines (англ.) являются примерами эффективного кода.

Сворачиваемся

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

Эта статья первая из двух запланированных. Во второй части мы поговорим об интерактиве с помощью JavaScript и библиотеках/фреймворках. Кроме того если вы хотите чтобы я подробно на чем-то остановился или у вас появились вопросы, то не стесняйтесь писать мне в Twitter.

P.S. Поделитесь этой статьей с друзьями, если она вам понравилась. Это много значит для меня.

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Как стать frontend-разработчиком и всё таки делать сайты

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

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

Специалистам и критике — рада. Если обратите моё внимание на недоработки, буду благодарна за подсказки и советы.

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

1. Создание идеи сайта, определение с видом и структурой сайта, знание видов сайта (статичный/динамичный, адаптивный/отзывчивый дизайн), определение с контентом (текст, графика, фото) — этот пункт сугубо ознакомительный, с этого можно начать понимание основной информации о сайтах.

2. Сервер, хостинг, домен — также понимать, как это работает, какой хостинг выбрать, и тд.

3. Проектирование сайта

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

3.2. Юзабилити (изучить хотя бы основные принципы эргономичного расположения элементов сайта)

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

4.1. Отрисовка макета в Photoshop

4.1.1. Основные инструменты рисования, техника, горячие клавиши.

4.1.3. Шрифты, цвета

4.2. Фреймворки (использование дополнительных бибилиотек может сэкономить время при разработке проекта — дизайне, верстке)

4.2.4. Material Design

5. Разработка — начинаем оживлять дизайн

5.1. Редакторы кода (Notepad++, Sublime Text, DreamViewer)

5.2. Структура и хранение файлов (создание директорий, помещение файлов в определенные папки, именование файлов)

6. Вёрстка/нарезка макета сайта — трансформация дизайна в HTML / CSS. Вот и добрались до основной части нашей работы.

6.1. HTML — изучаем досконально, не ленимся практиковаться, делать хотя бы легкие странички, экспериментировать.

6.2. CSS — то же самое, только можно изучить еще и применение препроцессорных языков SASS и LESS.

6.3. JavaScript — мне однажды дали совет, что для фронтендщика достаточно знать JQuery, и понимать JavaScript. Так или иначе, покорпеть над ними обоими придется.

6.4. JQuery — им нужно владеть больше чем хорошо.

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

6.6. Git — сюда же поместила и систему управления версиями. Пригодится работающим в команде.

7. Интеграция макета в CMS — если, конечно, вы работаете через CMS. Но мне кажется, всё же мы должны знать хотя бы основные моменты популярных CMS — установка, модули, функционал:

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

9. Ну и напоследок, средства автоматизации, такие как Emmet, Jade, владение командной строкой, Gulp и Grunt, но это уже после первых 8 пунктов, и еще сюда можно добавить СЕО-оптимизацию, но это всё же не наша зона работы.

Чувствую, что критика будет, готова её принять, ещё раз напоминаю о своём дилетантизме в этом деле.

Frontend framework 2020 года – ТОП 10

Frontend framework позволяет вам при разработке нового сайта без промедления включиться в работу. Благодаря своей популярности сейчас в мире существует большое количество фронтенд фреймворков. С завидной регулярностью появляются все новые и новые.

Из-за того, что количество фреймворков такое большое, удачный выбор подходящего frontend framework может быть не так уж и прост. Многие разработчики, ровно так же, как и вы, могут положить глаз на широко известные и «закаленные» временем варианты. Среди них, в частности, такие монстры, как Bootstrap и Foundation. С другой стороны, более современные и менее известные фреймворки смогут справиться более эффективно с некоторыми задачами и подойти под ваши нужды не хуже своих известных собратьев. Давайте разберемся и рассмотрим подробнее, какие вообще есть варианты.

Frontend framework 2020 года – ТОП 10

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

  • Профессиональный уровень. Перед тем как принять окончательное решение о выборе в пользу того или иного фреймворка, обязательно учитывайте свои навыки. Если у вас пока нет опыта в разработке, лучше всего использовать такой надежный фреймворк, как Bootstrap. Вместе с ним в комплекте есть большое количество полезных виджетов + от вас требуется минимум навыков. Если у вас более богатый опыт, вы сможете легко обойтись более простым вариантом, который предоставит вам гораздо больше гибкости в настройке. Такие фреймворки обычно проще и не настолько напичканы лишними функциями, как остальные. Это, несомненно, плюс.
  • Отзывчивый дизайн. Каждый сайт, который вы создаете, должен корректно отображаться на абсолютно любом устройстве. Особенно это важно по той причине, что с каждым годом любителей мобильного серфинга в Интернете становится все больше и больше. Так, согласно отчету, посвященному мобильному трафику в США и подготовленному Similar Web, около 56% трафика на топовые американские сайты приходится как раз на мобильные устройства (причем, это статистика двухлетней давности). Мобильный трафик растет и в России. Уже в 2014 году, согласно статистике LiveInternet, 51% трафика приходилось именно на мобильные устройства. Поэтому очень важно, чтобы фреймворк поддерживал отзывчивый веб-дизайн. Так вам не придется беспокоиться об этом позже.
  • CSS-предпроцессоры. Если в работе вы предпочитаете использовать предпроцессоры CSS (например, Sass), убедитесь, что выбранный вами фреймворк поддерживает нужный вам предпроцессор.
  • Оформление. Отдавайте выбор тому фреймворку, который позволит вам получить желаемое оформление с самыми минимальными усилиями.
  • Прототипы. Действительно топовый фреймворк для front-end помогает без промедлений создавать макеты и прототипы, чтобы ускорить весь процесс разработки и веб-дизайна.

Frontend framework 2020 года – ТОП 10

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

Без лишних слов представляем вашему вниманию десять самых популярных фреймворков для front-end разработки, которым стоит уделить внимание в 2020 году.

Bootstrap

Этот список был бы точно неполноценным, если бы мы не включили в него невероятно популярный фреймворк для фрон-енд девелопмента Bootstrap. Будучи созданным разработчиками Twitter и выпущенным в еще 6 лет назад, он сумел стать самым ходовым в мире фреймворком с открытым исходным кодом.

Как и остальные топовые фреймворки, Boostrap поддерживает CSS, HTML и JavaScript компоненты. Он соответствует требованиям стандартов к отзывчивому веб-дизайну. Благодаря этому вы сможете легко разрабатывать отзывчивые сайты любого размера и любой сложности.

Поскольку Bootstrap регулярно обновляется, он обычно поддерживает самые передовые функции. Например, в него были добавлены темы, соответствующие принципам материального дизайна Google, сразу после того, как эти принципы были опубликованы. Также в него в качестве CSS-препроцессора был добавлен Sass.

Преимущества:

  • Поддержка отзывчивого дизайна (при необходимости это можно не использовать).
  • Объемная документация.


Недостатки:

  • Нестандартный размер файла (276 кБ) из-за чрезмерного количества нечасто используемых стилей.
  • Чрезмерное количество классов HTML и DOM-элементов может создавать неудобства и путаницу.

Идеальная целевая аудитория: новички и те, кому нужен надежный и проверенный фреймворк.

Foundation

Созданный дизайнерской компанией Zurb, фреймворк Foundation является усовершенствованным фреймворком корпоративного уровня. Наилучшим образом он приспособлен под создание отзывчивых и быстрых сайтов. Он пользуется популярностью среди таких известных компаний, как Facebook. Достаточно сложный, поэтому может быть не совсем подходящим решением для тех, кто только протаптывает свой путь к веб-разработке.

Этот полнофункциональный каркас поддерживает графическое ускорение, чтобы вы смогли насладиться плавными и «быстрыми как молния» анимациями, и Fastclick.js для быстрой визуализации на mobile. Работает на базе предпроцессора Sass и поддерживает разработанный Foundation атрибут для обмена данными. Последний позволяет вам загружать как легкие и простые HTML-страницы для мобильных девайсов, так и более «тяжелые» HTML-страницы для устройств с экраном побольше.

Преимущества:

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

Недостатки:

  • Достаточно немаленький размер файла «из коробки».
  • Чересчур сложный в освоении для тех, кто еще не очень знаком с разработкой.

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

Materialize

В отзывчивом front-end фреймворке Materialize также реализованы спецификации материального дизайна от компании Google. В нем есть большое количество готовых к использованию иконок, кнопок, диаграмм, форм и многих других компонентов. Идет как в виде стандартной версии, так и в версии на базе Sass.

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

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

Преимущества:

  • Чрезвычайно большой выбор различных компонентов на любой вкус.
  • Благодаря поддержке responsive design веб-сайты могут отлично работать на любом девайсе.

Недостатки:

  • У файла большой размер, поэтому фреймворк немного громоздкий.
  • Отсутствует поддержка модели Flexbox.

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

Semantic-UI

Сравнительный «начинающий фреймворк» Semantic-UI отличается от других большим количеством особенностей. Он находится всего в шаге от того, чтобы стать одним из наиболее востребованных из существующих фреймворков для фронт-енда.

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

Еще одной отличительной особенностью Semantic-UI является то, что в него можно интегрировать невероятное большое количество сторонних библитек. Их настолько много, что вам в самом деле не придется использовать какие-либо другие. Таким образом, процесс разработки становится немного проще и «оптимизированней».

Преимущества:

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

Недостатки:

  • Огромные пакеты, в сравнении с пакетами Foundation и Bootstrap.
  • Этого фреймворка может не хватать тому, кому необходимо создавать более серьезные требования к проектированию и разработке.

Идеальная целевая аудитория: новички и те, кто нуждается в легком и быстром фреймворке.

Material UI

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

Будучи оснащенным готовыми к работе CSS- и компонентами, соответствующими принципам материального дизайна, фреймворк Material UI построен на базе предпроцессора LESS. Поскольку в нем используются компоненты React, желательно иметь уверенное представление о работе с этой библиотекой.

Material UI прост в настройке и поддерживает стили, разделенные на отдельные файлы, чтобы вы смогли вручную настраивать переменные LESS CSS без ущерба компонентам фреймворка.

Преимущества:

  • Очень простой способ соответствия рекомендациям материального дизайна.
  • Обширные возможности настройки.

Недостатки:

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

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

Frontend framework 2020 года – ТОП 10

Этот фреймворк был придуман и реализован теми, кто стоит за созданием поисковика Yahoo. Вместе с Pure идет легковесный набор модулей CSS. Их можно использовать практически для любого вида и масштаба проекта. С Pure вы получаете возможность легко создавать целую кучу отзывчивых объектов, в том числе кнопки и меню. Поскольку фреймворк создан исключительно на CSS, он, к сожалению, не поддерживает плагины JavaScript и JQuery.

При уменьшении размера и «компрессии» с помощью Gzip Pure занимает всего лишь 4,5 кБ! Этот результат позволяет уверенно заявить, что Pure – один из наиболее легковесных и быстрых фреймворков для разработки фронт-енда. По этой причине он является отличным вариантом для создания mobile-версий сайтов. Именно за это его многие и ценят.

Преимущества:

  • Это невероятно легкий фреймворк, который обеспечивает высокую скорость загрузки даже при открытии сайта на мобильных девайсах.
  • Широкий набор модулей CSS, каждый из которых можно применить практически для любого большого и небольшого проекта по design и development.

Недостатки:

  • Только CSS – отсутствует поддержка JavaScript и JQuery плагинов.

Идеальная целевая аудитория: веб-разработчики, сосредоточенные на создании отзывчивых и быстрых mobile веб-сайтов.

Skeleton

Skeleton – легковесный отзывчивый «шаблонный код», в котором всего 400 строк. В нем собран лишь самый минимальный необходимый функционал, чтобы вы смогли быстро приступить к реализации веб-проекта. Он не предназначен быть таким же всеохватывающим, как остальные фреймворки, перечисленные выше.

Skeleton отзывчивый и построен на базе сетки из 12 столбцов. В нем есть все, что может понадобиться для разработки, в том числе кнопки и формы.

Преимущества:

  • Невероятно леговесный
  • Повышенная легкость использования и полезность для мелких проектов

Недостатки:

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

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

UIKit

UIKit это высокомодульный фронтенд фреймворк, который выделяется на фоне остальных аналогичных решений по многим причинам. Одной из ключевых является тот факт, что он поддерживает CSS-предпроцессоры и LESS, и Sass.

В комплекте с ним идет набор гибких и отзывчивых компонентов с последовательными соглашениями о наименованиях. Во многом благодаря этому он стал одним из самых популярных среди всех существующих front-end фреймворков.

Он имеет более 30 расширяемых модульных компонентов, которые все вместе обеспечивают повышенную универсальность. В нем есть компоненты навигации (к примеру, боковые навигационные панели), элементы (таблицы и формы HTML), компоненты JavaScript (скрытые панели и модальные диалоговые окна), обычные объекты (кнопки, значки и наложения) и компоненты макета (в том числе плавающая и полностью отзывчивая сетка).

Преимущества:

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

Недостатки:

  • Ограниченность обучающих ресурсов (это связано с тем, что фреймворк относительно новый).

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

Milligram

Milligram – это очередной чрезвычайно легковесный фреймворк, похожий на Skeleton. При сжатии с помощью Gzip он занимает всего 2 кБ. Является простейшим и удобным начальным решением для многих разработчиков.

Система сетки Milligram не похожа на остальные из-за использования спецификации Flexbox. В комплект этого frontend framework также входит несколько основных компонентов, с которыми вы легко начнете разработку, используя элементы типографики, а также такие объекты как кнопки, списки, блоки цитирования и таблицы.

Преимущества:

  • Очень легковесный (всего 2 кБ при сжатии с помощью Gzip).
  • Использование CSS Flexbox в качестве сетки.

Недостатки:

  • Достаточно ограниченное число ресурсов из-за относительной новизны решения.
  • Минимум доступных объектов для создания стиля (если сравнивать с топовыми фреймворками).

Идеальная целевая аудитория: разработчики, принимающие участие в не очень больших проектах, для которых необязательно наличие множества компонентов для создания стиля, и те, кто желает использовать CSS Flexbox в качестве сетки.

Многие могут поспорить с тем, что Susy в принципе не frontend framework в классическом понимании. Он нацелен на соответствие комплексным требованиям к макету. Многие больше относят Susy к построителю сетки, но он, тем не менее, легко станет жизненно необходимым инструментом, особенно для тех, у кого есть особенные требования к макету.

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

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

Преимущества:

  • Превосходная гибкость при разработке любого вида макета сетки.
  • Автоматическое выполнение расчетов.

Недостатки:

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

Идеальная целевая аудитория: те, у кого есть особенные требования к макету.

Frontend framework 2020 года – Статистика

Решение выбрать тот или иной frontend framework должно базироваться не столько на известности фреймворка, сколько на соответствии конкретным нуждам разработчика. Но вам ведь любопытно узнать, какой из фреймворков самый ходовой и популярный? Ниже мы привели рейтинг топовых фреймворков для front-end разработки в соответствии с количеством голосов на GitHub – самом известном сервисе для совместной разработки. Статистика актуальна на июнь 2020 года, а технологии расставлены по рейтингу (начиная с самой популярной), который в этой системе рассчитывается по количеству так называемых «звезд».

Интересно, что при сравнении первой пятерки фреймворков в Google Trends самое большое количество запросов имеет не Bootstrap, а Foundation. Хотя в этой статистике Bootstrap второй по популярности среди front-end фреймворков.

Послесловие

Как вы уже поняли, различные front-end фреймворки для разработки предоставляют разные преимущества. То, что подходит для одного разработчика и проекта, может быть совершенно неподходящим для другого. Поэтому перед выбором подходящего решения следует в обязательном порядке «прощупать почву» и рассмотреть весь доступный спектр решений.

При выборе frontend framework обязательно учитывайте не только свой уровень разработки, но и стандартные требования проекта, над которым вы работаете. Вашим требованиям могут отлично соответствовать несколько доступных решений, так что в любом случае выбор у вас будет обширный. Тем не менее освоить несколько фреймворков никогда не будет лишним. Удачных и интересных вам проектов!

9 маленьких, но полезных фреймворков для frontend-разработчиков

Для веб-верстки существует много разных приложений и инструментов. Есть даже и такие, что имеют объем менее 1KБ, а возможности подстать Bootstrap. В дополнение ко всему их используют веб-мастера для увеличения скорости работы и загрузки страниц и элементов сайта. Какие же они: маленькие помощники в большом деле?

03 Сентябрь 2020

Если вы обратитесь к поисковикам Яндекс\Google, то с вероятностью в 100% сможете найти огромное, нет, невероятное количество самых разных по функциональности и удобству инструментов для увеличения скорости работы вашего сайта. Разумеется, многое зависит и от оптимизации изображений, и работы с CDN. Но есть одна вещь, о которой думают чаще всего именно веб-верстальщики – оптимизация кода.

Оптимизация кода может означать и сокращение количества запросов http, уменьшение размера файлов, использование пользовательских фреймворков, уже оптимизированных «на» скорость. Bootstrap v4, по сути, является удивительным инструментом и разнообразным, но он тяжеловесен, и весьма сильно. Но не о нем речь.

Ранее, мы отдельно рассматривали разные фреймворки для разных целей, но все они были очень «большими». А, как известно, чем больше приложение, то зачастую и проект получается немаленьким. В этом материале мы посмотрим на самые маленькие фреймворки, которыми можно попробовать заменить, например, Bootstrap. Весь функционал, конечно, не перенести в них, но отдельные моменты вполне можно использовать. И да, можно действительно прийти в удивление от того, насколько огромны их возможности и как мал их размер. И это не фантастика! Особенно, если учесть момент, что большинство из примеров – модульные, а это значит, что лишнее можно отключить, не использовать, не прописывать и…код уменьшится в целом.

Маленькие, да удаленькие

Topcoat

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

И это не говоря о том, что фреймворк имеет мобильную оптимизацию, использование CSS БЭМ-нейминга, позволяет редактировать и создавать собственные стили, обладает поддержкой psd-файлов и многое другое.

Pure CSS

Созданный Yahoo, фреймворк поражает адаптивностью и практически мгновенной загрузкой. Тем не менее, проще всего его охарактеризовать, как набор маленьких адаптивных CSS-модулей для любого сайта. Как и Milligram (о нем ниже), Pure базируется на Normalize.css, имеет адаптивный дизайн элементов, но набор стилей небольшой, поэтому при необходимости вполне можно заняться собственным творчеством и настроить таблицу стилей, чтобы включить меню, кнопки, формы, разные их комбинации и прочее.

Если же вы хотите поработать только с сеткой, то можно загрузить специальный модуль отдельно (весит около 0,8 Кb), а это явно меньше, чем у Bootstrap или Foundation. Да к тому же сетка рассчитана на 24 колонки.

Petal

Petal является довольно небольшим фреймворком для fronted-разработчиков уникального дизайна пользовательского интерфейса. В нем есть поддержка некоторых компонентов, но в основном он базируется на LESS CSS и представляет альтернативу всем Sass-библиотекам.

Фреймворк еще развивается, хотя стабильная версия на текущий момент v0.11.1., а команда разработчиков Shakr тратит невероятное количество времени на развитие Petal, поэтому в ближайшее время он точно не исчезнет.

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

Mincss

Данный фреймворк позиционируется разработчиками и рекламируется, как уменьшенная альтернатива Bootstrap. Но на самом деле это не что иное, как маленький фреймворк для пользовательского интерфейса. Работает он во всех основных браузерах и поддерживает ряд устаревших, таких как IE 6+.

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

Да, у Mincss меньше возможностей, чем у Bootstrap, но при желании можно перенести часть кода из Bootstrap в Min для последующей оптимизации с помощью отдельного плагина. Можно подключить и Min к Bootstrap и тогда функциональность первого расширится.

Milligram

Еще один крохотный frontend-фреймворк для работы с пользовательским интерфейсом. У него не очень большой набор стилей, но зато есть возможность создать чистый проект. Размер пакета исчисляется в 2Kb, но уже сейчас он входит в тройку самых доступных и простых инструментариев. Установить его можно с помощью любого из основных менеджеров, таких как Yarn, Bower или npm.

Но особенность CSS-фреймворка в том, что в нем вы не найдете компоненты или динамические функции, которые точно существуют в Bootstrap. В основном в Milligram описаны кнопки, типографика, работа с цитатами, а работа с сеткой строится на флексбоксах (контейнерах). Поэтому приложение ориентировано на разработчиков, которые хотят быстро создать макет без необходимости использования сложных функций.

О, этот фреймворк способен поразить многих профи-мастеров в веб-верстке своим реально маленьким размером – 30 Kb и это включая все JS-библиотеки. Для тех, кто еще не особо представляет насколько это действительно мало, хотя мы рассказывали и о фреймворках менее 1Kb, то Kube почти в 20 раз меньше Bootstrap (последний около 600 Кb).

Тем не менее, Kube не может конкурировать с чем-то наподобие Mincss, потому что Kube поставляется в комплекте с огромным количеством модулей и функций. Но если это то, что вы ищете, то эта библиотека великолепна!

У Kube огромная документация и сам фреймворк выглядит весьма «настоящим» и профессиональным. Поэтому его вполне можно использовать и для работы в команде.

Furtive

Самопровозглашенный минималистический фреймворк Furtive весит приблизительно 2,4Кb и представляет собой один из немногих вариантов структур mobile-first с большим набором классов и функций для сайтов.

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

Siimple

Модульный маленький фреймворк был построен с использованием SASS/SCSS, вдохновлен трендом плоского дизайна и обладает очень простым кодом. Siimple выводит минимализм на новый уровень, предлагая «чистый» подход к дизайну и коду. Здесь всё – цвета, типографика, сетки и пр. – создается в стиле минималистического flat-дизайна, который до сих пор существует, используется, приветствуется и является уникальным. И это же относится к невероятно чистому, простому и понятному коду.

Для примера, посмотрите на документацию и спросите себя: «Действительно ли фреймворк подходит для быстрого прототипирования или создания пользовательского макета с нуля?»

Picnic

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

Использовать фреймворк можно для работы над любым сайтом, будь то портфолио или интернет-магазин, бизнес-портал или корпоративная платформа. Чтобы увидеть Picnic в действии достаточно посетить demo-страничку и ознакомиться с развернутой документацией.


А нужен ли такой CSS-фреймворк?

Аналогично тому, как мы ранее рассказывали о JS-библиотеках, надстройках для популярных инструментов верстки сайтов, мы рассказали сейчас и о CSS-фреймворках. Но если возникает вопрос, нужен ли он реально, то здесь стоит задуматься о том, «а как удобнее работать верстальщику: самому составлять CSS и описывать все нужные ему стили или использовать шаблоны, практики, кейсы и наборы, уже созданные и протестированные на эффективность и производительность».

Да, использование готовых вариаций значительно экономит время, исключает появление ошибок в коде и предотвращает монотонность труда в целом. Даже не возникает мысли о том, профессионал ли вы в веб-верстке, знаете ли на «отлично» HTML, CSS, JS и прочие необходимые языки и структуры. Суть здесь одна – ускорение и упрощение процесса труда над сайтом.

Каждый фреймворк имеет свои сильные и слабые стороны, а также конкретные области применения, что позволяет выбирать, исходя из потребностей конкретного проекта. Например, если некоторый проект прост, нет необходимости использовать сложный фреймворк. Кроме того, многие из вышеприведенных вариантов являются модульными, что позволяет использовать только те компоненты, которые нужны или даже смешивать компоненты из различных интерфейсных структур. Именно поэтому многие веб-разработчики используют и работают не в одном каком-то фреймворке, а в нескольких. Например, взять CSS-стиль отдельных компонентов из одной структуры, предпочтительную систему сетки из другой и более сложные компоненты из третьего. Vive la modularité! :)

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

Завершение

Любите ли вы работать с готовыми решениями или обожаете описывать стили самостоятельно, может, вы сторонник составления и сбора собственной базы с кусочками нужного вам из проекта в проект кода – фреймворки могут пригодиться рано или поздно. Новичок или профессионал в веб-верстке? Фреймворки могут, с одной стороны, сделать работу за вас, с другой, предоставить чистый код, аккуратный, синтаксически правильный. А это уже залог и большое преимущество для улучшения и ускорения работы сайта.

И разумеется, CSS-фреймворков, как и прочих иных, огромное количество. Мы рассмотрели самые маленькие по размеру, да и только их часть. Возможно, что-то из списка пригодится и вам, читатели, а что-то вы, возможно, уже используете не первый проект.

Front End итоги 2020 года и тренды веб-дизайна в 2020 году

Привет, друзья! Скорее спешите смотреть новый выпуск подкаста, ведь он несет вам подведение итого 2020 года в области Front End, а также рассуждения о грядущих трендах в веб-дизайне в грядущем 2020 году с ретроспективой года уходящего. Кроме этого поговорили про UX платежных форм с 16 полезными советами по их улучшению, обсудили новость с переходом Telegram на SHA-256 шифрование, и еще обсудили развитие нейросетей и порно.

Тему к следующему выпуску предлагайте здесь: Тему к подкасту #151.

«Первая тема»

«Дизайн»

«Светские новости»

«Разработка»

«Научпоп»

С темами к выпуску можно ознакомиться по ссылке: Темы к подкасту #150.

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

От нуля до героя фронтенда (Часть 1)

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

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

Руководство разбито на две части для более простого усвоения материала. Часть 1 посвящена разработке интерфейсов на HTML и CSS. Часть 2 будет о Javascript, фреймворках и паттернах дизайна.

Основы HTML и CSS

В разработке фронтенда все начинается с HTML (рус. — здесь и далее примечание переводчика с указанием языка статьи по ссылке) и CSS (рус.). HTML и CSS контролируют то, что вы видите на странице. HTML диктует содержимое в то время как CSS регулирует стили и раскладку.

Для начала прочитайте пособия по HTML (рус.) и CSS (рус.) от Mozilla Developer Network (MDN). MDN предоставляет пошаговые объяснения важных концепций HTML и CSS. К тому же каждая глава длинной всего в один экран и проиллюстрирована интерактивными демо на CodePen и JSFiddle.

После прочтения этих материалов загляните на курс Создай сайт (англ.) от CodeAcademy. Потребуется всего несколько часов для прохождения этого курса. Он даст хорошую основу для построения сайтов на HTML и CSS. Если вы хотите больше, то Построение веб-форм (англ.) — еще одно руководство от CodeAcademy, которое научит вас создавать и стилизовать веб-формы.

Чтобы попрактиковаться в CSS попробуйте CSS Diner (англ.). Это забавная игра с задачками по CSS. Другой важный аспект HTML и CSS — раскладка. LearnLayout (рус.) интерактивный учебник, показывающий как создавать раскладки на HTML и CSS.

Так же изучите как пользоваться Google Fonts (англ.) при помощи статьи Основы Google Font API (англ.) от CSSTricks или Руководство по Google Font API (рус.). Типографика — это фундаментальная основа интерфейса. Когда у вас появится время, я крайне рекомендую вам прочитать эту бесплатную онлайн-книгу Professional Web (англ.) от Donny Truong. Она научит вас всему, что вы должны знать о типографике во фронтенд-разработке.

Изучая все эти ресурсы, не беспокойтесь особо о том, чтобы все запомнить. В первую очередь сосредоточьтесь на понимании того, как HTML и CSS взаимосвязаны.

Практика основ HTML и CSS

Теперь, когда вы имеете представление об основах HTML и CSS, давайте повеселимся. В этом разделе есть два эксперимента для вашей практики создания сайтов и интерфейсов. Я использую термин “эксперимент” поскольку в ходе эксперимента вы осознаете на сколько сильно ваш успех зависит от ваших неудач.

Эксперимент 1

В нашем первом эксперименте мы будем использовать CodePen. CodePen это площадка для фронтенда (“песочница”), где вы можете писать HTML и CSS код без создания файлов на вашем компьютере. Там так же есть функция живого предпросмотра, которая обновляется сразу после сохранения кода.

Используя CodePen, вы убиваете двух зайцев сразу. С одной стороны вы практикуете HTML и CSS. C другой стороны вы создаете основу для портфолио с иллюстрациями вашего прогресса. Мы так же будем использовать Dribbble, который полон вдохновляющего дизайна.

Идите на Dribbble и найдите дизайн, код для которого вы сможете написать за пару часов. Я выбрал несколько примеров, с которых вы можете начать: 1, 2, 3, 4 и 5. Я выбирал дизайны, ориентированные в первую очередь на мобильную разработку, потому что они менее сложны, чем их аналоги для обычных экранов. Тем не менее вы вольны выбрать вариант для десктопов.

Когда вы определились с дизайном, идите и попробуйте сверстать его на CodePen. Если вы застряли, помните что StackOverflow (англ.) ваш друг. Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили. Так же взгляните на некоторые примеры на CodePen. Я прикрепляю несколько хороших ссылок:

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

Если у вас нет за плечами опыта в дизайне, вероятнее всего, ваш дизайнерский глазомер не настроен. Фронтенд-разработчик с хорошим дизайнерским чутьем будет в состоянии отличить хороший дизайн и сверстать его идеально. Я написал статью несколько недель назад о том, как развить свое дизайнерское чутье (рус.).

Эксперимент 2

Надеюсь, первый эксперимент дал вам определенную уверенность в написании HTML и CSS. Для эксперимента 2 мы заглянем на ряд сайтов, затем напишем код нескольких компонентов.

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

  • Dropbox for Business: Попробуйте повторить их секцию с баннерами (так называемые hero image (англ.))
  • AirBnB: Попробуйте повторить их футер
  • PayPal: Попробуйте повторить их навигацию
  • Invision: Попробуйте повторить секцию регистрации (signup) в нижней части страницы
  • Stripe: Попробуйте повторить секцию оплаты

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

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

К тому же помните, что вы всегда можете посмотреть HTML или CSS любого сайта. Просто кликните правой кнопкой мыши на странице или на определенном элементе, выберите “Просмотреть код” и появится панель с HTML кодом в левой части и CSS кодом в правой. После окончания верстки или в момент, когда вы в тупике проинспектируйте свой код и посмотрите, как взаимодействуют ваши HTML и CSS.

Лучшие практики HTML и CSS

То, что вы узнали выше — основы HTML и CSS. Следующим шагом будет изучение лучших практик. Лучшие практики представляют из себя набор правил, которые улучшат качество вашего кода.

Семантичная разметка

Одним из лучших правил для HTML и CSS это написание семантичной разметки. Хорошая веб-семантика означает использование подходящих HTML тегов и “говорящих” названий классов в CSS, которые будут передавать структурный смысл.

Например, тег h1 говорит нам, что вложенный текст является важным заголовком. Другим примером является тег footer, который говорит нам что элемент должен располагаться внизу страницы. Для дальнейшего изучения прочтите Основы семантической верстки на HTML5 (рус.) и Для чего нужна семантика в именах классов (англ.) от CSSTricks.

Соглашение об именах в CSS

Следующая важная хорошая практика в CSS собственно соглашение об именах. Хорошее именование, как семантичная разметка, передает смысл и помогает сделать наш код предсказуемым, удобным для чтения и поддержки. Вы можете почитать о разных соглашениях в статье OOCSS, ACSS, BEM, SMACSS: что это? Что мне использовать? (англ.) или Правильный CSS: OOCSS, SMACSS, BEM и SASS (рус.).

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

Сброс CSS

Браузеры имеют небольшие различия при отрисовке стилей, начиная от отступов и до высоты строк. По этой причине всегда сбрасывайте CSS. MeyerWeb — самый популярный способ. Если вы хотите копнуть глубже, то можете почитать Создайте свой собственный файл Reset.css (англ.).

Кроссбраузерная поддержка

Кроссбраузерная поддержка означает что ваш код поддерживает большую часть современных брузеров. Некоторые свойства CSS^ например transition, требуют префиксов (англ.) для их верной работы в разных браузерах. Можете почитать о префиксах в статьях CSS Vendor Prefixes (англ.) или Вендорные префиксы (рус.). Главное что вы должны запомнить — тестируйте свои сайты во всех браузерах, включая Chrome, Firefox и Safari.

Препроцессоры и постпроцессоры CSS

C момента своего появления в 1990-х, CSS проделал огромный путь. Поскольку пользовательские интерфейсы становятся все сложнее, разработчики придумывают инструменты, позволяющие облегчить работу над их созданием. Для этого и предназначены пре- и постпроцессоры.

Препроцессоры представляют из себя расширения для языка CSS, которые добавляют наворотов типа переменных, миксинов и наследования. Два самых главных препроцессора Sass и Less. На 2020 год Sass более распространен. Bootstrap, популярный CSS фреймворк, переключился с Less на Sass. К тому же когда большинство людей заводят речь о Sass, то они на самом деле говорят о SCSS (рус.).

Постпроцессоры CSS вносят изменения в код после того, как он был написан или после компиляции препроцессора. Например, некоторые постпроцессоры, тот же PostCSS, имеют плагины для автоматического добавления префиксов.

Когда вы впервые открываете для себя препроцессоры и постпроцессоры, появляется соблазн использовать их везде. Тем не менее начните с простого и добавляйте переменные, миксины только там, где это действительно необходимо. Статья, о которой я упоминал ранее, CSS у Medium чертовски хорош (англ.), так же рассказывает о том, какие возможны излишки при работе с препроцессорами.

Система сеток и отзывчивость

Сетки в CSS это структура, позволяющая вам “укладывать” элементы горизонтально и вертикально.

Такие фреймворки, как Bootstrap, Skeleton и Foundation предусматривают стили, управляющие строками и колонками в раскладке. В то время как фреймворки, безусловно, полезны, стоит понимать саму суть работы сеток. Прекрасные обзоры на эту тему: Понимание CSS сеток (англ.) и Don’t Overthink Grids (англ.).

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

Вы можете почитать больше на тему медиавыражений в статье Введение в медиавыражения (англ.). Так же, поскольку мы вступили в эру mobile-first (рус.), загляните в Введение в медиавыражения Mobile-First (англ.).

Отработка лучших практик HTML и CSS

Теперь вы вооружены самыми лучшими практиками. Давайте проверим их в бою! Целью следующих двух экспериментов является практика написания чистого кода и наблюдение за долгосрочным эффектом повышения читабельности и поддерживаемости.

Эксперимент 3

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

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

Ниже несколько вопросов, на которые вы должны себе ответить в процессе рефакторинга.

  • Не двусмысленны ли названия классов? Через полгода я все еще смогу понять, что означает название класса?
  • Семантичен ли мой HTML и CSS? Можно ли с первого взгляда определить структуру и взаимоотношения элементов?
  • Использую ли я одни и те же цвета в коде? Не будет ли логичнее вынести их в переменные Sass (англ.)?
  • Работает ли мой код в Safari так же хорошо, как в Chrome?
  • Нельзя ли заменить часть кода на систему сеток, например Skeleton?
  • Не слишком ли часто я использую !important? Как я могу это исправить?

Эксперимент 4

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

В качестве последнего эксперимента создайте собственный сайт-портфолио. Для фронтенд-разработчика портфолио—самый важный актив. Сайт-портфолио предназначен для демонстрации ваших работ. Что еще более важно, это постоянно обновляющийся отчет вашего прогресса в разработке. Поэтому создавайте портфолио даже если у вас 1–2 работы.

Если первый вариант вашего портфолио не идеален — это нормально! Портфолио пройдет через множество итераций (рус.). В первую очередь важно использовать при разработке все ваши навыки.

Будьте в курсе

До тех пор, пока HTML и CSS не выйдут из употребления, важно оставаться в курсе всех событий в области фронтенда.

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

Учитесь на примерах

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

Стайлгайды

Стайлгайды в вебе это наборы CSS компонентов и паттернов, которые могут быть использованы на разных сайтах. Ключевой вещью для обучения является понимание того, как повторно использовать компоненты на основе HTML и CSS и не нарушать принцип “Не повторяйся” (рус.).

Соглашения о коде

Соглашения о коде призваны сделать ваш код читабельным и легким в поддержке. Некоторые из этих ссылок, например CSS Guidelines (англ.), являются набором советов по улучшению написания HTML и CSS в то время, как другие ссылки, например Github internal CSS toolkit and guidelines (англ.) являются примерами эффективного кода.

Сворачиваемся

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

Эта статья первая из двух запланированных. Во второй части мы поговорим об интерактиве с помощью JavaScript и библиотеках/фреймворках. Кроме того если вы хотите чтобы я подробно на чем-то остановился или у вас появились вопросы, то не стесняйтесь писать мне в Twitter.

P.S. Поделитесь этой статьей с друзьями, если она вам понравилась. Это много значит для меня.

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Современные инструменты для Front End разработки

Разработчики веб-страниц Front End’a несут ответственность за то, чтобы страница точь-в-точь повторяла макет дизайнера и одинаково отображалась во всех браузерах. В течение долгого времени это становилось легче с появлением более продвинутых браузеров и большего количества средств разработки.

В то время как все знают о HTML и CSS, меньше людей знает о Sass и Haml. Развитие фронтенда продолжает продвигаться с каждым годом. Одно из основных заданий разработчика – всегда быть в курсе последних нововведений.

Если вы чувствовали себя немного неуверенными в своих навыках фронтенда или просто хотите узнать о более новых методах, эту небольшую статью советую прочитать именно вам. Я предлагаю вам несколько популярных инструментов и ресурсов, которые каждый разработчик Front End’a должен использовать или по крайней мере знать об их существовании.

CSS препроцессоры

Возможно, самый известные препроцессоры CSS: SASS, также немного похож на него LESS. Благодаря этим двум библиотекам вы можете создать более динамический код.

Термин “SASS” можно применять как к технологии, так и к синтаксису. Файлы SASS могут также быть файлами SCSS, между ними нет особых различий, местами SCSS просто более напоминает привычный CSS. LESS – та же самая вещь только с различным синтаксисом.

SASS и LESS не языки по сути, но небольше расширения для CSS. Код SASS/LESS компилируется в обычный CSS.

Самое большое различие между SASS и LESS, кроме синтаксиса, то, как они работают. SASS компилируется с помощью Руби, в то время как LESS – использует JavaScript (или Node.js).

Обратите внимание на то, что предварительная обработка CSS действительно требует небольшого знания команд Terminal/CLI. Вам не обязательно быть экспертом, но у вас должны быть хотя бы базовые знания работы в командной строке. Например, самый быстрый способ собрать файлы SASS состоит в том, чтобы использовать что-то вроде этого в терминале:

sass input.scss output.css

Но как только вы получаете некоторую практику, это становится для вас вторым способом написания CSS.

Вот некоторые ресурсы для того, чтобы узнать больше о препроцессорах для CSS:

GIT (Распределенная система управления версиями)

Контроль для управлением проектом и версиями необходим для больших веб-проектов. Такое сообщество как GitHub сделало “GIT” обычной частью технологий.

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

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

Установка GIT’a очень снисходительно относится ко всем операционным системам. Легкое достаточно подробное обучение, в процессе которого вы узнает, как все передается, ветвится и контролируется.

Но с вводным гидом и большим количеством практики GIT будет медленно становиться частью вашего технологического процесса Front End’a.

Одно из самых больших препятствий, которое может произойти – это использование GIT через командную строку. Это – предпочтительный метод большинства программистов, которые уже используют CLI ежедневно. Однако, если вы так и не смогли научиться использовать его, то вам на помощь приходит приложение от GitHub’a и который на данный момент является бесплатным.

Мой совет если вы все таки решили начать изучать GIT’a состоит в том, чтобы вы учили его не в спешке, а поэтапно. Легко быть обескураженным, если контроль версий – абсолютно незнакомое понятие. Поэтому учитесь в своем собственном темпе и не сдавайтесь!

Вот некоторые превосходные веб-сайты для изучения основных возможностей GIT’a:

JavaScript библиотеки

Развитие Front End’a, несомненно, переместилось к полной поддержке JavaScript. От динамических элементов страницы до мультипликации JavaScript – одного из основных инструментов каждого веб-проекта.

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

Хорошее правило состоит в том, чтобы изучить только то, в чем вы нуждаетесь и когда вам это нужно. Если вы тот, кто просто любит писать код для забавы, лучше освоить только несколько библиотек. jQuery – возможно, лучший выбор, чтобы начать, так как это – одна из лучших пяти библиотек JavaScript, которыми чаще всего пользуются.

Но также следует рассмотреть более современные инструменты, такие как Backbone.js или Angular.js. Они оба являются общедоступными библиотеками, которые были написаны для структурирования основных JS веб-приложений. Они невероятно сильны, но могут служить небольшим дополнением на простом блоге WordPress.

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

Настоящая сила JavaScript только сейчас обнаруживается. С таким инструментом как Node.js появляется возможность установить его на сервер. Нельзя не напомнить о том, что сырой JavaScript может быть выполнен в консоли браузера, дающей еще больше возможностей Front End разработчикам.

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

HTML препроцессоры

Популярность препроцессоров CSS, также дала возможность появлению препроцессоров для HTML Front End’a. Это работает точно так же, как SASS/LESS, где вы написав код, и скомпилировав, получили ли бы обычный HTML-код.

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

Haml и Jade – эти два наиболее популярных препроцессора с совсем разными стилями синтаксиса. Slim – третий вариант. Все три – в открытом доступе и все время улучшаются, благодаря общественной поддержке.

Haml и Slim работают на Ruby, Haml является альтернативой ERB шаблонов. Сейчас Haml – большой инструмент для разработчиков Rails. Для Front End’еров может быть столь же полезным, вне зависимости от того, пишете ли вы код на Back End’е или нет.

Jade – шаблонный двигатель, который работает на Node.js. Лучше использовать его для приложенний Node или также можно использоваться в качестве автономного решения для разработчиков Front End’a, которым нравится синтаксис Jade.

Нет никакого запрета или неправильного выбора, так как они оба довольно таки похожи. Общее согласие среди любителей Ruby состоит в том, чтобы придерживаться разработки на Haml. Но много разработчиков Front End’a склоняются к Jade’у, потому что Node.js стал горячей тенденцией в веб-разработке.

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

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

JS менеджер задач

Автоматизированные менеджеры задач – новейшие инструменты Front End’a. Понятие часто запутывающее сначала, но менеджеры задач могут существенно улучшить ваш технологический процесс и дать огромный потенциал.

Два крупных менеджера задач – Gulp и Grunt. Вы заметите, что они оба работают на JavaScript, но также им требуется терминал. Так каким же образом все работает?

Gulp и Grunt устанавливаются через Node Package Manager (NPM) в командной строке. Сами библиотеки могут управляться командами JS от отдельных файлов, gulpfile.js и gruntfile.js соответственно.

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

Если вы никогда не делали ничего подобного до этого времени, вы вероятно несколько смущены. Не волнуйтесь насчет синтаксиса на данный момент, вместо этого вы можете сосредоточиться на понятиях и особенностях, предоставляемых этими .js файлами.

Вы можете добавить код JS, который автоматизирует некоторые задачи, такие как обработка файлов SASS, Haml, даже языки JS, один из которых CoffeeScript. Вы заметите, что каждая из тех связей указывает на пакет NPM, предварительно написанный для Gulp’a. Это означает, что вы не должны писать, то же, что и ваши собственные автокомпиляторы SASS, потому что это уже все написано!

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

Чтобы начать, просто выберите Gulp или Grunt и заставьте себя практиковаться.

Вот некоторые способы начать:

В заключение

Все эти инструменты довольно новые или очень выросли за прошедшие несколько лет. Мир развития Front End’a предлагает столько впечатляющих инструментов для упрощения написания кода, и я надеюсь, что эта статья даст вам отправную точку.

Цукерберг рекомендует:  React jx - Как удалять элементы с выборкой по state в ReactJS
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих