Веб-разработка *

В этом посте я попытаюсь формализовать и систематизировать своё собственное понимание, какой должна быть структура SPA-приложений. Это очень субъективное изложение, отражающее мой собственный опыт. Оно относится к определённому классу веб-приложений (SPA, PWA) и не претендует на универсальность.

В контексте данной статьи SPA-приложение - это классическое клиент-серверное приложение, где клиент существует в браузере (как правило, в пределах одной страницы) и взаимодействует с сервером посредством HTTP-запросов. Приложение разрабатывается в виде набора npm-пакетов в стиле “модульный монолит”. Серверная часть реализована на движке Node.js.

Когда наш продукт (протокол рекуррентных криптоплатежей на NodeJs, React) вырос, возникла необходимость подключить систему продуктовой аналитики, чтобы понимать, что и как делают наши пользователи. В статье хочу рассказать об опыте подключения и использования системы аналитики Posthog. Думаю, статья будет полезна разработчикам, впервые подключающим аналитику, техдиректорам и менеджерам для оценки потенциальных сроков и рисков.

В PHP становится все больше способов работы с функциями. Хотя ООП и является основной парадигмой для этого языка, процедурный и функциональный подходы тоже имеет право на жизнь в PHP. Давайте рассмотрим различные примеры работы с функциями в PHP 8.3. Данная статья подойдет для новичков и продолжающих.

Рассказываем, как мы сделали универсальный компонент вместо копирования кода и многократно упростили жизнь разработчикам.

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

На хабре переодически появляются статьи про библиотеки для построение своего WYSIWYG редактора. Такая потребность появилась и в моей команде - «билайн дом», для создания новостей. В этой статье взглянем на них более общим взглядом и дополнительно разберем библиотеку LexicalJs. 

