Front-end шпаргалка единицы измерения


Содержание

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

Семантика

В 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

В понятии FrontEnd заключается верстка и создание визуальных эффектов, видимых пользователям. Это направление веб разработки, постоянно изменяющееся, и очень интересное.

Позвольте представиться, меня зовут Марина. Более 10 лет я занимаюсь обслуживанием сайтов и развитием интернет проектов. Если вы хотите избавиться от хлопот связанных с созданием и поддержкой сайта, тогда вы попали по адресу. При работе с сайтами я предоставляю качественные услуги, ориентируясь на ваши индивидуальные потребности. Для связи со мной воспользуйтесь формой обратной связи .

Front-end шпаргалка: единицы измерения

1. Абсолютные единицы длины

• px
Пиксель является основной единицей измерения.

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

Есть также другие единицы измерения, такие как дюймы (in), сантиметры (cm), миллиметр (mm), пика (pc), но все они высчитываются относительно пикселя, поэтому нет смысла их использовать.

2. Относительные единицы длины

• em
Размер шрифта текущего элемента. Если для данного элемента размер шрифта не задан, тогда используется значение, унаследованное от родительского элемента, или значение браузера по умолчанию.

• rem
Размер шрифта корневого элемента (html)

• vw
1/100 доля ширины экрана (зависит от ширины видимой области сайта, исключая все интерфейсы системы, браузер, полоски скролла)

• vh
1/100 доля высоты экрана (зависит от ширины видимой области сайта, исключая все интерфейсы системы, браузер, полоски скролла)

3. Время
Время в CSS измеряется в секундах (s) и миллисекундах (ms=1/1000 s)

Frontender Magazine

На днях я подготовила README для одного проекта, который, надеюсь, будет интересен и поучителен для других разработчиков. Так вот, когда я его писала, я поняла, что несколько лет назад испугалась бы до смерти, если бы наткнулась на нечто подобное, со всякими упоминаниями о Node и его пакетном менеджере, системах Homebrew и Git, всевозможных тестах, тестовых и финальных сборках.

Когда-то основная часть рабочего процесса фронтенд-разработчика состояла в редактировании файлов, их локальном тестировании (в меру возможностей) и пересылке на сервер через FTP. Мы измеряли свою крутость умением подчинить своей воле IE6 или добиться пиксельного соответствия в различных браузерах. Многим членам нашего сообщества — и мне тоже — не хватало опыта традиционного программирования. HTML, CSS и JavaScript — обычно в виде jQuery — осваивались самостоятельно.

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

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

Вот некоторые вещи, с которыми хотелось бы, чтобы все были знакомы и некоторые источники, которые можно использовать, чтобы подтянуть свои навыки. (Спасибо Полу Айришу (Paul Irish), Майку Тейлору (Mike Taylor), Ангусу Кролу (Angus Croll) и Владу Филипову (Vlad Filippov) за их вклад.)

JavaScript

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

Это значит, что вы прочитали «JavaScript: Сильные стороны», желательно больше одного раза. Что вы понимаете принцип работы структур данных вроде объектов и массивов; функции, в том числе как и почему их нужно вызывать и применять; умеете работать с наследованием через прототипы; и можете справиться с асинхронностью.

Если ваши навыки работы с простым JavaScript оставляют желать лучшего, вот некоторые ресурсы, которые вас выручат:

  • «Красноречивый JavaScript»: Замечательная книга (также доступна печатная версия), посвящённая основам JavaScript
  • Тестовая оценка владения JS: подборка тестов с ошибками на различные темы по JavaScript; сможете ли вы переписать код тестов так, чтобы он заработал?
  • 10 вещей, которым я научился из исходного кода jQuery — старенькая, но мощная вещь от Пола Айриша, демонстрирующая чему можно научиться, читая чужой код.

Система управления версиями файлов Git (и профиль на GitHub)

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

Хотите повысить свои навыки работы с Git?

