Соглашения по написанию кода для веб-разработки


Оглавление (нажмите, чтобы открыть):

Оформление кода PHP: стандарты и правила

Восемь общих правил

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

  1. Придумывайте понятные и читаемые названия. Избегайте русских слов в латинской транскрипции. Только английские слова, обозначающие суть.
  2. Делайте отступы на каждом уровне и отделяйте логические блоки пустой строкой.
  3. Сокращайте вложенность кода и убирайте дублирование.
  4. Контролируйте длину. Рекомендуем для функций не более 20 строк, для метода не более 50 строк, для класса не более 300 строк, для файла — не более 1000 строк. Также ограничивайте длину одной строки до видимого значения на экране. Мягкое ограничение составляет 120 символов.
  5. Комментируйте и документируйте код. Это позволит зафиксировать всю необходимую информацию.
  6. Используйте рефакторинг. Следуйте принципу «рефакторинг — раньше и рефакторинг — чаще». Советуем также прочитать книгу «Рефакторинг. Улучшение проекта существующего кода» Мартина Фаулера.
  7. Работайте в системе контроля версий, например, Git. Это бесплатно и удобно. Обучиться работать в ней можно за 11 занятий на видеокурсе «Git. Быстрый старт».
  8. Изучайте Open Source код. Вы сможете увидеть, как пишут ведущие разработчики и воспользоваться лучшими практиками в программировании.

Правила кода PHP

На конец 2020 г. действуют стандарты PHP программирования: PSR-2 и PSR-1. Они устанавливают правила синтаксиса, именования, оформления. Весь код должен быть написан единообразно. Это касается пробелов, отступов, скобок, строк.

Чтобы не запоминать все требования стандартов, можно работать в современной среде разработки — PhpStorm, NetBeans и подобных. Они позволяют автоматически форматировать текст в соответствии с правилами.

Отступы

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

Запомните: один отступ = четыре пробела.

Выделяем отступами тело конструкции, тело метода, блоки импорта, аргументы и подобное.

Правильно

Неправильно

