Код гайд от html academy

htmlacademy / codeguide Goto Github PK

В качестве референса для основных цветов (текст, фоны) — темная тема редактора в тренажерах Академии.

• определить цветовые решения в дизайне страниц через CSS custom properties;
• prefers-color-scheme для автоматического определения типа темы (caniuse);

window.matchMedia('(prefers-color-scheme: dark)').matches

• Кнопка-«тогглер» для ручной смены темы в шапке сайта. По клику тогглим класс у body c переопределенными кастомными свойствами. Как должна выглядеть эта кнопка — вопрос открытый. Было бы неплохо использовать какую-то тематическую иконку, возможно «морда Кекса» или другой маскот.
  Возможно, что-то нужно будет сделать и с изображением Кекса в шапке. А может и так сойдет.

Т.к. уже использован PrismJS, предлагаю использовать готовое решение от автора, а именно тему TOMORROW NIGHT.

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

Добавить кодгайд по JS

Код в ветке feature/js-codeguide. Файл называется /app/templates/partials/js/js-rules.hbs

[.htmlhintrc]Правило id-class-value

Студент использовал codestyle Академии .htmlhintrc https://github.com/htmlacademy/codeguide/blob/master/.htmlhintrc . И VS Code ругается на правило “id-class-value”: “dash”, хотя классы указываются верно.

Конфиг PostCSS sorting не работает.

В новой версии postCSS sorting теперь по другому работает конфиг!

Доработка JS-кодгайда

Почему 6 символов вместо 3 при указании цвета?

До сих пор не понимаю, в чём смысл писать 6 символов вместо 3 при указании цвета в стилях.

При использовании трёх же мы быстрее можем воспринять сколько там символов: #fff вместо #ffffff , читаемость на лицо. Студентов, выпускающихся из академии много и почему бы им не прививать более читаемый и распространённый вариант использования.

[html-css] Синтаксис — Опечатка

http://codeguide.academy/html-css.html
Необязательные закрывающие теги (например, или ) не пропускаются.

Предложения по добавлениям

Хотелось бы видеть соглашение для картинок под ретину, договоренности по иконкам (спрайты раст/svg), семантике кода, связыванию с html c js для работы с dom

Привести порядок свойств

Привести порядок свойств в демках и правило по сортировке свойств в соответсвии с критериями

Не рабочая ссылка в README

Привет. Спасибо за конфиг.
Не рабочая ссылка у Primer Guidelines by GitHub: https://primer.github.io/guidelines/
Не знаю куда она вела, но может быть сюда https://styleguide.github.com/primer/principles/ ?

[HTML-гайд] Перенос атрибутов

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

Этот пункт упускают очень многие style-гайды (гугловый в том числе)

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

div id pl-s">myComponentItem32" class pl-s">my-component__item my-component__item--dashed" data-ng-click pl-s">loadSomething();" data-ng-class pl-s"> " title pl-s">Lorem Ipsum Dolor. " > Lorem Ipsum Dolor Sit. div>

Пример выше часто используется в React-комьюнити

attr-lowercase

Добрый день. Извините за беспокойство, есть предложение изменить .htmlhintrc :

"attr-lowercase": ["viewBox", "preserveAspectRatio"],

Может привести к единому виду последовательность title и кодировки?

Тут кодировка снизу

Тут кодировка сверху

Предложение от наставников конфиг CSSComb для Sublime

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

Если надо рабочий конфиг CSSComb для плагина Саблайма на основе CSSComb конфига Академии, у меня есть, пишите.
А то там если конфиг Академии скопировать, то плагин ерроры выдаёт.

Доработать кодгайд под новые JavaScript-критерии

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

• Правила, которые нужно расписать (по возможности переиспользовать тексты критериев)
  • Переменные названы по-английски, в единственном числе
  • Переменные, содержащие коллекции, именуются во множественном числе
  • Функции именуются с глагола
  • Константы записываются в нотации UPPER_SNAKE_CASE
  • Классы, функции-конструкторы и компоненты записываются в нотации PascalCase
  • Имена защищённых полей начинаются с подчёркивания, приватных — с решётки
  • Имена функций, переменных, параметров, свойств и методов записываются в нотации camelCase
  • В названии переменных не используется тип данных (нет Венгерской нотации)
  • Название методов и свойств объектов не содержит название объектов. Нужно добавить про классы и их свойства и методы
  • Из названия обработчика события следует, что это обработчик. В Реакте может быть только on -схема, нужно придерживаться её везде
  • Константы нигде в коде не переопределяются
  • Код всех JS-файлов соответствует рекомендованной структуре. Нужно учесть особенность классов на JS-2 и Реакта

  Добавить ссылки на конфиги на сайт

  Сейчас про конфиги можно узнать только из репозитория. На сайте же про них ничего нет

  Идеи по улучшению сервиса

  • pdf. Для чтения из оффлайна
  • PWA. Ещё один способ чтения в оффлайне
  • Тёмная тема
  • Перевод на гриды
  • Поправить по LightHouse и core web witals

  Источник

  Кодгайд: почему, зачем и как

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

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

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

  EditorConfig

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

  Почему мы используем два пробела, а не что-нибудь другое?

  Мы готовим код для презентаций, демонстраций, интерактивных заданий. Настроить длину tab не всегда представляется возможным. И если в вебе нас могло спасти свойство tab-size (у которого до сих пор плохая поддержка), то для остального никаких нормальных способов настроить tab нет. Поэтому наш выбор остановился на пробелах.

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

  Читабельность и единообразие

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

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

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

  Класс — главный атрибут

  Мы решили всегда использовать класс первым атрибутом. Таким образом можно сразу идентифицировать те стили, которые будут применены к элементу. К этому решению быстро привыкаешь.

  Порядок свойств по важности

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

  Впереди ещё много работы

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

  Эта статья впервые написана в 2015 году.

  «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

  Источник