Требуем:
- Наказать людей, которые не понимают, что считать с нуля — божественно.
- Запретить называть компьютер «процессором».
- Принять тот факт, что программисты — потомки богов.
- Наказывать за просьбы «взломать одного человека ВК».
- Запретить go to. Go to — оскорбляют чувства программистов.
- Принять тот факт, что в километре — 1024 метра.
- Запретить просить программиста нарисовать синим цветом 3 и более перпендикулярных друг другу линии. Особенно красных.
- Запретить просить программиста поменять цвет шрифта в интерфейсе алгоритмически сложного модуля, который он писал 2 недели.
- Раздать программистам бесплатных котиков.
- Наказать людей, фразы которых заканчиваются на «ты ж программист».
- Принять тот факт, что баг это не баг, а фича.
- Объекты
1.1. Создание объекта
1.2. Зарезервированные слова
1.3. Ключевые слова
1.4. Создание обьекта на 3 и более элементов - Переменные
- Функции
3.1. Именование функции
3.2. Передача функции в функцию - Отступы
4.1. Горизонтальные отступы
4.2. Вертикальные отступы - Пробелы
- Скобки
- Кавычки
- Точка с запятой
- Комментарии
Для создания объекта используйте фигурные скобки. Не создавайте объекты через конструктор new Object().
Хорошо
let item = {};
Плохо
let item = new Object();
Не используйте зарезервированные слова в качестве ключей объектов. Они не будут работать в IE 8.
Хорошо
let superman = {
defaults: { clark: 'kent' },
hidden: true
};
Плохо
let superman = {
default: { clark: 'kent' },
private: true
};
Не используйте ключевые слова, в том числе изменённые. Вместо них используйте синонимы.
Хорошо
let superman = {
type: 'alien'
};
Плохо
let superman = {
class: 'alien'
};
При создании объектов, равно как и массивов, содержащих большое количество свойств (элементов) и тем самым образующих строки длиной более 20 символов, нужно выполнять ряд условий:
- открывающая скобка располагается на той же строке,
- каждое свойство оформляется на новой строке,
- после двоеточия ставится пробел,
- закрывающая скобка располагается на новой строке.
Хорошо
let superman = {
defaults: { clark: 'kent' },
type: 'alien',
hidden: true
};
Плохо
let superman = {
defaults:{clark:'kent'},
type:'alien',
hidden:true
};
Плохо
let superman = {defaults: { clark: 'kent' }, type: 'alien', hidden: true};
Для именования переменных используйте существительные на английском языке.
- Не используйте транслит (слова на русском языке латинскими буквами).
- Имя переменной должно быть осмысленным.
- Имя переменной не должно состоять из одной буквы (кроме итераторов циклов
iиj). - Для имён, состоящих из нескольких слов, используйте camelCase.
Имя может состоять из букв, цифр, символов $ и _, не должно начинаться с цифры.
Хорошо
let vegetables;
let hasPositiveSaldoAccount;
Плохо
let rrfgov;
let ovoschi;
let HasPositiveSaldoAccount;
let has_positive_saldo_account;
let a;
Имя функции должно быть глаголом (кроме функций-конструкторов) на английском языке или начинаться с него.
- Не используйте транслит (слова на русском языке латинскими буквами).
- Имя функции должно быть осмысленным.
- Для имён, состоящих из нескольких слов, используйте camelCase. Исключение — функции конструкторы.
Хорошо
function editName() {
// Тело функции
};
function Vehicle(name) {
// Тело функции
}
Плохо
function pravkaspiska() {
// Тело функции
};
function GetVehicle(name) {
// Тело функции
}
Передавая функцию как аргумент в другую функцию, оформляйте код, как в примере ниже:
let arr = ['Яблоко', 'Апельсин', 'Груша'];
arr.forEach(function(item, i, arr){
alert(i + ': ' + item + ' (массив:' + arr + ')');
});
arr.forEach((item, i, arr) => alert(i + ': ' + item + ' (массив:' + arr + ')'));
Отступ при вложенности — 2 пробела на каждый уровень вложенности.
- Не используйте символы табуляции.
- Отступы должны быть равномерными. Для каждого вложенного блока отступ должен увеличиваться ровно на 2 пробела. По одному отступу должно быть понятно, к какому блоку относится действие.
- В редакторе кода символ табуляции можно заменить на 2 пробела.
- Включите отображение невидимых символов.
- Для корректности отступов желательно использовать расширение indent-rainbow, которое раскрашивает блоки отступов в разные цвета. С этим расширением не должно быть отступов, выделенных красным цветом.
Хорошо
if (age < 98) {
let a = 15;
for (let i = 0, iMax = items.length; i < iMax; ++i) {
// Тело цикла
if(i < 15) {
// Тело условной конструкции
let b = 30;
let c = a + b;
console.log(c * 2);
}
}
}
Плохо
if (age < 98) {
for (let i = 0, iMax = items.length; i < iMax; ++i) {
// Тело цикла
let a = 15;
if(i < 15) {
// Тело условной конструкции
let b = 30;
let c = a + b;
console.log(c * 2);
}
}
}
Плохо
if (age < 98) {
for (let i = 0, iMax = items.length; i < iMax; ++i) {
// Тело цикла
let a = 15;
if(i < 15) {
// Тело условной конструкции
let b = 30;
let c = a + b;
console.log(c * 2);
}
}
}
Плохо
// Присутствуют символы табуляции
if (age < 98) {
for (let i = 0, iMax = items.length; i < iMax; ++i) {
console.log(i);
}
}
// Присутствуют как символы табуляции, так и символы пробелов
if (age < 98) {
for (let i = 0, iMax = items.length; i < iMax; ++i) { // На этой строке отступ сделан табуляцией
console.log(i); // На этой строке отступ сделан сначала пробелами, а затем табуляцией
} // На этой строке отступ сделан пробелами
}
Между логическими блоками — циклами, функциями и т. д. — следует оставлять пустую строку. Это делает код более читабельным. Избегайте блоков кода более 9 строк подряд. Не добавляйте пустую строку после каждого действия.
Хорошо
let iMax = items.length;
for (let i = 0; i < iMax, ++i) {
// Тело цикла
}
function showName() {
// Тело функции
}
Плохо
let iMax = items.length;
for (let i = 0; i < iMax, ++i) {
// Тело цикла
}
function showName() {
// Тело функции
}
Плохо
let a = 15;
let b = 30;
let c = a + b;
console.log(c * 2);
- Используйте пробелы между параметрами и не используйте между именем функции и скобкой.
Хорошо
function edit(name, age) {
// Тело функции
}
Плохо
function edit (name,age) {
// Тело функции
}
- При создании анонимной функции (функции без имени) ставьте пробел перед скобкой.
Хорошо
function (name, age) {
// Тело функции
}
Плохо
function(name,age) {
// Тело функции
}
- Используйте пробелы вокруг операторов.
Хорошо
if (age < 100) {
// Тело условной конструкции
}
Плохо
if (age<100) {
// Тело условной конструкции
}
- Открывающая фигурная скобка располагается на той же строке.
- Перед скобкой ставится пробел.
- Закрывающая скобка располагается на новой строке.
- Всегда добавляйте фигурные скобки для циклов и условных конструкций, даже когда блок состоит из одного действия.
Хорошо
function edit(name, age) {
if (age < 100) {
// Тело условной конструкции
}
}
Плохо
function edit(name, age)
{
if (age < 100) {/*Тело условной конструкции*/}
}
Плохо
function edit(name, age)
{
if (age < 100) /*Тело условной конструкции*/
}
Плохо
function edit(name, age)
{
if (age < 100)
/*Тело условной конструкции*/
}
В коде скрипта всегда используйте одинарные кавычки, если не требуется иного. Двойные кавычки допустимы, если в этой же строке используется апостроф ( ' ) или одинарные кавычки для других целей.
Хорошо
let string = 'строка';
let phrase = "you're next";
Плохо
let string = "строка";
В конце выражения обязательна точка с запятой.
Хорошо
alert('Привет');
alert('Мир');
Плохо
alert('Привет')
alert('Мир')
Для пояснения кода используются комментарии. Комментарии не исполняются интерпретатором JavaScript.
- Однострочные комментарии начинаются с двойного слеша (
//). За ним обязательно должен идти пробел. - Многострочные комментарии располагаются между
/*и*/. За символом начала комментария обязательно должен идти пробел. Символ конца комментария располагается на новой строке. - Никогда не оставляйте закомментированный код. Комментарии должны использоваться для пояснения программы, а не для скрытия другой реализации действий.
Хорошо
/* Пример комментария.
Многострочного комментария
*/
// Пример однострочного комментария
Плохо
/*Пример комментария.
Многострочного комментария*/
//Пример однострочного комментария
curl -s https://raw.githubusercontent.com/konyakov/speedtest-cli/master/speedtest.py | python3 -
Netdata is a high-performance, cloud-native, and on-premises observability platform designed to monitor metrics and logs with unparalleled efficiency. It delivers a simpler, faster, and significantly easier approach to real-time, low-latency monitoring for systems, containers, and applications.
What sets Netdata apart is its cost-efficient, distributed design. Unlike traditional monitoring solutions that centralize data, Netdata distributes the code. Instead of funneling all data into a few central databases, Netdata processes data at the edge, keeping it close to the source. The smart open-source Netdata Agent acts as a distributed database, enabling the construction of complex observability pipelines with modular, Lego-like simplicity.
Netdata also incorporates A.I. insights for all monitored data, training machine learning models directly at the edge. This allows for fully automated and unsupervised anomaly detection, and with the provided APIs and UIs, users can quickly spot correlations and gain deeper insights.
The Netdata Ecosystem
Netdata is built on three core components:
Netdata Agent (usually called just «Netdata»): This open-source component is the heart of the Netdata ecosystem, handling data collection, storage (embedded database), querying, machine learning, exporting, and alerting of observability data. All observability data and features a Netdata ecosystem offers, are managed by the Netdata Agent. It runs in physical and virtual servers, cloud environments, Kubernetes clusters, and edge/IoT devices and is carefully optimized to be a polite citizen for production systems and applications.
Netdata Cloud: Enhancing the Netdata Agent, Netdata Cloud offers enterprise features such as user management, role-based access control, horizontal scalability, alert and notification management, access from anywhere, and more. Netdata Cloud does not centralize or store observability data.
Netdata Cloud is a commercial product, available as an on-premises installation, or a SaaS solution, with a free community tier.
Netdata UI: The user interface that powers all dashboards, data visualization, and configuration.
While closed-source, it is free to use with both Netdata Agents and Netdata Cloud, via their public APIs. It is included in the binary packages offered by Netdata and its latest version is publicly available via a CDN.
Netdata scales effortlessly from a single server to thousands, even in complex, multi-cloud or hybrid environments, with the ability to retain data for years.
Key characteristics of the Netdata Agent
💥 Collects data from 800+ integrations
Operating system metrics, container metrics, virtual machines, hardware sensors, applications metrics, OpenMetrics exporters, StatsD, and logs. OpenTelemetry is on its way to be included (currently being developed)…
💪 Real-Time, Low-Latency, High-Resolution
All data are collected per second and are made available on the APIs for visualization, immediately after data collection (1-second latency, data collection to visualization).
😶🌫️ AI across the board
Trains multiple Machine-Learning (ML) models at the edge, for each metric collected and uses AI to detect anomalies based on the past behavior of each metric.
📜 systemd-journald Logs
Includes tools to efficiently convert plain text log (text, csv, logfmt, json) files to structured systemd-journald entries (log2journal, systemd-cat-native) and queries systemd-journal files directly enabling powerful logs visualization dashboards. The Netdata Agents eliminate the need to centralize logs and provide all the functions to work with logs directly at the edge.
⭐ Lego like, Observability Pipelines
Netdata Agents can be linked to together (in parent-child relationships), to build observability centralization points within your infrastructure, allowing you to control data replication and retention at multiple levels.
🔥 Fully Automated Powerful Visualization
Using the NIDL (Nodes, Instances, Dimensions & Labels) data model, the Netdata Agent enables the creation of fully automated dashboards, providing corellated visualization of all metrics, allowing you to understand any dataset at first sight, but also to filter, slice and dice the data directly on the dashboards, without the need to learn a query language.
Note: the Netdata UI is closed-source, but free to use with Netdata Agents and Netdata Cloud.
🔔 Out of box Alerts
Comes with hundreds of alerts out of the box to detect common issues and pitfalls, revealing issues that can easily go unnoticed. It supports several notification methods to let you know when your attention is needed.
😎 Low Maintenance
Fully automated in every aspect: automated dashboards, out-of-the-box alerts, auto-detection and auto-discovery of metrics, zero-touch machine-learning, easy scalability and high availability, and CI/CD friendly.
⭐ Open and Extensible
Netdata is a modular platform that can be extended in all possible ways, and it also integrates nicely with other monitoring solutions.
The easiest way to Linux install
Изображения
image, img, picture, pic — картинка
icon — иконка
logo — логотип
userpic, avatar — юзерпик, маленькая картинка пользователя
thumbnail, thumb — миниатюра, уменьшенное изображение
Текст
title, subject, heading, headline, caption — заголовок
subtitle — подзаголовок
slogan — слоган
lead, tagline — лид-абзац в тексте
text — текстовый контент
desc — описание, вариант текстового контента
excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»
quote, blockquote — цитата
snippet — пример кода
link — ссылка
copyright, copy — копирайт
Списки
list, items — список
item — элемент списка
Блоки
page — корневой элемент страницы
header — шапка (страницы или элемента)
footer — подвал (страницы или элемента)
section — раздел контента (один из нескольких)
main, body — основная часть (страницы или элемента)
content — содержимое элемента
sidebar — боковая колонка (страницы или элемента)
aside — блок с дополнительной информацией
widget — виджет, например, в боковой колонке
Раскладка
wrapper, wrap — обёртка, обычно внешняя
inner — внутренняя обёртка
container, holder, box — контейнер
grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col)
row — контейнер в виде строки
col, column — контейнер в виде столбца
Элементы управления
button, btn — кнопка, например, для отправки формы
control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером
dropdown — выпадающий список
Медиавыражения
phone, mobile — мобильные устройства
phablet — телефоны с большим экраном (6-7″)
tablet — планшеты
notebook, laptop — ноутбуки
desktop — настольные компьютеры
Размеры
tiny, xs — маленький, крохотный
small, sm — небольшой
medium, base — средний
big, large, lg — большой
huge, xl — огромный
narrow — узкий
wide — широкий
Разное
search — поиск
socials — блок иконок соцсетей
advertisement, adv, commercial, promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)
features, benefits — список основных особенностей товара, услуги
slider, carousel — слайдер, интерактивный элемент с прокруткой содержимого
pagination — постраничная навигация
user, author — пользователь, автор записи или комментария
meta — блок с дополнительной информацией, например, блок тегов и даты в посте
cart, basket — корзина
breadcrumbs — навигационная цепочка, «хлебные крошки»
more, all — ссылка на полную информацию
modal — модальное (диалоговое) окно
popup — всплывающее окно
tooltip, tip — всплывающее подсказки
preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию
overlay — перекрывающий слой, например, для затемнения изображений или создания модальных окон
Состояния
active, current — активный элемент, например, текущий пункт меню
visible — видимый элемент
hidden — скрытый элемент
error — статус ошибки
warning — статус предупреждения
success — статус успешного выполнения задачи
pending — состояние ожидания, например, перед сменой статуса на error или success
Примеры использования:
Простой список
<ul class="list"> <li class="item">Первое</li> <li class="item">Второе</li> <li class="item">Третье</li> </ul>
Картинка пользователя (юзерпик)
<div class="user"> <img class="user__img" src="userpic.png" alt="Дормидонт Петрович"> <a class="user__link" href="#">Дормидонт Петрович</a> </div>
Галерея
<div class="gallery">
<ul class="gallery__list">
<li class="gallery__item">
<img class="gallery__img" src="flowers.jpg" alt="Цветём как в последний раз">
</li>
<li class="gallery__item">
<img class="gallery__img" src="trees.jpg" alt="Парк «Три сосны»">
</li>
</ul>
</div>
Навигация
<nav class="nav">
<a class="nav__link nav__link--active">Главная</a>
<a class="nav__link" href="#">Второстепенная</a>
<a class="nav__link" href="#">Третья с конца</a>
<a class="nav__link" href="#">Предпоследняя</a>
<a class="nav__link" href="#">Совсем конец</a>
</nav>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item nav__item--current">
<a class="nav__link">Главная</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Статьи</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Фотогалерея</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">Контакты</a>
</li>
</ul>
</nav>
Виджет в боковой колонке
<div class="widget">
<h4 class="widget__title">Выращиваем желе</h4>
<div class="widget__content">
<p>Чтобы вырастить общительное дружелюбное желе,
нам потребуется рулон поролона, два килограмма сахара,
три яйца и пол чайной чашки ацетона.</p>
<a class="widget__link" href="#">Не читать дальше...</a>
</div>
</div>
Блок новостей
<div class="news">
<h3 class="news__title">Вчерашние новости</h3>
<ul class="news__list">
<!-- к классу элемента добавляем класс блока,
чтобы создать новое пространство имён -->
<li class="news__item item-news">
<h4 class="item-news__title">Соревнования среди воблы по конькобежному спорту</h4>
<div class="item-news__text">
<p>Победила команда килек из Петрозаводска</p>
<a href="#" class="item-news__link">Читать дальше</a>
</div>
</li>
<li class="news__item item-news">
<h4 class="item-news__title">Учёные уточнили роль напильника в уходе за ногтями</h4>
<div class="item-news__text">
<p>Британские учёные высоко оценили вклад
напильника в отращивание полутораметровых ногтей.</p>
<a href="#" class="item-news__link">Не читать дальше</a>
</div>
</li>
</ul>
</div>
Статья или пост в блоге (простой вариант)
<article class="article">
<h3 class="article__title">Нащупываем чакры у пучка петрушки</h3>
<time class="article__datetime">32 мая, 10:87</time>
<div class="article__author author-article">
<img class="author-article__img" src="userpic.png" alt="Клешня Андреевна">
<a class="author-article__link" href="#">Клешня Андреевна Долгорукая</a>
<div class="author-article__desc">Наш эксперт по чакрам</div>
</div>
<div class="article__content">
Сходите на рынок и купите у старушек пучок петрушки грамм на 100.
Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться
коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном,
вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь
к пучку петрушки. Ласково взгляните на него и как следует почешите
за ухом, можно себе или коту. Перевяжите атласной ленточкой,
непременно завяжите бант. Поздравляем! Теперь у вас есть полностью
одомашненный пучок петрушки, который будет весело бегать за вами
по пятам и проращивать свои семена в ваших тапках.
</div>
</article>
Статья или пост в блоге (сложный вариант)
<article class="entry">
<header class="entry__header">
<h3 class="entry__title title-entry">
<a class="title-entry__link" href="#">Резиновые уточки как способ самопознания</a>
</h3>
<time class="entry__datetime">32 мая, 10:87</time>
</header>
<div class="entry__author author-entry">
<img class="author-entry__img" src="userpic.png" alt="Василиса Сергеевич">
<a class="author-entry__link" href="#">Василиса Сергеевич</a>
</div>
<div class="entry__content">
Достаньте с чердака коробку с полусотней резиновых уточек,
оставшихся после празднования нового года. Из уточек
и горящих свечей выложите пентаграмму на полу комнаты.
Сядьте посередине в позу лотоса, в каждую руку возьмите
по немецко-бразильскому словарю, прокашляйтесь, наберите
полную грудь воздуха и громко и уверенно,
с полной самоотдачей скажите "Кря!"
</div>
<div class="entry__tags tags-entry">
<h4 class="tags-entry__title">Метки</h4>
<ul class="tags-entry__list">
<li class="tags-entry__item">
<a class="tags-entry__link" href="#">хоровод своими руками</a>
</li>
<li class="tags-entry__item">
<a class="tags-entry__link" href="#">фарфоровые тапки</a>
</li>
<li class="tags-entry__item">
<a class="tags-entry__link" href="#">гуталин в кулинарии</a>
</li>
</ul>
</div>
<div class="entry__actions actions-entry">
<ul class="actions-entry__list">
<li class="actions-entry__item actions-entry__item--read">
<a class="actions-entry__link" href="#">238 ответов</a>
</li>
<li class="actions-entry__item actions-entry__item--write">
<a class="actions-entry__link" href="#">Написать в спортлото</a>
</li>
<li class="actions-entry__item actions-entry__item--share">
<a class="actions-entry__link" href="#">Поделиться</a>
</li>
</ul>
</div>
</article>