Пробелы

  • между for ( foreach/ while / catch) и (
  • после ;
  • между ) и <
  • перед =>
  • после =>
  • между try и <
  • между > и catch
  1. После имени метода.
  2. В списке аргументов перед запятыми.
  3. Между ( и именем функции или метода.

Пустая строка

  1. После каждого логического блока.
  2. После определения пространства имен.
  3. После блока импорта. Каждая строка блока должна начинаться с use.

Правильно

Неправильно

Круглые скобки

  1. Не выносим на отдельные строки.
  2. Не ставим пробелы внутри: после ( и перед ).
  3. Ставим пробелы до скобок и после.
  4. Внутри перечисление отделяем пробелами.

Фигурные скобки

  1. Открывающая фигурная скобка выносится на новую строку перед телом метода, для классов.
  2. Открывающая фигурная скобка не выносится на отдельную строку в конструкциях и замыканиях.
  3. Закрывающая скобка > в конструкциях, имени метода, определении метода, классах пишется с новой строки и отделяется одним отступом.

Аргументы

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

Правильно

Неправильно

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

Правильно

Неправильно

Конструкция switch case

Конструкцию делим на три уровня: switch, case, echo/break. Каждый уровень начинается с отступа. Таким образом, наш код визуально выглядит состоящим из трех столбцов.

Если в конструкции не используется break, поставьте // no break.

Правильно

Неправильно

Конструкция try catch

Тело try и тело catch отделяются одним отступом. Пробелы нужно поставить:

  • между try и <
  • между > и catch
  • между catch и (
  • между ) и <

Catch и скобку > ставим на одну строку.

Правильно

Неправильно

Конструкция if, elseif, else

Операторы и открывающую фигурную скобку пишем на одной строке. Закрывающую фигурную скобку оператора пишем на той же строке, что и оператор. Заключительную фигурную скобку пишем на отдельной строке. Оператор else if пишем как единое слово — elseif. Тело оператора отделяем отступом.

Правильно

Неправильно

Комментарии в коде

Чистый код должен быть правильно закомментирован. К сожалению, встречаются две крайности: подробное комментирование каждой строки и полное отсутствие комментариев. И то, и другое мешает в работе. Избыточное комментирование снижает восприятие кода, отвлекает от понимания его сути. Писать очевидные вещи — тратить свое и чужое время. Иногда из-за слишком подробных комментариев объем кода увеличивается в несколько раз. Закончив с кодом, посмотрите критически. Очевидные и банальные комментарии удалите.

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

Больше информации о комментариях вы найдете в статье «Почему комментарии в коде — зло». А если вы считаете, что код — не место для шуток, предлагаю подборку самых забавных комментариев программистов.

Чек-лист «Инспекция кода»

Предлагаем чек-лист для самостоятельной проверки чистоты кода. Если вы будете инспектировать чужой код, помните, что программист — творческая профессия. А творческие люди обычно тяжело воспринимают критику. Будьте лояльней.

  • Легко ли воспринимать код визуально?
  • Присутствуют ли комментарии? насколько они необходимы?
  • Соответствует ли код стандартам PSR-1 и PSR-2? Краткая выжимка стандартов приведена в разделе “Правила кода PHP”.
  • Используете ли вы систему документирования phpDoc или подобную?
  • Нужно ли делать перерыв в чтении, чтобы разобраться в написанном?
  • Проведен ли рефакторинг?
  • Есть ли дублирование в блоках, функциях и пр.?
  • Понятны ли названия переменных, имена методов и пр.?
  • Какова длина строк, методов, функций, классов, файла?
  • Вы искали ошибки и баги?
  • Как можно еще улучшить код?
  • Можно ли сделать его короче?
  • Можно ли сделать его эффективней?

Желательно провести тестирование. Руководствуйтесь тремя принципами:

  1. Тесты должны быть полными.
  2. Тесты должны соответствовать установленным требованиям.
  3. Тесты должны проводиться на нужном уровне тестирования.

Дополнительную информацию по тестированию вы найдете в материале «Тестирование кода для чайников».

Заключение

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

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

Следование единым правилам упрощает работу программистов. Оформление кода PHP по одному стандарту помогает в командной работе и повышает уровень разработки. Понятие «качественный код» появилось не случайно, так же, как и анекдоты о неспособности спустя время прочитать даже собственный код. Понятный структурированный код сокращает время чтения, позволяет сразу приступить к поиску проблемы.

Восемь общих правил

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

  1. Придумывайте понятные и читаемые названия. Избегайте русских слов в латинской транскрипции. Только английские слова, обозначающие суть.
  2. Делайте отступы на каждом уровне и отделяйте логические блоки пустой строкой.
  3. Сокращайте вложенность кода и убирайте дублирование.
  4. Контролируйте длину. Рекомендуем для функций не более 20 строк, для метода не более 50 строк, для класса не более 300 строк, для файла — не более 1000 строк. Также ограничивайте длину одной строки до видимого значения на экране. Мягкое ограничение составляет 120 символов.
  5. Комментируйте и документируйте код. Это позволит зафиксировать всю необходимую информацию.
  6. Используйте рефакторинг. Следуйте принципу «рефакторинг — раньше и рефакторинг — чаще». Советуем также прочитать книгу «Рефакторинг. Улучшение проекта существующего кода» Мартина Фаулера.
  7. Работайте в системе контроля версий, например, Git. Это бесплатно и удобно. Обучиться работать в ней можно за 11 занятий на видеокурсе «Git. Быстрый старт».
  8. Изучайте Open Source код. Вы сможете увидеть, как пишут ведущие разработчики и воспользоваться лучшими практиками в программировании.

Правила кода PHP

На конец 2020 г. действуют стандарты PHP программирования: PSR-2 и PSR-1. Они устанавливают правила синтаксиса, именования, оформления. Весь код должен быть написан единообразно. Это касается пробелов, отступов, скобок, строк.

Чтобы не запоминать все требования стандартов, можно работать в современной среде разработки — PhpStorm, NetBeans и подобных. Они позволяют автоматически форматировать текст в соответствии с правилами.

Отступы

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

Запомните: один отступ = четыре пробела.

Выделяем отступами тело конструкции, тело метода, блоки импорта, аргументы и подобное.

Правильно

Неправильно

Пробелы

  • между for ( foreach/ while / catch) и (
  • после ;
  • между ) и <
  • перед =>
  • после =>
  • между try и <
  • между > и catch
  1. После имени метода.
  2. В списке аргументов перед запятыми.
  3. Между ( и именем функции или метода.

Пустая строка

  1. После каждого логического блока.
  2. После определения пространства имен.
  3. После блока импорта. Каждая строка блока должна начинаться с use.

Правильно

Неправильно

Круглые скобки

  1. Не выносим на отдельные строки.
  2. Не ставим пробелы внутри: после ( и перед ).
  3. Ставим пробелы до скобок и после.
  4. Внутри перечисление отделяем пробелами.

Фигурные скобки

  1. Открывающая фигурная скобка выносится на новую строку перед телом метода, для классов.
  2. Открывающая фигурная скобка не выносится на отдельную строку в конструкциях и замыканиях.
  3. Закрывающая скобка > в конструкциях, имени метода, определении метода, классах пишется с новой строки и отделяется одним отступом.

Аргументы

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

Правильно

Неправильно

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

Правильно

Неправильно

Конструкция switch case

Конструкцию делим на три уровня: switch, case, echo/break. Каждый уровень начинается с отступа. Таким образом, наш код визуально выглядит состоящим из трех столбцов.

Если в конструкции не используется break, поставьте // no break.

Правильно

Неправильно

Конструкция try catch

Тело try и тело catch отделяются одним отступом. Пробелы нужно поставить:

  • между try и <
  • между > и catch
  • между catch и (
  • между ) и <

Catch и скобку > ставим на одну строку.

Правильно

Неправильно

Конструкция if, elseif, else

Операторы и открывающую фигурную скобку пишем на одной строке. Закрывающую фигурную скобку оператора пишем на той же строке, что и оператор. Заключительную фигурную скобку пишем на отдельной строке. Оператор else if пишем как единое слово — elseif. Тело оператора отделяем отступом.

Правильно

Неправильно

Комментарии в коде

Чистый код должен быть правильно закомментирован. К сожалению, встречаются две крайности: подробное комментирование каждой строки и полное отсутствие комментариев. И то, и другое мешает в работе. Избыточное комментирование снижает восприятие кода, отвлекает от понимания его сути. Писать очевидные вещи — тратить свое и чужое время. Иногда из-за слишком подробных комментариев объем кода увеличивается в несколько раз. Закончив с кодом, посмотрите критически. Очевидные и банальные комментарии удалите.

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

Больше информации о комментариях вы найдете в статье «Почему комментарии в коде — зло». А если вы считаете, что код — не место для шуток, предлагаю подборку самых забавных комментариев программистов.

Чек-лист «Инспекция кода»

Предлагаем чек-лист для самостоятельной проверки чистоты кода. Если вы будете инспектировать чужой код, помните, что программист — творческая профессия. А творческие люди обычно тяжело воспринимают критику. Будьте лояльней.

  • Легко ли воспринимать код визуально?
  • Присутствуют ли комментарии? насколько они необходимы?
  • Соответствует ли код стандартам PSR-1 и PSR-2? Краткая выжимка стандартов приведена в разделе “Правила кода PHP”.
  • Используете ли вы систему документирования phpDoc или подобную?
  • Нужно ли делать перерыв в чтении, чтобы разобраться в написанном?
  • Проведен ли рефакторинг?
  • Есть ли дублирование в блоках, функциях и пр.?
  • Понятны ли названия переменных, имена методов и пр.?
  • Какова длина строк, методов, функций, классов, файла?
  • Вы искали ошибки и баги?
  • Как можно еще улучшить код?
  • Можно ли сделать его короче?
  • Можно ли сделать его эффективней?

Желательно провести тестирование. Руководствуйтесь тремя принципами:


  1. Тесты должны быть полными.
  2. Тесты должны соответствовать установленным требованиям.
  3. Тесты должны проводиться на нужном уровне тестирования.

Дополнительную информацию по тестированию вы найдете в материале «Тестирование кода для чайников».

Заключение

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

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

Стандарты кодирования — залог хорошей сопровождаемости проекта

Любая команд­ная раз­ра­ботка может быть эффек­тив­ной только в том слу­чае, если участ­ники команды имеют общее виде­ние. Иначе раз­ра­ботка начи­нает напо­ми­нать басню Кры­лова «Лебедь, Щука и Рак».

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

Стан­дарт коди­ро­ва­ния — набор пра­вил и согла­ше­ний, кото­рые опи­сы­вают базо­вые прин­ципы оформ­ле­ния про­грамм­ного кода, исполь­зу­е­мого сов­местно груп­пой разработчиков. Цель исполь­зо­ва­ния стан­дарта — упро­ще­ние вос­при­я­тия про­грамм­ного кода чело­ве­ком, сокра­ще­ние нагрузки на память и зре­ние при чте­нии про­грам­мы. Бону­сом к этому идёт воз­мож­ность эффек­тив­ного исполь­зо­ва­ния срав­не­ний в системе кон­троля вер­сий — раз­ный стан­дарт оформ­ле­ния кода «ломает» нор­маль­ный про­цесс работы с diff’ами, так как под­све­чи­ва­ются все изме­не­ния в оформ­ле­нии, а не только в биз­ нес-логи ­ке.

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

Как пра­вило, это всё авто­ма­ти­зи­ру­ется на уровне IDE (про­грамм­ной плат­фор­мы, кото­рая слу­жит для напи­са­ния кода). Про­грам­мист может писать код как ему удоб­но, а IDE может за него авто­ма­ти­че­ски фор­ма­ти­ро­вать напи­сан­ный про­грамм­ный код согласно задан­ным пра­вилам.

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

Стрем­ле­ния к кра­соте реа­ли­за­ции и пра­вильности про­грамм­ной архи­тек­туры тоже реа­ли­зу­емы на уровне согла­ше­ний — в этом очень помогает соблюдение прин­ци­пов про­грам­ми­ро­ва­ния, напри­мер: DRY, KISS, YAGNI, SOLID.

Топ-20 бесплатных редакторов кода

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

Вот несколько из редакторов, которые вы можете использовать сегодня, и при этом все они абсолютно бесплатные.

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

Редактор абсолютно бесплатен для Windows, Linux и Mac OS X. Это полноценная среда веб-разработки, в которой используется сочетание очень мощных средств разработки для HTML, JavaScript и CSS. Он также имеет множество дополнительных плагинов, которые были созданы сообществом разработчиков. Это унифицированный инструмент для редактирования веб-приложений.

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

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

Это отличный текстовый редактор для Microsoft Windows. Он является полнофункциональным и предназначен для редактирования, форматирования, проверки, предварительного просмотра, а также публикации веб-страниц на языках HTML, XHTML и XML. Редактор позволяет сворачивать код, имеет несколько опций загрузки, и с ним вы можете перемещаться по тегам и скриптам.

Еще один бесплатный редактор кода для Windows, Linux и Mac OS X. Это очень хороший мультиплатформенный и многоязычный редактор, который дает своим пользователям возможность создавать, модифицировать, перемещаться, строить, а также отлаживать код очень быстро и точно. Он позволяет редактировать файлы размером до 2 ГБ.

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

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

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

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

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

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

Это очень полезный редактор кода для Mac OS X, предназначенный для веб-дизайнеров и программистов. Среди его замечательных функций есть интерфейс с вкладками, сворачивание кода, подсказка и завершение кода, управление сайтом на основе проекта и так далее.

Этот редактор кода является бесплатным для Windows, Linux и Mac OS X. Это очень продуманный редактор кода, поставляющийся с многочисленными плагинами, которые вы можете использовать в своем процессе разработки. Он имеет встроенный макроязык и может поддерживать большое количество кодировок символов, в том числе Unicode и UTF8.

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

Это потрясающий бесплатный текстовый редактор и редактор открытого исходного кода. Он хорошо работает с рядом операционных систем, включая Microsoft Windows, Linux и MacOs.

Это очень полезный кодовый редактор для Mac OS X. Существует бесплатная, а также коммерческая версия. Он поставляется с замечательными плагинами для веб-разработчиков, открывается очень быстро, умен в орфографии и легко находит файлы.

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

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

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

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

Несколько советов по оформлению программного кода

Опубликовано shwan в 06.07.2020 06.07.2020

Оформление кода — на самом деле очень важная часть работы программиста, потому что код нужно не только написать, но и прочитать.

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

Используй комментарии в коде

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

Пример плохого комментария

Однако, у комментариев есть и отрицательные стороны. Главной из которых я считаю то, что комментарии имеют свойство устаревать, в отличие от кода. Многие программисты забывают или просто ленятся актуализировать комменты после изменения кода, что может ввести программиста в заблуждение. Кроме того, комментарии засоряют код значительно увеличивая его в объеме. Ну и здесь есть еще психологический фактор для программиста: «зачем писать легко читаемый код с хорошими именами переменных и методов, если можно нафигачить комментов?»

Мастер Йода рекомендует:  Пишем оператор Kubernetes на Python без фреймворков и SDK

Поэтому могу дать следующие по использованию комментариев:

1. Для объяснения интерфейсов методов (что делает метод, входные и выходные параметры, возможные исключения)

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

2. Для разъяснения зачем нужен кусок кода

3. Для удаление ненужных участков кода

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

Также возможно использование комментариев для временных решений и костылей ))) Но потом нужно не забыть исправить на правильную и качественную реализацию. Это обязательно!

4. Для разъяснения паттерна или алгоритма

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

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

Выделяй методы

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

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

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

Избавься от магических чисел

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

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

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

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

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

Как стать веб-разработчиком с нуля

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

Текст подготовлен на основе вебинара «Как стать веб-разработчиком с нуля за3 месяца» с участием Михаила Овчинникова из компании Badoo.

Ситуация на рынке

Рассматривая общую картину рынка, можно выделить наиболее востребованные направления в IT-сфере:

1. Frontend — самая «громкая» и быстроразвивающаяся отрасль, в которой постоянно меняются тренды. Опирается на язык программирования JavaScript и его фреймворки, такие как Angular.js, React.js, Vue.js и другие, а также язык разметки гипертекста HTML и таблицы стилей CSS.

