skillswiki.
Профессии/Frontend-разработчик/Middle
Подборка материалов · Middle

131 статей для Middle Frontend-разработчика: большая подборка

Статьи для самостоятельной разработки интерфейсов: JavaScript и TypeScript, React, Vue, Angular, формы, API, тестирование, сборка и производительность.

131 статей · 10 тем · материалы на русском языке

JavaScript, браузер и сеть

  1. Грамматика и типы

    Чтобы добавлять интерфейсу логику и интерактивность.

  2. Порядок выполнения и обработка ошибок

    Чтобы добавлять интерфейсу логику и интерактивность.

  3. Циклы и итерации

    Чтобы добавлять интерфейсу логику и интерактивность.

  4. Функции

    Чтобы разбивать логику на повторяемые действия.

  5. Выражения и операторы

    Чтобы добавлять интерфейсу логику и интерактивность.

  6. Числа и даты

    Чтобы добавлять интерфейсу логику и интерактивность.

  7. Упорядоченные наборы данных

    Чтобы добавлять интерфейсу логику и интерактивность.

  8. Коллекции

    Чтобы добавлять интерфейсу логику и интерактивность.

  9. Работа с объектами

    Чтобы добавлять интерфейсу логику и интерактивность.

  10. Наследование и цепочка прототипов

    Чтобы добавлять интерфейсу логику и интерактивность.

  11. Использование промисов

    Чтобы добавлять интерфейсу логику и интерактивность.

  12. Итераторы и генераторы

    Чтобы добавлять интерфейсу логику и интерактивность.

  13. Мета-программирование

    Чтобы добавлять интерфейсу логику и интерактивность.

  14. Регулярные выражения

    Чтобы добавлять интерфейсу логику и интерактивность.

  15. Типизированные массивы JavaScript

    Чтобы хранить и обрабатывать наборы данных.

  16. Модули JavaScript

    Чтобы добавлять интерфейсу логику и интерактивность.

  17. Типы и структуры данных JavaScript

    Чтобы добавлять интерфейсу логику и интерактивность.

  18. Операторы сравнения

    Чтобы добавлять интерфейсу логику и интерактивность.

  19. Замыкания

    Чтобы управлять областью видимости данных.

  20. Роадмэп по современному фронтенду от KTS

    Чтобы добавлять интерфейсу логику и интерактивность.

  21. Асинхронное программирование в JavaScript (Callback, Promise, RxJs )

    Чтобы выполнять долгие операции без зависания.

  22. JavaScript однопоточный или многопоточный? Ставим точку

    Чтобы добавлять интерфейсу логику и интерактивность.

  23. Ты наконец-то поймешь асинхронность в JS

    Чтобы выполнять долгие операции без зависания.

  24. Среда выполнения JavaScript простым языком: движок, Event Loop и очереди задач

    Чтобы добавлять интерфейсу логику и интерактивность.

  25. Event Loop. Мифы и реальность

    Чтобы добавлять интерфейсу логику и интерактивность.

  26. Аутентификация для WebSocket и SSE: до сих пор нет стандарта?

    Чтобы добавлять интерфейсу логику и интерактивность.

  27. Асинхронный веб: WebSocket, Server-Sent Events, Long Polling и Short Polling

    Чтобы выполнять долгие операции без зависания.

  28. Анатомия WebSocket: человечный разбор RFC 6455

    Чтобы добавлять интерфейсу логику и интерактивность.

  29. WebSocket и SSE просто, для собеседований и не только

    Чтобы добавлять интерфейсу логику и интерактивность.

TypeScript и моделирование данных

  1. Продвинутый TypeScript

    Чтобы находить ошибки типов до запуска.

  2. Дженерики в TypeScript

    Чтобы находить ошибки типов до запуска.

  3. TypeScript тип any против всех

    Чтобы находить ошибки типов до запуска.

  4. Учимся писать сложные Typescript типы на примере роутинга в React

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  5. TypeScript и все что тебе нужно в разработке

    Чтобы находить ошибки типов до запуска.

  6. Копаемся в TypeScript: пишем свои Utility Types. Ключевое слово infer

    Чтобы находить ошибки типов до запуска.

  7. Очередная статья про систему типов TypeScript

    Чтобы находить ошибки типов до запуска.

  8. TypeScript в React-приложениях. 4. Глубокая типизация

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  9. TypeScript: infer и conditional types. Продвинутый TS на примерах

    Чтобы находить ошибки типов до запуска.

  10. Typescript Generics

    Чтобы находить ошибки типов до запуска.

  11. Рецепты TypeScript: подстановка параметров в путь

    Чтобы находить ошибки типов до запуска.

  12. Рецепты TypeScript: перевод ключей объекта в camelCase

    Чтобы находить ошибки типов до запуска.

  13. Type-level программирование в TypeScript: практические кейсы и обзор возможностей

    Чтобы находить ошибки типов до запуска.

  14. 12 советов по внедрению TypeScript в React-приложениях

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  15. Рекомендации по работе с TypeScript

    Чтобы находить ошибки типов до запуска.

  16. Искусство типизации: TypeScript Utility Types

    Чтобы находить ошибки типов до запуска.

  17. Типы или интерфейсы в TypeScript: что и когда использовать?

    Чтобы находить ошибки типов до запуска.

