Web development: шпаргалка для фронтенд разработчика

HTML / CSS

Search wordsадаптивная кроссбраузерная верстка, html header main aside footer

Определения от skillbox.ru :

HTML (от английского HyperText Markup Language) — это язык гипертекстовой разметки страницы. Он используется для того, чтобы дать браузеру понять, как нужно отображать загруженный сайт.
Язык состоит из тегов — это своеобразные команды, которые преобразовываются в визуальные объекты в браузере пользователя.

CSS (Cascading Style Sheets, каскадные таблицы стилей) — язык описания внешнего вида HTML-документа. Это одна из базовых технологий в современном интернете. Практически ни один сайт не обходится без CSS, поэтому HTML и CSS действуют в единой связке. Каскадные таблицы стилей работают с HTML, но это совершенно другой язык. HTML структурирует документ и упорядочивает информацию, а CSS взаимодействует с браузером, чтобы придать документу оформление.

50 вопросов по CSS. Собеседование на HTML верстальщика (Ulbi TV): https://www.youtube.com/watch?v=4YRG6cMAASI

Семантические элементы HTML: https://www.w3schools.com/html/html5_semantic_elements.asp

Здесь:

• <article> определяет независимое, автономное содержимое (Статья должна иметь смысл сама по себе, ее возможно распространять независимо от остальной части веб-сайта).
• <aside> определяет некоторое содержимое помимо содержимого, в котором он размещен (например, боковая панель). Контент <aside> должен быть косвенно связан с окружающим контентом.
• <footer> определяет нижний колонтитул для документа или раздела.
• <header> - контейнер для вводного контента или набор навигационных ссылок.
• <main> определяет основное содержание документа.
• <mark> определяет выделенный / подсвеченный текст.
• <nav> определяет набор навигационных ссылок.
• <section> определяет раздел в документе (Раздел представляет собой тематическую группу контента, обычно с заголовком).
• <details> определяет дополнительные сведения, которые пользователь может просматривать или скрывать.
• <summary> определяет видимый заголовок для элемента <details>.
• <figure> определяет автономный контент, такой как иллюстрации, диаграммы, фотографии, списки кодов и т. д.
• <figcaption> определяет заголовок для <figure> элемента.
• <time> определяет дату / время.

BEM

Optional. But this would make You css code more clean :)

Определение от skillfactory.ru:

БЭМ — компонентный подход к веб-разработке, в основе которого лежит принцип разделения интерфейса на независимые блоки, а также набор интерфейсных библиотек, фреймворков и вспомогательных инструментов. Расшифровывается как «Блок, Элемент, Модификатор».

В основе БЭМ — соглашение по именованию, которое делает имена CSS-классов максимально информативными для разработчиков и позволяет многократно использовать компоненты. Подход упрощает командную работу, масштабирование и поддержку проектов.

Скриншоты из видео от loftschool.com:

SASS / LESS

Search wordsпрепроцессоры

Any one from this would be great!

SASS (Syntactically Awesome Stylesheets)

Это то шаблонизатор, предназначенный для упрощения создания CSS-кода

Проще говоря, SASS – это такой язык, код которого специальной программой транслируется в обычный CSS код. Браузеры, не понимают этого языка, поэтому для взаимопонимания нужно использовать компилятор. Его задача: привести SASS в понятный классический CSS, который будет распознан любым браузером.

Нужен, чтобы: упростить объёмный css код

Что такое SCSS?

У языка есть два основных синтаксиса: SASS и более новый SCSS. В SASS-синтаксисе нет фигурных скобок, вложенность элементов в нем реализована при помощи отступов, а стилевые правила обязательно отделены новыми строками. SCSS или Sassy CSS (*SASS-подобный CSS) - максимально приближен к CSS, являясь более привычным для большинства разработчиков, но в тоже время он обладает всеми преимуществами его предыдущей версии SASS — наличие переменных, миксинов, вложенностей и наследования селекторов.

Pug

Pug — это шаблонизатор и html-препроцессор, написанный на javascript для node.js.

Видеоурок Loftschool в рамках курса Webpack 2
https://loftblog.ru/material/15763/

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

JavaScript / ES6+

Что должен знать Junior Frontend разработчик в 2021 | Roadmap + Чеклист
https://www.youtube.com/watch?v=0WJLkakbgYw

• Block scope:  понимание блочной области видимости
• Var, let, const:  разница между ними
• Arrow function: поведение this внутри стрелочной функции
• Async code: как работать с асинхронным кодом (Promises)
• Fetch API: запросы на сервер, получение данных и их обработка
• Events:  как работают события в JS (event loop)
• DOM: что такое DOM и что в нем хранится
• OOP: объектно-ориентированное программирование (prototype)

Git

Что должен знать Junior Frontend разработчик в 2021 | Roadmap + Чеклист
https://www.youtube.com/watch?v=0WJLkakbgYw  - c 5:35 мин

Git — система управления версиями с распределенной архитектурой.