// гофер пытается найти логику среди обработки ошибок
+-------+-------+-------+-------+-------+-------+
|       |  err  |       |  err  |       |  err  |
|  ,_,,,        |       |       |       |       |
| (◉ _ ◉)       |       |       |       |       |
|  /)  (\               |       |       |       |
|  ""  ""               |       |       |       |
+       +-------+       +-------+       +-------+
|       |  err          |  err  |       |  err  |
|       |               |       |       |       |
|       |               |       |       |       |
+-------+       +-------+       +-------+       +
|  err  |               |  err                  |
|       |               |                       |
|       |               |                       |
+       +-------+       +       +-------+       +
|       |  err  |               |  err  | logic |
|       |       |               |       |       |
|       |       |               |       |       |
+-------+-------+-------+-------+-------+-------+

Я пишу на Go несколько лет, в Каруне многие вещи сделаны на нём; язык мне нравится своей простотой, незамысловатой прямолинейностью и приличной эффективностью. На других языках я писать не хочу.

Но сорян, к бесконечным if err != nil я до конца привыкнуть так и не смог.

Да-да, я знаю все аргументы: явное лучше неявного, язык Go многословен, зато понятен, и всё такое. Но, блин, на мой взгляд Го-вэй Го-вэю рознь.

Хабр, привет! Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.

Сегодня я расскажу:

• какие правила у меня есть при именовании CSS-переменных для дизайн-систем;
• на какие логические свойства вам стоит обратить внимание;
• зачем нужно делать прозрачные рамки;
• как я делаю зависимость значения одного свойства от других более явным;
• про пользу «внутренних» переменных.

Давайте посмотрим, что я вам подготовил.

На протяжении трех лет мы в команде разрабатываем онлайн-игру для самих себя. Сначала, во времена ковида, она отчасти заменила нам офлайн-корпоративы, а сейчас, уже став традицией, дополняет живые встречи. Начинали с простенькой настолки в вебе с картой и кубиками, а сейчас делаем кастомную изометрическую 3D-игру с видом сверху на ThreeJS. В этой статье я поделюсь процессом эволюции игры с точки зрения разработки и геймдизайна, а также расскажу о задумке, мотивации и ресурсах на разработку и о том, как побудить коллег общаться друг с другом, работая из разных точек мира и разных таймзон.

Меня зовут Артём, я фронтенд-разработчик, занимаюсь всякого рода импровизациями. Если нужно построить что-то экспериментальное в короткий срок — это ко мне.

Сегодня я расскажу про книги которые помогли мне узнать что-то новое и полезное, а также расскажу про те книги, которые не в коем случае не надо читать. Место в списке ничего не значит, книги про разное и расставить их в топ невозможно.

А знаете ли вы, как на самом деле работают таймеры в node.js? В этой статье мы разберемся, как хранятся таймеры, когда запускаются и как в целом все работает вплоть до системных вызовов.

Сегодня рассмотрим важную тему для всех, кто занимается созданием сложных и многошаговых форм в React. Мы все знаем, как это бывает: бесконечные рендеры, тонны кода для валидации и управления состоянием, а также бесконечная борьба за оптимизацию производительности. Но никто уже давно не отчаивается, ведь существует мощное и гибкое решение — React Hook Form.

React Hook Form — это библиотека, которая использует концепцию неконтролируемых компонентов, чтобы минимизировать количество повторных рендеров и повысить производительность приложения.

Данная статья полезна для новичков, которые только начинают работать со сложными формами в React.

В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке «useArray», одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

В одном из проектов мне нужно было создать сложную админку для крупного клиента. Интерфейс требовал большо количества интерактивностей, а также поддержку различных тем и динамических стилей. Именно тогда я решил обратить свой взгляд на CSS‑in‑JS библиотеки, и это для меня стало большим открытием.

Ведь стилизация компонентов — основа для создания интуитивно понятных и эстетически приятных интерфейсов. И иногда традиционные методы стилизации, такие как CSS‑файлы или препроцессоры, имеют свои ограничения и могут усложнять сам процесс разработки, чего мы точно не хотим.

Здесь вот и приходят на помощь решения CSS‑in‑JS, объединяющие фичи JS и CSS.

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

Сегодня мы рассмотрим сходства между этими двумя концепциями и сделаем вывод о том, когда правильнее всего использовать каждую из них.

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

Сегодня мы по шагам расскажем, как подключить проверку пользовательских данных с помощью одноразового пароля по SMS. Для этого будем использовать платформу MTC Exolve и фреймворк Flask. Такой метод легко внедрить в свой проект и сделать работу с простыми личными кабинетами удобной и максимально ненапряжной для пользователей.

Привет, Хабр! Я Виталий Дуденко, разработчик в отделе пользовательских интерфейсов Первой грузовой компании. Наша компания занимается грузоперевозками по железной дороге. Для усовершенствования сервиса перевозок мы разрабатываем цифровые продукты, для которых необходимо создавать интерфейсы, например, для Личного кабинета клиента (ЛКК). Подробнее о нем мы рассказывали здесь.  

На рабочем проекте возникла необходимость создать бесшовную текстуру для фона страниц с определенным узором. Разработка этого паттерна была нужна для сайта нашей цифровой дочки. Оказалось, что готовых решений нет, а в русскоязычном сообществе я не сумел найти инструкции или намёков как такое можно сделать. Поэтому далее я представлю свою реализацию генератора с использованием p5.js на angular.

Всем привет! Я Сергей, фронтенд-разработчик из команды привлечения Центрального университета. Занимаюсь проектами, связанными с регистрацией абитуриентов на мероприятия, и внутренними проектами по управлению мероприятиями. 

Осенью мы ждем поступление бакалавров. Чтобы начать набор, нужно встроить форму регистрации в лендинг на CMS. Форма довольно простая: пара полей для ввода данных, диалоговое окно с текстом соглашения об обработке персональных данных и кнопка отправки данных на сервер. Для скорости работы и проверки работоспособности идеи решили встроить приложение через iframe. Но форма стала обрастать различными бизнес-требованиями, которые приносили проблемы. В статье расскажу, с какими трудностями мы столкнулись и как их решали.

Привет, меня зовут Грант, я фронтенд-разработчик в KTS. В этой статье я хочу поделиться опытом заведения проектов от нашей команды.