React: компоненты, хуки и состояние

  1. Автоматизируем переход на React Hooks

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  2. Запрос к API c React Hooks, HOC или Render Prop

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  3. Redux store vs React state

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  4. В чем разница между useLayoutEffect, componentDidMount, useEffect

    Чтобы создавать интерфейсы из переиспользуемых компонентов.

  5. React: Zustand State Manager

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  6. Хуки в React — как надо, когда не надо и нужны ли свои?

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  7. Callback рефы в React: что это такое и где можно применять

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  8. Нужен ли здесь `useEffect`? 12 сценариев из React-код-ревью — от производного состояния до React 19.2

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  9. Улучшаем дизайн React приложения с помощью Compound components

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  10. Улучшаем качество кода React-приложения с помощью Compound Components

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  11. React hooks, как не выстрелить себе в ноги. Часть 3.2: useMemo, useCallback

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  12. Как мемоизация влияет на производительность React-приложения

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  13. Взгляд с другой стороны на useMemo, useCallback и React.memo в React: когда их стоит использовать

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  14. Использование Context API в React для создания глобальной темы приложения

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  15. Dependency Injection в React — максимально просто

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  16. Управление состоянием в React приложениях

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  17. React Context

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  18. 20 частых антипаттернов в React и как их исправить: кратко, понятно, без мифов

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  19. Оптимизация React-приложений: Используем useTransition, useDeferredValue и useOptimistic для плавного UI

    Чтобы собирать интерфейс из переиспользуемых компонентов.

Формы, валидация и загрузка файлов

  1. Разработка сложных форм с React Hook Form

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  2. React Hook Form: создание сложных форм для начинающих

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  3. Работа с массивами в формах(динамическое добавление полей) с использованием библиотеки react-hook-form

    Чтобы хранить и обрабатывать наборы данных.

  4. Год с React Hook Form и Zod: меньше кода, но не без нюансов

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  5. Попытка создать идеальный компонент формы

    Чтобы собирать и проверять пользовательские данные.

  6. Создание простого хука для работы с формами в React на основе `zod`

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  7. Steroids Form — как создать собственный движок форм для React

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  8. Формы как контракт в Next.js: Zod, fieldErrors и одинаковые правила на client и server

    Чтобы собирать и проверять пользовательские данные.

  9. Разрабатываем универсальную форму на React и XState или новые приключения конечного автомата

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  10. Загрузчик файлов для React

    Чтобы собирать интерфейс из переиспользуемых компонентов.

Vue: компоненты и реактивность

  1. Сравнение синтаксисов Vue JS

    Чтобы собирать реактивные интерфейсы на Vue.

  2. Миграция с vue-class-component на vuejs/composition-api

    Чтобы собирать реактивные интерфейсы на Vue.

  3. Миграция на Vue 2.7

    Чтобы собирать реактивные интерфейсы на Vue.

  4. defineExpose() в Vue 3

    Чтобы собирать реактивные интерфейсы на Vue.

  5. Функция Reactive во Vue: как это работает

    Чтобы разбивать логику на повторяемые действия.

  6. Есть много способов сделать это: Vue 3 и взаимодействие компонентов

    Чтобы собирать реактивные интерфейсы на Vue.

  7. Реактивность в Vue

    Чтобы собирать реактивные интерфейсы на Vue.

  8. Сайд эффект реактивности и апдейта компонента во Vue 3

    Чтобы собирать реактивные интерфейсы на Vue.

  9. Vue 3 под капотом и тонкости Composition API: Reactivity, Provide/Inject, Suspense

    Чтобы собирать реактивные интерфейсы на Vue.

  10. Vue 3: Почему ref() — это новая ссылка, а reactive() — обёртка?

    Чтобы собирать реактивные интерфейсы на Vue.

  11. Vue Teleport: как работает

    Чтобы собирать реактивные интерфейсы на Vue.

  12. Рендер-функции и Teleport в Vue.js

    Чтобы разбивать логику на повторяемые действия.

  13. ReactiveEffect во Vue 3: что на самом деле исполняет вашу реактивность

    Чтобы собирать реактивные интерфейсы на Vue.

  14. Значение поменялось, а экран нет: где Vue теряет реактивность и почему это не баг

    Чтобы собирать реактивные интерфейсы на Vue.

