TypeScript *

Примечание: авторский перевод статьи 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-переменных не гарантирует нам наличие значения и не дает понимание о его типе данных.

В этой статье вы узнаете как с помощью react можно сделать input с двигающимся суффиксом, который идет сразу после значения ввода

Рады поделиться: выложили нашу разработку Maskito в открытый доступ, и совсем недавно произошел релиз ее первой мажорной версии. Maskito — коллекция библиотек, упрощающих маскирование текстовых полей, с удобным и гибким публичным API.

Maskito содержит разные библиотеки: основная написана на TypeScript без зависимостей, есть опциональный пакет с набором готовых конфигурируемых масок, а еще есть библиотеки для удобного использования Maskito в проектах на React, Angular или Vue. Рассказываю обо всем подробнее.

Как оказалось, выбор версии ES для сборки веб приложения, а так же организация самой этой сборки, может оказаться весьма сложной задачей. Задачей, включающей в себя много разнообразных вопросов.

В статье вы увидите бенчмарк производительности EcmaScript фич; узнаете какой из компиляторов генерирует самый производительный JavaScript код; а также можно ли добиться прироста производительности, начав собирать сайт в более поздней версии ES.

В статье описал разработку 13-ти игр на PixiJS. Около 70% текста - это описание механики игр, остальное - реализация на PixiJS. Получилось много текста, т.к. описывать советы для PixiJS интереснее с примером из игр.
Самая последняя игра будет самой сложной и интересной.

Сегодня мы перепишем на $mol эту демку почти пиксель в пиксель и напишем несколько тестов.

Демка представляет собой игру, в которой перемещаются разноцветные шарики между трубками, цель игры - отсортировать шарики по цветам за наименьшее количество шагов.

Изначально она была реализована на эффекторе + react, недавно несколько человек реализовали ее на реатоме + react исходники, на vue исходники и две независимых версии на моле: первая и моя о ней пойдет речь.

Код-стайл — неотъемлемая часть процесса разработки программного обеспечения. И, пожалуй, одна из самых сложных вещей в командной разработке — это совместно придти к общему стилю.

Почему это важно?

Единообразие в написании кода упрощает его сопровождение и командную работу. Разработчики могут быстрее адаптироваться к новым модулям или файлам, поскольку они уже знакомы с установленным стилем написания кода — обезличенный код способен снижать когнитивную нагрузку.

Код становится единообразным, когда становится сложно понять, кто его написал.

И когда одну и ту же вещь можно сделать несколькими способами, на помощь приходят линтеры и устанавливают единый «правильный» путь.

Увы, typescript не идеален. Его ругают, но любят. Кто-то даже не может представить свою жизнь без него так же, как не может представить жизнь без комфортного автомобиля. Тем не менее, у этого "автомобиля" в базовой комплектации есть существенные недостатки, которые каждый "автолюбитель" "чинит" по своему.

Один мой знакомый сравнил тайпскрипт с css браузеров, которому необходим свой собственный аналог css reset. И оказалось, что такой действительно есть. Речь идет о пакете, название которого говорит само за себя - ts-reset. За полгода своего существования на github ts-reset набрал 6 тысяч звезд, и мне показалось странным, что на хабре я не нашел ни одной статьи, посвященной этому пакету. И если интересно, добро пожаловать под кат...

В середине марта 2023 года Майкрософт анонсировала релиз TypeScript версии 5.0. Разработчики ожидают от нее 10-20% прироста производительности, но так как всё зависит от кодовой базы и характеристик оборудования, они настоятельно рекомендуют опробовать эти изменения.

В этой статье мы разберём некоторые изменения в TypeScript 4.9 и 5.0 и сравним нововведения с предыдущими версиями. На примерах кода постараемся понять, для чего они были добавлены и как они упрощают нашу жизнь. Статья будет полезна опытным разработчикам, которые часто применяют TypeScript в работе, и начинающим, так как мы подробно разберем решения некоторых проблем.

В публикации речь идет о warnings и vulnerabilities при установке библиотек с помощью yarn и о том, как от них избавиться. Я рассмотрел несколько случаев, приведенных ниже, но решения можно применять и к другим, схожим ситуациям:

Warnings типа:

has incorrect peer dependency

has unmet peer dependency

Vulnerabilities:

Prototype pollution in webpack loader-utils

loader-utils is vulnerable to Regular Expression Denial of Service (ReDoS)

Crash in HeaderParser in dicer