Как стать мидлом
1.59K subscribers
513 photos
28 videos
282 links
Помогаем фронтенд-разработчикам прокачать навыки и получить повышение → https://htmlacademy.ru/frontend-engineering

Смотреть шоу «Фронтенд-инженерия» → https://youtube.com/playlist?list=PLQJNT2fdCJnjUCLyAnX8nkxLxWHNSuMDo

Ещё почитать? @htmlacademy
Download Telegram
Паттерны проектирования

Качественная архитектура начинается не с фреймворка, а с мышления. На курсе системно разбираем фундаментальные шаблоны: порождающие (Singleton, Factory Method, Abstract Factory, Builder, Object Pool, Prototype), структурные (Adapter, Bridge, Decorator, Facade, Composite, Proxy), поведенческие (Chain of Responsibility, Command, Iterator, Mediator, Observer, State, Strategy, Visitor, Memento, Template Method) и архитектурные MV* (MVC, MVP, MVVM).

Всё подано в контексте JavaScript и фронтенд-разработки: продуктовые кейсы и практические задания показывают, как применять паттерны на практике — от адаптации «кривых» внешних данных (Adapter) и кэширования без дублирования (Decorator) до ограничения доступа (Proxy), управления состояниями интерфейса и тёмной темой (State), реакций на изменения без «костылей» (Observer) и фильтров в реальном времени (MVVM).

Это курс для будущих инженеров, которые устали от «спагетти» и хотят понимать, почему архитектура работает — а не просто «как заставить код заработать». После него вы начинаете видеть проект как систему взаимосвязей: где фабрика уместна, где декоратор экономит усилия поддержки, а где MV*-подход помогает организовать UI на годы вперёд. #htmlacademy #levelup

🌷 Записаться на курс
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👏53👍1🔥1
Git и GitHub

Курс — про прикладную работу с Git от основы до уверенных навыков: установка и первичная настройка, локальный и удалённый репозитории, ветки и модели ветвления, слияния и разрешение конфликтов, сравнение версий и файлов, откладывание и отмена изменений. Разбираем rebase и cherry-pick, восстановление через reflog, SSH и GPG-подпись коммитов.

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

🔶 Записаться на курс
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥2👎1👏1
📌Алгоритмы и структуры данных: код быстрее, интерфейсы надёжнее

Фронтендеру, который хочет прокачать основы computer science, стоит взглянуть на курс по алгоритмам и структурам данных. Структуры данных и алгоритмы дают предсказуемый код и чёткую архитектуру, а алгоритмические собеседования перестают быть лотереей.

Что разберёте на практике — и где это пригодится прямо в продакшене:

O-большое без теории ради теории — находите «дорогие» циклы ещё до ревью;
Обход деревьев и графов — ускоряете diff-алгоритм шаблонизатора и виртуального DOM;
Хеш-таблицы и Map/Set — убираете дубли среди 100 000 элементов за O(1) вместо O(n);
Поиск и quicksort — «живой» поиск и бесконечный скролл без фризов.

Какой алгоритм в последний раз выручил ваш проект? Делитесь в комментариях.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
3
TypeScript для инженеров: проектирование типов, а не просто аннотации

Если цель — снижать класс ошибок за счёт статической проверки и проектировать выразительный API, посмотрите курс по TypeScript.

Главное, что отрабатываем (кратко и по делу):

🔘 Дженерики с ограничениями: параметризация API без any, вывод и значения по умолчанию.
🔘 Сужение типов и дискриминированные объединения: исчерпывающие проверки, отсутствие «мёртвых» веток.
🔘 Conditional / Mapped / Template literal types: производные модели, безопасные ключи и события.
🔘 Вариантность колбэков и сигнатур: корректная совместимость параметров в обработчиках.
🔘 Брендированные (opaque) типы для идентификаторов и единиц: защита от подстановки «не той строки».

Курс про практику проектирования типов: меньше рантайм-сюрпризов, больше строгости на этапе компиляции. Подробности на лендинге.

https://htmlacademy.ru/levelup/typescript
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥2
Vue.js 3 на практике: Vite, Composition API, Pinia и тесты

На курсе разбираем современные подходы к клиентским приложениями на Vue.js 3: script setup и реактивность, маршрутизацию с guard’ами, управление состоянием в Pinia, работу с HTTP и обработку ошибок, анимации, модульные тесты на Vitest и Vue Test Utils.

Практика — два проекта: учебный таск-менеджер и фронтенд онлайн-пиццерии поверх готового API. Формат — теория → разбор → задачи. В чате отвечаем на вопросы и показываем типичные решения. #htmlacademy #levelup

📌 Программа и детали: https://htmlacademy.ru/levelup/vue
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Сети и протоколы без магии: базовые знания, которые нужны фронтендеру

Разберётесь, как данные реально идут по сети: от модели OSI и стека TCP/IP до различий между HTTP/1.1, HTTP/2 и HTTP/3; когда уместны WebSockets; как работает TLS и проверка сертификатов. С этими знаниями вы осознанно выбираете транспорт под сценарий и понимаете, что происходит при установке защищённого соединения.

Результат — меньше накладных расходов и быстрее метрики вроде TTFB/LCP, плюс снижение рисков уязвимостей за счёт корректной настройки шифрования и аутентификации. #htmlacademy #levelup

🟠 Смотреть программу
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥2🥰1
Webpack без боли: от конфигурации до оптимизации

На курсе вы разберёте Webpack на практике: базовую конфигурацию (entry/output), перенос проекта на webpack, сборку многостраничных приложений, работу с плагинами и обработчиками, asset-modules, code splitting и оптимизации под production.

Каждый модуль — прикладные задачи: настройка npm-скриптов, подключение Babel, ESLint и Prettier, конфигурация плагинов и обработчиков, разделение dev и prod с source maps, уменьшение бандла (минимизация, выделение вендоров). После курса вы сможете добавлять сборщик в проект, создавать и поддерживать конфиги на рабочих проектах, собирать MPA и оптимизировать артефакты перед деплоем. #htmlacademy #levelup

🟢 Смотреть программу
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥2🥰1
Протоколы и сети: веб-безопасность

Фронтенд-инженер должен понимать, как проявляются XSS, CSRF, SQL-инъекции и другие атаки в веб-приложениях, и уметь закрывать их на клиенте в связке с сервером. В этом курсе вы разбираете реальные модели угроз и отрабатываете практики, которые снижает уязвимость фронтенд-компонентов.

На курсе научитесь проектировать CSP под свой проект, безопасно работать с cookie и защищать сессии, валидировать формы и хешировать пароли с солью, распознавать и устранять XSS/SQLi/CSRF, разбираться с DoS/Slowloris, корректно настраивать CORS и понимать сценарии MitM. Формат — «теория + кейсы + практика с эталонными решениями + тесты», по итогам — чек-листы для внедрения в рабочий процесс.

«Вы изучаете угрозы, чтобы их предотвращать. Я изучаю вас — чтобы обходить. Хорошо, что вы хотя бы пытаетесь.»jQweny


🔵 Смотреть программу
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥2🤔1