Самое важное и главное правило в Web-разработке — писать чистый и понятный код, который легко можно изменять, редактировать и выявлять ошибки.
Рассмотрим некое деление Web-разработчиков:
⚡️ Джун (Junior)
🔵 понимает, как устроен весь цикл разработки: фронтенд, бэкэнд, деплой и администрирование серверов. 🔵 решает стандартные задачи (разработка простого веб-сайта на базовом стеке технологий) 🔵 в целом понимает, как работают фундаментальные веб-технологии 🔵 умеет пользоваться GIT, стремиться улучшать качество кода.
⚡️ Мидл (Middle)
🔵 владеет базовыми принципами проектирования приложений. 🔵 владеет несколькими инструментами для решения одной задачи. 🔵 умеет проектировать и создавать базы данных, интегрировать другие сервисы через api, чтобы использовать их ресурсы 🔵 знает , что такое плохой код и следит за качеством. 🔵 владеет распространенными алгоритмами и структурами данных и знаем когда и как их применять. 🔵 пробовал несколько парадигм программирования и силён в какой-то из них. 🔵 покрывает свой код юнити интеграционными тестами.
⚡️ Сеньор (Senior)
🔵 умеет проектировать сложные решения с архитектурой, гибкой чтобы развивать продукт и улучшать код параллельно с разработкой. 🔵 знает как отслеживать и аномалии в работе системы. 🔵 умеет быстро изучать новые инструменты, находить области для развития, даже если доп. знания не нужны.
Современный мир постоянно стремиться к развитию. Давайте рассмотрим с вами несколько вариантов технологий, которые позволяют улучшать сервисы и облегчают жизнь каждому из нас.
1️⃣JavaScript — язык программирования, используется для создания интерактивных элементов на веб-страницах.
🟠 единственный и самый популярный язык программирования для фронтенда, часто используется для запуска программ в браузере.
2️⃣ HTML / CSS — две связанные технологии, которые используют для определения структуры и стиля веб-страниц.
🟠 HTML — определяет размещение элементов на странице
🟠 CSS — добавляет визуальные элементы (цвет и фрифты)
3️⃣ React, Angular и Vue.js — фреймворки JS, которые используют для создания пользовательских интерфейсов.
🟠 Фреймворк – это готовый код для решения типовых задач.
🟠 Во фреймворке прописаны правила и ограничения для кода, поэтому он получается более однообразным, предсказуемым и с меньшим количеством ошибок.
4️⃣ TypeScript — это расширение JavaScript.
🟠 с ним код более надежный и читабельный.
5️⃣ Node.js — это среда выполнения JavaScript, которая позволяет разработчикам создавать серверные приложения на этом языке.
6️⃣ Python — язык программирования, который поддерживает многопоточность и может выполнять одновременно несколько задач.
7️⃣ PostgreSQL — одна из лучших реляционных SQL баз данных.
🟠 используется для хранения, организации и управления большими объемами структурированных данных.
8️⃣ MongoDB — одна из популярных нереляционных No-SQL баз данных, часто используется в стеке с Node.js на бэкенде.
⚡️HTML — язык гипертекстовой разметки страниц, используемый для описания структуры веб-сайтов. Он состоит из тегов, которые определяют визуальное отображение контента в браузере.
⚡️CSS — язык описания стилей для HTML-документов. Он необходим для придания внешнего вида веб-страницам. HTML определяет структуру, а CSS отвечает за оформление страницы.
🔵 <article> определяет независимое, автономное содержимое (Статья должна иметь смысл сама по себе, ее возможно распространять независимо от остальной части веб-сайта).
🔵 <aside> определяет некоторое содержимое помимо содержимого, в котором он размещен (например, боковая панель). Контент <aside> должен быть косвенно связан с окружающим контентом.
🔵 <footer> определяет нижний колонтитул для документа или раздела.
🔵 <header> - контейнер для вводного контента или набор навигационных ссылок.
🔵 <main> определяет основное содержание документа.
🔵 <mark> определяет выделенный / подсвеченный текст.
🔵 <nav> определяет набор навигационных ссылок.
🔵 <section> определяет раздел в документе (Раздел представляет собой тематическую группу контента, обычно с заголовком).
🔵 <details> определяет дополнительные сведения, которые пользователь может просматривать или скрывать.
🔵 <summary> определяет видимый заголовок для элемента <details>.
🔵 <figure> определяет автономный контент, такой как иллюстрации, диаграммы, фотографии, списки кодов и т. д.
🔵 <figcaption> определяет заголовок для <figure> элемента.
🟢 БЭМ представляет собой методологию веб-разработки, которая основывается на принципе разделения интерфейса на отдельные блоки, а также включает в себя набор библиотек, фреймворков и инструментов.
🟢 Концепция «Блок, Элемент, Модификатор» описывает структуру компонентов. Через соглашение по именованию CSS-классов методология стимулирует информативность и повторное использование компонентов, что облегчает совместную работу, масштабирование и поддержку проектов.
➡️ Пример использования:
html <div> <div>Элемент</div> <div>Модификатор</div> </div>
➡️ В данном примере используется методология БЭМ для именования CSS-классов блока, элементов и модификаторов, что позволяет создавать понятную структуру и стилизацию компонентов.
🟢 SASS, сокращение от Syntactically Awesome Stylesheets, является инструментом, способствующим упрощению процесса создания CSS-кода. Он представляет собой язык программирования, который преобразуется в обычный CSS с помощью специального компилятора. Браузеры не могут интерпретировать SASS напрямую, поэтому для отображения стилей необходима конвертация в стандартный CSS. Задача компилятора заключается в том, чтобы преобразить SASS в понятный для браузеров формат CSS. Использование SASS помогает упростить создание и обслуживание больших объемов CSS-кода.
🟢 SCSS, также известный как Sassy CSS, является одним из двух основных синтаксисов языка SASS. В отличие от SASS, который использует специфический синтаксис без фигурных скобок и с отступами для вложенности элементов, SCSS больше приближен к обычному CSS, что делает его более удобным для большинства разработчиков. В то же время SCSS сохраняет все преимущества SASS, такие как использование переменных, миксинов, вложенностей и наследования селекторов.
➡️ Этот код SCSS объявляет переменные для основного цвета кнопки и радиуса закругления углов, а затем создает стили для кнопки с возможностью применения различных модификаторов, таких как размеры и варианты оформления. Компиляция этого кода SCSS даст на выходе стандартный CSS, который браузеры могут интерпретировать и применять к кнопке на веб-странице.
➡️Git — это набор командной строки, который отслеживает и регистрирует изменения в файлах (как правило, это касается исходного кода программ, но вы можете применять его к любым файлам по вашему усмотрению). С его помощью можно сравнивать, анализировать, редактировать, сливать изменения и вернуться назад к предыдущим версиям. Этот процесс известен как управление версиями.
➡️ Зачем использовать Git:
🟢 Отслеживание изменений, которые произошли в проекте со временем. Это означает, что можно просмотреть, какие изменения были внесены в файлы программы на различных этапах разработки и при необходимости вернуться назад для внесения корректировок.
