✨ Кастомная стратегия виртуального скроллинга для просмотра pdf
Angular CDK имеет широкие возможности для скроллинга плоского списка. Если размер каждого элемента одинаков, то можно воспользоваться FixedSizeVirtualScrollStrategy: всего лишь нужно прокинуть размер элемента в пикселях, проитерироваться по данным и виртуальный скроллинг готов.
Но что делать, если размер элементов разный? Данную проблему можно решить кастомной стратегией виртуального скроллинга.
👉 https://habr.com/ru/company/bimeister/blog/721220/
Angular CDK имеет широкие возможности для скроллинга плоского списка. Если размер каждого элемента одинаков, то можно воспользоваться FixedSizeVirtualScrollStrategy: всего лишь нужно прокинуть размер элемента в пикселях, проитерироваться по данным и виртуальный скроллинг готов.
Но что делать, если размер элементов разный? Данную проблему можно решить кастомной стратегией виртуального скроллинга.
👉 https://habr.com/ru/company/bimeister/blog/721220/
👍11🔥5❤🔥4🎉1
✨ Переход TypeScript на модули
Одна из самых важных вещей, над которыми работали в TypeScript 5.0, — это не исправление ошибок или оптимизация структур данных. Вместо этого была перестроена вся кодовая база на использование модулей ECMAScript.
Сейчас это может показаться удивительным — модули? Разве почти весь современный JavaScript и TypeScript не использует модули? Именно так! Но текущая кодовая база TypeScript появилась раньше модулей ECMAScript — последняя переработка началась в 2014 году, а модули были стандартизированы в 2015 году.
В итоге удалось добиться уменьшения размера пакета без сжатия на npm на 46%, увеличения скорости на 10%-25% и более современной кодовой базы.
👉 https://devblogs.microsoft.com/typescript/typescripts-migration-to-modules/
Одна из самых важных вещей, над которыми работали в TypeScript 5.0, — это не исправление ошибок или оптимизация структур данных. Вместо этого была перестроена вся кодовая база на использование модулей ECMAScript.
Сейчас это может показаться удивительным — модули? Разве почти весь современный JavaScript и TypeScript не использует модули? Именно так! Но текущая кодовая база TypeScript появилась раньше модулей ECMAScript — последняя переработка началась в 2014 году, а модули были стандартизированы в 2015 году.
В итоге удалось добиться уменьшения размера пакета без сжатия на npm на 46%, увеличения скорости на 10%-25% и более современной кодовой базы.
👉 https://devblogs.microsoft.com/typescript/typescripts-migration-to-modules/
👍22🔥2👏1
✨Angular Forms: Выбор между реактивными и шаблонными формами
Когда мы начинаем создавать приложение на Angular и нужно создать формы, мы должны выбрать один из двух вариантов: "Реактивные" или "Шаблонные формы".
Для новичков шаблонные формы естественны и кажутся менее сложными, но некоторые разработчики могут попытаться убедить вас, что "если вы хотите иметь настоящий контроль, то вы должны использовать реактивные формы".
Наиболее эффективным методом определения того, какой вариант лучше, является решение одной и той же проблемы с помощью обеих альтернатив.
👉 https://www.danywalls.com/angular-forms-choosing-between-reactive-and-template-driven-forms
Когда мы начинаем создавать приложение на Angular и нужно создать формы, мы должны выбрать один из двух вариантов: "Реактивные" или "Шаблонные формы".
Для новичков шаблонные формы естественны и кажутся менее сложными, но некоторые разработчики могут попытаться убедить вас, что "если вы хотите иметь настоящий контроль, то вы должны использовать реактивные формы".
Наиболее эффективным методом определения того, какой вариант лучше, является решение одной и той же проблемы с помощью обеих альтернатив.
👉 https://www.danywalls.com/angular-forms-choosing-between-reactive-and-template-driven-forms
👍10💩3🤩1
✨ Советы по тестированию
Когда мы говорим о модульном тестировании, первое определение, которое приходит в голову, — это тестирование небольших частей приложения, таких как функции, методы и классы. Это звучит идеально для простых функций без зависимостей, но в реальном мире все сложнее.
В Angular у компонентов есть декораторы, сервисы, pipes, дочерние компоненты, поэтому в наших тестах слишком много действующих лиц.
Эта статья посвящена типичным проблемам, с которыми приходится сталкиваться, когда мы начинаем добавлять тестирование в компоненты с зависимостями.
👉 https://www.danywalls.com/tips-for-averting-typical-testbed-mistakes-in-angular-component-testing
Когда мы говорим о модульном тестировании, первое определение, которое приходит в голову, — это тестирование небольших частей приложения, таких как функции, методы и классы. Это звучит идеально для простых функций без зависимостей, но в реальном мире все сложнее.
В Angular у компонентов есть декораторы, сервисы, pipes, дочерние компоненты, поэтому в наших тестах слишком много действующих лиц.
Эта статья посвящена типичным проблемам, с которыми приходится сталкиваться, когда мы начинаем добавлять тестирование в компоненты с зависимостями.
👉 https://www.danywalls.com/tips-for-averting-typical-testbed-mistakes-in-angular-component-testing
👍5🤔1🎉1
✨ Возможности JavaScript и TypeScript последних лет
В статье рассматриваются некоторые изменения, произошедшие за последние 3 года в JavaScript и TypeScript.
Не все из возможностей будут актуальны для вас или даже практичны, но они могут заполнить пробелы в знаниях, если вы вдруг что-то пропустили.
👉 https://habr.com/ru/company/timeweb/blog/722450/
В статье рассматриваются некоторые изменения, произошедшие за последние 3 года в JavaScript и TypeScript.
Не все из возможностей будут актуальны для вас или даже практичны, но они могут заполнить пробелы в знаниях, если вы вдруг что-то пропустили.
👉 https://habr.com/ru/company/timeweb/blog/722450/
👍9🆒1
🎉 Релиз TypeScript 5.0
Этот релиз приносит множество новых возможностей, одновременно стремясь сделать TypeScript меньше, проще и быстрее.
Был внедрен новый стандарт декораторов, добавили лучшую поддержку ESM, расширили функциональность JSDoc, упростили конфигурацию и сделали множество других улучшений.
👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/
Этот релиз приносит множество новых возможностей, одновременно стремясь сделать TypeScript меньше, проще и быстрее.
Был внедрен новый стандарт декораторов, добавили лучшую поддержку ESM, расширили функциональность JSDoc, упростили конфигурацию и сделали множество других улучшений.
👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/
👍8❤1🔥1
✨ Ошибочные представления об Angular
Angular — это огромный фреймворк с большим количеством встроенных функций и возможностей. Несмотря на то, что документация и огромное количество обучающих ресурсов подробно объясняют, как он работает. Все еще существуют некоторые заблуждения относительно определенных аспектов, которые стоит прояснить.
В статье рассматриваются концепции, которые иногда неправильно интерпретируются даже самыми опытными разработчиками.
👉 https://dev.to/this-is-angular/angular-misconceptions-4aeb
Angular — это огромный фреймворк с большим количеством встроенных функций и возможностей. Несмотря на то, что документация и огромное количество обучающих ресурсов подробно объясняют, как он работает. Все еще существуют некоторые заблуждения относительно определенных аспектов, которые стоит прояснить.
В статье рассматриваются концепции, которые иногда неправильно интерпретируются даже самыми опытными разработчиками.
👉 https://dev.to/this-is-angular/angular-misconceptions-4aeb
👍11🌚6🥰3
✨ Angular и сигналы
Соскучились по сигналам? Команда Angular проделывает отличную работу по продвижению и объяснению нового реактивного примитива. Единственно, чего может не хватать, — одного ресурса, который собрал бы все имеющиеся материалы.
Эта статья — попытка создать такой ресурс.
👉 https://dev.to/this-is-angular/angular-signals-everything-you-need-to-know-2b7g
Соскучились по сигналам? Команда Angular проделывает отличную работу по продвижению и объяснению нового реактивного примитива. Единственно, чего может не хватать, — одного ресурса, который собрал бы все имеющиеся материалы.
Эта статья — попытка создать такой ресурс.
👉 https://dev.to/this-is-angular/angular-signals-everything-you-need-to-know-2b7g
👍19🔥3❤1🤩1
✨ Signals vs Observables
В последнее время много разговоров о сигналах внутри фреймворков. Но естественно спросить: чем сигналы отличаются от Observables?
Разбор этого вопроса и является целью этой статьи.
👉 https://www.builder.io/blog/signals-vs-observables
В последнее время много разговоров о сигналах внутри фреймворков. Но естественно спросить: чем сигналы отличаются от Observables?
Разбор этого вопроса и является целью этой статьи.
👉 https://www.builder.io/blog/signals-vs-observables
👍15🎉1
✨ Standalone components и Angular Testing Library упрощают тестирование компонентов
Angular Testing Library предоставляет полезные утилиты для взаимодействия и запросов к вашему компоненту, а автономные компоненты делают компоненты Angular менее подверженными влиянию внутренних компонентов.
В сумме они дают нам лучший фундамент, на котором можно строить наши тесты.
👉 https://timdeschryver.dev/blog/angular-standalone-components-and-angular-testing-library-make-component-tests-easier
Angular Testing Library предоставляет полезные утилиты для взаимодействия и запросов к вашему компоненту, а автономные компоненты делают компоненты Angular менее подверженными влиянию внутренних компонентов.
В сумме они дают нам лучший фундамент, на котором можно строить наши тесты.
👉 https://timdeschryver.dev/blog/angular-standalone-components-and-angular-testing-library-make-component-tests-easier
👍8👏2
✨ Required Inputs в Angular
В Angular 16.0.0-next.4 — можно указать, что компонент или директива требуют определенных входных данных. Для использования этой функции надо установить новый параметр required в input. Например,
👉 https://netbasal.com/from-good-to-great-required-inputs-in-angular-47374c8a43cf
В Angular 16.0.0-next.4 — можно указать, что компонент или директива требуют определенных входных данных. Для использования этой функции надо установить новый параметр required в input. Например,
@Input({ required: true }) elementId: string;
Используя эту возможность, можно убедиться, что все необходимые данные присутствуют до выполнения логики компонента или директивы, что приведет к уменьшению количества ошибок.👉 https://netbasal.com/from-good-to-great-required-inputs-in-angular-47374c8a43cf
🔥54👍21👏1
✨ Как мы выбирали технологию для фронтенда и что из этого вышло
Нередко выбор библиотек и фреймворков носит хаотичный характер. Из-за этой неопределенности повторное использовании наработок одной команды в другой может затрудниться.
Иван Матвиенко рассказал, как они в компании выбирали единую технологию для фронтенда и с какими трудностями столкнулись.
👉 https://habr.com/ru/company/mango_telecom/blog/720184/
Нередко выбор библиотек и фреймворков носит хаотичный характер. Из-за этой неопределенности повторное использовании наработок одной команды в другой может затрудниться.
Иван Матвиенко рассказал, как они в компании выбирали единую технологию для фронтенда и с какими трудностями столкнулись.
👉 https://habr.com/ru/company/mango_telecom/blog/720184/
💩6👍3❤1🎉1
✨ Использование Inject
Начиная с Angular 14/15, появился альтернативный способ внедрения зависимостей, — функция inject может упростить код и помочь решить распространенные проблемы, связанные с инъекцией зависимостей.
В статье показаны два случая её использования.
👉 https://www.danywalls.com/using-the-inject-function-in-angular-15
Начиная с Angular 14/15, появился альтернативный способ внедрения зависимостей, — функция inject может упростить код и помочь решить распространенные проблемы, связанные с инъекцией зависимостей.
В статье показаны два случая её использования.
👉 https://www.danywalls.com/using-the-inject-function-in-angular-15
👍15❤8👌2
✨ Возможности JavaScript и TypeScript последних лет
Перевод второй части статьи, посвященной нововведениям JS и TS последних трех лет, которые вы могли пропустить.
В первой части говорилось о возможностях JS, во второй разбирается TS.
👉 https://habr.com/ru/company/timeweb/blog/723332/
Перевод второй части статьи, посвященной нововведениям JS и TS последних трех лет, которые вы могли пропустить.
В первой части говорилось о возможностях JS, во второй разбирается TS.
👉 https://habr.com/ru/company/timeweb/blog/723332/
👍9
✨ Автоматическая миграция на Standalone компоненты
Хотя новые Standalone компоненты могут прекрасно сочетаться с традиционным кодом на основе NgModule, вы можете захотеть полностью перенести свои проекты.
Начиная с версии Angular 15.2, существует возможность автоматизировать эту задачу.
👉 https://www.angulararchitects.io/en/aktuelles/tutorial-automatically-migrating-to-standalone-components-in-3-steps/
Хотя новые Standalone компоненты могут прекрасно сочетаться с традиционным кодом на основе NgModule, вы можете захотеть полностью перенести свои проекты.
Начиная с версии Angular 15.2, существует возможность автоматизировать эту задачу.
👉 https://www.angulararchitects.io/en/aktuelles/tutorial-automatically-migrating-to-standalone-components-in-3-steps/
👍7🤮3
✨ Код ревью по-человечески
Код ревью — это возможность поделиться знаниями и принять обоснованные инженерные решения. Но этого не произойдет, если автор воспринимает обсуждение как личную атаку, он может легко интерпретировать критику своего кода как намек на то, что он некомпетентный программист.
В статье рассказывается о методах, которые рассматривают ревью не только как технический, но и как социальный процесс.
👉 https://mtlynch.io/human-code-reviews-1/
Код ревью — это возможность поделиться знаниями и принять обоснованные инженерные решения. Но этого не произойдет, если автор воспринимает обсуждение как личную атаку, он может легко интерпретировать критику своего кода как намек на то, что он некомпетентный программист.
В статье рассказывается о методах, которые рассматривают ревью не только как технический, но и как социальный процесс.
👉 https://mtlynch.io/human-code-reviews-1/
👍10😁1
✨ Знакомство с оператором takeUntilDestroyed
Angular 16.0.0-next.6 представляет новые возможности в
Оператор takeUntilDestroyed позволяет предотвратить утечку памяти и гарантирует, что ресурсы будут освобождены должным образом.
👉 https://medium.com/p/d965b7263856
Angular 16.0.0-next.6 представляет новые возможности в
@angular/core/rxjs-interop, которые включают три новых оператора: fromSignal, fromObservable и takeUntilDestroyed.Оператор takeUntilDestroyed позволяет предотвратить утечку памяти и гарантирует, что ресурсы будут освобождены должным образом.
👉 https://medium.com/p/d965b7263856
👍21❤10🔥4
🦄 Продолжение истории миграции на Module Federation
В первой статье Максим Смирнов рассказывал, как разделить весь код по модулям, замкнув бизнес-логику в конкретном модуле, и вынести общие части в библиотеки.
Осталось достать пилу и отпиливать модули — сделав их отдельными приложениями.
👉 https://habr.com/ru/companies/oleg-bunin/articles/726880/
В первой статье Максим Смирнов рассказывал, как разделить весь код по модулям, замкнув бизнес-логику в конкретном модуле, и вынести общие части в библиотеки.
Осталось достать пилу и отпиливать модули — сделав их отдельными приложениями.
👉 https://habr.com/ru/companies/oleg-bunin/articles/726880/
👍9
🦄 Трудности маскирования текстового поля
Маска — это контролирование вводимых пользователем символов, чтобы значение текстового поля соответствовало определенному правилу или паттерну.
Барсуков Никита рассказал о особенностях реализации масок и коллекции библиотек Maskito.
👉 https://habr.com/ru/companies/tinkoff/articles/727368/
Маска — это контролирование вводимых пользователем символов, чтобы значение текстового поля соответствовало определенному правилу или паттерну.
Барсуков Никита рассказал о особенностях реализации масок и коллекции библиотек Maskito.
👉 https://habr.com/ru/companies/tinkoff/articles/727368/
👍13👏3
✨ Автоматическая отмена конкурентных асинхронных цепочек
Большинству приходилось запрашивать с бекенда сначала одни данные, потом на основе их запросить конечные данные с другого эндпоинта. Ситуация усложняется, если запросы зависят от пользовательского ввода, а бэкенд не следит за очередностью запросов. В этом случае пригодится автоматическая отмена запросов.
Артём Арутюнян рассказал про главную киллер-фичу redux-saga и rxjs и как теперь её можно получить проще, а так же про грядущие изменения в стандарте ECMAScript.
👉 https://habr.com/ru/companies/ruvds/articles/725208/
Большинству приходилось запрашивать с бекенда сначала одни данные, потом на основе их запросить конечные данные с другого эндпоинта. Ситуация усложняется, если запросы зависят от пользовательского ввода, а бэкенд не следит за очередностью запросов. В этом случае пригодится автоматическая отмена запросов.
Артём Арутюнян рассказал про главную киллер-фичу redux-saga и rxjs и как теперь её можно получить проще, а так же про грядущие изменения в стандарте ECMAScript.
👉 https://habr.com/ru/companies/ruvds/articles/725208/
👍6🤯3🥴2