Vue 3 уже давно в строю, но его "прокси-движок" и особенности Composition API по-прежнему раскрывают себя всё глубже. В статье мы разберём, как Track/Trigger помогают отслеживать изменения, зачем нужны customRef и как грамотно использовать <Suspense> для асинхронных компонентов. Всё это - на примерах и с советами по оптимизации в крупных проектах.
Приступаем к деталям!
Nuxt 3 — это мощный фреймворк на основе Vue, который упрощает разработку серверно-рендерируемых и статически генерируемых веб-приложений. Одна из его особенностей — возможность работы с асинхронными данными с помощью специальных хуков. Они обеспечивают эффективное взаимодействие с API, динамическую загрузку данных и подгрузку контента. Многие знают про эти хуки, но далеко не все используют их потенциал в полной мере.
Меня зовут Леша Смолыгин, я разработчик в Lamoda Tech. Разберемся, как использовать популярные хуки запроса из коробки useFetch, useAsyncData, $fetch, useLazyAsyncData и реализовать кастомный fetch. Эти инструменты решают задачи, связанные с загрузкой данных из API, при этом каждый из них имеет свои особенности и ограничения. Разберём их и сравним, чтобы понять, какой инструмент лучше подходит для той или иной ситуации в вашем приложении.
Сделайте интерфейс React-приложения более отзывчивым и плавным с помощью хуков useTransition, useDeferredValue и useOptimistic. Управляйте приоритетами рендеринга, избегайте подвисаний при работе с большими данными и реализуйте оптимистичные обновления для мгновенной реакции интерфейса. Практические примеры и полезные советы ждут вас! 🚀
Привет, Хабр!
Меня зовут Алексей Хрисанфов. В этой статье я хочу рассказать почему и как ваши pet-проекты могут стать ключом к развитию вашей карьеры и почему нельзя недооценивать важность pet-проектов.
В данной статье я более подробно рассуждаю про чистый код, документацию, сравниваю микросервисы и монолиты и рассказываю про модульный подход, благодаря которому можно заложить фундамент для масштабируемого приложения.
Всем привет, меня зовут Павел Рожков, я lead фронтенда в компании Doubletapp. Мы занимаемся заказной разработкой, и в нашей работе над React-проектами важную роль играет наш архитектурный гайдлайн, который мы постоянно совершенствуем. Это свод договоренностей о том, каким образом будет организован код в нашем проекте.
Гайдлайн помогает нам:
• Безболезненно менять состав команд на проектах между собой. Каждый может заменить коллегу или усилить команду, минуя этап долгого онбординга.
• Сократить время разработки. У нас часто не возникает вопроса, как здесь сделать лучше, куда что положить, как организовать. Мы подумали об этом заранее.
• Поддерживать старые проекты, т.к. они написаны по тем же принципам.
• Поднять качество кода: работать на проекте становится удобнее и можно сосредоточиться на важных вещах.
• Онбордить новых членов команды благодаря готовой документации.
Содержание:
• Почему бы нам просто не взять FSD?
• Шаблон проекта с архитектурой
• Структура кода приложения
• Заключение
Эта статья предназначена в первую очередь для веб-разработчиков. Я не являюсь экспертом в области сетей, администрирования или DevOps, поэтому представленный материал не углубляется в сетевые аспекты.
Из любопытства, я как то задался вопросом практического использования разных номеров портов: что они означают для разработчиков, почему используются определенные порты, и какие приложения чаще всего запускаются на них. Цель статьи — пролить немного света на эти “магические” циферки с точки зрения их прикладного применения веб-разработчиками.
Исторически приложения на Node.js (например, с использованием фреймворков Nest.js или Express) и Webpack по умолчанию запускаются на 3000 порту, если не вносить изменения в базовую конфигурацию. Vite, напротив, изначально использует порт 5173. Это может быть связано с отсылкой к названию "Vite" (если подключить немного воображения).
С технической точки зрения нет разницы, на каком порту запускать локальный сервер для разработки — это может быть 1050, 10900 или любой другой. Главное, чтобы порт был:
В 20-ом веке браузеры были гораздо менее развиты, а CSS сильно ограничен. Он подходил только для оформления простых текстов что-то вроде документов Word. Для оформления сайтов приходилось обращаться к таблицам, чтобы создавать подобие типографской сетки для раскладки элементов. Пока в 2003 году не появился CSS Zen Garden, пропагандирующий оформление сайтов с помощью CSS. В оформлении использовались хаки с флоатами и другие трюки, но технология была несовершенна. Далее, с развитием браузеров, появились инлайн-блоки. Они неплохо справлялись с расположением элементов в ряд, но тоже имели недостатки. И только в начале десятых появились новые модули раскладки: Flexbox и Grid Layout. О них и поговорим.
Эта статья продолжает материал «Telegram‑бот‑магазин на Python: пошаговый гайд с оплатой, каталогом и админкой (Aiogram 3 + SQLAlchemy 2)». Сегодня мы сделаем вашего бота еще лучше: перейдем с устаревшей технологии лонг‑поллинга на современные вебхуки.
Кроме того, мы добавим поддержку двух дополнительных платежных систем — Telegram Stars и Robokassa. Особое внимание уделим Robokassa, чтобы на ее примере показать, как универсально интегрировать платежные системы, используя те же вебхуки.
Капча — это элемент сайта, с которым сталкивается почти каждый пользователь и про который редко вспоминают, если всё работает как надо. Наша капча верно служила нам, но была устаревшей, а легаси‑код серьёзно ограничивал возможность вносить изменения. Кроме того, были сложности с переключением по сайту с помощью табов и голосового помощника. Всё это подтолкнуло нас не просто обновить капчу, а переписать её с нуля и добавить инклюзию.
Меня зовут Завен Агаджанян, я веб‑разработчик экосистемных продуктов VK ID и в этой статье расскажу, как мы писали капчу с нуля и что из этого вышло.
Полагаю, каждый разработчик рано или поздно приходит к мысли о том, что ему есть, что рассказать и чем поделиться. Кто-то даже начинает это делать в том или ином формате. И, конечно, хочется сказать спасибо всем тем, кто отвечает на вопросы на stackoverflow, пишет статьи или делает еще какой-либо контент. Однако быть автором труд весьма специфичный, всегда есть риск, что твой контент не будет полезен или даже интересен. За несколько лет мною было написано около пары десятков статей, а также было начато несколько своих проектов, но все это выглядит на первый взгляд как «работа в стол».
Однако, порефлексировав, я понял, что вся работа, которая не дает ожидаемого результата не напрасна. Как минимум - это опыт, а опыт штука полезная. Никогда не угадаешь, что тебе может пригодится в будущем. К тому же не стоит сбрасывать со счетов накопительный эффект общей массы знаний. Звучит довольно туманно, поэтому приведу пример. Разработка показала мне, как можно копить фрагментированные кусочки знаний долгое время, которые в определенный момент могут сложится в полную картину, а ты будешь удивляться, как не понимал чего-то раньше.
Так о чем это я? Я буду делать личный блог или сайт, на самом деле еще не знаю во что это выльется. Но как показал опрос в моем TG канале, у ребят, как и у меня, есть интерес к тому, как можно сделать и использовать блог, чтобы он приносил тебе пользу в каком-либо виде. Если дело пойдет, то здесь будет целая арка статей. Приступим!
Привет! Меня зовут Александр, я фронтенд‑разработчик в Точке. Моя команда занимается разработкой «системы построения интерфейсов» aka UI‑кита. В статье расскажу, как мы решали вопрос выгрузки многоцветных логотипов в формате SVG из Figma и добавления к ним поддержки тёмной темы.
Привет, React-энтузиаст! Случалось ли тебе писать логику для форм, где нужно не только обработать кучу полей, но и синхронизировать их с асинхронными действиями (запросы, загрузка данных, показ успеха или ошибок)? Если да, то, возможно, ты уже слышал об экспериментальном хуке useFormState в React. Однако на смену ему пришёл более мощный инструмент - useActionState. В статье обсуждается, почему прежний подход ушёл на пенсию, чем хорош новый, и как он может упростить жизнь каждому фронтенд-разработчику.
Дисклеймер: хотел создать скромный пост, а не статью, но не справился с управлением новым редактором. А старый редактор не поддерживает посты.
Допустим, у нас есть блок (скажем, бутстраповская ячейка <div class="col-12">) и мы хотим её схлопывать (скажем, по клику на кнопке).
Вероятно каждый программист или компания, сталкивались с мыслями о своей крутости или хотя бы крутости своих алгоритмов 😎. Разумеется, в этом случае может возникнуть соответствующее нежелание делиться разработками с широкой аудиторией. Данная проблема минимизируется переносом части кода на сервер (если речь идёт о клиент-серверных приложениях). Однако, такой подход не всегда применим, и порой обстоятельства вынуждают нас оставлять чувствительные участки кода прямо на виду.
В этой статье мы познакомимся, как минимум, с крутым словом, а по возможности с такой техникой как обфускация в контексте языка JavaScript. Реализуем механизмы для скрытия алгоритмов и усложнения обратной разработки кода. Попутно, мы посмотрим что такое AST, и приведём инструменты, с помощью которых можно взаимодействовать с ним для реализации обфускации.
Приветствую, Хабр! Относительно недавно я решил влиться в С# и его технологию для создания веб-приложений ASP.NET. До этого писал в основном на С++ и Python с Django. Ну а так как я по жизни практик, то и чтоб чему-то научиться, надо что-то сделать, пусть и корявенькое (хотя пару книжек, конечно, прочитал). Выбор пал на стандартное приложение магазина книг, а точнее его бэк составляющую, ибо с дизайном и любыми, даже базовыми, проявлениями фронтовой части я не дружу от слова совсем)
Вначале сделал приложение с базовыми контролерами REST API по учебнику и т.д. Но после захотелось попробовать уже другой вариант, и я решил использовать GraphQL...
Всемирная паутина (WWW) — это не просто набор веб‑страниц, это революция, изменившая наше восприятие информации и общения. С момента своего появления в начале 1990-х годов WWW кардинально трансформировала мир, открыв новые горизонты для бизнеса, образования и повседневной жизни. История веб пестрит взлетами, падениями и уходами в крайности, но здесь мы пройдемся только по самым ярким моментам! Следить за эволюцией технологии, которая навсегда изменила наше общество, мы будем глазами фронтенд‑разработчика.
Массовая трансляция видео и аудио генерирует огромное количество трафика. А трафик это деньги. Иногда – большие деньги. И тогда бизнес начинает задумываться – как бы сделать так, чтобы эти деньги не платить. А желания бизнеса – плодотворная почва для интересных решений. Об одном из них мы и поговорим.
Всем привет!
Меня зовут Руслан и я fullstack разработчик, я работаю над заказами и разрабатываю свои digital продукты. На данный момент я разрабатываю конвертер файлов, например картинок, png в webp, jpg в png и так далее. Итак, я решил поделиться этапами своей разработки, рассказать о своем опыте и показать, как шаг за шагом создаются собственные продукты. Именно в данной статье я буду писать только про frontend часть, так как, к разработке бэкенда еще не приступил.
Привет, на связи Олег Казаков из Spectr. В этой статье поговорим о двух важных инструментах GitLab, которые помогают передавать данные между этапами CI/CD-пайплайна — Cache и Artifacts.
Если вы сталкивались с задачами оптимизации пайплайнов или передачи данных между этапами, то наверняка задавались вопросом, чем отличаются эти механизмы и в каких случаях использовать каждый из них.