2. Web-development, а именно backend-разработка с использованием различных языков, например, PHP, Ruby и Python.

3. Android/iOS-development — разработка под мобильные устройства на языках Java, Swift, Objective-C, C# (Xamarin), JavaScript (React Native) и других.

4. .NET-development — разработка как десктопных приложений под операционную систему Windows на языке C#, так и серверных программ, в том числе веб-сайтов, с использованием технологии ASP.NET.

5. Java-development — разработка кросс-платформенных приложений на языке Java, а также крупных высокопроизводительных систем с использованием технологии Java EE. Ее выбирают, когда нужны надежность, масштабируемость и гибкость.

6. Game development — разработка игр под различные платформы.

7. UI/UX — проектирование пользовательских интерфейсов.

8. QA — обеспечение качества программного обеспечения и его тестирование.

9. Embedded development — разработка программного обеспечения под «железо»: автомобили, бытовую технику и различные устройства с использованием низкоуровневых языков, таких как C и C++ со вставками ассемблера соответствующего процессора.

Почему стоит идти в веб

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

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

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

Сколько зарабатывает веб-разработчик

Изучив сайты поиска работы, можно увидеть весь диапазон зарплат веб-разработчиков. Новичок, у которого меньше полугода опыта, может зарабатывать от30 000 до60 000 рублей. Средний специалист с хорошим стажем получает80 000–150000 рублей. Доход профессионала составляет150 000–250000 рублей. Вдобавок, многое зависит от страны, региона, выбранного языка и компании, предлагающей вакансию.

Что нужно знать веб-разработчику

Про веб-разработку и программирование бытует множество слухов и стереотипов. Мы поговорим в том числе и о них.

Что веб-разработчику не требуется:

  1. Знать математику — большинству программистов, которые профессионально занимаются созданием сайтов и веб-сервисов, достаточно знаний на уровне5 класса.
  2. Иметь глубокие знания английского языка. Полсотни слов может вполне хватить.
  3. Учиться несколько лет и заканчивать институт, чтобы освоить базовую веб-разработку. На деле ее освоение займет два-три месяца обучения.

Что понадобится для успешного старта:

  1. Изучить базовые технологии создания сайтов — HTML и CSS — и понять принципы построения структуры сайтов. На это уйдет несколько недель.
  2. Освоить сопутствующие технологии: редакторы кода либо > Для начала давайте выясним что такое сайт и из чего он состоит.

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

Например, если бы наш сайт имел домен mysite123.com, то и папка, в которой он лежит, называлась бы так же и имела примерно такую структуру:

Когда в адресной строке браузера мы вводим адрес, например, yandex.ru, браузер обращается к серверу соответствующего сайта. Это то, с чего начинается взаимодействие с любой страницей в сети.

В ответ на этот запрос на сервере yandex.ru начинают работать backend-технологии, например, PHP и MySQL. Они делают свою «серверную магию» и в ответ на запрос «покажи мне главную страницу» отдают обратно браузеру искомую страницу в виде HTML, CSS и JavaScript-кода. Браузер умеет распознавать этот код и в результате выводит в своем окне красивую, работающую «Главную».

Ресурсы и инструменты для веб-разработки

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

HTML и CSS:

  • htmlbook.ru — самоучитель по HTML4, а также введение в HTML5, самоучитель CSS, введение в CSS3;
  • htmlacademy.ru — интерактивный курс по HTML5, основы CSS, множество бесплатных уроков;
  • webref.ru — самоучитель HTML, основы CSS, блочная модель CSS, текст в CSS, позиционирование в CSS, продвинутый CSS;
  • «Погружение в HTML5» Марка Пилгрима.

JavaScript:

  • learn.javascript.ru — самый современный самоучитель по JavaScript;
  • «JavaScript. Подробное руководство» Дэвида Флэнагана.

После освоения этих технологий рекомендуется также изучить JQuery — самую популярную библиотеку JavaScript. В дальнейшем стоит познакомиться и с такими полезными библиотеками, как Slick, Owl Carousel, Magniffic Popup, Velosity.js, Tree.js и другими.

Для ускорения написания кода и удобной работы с ним советуем использовать текстовые редакторы, такие как Sublime Text с плагином Emmet, редактором Notepad++, Brackets, IDE WEBStorm, PHPStorm и другими полезными инструментами.

Для ускорения написания CSS-кода полезно будет научиться работать с препроцессорами CSS, такими как Scss, Sass, Less.

Создаем простую веб-страницу

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

Воспользуемся текстовым редактором Sublime Text3 и создадим в нем новый файл index.html.

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

Добавим несколько элементов. Для каждого из них есть свой тег. Для начала создадим заголовок и дополним его текстом и кнопкой.

Для добавления заголовка используется тег

, для параграфа текста — тег

, а для кнопки — тег . Поместим эти элементы внутри блока с тегом .

Джентльменский набор веб-программиста

Наша статья публикуется сегодня не случайно. 13 сентября 2020 года — это 256-й день года, День программиста, официально утвержденный в России указом президента. А потому для начала мы поздравляем всех программистов с профессиональным праздником и желаем им чистого кода и достойных проектов!

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

Сегодня, как следует из названия, мы бы хотели затронуть такую сферу программирования, как веб, и рассмотреть 5 вопросов:

Для чего нужно веб-программирование?

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

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

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

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

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

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

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

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

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

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


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

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

На каком языке программировать?

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

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

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

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

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

JavaScript — мультипарадигменный язык программирования. Поддерживает функциональный, объектно-ориентированный и императивный стили.

JavaScript является одним из основных языков, применяемых в разработке интерактивных пользовательских интерфейсов.

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

Java — сильно типизированный объектно-ориентированный язык программирования. Приложения Java обычно могут работать на любой платформе с помощью виртуальной Java-машины, что делает этот язык чрезвычайно универсальным в применении. Java используется такими проектами, как: Amazon, eBay, LinkedIn и другими.

Python — высокоуровневый язык программирования общего назначения с минималистичным синтаксисом. В частности используется для создания масштабируемых многопользовательских веб-приложений. Используется в таких сервисах, как: Dropbox, YouTube, Instagram и других.

C# — объектно-ориентированный язык программирования, активно продвигаемый Microsoft и позволяющий создавать сайты на платформе .NET Framework.

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

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

C++ — компилируемый, статически типизированный язык программирования общего назначения. Мощный, с обширными библиотеками. Особенно полезен для высокопроизводительных приложений.

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

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

Ruby — динамический, рефлективный, интерпретируемый высокоуровневый язык программирования. У Ruby лаконичный и простой синтаксис и, кроме того, все в нем является объектами, например число «1» — это экземпляр класса Integer. Примерами использования могут служить: GitHub, Basecamp, Shopify и другие.

Swift — открытый мультипарадигмальный компилируемый язык программирования общего назначения. Создан компанией Apple целенаправленно для разработки iOS и OS X приложений.

Где программировать?

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

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

Примеры таких пакетов:

Open Server — портативная серверная платформа и программная среда под Windows. В состав программного комплекса входят:Apache, Nginx, MySQL, MariaDB, MongoDB, PostgreSQL, PHP, PHPMyAdmin и многое другое.

XAMPP — кроссплатформенная (Windows, Linux, OS X) сборка веб-сервера Apache, содержащая MariaDB, интерпретатор скриптов PHP, язык программирования Perl.

С помощью чего программировать?

Для написания кода в помощь веб-программисту создано множество инструментов. Конечно, можно использовать и обычные текстовые редакторы (например, Notepad++), но в целях максимальной производительности профессионалы предпочитают работать в той или иной интегрированной среде разработки (IDE — integrated development environment), которая включает в себя помимо текстового редактора еще и компилятор, интерпретатор, а также отладчик и средства автоматизации сборки.

Примеры популярных IDE:

Eclipse — платформа для создания модульных кроссплатформенных приложений. Для этой ИСР характерно наличие множества расширений, например для работы с базами данных, серверами приложений и т.д. Поддерживает большое количество языков программирования, в том числе PHP, Perl, Python.

Komodo IDE — кроссплатформенная коммерческая среда разработки ПО, содержащая отладчик и проверку синтаксиса для Perl, Python, PHP и других языков.

PhpStorm — интегрированная среда разработки на PHP. Поддерживаются передовые технологии веб-разработки, включая HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMAScript Harmony, шаблоны Jade, Zen Coding, Emmet, и, конечно же, JavaScript.

CodeLobster — условно-бесплатная интегрированная среда разработки приложений для создания веб-приложений на языке PHP, также поддерживаются: JavaScript, HTML, XML и CSS.

Функции IDE, хотя и не в полном объеме, могут выполнять и редакторы, чье преимущество выражается в легковесности и отсутствии избыточного функционала.

Примерами таких редакторов могут являться:

SublimeText 3 — кроссплатформенный проприетарный текстовый редактор. поддерживает и имеет возможность подсветки синтаксиса для множества языков программирования.

Brackets — кроссплатформенный свободный текстовый редактор. Brackets ориентирован на работу с HTML, CSS и JavaScript.

