Пишем кастомный Хук для фильтров используя параметры страницы(query string). Если вам нужно использовать параметры страницы в качестве источника некоторых данных, то возможно данная статья будет для вас полезной.
Это статья о Styled Components будет полезна новичкам и старичкам. Для понимания материала нужны базовые навыки работы с React и TypeScript.
Styled Components — одно из популярных решений написания кода методом CSS in JS. Гибкое, простое и, главное, идеально вписывается в архитектуру React приложения.
Разберём данную библиотеку на базовых примерах в связке с TypeScript. Также поделюсь своими лучшими практиками при написание кода.
В данной заметке я бы хотел поделиться опытом реализации простого, но достаточно функционального сервиса уведомлений, который можно легко реализовать в своем React (или NextJS, как в моем случае) приложении. Приложение будет написано на TypeScript, базисом для него послужит фреймворк NextJS 11-й версии (версию 12, каюсь, пока не изучал и в бою не испытывал). Для связи между страницей и алертами будет использоваться библиотека RxJS.
Вдохновением для написания данной статьи послужила, во-первых, производственная необходимость (а все мы знаем, как данный зверь умеет придать вдохновения), а во-вторых - прошлогодняя статья Jason Watmore. Однако переводом данная заметка не является, поскольку итоговый результат сильно отличается от результата Джейсона. Кроме того, наш инструмент будет написан на TypeScript.
Давайте представим, что есть кандидат, и у него есть несколько этапов найма (интервью с hr, техническое интервью, согласование с руководством и тд.). По некоторым этапам HR сотруднику приходилось руками передавать информацию по кандидату в разные чаты, что неудобно и требовало время и внимание HR. Поэтому появилась идея это автоматизировать.
Сверстать собственный индикатор загрузки — одна из самых простых задач, с которой может столкнуться веб-разработчик. Для получения рабочего решения пригодятся базовые знания HTML и CSS, а JS будет нужен лишь для управления процентом выполненной задачи.
Однако эта простота обманчива. Интернет наполнен множеством решений, в которых индикатор загрузки анатомически состоит из кучи вложенных друг в друга div-контейнеров, приправленных щепоткой CSS. Не нужно так! В мире грустит один котенок, когда вы игнорируете семантику верстки и забываете про доступность (a11y).
В этой статье я расскажу, как мы в проекте Taiga UI подошли к написанию собственных Angular-компонентов ProgressBar и ProgressCircle.
Привет, я Сергей Вахрамов, занимаюсь фронтенд-разработкой на Angular в компании Тинькофф. Во фронтенд-разработку вошел напрямую с тайпскрипта, просто перечитав всю документацию. С того момента и спецификация ECMAScript расширилась, и TypeScript сильно подрос. Казалось бы, почему разработчики могут бояться дженериков, ведь бояться там нечего? Мой опыт общения с джуниор-разработчиками говорит, что во многом ребята не используют обобщенные типы просто потому, что кто-то пустил легенду об их сложности.
Эта статья для тех, кто не использует generic-типы в TypeScript: не знают о них, боятся использовать или используют вместо реальных типов — any.
Автор этого туториала сосредоточился на анимации. Он использовал хуки библиотеки React, её Context API, а также TypeScript и LESS. В конце вы найдёте ссылки на игру, её код и демо анимаций. Подробности рассказываем под катом, пока у нас начинается курс по Frontend-разработке.
Наша команда разработки начала работать с телевизорами два года назад. И в тот момент казалось, что эта тема не может быть кому-то интересна, так как больше похожа на пляски с бубном, чем на нормальную работу разработчика. Но недавно в телеграм-чате нас спросили, как работают наши экраны статуса заказа, и сказали, что об этом будет интересно почитать на Хабре. Так появилась эта статья и развёрнутый ответ.
Если у вас есть опыт написания однофайловых Vue компонентов, вы, вероятно, сталкивались с написанием CSS в своем компоненте. Они позволяют разработчикам группировать код более логическими способами, а не разбивать компоненты по используемому языку (HTML, CSS или JavaScript). Возможность группировать стили компонентов непосредственно рядом с HTML-кодом, к которому он применяется, является одним из основных преимуществ Vue, включая возможность применять CSS к компоненту, чтобы он не влиял на другие части пользовательского интерфейса.
Однако есть ряд функций взаимодействия Vue с CSS, с которыми вы, возможно, не знакомы, например, применение стилей непосредственно к элементам со слотами или новейшие функции, доступные в Vue 3.2. Давайте рассмотрим некоторые из этих других способов стилизации однофайловых Vue компонентов и их преимущества для ваших приложений.
Каждый мобильный разработчик рано или поздно сталкивается с тем, что его начинают утомлять некоторые рутинные операции. Скажем, дебажишь авторизацию в приложении. Или проверяешь перехват UTM-метки при первой установке. Или пытаешься понять, работает ли корректно очередная миграция БД. Или попадаешь в еще миллион ситуаций, когда тебе нужно по много раз елозить иконкой приложения по экрану смартфона (или курсором по эмулятору), чтобы его удалить и установить начисто.
Когда я работал над нативными Android-приложениями, меня спасал плагин для Android Studio ADB Idea. Очень удобно через шорткат можно было вызвать окошко с основными ADB командами по типу "Удалить приложение", "Принудительно завершить приложение", "Перезапустить приложение" и т.п.
Об одной из важнейшей функциональностей Angular «Внедрение зависимостей» на просторах рунета написано преступно мало, в основном затрагивается только «Внедрение сервисов». В этом материале я расскажу практически обо всех возможностях «Внедрение зависимостей», приведу примеры реального использования, объясню тонкости некоторых неочевидных моментов.
Встречался с различными парсерами JSON. Когда то было сложно сразу преобразовать дату в тот объект который хочется, иногда Enum жил своей жизнью. И вот не давно повстречал один Фреймворк для NodeJS. Речь пойдет про Ts.ED.
Когда я интегрировал свое Angular-караоке с YouTube, мне попался официальный YouTube-компонент из Angular Material. В README прилагалась инструкция для подключения. Почти каждая строка в ней примере сомнительна. Давайте разберемся, как сделать лучше и применить имеющиеся инструменты для ленивой подгрузки библиотеки.
Пришла осень и созрела очередная версия фреймворка Chorda 3.0. Можно наконец устроиться поудобнее за чашечкой кофе и подвести некоторые итоги
Про сам фреймворк можно почитать здесь, посмотреть там и пощупать тут
В прошлый раз я рассказывал о дизайн-функции, чертежах и построении API компонентов, а в этот раз попробую заинтересовать вас некоторыми очевидными решениями и не очень очевидными следствиями, которые появились во время работы с Chorda.
Привет, друзья!
В этой статье я хочу поделиться с вами опытом разработки хука для загрузки дополнительных данных (авось кому-нибудь пригодится).
На самом деле, хуков будет целых 2 штуки:
useLoadMore — для загрузки дополнительных данных при нажатии кнопки "Загрузить еще"useLoadPage — для постраничной загрузки данных (аля пагинация на основе курсора)Первый хук попроще, второй посложнее.
Полагаю, лишним будет говорить, что необходимость в использовании подобных хуков возникает в каждом втором проекте (по крайней мере, в моей сфере деятельности).
Любой более менее опытный фронтендер, работающий с Angular, умеет пользоваться роутером. Тут путь. Здесь компонент. Не забудь положить router-outlet в темплейт в нужном месте и вуаля.
И это покрывает 95% всех кейсов любого приложения. Остальное можно подпереть костылями. Одни из них хрупки, как китайский фарфор. Другие вполне себе претендуют на решение, достойное самого ядра приложения.
Давайте представим не такой уж редкий случай: онлайн магазин, выбрали покупки, посмотрели корзину, приступаем к оформлению.
И тут дизайнер поменял наркотики: все формы оформления заказа отрисованы в диалоговом окне. На вопрос “Зачем?” получаем отсутствующий взгляд и глупое хихиканье. Заказчик не добавляет позитива и соглашается во всем с дизайнером.
До HolyJS осталось меньше месяца — пора поведать Хабру, какие именно доклады там будут. Под катом их описания, а тут отметим пару вещей:
— В этот раз шире обычного раскрыта тема производительности. Когда React.memo не ускорит, а замедлит? Почему Solid.JS такой быстрый? Что нужно знать JS-разработчику в современном многоядерном мире?
— Помимо докладов, в программе есть несколько воркшопов, так что будет не только теория со слайдами, но и практическая деятельность.
Описания мы разделили по тематическим блокам, но это деление не строгое, некоторые доклады можно причислить к разным блокам сразу.
