В данной публикации рассмотрим как можно сократить количество типов/интерфейсов в Typescript, сделать их более лаконичными и сэкономить время себе и своей команде. Все это будем делать с помощью Util Types - специальных типов, которые предоставляет Typescript.
Всем привет, на связи dev.family. Хотим рассказать про интересный проект, над которым мы трудимся почти полгода, и до сих пор продолжаем. За это время в нем многое произошло, многое поменялось. Мы открыли для себя что-то интересное, успели набить шишек.
В этой статье я хотел бы рассказать как решил создать свой первый проект.
В течении пары лет я с переменным успехом в свободном режиме изучал японский язык и постоянно пытался применять подход с погружением в языковую среду. Так я, к примеру, добавил японский в раскладки клавиатуры, смотрел простые видео и подкасты, пытался читать легкие тексты.
Но японский язык (также как и китайский и, частично, корейский) имеют довольно высокий входной барьер для чтения, потому что нужно не только выучить два алфавита, но и запомнить как минимум несколько сотен кандзи (300-500).
Данная статья написана с уклоном на практическое применение регулярных выражений в проектах. Изначально написана для начинающих разработчиков в моей компании. Статья включает в себя примеры использования на JavaScript (TypeScript).
По мере изучения RxJS разработчик рано или поздно сталкивается с такими понятиями, как cold и hot observable. А на технических собеседованиях в команды, которые используют RxJS, можно услышать вопросы по этой теме.
Например, чем горячий поток отличается от холодного? Можно ли холодный поток превратить в горячий и наоборот? И если да, то как это сделать?
В статье попробуем разобраться в теме и найти ответы.
В пятницу можно смешивать всё и со всем!
Мы смешаем пифагоровы тройки и библиотеку RxJS.
Пифагоровой тройкой называют три натуральных числа, из которых можно составить прямоугольный треугольник.
Такие числа известны людям с очень древних времён. Например, их использовали ещё в Египте, откуда до нас дошла самая известная пифагорова тройка — это числа 3, 4 и 5.
RxJS — это библиотека для реактивного программирования. Она поможет сделать генерацию троек красивой и простой.
Сразу замечу, что статья претендует только на развлекающую роль
Привет, Хабр! Как-то раз после работы мне захотелось взять и написать небольшую компьютерную игру. А почему бы и нет? Играть я люблю, программировать — тоже. Захотелось проверить, можно ли сделать что-то прикольное на уровне современных AAA-игр, не изучая дополнительных языков программирования, а также избежать банального повторения тех же «велосипедов», которые уже 100500 раз выложены на различных стримах и, конечно, не раз разбирались на Хабре. В этом посте я хотел бы поделиться с вами своим небольшим экспериментом в области GameDev на базе JS и обсудить возможности, которые есть у любознательного программиста с бэкграундом в сфере JavaScript.
Наверное, большинство фронтенд-разработчиков в какой-то момент сталкивались с задачей внедрения TypeScript на проект. Обычно это задача выполняется не сразу, а постепенно. Сначала просто переименовываются все файлы из .js в .ts с проставлением везде типа "any", просто чтобы проект запустился, и только потом постепенно разработчики начинают заниматься планомерным переводом.
Если разработчики к тому времени не имеют серьезного опыта работы с TypeScript и изучают его по ходу дела, то очень часто перевод заканчивается на этапе создания модели данных, то есть внедрения типов и интерфейсов для всех основных сущностей, типизации API.
Зачастую, при создании типов и интерфейсов, описывая какое-то свойство, которое может принимать определенное, конечное количество строковых значений, разработчики указывают тип поля string или в крайнем случае перечисляют эти значения через "или".
Так, при создании интерфейса какого-либо сотрудника, у которого есть имя, возраст и должность в компании наиболее простой и быстрый вариант представлен ниже:
interface Person {
name: string;
age: number;
position: string;
}
Ошибок нет. Вроде бы все работает, однако какие проблемы это может создать? Если имя - это строка, которая может принимать любое значение, то должность в компании - это тоже строка, но принимать она может только вполне определенное и конечное количество строковых значений. Например, в нашей компании есть только директор и продавец. В случае, если мы попытаемся создать объект с должностью "бухгалтер", такой тип ошибки не выдаст:
Один античный оратор говорил, что всем людям свойственно ошибаться. Прошло много веков, а человек продолжает совершать ошибки каждый день. Даже беглое заполнение формы на сайте не обходится без опечаток.
Хороший UI/UX помогает пользователю избежать большинства таких проблем. Инструментов контроля огромное количество, сегодня расскажу про один их них — создание маски для поля ввода силами Javascript.
Hello, world!
В этом туториале мы разработаем простое типобезопасное (typesafe) клиент-серверное (fullstack) приложение с помощью tRPC, React и Express.
tRPC позволяет разрабатывать полностью безопасные с точки зрения типов API для клиент-серверных приложений (предпочтительной является архитектура монорепозитория). Это посредник между сервером и клиентом, позволяющий им использовать один маршрутизатор (роутер) для обработки запросов HTTP. Использование одного роутера, в свою очередь, обуславливает возможность автоматического вывода типов (type inference) входящих и исходящих данных (input/output), что особенно актуально для клиента и позволяет избежать дублирования типов или использования общих (shared) типов.
Руководство по tRPC находится в процессе подготовки — следите за обновлениями ?
Для тех, кого интересует только код, вот ссылка на соответствующий репозиторий.
Интересно? Тогда прошу под кат.
Привет, я Влад, и это статья о том, как перемена обстановки повлекла за собой кардинальные изменения в механизме расчета моего бюджета и дальнейшую разработку средства его подсчета.
Для многих разработчиков процесс установки зависимостей представляет собой некую "магию", которая происходит при выполнении npm install. Понимание принципов работы этой "магии" может сильно помочь при возникновении ошибки во время установки очередной библиотеки. Нынешний NPM — результат многих лет проб и ошибок, поэтому для его детального понимания я предлагаю начать с самого начала.
На сегодняшний день все стейт-менеджеры экосистемы Vue предоставляют глобальное централизованное хранилище, привязанное к корню приложения. Однако у текущей системы есть одно важное ограничение - глобальные модули стора не позволяют создавать независимые состояния для инстансов одного компонента/модуля.
Предлагаемое автором решение - узконаправленные, локальные сторы, привязанных к конкретному инстансу модуля или просто Pinia scoped store.
Представьте, что вы можете слушать свои любимые песни на Яндекс.Музыке, прямо из своего любимого редактора кода, не переключаясь между приложениями. Это уже не мечта, а реальность! В этой статье мы рассмотрим, как интегрировать Яндекс.Музыку в Visual Studio Code и наслаждаться любимой музыкой прямо во время работы.
Недавно после очередного копирования файлов react-компонентов из проекта в проект я решил что хватит это терпеть и пора научиться публиковать npm-пакеты. Прошерстив интернет в поисках простого рецепта, который позволял бы с минимальными усилиями сделать пакет из react-приложения, я нашел несколько рабочих вариантов. Но, к сожалению, все они имели различные недочеты. Поэтому мне пришлось вооружиться напильником и составить эту памятку по результатам своих манипуляций.
Что такое монада? Душнила ответит: “Это моноид в категории эндофункторов”, и будет абсолютно прав. Вопросов появляется ещё больше: “Что такое моноид?”, “Что такое категория?”, “Что такое эндофунктор?”. В эту же секунду человека сковывает первородный ужас, сошедший со страниц рассказов Г. Ф. Лавкрафта, инстинкт самосохранения кричит: “Беги!” Интересный собеседник, обладающий эмпатией, приобнимет и скажет: “Бро, это же просто контейнер для какого-то значения, способный соединяться в цепочки таких же контейнеров. Ты же пишешь фронтенд? Или бэк на ноде? В холодильнике пиво, угощайся, а я тебе расскажу про библиотеку fp-ts и разные клёвые штуки из функционального программирования.
Для js-а существуют тонны библиотек, поддерживающих функциональный стиль программирования. Lodash, Ramda, Sanctuary — это то что сразу приходит в голову. В эпоху Typescript писать без типобезопасности уже моветон. Ни Lodash, ни Ramda типобезопасность не обещают, Sanctuary проверяет типы в рантайме, что требует дополнительных накладных расходов. Fp-ts изначально написан на typescript и помимо фич функционального программирования предлагает изящную проверку типов. Эта интересная библиотека реализует множество концепций из статически типизированных функциональных языков семейства ML, таких так Haskell, Ocaml и Scala. В fp-ts всё прекрасно, кроме документации и практических примеров использования. Моя задача как раз подсветить эти тёмные углы, а также показать несколько практических примеров.
В статье я не буду обсуждать базовые концепции ФП, такие как чистые функции, лямбды, композиция и прочее. Про это написано много статей и ютуб завален тоннами видеороликов от индиан гаев. Здесь я постараюсь простыми словами на практических примерах объяснить классы типов, какие они бывают и как их использовать в fp-ts.
Hello, world!
Представляю вашему вниманию перевод второй части этой замечательной статьи, посвященной возможностям JS и TS последних трех лет, которые вы могли пропустить.
В первой части мы говорили о возможностях JS, во второй поговорим о возможностях TS.
Это вторая часть.
Обратите внимание: названия многих возможностей — это также ссылки на соответствующие разделы документации TypeScript.
С момента моей последней публикации не прошло и года, но мне уже есть чем поделиться. Эта статья будет продолжением и возможно не последней. Так уж получилось, что мне удалось бесплатно получить тикет на курс middle frontend-разработчик от Яндекс Практикума по программе Цифровые профессии 2022. Этим опытом я бы и хотел с Вами поделиться. Статья будет полезна тру верстальщикам, джунам фронтендерам и тем кто в поиске обучения
Кратко о моем стеке на начало курса: нативный JS, браузерные события, DOM API, AJAX, SCSS, GULP, адаптивная верстка, навыки работы с вектором и растровыми изображениями.
Чтобы попасть на курс, нужно было пройти предварительное тестирование и несколько этапов интервью. На сколько мне известно на курс попадают не все, критерии отбора мне не известны. Но будьте готовы к тому, что всё не просто так.
Здравствуйте, меня зовут Дмитрий Карловский и я.. дуб. Я пустил свои корни в адептов святого $mol, и выращиваю из них сверх‑людей, способных каждый год сбрасывать былые привычки и убеждения, но тут же пускать побеги свежих идей, базирующихся на прочном рациональном основании.
А в качестве примера, позвольте посеять и в вас зерно сомнения в правильности традиционных решений, и показать, почему синтаксис языка композиции компонент в $mol такой странный, и почему другие языки для этой задачи совсем не подходят.
Привет! Меня зовут Вадим Казаченко, я лид фронта дизайн-системы ВТБ. Год назад устроился в банк и получил командную задачу — построить единую библиотеку компонентов, настолько универсальную, чтобы ее можно было использовать в любом продукте дизайн-системы банка, и при этом она не должна становиться «узким горлышком», как это обычно происходит с UI-китами в крупных компаниях. Дело в том, что в ВТБ существует множество дизайн-систем, над которыми работают десятки дизайнеров.
Непростая задача требовала проработки архитектуры дизайн-системы и сильно зависела от выбора решения для стайлинга. В этой статье подробно расскажу, от чего мы отталкивались и на чем остановили свой выбор.