Atom — продукт от команды GitHub, бесплатный, кроссплатформенный, с открытым исходным кодом.

Coda — легковесный редактор для OS X и iOS со всеми нужными функциями.

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

Yii2 (акроним от «Yes It Is!», произносится как «Yee» или [ji:], на русском «йии») — объектно-ориентированный компонентный фреймворк, написанный на PHP и реализующий парадигму MVC (Model-View-Controller).

Laravel — бесплатный веб-фреймворк с открытым кодом, предназначенный для разработки с использованием архитектурной модели MVC.

Symfony — свободный фреймворк, написанный на PHP, который использует паттерн Model-View-Controller. Symfony предлагает быструю разработку и управление веб-приложениями, позволяет легко решать рутинные задачи веб-программиста. Работает только с PHP 5 и выше.

CodeIgniter — популярный MVC фреймворк с открытым исходным кодом, написанный на языке программирования PHP, для разработки полноценных веб-систем и приложений.

Ruby on Rails — явный лидер фреймворков для Ruby. Является открытым программным обеспечением.

Django — фреймворк для веб-приложений на языке Python. Используется на таких сайтах как Instagram, Disqus, Mozilla и других.

Где запускать в продакшн?

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

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

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

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

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

Итоги

Тема программирования довольно обширна и говорить о всех ее аспектах можно бесконечно. Лучшее, что можно сделать, если вас интересует это направление деятельности — перейти к практике и начать реализовывать свои идеи и проекты, причем прямо сейчас!

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

А какие технологии и инструменты предпочитаете в веб-программировании вы?

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

15 и более самых лучших методов написания суперчитаемого кода

Дата публикации: 2010-02-24

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

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

1. Комментируйте & Документируйте

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

Конкретно в этих примерах тип используемого комментария (или документации) основан на PHPDoc, а IDE — Aptana.

2. Согласованные отступы

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

Есть несколько способов введения отступов в код .

Я обычно пользовался способом № 2, но недавно переключился на способ № 1. Но это дело вкуса. Не существует «самого лучшего» способа, которому все должны следовать. Собственно, самый лучший способ – быть последовательным. Если вы – участник команды или вносите в проект код, нужно следовать тому способу, который используется в проекте.

Способы введения отступов не всегда можно полностью отличить один от другого. Иногда в них смешиваются различные правила. Например, в стандартах кодирования PEAR открывающая скобка «<» ставится в ту же строку, что и структуры управления, а они ставятся в следующую строку после определения функции.

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

Вот статья из Wikipedia с образцами разных способов введения отступов.

3. Избегайте очевидных комментариев

Комментирование кода – это прекрасно; однако, с ним можно перестараться или сделать его просто избыточным. Рассмотрим пример:

Когда текст и так очевиден, повторять его в комментариях совершенно непродуктивно.

Если действительно нужен комментарий к этому коду, его можно просто свести к одной строке:

4. Группировка кода

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

Вот простейший пример:

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

5. Схема последовательного наименования

Сам PHP иногда виновен в том, что не следует схемам последовательного наименования:

strpos() vs. str_split()

imagetypes() vs. image_type_to_extension()

Прежде всего, в именах должны быть разграничены слова. Два самых популярных варианта:

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

underscores: Подчеркивания между словами, как здесь: mysql_real_escape_string().

При существовании различных вариантов возникает та же ситуация, что и при введении отступов, о чем я ранее упоминал. Если в проекте следуют определенному правилу, вы тоже следуете ему. Кроме того, некоторые языковые платформы имеют тенденцию использовать определенную схему наименования. Например, в Java большинство кодов будут использовать имена в camelCase, а в PHP – имена с подчеркиваниями.

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

Повторяю, не существует очевидного «самого лучшего» способа, кроме последовательного.

6.Принцип DRY

DRY расшифровывается как Don’t Repeat Yourself (Не повторяйтесь). Также известен как DIE: Duplication is Evil (Повторение — зло).

Этот принцип гласит:

«Каждая крупица знания должно иметь единое, однозначное, авторитетное представление в системе.»

Предназначение большинства приложений (или компьютеров в целом) – в автоматизации повторяющихся заданий. Этот принцип должен соблюдаться во всем коде, даже в веб-приложениях. Один и тот же кусок кода не должен повторяться снова и снова.

Например, большинство веб-приложений состоят из многих страниц. Весьма вероятно, что эти страницы будут содержать общие элементы. Самые подходящие кандидаты для этого — верхние и нижние колонтитулы. Их копирование и вставка в каждую страницу – не самая лучшая идея. Здесь Jeffrey Way объясняет, как создавать шаблоны в CodeIgniter.

7. Избегайте глубоких вложений условных операторов

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Чтобы сделать пример более ясным, нужно внести изменения, чтобы уменьшить уровень вложенности:

8. Ограничивайте длину строк

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

Очень полезно избегать написания очень длинных строк кода.

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

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

9. Организация файлов и папок

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

Во время моих первых проектов по программированию я узнал об идее создания «включенных файлов». Однако я все еще был очень далек от организованности. Я создавал папку «inc» с двумя файлами внутри: db.php и functions.php. С ростом приложений файл функций становился огромным и сложно поддерживаемым.

Одним из лучших подходов к решению этой проблемы является использование framework’ов, либо их имитация с помощью структуры папок. Вот как выглядит CodeIgniter:

10. Последовательные имена промежуточных переменных

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

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

11. Пишите зарезервированные слова SQL прописными буквами

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

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

12. Отделяйте код и данные

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

Когда много лет назад впервые вышел PHP, он в основном рассматривался как движок шаблонов. Иметь большие HTML-файлы с несколькими строками кода внутри них было обычным делом. Однако за многие годы все изменилось и вебсайты стали гораздо более динамичными и функциональными. Сейчас код – огромная часть веб-приложения, и смешивание его с HTML — не очень хорошая практика.

Вы можете либо сами придерживаться этого правила в ваших приложениях, либо пользоваться при разработке дополнительными инструментами (движки шаблонов, frameworks или CMS) и просто соблюдать принятые в них соглашения.

Популярные фрэймворки PHP:

Популярные движки шаблонов:

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

13. Альтернативный синтаксис внутри шаблонов

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

My Message Board

echo $category -> title ; ?>

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

14. Объектно-ориентированное vs. процедурное

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

Объекты должны использоваться для представления данных, обычно находящихся в базе данных.

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

15. Изучайте открытый исходный код

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

16. Разложение кода на элементы

Разложение на элементы означает внесение в код изменений без изменения его функциональности. Можно это назвать «чисткой» ради улучшения читаемости и качества.

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

Можно пользоваться любым из «лучших способов» повышения читаемости кода в процессе разложения на элементы.

Надеюсь, вам понравилась эта статья! Я что-нибудь упустил из виду? Напишите мне в комментариях.

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.


P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Языки программирования и технологии для веб-разработки

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

В последние годы, когда сеть продолжает развиваться, появилось несколько различных потоков веб-разработки:

  • Backend (или веб-разработка на стороне сервера) охватывает все те вещи, которые работают в фоновом режиме, чтобы создавать веб-сайты или веб-приложения, например базы данных и скрипты.
  • Frontend (также известная как веб-разработка на стороне клиента) касается части веб-интерфейса, с которой пользователь взаимодействует — часть, с которой знакомы все, кто пользуется Интернетом.
  • Есть Fullstack разработчики, которые могут сделать все вышеперечисленное.

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

Итак, вот 10 лучших языков программирования для веб-разработки, как на стороне клиента, так и на стороне сервера.

CSS / HTML

Рука об руку с JavaScript идут CSS и HTML — вместе они составляют святую троицу разработки веб-интерфейса. HTML (Hyper Text Mark Up Language) — это язык веб-браузеров — с помощью которых сделаны сайты. Вы можете пройти курс HTML бесплатно на нашем сайте. CSS (каскадные таблицы стилей) заставляет их выглядеть стильно и со вкусом — гораздо лучше, чем те ужасные сайты, действующие с первых дней работы в Интернете. Для разработчиков веб-интерфейсов очень важно знать эти инструменты от и до. Они также окажутся полезными для backend разработчиков: вы сможете понять, как изменения вашей серверной части влияют на конечного пользователя.

PHP — это скриптовый язык, используемый для быстрого создания динамических веб-страниц. Отличный выбор для frontend и backend разработчиков, чтобы добавить их в арсенал (но особенно для последних), он стоит за такими веб-гигантами, как WordPress и Facebook. PHP позволяет быстро и легко расширять веб-приложения и запускать веб-сайты с повторяющимися серверными задачами (например, обновлять новостные ленты). Он имеет открытый исходный код и очень популярен в среде начинающих компаний, медиа-агентств и электронной коммерции — таких людей, которые часто нанимают новых веб-разработчиков. А ещё, это любимый язык программирования автора этого блога, и да, у нас вы можете изучить PHP бесплатно!

Для full stack разработчиков и на стороне сервера SQL (Structured Query Language) — это вишня на торте вашего разрабатываемого инструментария. SQL является важной частью веб-разработки, что позволяет получать конкретные данные из больших, сложных баз данных. Он пользуется большим спросом среди крупных компаний, таких как Microsoft, поэтому это умный выбор для любого разработчика с высокими амбициями или необходимость, если вы работаете с базами данных на регулярной основе. На нашем сайте вы также можете найти бесплатный курс MySQL для начинающих.

