Семинар 1: Современный HTML, CSS и не только
Если вы хотите развиваться как веб-разработчик, вам стоит узнать больше узнать о верстке. Однако даже если вы не видите себя в вебе, многое из того, что здесь приведено, может оказаться полезным для расширения вашего кругозора.
HTML 5
HTML 5 - это новая веха в развитии языка разметки HTML. Пятый стандарт привнес множество долгожданных обновлений и сделал жизнь веб-разработчика легче и приятнее.
Простой пример - начиная с HTML 5 можно просто указывать <input type="email" /> и браузер будет сам следить за тем, чтобы вы не забыли ввести @, не использовали некорректных символов и т.д.
Погрузиться в HTML 5 можно на уже известных нам ресурсах: тут и тут.
Препроцессоры CSS
Так сложилось, что CSS в течение долгого времени совершенно не развивался, но запросы к сложности приложений только росли. В CSS не хватало переменных, циклов, вычисляемых выражений, также не было возможности повторно использовать ранее написанные стили. Все это наводило грусть и апатию на разработчиков и в итоге привело к тому, что были разработаны надстройки над CSS, которые все эти возможности добавляли.
Такой путь решения проблемы был единственно возможным, потому что заставить всех разработчиков браузеров (которые в то время не следовали единому стандарту) поддерживать новые возможности в CSS было просто нереально.
Надстройки над CSS называются препроцессорами, потому что они работают до того, как стили попадут в браузер. Браузеры понимают только чистый CSS, таким образом, все, что добавлено надстройками к нему, будет проигнорировано. К тому же препроцессоры могут использовать синтаксис, который в принципе не похож на CSS. Все это означает, что в самом простом варианте препроцессор запускается вручную перед тем, как веб-страница попадет в интернет. Он принимает на вход "свой" файл и возвращает CSS, который мы поключаем к нашей веб-странице и выкладываем ее в интернет.
Безусловно, это очень грубое описание процесса, оно ставит своей целью проиллюстрировать одно: препроцессор - это отдельная программа, которая должна запускаться отдельно и генерировать CSS. И только этот CSS может использоваться нами.
Препроцессоры использовать не обязательно
Более того, их совершенно необязательно понимать глубоко, сейчас достаточно просто представлять себе, что это такое, так как в будущем мы с ними столкнемся.
Препроцессоры в "чистом" в виде в современном вебе представляют собой пакеты для Node.js (оф. сайт). Они устанавливаются через npm (оф. сайт) и запускаются через консоль. В рамках этого курса мы не будем рассматривать ни Node.js, ни сопутствующие инструменты, эта информация приводится исключительно для общего понимания.
Наиболее популярные препроцессоры:
- SASS/SCSS - почти стандарт. SCSS очень похож на CSS с некоторыми дополнительными возможностями. Именно с этим препроцессором мы столкнемся в дальнейшем (но в нашем случае все будет работать автоматически без необходимости ручного запуска программы SCSS).
- Less.
- Stylus.
Современный CSS
То, что когда-то CSS не развивался, не значит, что он не развивается сейчас. Современный CSS крут, в нем наконец появились многие долгожданные возможности (например, удобный способ выравнивания элементов внутри контейнера).
Многие задачи теперь можно решать на "чистом" CSS без каких-либо дополнительных библиотек и это очень хорошо, ведь "чистый" CSS быстрее и лаконичнее.
Вот несколько крутых современных (и не таких современных) возможностей CSS, про которые вам стоит знать:
- Flexbox, то же на CSS Tricks.
- Grid, то же на CSS Tricks.
- CSS-анимации.
- Единицы измерения в CSS (Спойлер - оказывается, их очень много, а не только % и px).
- CSS-селекторы.
Существует отличный сайт CSS-Tricks, на котором приведена куча полезной информации и подробных наглядных объяснений. Также в изучении веб-технологий поможет Mozilla Developer Network.
Помимо этого вот ссылка на отличный материал по CSS-grid.
CSS-библиотеки
Конечно, все можно реализовать средствами чистого CSS, а уж если принимать во внимание препроцессоры и современные возможности самого CSS, получается просто сказка. Однако, как мы теперь знаем, так было далеко не всегда, поэтому в стремлении переиспользовать свой код в конце 2000-х люди начали создавать CSS-библиотеки: чисто интерфейсные с наборами красиво оформленных элементов, библиотеки для позиционирования, многофункциональные библиотеки, упрощающие и создание интерфейсов, и позиционирование.
На первый взгляд может показаться, что сегодня те старые CSS-библиотеки теряют свою актуальность, ведь у нас есть классный новый CSS. Это не так. Многие из этих библиотек до сих пор активно развиваются и учитывают новые возможности CSS. Действительно, некоторые их классы, к примеру, относящиеся к разделу позиционирования, в новых проектах можно заменить на современный CSS (однако для старых проектов, которые их уже используют, они все же крайне важны). При этом стили оформления элементов интерфейса совершенно не тяряют своей актуальности, ведь "красивые" стили оформления в CSS никто вводить не будет.
Таким образом, "старые" CSS-библиотеки никуда не уходят, а все еще развиваются и используются. И сейчас они могут оказаться полезными и сэкономить много времени в разработке, особенно если разработка ведется небольшой командой (или в одиночку).
Вот некоторые популярные библиотеки:
- Twitter Bootstrap - наверное, самая популярная библиотека, о которой слышали почти все веб-разработчики. Ее обязательно стоит если не изучить, то внимательно просмотреть, так как она оказала большое влияние на веб-разработку и многие ее идеи и соглашения используются в других библиотеках.
- Semantic UI - еще один мастодонт, аналог Bootstrap, но несколько более сложный в освоении.