Что означает «tab» в программировании?
Читаю книжечку «Code Conventions» и наткнулся на эту не до конца понятную для себя вещь:
Indentation.
Four spaces should be used as the unit of indentation. The exact construction of the indentation (spaces vs. tabs) is unspecified. Tabs must be set exactly every 8 spaces (not 4).
Переведите дословно, пожалуйста, что означает слово «TAB» или «TABS» в русском языке? Гугл переводит, как «вкладка», но не до конца понятно это.
2 ответа 2
Подразумевается клавиша «Tab» на клавиатуре.
Действительно, есть с этим путаница. У вас, во втором предложении «The exact construction of the indentation (spaces vs. tabs) is unspecified», под «tabs» подразумеваются символы табуляции. Но тут же в третьем предложении «Tabs must be set exactly every 8 spaces (not 4)», под «Tabs» имеются в виду отступы от левой границы.
Дело в том, в соглашениях об оформлении кода регламентируется количество пробелов которое должен содержать такой отступ. В программистских редакторах кода всегда есть соответствующая настройка. Дополнительно в соглашениях может оговариваться обязательно ли заменять символы табуляции, которые вводятся собственно клавишей TAB, на оговоренное количество пробелов. И получается, что одно нажатие клавиши TAB вводит один отступ, поэтому отступы и называют табами.
Все эти соглашения нужны для того, чтобы все участники команды видели бы текст программы одинаково так же, как его отформатировал автор. А иначе, если настройки не будут согласованы, то форматирование «уедет».
Пора завязывать использовать пробелы вместо табуляции в коде
Этот топик — ответ на топик «Пора завязывать использовать символы табуляции в коде».
Я хотел было ответить к комментариях, но в силу объема и желания независимости от исходного топика решил создать новый топик.
Итак, под катом — почему табы лучше пробелов, самые значительные заблуждения касательно табов и как ими правильно пользоваться.
Начнём с того, что большинство людей (по крайней мере на Хабре) предпочитают табы.
По ссылке есть очень классный комментарий от GreyCat:
На самом деле странно то, что многие до сих пор не отличают indentation и alignment. Ну, вот это — indentation:
А вот это — alignment:
Первое можно делать и табами, и пробелами, но когда делаешь табами — каждый может подстроить ширину indent’а на свой вкус и ничего никуда не едет. А второе — строго пробелами.
В IDE есть опция Smart Tabs для этого:
Если правильно использовать табы (а именно — только для indentation) — можно без проблем менять размер табов не нарушая стиль программирования.
2 пробела на таб:
5 пробелов на таб:
9 пробелов на таб:
Так каких проблем мы лишаемся?
1. Каждый программист может настроить длину табуляции под свой вкус. Всегда работает на практике. Когда код с большой вложенностью — можно поставить ширину табуляции в два пробела, иначе — в четыре.
2. Легче работать с посторонними библиотеками. Какие-то библиотеки поддерживают стиль с шириной таба в два пробела, какие-то с шириной в четыре пробела. Только использование табов не накладывает ограничение на стиль.
Процитирую пару мыслей из предыдущего топика:
Тяжело работать с проектами, где используются библиотеки, содержащие в тесте табуляции. Предположим, в одной библиотеке табуляция равна 3 символам, в другой 4 символам. А вы в проекте используете 2 символа. В результате какая-то часть кода у вас будет отображаться в редакторе со сбитым форматированием.
На самом деле в проектах, которые используют табуляцию таких проблем нету — так как табуляция безразмерна, а вот поддерживать одновременно пару библиотек с разным размером пробело-табуляции становится проблематичным, т.к. уже нельзя пользоваться tab (чтобы IDE заменяла табы на пробелы). Конечно, есть шанс решить такую проблему разными проектами с разными настройками, но это тот еще костыль, да и башку все-равно сносит от разных размеров вложенности.
Легко пустить козла в огород. Скажем у вас табуляция равна 4 пробелам. Кто-то что-то чуть-чуть поправил, используя другой размер табуляции или явно вставив пробелы. У него все смотрелось нормально, а у вас строчка кода куда-то уедет.
Аналогично, табуляция — безразмерная. Такая проблема есть только в проектах, которые используют пробелы. Там где используются табы — они могут быть хоть 2, хоть 10 символов шириной.
Надо постоянно настраивать различные редакторы под нужный вам размер табуляции. Даже если вам нужно просто посмотреть код не правя. Иначе все разъезжается. Особенно это не удобно, когда приходится что-то делать со своим кодом на сторонней машине.
Допустим, я открываю Kate, чтобы по-быстряку поправить код в каком-то файле. Оппа, размер табуляции два пробела. Надо лезть в конфиг. А в соседнем файле из другой либы — четыре пробела. Придётся пользоваться пробелом вместо таба для отступов, ужас. С табами такой проблемы нету.
Лишние сложности тем, кто работает одновременно с проектами, где по стандартам кодирования требуются разные отступы. Если стандарты требуют использование табуляции, то это ещё тот вечно ноющий зуб. В случае пробелов опять-таки все намного проще.
Как выше разобрали, такая проблема есть именно с проблемами, а не с табами.
А еще дополнительно у пробелов есть такие недостатки, как невозможность быстрого перемещения стрелочками клавиатуры (щёлкает каждый пробел, а не через блок), возможность допустить ошибку (поставить в одном месте 3 пробела вместо 4, чем порушить дальнейшую структуру), увеличение размера файла и куча всего ещё.
Вывод
У пробелов нету ни одного существенного преимущество по сравнению с табами, при этом мы не сковываем программиста в рамки и не заставляем его мучаться с слишком маленькими (или слишком большими) для него табами.
Главное
Не так важно, что именно вы используете. Важно, чтобы вы следили за порядком своего кода и всегда придерживались одного и того же стиля. Включите отображение табов/пробелов, иногда меняйте размер табуляции на другой и пробегайте глазами код, чтобы удостоверится, что у вас где-то не вставились пробелы вместо табов или табы вместо пробелов.
Табы или пробелы? Анализ 400 тысяч репозиториев GitHub, миллиарда файлов, 14 ТБ кода
Для пытливых разработчиков до сих пор остается актуальным вопрос использования табуляции и пробелов для форматирования кода. Могут ли они быть взаимозаменяемы: например, 2 пробела на табуляцию или 4? Но единого стандарта нет, поэтому иногда между разработчиками возникает непонимание. Кроме того, различные IDE и их компиляторы обрабатывают табуляцию также по-своему.
Решением вопроса обычно становится соглашение о правилах форматирования в рамках проекта или языка программирования в целом.
Команда разработчиков из Google исследовала проекты в репозитории Github. Они проанализировали код, написанный на 14 языках программирования. Целью исследования было выявить соотношение табуляций и пробелов — то есть, наиболее популярный способ форматирования текста для каждого из языков.
Реализация
Для анализа использовалась уже существующая таблица [bigquery-public-data:github_repos.sample_files], в которую записаны наименования репозиториев Github.
Напомним, что около двух месяцев назад весь открытый код Github стал доступен в форме таблиц BigQuery.
Однако для анализа были выбраны не все репозитории, а только верхние 400 тысяч репозиториев с наибольшим числом звёзд, которые они получили за период с января по май 2016 года.
Запрос выполнялся довольно долго. И это неудивительно, так как было необходимо выполнить операцию объединения (join) таблицы из 190 миллионов строк с таблицей в 70 миллионов строк. Всего было обработано 1,6 ТБ данных. Результаты запроса доступны по этому адресу.
В таблице [contents] записаны файлы без своих дубликатов. Ниже указано общее количество уникальных файлов и их суммарный размер. Дубликаты файлов не учитывались в ходе анализа.
После этого оставалось только сформировать и запустить на выполнение финальный запрос.
Анализ каждой из строк 133 Гб кода занял 16 секунд. Добиться такой скорости помог все тот же BigQuery.
Чаще всего табуляция встречается в языке С, а пробелы — в Java.
Хотя для кого-то соотношение тех или иных управляющих символов не имеет значения, а споры на эту тему кажутся надуманными. Это не имеет значения и для некоторых IDE, которые сохраняют табуляцию как некоторое количество пробелов. Также существуют IDE, в которых это количество можно настраивать вручную.
Некоторое время назад эта проблема была обыграна в сериале «Кремниевая долина». Парень и девушка не сошлись в вопросе форматирования. В результате старый холивар не только привел к недопониманию в профессиональном плане, но и создал проблемы в их личных отношениях.
PSR-2, анализ одного пункта стандарта. Пробелы или табы
Что говорит стандарт
1. Overview
Code MUST use 4 spaces for indenting, not tabs.
2.4. Indenting
Code MUST use an indent of 4 spaces, and MUST NOT use tabs for indenting.
N.b.: Using only spaces, and not mixing spaces with tabs, helps to avoid problems with diffs, patches, history, and annotations. The use of spaces also makes it easy to insert fine-grained sub-indentation for inter-line alignment.
«Nb: Использование только пробелы, а не смешивая пространства с вкладками, помогает избежать проблем с файлов изменений, исправлений, истории и аннотации. Использование пространств также делает его легко вставить мелкозернистый суб-отступ для выравнивания между линией.»
С под-отступом понятно, довольно интересная фишка, но я как то никогда ею не пользовался, используется например так:
Но такое как раз и заложено в теории SmartTabs, когда табы используются для отступов от начала строки, а пробелы как раз для таких вот хитрых маневров (и при изменении размера таба основной код будет меняться а код с пробелами всегда останется читаемым независимо от размера таба).
А вот пробелы, как написано в стандарте, используются для того, чтобы не было проблем при работе с системами контроля версий. Вот с этим я и хочу разобраться и проверить так ли это.
Ставим эксперимент №1
1. Создадим два файла, в одном будет код с пробелами в другом, точно такое же код, но уже с табами.
2. Сделаем копии этих файлов и внесем в них изменения.
3. Теперь посмотрим с помощью программы WinMerge
4. Отправим эти файлы в GIT
5. Посмотрим с помощью программы SourceTree
6. Посмотрим на сайте Bitbucket
7. Как видим с обычным, не повторяющимся кодом, никаких проблем нет, неважно используются пробелы или табы.
Ставим эксперимент №2
1. А теперь поставим эксперимент, баги которого я сам неоднократно замечал используя табы. Очень интересно посмотреть, вдруг и правда пробелы решают эту проблему.
2. Создадим два файла, у которого после изменений будут повторяющиеся куски кода. И также сделаем копии этих файлов и внесем в них изменения.
3. Теперь посмотрим с помощью программы WinMerge
4. Отправим эти файлы в GIT
5. Посмотрим с помощью программы SourceTree
6. Посмотрим на сайте Bitbucket
7. Внезапно, что с табами что с пробелами проблема видна невооруженным глазом и ни одна из программ не смогла правильно понять где произошли изменения. Тогда к чему в стандарте написано, что пробелы позволяют решить проблему: helps to avoid problems with diffs, patches, history, and annotations.
В качестве заключения
Так может быть стоит плюнуть на этот пункт стандарта и использовать SmartTabs, ведь преимущества использования табов в начале строки неоспоримы. Табы можно настроить как нравится, хочешь как два пробела, хочешь как 4, а хочешь как 8 или даже 3. При этом если все используется правильно, то код никогда и никуда не уедет.
UPDATE1
Прочитав комментарии я полностью изменил свое мнение по поводу пробелов, проведя данное исследование хотелось разобраться в плюсах 4 пробелов перед табами, тем более тогда мне казалось, что у табов плюсов гораздо больше. Но теперь табы уже не кажутся такими хорошими как раньше. Да, нужно делать как в стандарте, тем более, что так делает большинство, зачем плыть против течения. Но у пробелов тоже есть свои минусы. В общем когда делали стандарт выбрали наименьшее зло из двух возможных (ИМХО).
Но эти холивары похоже будут длится еще довольно долго.
Табы (вкладки) для сайта на CSS и JavaScript – 3 способа
В этой статье рассмотрим примеры вкладок для сайта, выполненных как с использованием только CSS, так и с применением JavaScript.
Что такое табы
На странице очень часто бывает необходимо вывести большое количество информации.
Для того чтобы эту информацию не отображать всю сразу, её можно разделить на части и выводить пользователю в определённый момент времени только одну из них.
Табы (вкладки) – это как раз и есть тот элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько определённых частей.
В вебе табы – это просто набор ссылок или других HTML элементов, которые визуально можно представить по-разному: в виде вкладок, группы кнопок и другими способами. По сути, они просто включают видимость какого-то одного блока с контентом, скрывая при этом другие.
Табы предназначены для экономии места и более удобного представления информации на сайте (по названию вкладки можно определить какой контент отобразится на странице, если нажать на неё).
Вкладки на чистом CSS
Рассмотрим несколько способов создания табов на CSS.
Первый способ построен на радиокнопках ( input с type=»radio» ) и CSS селекторе checked.
HTML и CSS код таба:
Отображение и скрытие контента, связанного с вкладками, выполняется очень просто. По умолчанию элементы, содержащие контент, не отображаются. Показ того или иного элемента с контентом осуществляется только в том случае, если селектор в следующем правиле позволяет выбрать его:
CSS код для создания адаптивных вкладок в виде кнопок:
В этом примере вкладки визуально представлены в виде хэштегов :
Второй способ основывается на использовании псевдокласса :target.
Пример HTML и CSS кода для создания адаптивных вкладок, механизм работы которых организован через :target :
Логика этих табов основана на следующих моментах. Первый момент заключается в добавлении хэша к URL-адресу страницы при нажатии на ссылку (вкладку). Второй – это стилизация элементов, выбор которых осуществляется в зависимости от хэша в URL-адресе. Выбрать элемент, идентификатор которого соответствует хэшу в URL-адресе в CSS можно выполнить посредством псевдокласса :target. С помощью него мы можем написать селектор не только для получения элемента, на который он указывает, но и для выбора других элементов, которые каким-то определённым образом связаны с ним.
Например, выбрать вкладку, которая должна быть активной для элемента на который указывает :target можно так:
В зависимости от дизайна проекта табы можно визуально представить так, как вам это нужно.
Например, чтобы сделать вкладки вертикальными их код можно изменить на следующий:
При этом табы отображаются вертикально только на больших экранах, а на маленьких (мобильных) они отображаются горизонтально. Адаптивность табов в коде реализуется с помощью медиа-запросов.
Табы с использованием JavaScript
В этом разделе разберём как можно создать табы на чистом JavaScript (без использования библиотеки jQuery).
Способ реализации вкладок с использованием JavaScript может потребоваться, когда в них нужно, например показывать динамический контент, получаемый через AJAX.
HTML и CSS код вкладок:
При этом инициализирован будет только первый контейнер с вкладками, имеющий указанный класс.
Для того чтобы на странице инициализировать сразу все вкладки, имеющие этот класс, можно, например, использовать следующий код:
Примеры
1. Пример, в котором данные о последней открытой вкладки таба будем сохранять в LocalStorage, а затем использовать эту информацию при открытии страницы для переключения на неё:
2. Пример синхронизации вкладок на разных открытых страницах, относящихся к одному источнику (через LocalStorage):
3. Пример, в котором показано как на одной странице можно вывести несколько табов с сохранением их состояний (активных вкладок) в LocalSorage:
4. Табы, содержащие видео с YouTube. При переходе на другую вкладку будет приостанавливаться воспроизведение текущего видеофайла.
Загрузку API IFrame Player будем выполнять асинхронно. Для этого напишем следующий код:
Создание и проигрывателя YouTube будем выполнять после загрузки кода API посредством функции onYouTubeIframeAPIReady :