Angular и RxJS

  1. Angular: создание кастомного элемента формы и передача в него состояния формы

    Чтобы разрабатывать крупные приложения на Angular.

  2. Как управлять состоянием в Angular по мере роста приложения

    Чтобы разрабатывать крупные приложения на Angular.

  3. Angular — API композиции директив

    Чтобы разрабатывать крупные приложения на Angular.

  4. Прощай, Zone.js: ускоряем Angular с Signal API и Zoneless-подходом

    Чтобы разрабатывать крупные приложения на Angular.

  5. Angular: Создаем multiple checkbox компонент, который подойдет для повторного использования

    Чтобы разрабатывать крупные приложения на Angular.

  6. Построение компонентов с выпадающими блоками с помощью Angular и Material CDK

    Чтобы разрабатывать крупные приложения на Angular.

  7. Angular: ng-content для ng-template

    Чтобы разрабатывать крупные приложения на Angular.

  8. Разработка Angular-приложений и построение их архитектуры

    Чтобы разрабатывать крупные приложения на Angular.

  9. Angular. Работа с template-driven формами

    Чтобы разрабатывать крупные приложения на Angular.

  10. Zoneless Angular 18

    Чтобы разрабатывать крупные приложения на Angular.

  11. Docker для Angular-приложений: от простого к несложному

    Чтобы одинаково запускать приложение в любой среде.

  12. Как использовать менеджер состояний NgRx для Angular-проектов

    Чтобы разрабатывать крупные приложения на Angular.

  13. Что такое инкрементальная гидратация в Angular

    Чтобы разрабатывать крупные приложения на Angular.

  14. Angular сегодня: ключевые изменения последних лет

    Чтобы разрабатывать крупные приложения на Angular.

  15. 5 RxJS операторов в Angular, которые решают 80% проблем

    Чтобы разрабатывать крупные приложения на Angular.

Тестирование

  1. Реализация функции обнаружения

    Чтобы разбивать логику на повторяемые действия.

  2. Эффективное тестирование верстки

    Чтобы находить ошибки до выпуска продукта.

  3. Тестирование с Ava.js

    Чтобы находить ошибки до выпуска продукта.

  4. Анализируем виды тестов для Frontend

    Чтобы находить ошибки до выпуска продукта.

  5. Тестирование Frontend

    Чтобы находить ошибки до выпуска продукта.

  6. Playwright: веб-тестирование без драмы

    Чтобы находить ошибки до выпуска продукта.

  7. End-to-end тестирование React приложения с помощью Playwright

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  8. Playwright: игра в скриншотные тесты

    Чтобы находить ошибки до выпуска продукта.

  9. Быстрый старт автотестирования с Playwright

    Чтобы находить ошибки до выпуска продукта.

  10. Playwright не спасает от флапающих тестов: разбираемся, как он ждёт на самом деле

    Чтобы находить ошибки до выпуска продукта.

  11. Пишем собственные React-хуки на TypeScript и тестируем их с React Testing Library (часть 1)

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  12. Как я начал писать unit-тесты для Vue. Part deux: год спустя…

    Чтобы находить ошибки до выпуска продукта.

  13. Юнит-тестирование для веб-разработчиков: концепции и аспекты, которых не найти в документации

    Чтобы находить ошибки до выпуска продукта.

  14. Тест зелёный, фича сломана: семь случаев, когда проверка совпала по неверной причине

    Чтобы находить ошибки до выпуска продукта.

  15. Как тестировать современный фронтенд

    Чтобы находить ошибки до выпуска продукта.

Сборка и инструменты

  1. Webpack 5 — Asset Modules

    Чтобы настроить сборку и оптимизацию фронтенда.

  2. TypeScript для конфигурации WebPack (FE and BE)

    Чтобы находить ошибки типов до запуска.

  3. Миграция с Webpack и react-scripts на Vite: Путь к Быстрому и Легковесному React

    Чтобы собирать интерфейс из переиспользуемых компонентов.

  4. Переход с Vue-CLI и Webpack на Vite: ускоряем разработку Vue 3

    Чтобы настроить сборку и оптимизацию фронтенда.

  5. Пишем свой плагин для Webpack

    Чтобы настроить сборку и оптимизацию фронтенда.

  6. Сборщики Frontend и когда их применять

    Чтобы настроить сборку и оптимизацию фронтенда.

  7. Не спешите выкидывать Webpack: разбор альтернатив и реальных сценариев миграции

    Чтобы настроить сборку и оптимизацию фронтенда.

Производительность и рост

  1. Улучшаем производительность: виртуальный рендеринг для больших объемов данных

    Чтобы находить узкие места и ускорять систему.

  2. Улучшаем производительность сайта с помощью CSS

    Чтобы находить узкие места и ускорять систему.

  3. Как на практике работать над перфомансом веб-приложения: опыт Авто.ру

    Чтобы находить узкие места и ускорять систему.

  4. Не JavaScript’ом единым: как фронтенд-разработчику затащить на собесе

    Чтобы находить узкие места и ускорять систему.

Планирование разработки

  1. Планирование проекта

    Чтобы выбрать приоритеты и согласовать действия.

Все подборки для Frontend-разработчика →