Shadow DOM - DOM внутри DOM
Дисклеймер. На пикабу до сих пор не завезли редактор кода, поэтому картинки. Кому на нравятся картинки - при желании может почитать статью на GitHub
DOM — это программный интерфейс (API) для кода страницы, который представляет страницу как древовидную структуру объектов.
Каждый HTML-элемент (например, <p>, <div>, <img>), каждый атрибут и каждый фрагмент текста является отдельным «узлом» (node) в этом дереве. С JavaScript, мы можем обращаться к этим узлам, чтобы динамически изменять страницу: менять текст, добавлять стили, создавать новые элементы или удалять существующие. По сути, DOM — это «живая» модель документа, с которой взаимодействует код.
Но у этой открытости есть и обратная сторона. Когда мы создаем сложный, многократно используемый компонент (например, кастомный видеоплеер или виджет календаря), его внутренняя структура и стили становятся уязвимыми. Стили CSS с основной страницы могут случайно «протечь» внутрь компонента и сломать его внешний вид. Аналогично, JavaScript-код страницы может непреднамеренно изменить внутренние элементы компонента, нарушив его логику.
Для решения этой проблемы и существует Shadow DOM (теневой DOM).
По своей сути, Shadow DOM — это «DOM внутри DOM». Это скрытое дерево элементов, которое прикрепляется к обычному элементу на странице (называемому «хостом»), но при этом оно изолировано от основного DOM. Оно позволяет разработчику создать герметичную границу вокруг внутренней структуры компонента, защищая его от внешнего мира.
Теневой DOM позволяет прикреплять скрытые DOM-деревья к элементам в обычном DOM-дереве. Это теневое дерево начинается с теневого корня (shadow root), под который можно прикреплять любые элементы так же, как и в обычном DOM.
Существует несколько терминов, связанных с теневым DOM, которые следует знать:
Теневой хост (Shadow host): Обычный узел DOM, к которому прикреплен теневой DOM.
Теневое дерево (Shadow tree): DOM-дерево внутри теневого DOM.
Теневая граница (Shadow boundary): Место, где заканчивается теневой DOM и начинается обычный DOM.
Теневой корень (Shadow root): Корневой узел теневого дерева.
Вы можете воздействовать на узлы в теневом DOM точно так же, как и на обычные узлы. Разница в том, что никакой код внутри теневого DOM не может повлиять на что-либо за его пределами, что обеспечивает надёжную инкапсуляцию.
До того, как теневой DOM стал доступен веб-разработчикам, браузеры уже использовали его для инкапсуляции внутренней структуры стандартных элементов. Например, элемент <video> с элементами управления. Всё, что вы видите в DOM, — это тег <video>, но он содержит ряд кнопок и других элементов управления внутри своего теневого DOM.
Создание теневого DOM
Создавать теневой DOM можно двумя способами: императивно с помощью JavaScript или декларативно прямо в HTML.
Императивно с помощью JavaScript
Этот способ отлично подходит для приложений, рендерящихся на стороне клиента. Мы выбираем элемент-хост и вызываем на нём метод attachShadow().
Результат на странице будет выглядеть так:
Я нахожусь в теневом DOM Я не в теневом DOM
Декларативно с помощью HTML
Для приложений, где важен рендеринг на стороне сервера, можно определить теневой DOM декларативно, используя элемент <template> с атрибутом shadowrootmode.
Когда браузер обработает этот код, он автоматически создаст теневой корень для <div> и поместит в него содержимое тега <template>. Сам тег <template> при этом исчезнет из основного DOM-дерева.
Инкапсуляция: защита от JavaScript и CSS
Главное преимущество Shadow DOM — это изоляция. Давайте посмотрим, как она работает.
Инкапсуляция от JavaScript
Добавим кнопку, которая будет пытаться изменить все элементы <span> на странице.
При нажатии на кнопку текст изменится только у <span>, который находится в основном документе. Элемент внутри теневого DOM останется нетронутым, потому что document.querySelectorAll() не может "заглянуть" за теневую границу.
Доступ к теневому DOM: свойство shadowRoot и работа с вложенностью
Когда мы вызываем host.attachShadow({ mode: "open" }), мы создаём теневой DOM в "открытом" режиме. Это означает, что мы можем получить доступ к его содержимому извне через свойство host.shadowRoot.
Если же указать mode: "closed", свойство host.shadowRoot вернёт null, и доступ к теневому дереву извне будет закрыт. Это не строгий механизм безопасности, а скорее соглашение для разработчиков о том, что внутренности компонента трогать не следует.
Работа с вложенными теневыми деревьями
В сложных компонентных архитектурах один пользовательский элемент может содержать внутри себя другие пользовательские элементы, каждый из которых имеет свой собственный Shadow DOM. Чтобы добраться до элемента в глубоко вложенном теневом дереве, придётся последовательно "проходить" через каждый shadowRoot.
Представим себе такую структуру:
Компонент <nmbrs-form> (основная форма).
Внутри него находится <div>, а в нём — компонент <nmbrs-button> (кастомная кнопка).
Внутри <nmbrs-button> находится настоящая HTML-кнопка <button>.
Чтобы получить доступ к этой кнопке из глобального контекста, путь будет выглядеть так:
SВ виде одной цепочки вызовов это выглядит так:
Такая длинная цепочка наглядно демонстрирует мощь инкапсуляции: чтобы добраться до внутренних деталей, нужно явно пройти через каждую "границу". Это делает код более предсказуемым и защищает компоненты от случайных изменений.
Инкапсуляция от CSS
Стили, определённые на основной странице, не влияют на элементы внутри теневого DOM.
Элемент <span> внутри теневого дерева не получит эти стили. Это решает огромную проблему случайных пересечений и конфликтов CSS.
Применение стилей внутри теневого DOM
Стили, определённые внутри теневого дерева, в свою очередь, не влияют на основную страницу. Есть два основных способа их добавления.
1. Конструируемые таблицы стилей (Constructable Stylesheets)
Этот метод позволяет создавать объект CSSStyleSheet в JavaScript и применять его к одному или нескольким теневым деревьям. Это эффективно, если у вас есть общие стили для множества компонентов.
2. Добавление элемента <style>
Простой и декларативный способ — поместить тег <style> прямо внутрь теневого дерева (часто внутри <template>).
Теневой DOM и пользовательские элементы: идеальное сочетание
Вся мощь теневого DOM раскрывается при создании пользовательских элементов (Custom Elements). Без инкапсуляции они были бы невероятно хрупкими.
Пользовательский элемент — это класс, наследующий HTMLElement. Как правило, сам элемент выступает в роли теневого хоста, а вся его внутренняя структура создаётся внутри теневого дерева.
Вот пример простого компонента <filled-circle>:
Теперь мы можем использовать его в HTML как обычный тег, не беспокоясь о его внутреннем устройстве:
Каждый из этих компонентов будет полностью инкапсулирован и защищён от влияния внешней страницы.
Полезно? Подпишись.
Удачи 🚀
Как немножко хакнуть Мосрег
Всем привет!
При оформлении заявлений в детский сад на детей на uslugi.mosreg.ru столкнулся с тем, что если ранее было подано заявление и нужно какие-то данные в нём поправить, то выбрать год зачисления ребёнка в ДС можно только следующий. То есть, мы подали в 2024, а теперь можно выбрать только 2026 год, потому что текущий нельзя.
Мне показалось это не очень удобным, решил немножко изучить фронтенд сайта и обнаружил, что валидации на простановку года нет :)
В видео подробнее, как обойти ограничение
Языки программирования на все случаи жизни. Часть 1
В программировании существует десятки разных направлений, языков ещё больше, около 9000. Эта статья будет интересна для тех, кто только-только начинает свой путь разработчика или же для тех, кому просто интересно. К языку будут прилагаться библиотеки и фреймворки, которые нужны для обсуждаемых направлений (например, django для python в бэкэнде). В статье будут не только языки программирования, но суть от этого не меняется.
Направления и языки
Web-разработка
В web-разработке есть 2 основных поднаправления: Backend и frontend. Frontend это клиентская часть сайта, её видит пользователь и она отправляется клиенту с сервера в браузер. Backend это логическая часть сайта, она работает на сервере и делает всё, что пользователь не видит, например, обрабатывает платежи и т.д.
Frontend
Frontend это клиентская часть веба. Она отвечает за визуал сайта. Всё то, что видит и слышит пользователь на сайте - дело рук фронтендера. Браузер делает http(s) запрос на сервер, он получает HTML-страницу (и CSS с Javascript) и отрисовывает страницу. Ответ сервера может содержать: HTML-документ; данные, встроенные в HTML; ссылки на статические файлы (CSS, JS, изображения); JSON/XML/другие данные (если это API запрос).
И так, языки для frontend разработки:
HTML и CSS: Это не опционально. HTML обязателен, а без CSS сайт может работать, но вряд ли он будет красивым. Их нельзя назвать языком программирования, но пусть будут. Фреймворки и библиотеки для CSS:
Tailwind CSS: Utility-first CSS фреймворк, то есть разработчик использует набор предопределённых классов, каждый из которых имеет некоторое количество стилей. Очень гибкий и мощный.
Bootstrap: Самый популярный. Предоставляет адаптивную сетку, компоненты (кнопки, навигация, карточки и т.д.), JS-плагины.
Sass / SCSS: Препроцессор CSS, который расширяет возможности стандартного CSS, добавляя функциональность, такую как переменные, вложенность, миксины и многое другое.
JavaScript (JS): Двигатель для визуала сайта. Он добавляет интерактивность и динамическое поведение на веб-страницы. Фреймворки и библиотеки для JS:
React: Библиотека от Meta. Позволяет создавать компоненты. Упрощает разработку.
Vue.js / Vue 3: Модульная структура. Относительно простой фреймворк.
Angular: Полноценный MVC-фреймворк от Google. Работает на TypeScript. Хорошо подходит для крупных корпоративных приложений. Включает в себя маршрутизацию, формы, HTTP-клиент и т.д.
Svelte: Очень быстрый и лёгкий. Отлично подходит для микросервисов.
TypeScript: Надмножество Javascript. Статическая типизация.
Backend
Backend это серверная часть веба. Обработка платежей, регистрация пользователей и всё то, что не видит клиент, делается тут.
Node.js: Это среда выполнения JavaScripts, которая позволяет использовать JavaScript для разработки серверной части. Фреймворки и библиотеки для Node.js:
Expess.js: Самый популярный и гибкий фреймворк, часто используемый в качестве основы для многих Node.js проектов. Он обеспечивает минимальный базовый набор функций для создания веб-приложений и API.
NestJS: Фреймворк, ориентированный на создание масштабируемых серверных приложений. Он использует модульную архитектуру, поддерживает TypeScript и предоставляет встроенные решения для валидации, маршрутизации, аутентификации и авторизации.
Fastify: Фреймворк, ориентированный на максимальную производительность и низкое потребление ресурсов, что делает его подходящим для высоконагруженных приложений.
Python: Этот язык многофункционален и его можно использовать в бэкэнде. Фреймворки и библиотеки для Python:
Django: Полноценный фреймворк, предназначенный для создания сложных веб-приложений, включает в себя ORM, систему шаблонов, админ-панель и многое другое.
Flask: Микрофреймворк, гибкий и легкий, подходит для небольших и средних проектов, а также для создания API.
FastAPI: Современный, быстрый фреймворк, ориентированный на создание API.
Java: Java доминирует в банках, финансовых платформах и крупных онлайн-сервисах (например, LinkedIn, Netflix, Amazon частично используют Java). В большинстве случаев используется Spring. Фреймворки и библиотеки для Java:
Spring: Один из самых популярных фреймворков, предоставляющий множество инструментов для разработки веб-приложений, включая управление зависимостями, аспектно-ориентированное программирование и доступ к данным.
C#: C# популярен в компаниях, работающих на Windows-инфраструктуре, особенно в Европе и США: от страховых компаний до госпорталов. Фреймворки и библиотеки для C#:
ASP.NET: Основной фреймворк C#. ASP.NET Core предоставляет широкий набор инструментов для создания веб-сайтов, API и других веб-сервисов.
Entity Framework Core: ORM (Object-Relational Mapping) фреймворк, который упрощает работу с базами данных. Позволяет работать с базами данных, используя объекты C# вместо SQL запросов.
Blazor: Фреймворк для создания интерактивных веб-интерфейсов, работающий как на стороне клиента (в браузере), так и на стороне сервера.
Go: Высокая производительность и простота. Фреймворки и библиотеки для Go:
Gin: Известен своей высокой производительностью и легкостью использования. Идеален для создания API и веб-приложений, требующих быстрой обработки запросов.
Echo: Легкий и быстрый фреймворк, ориентированный на производительность и простоту использования. Отлично подходит для создания API и веб-сервисов.
PHP: Классика веба. Фреймворки и библиотеки для PHP:
Laravel: Известен своей элегантностью, мощной системой шаблонов Blade, и богатым набором инструментов для разработки. Laravel часто выбирают для создания масштабных и сложных веб-приложений.
Ruby: Лаконичный и удобный. Фреймворки и библиотеки для Ruby:
Ruby on Rails (RoR): Самый популярный фреймворк, известный своей структурой MVC, удобством разработки и возможностями для создания масштабируемых веб-приложений. Он предоставляет готовые решения для работы с базами данных, маршрутизацией, представлением и многим другим, что значительно ускоряет процесс разработки.
Базы данных: Будучи backend разработчиком вам придётся работать с базами данных.
PostgreSQL: Гибкая система управления реляционными базами данных (СУБД). Удобно хранить геопространственные данные.
MySQL: Одна из самых популярных. Открытый исходный код. MySQL имеет меньше поддержки стандартов SQL, чем PostgreSQL.
SQLite: Лёгкая, встраиваемая система управления базами данных. SQLite не требует отдельного сервера, база данных хранится в одном файле на диске. Не предназначен для многопользовательского доступа с высокой конкуренцией. Для локального хранения.
MongoDB: Нереляционная (NoSQL) документо-ориентированная система управления базами данных, которая предназначена для хранения, обработки и масштабирования больших объёмов неструктурированных или полуструктурированных данных. MongoDB хранит данные в формате BSON (Binary JSON).
Redis (REmote DIctionary Server): Redis хранит данные в оперативной памяти, что обеспечивает очень быструю обработку запросов. Данные хранятся в парах "ключ-значение", что упрощает доступ к информации.
Docker / CI/CD / Nginx/Apache: Полезные вещи для бэкенда.
Системное программирование
Системное программирование - Разработка программного обеспечения, которое взаимодействует напрямую с железом. Это низкоуровневое программирование, где важна производительность и эффективность управления ресурсами. Системные программисты разрабатывают ОС, драйверы, компиляторы, виртуальные машины и антивирусы.
C: Фундамент всех ОС и системного ПО. Работает напрямую с памятью. Ядро Unix/Linux написано на C. Даёт полный контроль над памятью, но требует ручного управления памятью. Почти нет абстракции.
C++: Мощнее C, добавляет ООП, используется в движках и ядрах.
Rust: Безопасная альтернатива C / C++ без утечек памяти.
Assembly: Пишется для конкретного процессора (x86, ARM, RISC-V). Почти напрямую управляет CPU, регистрами, стеком.
Мобильная разработка
Создание приложений для смартфонов, планшетов и носимых устройств. Тут есть 3 поднаправления: нативные мобильные приложения; гибридные (на web-технологиях); кроссплатформенные.
Нативная разработка
Это создание мобильных приложений под конкретную операционную систему.
Kotlin: Разработка под android. Ститачески типизированный язык программирования, разработанный компанией JetBrains. Безопасен от NullPointerException. Выразительный синтаксис. Возможность интеграции с кодом на java.
Android studio: IDE специально для создания приложений под android.
Jetpack Compose: Упрощает и ускоряет процесс разработки интерфейсов за счёт меньшего объёма кода, мощных инструментов и интуитивно понятного кода. Использует kotlin для создания UI.
XML (eXtensible Markup Language): Язык разметки для хранения и передачи данных.
Swift: Разработка под IOS. Современный и безопасный.
Xcode: IDE для разработки под IOS.
UIKit: Предоставляет разработчикам набор элементов управления, такие как кнопки, метки, текстовые поля, а также возможности для обработки касаний и жестов, обеспечивая интуитивно понятное взаимодействие с пользователем.
SwiftUI: Декларативный UI-фреймворк от Apple.
Кроссплатформенная разработка
Один код работает и на android, и на IOS.
Flutter: Кроссплатформенный SDK от Google для создания красивых, нативных приложений для мобильных устройств. Быстрый рендеринг. Кастомный UI.
Dart: Основной язык для flutter. Простой синтаксис. Высокая производительность. Богатый набор библиотек.
React Native: Использует один и тот же код JavaScript для iOS и android. Основное преимущество React Native это возможность создавать приложения для iOS и Android, используя общий код на JavaScript.
Kotlin Multiplatform Mobile (KMM): Код пишется на kotlin и компилируется на обе ОС. UI пишется отдельно, но бизнес логика общая.
Гибридные и web-приложения
Такие приложения сочетают в себе элементы нативных и веб-приложений. Работают как web-приложения внутри обёртки. По своей сути, это веб-приложения (обычно написанные с использованием HTML, CSS и JavaScript), "упакованные" в специальную нативную оболочку (часто называемую WebView).
Ionic: Фреймворк для разработки гибридных кроссплатформенных мобильных приложений.
WebView Multiplatform Mobile: Кроссплатформенная библиотека для встраивания веб-контента в приложения для Android и iOS.
Xamarin WebView: Фреймворк для разработки кросс-платформенных мобильных приложений, предоставляет доступ к WebView для отображения веб-содержимого.
Tauri: Фреймворк для создания десктопных приложений с использованием веб-технологий. Во второй версии можно делать мобильные приложения. Написан на сложном rust.
Data Science / Аналитика данных
Data science - Наука о данных. Использует математику и статистику для обработки данных, извлечения полезной информации, выявления закономерностей и предсказания будущих событий. Они используют для этого статистические методы и машинное обучение.
Python: Де-факто стандарт в data science. Прост в изучении. Огромное сообщество. Богатейшая экосистема библиотек. Библиотеки для python, которые нужно знать аналитику данных:
NumPy: Для работы с многомерными массивами и матрицами. Линейная алгебра.
Pandas: Предоставляет мощные структуры данных.
Polars: Современная, очень быстрая альтернатива pandas. Оптимизированная для работы с большими наборами данных.
Matplotlib / Seaborn: Визуализация данных.
Scikit-learnt + keras: Машинное обучение. Прогноз данных.
Jupyter: Интерактивный блокнот для работы с кодом.
R: Язык специально для статистики. Имеет невероятно богатый набор пакетов для статистического анализа, визуализации.
SQL: Необходим любому специалисту по данным. Для хранения данных.
Scala: JVM-язык, сочетающий объектно-ориентированную и функциональную парадигмы. Основной язык для Apache Spark.
Julia: Создан специально для высокопроизводительных научных вычислений. Синтаксис похож на Python / MATLAB.
Машинное обучение и ML-инженеринг
ML-инженеринг (MLOps) - Инженерная дисциплина, которая фокусируется на машинном обучении. В отличие от Data Science, где основное внимание уделяется исследованию данных и построению моделей, ML-инженеринг охватывает весь жизненный цикл AI-продукта. Построение моделей, нейросетей, прогнозирование. Это инженерная часть Data Science, фокусирующаяся на промышленной эксплуатации. ML-инженеру нужно также знать математику на высоком уровне.
Python: Часто этот язык является лишь высокоуровневым интерфейсом, а фреймворки написаны на C++. Если бы модели обучались только на python, это было бы слишком медленно. Фреймворки и библиотеки python:
TensorFlow: Открытая библиотека машинного обучения. Предназначена для построения и обучения моделей машинного и глубокого обучения.
MLflow: Платформа с открытым исходным кодом для управления жизненным циклом машинного обучения.
Kubeflow: Набор инструментов для развертывания ML-воркфлоу на Kubernetes (использует Python для определения пайплайнов).
Научные и инженерные расчёты
Математика, физика, симуляции.
Python: Отлично подходит для научных вычислений. Простота изучения, огромное сообщество, богатейшая экосистема научных библиотек, отличная интеграция с другими языками и инструментами, поддержка всех этапов работы (прототипирование, анализ, визуализация, развертывание). Фреймворки и библиотеки python:
NumPy
SciPy: Построен на NumPy. Реализация алгоритмов: оптимизация, интегрирование, интерполяция, специальные функции, обработка сигналов/изображений, статистика, дифференциальные уравнения.
SumPy: Компьютерная алгебра.
Matplotlib: Гибкая и мощная библиотека для создания статических, анимированных и интерактивных 2D/3D графиков.
Mayavi, PyVista: Визуализация 3D данных и научных расчетов.
MATLAB: Специально для численных вычислений. Широко используется в инженерии (особенно в вузах и промышленности). Платный. Интуитивный ситнаксис.
Fortran: Непревзойденная производительность для задач с плотными численными расчетами (физика, механика жидкостей, метеорология, квантовая химия, вычислительная астрофизика). Отличная поддержка многомерных массивов и операций над ними (включая срезы).
Julia: Быстро набирает популярность в научных вычислениях.
C / C++: Абсолютный контроль над аппаратурой и памятью.
GameDev
Создание игр от мобильных до AAA. 2D и 3D. VR/AR.
C++ / Blueprints
Unreal Engine: Движок для больших и AAA игр. Красивая графика. Подходит для крупных игр с проработанными механиками и игр с упором на графику. Для мощного железа. На нём даже фильмы снимают. Чтобы делать игры на нём, нужно быть профессионалом.
C#
Unity: Подходит для большинства игр. Часто используется дли инди проектов. Большое сообщество и много ассетов. Много полезных функций. Для VR/AR хорошо подходит.
Godot: Поддерживает некоторые языки программирования, такие как C# и C++, есть собственный язык GDScripts. Активно развивается. Открытый, лёгкий, отлично подходит для 2D игр. Хороший выбор для новичков.
Phaser (JS): HTML5-движок для 2D игр в браузере. Прост и быстр в освоении. Идеален для веб-игр.
Lua: Скрипты в играх (Roblox, WoW и тд). Очень простой язык. Тоже вариант.
DevOps
DevOps (Development + Operation) - Подход к разработке ПО, объеденяющий разработчиков и IT-специалистов по эксплуатации с целью: ускорить релизы; повысить стабильность и безопасность; автоматизировать всё, что можно. В основных задачах у девопсера это CI/CD (непрерывная интеграция и доставка), контейнеризация, оркестрация контейнеров, автоматизации инфраструктуры, мониторинг и логирование.
Linux: Каждому девопсеру нужно знать linux. Linux это основная платформа для управления серверами, развёртывания приложений и автоматизации процессов в DevOps.
Bash: Для автоматизации. Скрипты. CI/CD. Bash-скрипты позволяют автоматизировать повторяющиеся задачи, экономя время и ресурсы.
Python: Python подходит для разных задач, включая написание сценариев, определение инфраструктуры в виде кода, создание конвейеров CI и CD, упрощение мониторинга и разработку пользовательских решений. Python работает с API многих облачных сервисов, таких как AWS, Google Cloud и Azure, что делает его незаменимым для облачной инфраструктуры.
Go: Создание собственных CLI-инструментов. Go позволяет разрабатывать и поддерживать собственные инструменты для автоматизации CI/CD, мониторинга, оркестрации. Многие популярные DevOps-инструменты написаны на Go, например Kubernetes, Docker, Terraform, Prometheus. Умение читать и писать на Go помогает лучше понимать и изменять их код.
YAML: Конфигурации Kubernetes, Ansible, Github Actions.
Groovy: Скрипты для Jenkins.
Docker: Контейнеризация.
Kubernetes: Оркестрация контейнеров. Автоматическое масштабирование. Балансировка нагрузки и управление состоянием контейнеров.
Jenkins: Инструмент для автоматизации процессов непрерывной интеграции (CI) и непрерывной доставки (CD) в DevOps. Он помогает разработчикам быстрее и эффективнее интегрировать изменения в код, находить и исправлять ошибки на ранних этапах, а также автоматизировать рутинные задачи.
Prometheus и Grafana: Мониторинг облачных приложений и сервисов.
Cloude
Cloud Developer - Специалист, чья работа сосредоточена на облачных платформах и сервисах. В отличие от традиционных разработчиков, он оперирует ресурсами (вычислительными мощностями, хранилищами, сетями), предоставляемыми по запросу через интернет, а не управляет локальными серверами напрямую. Разработчик облачных решений отвечает за проектирование, разработку, развертывание, масштабирование и поддержку приложений, сервисов и инфраструктуры, непосредственно работающих в облачной среде.
Amazon Web Services (AWS): Самая популярная облачная платформа, предоставляющая широкий набор сервисов для вычислений, хранения данных, аналитики, машинного обучения и многого другого.
Microsoft Azure: Облачная платформа от Microsoft. Популярная в корпоративном сегменте.
Google Cloude Platform (GCP): Облачная платформа от Google.
IBM Cloude: Платформа с акцентом на корпоративные решения, блокчейн и AI.
Oracle Cloude: Облачные решения от Oracle. Для крупного бизнеса и с фокусом на базы данных.
Для взаимодействия с облачными API, автоматизации задач инфраструктуры (IaC), написания скриптов развертывания и непосредственно разработки облачных приложений и сервисов разработчики облака активно используют языки программирования, такие как:
Python: Универсальность, богатые SDK для облаков.
Go (Golang): Высокая производительность, популярен для инструментов Cloud Native.
JavaScript / TypeScript: Фронтенд и бэкенд, серверные среды типа Node.js.
Java: Традиционно силен в корпоративной среде, особенно с Azure/IBM.
C#: Ключевой язык для экосистемы Microsoft Azure.
Ruby: Менее распространен, но используется, например, в DevOps инструментах.
Кибербезопасность
Кибербезопасность (Cybersecurity) - Комплексная практика защиты информационных систем, сетей, устройств, программ и данных от цифровых атак, несанкционированного доступа, повреждения или кражи. В современном мире, где бизнес, государственное управление и личная жизнь неразрывно связаны с цифровой средой, кибербезопасность становится критической необходимостью, а не просто опцией.
Основные направления кибербезопасности:
Сетевая безопасность: Защита инфраструктуры от атак (DDoS, MITM, эксплойты).
Информационная безопасность: Шифрование данных, контроль доступа, защита от утечек.
AppSec (безопасность приложений): Анализ кода, защита веб- и мобильных приложений.
Криптография: Разработка и взлом алгоритмов шифрования.
SOC & Мониторинг: Обнаружение и реагирование на инциденты в реальном времени.
Пентестинг и Red Teaming: Имитация атак для поиска уязвимостей.
Операционные системы для тестирования:
Kali Linux: Основной дистрибутив для пентеста.
Parrot OS: Альтернатива Kali с акцентом на анонимность.
BlackArch: Расширенный набор инструментов для хакеров.
Инструменты анализа и атаки:
Сканирование сетей: Nmap, Wireshark, Masscan
Взлом паролей: Hashcat, John the Ripper, Hydra
Эксплуатация уязвимостей: Metasploit, Burp Suite, SQLmap
Социальная инженерия: SET (Social-Engineer Toolkit), Maltego
Языки программирования:
Python: Автоматизация, скрипты для анализа угроз.
Bash/PowerShell: Администрирование, анализ логов.
C/C++: Разработка эксплойтов, анализ вредоносного ПО.
Go: Сетевые инструменты, быстрое создание утилит.
IoT и встаиваемые системы
Встраиваемые системы - Специализированные компьютеры, встроенные прямо в устройство, которым они управляют. Их задача это выполнять конкретные функции (управление двигателем, сбор данных с датчика и т.д.).
IoT (Internet of Things) - Когда такие встраиваемые системы получают возможность связываться друг с другом и с интернетом.
С чем должен уметь работать инженер IoT:
Микроконтроллеры (MCU)
Микропроцессоры (MPU)
Датчики: Температура, влажность, движение (акселерометр/гироскоп), свет, давление, газ, GPS и т.д.
Интерфейсы связи
Языки программирования:
C: Прямой доступ к железу, минимальные накладки.
C++: Набирает силу для сложных задач с ООП, где ресурсы позволяют.
Python: Для прототипирования, инструментов, мощных MPU (Raspberry Pi) и обработки данных на сервере / шлюзе.
Rust: Новый, но перспективный. Безопасность памяти + производительность как у C/C++. Начинают использовать в ядре Linux.
Assembler: Для самых критичных кусков кода или когда ресурсов очень мало.
ОС:
Без ОС (Bare Metal): Код работает напрямую на процессоре. Максимум контроля, минимум накладок.
RTOS (Real-Time OS): FreeRTOS (самый популярный), Zephyr (набирает ход, современный), ThreadX, VxWorks (для высоконадежных систем). Гарантируют времена реакции.
Linux: Для мощных MPU (Raspberry Pi, BeagleBone). Yocto Project/Buildroot — для сборки кастомных образов.
Блокчейн и Web3
Блокчейн - По сути, это распределенная база данных (цифровой реестр), где записи ("блоки") связаны в цепочку криптографически. Данные хранятся не на одном сервере у корпорации, а у тысяч участников сети
Web3 - Идея следующего поколения интернета поверх блокчейна. Суть такова, пользователь владеет своими данными, цифровыми активами (NFT, токены) и участвует в управлении сервисами. Вместо обычных платформ децентрализованные приложения (dApps).
ЯП:
Solidity: АБСОЛЮТНЫЙ мастхев для Ethereum и EVM-сетей (Polygon, BSC и т.д.). Похож на JavaScript, но со спецификой.
Rust: Доминирует в Solana, Near, Polkadot (Substrate), всё чаще пишут смарт-контракты и на нем. Сложнее, но мощнее.
Vyper (для Ethereum): Альтернатива Solidity, фокус на безопасность и читаемость (синтаксис ближе к Python).
Go: Для разработки нод (клиентов блокчейна), утилит.
Desktop
Десктоп-разработка - Создание приложений, которые работают напрямую на ОС пользователя. В отличие от веба или мобилок, тут есть прямой доступ к железу, файловой системе и нативным API. Мощь, контроль, но и ответственность за стабильность.
Стек:
Нативные технологии:
Windows (C# / .NET):
Языки: C#, C++/CLI
Фреймворки: WPF (XAML + C#), Wndows Forms
macOS:
Языки: Swift, Objective-C
Фреймворки: SwiftUI (новинка), AppKit (старая школа)
Linux:
Языки: C++, C, Python, Rust
Фреймворки: GTK (GNOME), Qt (KDE, кроссплатформенно), wxWidgets
. Кроссплатформенные фреймворки:
Electron: JavaScript + Chromium + Node.js. Плюсы: Пишешь как веб-приложение (HTML/CSS/JS). Минусы: Жрет память как не в себя.
Qt (C++): Мощь, скорость, зрелость. Используют в AutoCAD, Tesla. Поддержка 3D, сетей, БД.
Avalonia (.NET): Кроссплатформенный аналог WPF. Пишешь на C# — работает на Windows/macOS/Linux.
Flutter (Dart): Добрался до десктопа. Пока сыроват, но трендовый.
Tauri (Rust): Альтернатива Electron. Бекенд на Rust, фронт - любая веб-технология. Размер приложения ~10 МБ вместо 150 МБ у Electron.
Разработка корпоративных решений (Enterprise)
Erprise-разработка - Создание софта для крупного бизнеса: банки, страховые, логистика, ритейл, госсектор. Системы обрабатывают миллионы транзакций, хранят терабайты данных и должны работать 24/7.
ЯП:
Java (Spring Boot, Jakarta EE, Quarkus): Король корпов.
C# (.NET Core ASP.NET): Популярен в банках и госсекторе.
Python (Django, FastAPI): Для аналитики, скриптов.
ESB: Apache Camel, MuleSoft, IBM Integration Bus.
API Gateway: Kong, Apigee, AWS API Gateway.
Очереди: Apache Kafka (лидер), RabbitMQ, IBM MQ, Azure Service Bus.
Стандарты: REST/JSON (модерн), SOAP/XML (легаси), gRPC (микросервисы).
SQL: Oracle DB, Microsoft SQL Server, PostgreSQL, IBM Db2. Транзакции, ACID, отчетность.
NoSQL: MongoDB (документы), Cassandra (высокая нагрузка), Redis (кэш/очереди).
Аналитика: Snowflake, Amazon Redshift, Apache Druid.
Финтех
FinTech (Financial Technology) - Область, в которой пишут технологии для финансов. Например, финтехи пишут платёжные системы, необанки, аналитику и бюджетирование, кридитные платформы, алготрейдинг, B2B-решения. Финтех разработчик занимается разработкой: бизопасных API и клиентских приложений; обработкой денежных транзакций, комиссий, волют; реализацией сложных бизнес-правил.
Стек:
Java: Часто используется.
Kotlin: Современная альтернатива Java.
Go: Высокая производительность, минимализм.
Python: Быстрая разработка, аналитика. Скоринг.
C#: Банковский и страховой сектор.
Rust: Безопасность и производительность.
Если понравилась статья - рекомендую подписаться на телеграм‑канал NetIntel. Там вы сможете найти множество полезных материалов по IT и разработке!
Интернет-магазин по продаже различных товаров со своей уникальной идей списков и подарков
Задача
Сделать редизайн сайта на основе предоставленного заказчиком дизайна. Подключение новой оплаты, доставки и других функций.
Решение
1 Адаптивная верстка уникального дизайна.
2 Программирование по разработанной верстке.
- Программирование на OpenCart.
- Подключение отправки форм.
- Подключение оплаты Kaspi.
- Подключение Яндекс доставки.
- Проработка функционала создания списков, дарителей и резервирования подарков.
- Создание мини-игры «Тайный Санта».
- Создание быстрой регистрации
- Создание и настройка личных кабинетов.
3 Настройка панели администратора.
- Редактирование контента.
- Публикация новых проектов и новостей.
- Управление пользователями и их покупками.
- Настройка загрузки товаров.
4 Тестирование продукта.
Результат
Простой и понятный интернет-магазин на OpenCart. На сайте реализована уникальная идея создания списков желаний с возможностью поделиться ими, а также функционала дарителя и резервирования подарков. На сайте созданы мини-игра «Тайный Санта». На сайте есть оплата и доставка товаров.
Корпоративный сайт "под ключ" рассказывающий о инвестиционном фонде, его проектах и задачах
Задача
Создать простой и понятный корпоративный сайт для инвестиционного фонда в ОАЭ для стран Африки. Предоставить посетителям ознакомиться с услугами и проектами фонда, а также отправить заявку на дальнейшее сотрудничество.
Решение
1 Подбор шаблона на WordPress для переработки под потребности Заказчика.
- Сбор требований, анализ конкурентов, переработка структуры шаблона.
- Создание логотипа и разработка прототипа.
2 Программирование по разработанным прототипам.
- Установка и настройка WordPress.
- Подключение отправки форм.
- Переход по ссылкам.
3 Настройка панели администратора.
- Редактирование контента.
- Публикация новых проектов и новостей.
4 Создание уникальных текстов (копирайтинг) .
5 Тестирование продукта.
6 Покупка домена и выделение собственного сервера под нужды Заказчика.
Результат
Простой и понятный корпоративный сайт на CMS WordPress. Сайт отвечает на базовые потребности пользователей: рассказывает о фонде, об услугах, о проекте и последних новостях, а также позволяет связать напрямую с представителями через форму обратной связи.
Проголодались?
Тогда вам срочно нужно сыграть в три простых игры на везение. За победу раздаем промокоды на заказ пиццы и других аппетитных блюд. Попробуете?
Ответ на пост «Я УВОЛИЛ ФРОНТЕНДЕРА. Его заменил ИИ за 0$. Что это значит для джунов?»1
Проблема в том, что джунам будет не на чем учиться. Тогда откуда возьмутся мидлы и синьоры?