Модульный принцип организации, управление зависимостями и тестовые сборки

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

Скептически настроены относительно разработки на основе модулей? Это не причина ничего не делать. По крайней мере, вам должны быть знакомы инструменты вроде UglifyJS или Closure Compiler, которые грамотно сжимают ваш код, а затем конкатенируют эти сжатые файлы перед выдачей результата.

Если вы пишете на чистом CSS — то есть не используете препроцессор вроде Sass или Stylus – RequireJS также поможет организовать ваши CSS файлы по модульному принципу. Используйте операторы @import в основном файле, чтобы загрузить зависимости для разработки и затем запустите средство оптимизации RequireJS для основного файла чтобы создать готовый для использования файл.

Инструменты разработчика, встроенные в браузер

За последние несколько лет инструменты для разработчиков, встроенные в браузеры, ощутимо усовершенствовались и теперь они могут существенно улучшить ваш опыт разработки, если вы научитесь ими правильно пользоваться. (Подсказка: если вы все еще отлаживаете код, используя alert , вы зря убиваете время.)

Вам наверняка стоит выбрать один браузер, чьи инструменты разработчика вы будете использовать на постоянной основе — на данный момент я склоняюсь к инструментам разработчика в Google Chrome — но не отказывайтесь полностью от инструментов в других браузерах, так как в них время от времени на основе откликов разработчиков добавляются новые полезные возможности. В Dragonfly от Opera, в частности, были добавлены некоторые возможности, выделяющие её инструменты разработчика на фоне других, например: (экспериментальный) CSS- профилировщик, настраиваемые горячие клавиши, удалённая отладка без необходимости USB-подключения, а также возможность сохранять и использовать пользовательские цветовые палитры.

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

Командная строка

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

  • ssh для подключения к другой машине или серверу
  • scp для копирования файлов на другую машину или сервер
  • ack или grep для поиска файлов в проекте по строке или шаблону
  • find для обнаружения файлов, чьи названия совпадают с данным шаблоном
  • git для выполнения хотя бы базовых действий вроде add , commit , status и pull
  • brew для использования Homebrew для установки пакетов
  • npm для установки пакетов Node
  • gem для установки пакетов Ruby

Если какими-то командами вы пользуетесь особенно часто, отредактируйте свой .bashrc , .profile или .zshrc (или что у вас там) и создайте для них альтернативные имена чтобы не набирать команды руками каждый раз. Также можно добавить альтернативные имена в файл

/.gitconfig . Файлы с точками от Джанни Чиаппетта (Gianni Chiappetta) могут послужить отличным источником вдохновения.

Примечание: Если вы пользуетесь Windows, я не знаю, как вам помочь, разве что могу посоветовать Cygwin. Возможно, я не права, но принимать участие в жизни сообщества фронтенд-разработчиков с открытым кодом на машине с Windows существенно сложнее. Если посмотреть на вещи оптимистически, ноутбуки MacBook Air не очень дорогие, мощные и на удивление портативные, кроме того существуют Ubuntu или Unix.

Шаблонизация на стороне клиента

Не так давно для серверов было обычным делом отвечать на запрос XHR фрагментом HTML-кода, однако за последние 12-18 месяцев сообщество фронтенд разработчиков прозрело и начало требовать данных от сервера в чистом виде. Преобразование таких данных в HTML, который затем можно добавить в дерево документа, может оказаться трудоёмким и неудобным процессом, если иметь дело непосредственно с кодом. Вот когда в дело вступают библиотеки шаблонизации на стороне клиента: они позволяют использовать шаблоны, которые после добавления данных превращаются в строку HTML. Вам нужна помощь в подборе инструмента для шаблонизации? Схема для выбора шаблона от Герен Минс (Garann Means) поможет вам найти подходящий.

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

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

Тестирование

