Хочу поделиться своим видением сборки для быстрого старта разработки на React.
Помогает быстро запуститься, когда нужно «на скорую» войти в разработку.
Что‑то я подглядел здесь же, на Хабре, к чему‑то пришёл сам, ну и «ангажировал» немного на просторах «необъятного».
Что «под капотом»
Webpack 5
React v.18
Redux (Redux Toolkit)
Typescript
Css modules
Jest
VS Code
В этой статье разберем еще одну малоизвестную, но не менее полезную возможность @reduxjs/toolkit - createAsyncThunk.withTypes()
Привет! Меня зовут Сергей, я работаю фронтенд-разработчиком в Тинькофф на одном из внутренних приложений в направлении Compliance. Последние полгода я активно занимался повышением стабильности и качества продукта, в том числе увеличивал покрытие приложения юнит-тестами. За это время я написал более 500 юнит-тестов, а тестовое покрытие удалось увеличить примерно на 30% с учетом того, что бизнес-задачи продолжали выполняться. В ходе работы над тестами я получил новый опыт и пришел к интересным выводам, которыми хочу поделиться с вами.
Всем привет :)
Я Никита, уже больше 4 лет занимаюсь фронтендом, погружаюсь в инфраструктуру и кайфую от IT мира и комьюнити около веба, частенько читаю Хабр и решил попробовать написать сам.
Цикл статей про опыт добавления динамических элементов на страницу с помощью Drag and Drop и получения данных с BFF. Предварительно разбив на три части.
1. Описание решения, технологий и мотивация
2. Техническая часть с кодом про структуру компонентов и Drag and Drop решение
3. Техническая часть с кодом про BFF( backend for frontend ) решение
Хотите узнать, как ускорить выполнение JavaScript в веб-приложениях? В этой статье я подробно расскажу о веб-воркерах, шине данных между основным потоком и веб-воркерами, и как это можно применить в Angular, React и Vue, используя мой npm пакет web-worker-bus. Вы узнаете, как вынести тяжелые вычисления в отдельные потоки, организовать обмен данными, и как это все собрать в единую архитектуру. Примеры кода, инструкции и советы внутри помогут вам сделать ваши проекты быстрее и эффективнее с помощью этого инструмента. Освоение этого подхода и использование web-worker-bus может стать значимым улучшением в ваших проектах. Загляните, если интересуетесь оптимизацией JavaScript и хотите узнать, как мой пакет может вам в этом помочь!
Всем привет!
Решил начать писать короткие статьи с маленькими фичами, которые могут помочь посмотреть на решение проблем немного под другим углом.
Дано:
Мы используем Fluent UI в нашем проекте. После перехода на React 18 мы начали получать ошибки такого рода:
Приветствую, друзья технологии!
Сегодня в мире постоянно меняющихся технологий и уникальных разработок смартфонов, планшетов и других устройств, оказаться "в тренде" - это как настоящее искусство. Каждый из нас хочет использовать устройства, которые позволяют нам легко и интуитивно взаимодействовать с миром цифровых возможностей. Одной из фантастических новинок, которая взрывает сознание пользователей и разработчиков, является свайп-сайдбар – это гениальное решение для эффективной навигации и управления контентом!
Вам, наверняка, приходилось сталкиваться с ситуацией, когда приложение или веб-сайт предлагают свернутый сайдбар, который появляется с одного края экрана после легкого свайпа пальцем. Это действительно захватывающий опыт, который добавляет удобство и стиль в нашу повседневную жизнь.
В этой увлекательной статье мы окунемся в мир свайп-сайдбаров, расскажу, как они работают, как создать свой собственный сервис для свайпов, прикрутим все это дело к Vue + Typescript. Не волнуйтесь, если вы новичок в программировании или разработке, я проведу вас через каждый шаг, чтобы вы могли освоить это волшебство свайпов!
В этой статье я бы хотел показать, как можно создавать NPM пакеты так, чтобы пользователь вашей библиотеки мог конфигурировать типизацию вашего пакета. А так же я опишу, зачем и кому это может быть интересно.
На связи снова Архитектурный комитет компании SimbirSoft, и мы продолжаем наш цикл статей, посвященных Design API First. Ранее мы уже писали о том, что представляет собой этот подход, приводили пример спецификации для сервиса аутентификации и рассказывали, как мы интегрируем этот паттерн в наш конвейер разработки.
Сегодня мы немного отвлечемся от бэкенда и разберем автоматизацию одной из рутинных задач на стороне frontend-разработки. А именно описание моделей интерфейсов для взаимодействия фронта с беком, а также написание API-сервисов, в которых фиксируются endpoints, методы запросов и формат передачи данных (query-параметры, заголовки, тело).
Всем привет? Я Данила, фронтенд разработчик в ПСБ. 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
Звучит, конечно, не сложно, но для этого нужно собирать своего трансформера с разных форумов, я же предлагаю свое решение в готовом и компактном виде :)