Всем привет? Я Данила, фронтенд разработчик в ПСБ. Angular я начал изучать не так давно, а поэтому часто встречаются сложные темы, которые непонятны и их нужно разобрать. Одной из таких тем и стало внедрение зависимостей (DI). Что ж, давайте разбираться :)
Доброго времени суток, дорогие читатели!
В данной статье я буду рассказывать про холодную и горячую последовательность на примере такой задачи:
Пользователь заходит на сайт и начинается внутренняя прослушка (какой либо запрос на сервер с получением данных, в нашем же случае будет обычный sleepAsync - функция с таймаутом и остается только его подхватить и обработать). Режимов прослушки два - оптимизированный (будем называть горячим) и константный (будем называть холодным). При условии активности пользователя на вкладке, включаем оптимизированный метод, если же пользователь покинул вкладку, включаем константный. Также нужно показывать количество времени, которое занимала прослушка.
В данной статье продемонстрирован способ реализации “параметризованной” css анимации React компонента с помощью styled components. Параметризованная потому что css анимация описывается через параметры, которые динамически рассчитываются на основе пропсов и состояний компонента при его рендеринге.
В TypeScript 5.2 появится новое ключевое слово 'using', которое можно будет использовать для утилизации чего-либо с помощью функции Symbol.dispose, когда оно покидает область видимости.
Веб — богатая экосистема с массой мощных API, которая только пополняется. В нашем распоряжении уже знакомые инструменты — Canvas или Intersection Observer, но в 2023 мы также имеем Web MIDI API, Speech Recognition и даже такие экзотические штуки, как геймпады и VR прямо в браузере. Естественно, эти API сложно использовать в Angular из-за разницы парадигм нативного JavaScript и декларативного Angular. Вот тут и появляемся мы!
В идеальном мире автотесты должны проходить быстро, чтобы их хотелось запускать как локально, так и в CI. Но почему в большинстве проектов запуск тестов отнимает критически много времени?
– Зачастую причиной является неправильная работа с асинхронными операциями. В статье разберемся, как Jest помогает писать молниеносные тесты, и рассмотрим ключевые сценарии.
using foobar = … реализует идиому RAII, позволяя писать намного менее многословный код, управляющий DisposableStack/AsyncDisposableStack, а также приведу пример неочевидного бага, в который попался я сам. По пути я также коснусь нескольких других нововведений Node.js, про которые, возможно, ещё знают не все. Весь код доступен в репозитории. 
Решим реальную практическую задачу, с которой мне пришлось столкнуться на моем проекте React/TypeScript.
Задача
У нас есть массив конкретных строковых значений, таких как "first", "second", "third", "fourth" и "fifth". Необходимо отобразить их на странице, т.е как-то использовать, а также убедиться, чтобы эти данные были строго типизированы и TypeScript нам выдавал всплывающие подсказки при их использовании в коде.
Привет! Сегодня мы рассмотрим относительно новую библиотеку для интеграции с web3 - viem. Мы постараемся понять, способна ли эта библиотека заменить ethers и какие преимущества она предлагает.
Так-с, уважаемые читатели, всех радостно приветствую! Это небольшая статейка как раз для тех людей, которые хотят по быстрому вот такой функционал:
• обнаруживать какой тип взаимодействия с веб приложением у пользователя: touchscreen, мышка, либо же и то, и другое одновременно
• обнаруживать какая ориентация на данный момент у пользователя
• обнаруживать какой тип устройства имеет пользователь: desktop, tab, phone
Звучит, конечно, не сложно, но для этого нужно собирать своего трансформера с разных форумов, я же предлагаю свое решение в готовом и компактном виде :)
Примечание: авторский перевод статьи Web Content Elements
В HTML разработке мы используем тег в качестве дескриминатора - тег определяет элемент. Мы используем классы, чтобы применять стили к HTML элементам. Разработчик создает структуру и описывает стили руководствуясь правилами конкретного проекта, своим опытом и общепринятыми рекомендациями.
В результате мы получаем проекты состоящие из длинного списка кастомных решений в моменте принятых разработчиком лично, либо в составе команды, например после код ревью.
Проблему можно описать следующим образом: разработка HTML структуры и системы стилей для этой структуры недостаточно формализована для обеспечения единого и независимого от проекта, разработчика или этапа разработки стандарта.
Web Content Elements(WCE) - это концепция, шаблон проектирования, который позволяет описать любые решения подобного рода линейно и однообразно.
Согласно WCE, тег - это переменная для генерации синтаксической структуры элемента разметки.
Основная идея паттерна заключается в группировке элементов по роли, которую они представляют на странице.
? Элементы сгруппированы по их ролям на странице, а не тегам.
Основные роли:
В последнее время все больше компаний сталкиваются с необходимостью создания нескольких брендов на одном сайте или приложении. Такая задача может быть связана с различными целевыми аудиториями пользователей, регионами или продуктами. Реализация мультибрендинга может быть непростой задачей, особенно если у вас уже есть готовый проект.
В этой статье я расскажу, как на проекте с Angular добавить несколько брендов, как добавить разную для них логику, о преимуществах NX для этой задачи и важности архитектуры.
Эта статья будет полезна для всех, кто работает со сложным приложением или задумывается о его масштабировании.
Nx Generator: имба или не стоит разбираться?
Всем привет, меня зовут Дима, я angular-разработчик из департамента среднего и малого бизнеса в Тинькофф. Недавно мой коллега рассказал, почему мы выбрали Nx, а я расскажу про самый мощный инструмент Nx — Nx Generator.
Покажу, что нужно установить для запуска генераторов, и объясню, как писать собственные генераторы и создавать с ними шаблонные файлы. А еще рассмотрим генераторы из коробки от Nx. Предлагаю начинать.
Новый синтаксис шаблонов, встроенное управление потоком данных и прощание с структурными директивами? В последние годы не так много менялось. Angular был стабильным для некоторых разработчиков и застойным для других. Теперь он движется вперед со сверхсветовой скоростью. Но куда именно он направляется?
Всем привет! В предыдущей части цикла статей мы поговорили о том, зачем вообще нужно функциональное программирование, а также обсудили понятие классов типов и разобрали базовые из них: Eq (эквивалентность) и Ord (сравнимость).
Сейчас я хочу пролить свет на два наводящих жуть на неподготовленного читателя слова: моноиды и полугруппы. Это математические понятия родом из общей алгебры. На самом деле всё не так уж и страшно. Если совсем упрощать, то оба термина относятся к объединению элементов множества. Я помогу разобраться с их формальными определениями, а также на практических примерах покажу, как и зачем их использовать.
Что описывается: Apollo-client — популярная библиотека для работы с GraphQL. Библиотека призвана ускорить разработку и оптимизировать приложение.
Задача статьи: Описать возможные решения и проблемы оптимизации приложения в части apollo-client.
Если вы, как и я, заинтересовались микрофронтами и пробуете развернуть проект на Nx, то возможно, у вас встанет вопрос, как в итоге объединить несколько своих микрофронтов в общий проект. По крайней мере, те статьи, которые я находил по этой теме, рассказывали про то, как создать в Nx несколько проектов (в т.ч. на разных фреймворках), как создать к ним компоненты и либы, и на этом всё заканчивалось. Разобравшись, решил оставить инструкцию для других.
Привет! Представляю вашему вниманию перевод статьи Matt Pocock.
Источник
TypeScript 5.2 представит новое ключевое слово - 'using', которое можно использовать, чтобы избавиться от чего угодно с помощью функции Symbol.dispose, при покидании области видимости.
Цель данной статьи:
1. Помочь разработчикам в интеграции
2. Привлечь внимание команды Tinkoff на проблемы связанные с эксплуатацией их API
Нередко в проектах необходимо заводить переменные окружения (environment variables). Существует много способов сделать это. Например, указать переменную "inline", как MY_VAR="my value" node index.js или обозначить источник командой source. Некоторые фреймворки имеют даже целые отдельные пакеты для формирования переменных окружения (прим. nest.js). Но чаще всего за годы работы в сфере фронтенд-разработки мне приходилось работать со способом с содержанием .env файлов в проекте, которые имеют простейший синтаксис вида KEY=VALUE.
Проблема в том, что использование env-переменных не гарантирует нам наличие значения и не дает понимание о его типе данных.