JavaScript *

Сегодня дизайн-система — это неотъемлемая часть процесса разработки цифровых продуктов. Однако не всегда очевидно, как именно такой инструмент помогает работать с UI-компонентами и улучшать качество продукта.

Меня зовут Артур Иванов, я тимлид B2B Product Design департамента Design & Research Office (DRO) «Лаборатории Касперского», и именно перед нашей командой встал вызов по внедрению дизайн-системы под названием Hexa UI в уже существующие рабочие процессы отдела дизайна.

Тот, у кого из всех инструментов есть только молоток, склонен на любую проблему смотреть, как на гвоздь.
Абрахам Маслоу

Мы склонны использовать знакомые решения. Когда речь заходит о переключении контента, мы обычно используем свойства display: none или opacity: 0 с добавлением JavaScript. Однако современный веб стремительно развивается, и, возможно, настало время рассмотреть другие подходы к переключению контента — узнать, какие нативные API на сегодняшний день поддерживаются, их достоинства и недостатки, а также некоторые нюансы, о которых мы могли и не подозревать (включая псевдоэлементы и другие малоизвестные вещи).

Brython позволяет Python-коду взаимодействовать с кодом JavaScript. Наиболее распространенный шаблон — доступ к JavaScript из Brython. Обратный вариант, хотя и возможен, не распространен. Вы увидите пример вызова функции Python в JavaScript в разделе Модульные тесты JavaScript.

Ваше знакомство с различными способами установки Brython дало вам общее представление о том, как работает реализация. Вот краткое изложение некоторых характеристик, которые вы узнали на этом этапе руководства:

Если вы веб-разработчик и предпочитаете писать на Python, а не на JavaScript, то Brython — реализация Python, работающая в браузере, — может оказаться для вас привлекательным вариантом.

Безумные штуки иногда можно найти в интернете. Листая 2024 JavaScript rising stars (https://risingstars.js.org/2024/en#section-all) обнаружил там удивительного зверя - Postgres скомпилированный через emcc в WASM версию, и допиленный до состояния, когда его можно запустить внутри JS-процесса (браузер/Node.js/Bun/etc).

Как он устроен, как им пользоваться, и, самое главное, зачем? Добро пожаловать под кат :)

JSON - наш повседневный помощник, но вместе с другими текстовыми форматами он может преподнести неприятные сюрпризы: потеря точности чисел, громоздкие файлы, путаница с датами. Рассказываю, как этих проблем избежать и повысить эффективность с помощью стриминга в Node.js, а также MessagePack и Protobuf. Узнайте, где подводные камни и как их обходить на практике!

Если хотите понять, в чём именно проблема на иллюстрации, загляните в статью — там всё разобрано :-)

Привет, Хабр.

Некоторое время назад наткнулся на интересную статью в блоге Кристофера Артмана, которой он сравнивает до чего эволюционировал Реакт в наше время и задается вопросом, о том, не вернулись ли мы в отправную точку, и Реакт на сервере - это старый добрый PHP.

Кроме самой статьи мне интересно было почитать комментарии к ней. И там довольно большое количество людей не согласилось с автором.

Под катом Вы найдете вольный перевод (или даже рерайт) этой статьи, а с оригиналом можно ознакомится по ссылке.

Метод, используемый для установки Brython, может повлиять на то, как и где вы можете развернуть свой проект Brython. В частности, для развертывания в PyPI лучшим вариантом будет сначала установить Brython из PyPI, а затем создать свой проект с помощью brython-cli. Но типичное веб-развертывание на частном сервере или облачном провайдере может использовать любой выбранный вами метод установки.

Сложно внедрить DDD в NestJS, не запутавшись в абстракциях? В статье рассмотрены частые ошибки - от комбайна в контроллерах до формальных Value Objects. Разбираем, как выделять слои (Domain, Application, Infrastructure, Interface), правильно использовать Entities и репозитории и создавать поддерживаемую архитектуру.

В рамках учебного курса основы разработки для Р7 Офис публикуем самый полный список сравнений в разработке Excel Vba vs OnlyOffice/Р7 офис JavaScript