Одна из радостей написания модульного, свободно сопряжённого кода состоит в том, что такой код намного легче тестировать, а с инструментами вроде Grunt, подготовка проекта со встроенными тестами вообще стала проще простого. В Grunt интегрирован QUnit, однако существует много фреймворков для тестирования, из которых вы можете выбрать те, что вам по душе — моими любимыми на данный момент являются Jasmine и Mocha — в зависимости от стиля, который вы предпочитаете, и остальных составляющих вашей подборки.

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

  • Короткий скринкаст, записанный мной о тестировании jQuery-кода с помощью Jasmine.
  • Пример модульного тестирования на плагине jQuery BBQ.

Автоматизация процессов (rake/make/grunt/и т.д.)

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

Уже довольно давно нам в этом помогают инструменты вроде make , кроме него существуют также rake , grunt и другие. Если вы хотите автоматизировать выполнение заданий связанных с файловыми системами, исключительно полезно будет изучить язык, отличный от JavaScript, так как асинхронная природа Node может стать неподъемным грузом, если вы умеете только управлять файлами. Существует также множество других инструментов автоматизации, созданных под конкретные задачи: инструменты для развёртывания, генерирования сборки, проверки качества кода, и др.

Качество кода

Если вам когда-либо приходилось ощущать негативные последствия от пропущенной точки с запятой или лишней запятой, вы знаете сколько времени можно потерять из-за мелких ошибок в коде. Поэтому вы пропускаете свой код через инструмент вроде JSHint, верно? Он поддаётся настройке и может быть интегрирован в ваш редактор или процесс сборки несколькими способами.

Хорошее руководство

К сожалению, руководства по фронтенд-разработке не существует, однако ресурс MDN вполне подходит на эту роль. Хорошие фронтенд разработчики знают, что в каждый поисковый запрос нужно добавлять префикс mdn — например, mdn массивы javascript — чтобы избежать коммерческой чумы, которой является ресурс w3schools.

Конец

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

Статья переведена благодаря спонсорской поддержке компании «Одноклассники».

Функция Calc() и примеры ее применения в CSS

Дата публикации: 2020-01-19

От автора: я уверен, что каждый фронтенд-разработчик знаком с функцией calc() или, по крайней мере, хоть раз о ней слышал. Функция CSS Calc является не самым новым, но все же уникальным инструментом. Сначала я понятия не имел, как она работает и для чего нужна. Конечно же, я узнал это и изучил основные принципы ее использования, но конкретное ее применение я осваивал в ходе работы.

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

В чем заключается задача функции calc()?

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

Благодаря calc() вы можете проводить расчеты, основываясь на окне просмотра или родительском элементе. Можно проводить сложение, вычитание, деление и умножение значений. В эпоху препроцессоров такими операциями никого не удивишь. Что действительно впечатляет, благодаря calc(), браузер может проводить такие операции даже с разными единицами измерения, то есть вы можете комбинировать относительные значения (em, %, vw) и фиксированные, например, px.

Практический курс по верстке адаптивного сайта с нуля!


Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Использование calc()

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

Фиксированный макет со значением Relative

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

Это может пригодиться, когда вы делаете шаблон панели администрирования и вам нужна сложная, всегда видимая боковая панель фиксированной ширины. Для этого нужно создать панель с шириной 260px и задать значения ширины остальных частей макета, как calc(100% – 260px). Также можно использовать этот метод для фиксированного заголовка, в этом случае используем calc(100vh – 80px) для высоты области контента и 80px для заголовка.

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

Упрощенное абсолютного выравнивания по центру

Все мы знаем, что стандартное абсолютное выравнивание – это когда мы задаем значение 50% для верхнего и левого полей и смещаем элемент на половину ширины и высоты. Это устаревший метод, так сейчас активно используются Flexbox и CSS Grid, но его все же можно использовать, с calc() это даже намного проще сделать.

Относительный размер шрифта, основанный на ширине области просмотра

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Просто попробуйте сделать базовую операцию calc() с комбинированной единицей vw и все получится.

Создаем простую сетку

