#Frontend #Backend #WebDevelopment #DevOps
#️⃣ Тесты - это не просто дополнительная работа, а важный инструмент разработки, который:
• Делает код более надёжным
• Служит актуальной документацией
• Помогает находить ошибки на ранних этапах
➖ Основные виды тестов:
• Unit-тесты (модульные) - проверяют отдельные функции/модули
• Интеграционные - тестируют взаимодействие компонентов
• E2E (End-to-End) - проверяют работу всего приложения
• Приёмочные - финальная проверка перед релизом
➖ Ключевые преимущества:
• Помогают обнаружить крайние случаи
• Уменьшают количество регрессий
• Дают уверенность при рефакторинге
• Облегчают обновление зависимостей
➖ Когда можно не писать тесты:
• При разработке прототипа
• В краткосрочных проектах, где тесты не успеют окупиться
❗️ Издержки:
• Требуют больше времени на старте
• Нужна продуманная структура для тестовых данных
• Необходима настройка CI
🔗 Ссылка
🌐 Новости
🖥 Платформа
• Делает код более надёжным
• Служит актуальной документацией
• Помогает находить ошибки на ранних этапах
• Unit-тесты (модульные) - проверяют отдельные функции/модули
• Интеграционные - тестируют взаимодействие компонентов
• E2E (End-to-End) - проверяют работу всего приложения
• Приёмочные - финальная проверка перед релизом
• Помогают обнаружить крайние случаи
• Уменьшают количество регрессий
• Дают уверенность при рефакторинге
• Облегчают обновление зависимостей
• При разработке прототипа
• В краткосрочных проектах, где тесты не успеют окупиться
• Требуют больше времени на старте
• Нужна продуманная структура для тестовых данных
• Необходима настройка CI
Вывод: несмотря на начальные затраты времени, тестирование окупается в долгосрочной перспективе повышением надёжности и облегчением поддержки кода.
Please open Telegram to view this post
VIEW IN TELEGRAM
#DevOps #Frontend
🕔 Как измерить скорость вашего сайта: просто о сложном
Представьте, что ваш сайт - это ресторан. Как оценить его работу? Время подачи блюд, скорость обслуживания, удобство расположения столов... В мире веб-разработки есть похожие метрики, и сейчас мы разберем их без лишних сложностей.
✅ Ключевые показатели Web Vitals
Google создал три главные метрики, которые говорят о том, насколько "вкусный" ваш сайт:
- LCP (Largest Contentful Paint) - сколько времени нужно, чтобы посетитель увидел основное содержимое страницы. Как если бы вы ждали, когда принесут главное блюдо.
- FID (First Input Delay) - как быстро сайт реагирует на первое действие пользователя. Представьте, как долго официант подходит к столику после того, как вы его позвали.
- CLS (Cumulative Layout Shift) - насколько стабильно содержимое на странице. Это как если бы тарелки на вашем столе вдруг начали двигаться сами по себе - не очень приятно, правда?
✅ Инструменты для измерения
1. Встроенные в браузер:
- Chrome DevTools - как профессиональная кухня, где можно посмотреть каждый этап приготовления
- Network Panel - показывает, как быстро "доставляются ингредиенты" на вашу страницу
2. Онлайн-сервисы:
- Google Lighthouse - как ресторанный критик, который детально оценивает работу сайта
- PageSpeed Insights - дает рекомендации по улучшению, как опытный шеф-повар
- WebPageTest - позволяет протестировать сайт в разных "условиях подачи"
✅ Постоянный мониторинг
- Google Analytics следит за скоростью в реальном времени
- Специальные сервисы (New Relic, Datadog) - как камеры наблюдения на кухне, показывают полную картину происходящего
✅ Способы ускорения
- Использование CDN - как открытие филиалов ресторана ближе к клиентам
- Оптимизация ресурсов - уменьшение "порций" без потери качества
- Грамотное кэширование - как заготовка полуфабрикатов для быстрой подачи
🔗 Статья
🌐 Новости
🖥 Платформа
Представьте, что ваш сайт - это ресторан. Как оценить его работу? Время подачи блюд, скорость обслуживания, удобство расположения столов... В мире веб-разработки есть похожие метрики, и сейчас мы разберем их без лишних сложностей.
Google создал три главные метрики, которые говорят о том, насколько "вкусный" ваш сайт:
- LCP (Largest Contentful Paint) - сколько времени нужно, чтобы посетитель увидел основное содержимое страницы. Как если бы вы ждали, когда принесут главное блюдо.
- FID (First Input Delay) - как быстро сайт реагирует на первое действие пользователя. Представьте, как долго официант подходит к столику после того, как вы его позвали.
- CLS (Cumulative Layout Shift) - насколько стабильно содержимое на странице. Это как если бы тарелки на вашем столе вдруг начали двигаться сами по себе - не очень приятно, правда?
1. Встроенные в браузер:
- Chrome DevTools - как профессиональная кухня, где можно посмотреть каждый этап приготовления
- Network Panel - показывает, как быстро "доставляются ингредиенты" на вашу страницу
2. Онлайн-сервисы:
- Google Lighthouse - как ресторанный критик, который детально оценивает работу сайта
- PageSpeed Insights - дает рекомендации по улучшению, как опытный шеф-повар
- WebPageTest - позволяет протестировать сайт в разных "условиях подачи"
- Google Analytics следит за скоростью в реальном времени
- Специальные сервисы (New Relic, Datadog) - как камеры наблюдения на кухне, показывают полную картину происходящего
- Использование CDN - как открытие филиалов ресторана ближе к клиентам
- Оптимизация ресурсов - уменьшение "порций" без потери качества
- Грамотное кэширование - как заготовка полуфабрикатов для быстрой подачи
Please open Telegram to view this post
VIEW IN TELEGRAM
#Backend #Frontend #DevOps
🐱 Backend cheats
По-моему, это самая понятная шпаргалка, которая позиционирует себя, как ориентированная на backend-разработчиков, но мы убеждены, что она будет полезна каждому.
Тонна наглядных примеров, кратких и понятных описаний, ссылок на источники. В общем, очень достойно, советую
🌐 Новости
🖥 Платформа
По-моему, это самая понятная шпаргалка, которая позиционирует себя, как ориентированная на backend-разработчиков, но мы убеждены, что она будет полезна каждому.
Тонна наглядных примеров, кратких и понятных описаний, ссылок на источники. В общем, очень достойно, советую
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2❤1🔥1
#Frontend
🟡 ReacType: Конструктор React-компонентов
ReacType — бесплатный инструмент для визуального проектирования React-компонентов с возможностью
экспорта кода. Позволяет быстро создавать структуру приложения без ручного написания кода.
Возможности:
⏺ Создание компонентов — добавление HTML-элементов и собственных компонентов.
⏺ Генерация кода — автоматическое создание файлов React-компонентов.
⏺ Состояние и пропсы — поддержка
⏺ Настройка стилей — задание
⏺ Экспорт кода — выгрузка
Как работать?
1. Создать проект — открыть ReacType и выбрать новый или существующий проект.
2. Добавить компоненты — использовать div, button, input, Header, Form и др.
3. Настроить логику — добавить useState, props, useEffect или Context API.
4. Задать стили — использовать CSS или Tailwind.
5. Экспортировать код — выгрузить .jsx или .tsx и доработать в редакторе.
Преимущества:
➕ Быстрое проектирование без ручной верстки.
➕ Чистый код, готовый к доработке.
➕ Удобство для команд — визуальное представление архитектуры.
➕ Гибкость — редактируемый экспортированный код.
🔗 Ссылка
🌐 Новости
🖥 Платформа
ReacType — бесплатный инструмент для визуального проектирования React-компонентов с возможностью
экспорта кода. Позволяет быстро создавать структуру приложения без ручного написания кода.
Возможности:
useState
, useEffect
, props
и Context API
. className
, работа с CSS и Tailwind. .jsx
или .tsx
для использования в проектах. Как работать?
1. Создать проект — открыть ReacType и выбрать новый или существующий проект.
2. Добавить компоненты — использовать div, button, input, Header, Form и др.
3. Настроить логику — добавить useState, props, useEffect или Context API.
4. Задать стили — использовать CSS или Tailwind.
5. Экспортировать код — выгрузить .jsx или .tsx и доработать в редакторе.
Преимущества:
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
#Frontend
⏺ Что такое JSON и как с ним работать?
JSON (JavaScript Object Notation) — это текстовый формат для хранения и передачи данных. Он широко используется в API, базах данных, веб-приложениях и мобильных играх.
⏺ Структура JSON
- Данные представляются в виде структуры «ключ-значение».
- Объекты записываются в
- Массивы хранятся в
Пример:
⏺ Типы данных в JSON
- Объекты — сложные сущности, например, профиль пользователя.
- Массивы — списки однотипных данных, например, товары в каталоге.
- Строки — текстовая информация.
- Числа — целые и дробные, поддерживают отрицательные значения.
- Булевы значения —
- Null — обозначает отсутствие данных.
⏺ Преимущества JSON
- Компактный, экономит трафик.
- Читаемый человеком и понятный машинам.
- Поддерживается большинством языков программирования.
⏺ JSON vs другие форматы
- XML — громоздкий, но позволяет задавать атрибуты.
- YAML — проще читается, но чувствителен к отступам.
⏺ Работа с JSON в JavaScript
-
-
⏺ Дополненные версии JSON
- JSON5 — поддерживает комментарии, одинарные кавычки и Infinity.
- JSON Schema — позволяет задавать правила для структуры JSON.
⏺ Безопасность при работе с JSON
- Возможные угрозы: JSON Injection, XSS, SQL-инъекции.
- Решения: валидация данных, санитизация, использование безопасных запросов.
⏺ Как открыть JSON?
- Любой текстовый редактор (VS Code, Sublime Text).
- Онлайн-инструменты для проверки и форматирования JSON.
🔗 Статья
🌐 Новости
🖥 Платформа
JSON (JavaScript Object Notation) — это текстовый формат для хранения и передачи данных. Он широко используется в API, базах данных, веб-приложениях и мобильных играх.
- Данные представляются в виде структуры «ключ-значение».
- Объекты записываются в
{}
и состоят из ключей (в двойных кавычках) и значений. - Массивы хранятся в
[]
и содержат однотипные данные. Пример:
{
"user": {
"name": "Алекс",
"age": 30,
"skills": ["JavaScript", "Python", "SQL"]
}
}
- Объекты — сложные сущности, например, профиль пользователя.
- Массивы — списки однотипных данных, например, товары в каталоге.
- Строки — текстовая информация.
- Числа — целые и дробные, поддерживают отрицательные значения.
- Булевы значения —
true
или false
, полезны для условий. - Null — обозначает отсутствие данных.
- Компактный, экономит трафик.
- Читаемый человеком и понятный машинам.
- Поддерживается большинством языков программирования.
- XML — громоздкий, но позволяет задавать атрибуты.
- YAML — проще читается, но чувствителен к отступам.
-
JSON.stringify(obj)
— превращает объект в строку JSON. -
JSON.parse(jsonString)
— преобразует JSON-строку в объект. - JSON5 — поддерживает комментарии, одинарные кавычки и Infinity.
- JSON Schema — позволяет задавать правила для структуры JSON.
- Возможные угрозы: JSON Injection, XSS, SQL-инъекции.
- Решения: валидация данных, санитизация, использование безопасных запросов.
- Любой текстовый редактор (VS Code, Sublime Text).
- Онлайн-инструменты для проверки и форматирования JSON.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#Frontend
Мощь FFmpeg в браузере
FFmpeg.wasm - это порт популярного фреймворка FFmpeg в WebAssembly, который позволяет обрабатывать видео и аудио прямо в браузере. Это решает проблему обработки медиафайлов без необходимости отправки их на сервер.
1⃣ Какие задачи решает FFmpeg.wasm?
- Обрезка видео и аудио
- Конвертация форматов
- Изменение размера видео
- Применение фильтров и эффектов
- Извлечение аудиодорожки
- Создание превью и миниатюр
2⃣ Какие есть ограничения?
⏺ Размер библиотеки:
- Базовый модуль около 25MB
- Дополнительные кодеки увеличивают размер
⏺ Требования к браузеру:
- Поддержка WebAssembly
- Поддержка SharedArrayBuffer
- Специальные заголовки COOP/COEP
⏺ Ограничения производительности:
- Работа с большими файлами может быть медленной
- Ограничения памяти браузера
3⃣ Когда стоит использовать FFmpeg.wasm?
⏺ Подходит для:
- Простой обработки видео
- Приложений с приватностью данных
- Небольших проектов
⏺ Не подходит для:
- Сложной видеообработки
- Работы с большими файлами
- Приложений с высокими требованиями к производительности
Пример реализации приложения для обрезки видео можете посмотреть здесь
🌐 Новости
🖥 Платформа
Мощь FFmpeg в браузере
FFmpeg.wasm - это порт популярного фреймворка FFmpeg в WebAssembly, который позволяет обрабатывать видео и аудио прямо в браузере. Это решает проблему обработки медиафайлов без необходимости отправки их на сервер.
- Обрезка видео и аудио
- Конвертация форматов
- Изменение размера видео
- Применение фильтров и эффектов
- Извлечение аудиодорожки
- Создание превью и миниатюр
- Базовый модуль около 25MB
- Дополнительные кодеки увеличивают размер
- Поддержка WebAssembly
- Поддержка SharedArrayBuffer
- Специальные заголовки COOP/COEP
- Работа с большими файлами может быть медленной
- Ограничения памяти браузера
- Простой обработки видео
- Приложений с приватностью данных
- Небольших проектов
- Сложной видеообработки
- Работы с большими файлами
- Приложений с высокими требованиями к производительности
Пример реализации приложения для обрезки видео можете посмотреть здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
#Frontend
Эй! Давай создадим свою слот-машину, как в онлайн-казино! Это будет классный проект, где мы сделаем три вертикальных слота с эмодзи фруктов и овощей.
Сначала мы подготовим HTML-страничку с контейнерами для слотов и кнопкой. Потом добавим стиль, чтобы всё выглядело круто. А после этого напишем скрипт, который будет случайным образом менять эмодзи, когда мы будем нажимать на кнопку.
Также можем добавить какие-нибудь улучшения, например, проверку совпадений или звуки, когда слоты крутятся. В общем, будет весело и полезно! Попробуем?
🔗 Статья
🌐 Новости
🖥 Платформа
Эй! Давай создадим свою слот-машину, как в онлайн-казино! Это будет классный проект, где мы сделаем три вертикальных слота с эмодзи фруктов и овощей.
Сначала мы подготовим HTML-страничку с контейнерами для слотов и кнопкой. Потом добавим стиль, чтобы всё выглядело круто. А после этого напишем скрипт, который будет случайным образом менять эмодзи, когда мы будем нажимать на кнопку.
Также можем добавить какие-нибудь улучшения, например, проверку совпадений или звуки, когда слоты крутятся. В общем, будет весело и полезно! Попробуем?
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
#Frontend
🎓 Crunchzilla - это образовательная платформа, которая предлагает несколько интерактивных обучающих инструментов для изучения JavaScript.
На сайте представлены следующие программы:
1. Code Monster - интерактивный учебник по JavaScript для детей. Учит базовым концепциям программирования через создание анимации и графики.
2. Code Maven - более продвинутая версия для подростков и взрослых. Покрывает более сложные концепции JavaScript и создание интерактивных визуализаций.
3. Game Maven - учит создавать игры с использованием JavaScript, включая управление физикой, детектирование столкновений и другие игровые механики.
Это отличный способ для начинающих узнать основы программирования в интерактивной форме.
🔗 Ссылка
🌐 Новости
🖥 Платформа
На сайте представлены следующие программы:
1. Code Monster - интерактивный учебник по JavaScript для детей. Учит базовым концепциям программирования через создание анимации и графики.
2. Code Maven - более продвинутая версия для подростков и взрослых. Покрывает более сложные концепции JavaScript и создание интерактивных визуализаций.
3. Game Maven - учит создавать игры с использованием JavaScript, включая управление физикой, детектирование столкновений и другие игровые механики.
Все эти инструменты построены по принципу "учись, делая" - они предлагают пошаговые инструкции, которые пользователь выполняет прямо в браузере, сразу видя результаты своего кода.
Это отличный способ для начинающих узнать основы программирования в интерактивной форме.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
#Frontend
🏗️ Шаблоны проектирования
Что такое шаблоны проектирования:
- Руководства по решению конкретных проблем
- Не являются законченными архитектурными решениями
- Описывают подход к решению проблемы, а не её поиск
1️⃣ Порождающие шаблоны
Описывают механизмы создания объектов:
Простая фабрика
- Генерирует экземпляр объекта без предоставления логики экземпляра
- Пример: создание дверей на фабрике
Фабричный метод
- Использует генерирующие методы для создания объектов
- Пример: создание интервьюеров на фабрике
Абстрактная фабрика
- Группирует индивидуальные фабрики без указания конкретных классов
- Пример: создание дверей и специалистов для их установки
Строитель
- Помогает при создании объектов с несколькими свойствами или большим количеством этапов
- Пример: создание бургеров с различными ингредиентами
- Позволяет добавлять новые опции без изменения структуры
Прототип
- Создаёт объекты путём клонирования существующего объекта
- Пример: клонирование объекта «Овца» для создания новых объектов
- Используется, когда создание объекта с нуля дороже клонирования
Одиночка
- Ограничивает создание класса единственным объектом
- Пример: создание единственного экземпляра класса «Президент»
- Антипаттерн, так как вносит глобальное состояние в приложение
2️⃣ Структурные шаблоны
Определяют способ взаимоотношений между сущностями:
Адаптер
- Помещает несовместимый объект в обёртку для совместимости с другим классом
- Пример: адаптер для совместимости дикой собаки с охотником
Мост
- Предпочитает компоновку наследованию
- Пример: реализация тем оформления веб-страниц
Компоновщик
- Позволяет клиентам обрабатывать объекты в едином порядке
- Пример: обработка сотрудников компании как единой группы, с расчетом зарплаты
Декоратор
- Позволяет динамически изменять поведение объекта
- Пример: добавление ингредиентов к кофе (молоко, взбитые сливки, ваниль)
Фасад
- Предоставляет упрощённый интерфейс для сложной подсистемы
- Пример: компьютерный фасад с функциями включения и выключения
Приспособленец
- Минимизирует использование памяти за счёт общего использования объектов
- Пример: кэширование типов чая в чайном магазине
Заместитель
- Представляет функциональность другого класса
- Пример: класс безопасности проверяет пароль и выполняет функции двери
3️⃣ Поведенческие шаблоны
Определяют алгоритмы и способы взаимодействия объектов:
Цепочка ответственности
- Создание цепочек объектов для обработки запросов
- Пример: банковский счёт и цепочка оплаты
Команда
- Инкапсуляция действий в объекты
- Пример: система заказов в ресторане и пульт управления
Итератор
- Доступ к элементам объекта без раскрытия базового представления
- Пример: перебор радиостанций
Посредник
- Добавление стороннего объекта для управления взаимодействием
- Пример: чат-комната как посредник между пользователями
Хранитель
- Фиксирует текущее состояние объекта для лёгкого восстановления
- Пример: сохранение состояния текстового редактора
Наблюдатель
- Определяет зависимость между объектами для уведомления об изменениях
- Пример: уведомления о новых вакансиях для соискателей
Посетитель
- Позволяет добавлять будущие операции без изменения объектов
- Пример: зоопарк с различными видами животных и типами посетителей
Стратегия
- Переключается между алгоритмами в зависимости от ситуации
- Пример: выбор между пузырьковой и быстрой сортировкой
Состояние
- Меняет поведение класса при изменении состояния
- Пример: инструмент «Кисть» в графическом редакторе
- Реализует машину состояний объектно-ориентированным способом
- Каждое состояние представлено производным классом
- Пример: текстовый редактор с различными начертаниями текста
Шаблонный метод
- Определяет каркас выполнения алгоритма
- Реализация этапов делегируется дочерним классам
- Пример: инструмент для сборки и тестирования с реализациями для Android и iOS
🔗 Ссылка
🌐 Новости
🖥 База вопросов
Что такое шаблоны проектирования:
- Руководства по решению конкретных проблем
- Не являются законченными архитектурными решениями
- Описывают подход к решению проблемы, а не её поиск
Описывают механизмы создания объектов:
Простая фабрика
- Генерирует экземпляр объекта без предоставления логики экземпляра
- Пример: создание дверей на фабрике
Фабричный метод
- Использует генерирующие методы для создания объектов
- Пример: создание интервьюеров на фабрике
Абстрактная фабрика
- Группирует индивидуальные фабрики без указания конкретных классов
- Пример: создание дверей и специалистов для их установки
Строитель
- Помогает при создании объектов с несколькими свойствами или большим количеством этапов
- Пример: создание бургеров с различными ингредиентами
- Позволяет добавлять новые опции без изменения структуры
Прототип
- Создаёт объекты путём клонирования существующего объекта
- Пример: клонирование объекта «Овца» для создания новых объектов
- Используется, когда создание объекта с нуля дороже клонирования
Одиночка
- Ограничивает создание класса единственным объектом
- Пример: создание единственного экземпляра класса «Президент»
- Антипаттерн, так как вносит глобальное состояние в приложение
Определяют способ взаимоотношений между сущностями:
Адаптер
- Помещает несовместимый объект в обёртку для совместимости с другим классом
- Пример: адаптер для совместимости дикой собаки с охотником
Мост
- Предпочитает компоновку наследованию
- Пример: реализация тем оформления веб-страниц
Компоновщик
- Позволяет клиентам обрабатывать объекты в едином порядке
- Пример: обработка сотрудников компании как единой группы, с расчетом зарплаты
Декоратор
- Позволяет динамически изменять поведение объекта
- Пример: добавление ингредиентов к кофе (молоко, взбитые сливки, ваниль)
Фасад
- Предоставляет упрощённый интерфейс для сложной подсистемы
- Пример: компьютерный фасад с функциями включения и выключения
Приспособленец
- Минимизирует использование памяти за счёт общего использования объектов
- Пример: кэширование типов чая в чайном магазине
Заместитель
- Представляет функциональность другого класса
- Пример: класс безопасности проверяет пароль и выполняет функции двери
Определяют алгоритмы и способы взаимодействия объектов:
Цепочка ответственности
- Создание цепочек объектов для обработки запросов
- Пример: банковский счёт и цепочка оплаты
Команда
- Инкапсуляция действий в объекты
- Пример: система заказов в ресторане и пульт управления
Итератор
- Доступ к элементам объекта без раскрытия базового представления
- Пример: перебор радиостанций
Посредник
- Добавление стороннего объекта для управления взаимодействием
- Пример: чат-комната как посредник между пользователями
Хранитель
- Фиксирует текущее состояние объекта для лёгкого восстановления
- Пример: сохранение состояния текстового редактора
Наблюдатель
- Определяет зависимость между объектами для уведомления об изменениях
- Пример: уведомления о новых вакансиях для соискателей
Посетитель
- Позволяет добавлять будущие операции без изменения объектов
- Пример: зоопарк с различными видами животных и типами посетителей
Стратегия
- Переключается между алгоритмами в зависимости от ситуации
- Пример: выбор между пузырьковой и быстрой сортировкой
Состояние
- Меняет поведение класса при изменении состояния
- Пример: инструмент «Кисть» в графическом редакторе
- Реализует машину состояний объектно-ориентированным способом
- Каждое состояние представлено производным классом
- Пример: текстовый редактор с различными начертаниями текста
Шаблонный метод
- Определяет каркас выполнения алгоритма
- Реализация этапов делегируется дочерним классам
- Пример: инструмент для сборки и тестирования с реализациями для Android и iOS
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
#Frontend
🍪 Работа с куки: эволюция подходов
Работа с куки в JavaScript никогда не была удобной. Метод появился в 1996 году и почти не изменился. Разберем разницу между старым и новым подходом.
1️⃣ Классический способ (document.cookie)
Недостатки:
- Синхронные операции блокируют поток
- Нельзя узнать срок действия или домен куки
- Неудобно работать с несколькими куки
- Нельзя использовать в сервис-воркерах
2️⃣ Современный Cookie Store API
Преимущества:
- Асинхронный API не блокирует поток
- Доступ ко всей информации о куки
- Работает в сервис-воркерах
- Подписка на изменения куки
🔗 Ссылка
🌐 Новости
🖥 База вопросов
🍪 Работа с куки: эволюция подходов
Работа с куки в JavaScript никогда не была удобной. Метод появился в 1996 году и почти не изменился. Разберем разницу между старым и новым подходом.
Недостатки:
- Синхронные операции блокируют поток
- Нельзя узнать срок действия или домен куки
- Неудобно работать с несколькими куки
- Нельзя использовать в сервис-воркерах
Преимущества:
- Асинхронный API не блокирует поток
- Доступ ко всей информации о куки
- Работает в сервис-воркерах
- Подписка на изменения куки
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Разработка игр на JS.pdf
2.3 MB
#Frontend
🎮 Разработка игр на JavaScript
Это руководство посвящено основам разработки 2D-игр для одного игрока на JavaScript. Материал представлен в практическом формате: каждая глава последовательно раскрывает создание различных игровых элементов. Вместо отдельного раздела по основам JavaScript ключевые аспекты языка объясняются по мере изучения основного материала.
🌐 Новости
🖥 База вопросов
Это руководство посвящено основам разработки 2D-игр для одного игрока на JavaScript. Материал представлен в практическом формате: каждая глава последовательно раскрывает создание различных игровых элементов. Вместо отдельного раздела по основам JavaScript ключевые аспекты языка объясняются по мере изучения основного материала.
Please open Telegram to view this post
VIEW IN TELEGRAM
#Frontend
Preact vs React: сравнение производительности
Preact — это легковесная альтернатива React, обладающая всеми его возможностями, но при этом занимающая всего 3 КБ! Для сравнения, React + ReactDOM весят около 41 КБ (gzip).
🔥 Преимущества Preact:
🔸 Облегченный виртуальный DOM
🔸 Оптимизация производительности по умолчанию
🔸 Простая интеграция
🔸 PWA по умолчанию
📎 Сравнение производительности React и Preact
1.Дашборд на React:
🔸 Использовала Create React App
🔸 Разделила код на уровне маршрутов
🔸 Результат в GTMetrix: 80% (оценка B)
🔸 LCP (загрузка основного контента): ~1 сек
🔸 Время полной загрузки: ~2 сек
2.Дашборд на Preact
🔸 Использовала preact-cli
🔸 Результат в GTMetrix: 100% (оценка A)
🔸 LCP: <500 мс
🔸 Полная загрузка: ~1,3 сек
🔸 TTFB (время до первого байта): 179 мс
❗️ Ограничения Preact
* Приостановленная (`Suspense`) и отложенная загрузка (`Lazy`) пока экспериментальны
* Некоторые API React могут требовать адаптации (`preact/compat`)
📎 Ссылка
🎙 Новости
📝 База вопросов
Preact vs React: сравнение производительности
Preact — это легковесная альтернатива React, обладающая всеми его возможностями, но при этом занимающая всего 3 КБ! Для сравнения, React + ReactDOM весят около 41 КБ (gzip).
1.Дашборд на React:
2.Дашборд на Preact
* Приостановленная (`Suspense`) и отложенная загрузка (`Lazy`) пока экспериментальны
* Некоторые API React могут требовать адаптации (`preact/compat`)
- Размер: React ~41 КБ vs Preact 3 КБ
- LCP: React ~1 сек vs Preact <500 мс
- Время полной загрузки: React ~2 сек vs Preact 1,3 сек
- Оценка GTMetrix: React B (80%) vs Preact A (100%)
- Preact выигрывает по производительности: меньше размер, быстрее загрузка
- Отлично подходит для легковесных и PWA-приложений
- Но есть нюансы с совместимостью React API
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
#Frontend
5 проектов, которые помогут освоить React через практику:
1️⃣ Целевая страница (landing page) - отличный способ поработать с интерактивными интерфейсами. Создайте страницу с навигацией, слайдером, разделами и футером. Для вдохновения изучите целевые страницы Netflix, Starbucks или Tesla.
2️⃣ Приложение прогноза погоды - простой проект, использующий стороннее API для отображения данных о погоде по дате и местоположению. Сделайте его привлекательным, добавьте функцию поиска места и темный режим.
3️⃣ Приложение списка покупок - хороший старт перед разработкой сложных e-commerce сайтов. Пользователи смогут добавлять/удалять товары с автоматическим пересчетом цены. Используйте create-react-app, хуки React, Context API или Redux для управления состоянием.
4️⃣ Приложение для просмотра фильмов - создайте каталог фильмов с использованием хуков React, Context API, React Router и MovieDB API. Добавьте страницы отдельных фильмов, поиск, фильтрацию по категориям и темный режим.
5️⃣ Блог - можно создать используя только React, но для SEO-оптимизации лучше применить генератор статических сайтов вроде Gatsby или NextJS.
Практика - лучший способ усовершенствовать навыки в любых технологиях. Эти проекты помогут вам лучше понять React и увереннее с ним работать.
📎 Ссылка
🎙 Новости
📝 База вопросов
5 проектов, которые помогут освоить React через практику:
Практика - лучший способ усовершенствовать навыки в любых технологиях. Эти проекты помогут вам лучше понять React и увереннее с ним работать.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤2
#Frontend
✏️ TypeScript
Если давно хотели разобраться с TypeScript, но не знали с чего начать — попробуйте курс на Code Basics. Он бесплатный, практикический и подходит даже для тех, кто только начал путь во фронтенде.
Вас ждут:
Курс отлично дополняет знания по JavaScript и помогает перейти к более стабильной и предсказуемой разработке.
Подходит как новичкам, так и тем, кто уже писал на TS, но хочет систематизировать знания.
📎 Ссылка
🎙 Новости
📝 База вопросов
Если давно хотели разобраться с TypeScript, но не знали с чего начать — попробуйте курс на Code Basics. Он бесплатный, практикический и подходит даже для тех, кто только начал путь во фронтенде.
Вас ждут:
- упражнения с автопроверкой;
- постепенное введение от базовых типов до продвинутых тем;
- реальные задачи, похожие на то, что делают в продакшене;
- и всё это на русском языке.
Курс отлично дополняет знания по JavaScript и помогает перейти к более стабильной и предсказуемой разработке.
Подходит как новичкам, так и тем, кто уже писал на TS, но хочет систематизировать знания.
Please open Telegram to view this post
VIEW IN TELEGRAM
Code-Basics
Обучение TypeScript с нуля
Прокачайте свои знания в бесплатном курсе по Typescript | Интерактивные упражнения прямо в браузере | Бесплатный курс TypeScript от CodeBasics
#Frontend
📝 Условия в CSS: решения для работы прямо сейчас
Ждёте когда в CSS появится полноценная функция if()?
Хорошая новость: она уже в разработке!
Плохая: ждать придётся
Но есть способы реализовать условную логику уже сегодня
Что можно использовать прямо сейчас:
🔸 Двоичная линейная интерполяция — идеальна для работы с числовыми значениями
🔸 Хаки с переключателями — используют возможности функции var() с запасными значениями
🔸 Методы на основе анимации — для работы с ключевыми словами
🔸 Измельчение типа — гибкий способ преобразования ключевых слов в числа
Выбор метода зависит от ваших потребностей, но не забывайте главный принцип: инкапсулируйте сложность, чтобы она не влияла на пользователей ваших компонентов.
Полный разбор включает детальные примеры кода, ограничения каждого метода и советы по их комбинированию для создания более сложных решений⬇️
📎 Ссылка
🎙 Новости
📝 База вопросов
Ждёте когда в CSS появится полноценная функция if()?
Хорошая новость: она уже в разработке!
Плохая: ждать придётся
Но есть способы реализовать условную логику уже сегодня
Что можно использовать прямо сейчас:
Выбор метода зависит от ваших потребностей, но не забывайте главный принцип: инкапсулируйте сложность, чтобы она не влияла на пользователей ваших компонентов.
Полный разбор включает детальные примеры кода, ограничения каждого метода и советы по их комбинированию для создания более сложных решений
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
#Frontend
💻 CSS наконец-то становится языком программирования!
В Chrome 137 появилась долгожданная функция
Как это работает:
Что это даёт:
🔖 Пример с атрибутами:
💡 Пока что:
- Только Chrome 137+
- Другие браузеры в разработке
- Можно тестировать в Chrome Canary с флагом
📎 Статья
🎙 Новости
📝 База вопросов
В Chrome 137 появилась долгожданная функция
if()
в CSS — теперь можно писать условную логику прямо в стилях! Как это работает:
div {
color: var(--color);
background-color: if(
style(--color: white): black;
else: pink
);
}
.dark { --color: black; }
.light { --color: white; }
Что это даёт:
• Условные стили без JavaScript
• Адаптивный дизайн на новом уровне
• Динамические темы через CSS-переменные
• Работа с HTML-атрибутами для стилизации
.card {
border-color: if(
style(--status: error): red;
style(--status: success): green;
else: gray
);
}
<div class="card" style="--status: error">Ошибка</div>
<div class="card" style="--status: success">Успех</div>
- Только Chrome 137+
- Другие браузеры в разработке
- Можно тестировать в Chrome Canary с флагом
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
#Frontend
🔖 Мета-фреймворки JavaScript: что это и зачем нужны
Представьте: вы хотите создать веб-приложение, но вместо сборки мозаики из десятков инструментов просто берете готовое решение и начинаете писать код. Именно это предлагают мета-фреймворки.
▪️ Что такое мета-фреймворки
Это "фреймворки поверх фреймворков". Если React/Vue дают кирпичики для UI, то мета-фреймворки строят из них готовый дом со всеми коммуникациями: маршрутизацией, SSR, оптимизацией, API и прочим.
▪️ Почему они появились
Раньше фронтенд-разработчики тратили больше времени на настройку инструментов, чем на само приложение. Нужна маршрутизация? Добавляй React Router. SSR? Настраивай отдельно. Состояние? Еще один инструмент.
Мета-фреймворки решили эту "усталость от инструментов", предложив готовые решения с разумными настройками по умолчанию.
▪️ Основные игроки
• Next.js - для React, пионер гибридных приложений
• Nuxt.js - аналог для Vue
• Remix - фокус на web-first подходе
• SvelteKit - для любителей компилируемого Svelte
• RedwoodJS - полностековое решение с GraphQL
▪️ Главные преимущества
- Быстрый старт проекта за минуты
- Единая структура кода в команде
- Автоматическая оптимизация производительности
- Меньше времени на конфигурацию, больше на разработку
▪️ Потенциальные проблемы
- Ограниченная гибкость из-за жестких соглашений
- Сложность обновлений зависимостей
- Может быть избыточно для простых проектов
- Высокий порог входа для новичков
🎙 Новости
📝 База вопросов
Представьте: вы хотите создать веб-приложение, но вместо сборки мозаики из десятков инструментов просто берете готовое решение и начинаете писать код. Именно это предлагают мета-фреймворки.
Это "фреймворки поверх фреймворков". Если React/Vue дают кирпичики для UI, то мета-фреймворки строят из них готовый дом со всеми коммуникациями: маршрутизацией, SSR, оптимизацией, API и прочим.
Раньше фронтенд-разработчики тратили больше времени на настройку инструментов, чем на само приложение. Нужна маршрутизация? Добавляй React Router. SSR? Настраивай отдельно. Состояние? Еще один инструмент.
Мета-фреймворки решили эту "усталость от инструментов", предложив готовые решения с разумными настройками по умолчанию.
• Next.js - для React, пионер гибридных приложений
• Nuxt.js - аналог для Vue
• Remix - фокус на web-first подходе
• SvelteKit - для любителей компилируемого Svelte
• RedwoodJS - полностековое решение с GraphQL
- Быстрый старт проекта за минуты
- Единая структура кода в команде
- Автоматическая оптимизация производительности
- Меньше времени на конфигурацию, больше на разработку
- Ограниченная гибкость из-за жестких соглашений
- Сложность обновлений зависимостей
- Может быть избыточно для простых проектов
- Высокий порог входа для новичков
Мета-фреймворки - это эволюция веб-разработки в сторону большей продуктивности и меньшего количества головной боли. Они позволяют сосредоточиться на создании ценности для пользователей, а не на борьбе с инструментами.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2❤1
#Frontend
🔖 Pull-to-refresh в Compose Material 3: что изменилось и как использовать
Google кардинально обновил API для реализации pull-to-refresh в Compose Material 3 версии 1.2.0+, и большинство туториалов в интернете теперь устарели.
▪ Что такое pull-to-refresh?
Это популярный жест в мобильных приложениях — пользователь тянет экран вниз, чтобы обновить данные. Вы наверняка видели это в Instagram, Twitter или Facebook.
▪ Новый подход
Вместо старого
▪ Ключевые параметры:
▪ Что нужно сделать в коде:
1. Добавить свойство
2. Создать функцию обновления данных во ViewModel
3. Обернуть LazyColumn в PullToRefreshBox
▪ Дополнительные возможности:
Если нужен больший контроль (например, включение/выключение жеста), можно использовать модификатор
❗️ Важно
🎙 Новости
📝 База вопросов
Google кардинально обновил API для реализации pull-to-refresh в Compose Material 3 версии 1.2.0+, и большинство туториалов в интернете теперь устарели.
Это популярный жест в мобильных приложениях — пользователь тянет экран вниз, чтобы обновить данные. Вы наверняка видели это в Instagram, Twitter или Facebook.
Вместо старого
PullToRefreshContainer
теперь используется PullToRefreshBox
— готовый контейнер, который оборачивает ваш прокручиваемый контент (например, LazyColumn). • isRefreshing
— показывает состояние загрузки • onRefresh
— функция, которая вызывается при жесте пользователя • content
— ваш прокручиваемый контент1. Добавить свойство
isRefreshing
в состояние экрана2. Создать функцию обновления данных во ViewModel
3. Обернуть LazyColumn в PullToRefreshBox
Если нужен больший контроль (например, включение/выключение жеста), можно использовать модификатор
.pullToRefresh
напрямую. Также можно кастомизировать анимацию индикатора через PullToRefreshState
.Старые API помечены как deprecated в версии 1.3.0, поэтому обновление критически важно для поддержания актуальности приложения.
Новый API проще в использовании и предоставляет больше возможностей для кастомизации, делая реализацию pull-to-refresh более интуитивной для разработчиков.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
#Frontend
📎 Как использовать дизайн-токены в React — опыт команды Bit
Дизайн-токены — это стандартизированные значения (цвета, шрифты, отступы), которые помогают создавать единый интерфейс. Они синхронизируют работу дизайнеров и разработчиков, обеспечивая визуальную согласованность.
Интеграция в Bit и React
В Bit дизайн-токены структурированы по типам (цвета, состояния и др.) и работают как часть системы компонентов. Они самодокументируются и легко адаптируются под разные платформы, что ускоряет разработку.
Кросс-платформенные преимущества
Токены позволяют создавать универсальные решения для всех платформ. Разработчики быстро вносят изменения, а дизайнеры контролируют их корректное применение.
Управление в Bit
Токены отделены от тем и передаются компонентам через провайдер. Это позволяет глобально обновлять стили, меняя всего одно значение.
Дизайн-токены в Bit — это мощный инструмент для масштабируемых и согласованных дизайн-систем. Больше можно прочитать в статье⬇️
📎 Статья
🎙 Новости
📝 База вопросов
Дизайн-токены — это стандартизированные значения (цвета, шрифты, отступы), которые помогают создавать единый интерфейс. Они синхронизируют работу дизайнеров и разработчиков, обеспечивая визуальную согласованность.
Интеграция в Bit и React
В Bit дизайн-токены структурированы по типам (цвета, состояния и др.) и работают как часть системы компонентов. Они самодокументируются и легко адаптируются под разные платформы, что ускоряет разработку.
Кросс-платформенные преимущества
Токены позволяют создавать универсальные решения для всех платформ. Разработчики быстро вносят изменения, а дизайнеры контролируют их корректное применение.
Управление в Bit
Токены отделены от тем и передаются компонентам через провайдер. Это позволяет глобально обновлять стили, меняя всего одно значение.
Дизайн-токены в Bit — это мощный инструмент для масштабируемых и согласованных дизайн-систем. Больше можно прочитать в статье
Please open Telegram to view this post
VIEW IN TELEGRAM
#Frontend
📎 Забытые возможности HTML и CSS, которые работают прямо сейчас
В погоне за новыми фреймворками разработчики часто забывают о базовых возможностях HTML и CSS. А зря — многие "древние" техники до сих пор актуальны и решают современные задачи без лишних зависимостей.
Что многие пропускают:
- Семантические элементы HTML5 для лучшей доступности
- CSS Grid и Flexbox для сложных layouts
- Встроенная валидация форм без JavaScript
- CSS-переменные для динамического стилизования
- Intersection Observer для lazy loading
Почему это важно?
Нативные возможности браузеров:
- Работают быстрее внешних библиотек
- Не требуют дополнительных зависимостей
- Имеют лучшую поддержку accessibility
- Более стабильны в долгосрочной перспективе
Возраст технологии не показатель ее бесполезности. Часто самые надежные решения — это те, которые прошли проверку временем и получили широкую поддержку браузеров.
📎 Ссылка
🎙 Новости
📝 База вопросов
В погоне за новыми фреймворками разработчики часто забывают о базовых возможностях HTML и CSS. А зря — многие "древние" техники до сих пор актуальны и решают современные задачи без лишних зависимостей.
Что многие пропускают:
- Семантические элементы HTML5 для лучшей доступности
- CSS Grid и Flexbox для сложных layouts
- Встроенная валидация форм без JavaScript
- CSS-переменные для динамического стилизования
- Intersection Observer для lazy loading
Почему это важно?
Нативные возможности браузеров:
- Работают быстрее внешних библиотек
- Не требуют дополнительных зависимостей
- Имеют лучшую поддержку accessibility
- Более стабильны в долгосрочной перспективе
Возраст технологии не показатель ее бесполезности. Часто самые надежные решения — это те, которые прошли проверку временем и получили широкую поддержку браузеров.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1