Узнайте, почему большие TypeScript-проекты начинают "захлёбываться" от рекурсивных типов и обилия импортов, и как с помощью правильной структуры монорепы, настройки tsconfig и диагностики ускорить время компиляции и работу IDE. Рассматриваем инструменты, параллельную сборку, оптимизацию рекурсивных типов и прочие техники, которые помогут сохранить ваш проект быстрым и удобным.

Яндекс капча: попытки установки для самых джун’ых.

Для чего?

Почему вдруг «молодо-зелено» учит «плавали-знаем» тому, что и так описано в оф.документации? Дело в том, что эта документация не сильно newbie-friendly. И если вы никогда до этого не ставили на сайт капчу, то имеется ненулевой шанс, что и не поставите, не прочитав данное «крео». Документация написана довольно сносно, но не для тех, кто здесь впервые. Не хватает основы — концепции (хотя раздел концепций в документации имеется…).

Если вы пишете на React и любите TypeScript, вам стоит обратить внимание на TanStack Router - современный, гибкий и полностью типобезопасный роутер. В статье разбираю его ключевые возможности (loaders, кэширование, работу с query-параметрами, SSR) и сравниваем с другими популярными решениями.

Оптимизация производительности React приложений — важная часть разработки, особенно когда речь идет о сложных интерфейсах. В основном разработчики лишь краем уха слышат о необходимости использования хуков useMemo, useCallback и React.memo для оптимизации кода. Но если бездумно использовать их, то можно даже навредить вашему приложению

В этой статье я попытаюсь разобрать, когда действительно стоит использовать useMemo, useCallback и React.memo, а когда их использование излишне. Мы изучим каждый из хуков, их влияние на рендеринг компонентов в React, а также рассмотрим практические примеры с подробными объяснениями работы каждого из хуков.

Привет, друзья!

В этой серии статей я рассказываю о Convex — новом открытом и бесплатном решении BaaS (Backend as a Service — бэкенд как услуга), которое выглядит очень многообещающе и быстро набирает популярность среди разработчиков.

На сегодняшний день Convex предоставляет реактивную базу данных смешанного типа, механизм аутентификации/авторизации, файловое хранилище, планировщик задач и средство интеллектуального поиска.

Эта третья и завершающая часть серии, в которой мы поговорим о планировании задач, хранилище файлов и поиске.

В конце мы также рассмотрим расширенный пример использования Convex для разработки полноценного веб-приложения.

• Первая часть
• Вторая часть

Как использовать мощь системы типов TypeScript для вычисления логики ещё на этапе компиляции и автоматической генерации кода. Разбираем условные типы, шаблонные литералы, рекурсивные типы и другие приёмы, чтобы упростить разработку, сократить дублирование кода и снизить вероятность ошибок на runtime.

Привет! Я – Егор, фронтенд-разработчик в Чиббис. Наша команда разработала новый личный кабинет для партнеров – b2b-приложение с нуля, используя Feature-Sliced Design. В статье я делюсь нашим опытом: от выбора стека технологий до построения процесса разработки, который помог нам за 5,5 месяцев превратить пустую папку в рабочий продукт. Мы разберем итерации, FSD-макеты, этапы создания разделов и расскажем, как удалось сократить время разработки и тестирования.

Вас ждет готовый шаблон процесса, который вы сможете применить в своих проектах.

Асинхронный код часто становится камнем преткновения для начинающих разработчиков. Почему функции выполняются не в том порядке, зачем нужны промисы, и что делает async/await? В статье я простыми словами объясняю:

• Как работает Event Loop и почему это важно.
• Какие ошибки чаще всего допускают джуны при работе с асинхронностью.
• Как научиться писать понятный и предсказуемый асинхронный код.

Если асинхронность вызывает больше вопросов, чем ответов, загляните в статью - там всё по шагам. 🙂

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

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

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

Реактивное программирование работает аналогично. Оно имеет дело с потоками данных (например, графиком прибытия автобусов) и распространением изменений (прибытием нового автобуса), позволяя приложениям реагировать в режиме реального времени (так же, как пассажиры реагируют, садясь в автобус). Звучит знакомо?

В этой статье мы углубимся в суть реактивного программирования, сосредоточив внимание на его реализации с использованием JavaScript/TypeScript в среде Node.js. Мы также будем следить за глобальным контекстом, который применим ко многим языкам программирования и платформам.