В этом примере мы создаем гибкую сетку из 12 столбцов. Как я упоминал ранее, из-за Flexbox и CSS Grid эта техника немного устарело, но все же она иногда используется. Ключевым моментом являются простые расчеты с номерами столбцов:

Позиционирование фонового изображения по нижней границе

С помощью calc(), вы можете следующим образом вычислить нижнюю границу фона элемента с относительной шириной:

Back-end Шпаргалка Битрикс

Шпаргалка PHP

Валидация email стандартными средствами PHP

Форматирование цены

Вызов статичиского метода класса с получением имени метода из переменной

Экономим место при хранении массивов для чтения

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

Back-end Шпаргалка Битрикс

Подключение скриптов и стилей вне шаблона

Подключение скриптов и стилей в шаблоне

Подключение файлов

Компонент “включаемая область”

Стандартная проверка в подключаемых файлах

Переменные в шаблоне компонента (стандартное начало template.php)

Данные текущей страницы

Примеры применения констант

Вывод заголовка окна браузера

Вывод подключенных скриптов и стилей в head

Вывод панели администрирования в пользовательской части

Определение принадлежности к странице или разделу

Изменение размеров изображения

Получение объектов приложения, контекста и запроса

Подключение модулей

Композит

Голосование компонента “ЗА” композит

Выделение части кода для догрузки композитом

В шаблоне

В других частях сайта

Способ 1 — красивый

Способ 2 — статичный, для помещения в него компонентов и отложенных функций

Формирование ссылки для логина

Редирект

Проверка наличия группы у пользователя

AJAX в отдельном файле

Очистка буфера вывода

Если уровней вложенности буферов много, то может не сработать

Гарантированная очистка всех уровней вложенности буферов вывода

AJAX в странице или компоненте

Генерация пароля

Создание своей отложенной функции

Буферизация и вывод разметки в нужном месте

Помещение контента в буфер, для последующего его вывода:

Вывод буферизированной области в нужном месте ShowViewContent:

Передача данных формы

Стандартная проверка соответствия сессии

В разметке формы

В коде валидации формы проверяем

Добавление данных в кэш при кастомизации стандартных компонентов

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

Перенос скриптов в нижнюю часть страницы

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

Настройки -> Настройки продукта -> Настройки модулей -> Главный модуль -> Переместить весь Javascript в конец страницы

Если активировать эту настройку, то Битрикс сформирует страницу, вырежет ВСЕ вхождения тега script и вставит их в нижнюю часть страницы. Такой подход устраивает не всегда, яркий пример — подключение google tag manager и прочих скриптов, которые должны быть в верхней части страницы.

Что бы настройка битрикса не меняла положение скрипта в коде нужно добавить атрибут data-skip-moving :

Front-end шпаргалка: единицы измерения

