Кодгайд: почему, зачем и как
- 9 февраля 2022
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
«Пора выбрать единый способ оформления кота» — подумали мы с Сашей, когда перестали понимать, что происходит. Мы выпускаем много обучающего материала, и пора привести его в порядок.
Конечно, первым делом мы пошли смотреть на текущие гайды. Каждый нас чем-то не устраивал, поэтому мы решили создать собственный. Мы внимательно изучили и взяли всё лучшее из:
- Code Guide by @mdo
- CSS Guidelines by Harry Roberts
- Idiomatic CSS by Nicolas Gallagher
- Primer Guidelines by GitHub
Так мы собрали репозиторий с нашим кодгайдом и отправили его в публичное плавание
EditorConfig
Мы используем два пробела для отступов, пустую строку в конце файла и не любим лишние пробелы. Чтобы следить за этими настройками мы используем EditorConfig. Для любого редактора можно поставить расширение, которое будет автоматически менять настройки редактора по нашим правилам, описанным в файле .editorconfig.
Почему мы используем два пробела, а не что-нибудь другое?
Мы готовим код для презентаций, демонстраций, интерактивных заданий. Настроить длину tab не всегда представляется возможным. И если в вебе нас могло спасти свойство tab-size (у которого до сих пор плохая поддержка), то для остального никаких нормальных способов настроить tab нет. Поэтому наш выбор остановился на пробелах.
Мы выбрали два, а не четыре пробела, чтобы иметь возможность умещать код в небольших пространствах, таких как демонстрации или интерактивные задания.
Читабельность и единообразие
Главное правило, которым мы руководствовались в создании гайда — читабельность и единообразие. Нам не хотелось, чтобы учеников вводили в заблуждение сокращения. Код в первую очередь должен быть читабельным.
Мы не сокращаем значения цвета. Мы не опускаем первый ноль в дробных значениях. Запись -.75 — вгоняет в уныние любого ученика.
О сокращениях мы долго спорили внутри команды, и аргументы защитников сокращений сводились к одному — так быстрее писать. Но я считаю, что если хотите ускорить набор кода, то вам нужно использовать специальные инструменты: Emmet для быстрого набора кода или автодополнение в редакторах. А сокращением должны заниматься роботы. Не отбирайте у них работу, их не для этого создавали.
Класс — главный атрибут
Мы решили всегда использовать класс первым атрибутом. Таким образом можно сразу идентифицировать те стили, которые будут применены к элементу. К этому решению быстро привыкаешь.
Порядок свойств по важности
Два принципа, которые мы преследовали: важность влияния на поведение и отображение элемента и избегание типовых ошибок. Для этого в первую очередь идут группы свойств позиционирования и блочной модели, а уже потом типографика, оформление и анимация. А вот пример типовой ошибки: в псевдоэлементах часто забывают свойство content, поэтому мы вынесли его на самый верх.
Впереди ещё много работы
Долгие баталии и споры по гайду закончены, и теперь мы будем планомерно обновлять контент по новым правилам.
Эта статья впервые написана в 2015 году.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
300кк в наносекунду
Игра, где нужно забрать своё и продержаться ещё один день.
- 7 марта 2024
9 книг по JavaScript для начинающих в 2024
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Все вокруг говорят, что книги — прошлый век. Но вовремя прочитанная хорошая книжка может здорово помочь в изучении нового языка или технологии, а то и вообще целиком объяснить какую-нибудь важную штуку. Например, какие бывают алгоритмы, или зачем нужен рефакторинг. К тому же, хоть фреймворки меняются каждый год, основы обычно долго не меняются.
Мы опросили знакомых разработчиков, узнали, что читают они сами, и предлагаем вам подборку хороших книг по JavaScript.
- 6 марта 2024
Объект URL в JavaScript: полный разбор
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Объект URL в JavaScript представляет URL-адрес и предоставляет удобные методы для работы с ним. Он позволяет анализировать, конструировать и декодировать URL-адреса.
Создать объект URL можно двумя способами:
Конструктор URL() — самый распространённый способ, в котором вы передаёте любой URL в виде строки в качестве аргумента.
const url = new URL("https://www.example.com/path?query=123#hash");
Использование window.location — это глобальный объект в браузерах, который содержит информацию о текущем URL.
const currentUrl = new URL(window.location.href);
- 23 января 2024
Генерация QR-кодов на JS в 4 шага. Node.js + qrcode
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Давайте сделаем простой REST API на Node.js и Express, который будет генерировать QR-коды для любой ссылки. Если у вас ещё не установлены Node.js и npm, установите их с официального сайта.
- 22 ноября 2023
ChatGPT не справляется
Притворитесь нейросетью и решите 101 задачку по JavaScript как можно быстрее.
- 2 ноября 2023
Знакомство с JavaScript
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Теперь, когда вы знаете, как создать структуру веб-страницы с помощью HTML и оформить ее стилями с помощью CSS, пришло время оживить её с помощью JavaScript (JS). JavaScript — это мощный язык программирования, который используется для создания интерактивных и динамических веб-сайтов.
Вы можете добавить JavaScript в ваш HTML-документ двумя способами:
Встроенный JavaScript: непосредственно в HTML-документ, в тегах <script>:
<script>
alert("Привет, мир!");
</script>
Внешний JavaScript: подключение внешнего .js файла к HTML-документу:
<script src="script.js"></script>
- 1 ноября 2023
Событие onclick в JS на примерах
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Интерактивность — ключевой компонент любого современного сайта. И одним из наиболее часто используемых событий для создания интерактивности является событие onclick. В этой статье мы подробно разберёмся, что такое событие onclick, как его использовать и приведем примеры применения.
Событие onclick — это событие JavaScript, которое активируется, когда пользователь кликает на определенный элемент страницы. Это может быть кнопка, ссылка, изображение или любой другой элемент, на который можно нажать.
- 30 октября 2023
Как перевернуть сайт. Самая короткая инструкция
Не представляем, зачем это может понадобиться, но не могли пройти мимо.
Никакой магии. Мы вызываем JavaScript-функцию rotateBody(), которая применяет свойство transform с значением rotate(180deg) к элементу <body>. Когда вы нажмете на кнопку «Перевернуть», всё, что находится внутри <body> будет повернуто на 180 градусов (то есть, встанет вниз головой)
function rotateBody() {
document.body.style.transform = 'rotate(180deg)';
}
<button onclick="rotateBody()">Перевернуть</button>
Но такой код повернёт страницу только один раз. Если нужно, чтобы она возвращалась обратно при втором клике, усложним код:
let isRotated = false;
function rotateBody() {
if (isRotated) {
document.body.style.transform = 'rotate(0deg)';
document.body.style.direction = "ltr";
} else {
document.body.style.transform = 'rotate(180deg)';
document.body.style.direction = "rtl";
}
isRotated = !isRotated;
}
Надеемся, вы прочитали это описание до того, как нажать на кнопку.
- 25 октября 2023
Как узнать геолокацию: Geolocation API
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Geolocation API позволяет сайтам запрашивать, а пользователям предоставлять свое местоположение веб-приложениям. Геолокация может использоваться для выбора города в интернет-магазине, отображения пользователя на карте или навигации в ближайший гипермаркет.
Основной метод Geolocation API — getCurrentPosition(), но есть и другие методы и свойства, которые могут пригодиться.
- 16 октября 2023
Что такое localStorage и как им пользоваться
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
localStorage — это место в браузере пользователя, в котором сайты могут сохранять разные данные. Это как ящик для хранения вещей, которые не исчезнут, даже если вы выключите компьютер или закроете браузер.
До localStorage разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.
- 12 октября 2023