• Шпаргалка по командам Git  https://www.riwkus.pro/notes/web/github/
  Хорошо описано:  https://eax.me/git-commands/
• Шпаргалка по Workflow: Terminal, Git, Github
  http://loftbooks.tilda.ws/workflow
• Основы Git
  https://git-scm.com/book/ru/v1/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B-Git-%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-Git-%D1%80%D0%B5%D0%BF%D0%BE%D0%B7%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D1%8F
• Git за полчаса: руководство для начинающих
  https://proglib.io/p/git-for-half-an-hour/

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

Для чего нужен Git?

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

Http / Https

HTTP

Протокол HTTP и работа с заголовками
https://htmlacademy.ru/tutorial/php/http-headers (Работа с заголовками в PHP)

Как работает WWW (всемирная паутина, веб) в двух словах:

• браузер пользователя (клиент) отправляет на сервер запрос с адресом сайта (URL);
• сервер получает этот запрос и отдаёт клиенту требуемый тому контент.

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

Как работает HTTP

Протокол HTTP очень прост и состоит, по сути, из двух частей:

1. Заголовков запроса/ответа;
2. Тела запроса/ответа.

Сначала идёт список заголовков, затем пустая строка, а затем (если есть) тело запроса/ответа.

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

Еще материалы htmlacademy.ru:

Аутентификация пользователя на сайте. Сессии и куки
https://htmlacademy.ru/tutorial/php/sessions-cookies  (Особенности работы протокола HTTP)

Чем отличаются HTTP-методы GET и POST
https://htmlacademy.ru/blog/best/get-vs-post

HTTPS

От англ. HyperText Transfer Protocol Secure. Это расширение http-протокола, поддерживающее шифрование данных и обеспечивающий их защиту от прослушивания и изменений.

Зачем нужен Https

1. обеспечение безопасности при обмене информацией между сайтом и устройством пользователя
2. повышение доверия к сайту и поддержания репутации
3. число http-сайтов сокращается
4. HTTPS будет включен в список ранжирующих факторов

Смена протокола сайта с HTTP на HTTPS считается переносом сайта с изменением URL. Это действие может временно повлиять на учет трафика. 

https://moonback.ru/page/ssl-https

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

WEBPACK

Введение в Webpack для новичков
https://medium.com/nuances-of-programming/%D0%B2%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B2-webpack-%D0%B4%D0%BB%D1%8F-%D0%BD%D0%BE%D0%B2%D0%B8%D1%87%D0%BA%D0%BE%D0%B2-6cafbf562386

Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей.

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

Он также способен выполнять множество иных операций.

Разбираемся с настройкой Webpack для любого проекта
https://webdevblog.ru/razbiraemsya-s-nastrojkoj-webpack-dlya-ljubogo-proekta/

Рук-во: https://www.excitoninteractive.com/articles/series/1002/webpack4

*    *    *

Webpack — инструмент веб-разработчика, который соединяет JavaScript- и CSS-файлы в единое целое — файл, который часто называется «bundle» (с англ. «пачка»).
В этой статье представлена инструкция по настройке среды для проекта на JavaScript и Sass.  https://tproger.ru/translations/webpack-basics/

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

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

Сборка БЭМ-проектов с помощью бандлера Webpack.

Package.json

{
  "scripts": {
    "build-project": "node build-project.js"
  }
}

Сценарии - отличный способ автоматизации задач связанных с пакетом, таких как простые процессы сборки или средства разработки. С помощью области "scripts", можно определить различные сценарии, которые могут быть запущены с помощью yarn run <script>. Например, с помощью скрипта build-project можно вызывать yarn run build-project, также сработает и node build-project.js.

Добавление вендорных префиксов

Добавляет ли webpack браузерные префиксы к css стилям? Зависит от сборки. Автоматически сам Webpack ничего не добавляет.

Gulp

Пополняется . . .  :-)

NODE.js

Node.js — это опенсорсная кроссплатформенная среда выполнения для JavaScript, которая работает на серверах.

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

Руководство по Node.js, часть 1: общие сведения и начало работы  2018г.

https://habr.com/ru/company/ruvds/blog/422893/

Платформа Node.js построена на базе JavaScript движка V8 от Google, который используется в браузере Google Chrome. Данная платформа, в основном, используется для создания веб-серверов, однако сфера её применения этим не ограничивается.

В Википедии читаем:

“Node.js – это пакет, включающий движок JavaScript V8 от Google, уровень абстракции платформы – библиотеку libuv, а также базовую библиотеку, которая сама написана на JavaScript.”

Короче: Node.js блистает в приложениях реального времени, так как задействует push-технологию через веб-сокеты. Node.js Best Practices: https://github.com/goldbergyoni/nodebestpractices

Установка

https://nodejs.org/en/download/

NPM

NPM — это инструмент для управления пакетами, по умолчанию присутствующий в любой установке Node.js

Уроки

Npm для простых смертных  https://habr.com/ru/post/243335/

Webpack за 15 минут  https://proglib.io/p/webpack-in-15