JavaScript

Язык интерфейса, используемый для создания и разработки веб-сайтов, настольных приложений и игр. JavaScript работает во всех браузерах и может работать с программами, которые не размещены в Интернете. Он поддерживает как функциональные, так и объектно-ориентированные стили программирования, и в основном, это ваш подход к созданию потрясающих пользовательских интерфейсов и веб-сайтов / приложений / игр, которые выглядят супер круто. Понимание JavaScript важно, даже если ваше сердце настроено на развитие серверной части. Компоненты, структуры данных и алгоритмы JavaScript применяются практически к любому другому языку.

Python

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

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

Java, разработанная в 1990-х годах и по-прежнему наиболее востребованная, является золотым стандартом в области веб-разработки во всем мире, во всех областях. Она ориентирована на объекты и работает на любой платформе, что делает ее чрезвычайно универсальной. Если вы хотите, чтобы ваш safe можно было использовать практически во всех технологических компаниях в мире, то непременно выбирайте Java. Интересный факт: Java изначально предназначался для интерактивного телевидения, но вскоре его создатели поняли, что она слишком далеко опережает свое время для этой конкретной отрасли. Остальное уже история.

Масштабируемая, простая и сверхбыстрая, Ruby и Ruby on Rails — это дуэт мечты, который предлагает язык full stack, а также рамки для быстрого создания полных программ. Любимый среди предпринимателей и начинающих, Ruby имеет широкий выбор сторонних «драгоценных камней» (надстроек), которые могут заставить его делать практически все, что вам нужно. Twitter и Basecamp используют Ruby — неплохой показатель, не так ли?

Главная цель, правильно поставленная и действующая с 1979 года, C ++ — объектно-ориентированный, очень технический язык. Чрезвычайно мощный и с обширными библиотеками, это один из краеугольных языков backend развития. С++ особенно полезен для высокопроизводительных программ и программ с большим количеством шаблонов. Если вы уже знаете C (или если вы изучили C ++ и хотите повернуть свою голову на C), вы уже находитесь на правильном пути.

Подобно C++, C — старый школьный язык, легко скомпилированный. Это часто используемая платформа программирования, которая предлагает элементы построения для других языков, таких как C ++, Python и Java. Фактически, многие из этих языков основаны на C. Отличный вариант для full stack и тех, кто хочет добавить новое измерение в свой набор навыков (или метафорическое силовое упражнение в свою панель инструментов программирования). Он лучше всего подходит для написания системного программного обеспечения и приложений, гарантируя удобный язык для разработчиков, на котором все привыкли работать.

Этапы создания веб-сайта. Часть 3 — Разработка

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

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

Итак, процесс дизайна макета страницы плавно перетекает в процесс «оживления» сделанного на предыдущих этапах. Прежде чем сразу начинать писать HTML, CSS и JS стоит немного поговорить о редакторах кода и структуре проекта.

Редакторы кода

