part 1
Было бы неплохо записать
Сложно
Общая информация
Глава
Возможно вам это не нужно
Желтый текст - это ссылки
v2
Про фронтенд в целом
это программист, занимающийся разработкой пользовательского интерфейса, то есть внешней публичной части сайта в браузере.
Главная задача фронт-энд разработчика — сделать максимально удобным взаимодействие пользователей с сайтом или веб-приложением.
О разработчиках
плохие практики
Валидатор формата (от англ. validator) — компьютерная программа, которая проверяет соответствие документа, определённому формату, проверяет синтаксическую корректность.
По мимо прочего из за контентных данных пользователя
Хорошие практики
постепенная деградация — подход, при котором интерфейс сайта деградирует для старых браузеров, где не поддерживаются какие-то из используемых технологий.
При этом ущерб для пользователя по возможности смягчается.
Например: цвет подложки вместо градиента, растровая графика вместо векторной, проигрывание видео с помощью плагина. Встречается также более буквальный перевод «изящная деградация».
прогрессивное улучшение — подход, при котором все браузеры получают одинаковую базовую функциональность, но в современных браузерах эта функциональность расширяется в соответствии с поддержкой новых технологий.
Например: градиенты, векторная графика, воспроизведение видео.
БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки.
Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».
БЭМ используется в Яндексе для разработки фронтенда
<!-- index.html --/>
<div class="block">
<div class="block__elem1">
<div class="block__elem2"></div>
</div>
<div class="block__elem3"></div>
</div>
<!-- Блок `search-form` имеет булевый модификатор `focused` -->
<form
class="search-form search-form_focused"
>
<input class="search-form__input">
<!-- Элемент `button` имеет булевый модификатор `disabled` -->
<button
class="
search-form__button
search-form__button_disabled
"
>
Найти
</button>
</form>
/* index.css */
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.
Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока).
Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.
препроце́ссор (preprocessor) - инструмент, преобразующий код из одного синтаксиса в другой
// style.css
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
// style.less
@import "library"; // library.less
@import "typo.css";
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm
#header {
color: @light-blue;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
Вкратце, пакетом в Node.js называется один или несколько JavaScript-файлов, представляющих собой какую-то библиотеку или инструмент.
npm (аббр. node package manager) — это стандартный менеджер пакетов, автоматически устанавливающийся вместе с Node.js.
Он используется для скачивания пакетов из облачного сервера npm, либо для загрузки пакетов на эти сервера.
Файл package.json содержит в себе информацию о вашем приложении: название, версия, зависимости и тому подобное.
Любая директория, в которой есть этот файл, интерпретируется как Node.js-пакет, даже если вы не собираетесь публиковать его.
$ npm install canvas-chart
{
"name": "canvas-project",
"version": "0.1.0",
"devDependencies": {
"canvas-chart": "~1.3.0"
}
}
контроль качества
stylelint
var a,w=
document.createTreeWalker(document,NodeFilter.SHOW_TEXT);
while(a=w.nextNode()){
if(a.textContent.trim().length)
a.textContent='Одиннадцатиклассница пошла посмотреть на достопримечательность, она шла долго, несколько строчек, пока не пришла'
}
Выводы