скидка 20% первым 20 студентам

  • Как работают сайты. Backend и frontend. Вёрстка.
  • Как выглядит и из чего состоит код веб-страницы.
  • Установка редактора кода Sublime Text.
  • Простая веб-страница на HTML. Тэги и атрибуты.

  • CSS-стили. Селекторы, параметры и значения.
  • Структура HTML5-документа.
  • Обзор и демонстрация работы основных HTML-тэгов.
  • Вёрстка веб-форм. Поля и кнопки. Валидация форм.
  • Таблицы и табличная вёрстка.
  • Семантическая вёрстка. Стандарты и валидность.
  • Как можно задавать стили. Селекторы.
  • Отступы, поля, размеры и единицы измерения.
  • Inline- и block-элементы, свойство display.
  • Обтекание, позиционирование и слои.
  • Блочная вёрстка.
  • Цвета, шрифты, фон и границы.
  • Что такое JavaScript и как его подключать к веб-странице.
  • Библиотека jQuery. Управление стилями элементов.
  • Обработка событий.
  • Работа с DOM, изменение, добавление и удаление элементов.
  • Отображение и скрытие элементов, анимация.
  • Работа с сетью, получение и отправка данных.
  • JavaScript-фреймворки.
  • Ширина экрана и “резиновость” сайта.
  • Media-запросы.
  • Flexbox.
  • Шаги адаптивности и сетки.
  • Разнообразие браузеров и их особенности.
  • Инструменты проверки и обеспечения адаптивности и кроссбраузерности.
  • Фон, прозрачность и градиенты.
  • Границы, аутлайны и тени.
  • Шрифты и оформление текста. Типографика и спецсимволы.
  • Стили указателей.
  • Изображения. Форматы, сжатие, cпрайты, iconfonts. Favicon.
  • Рисование на веб-странице. SVG и Canvas.
  • Сложные селекторы. Свойство !important
  • Псевдо-классы и псевдо-элементы.
  • Трансформации, переходы и анимации.
  • Стандарты именования в CSS. Методология БЭМ.
  • Библиотеки стилей: Bootstrap, Semantic UI, Material UI.
  • Шаблонизаторы (Twig, Haml) и препроцессоры (SASS, LESS, Stylus).
  • Размещение своих работ в Интернете. Домен и хостинг.
  • Инструменты командной разработки. Таск-трекеры и Git.
  • Сборщики, минификаторы и оптимизаторы проектов.
  • Инструменты прототипирования.
  • Другие среды разработки. NetBeans, WebStorm.
  • Дипломная работа.
  • Что умеет JavaScript и почему он так популярен?
  • Инструменты разработчика
  • Hello, world!
  • Синтаксис языка
  • Числа
  • Строки
  • Логические (булевые) значения
  • NaN (Not a Number)
  • Infinity
  • Математические операторы
  • Переменные
  • Преобразование типов
  • Условия
  • Циклы
  • Объявление и вызов функций
  • Аргументы

  • Локальные и глобальные переменные
  • Hoisting
  • Возвращаемые значения
  • Рекурсия
  • Понятие объектов
  • Объекты в JavaScript
  • Перебор свойств объекта
  • Массивы
  • Стандартный объект Math
  • Стандартный объект String
  • Стандартный объект Array
  • Стандартный объект Date
  • Глобальный объект window
  • Сборщик мусора
  • Замыкания
  • IIFE
  • Функции-конструкторы
  • Контекст вызова
  • Привязка контекста (call, apply и bind)
  • ООП. Наследование, инкапсуляция, полиморфизм
  • Функциональное наследование
  • Прототипное наследование
  • Прототипы стандартных объектов
  • Объект arguments
  • setTimeout и setInterval
  • Выполнение кода через eval
  • Обработка исключений (throw, catch)
  • Регулярные выражения
  • Строгий режим (strict mode)
  • DOM
  • Порядок выполнения скриптов
  • Селекторы
  • Свойства и методы элементов
  • События и обработчики
  • Погружение и всплытие событий
  • Console
  • Window
  • Селекторы
  • Document
  • Информация о браузере и истории переходов
  • LocalStorage и SessionStorage
  • ContentEditable
  • Разнообразие Web API
  • Клиент-серверное взаимодействие
  • Запуск локального сервера
  • AJAX и callback
  • JSON и Promise
  • API и WebSocker
  • Библиотека jQuery. Интро
  • Библиотеки и frameworks. Интро
  • Возможности jQuery
  • Анимация
  • AJAX
  • Плагины
  • История стандарта ECMAScript. Интро
  • Транспиляция и полифиллы
  • Let и const
  • Деструктуризация
  • Rest и spread
  • Template strings
  • Стрелочные функции и параметры по умолчанию
  • Классы и наследование
  • Что такое сборка проектов и для чего она нужна?
  • Node.js
  • npm
  • Gulp
  • Webpack
  • DOM и императивный подход. Интро
  • React и декларативный подход
  • Подготовка рабочего пространства
  • Простое React-приложение
  • Разделение на компоненты
  • Ключевые принципы Redux
  • Установка зависимостей и разделение на компоненты
  • Создание store и reducers
  • Создание actions
  • Запуск приложения
  • Библиотеки и фреймворки 2020
  • Развитие стандарта ECMAScript
  • Тестирование кода