Из наиболее популярных редакторов кода на сегодня можно выделить три:

  • Sublime Text (http://www.sublimetext.com/3)
  • Atom (https://atom.io/)
  • Brackets (http://brackets.io/)

От части, все эти редакторы похожи по принципу работы, когда при установке мы получаем редактор, в который затем можем «доставить» необходимые модули и плагины, так сказать, «редакторы на стероидах». Разница лишь в технологиях, которые были использованы при написании редакторов, если Sublime Text написан при помощи C++ и Python, то 2 других используют JavaScript, HTML, CSS (Less). За счёт этой разницы Sublime Text может работать чуть быстрее своих коллег.

Существуют так же более продвинутые IDE (студии) такие, как Web Storm, PHP Storm и пр., но для вёрстки проекта вполне подойдёт редактор кода, а не целая студия (IDE).

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

Структура проекта

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

Лучше всего отдельные категории файлов помещать в свои папки: картинки в папку images или img, css в папку css, javascript в папку js. В корне будет лежать только index.html и страницы сайта, либо только index.html, а страницы в отдельной папке pages. Соблюдая эти правила вы никогда не запутаетесь в проекте.

Так же стоит сказать и об именовании файлов проекта. Чаще всего применяются следующие имена: главная страница – это index.html, стили проекта styles.css, скрипты scripts.js или app.js, минимизированные версии файлов имеют префикс .min, картинки носят не пространные названия на русском языке или набора цифр, а отражают то, что на них изображено, например, button.png, download-icon.png, logo.png и т.д.

Работа над проектом

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

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

  • Написание HTML
  • Написание CSS
  • Написание JS

Написание HTML

Сейчас при написании HTML кода уже смело можно использовать тэги и элементы разметки, которые появились вместе с стандартом HTML5, если вам необходимо поддерживать старые браузеры, то можно использовать, например, плагин html5shiv (https://github.com/afarkas/html5shiv), который обеспечивает поддержку новых стандартов в старых браузерах или библиотеку Modernizr (https://modernizr.com/) (html5shiv входит в сборку Modernizr), которая определяет возможности браузера, с помощью которого просматривается сайт.

При вёрстке сайтов в настоящее время, априори, используется блочный подход, никаких таблиц, iframe’ов и пр. Таблицы выполняют только свою прямую роль – представление информации в виде таблицы. В вёрстке таблицы используются лишь при работе с электронными письмами.

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

При написании разметки мы так же сразу можем прописывать элементам классы и идентификаторы.

Правила именования классов

В проекте во всём должен быть порядок: от структуры проекта до имен классов, разметки и написания кода. Если при разметке важно следить за типом информации и размещением её в соответствующих блоках (заголовок, список, ссылка, строчный элемент, параграф и пр.), то при именовании классов и идентификаторов важно соблюдать здравый смысл. Классы должны давать абстрактное понятие о блоке, к которому они относятся, чтобы код было легче читать, а затем и писать стили. В принципе здесь не должно быть ничего сложного, если мы размечаем меню, то логично содержащему блоку дать класс .nav или .navigation, если это блок с текстом, то можно дать ему класс .block-text и т.д.

На сегодняшний день есть один популярный подход, который касается принципов построения проекта в целом, но на данном этапе нас интересует именно именование классов. Подход называется БЭМ и расшифровывается, как Блок Элемент Модификатор.

Вкратце можно описать данный подход, как некое соглашение по именованию классов и представлению разметки страницы. Каждый элемент страницы являет собой сущность, которая может существовать независимо от контекста, тогда мы говорим о Блоке (.block) или же только в контексте другой сущности, тогда мы говорим об Элементе (.block__element). Каждый Блок или Элемент могут иметь различные модели представления: цвет, форму, прозрачность и пр. За подобные свойства будет отвечать Модификатор (.block__element_mod).

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

Более полная информация о методологии: https://ru.bem.info/

SMACSS

Так же существует подход SMACSS (расшифровывается данный акроним как Scalable and Modular Architecture for CSS – Масштабируемая и Модульная Архитерктура для CSS), который разделяет понятие о классах и разметке на несколько уровней: базовый, макет, модуль, состояние, тема.

  • К базовому уровню будет относиться всё, что касается непосредственно тэгов html.
  • К уровню макета мы будем относить всё, что касается основных составляющих страницы: секции.
  • К уровню модуль мы будем относить всё, что касается переиспользуемых элементов страницы: баннеры, навигация, списки, блоки информации и пр.
  • Уровень Состояние описывает как будут выглядеть модули и секции в том или ином состоянии: отображаются или не отображаются, сжатые или раскрытые, активны или неактивны и пр.
  • Уровень темы чем-то схож с уровнем Состояния и отражает как модули или секции могут выглядеть.

В данном подходе используются следующие соглашения по именованию. Уровни определяются при помощи префиксов и соответствующего буквенного обозначения:

  • Макет: .l- или .layout-
  • Так как модули составляют основную часть проекта именовать их, используя префикс module- избыточно. Поэтому для них используются имена как есть, например: .example <>, .afisha <> и пр.
  • Состояния имеют префикс .is-, например .is-hidden <>
  • Уровень Темы именуется подобно модулям.

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

Информация о методологии и онлайн книга: https://smacss.com/
Русскоязычный перевод книги по SMACSS: https://github.com/andrew—r/smacss

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

Написание CSS

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

Стоит упомянуть о 2-х CSS файлах-дополнениях: normalize.css и reset.css.

Reset.css

Изначально в проектах повсеместно использовался reset.css, написанный Эриком Мейером. Цель данного свода правил – сбросить стили браузера, которые он по умолчанию использует для отображения элементов разметки. Таким образом при использовании reset.css нам не нужно переписывать стили браузера, по сути мы работаем с «чистым листом» и можем сосредоточиться на написании собственных стилей с нуля.

Normalize.css

Normalize.css наоборот, не сбрасывает все стили «в ноль», а нормализует их, приводит отображение стилей проекта к более-менее однообразию во всех современных браузерах.

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

Так же стоит упомянуть о, так называемом, «быстром сбросе», когда мы абсолютно для всех элементов страницы с помощью селектора * прописываем свойства . Таким образом мы сбрасываем все внутренние и внешние отступы для всех элементов страницы. Но данную технику не рекомендуется использовать, так как она замедляет процесс отрисовки страницы, да и по сути имеет мало смыла (на мой взгляд).

Так же стоит отметить, что все размеры и отступы берутся непосредственно из дизайн-макета. Для получения данных значений нам необходимо использовать инструмент «линейка» и направляющие (речь про инcтрументарий Adobe Photoshop), а затем переносить полученные значения в код. Если мы работаем с фиксированным макетом, то значения переносятся в пикселях как есть, если же у нас «резиновый», то значения нужно переводить в проценты. Основная формула – это ширина элемента, делённая на ширину контекста (ширина содержащего блока). Например, если блок, содержащий текст и картинку имеет на макете ширину 400px, а блок с текстом в нём должен иметь ширину 340px, то в процентном выражении это будет (340 / 400) * 100%, то есть 85% будет занимать блок с текстом.

Не стоит перегружать ваши стили чрезмерной специфичностью, например, если мы хотим, чтобы ссылка внутри списка имела красный цвет, то не обязательно записывать всю линейку классов и тэгов: .main –nav ul li a, достаточно просто указать .main-nav a. Слишком «специфичные» правила делают правила контекстно зависимым и заставляют вас писать лишний код, а так же влияют на скорость отрисовки страницы, так как при разборе правил CSS парсер читает их справа налево и ему сначала, если брать описанный выше пример, нужно взять все ссылки (a), затем отбросить все ссылки, которые не лежат в li и т.д. пока он не доберётся до содержащего класса.

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

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

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

Если, вы используете правила, относящиеся к спецификации CSS3, то не поленитесь проверить необходимость использования браузерных префиксов на сайте http://caniuse.com.

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

Написание JS

Итак, заключительным этапом является написание JS скриптов. При создании веб страниц стало, практически, стандартом использование библиотеки jQuery, которая позволяет с лёгкостью манипулировать элементами web-страницы (DOM узлами), навешивать прослушку событий, отправлять запросы на сервер, обрабатывать результат выполнения и пр. Но не стоит слепо доверять трендам, на сегодняшний день нативный JavaScript достиг такого уровня, что вам возможно уже не нужен jQuery. Поэтому, прежде чем слепо прикреплять jQuery, стоит задуматься, так ли он нужен для ваших задач и не достаточно ли встроенных возможностей языка JavaScript.

Есть неплохой ресурс, который приводит альтернативы одних и тех же манипуляций на языке JavaScript и с помощью библиотеки jQuery: http://youmightnotneedjquery.com/, так же неплохим подспорьем является сайт https://developer.mozilla.org/ru/, на котором, помимо описания методов и свойств JavaScript, можно найти полифиллы для тех или иных методов (библиотека или часть кода, которая добавляет в старые браузеры поддержку возможностей современных функций и методов JavaScript).

Важно отметить, что не рекомендуется использовать JavaScript для стилизации, то есть не стоит для того или иного объекта DOM (элемента страницы) добавлять портянку CSS свойств с помощью JavaScript, чтобы выделить его состояние и пр. Рекомендуется использовать классы, то есть заранее в CSS определить классы-состояния (активный, не активный, скрытый, использованный и пр.) и при манипуляции элементами просто добавлять или убирать соответствующие классы.

Например, у нас есть элемент списка с классом .list__item, для того, чтобы показать активный элемент в данный момент (выбран пользователем) или нет, можно просто добавить класс (.list__item—active), а не прописывать все стили, присущие этому классу в JS:

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

Опять-таки, возвращаясь к теме Mobile First, нельзя не упомянуть о 2-х концепциях, которые коррелируют с данной техникой. Progressive Enhacement и Graceful Degradation, что переводится как прогрессивное улучшение и последовательное ухудшение. Данные принципы описывают 2 разных подхода к разработке: в первом случае мы разрабатываем наш сайт, пишем скрипты с учётом старых браузеров и систем или же определяем поведение при невозможности запуска скриптов, а затем постепенно улучшаем скрипт, вводя современные функции и методы, таким образом мы получаем сайт, который будет одинаково хорошо работать в старых и новых браузерах и средах (то же касается и css).

При Graceful Degradation подход противоположный – мы разрабатываем для современных браузеров и, лишь, потом начинаем вносить доработки и изменения с учётом старых версий.

Подход Mobile First чем-то схож с Progressive Enhacement.

Проверка кода

После написания html, css и js для нашей страницы необходимо проверить всё ли сделано верно. Для этого можно использовать online средства:

  • Для проверки html: https://validator.w3.org/
  • Для проверки CSS: http://jigsaw.w3.org/css-validator/
  • Для проверки JS: http://www.jslint.com/

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

Средства автоматизации

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

960GS

Мы уже говорили об этом средстве разработки в разделе про модульные сетки и дизайн. Нужно сказать, что 960GS предлагает не только макеты для создания дизайна, но и свою систему именования классов. Используя предлагаемые классы при вёрстке и при подключении css файла системы в проект, блоки сайта будут выстроены по этой сетке, что сэкономит время на написании практически того же самого самостоятельно.

Emmet

Emmet – это средство работы с html и css (http://emmet.io/). Плагин для работы с данным средством можно установить, например, в Sublime Text, тогда у вас появляется возможность не писать громоздкие куски кода на html и css, а записывать их в строчку, раскрывая затем в полноценную разметку. Например, строка .block>ul.list>li.list__item*3, может быть раскрыта в полноценный код:

Затем вам просто необходимо вписать текстовые значения в элементы списка. То же касается и css: строка w:100px+h:150px+bgc:#ff0 раскрывается в:

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

Далее стоит упомянуть и о таком языке работе с шаблонами, как jade (http://jade-lang.com/). Опять-таки, с помощью jade писать html становится быстрее и удобнее, а так же появляется возможность создания переиспользуемых блоков кода и миксинов, передавая которым на вход те или иные параметры мы будет получать нужную нам разметку. Благодаря jade в проекте, касательно разметки и написания страниц, может поддерживаться модульность, а часто используемые названия и блоки кода могут выноситься в качестве переменных (названия, имена страниц и пр.) или миксинов в отдельные файлы настроек и файлы, соответственно. Для работы с jade, а точнее для преобразования написанного кода из jade в html, необходимо использовать командную строку, а так же установить на ваш компьютер платформу nodejs (https://nodejs.org/en/, http://nodejs.ru/).

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

Работа в командной строке так же может ускорить некоторые этапы работы над проектом, например, создание папок и файлов. Запустив консоль в директории проекта и набрав в ней всего лишь одну строку:

После нажатия enter мы получим папку project в которой будут находиться папки css, images, js, в папках css и js файлы styles.css и app.js, соответственно, а в корне project лежать файл index.html. Таким образом мы сэкономили время на создание папки, написание её названия, создание файлов и пр. Так же командная строка используется для работы с остальными средствами автоматизации.

Далее стоит поговорить о таком языке как Sass (http://sass-lang.com/). Данный язык упрощает работу с css. Благодаря Sass можно записывать вложенные классы, проводить математические вычисления прямо в коде, выносить переиспользуемые величины в качестве переменных в отдельные файлы или в начало файла, что в значительной степени упрощает дальнейшую работу со стилями и упрощает изменение тех или иных величин, так как они все будут храниться в одном месте и не нужно будет «ходить» по всему проекту и вносить соответствующие правки. Так же, благодаря Sass в проекте можно придерживаться принципа модульности, храня части разметки в соответствующих файлах и подключать их все в основной, затем с помощью консольной команды можно собрать весь код в один css файл, так же поддерживается сборка результирующего файла на лету по мере написания стилей. Опять-таки для работы с Sass потребуется командная строка. Процесс установки пакета можно изучить здесь: http://sass-lang.com/install.

HTML5Boilerplate

HTML5Boilerplate (https://html5boilerplate.com/) представляет собой заранее скомпонованный проект, в котором уже есть index.html, normalize.css и пр. В index.html, например, уже заранее прописаны основные куски кода, которые необходимы при написании html страницы. Проект позволяет скачать архив со всеми файлами как есть или же использовать кастомную сборку: http://www.initializr.com/. Опять-таки, принцип прост: зачем тратить время на написание одних и тех же строк или на проделывание одних и тех же манипуляций, если мы сразу можем сосредоточиться непосредственно на работе с проектом.

Gulp и Grunt

Gulp (http://gulpjs.com/) и Grunt (http://gruntjs.com/) представляют собой сервисы запуска задач, которые описываются в основных файлах данных сервисов, выполняются с помощью совместимых модулей и запускаются на выполнение с помощью консоли.

Данные сервисы помогают использовать в разработке, например, вышеописанные средства Jade и Sass, автоматически преобразовывать их в соответствующие файлы html и css, сжимать их, если необходимо, а так же проверять, например css свойства, на необходимость использования браузерных префиксов и подставлять их в автоматическом режиме.

Оба сервиса используют различный подход в описании выполнения задач, но суть их работы одинакова. Полезным будет данное сравнение: http://frontender.info/gulp-grunt-whatever/

Так же многие сервисы вроде autoprefixer (автоматическая простановка браузерных префиксов), jshint (проверка JS кода на валидность) могут быть установлены как сторонние плагины в текстовом редакторе (Sumblime Text, Atom, Brackets) и инициализированы при нажатии определённого сочетания клавиш.

Bootrstrap, Foundation, Material Design Lite

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

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

Со всеми возможностями и примерами можно ознакомиться на соответствующих сайтах:

  • Bootstrap: http://getbootstrap.com/
  • Foundation: http://foundation.zurb.com/
  • Material Design Lite: http://www.getmdl.io/

Данное описание не является исчерпывающим и представляет собой лишь поверхностный взгляд на некоторые технологии. Но прежде чем пускаться во все тяжкие, используя средства автоматизации, библиотеки, framework’и, готовый код и прочее, стоит, всё-таки, изучить основы работы с html, css и js.

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

Соглашения по оформлению кода команды RSDN

Автор: RSDN Team
Источник: RSDN Magazine #1-2004

Опубликовано: 27.02.2003
Исправлено: 15.04.2009
Версия текста: 1.0.1

Введение

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

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

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

Список терминов

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

  • operator – оператор (например, +, -, *, !)
  • statement – инструкция (например, «a = b;», «if (a) <>»)
  • expression – выражение (например, «a – b + c», «a == 1»)

Именование идентификаторов


Общие правила


  1. Помните! Код чаще читается, чем пишется, поэтому не экономьте на понятности и чистоте кода ради скорости набора.
  2. Не используйте малопонятные префиксы или суффиксы (например, венгерскую нотацию), современные языки и средства разработки позволяют контролировать типы данных на этапе разработки и сборки.
  3. Не используйте подчеркивание для отделения слов внутри идентификаторов, это удлиняет идентификаторы и затрудняет чтение. Вместо этого используйте стиль именования Кемел или Паскаль.
  4. Старайтесь не использовать сокращения лишний раз, помните о тех, кто читает код.
  5. Старайтесь делать имена идентификаторов как можно короче (но не в ущерб читабельности). Помните, что современные языки позволяют формировать имя из пространств имен и типов. Главное, чтобы смысл идентификатора был понятен в используемом контексте. Например, количество элементов коллекции лучше назвать Count, а не CountOfElementsInMyCollection.
  6. Когда придумываете название для нового, общедоступного (public) класса, пространства имен или интерфейса, старайтесь не использовать имена, потенциально или явно конфликтующие со стандартными идентификаторами.
  7. Предпочтительно использовать имена, которые ясно и четко описывают предназначение и/или смысл сущности.
  8. Старайтесь не использовать для разных сущностей имена, отличающиеся только регистром букв. Разрабатываемые вами компоненты могут быть использованы из языков, не различающих регистр, и некоторые методы (или даже весь компонент) окажутся недоступными.
  9. Старайтесь использовать имена с простым написанием. Их легче читать и набирать. Избегайте (в разумных пределах) использования слов с двойными буквами, сложным чередованием согласных. Прежде, чем остановиться в выборе имени, убедитесь, что оно легко пишется и однозначно воспринимается на слух. Если оно с трудом читается, и вы ошибаетесь при его наборе, возможно, стоит выбрать другое.

Стили использования регистра букв


  • Паскаль – указание этого стиля оформления идентификатора обозначает, что первая буква заглавная и все последующие первые буквы слов тоже заглавные. Например, B ack C olor, L ast M odified, D ate T ime.
  • Кэмел – указание этого стиля обозначает, что первая буква строчная, а остальные первые буквы слов заглавные. Например, b order C olor, a ccess T ime, t emplate N ame.

Сокращения


  1. Не используйте аббревиатуры или неполные слова в идентификаторах, если только они не являются общепринятыми. Например, пишите GetWindow, а не GetWin.
  2. Не используйте акронимы, если они не общеприняты в области информационных технологий.
  3. Широко распространенные акронимы используйте для замены длинных фраз. Например, UI вместо User Interface или Olap вместо On-line Analytical Processing.
  4. Если имеется идентификатор длиной менее трех букв, являющийся сокращением, то его записывают заглавными буквами, например System. IO, System.Web. UI. Имена длиннее двух букв записывайте в стиле Паскаль или Кэмел, например Guid, Xml, xmlDocument.

Выбор слов


  1. Не используйте имена, совпадающие с глобальными пространствами имен, такими, как System и Microsoft. Старайтесь по возможности избегать совпадения с названиями других сущностей .NET Framework.
  2. Ниже приводится список имен, использование которых нежелательно:

AddHandlerAddressOfAliasAndAnsi
AsAssemblyAutoBaseBoolean
ByRefByteByValCallCase
CatchCBoolCByteCCharCDate
CDecCDblCharCIntClass
CLngCObjConstCShortCSng
CStrCTypeDateDecimalDeclare
DefaultDelegateDimDoDouble
EachElseElseIfEndEnum
EraseErrorEventExitExternalSource
FalseFinalizeFinallyFloatFor
FriendFunctionGetGetTypeGoto
HandlesIfImplementsImportsIn
InheritsIntegerInterfaceIsLet
LibLikeLongLoopMe
ModModuleMustInheritMustOverrideMyBase
MyClassNamespaceNewNextNot
NothingNotInheritableNotOverridableObjectOn
OptionOptionalOrOverloadsOverridable
OverridesParamArrayPreservePrivateProperty
ProtectedPublicRaiseEventReadOnlyReDim
RegionREMRemoveHandlerResumeReturn
SelectSetShadowsSharedShort
SingleStaticStepStopString
StructureSubSyncLockThenThrow
ToTrueTryTypeOfUnicode
UntilvolatileWhenWhileWith
WithEventsWriteOnlyXorevalextends
instanceofpackagevar

Пространства имен


  1. Для пространства имен используйте имя компании, затем название продукта и, возможно, название подсистемы или существенной части проекта. Например, Rsdn.Framework, Rsdn.MegaTool.Scanner.
  2. Используйте стиль Паскаль для регистра букв.
  3. При объявлении пространства имен используйте единственную директиву namespace с полным именем пространства имен. Не используйте вложенные объявления пространств имен. Это замечание не относится к С++/MС++, так как в них нет отличной от вложенных пространств имен возможности создавать составные пространства имен.
  4. Множественное число следует использовать в случае, если пространство имен объединяет некоторое количество разных, но семантически похожих сущностей. И наоборот, когда пространство имен содержит некую подсистему, стоит использовать единственное число. Сравните: Rsdn.Collections, но не Rsdn.Collection; Rsdn.Controls, но не Rsdn.Control; Rsdn.Network, но не Rsdn.Networks; Rsdn.Web, но не Rsdn.Webs;
  5. Не используйте одно и то же имя для класса и пространства имен. Например, не используйте класс Debug и пространство имен Debug .

Импорт пространств имен (директива using)


  1. Перечислять импортируемые пространства имен необходимо в следующей последовательности: пространства имен .NET Framework, пространства имен сторонних производителей, собственные пространства имен из других проектов, пространства имен из текущего проекта. Каждый такой раздел должен отделяться одной пустой строкой, а имена внутри раздела должны быть отсортированы по алфавиту.
  2. Директивы using, содержащие alias, должны идти в конце соответствующих разделов, и также быть упорядоченными по алфавиту.

  1. Все не вложенные типы (размещаемые в пространствах имен или непосредственно в глобальном пространстве), за исключением делегатов, должны находиться в отдельных файлах.
  2. Старайтесь объявлять вложенные типы в начале внешнего типа.
  3. Старайтесь не делать излишней вложенности типов. Помните, что вложенными должны быть только тесно связанные типы.

Элементы типов (type members)


  1. Элементы типов должны отделяться одной строкой друг от друга. Вложенные типы должны отделяться двумя строками. При объявлении большого количества полей, используемых внутри класса (не публичных), можно опускать пустую строку (особенно если поля отделены XML-комментариями).

Классы/Структуры


  1. Используйте существительное (одно или несколько прилагательных и существительное) для имени класса.
  2. Используйте стиль Паскаль для регистра букв.
  3. Не используйте специальных префиксов, поясняющих, что это класс. Например, FileStream , а не CFileStream .
  4. В подходящих случаях используйте составные слова для производных классов, где вторая часть слова поясняет базовый класс. К примеру, ApplicationException – вполне подходящее название для класса, унаследованного от Exception , поскольку ApplicationException является наследником класса Exception . Не стоит, однако злоупотреблять этим методом, пользуйтесь им разумно. К примеру, Button – вполне подходящее название для класса, производного от Control. Общее правило может быть, например, таким: «Если производный класс незначительно меняет свойства, поведение или внешний вид базового, используйте составные слова. Если класс значительно расширяет или меняет поведение базового, используйте новое существительное, отражающее суть производного класса». LinkLabel незначительно меняет внешний вид и поведение Label и, соответственно, использует составное имя.
  5. Используйте составное имя, когда класс принадлежит некоторой специфичной категории, например FileStream, StringCollection, IntegrityException. Это относится к классам, которые являются потоками (Stream), коллекциями (Collection, Queue, Stack), ассоциативными контейнерами (Dictionary), исключениями (Exception).
  6. Для классов-наследников, реализующих интерфейс IDictionary рекомендуется использовать тройное имя в виде To Dictionary. Вместо Dictionary можно использовать слово Map. Если это очевидно, можно опускать название значения. Примеры: StringToStringDictionary, StringToIntegerMap или KeywordMap. Переменным такого типа рекомендуется давать более конкретное семантическое название, например userToPasswordMap (user password), nameServiceDictionary (name service).
  7. Для базового класса, предназначенного не для прямого использования, а для наследования, следует использовать суффикс Base. Например, CollectionBase. Такие классы также стоит делать абстрактными.
  8. Коллекциям (реализующим интерфейс ICollection/IList) нужно давать имя в виде Collection. Переменным же этих типов лучше давать имена, являющиеся множественным числом от элемента. Например, коллекция кнопок должна иметь имя ButtonCollection, а переменная buttons.

Интерфейсы


  1. Используйте описывающее существительное, прилагательное или одно или несколько прилагательных и существительное для идентификатора интерфейса. Например, IComponent – это описывающее существительное, ICustomAttributeProvider – это конкретизированное прилагательными существительное, а IPersistable – это характеризующее прилагательное.
  2. Используйте стиль Паскаль для регистра букв.
  3. Используйте префикс I (заглавная i) для интерфейсов, чтобы уточнить, что тип является интерфейсом. Старайтесь избегать интерфейсов с двумя I в начале, например IIdentifiable. Попробуйте подобрать синоним, например IRecognizable.
  4. Для пары класс-интерфейс, в которой класс является некоторой стандартной или эталонной реализацией интерфейса, используйте одинаковые имена, отличающиеся только префиксом I для интерфейса. Например, IConfigurationManager и ConfigurationManager.

Атрибуты


  1. Класс, являющийся атрибутом, должен иметь суффикс Attribute. Ни один класс, атрибутом не являющийся, не должен иметь такого суффикса. Если семантика класса требует в названии слова что-то вроде Attribute, используйте синонимы, например Descriptor, Sign, Qualifier, Specifier, Declarator.

Перечисления


  1. Используйте стиль Паскаль для регистра букв в названии и значениях перечисления.
  2. Не используйте суффикс Enum в названии типа, вместо этого используйте более конкретный суффикс, например Style, Type, Mode, State. Чтобы код легче читался, используйте следующее правило: «Название перечисления + is + значение должно образовывать простое предложение». Например: BorderStyle.Single ( Border style is single, ThreadState.Aborted Thread state is “aborted”.
  3. Если перечисление обладает атрибутом [Flags], используйте множественное число или суффикс Flags.
  4. Записывайте значения перечисления на отдельных строках. Если элементы имеют определенный семантический порядок, описывайте их именно так, иначе используйте алфавитный порядок.
  5. Если значение одного из членов перечисления зависит от других, используйте булевы операции (&, |, ^), а не литеральные константы.
  6. Имена членов перечисления не должны содержать имени перечисления и другой не относящейся к конкретному значению информации.

  1. Непубличные поля (private, protected и protected internal) именуются в стиле Кэмел и начинаются с префикса _.
  2. Публичные поля именуются в соответствии с правилами именования свойств.
  3. Одна декларация должна содержать не более одного поля и должна располагаться на одной строке.

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

Методы


  1. Используйте глаголы или комбинацию глагола и существительных и прилагательных для имен методов.
  2. Используйте стиль Паскаль для регистра букв (вне зависимости от области видимости метода).

Свойства


  1. Используйте существительное или одно или несколько прилагательных и существительное для имени свойства.
  2. Используйте стиль Паскаль для регистра букв.
  3. В подходящих случаях используйте имя свойства, совпадающее с типом его значения. Одним из критериев для применения этого правила является наличие единственного свойства со значением некоторого (нетривиального) типа.
  4. Старайтесь избегать использования имен свойств, совпадающих с названиями каких-либо типов, если значения этих свойств не являются значениями этих типов. В этом случае будет трудно получить доступ к статическим членам типа или значениям перечисления. Например, при использовании конструкции public int Color < get; set; >, обращение Color.Xxx будет рассматриваться как получение свойства Color и затем доступ к свойствам или методам этого значения, которое в данном случае будет являться типа System.Int32.
  5. Рассмотрите возможность включения имени типа в идентификатор свойства, особенно если этот тип – перечисление. Например, OuterBorderStyle , BackColor, SocketFlags.

События


  1. Используйте суффикс EventHandler для делегатов, являющихся типами событий. Другие классы не должны использовать этот суффикс.
  2. Создавая событие в компонентах и control-ах, старайтесь описывать их по следующей схеме. Определите два параметра с именами sender и e. Параметр sender описывает объект, инициировавший событие, и всегда должен быть типа object, даже если возможно использование более конкретного типа. Второй параметр, e, должен содержать состояние и дополнительную информацию, соответствующую событию. Этот параметр должен быть конкретного типа, относящегося к событию.
  3. Делайте тип, описывающий связанную с событием информацию, производным от EventArgs, и используйте суффикс EventArgs . Другие классы, не описывающие информацию о событии, не должны использовать этот суффикс.
  4. Для имен событий старайтесь использовать глаголы, которые описывают производимое над объектом действие (например, Click, GotFocus или FontChanged).
  5. Не используйте суффиксы наподобие On, Before, After для идентификатора события. Используйте соответствующую форму глагола, например Closing перед закрытием и Closed после закрытия.
  6. При описании события также предоставляйте виртуальный protected-метод, который можно переопределить в классе-наследнике. Называйте такой метод OnXxx, где Xxx – имя события. В качестве параметров таких методов не следует передавать sender , так как – это всегда текущий объект (this).
  7. Пытайтесь подобрать стандартный делегат и название для своих событий. Например, если ваш элемент управления должен реагировать на нажатие кнопки мыши, следует использовать стандартное событие Click. Для элементов управления, обычно, такие события уже объявлены в базовом классе Control.

Параметры


  1. Из имени и типа параметра должны быть понятны его назначение и смысл.
  2. Используйте стиль Кэмел для регистра букв в имени параметра.
  3. Старайтесь избегать указания типа в имени параметра.
  4. Не усложняйте прототип метода «зарезервированными» параметрами, которые, возможно, будут использоваться в будущих версиях реализации. Если в будущем понадобится новый параметр, используйте перегрузку методов.
  5. Имена параметров не должны совпадать с именами членов класса. Если этого все же не удается избежать, используйте ключевое слово this для разрешения конфликтов (допустимо различие в регистре или префиксе _ для полей классов ).

Стиль кода


Оформление


  1. Используйте табуляцию , а не пробелы для отступов. В средах типа VS лучше использовать режим табуляции. Его можно настроить в диалоге Options -> Text Editor -> Ваш_любимый_язык ->Tabs: Indenting = Smart, Tabs = Keep Tabs. В общем, это настройки по умолчанию для многих языков.
  2. При форматировании текста (кроме отступа в начале строки) используйте пробелы. Для этого удобно использовать режим Virtual Space, который в VS 2002 настраивается в Options -> Text Editor -> Ваш_любимый_язык -> General.
  3. Избегайте строк длиннее 78 символов, переносите инструкцию на другую строку при необходимости.
  4. При переносе части кода инструкций и описаний на другую строку вторая и последующая строки должны быть отбиты вправо на один отступ (табуляцию).
  5. Оставляйте запятую на предыдущей строке так же, как вы это делаете в обычных языках (русском, например).
  6. Избегайте лишних скобок, обрамляющих выражения целиком. Лишние скобки усложняют восприятие кода и увеличивают возможность ошибки. Если вы не уверены в приоритете операторов, лучше загляните в соответствующий раздел документации.
  7. Не размещайте несколько инструкций на одной строке. Каждая инструкция должна начинаться с новой строки.

Пустые строки


  1. Используйте две пустые строки между логическими секциями в исходном файле.
  2. Используйте две пустые строки между объявлениями классов и интерфейсов.
  3. Используйте одну пустую строку между методами.
  4. Если переменные в методе объявляются отдельным блоком, используйте одну пустую строку между их объявлением и инструкцией, идущей за этим блоком.
  5. Используйте одну пустую строку между логическими частями в методе.

Пробелы в строке


  1. После запятой должен быть пробел. После точки с запятой, если она не последняя в строке (напр. в инструкции for), должен быть пробел. Перед запятой или точкой с запятой пробелы не ставятся.
  2. Все операторы должны быть отделены пробелом от операндов с обеих сторон.
  3. Логически связный блок регулярной структуры желательно форматировать в виде таблицы. При этом для выравнивания в таблице следует использовать пробелы, но не табуляцию. Среды типа VS автоматизируют процесс форматирования, вставляя пробелы или табуляции в соотвтествии с пользовательскими настройками. Будьте внимательны и проверяйте конечный результат, включая неотображаемые символы (для VS 2002 и старше – меню Edit->Advanced->View White Space).

ПРИМЕЧАНИЕ

Для упрощения работы можно использовать следующий трюк. Таблицу можно сформировать с помощью табуляции, выделить область прямоугольным выделением (Alt + курсор мыши вправо), а затем применить к этой области Edit->Advanced->Untabify Selection.

Добавить комментарий