Введение в пакетный менеджер NPM для начинающих
http://prgssr.ru/development/vvedenie-v-paketnyj-menedzher-npm-dlya-nachinayushih.html

npm install

Устанавливает зависимости в каталог node_modules/ для проекта node, над которым вы работаете.

Вы можете вызвать install в другом проекте node.js (module), чтобы установить его как зависимость для вашего проекта.

npm run build

Является псевдонимом для npm build, и он ничего не делает, если вы не укажете, что делает "build" в вашем файле package.json.

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

npm run build - если нужно выполнить сборку для продакшна

Коммит:  Выполнение сборки для продакшна.

npm run watch

npm run watch - для локальной разработки

Yarn vs Npm

http://prgssr.ru/development/yarn-ili-npm-vse-chto-vam-nuzhno-znat.html#heading-yarn--npm-----

В отличие от npm, где глобальные операции выполняются за счет опции -g или --global, команды Yarn нуждаются в префиксе global. Также как и в npm, специфические для проекта зависимости глобально не устанавливаются.

Префикс global работает только с командами yarn add, yarn bin, yarn ls и yarn remove.

За исключением yarn add, все эти команды идентичны своим эквивалентам в npm.

Мигрирование с npm на yarn
https://classic.yarnpkg.com/ru/docs/migrating-from-npm/

Команды BASH / WINDOWS, NPM, YARN
https://gist.github.com/neretin-trike/de70ba1428d9d89a1574ef26ba02e762

Написание npm скриптов в файле Package.json
https://frontend-stuff.com/blog/npm-scripts/#%D0%BD%D0%B0%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5-npm-%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%BE%D0%B2

Шаблоны проектирования

Search wordspatterns / паттерны разработки

Источник:
Шаблоны проектирования для коммуникации между компонентами Vue.js
https://code.tutsplus.com/ru/tutorials/design-patterns-for-communication-between-vuejs-component--cms-32354

Шаблон проектирования – обобщенное описание способа решения определённого класса задач.

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

Шаблоны – проверенные алгоритмы и архитектуры, которые помогают нам эффективно и предсказуемо решать конкретные задачи.

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

REST API

Search wordsRESTful API, CRUD

Что такое REST API?

https://only-to-top.ru/blog/programming/2019-11-06-rest-api-php.html

REST  - это концепция (архитектура) для организации взаимодействия между независимыми объектами (приложениями) посредством протокола HTTP.

Включает в себя набор принципов (рекомендаций) взаимодействия клиент-серверных приложений. Обычно он представлен в формате JSON.

API  - интерфейс взаимодействия с каким-либо объектом (программой, приложением), включающий в себя набор правил, которые позволяют одному приложению общаться с другим.

Эти «правила» могут включать в себя операции создания, чтения, обновления и удаления. Примером API может служить всем известная библиотека jQuery.

*    *    *

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

*    *    *

Определение от Netology.ru :

Основная идея REST API - разделение разных операций (чаще всего CRUD) при обращении к одному и тому же URL с помощью HTTP-методов.

Зачем нужен REST API?

Во многих приложениях REST API необходим, потому что это самый легкий способ создания, чтения, обновления или удаления информации между различными приложениями через Интернет или протокол HTTP. Эта информация представляется пользователю в одно мгновение, особенно если вы используете JavaScript для отображения данных на веб-странице.

Где используется REST API?

REST API может использоваться любым приложением, которое может подключаться к Интернету. Если данные из приложения могут быть созданы, прочитаны, обновлены или удалены с помощью другого приложения, это обычно означает, что используется REST API.

GraphQL

Пополняется . . .  :-)

MVC

Шаблон MVC описывает простой способ построения структуры приложения.

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

Компоненты MVC

1. Model: в архитектуре MVC модель предоставляет данные и правила бизнес-логики.
2. View: представление отвечает за пользовательский интерфейс.
3. Controller: контроллер обеспечивает взаимодействие между моделью и представлением.

M - model (модель)

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

Как правило «модели» – это самая большая часть приложения.

V - view (вид или представление)

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

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

С - controller (контроллер)

Контроллер – это связующее звено. Он соединяет модели, виды и другие компоненты в рабочее приложение.

• Контроллер отвечает за обработку запросов пользователя.
• Он не должен содержать запросов к БД, их лучше держать в моделях.
• В нем не должно быть HTML и другой разметки, ее стоит выносить в виды.
• В хорошо спроектированном MVC-приложении контроллеры обычно довольно компактные.

Статьи по теме MVC

Илья Кантор, Интерфейсы. Прочь от MVC: https://javascript.ru/optimize/antimvc
Model-View-Controller (MVC) на JavaScript: https://alexatnet.com/model-view-controller-mvc-in-javascript_ru/
Как я реализовал MVC в JavaScript: https://itnan.ru/post.php?c=1&p=535784

Cookies

Что такое файлы cookies и зачем они нужны https://ssl.com.ua/blog/what-are-cookies/

Security / Performance

Пополняется . . .  :-) 

Figma / Photoshop / Sketch

Пополняется . . .  :-)