скидка 20% первым 20 студентам

  • Функциональную систему обучения
  • Быстрый старт и практику кодинга
  • Пожизненный доступ к модулям
  • Систему мотивации
  • Портфолио из работоспособных проектов
  • Возможность уйти в академ отпуск
  • Собственный график
  • Персонального менеджера
  • Преподавателей-практиков
  • Качественный видео-контент
  • Структурированный учебный материал
  • Индивидуальная консультация
  • Диплом

ожидаемая зарплата от

  • Адаптивная и кроссбраузерная верстка
  • Основы работы с Photoshop
  • Знание Node.js
  • Работа с Web API
  • Работа с протоколами HTTP/HTTPS
  • Методология БЭМ

скидка 20% первым 20 студентам

Даниил Пилипенко

Директор центра SymbioWay

10 лет Java-разработки, являлся ведущим разработчиком «Ютинета»

Егор Яковишен

Senior Frontend Developer в Setka.io

Участвовал в разработке более 200 проектов, клиенты: PepsiCo, Tetra Pack и т.д.

Доступ в систему

Просматриваете обучающий видео-модуль в удобное для вас время.

Домашние задания

Получаете необходимые материалы для выполнения домашнего задания.

Комментарии

Куратор проверяет задание, дает обратную связь, разбирает сложные ситуации

Следующий модуль

После одобрения куратором задания вы переходите к следующему блоку

скидка 20% первым 20 студентам

Вёрстка landing-page

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

Пользовательский интерфейс
по аналогу с Instagram

Проект не только захватит весь объем полученных знаний за курс, но и в будущем продемонстрирует ваш профессиональный потенциал на практике, а не на словах

6 месяцев практики

В сторону занудные лекции, на курсе мы кодим, кодим и еще раз кодим

Новая профессия

Престижная, востребованная и высокооплачиваемая

Верная методика работы

Учим делать хорошо — вырабатываем подход к написанию чистого кода и структуризации проектов

Портфолио

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

Доступ к материалам курса

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

Домашние задания

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

От нуля до героя фронтенда (Часть 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: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Полное руководство по CSS Grid

CSS Grid Layout — самая мощная система компоновки из доступных на данный момент в CSS. Это двумерная система, которая может обрабатывать как колонки так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила и родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).

Введение

CSS Grid Layout (aka «Grid») — это двумерная система компоновки основанная на сетке, цель которой заключается в том чтобы полностью изменить способ проектирования пользовательских интерфейсов основанных на сетке. CSS всегда использовался для разметки веб-страниц, но никогда не делал эту работу хорошо. Сначала мы использовали таблицы, потом обтекания (floats), позиционирование и инлайновые блоки (inline-block), но все эти методы по существу являются просто хаками и опускают много важных функциональных возможностей (например, вертикальное выравнивание). Flexbox помог, но он предназначен для более простых одномерных макетов, а не для сложных двумерных (на самом деле Flexbox и Grid очень хорошо работают вместе). CSS Grid’ы — это первый модуль созданный специально для решения проблем компоновки, которые до сих пор мы решали с помощью хаков при создании сайтов. Есть две основные вещи, которые вдохновили меня на создание этого руководства. Первое, это замечательная книга от Rachel Andrew’s Get Ready for CSS Grid Layout. Это подробное и понятное введение в CSS Grid’ы, которое является основой для всей этой статьи. Я настоятельно рекомендую купить и прочитать его. Вторая вещь, которая меня вдохновила — это A Complete Guide to Flexbox (Полное руководство по Flexbox) от Chris Coyier’s, которая стала моим основным ресурсом по Flexbox. Она помогла большому количеству людей, о этом свидетельствует тот факт, что это лучший результат в поисковой выдаче при запросе»Flexbox» в Google. Вы увидите много похожего между этой статьей и моей, потому что почему бы не украсть у лучших?

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

Основы и поддержка браузерами

Для того чтобы начать работу, нам нужно определить элемент-контейнер с помощью display: grid, настроить размеры колонок и строк с помощью grid-template-columns и grid-template-rows, а также разместить его дочерние элементы внутри сетки с помощью grid-column и grid-row. Так же как и во Flexbox, порядок элементов в источнике сетки, не имеет значения (прим. переводчика: в HTML разметке). Ваш CSS может размещать их в любом порядке, что собственно упрощает перегруппировку сетки с помощью медиа запросов. Представьте, что вы определяете разметку всей страницы, а затем полностью переставляете её, чтобы разместить элементы под другую ширину экрана всего лишь с помощью нескольких CSS строк кода. CSS Grid — это один из самых мощных CSS модулей, представленных когда-либо. По состоянию на март 2020 года, многие браузеры уже поддерживают CSS Grid, без префиксов: Chrome (включая Android), Firefox, Safari (включая iOS), и Opera. Internet Explorer 10 и 11 поддерживают его но с реализацией более старого синтаксиса. Была анонсирована поддержка в Edge, но её пока нет.

Front-end development studio
Студия front-end проектирования

Иногда нужно перевести на свой язык единицы измерений Габариты / Вес в карточке товаров или заменить перевод на своё название. Важно: не нужно менять дефолтные обозначения на «правильные» – так вы нарушите мультиязычность Joomla. Сделайте это правильно!

Настройка единиц измерения габаритов, веса производится здесь:

Virtuemart => Конфигурация или Настройки => Настройки => закладка «Внешний вид» — «Основные параметры»

Допустимые единицы измерения / Applicable units: KG,100G,M,SM,CUBM,L,100ML,P

Это единицы измерений «из-коробки» Virtuemart. Если у вас в карточке товара они такие, английские, значит нужно добавить перевод на русский. Или заменить русские «из-коробки» на свои. И даже добавить новые.

В подсказке написано: Comma seperated list for applicable units of measure (Default is: KG,100G,M,SM,CUBM,L,100ML,P). The unit is attached to the language key COM_VIRTUEMART_UNIT_SYMBOL_. If you add for example TROYOUNCES to the list, you can add COM_VIRTUEMART_UNIT_SYMBOL_TROYOUNCES=»Troy Ounces» as a Joomla language override.

Список допустимых единиц измерения через запятую. Они привязаны к языковым константам вида COM_VIRTUEMART_UNIT_SYMBOL_xxx, где xxx — код единицы измерения.

Замена дефолтных единиц и названий на свои

Рассмотрим на примере замены ‘KG’ на ‘кг’. Так как KG есть в списке дефолтных единиц измерения, нам нужно только добавить свой перевод.

  1. Панель администрирования => Расширения => Менеджер языков => Переопределение констант
  2. Фильтр: Russian — Сайт
  3. Нажимаем «Создать»
  4. В поле «Языковая константа» пишем «COM_VIRTUEMART_UNIT_SYMBOL_KG»
    В поле «Текст» пишем «кг» (всё без кавычек)
  5. Жмём «Сохранить» и проверяем, что получилось.

Список дефолтных единиц измерения габариты / вес в Virtuemart

Аналогично можно переписать любые названия характеристик:

Если нужно изменить перевод в админке Virtuemart, перед созданием константы выберите Фильтр: Russian — Панель управления.

Где это может пригодиться

Плагин Экспорт Virtuemart в YML-файл может вывести в xml-прайс все данные товара «Габариты / Вес». Если вас не устраивает, как система перевела какие-то названия или единицы измерений – сделайте то, что написано выше, замените перевод на свой.

Цукерберг рекомендует:  C# - [C#]Указание на переменные без конкретного имени
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих