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

Привет, Хабр! Меня зовут Александр, я разработчик и, как многие в IT, стараюсь уравновешивать сидячую работу спортом — в моем случае, это велосипед и бег. И, как многие спортсмены-любители, я пользуюсь Strava.

В этой статье я хочу провести вас «под капот» моего проекта и показать на реальных фрагментах кода, как с помощью Python, щепотки NumPy и капли JavaScript можно построить собственный мощный инструмент для анализа спортивных данных. Это история не только про код, но и про философию открытых данных и желание сделать профессиональные инструменты доступными для всех.

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

Сергей Пантелеев и Данил Щуцкий собрали ключевые новости PHP и Laravel за июнь. Будьте в тренде — читайте обзор! 🚀

В мире тестирования фронтенд-приложений существует одна забавная особенность. Визуальное представление нашей программы почти всегда остается вне зоны покрытия тестами,  даже несмотря на то, что фронтенд-разработка это в первую очередь про визуал. Если посмотреть на то как пишут тесты на типичном проекте, то в основном это будут юнит-тесты проверяющие внутреннюю специфику компонентов или отдельных функций плюс какие-нибудь е2е-тесты проверяющие отдельные сценарии. Чаще всего все эти тесты полностью игнорируют визуальную составляющую, и в случаях если у вас слетели шрифты, отступы, или просто html-элемент скрыт стилями, то тесты все-равно будут зелеными.

Часто приходилось видеть тесты опосредовано проверяющие визуальное отображение html-элемента, что-то в стиле expect(elem.classList.contains("visible")).toBe(true). Говорить о надежности таких тестов конечно-же не приходится, так как изменив содержимое css-селектора стилизующий данный класс, данный тест все еще будет зелёным, несмотря на то что по факту элемент будет скрыт.

Результат от подобных тестов вполне ожидаемый. Обновили версию UI-библиотеки и на всем проекте поехала верстка? Тесты зелёные. Случайно переопределили CSS-переменную и теперь вместо приятной тщательно подобранной дизайнером гаммы цветов вы видите лишь кислотно-вырвиглазную солянку? “Бывает, надо было ручками протестировать” - скажет менеджер.

Решить данную проблему нам поможет добавление скриншот-тестирования на проект.

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

В книге «Законы простоты » Джон Маэда (из MIT) предлагает десять законов для баланса простоты и сложности в бизнесе, технологиях и дизайне — руководящие принципы для того, чтобы нуждаться в меньшем и на самом деле получать больше.

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

Однажды передо мной встала довольно интересная задача: обеспечить взаимодействие стороннего веб-приложения - и набора сервисов, имеющих gRPC интерфейс.
Нужно было проводить обработку данных от веб-приложения через конвейеры AI-агентов, собирать конечный результат, и отдавать его приложению. А также, что немаловажно, обеспечить наглядность мониторинга и управления всем хозяйством.
Мне потребовалось разработать собственный сервер на PHP, в котором поддержать три типа интерфейсов. Во-первых, RestAPI для веб-приложения. Во-вторых, gRPC-сервис для взаимодействия с AI-агентами. В-третьих, HTTP + Websocket для интерактивного мониторинга и управления.
Для этого пришлось создать новый продукт - который, возможно, кажется полезен и вам.

Устали от бесконечных споров о CSS-методологиях? В этой статье я рассказываю, как объединил БЭМ и Tailwind в мощный гибридный подход, который спас мой проект и нервную систему. Узнайте, как избавиться от мучительного нейминга, решить проблему с отступами и ускорить разработку в два раза.

Никакого догматизма — только практический опыт и реальные примеры использования лучших сторон обоих подходов.

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

В моем сервисе есть два режима создания курсов - AI режим, это когда ты пишешь промпт или прикладываешь список тем, а нейросеть генерирует контент. Это подходит для самообучения. А второй режим для авторов - ты можешь взять свои наработки, скормить их вместе с промптом модели, а та выдаст результат. Так вот чтобы поделиться с другими юзерами таким курсом, хотелось бы иметь возможность отредактировать ответ модели, дополнить самому, да еще и оформить это все красиво, с заголовками, отступами, списками и прочими украшательствами.

Почитав разные статьи про то, какие есть редакторы, я остановился на TinyMCE.

Бизнес – такая штука, где все нужно считать. Я не только о расходах, выручке и чистой прибыли: это классика. Если у вашей компании есть сайт, то с большой долей вероятности вам искренне любопытно знать, сколько посетителей на него заходит, что их привлекает больше всего, что их совсем не интересует и т.д.

И это стремление мне абсолютно понятно: смысл оплачивать содержание площадки, которая никак не помогает вашему делу развиваться?

Для фиксации и учета всего, что происходит на сайте компании, используются метрические программы. Многим удобен сервис Google Analytics, но у него есть один большой недостаток – он зарубежный.

Всем привет! Меня зовут Ира Лисицына, мы с командой делаем сайт ВкусВилла удобным понятным и не останавливаемся в попытках достичь совершенного пользовательского пути через постоянные тесты и работу с обратной связью.  

Любое изменение начинается с идеи. Можно ждать озарения, а можно подстроить его под себя, сделать так, чтобы гениальные мысли сами приходили в нужное время. Когда наша команда пришла к тому, что нам необходимо самим управлять своими озарениями и находить новые идеи как по расписанию — появилась встреча по генерациям гипотез. В чем польза таких брейншторм и как довести идеи до прода – расскажу тут на реальных кейсах. 

Привет, коллеги! Меня зовут Юля, я системный аналитик в компании EvApps.

Сегодня поговорим о sequence-диаграммах (диаграммы последовательности) – одном из способов моделирования взаимодействий между объектами в системе. В этой статье мы рассмотрим преимущества использования sequence-диаграмм, типичные ошибки при их создании, а также пример их проектирования. Ключевая идея – показать мыслительный процесс, а не просто шаблонное описание. Статья будет полезна прежде всего системным аналитикам, а также тем, кто участвует в проектировании и разработке программного обеспечения.

КриптоПро предоставляет мощные, но неудобные для автоматизации утилиты. CryptoProBuilder — это fluent-интерфейс на PHP, который упрощает подписание, шифрование и работу с сертификатами, без необходимости использовать сложный SDK.

Всем доброго дня! Я Святослав Ященко, работаю в СберТехе, лидирую команду QA Platform V Kintsugi — это графическая консоль для сопровождения PostgreSQL и Postgres-like СУБД. Развивается вместе с СУБД Pangolin — целевой в Сбере и не только.

У нашего продукта микросервисная архитектура и Web UI. Часто при тестировании фронтенда я имею дело с ещё не дописанной функциональностью API, или же с ситуациями, когда в контракте API есть расхождения с ожиданиями фронтенда.

Хорошо, когда можно заносить моки в окружение или использовать снифферы с возможностью подмены трафика. Но, по разным причинам, не всегда бывает такая возможность. Что остаётся? Ждать, пока разработчик приведёт API в порядок? Но ведь фронтенд-часть готова уже сейчас и ждёт своего тестировщика...

Решение нашлось под рукой — в моём браузере Chrome. Если вы пользуетесь Chrome, то, вероятно, открываете DevTools. Чаще всего нам хватает вкладок Elements, Console, Network и Application. Но так ли прост DevTools? С этой статьи я начинаю цикл коротких руководств, посвящённых скрытым, но крайне полезным фичам Chrome. И начну с подмены входящего трафика.

Прошу под кат.

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

Следя за развитием HTML и CSS, очень сложно запомнить всё. Я заметил это, ведя свой канал и общаясь с коллегами. Многие люди не знают про возможности HTML и CSS, которые были внедрены в браузеры 6 лет назад или раньше.

Только их возраст не является недостатком. Они всё ещё полезны в современной разработке. По этой причине я собрал их в небольшой список и на основе его написал эту статью. Надеюсь, найдёте для себя что-то полезное.

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

Многие используют Cursor, не зная, на что он на самом деле способен. Будем идти от простого к сложному.

1. Самое простое, что позволит улучшить работы с Cursor — это использовать Cursor Rules

Что это даёт?

- Cursor лучше кодит, делает это по вашим правилам.
- Можно настраивать разные правила для разных файлов/директорий.
По сути это дополнение к системному промпту, где вы делаете тонкую настройку один раз.

Документация здесь.
А тут отличные заготовки для правил

2. Включайте сразу несколько ИИ-агентов

В Cursor можно открыть 3 вкладки, где параллельно будут работать 3 ИИ-агента (это максимум). Единственное что - контролируйте, чтобы они они не использовали дни и те же файлы — могут перезаписать или удалить результаты работы другого агента, так что им нужно давать изолированные задачи.

Дополнительно можно ещё использовать фонового агента, который работает на серверах Cursor, и будет выполнять задание на основании вашего кода в репозитории. А потом все его результаты можно отправить в репозиторий или локально, однако он работает за дополнительную плату (Price-based)

Можно даже открыть второй Cursor, и запустить работу ещё там (особенно если работа ведётся с кардинально разными репозиториями), но это не очень удобно с точки зрения переключения между ними.

3. Кладите связанные репозитории в 1 папку и открывайте её в Cursor

Допустим, у вас есть бэкенд, фронтенд и ещё микросервис для управления подписками. Если вы поместите их в 1 папку и откроете её в Cursor, то он сможет ходить между ними и делать согласованный код. Допустим, он может сразу сделать контроллеры на бэкенде и api для них на фронтенде.

Или почему shiny tech stack ≠ рабочий продукт. Каждую неделю выходят новые «киллеры» фреймворков, базы данных, фреймворки на фреймворки, UI-библиотеки, подходы к state management, архитектурные паттерны и всё прочее.

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

К концу статьи у вас будет четкое понимание того, как построить self-hosted SaaS для глубокого исследования, который можно встроить в любой продукт.

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

Если вы занимаетесь фронтенд-разработкой, то наверняка работали со Storybook — удобной витриной компонентов, на которой красиво лежат компоненты и примеры их использования. Его любят за интерактивную документацию, возможность визуального контроля и изолированной разработки. Но замечали ли вы, сколько действий приходится делать, чтобы взять компонент из Storybook и вставить его в реальный проект? 

Наверняка вы сталкивались с ситуацией: нашли компонент в Storybook, затем переключились обратно в IDE, скопировали код, вставили, адаптировали, проверили, и повторили снова. Кажется, многовато действий для простой вставки компонента, правда? Постоянные переключения между браузером и IDE, ручной копипаст и отсутствие связи с уже написанным кодом делают этот процесс неудобным и медленным.

Storybook Studio: всё в одном месте...

Использование WAI-ARIA как основы архитектуры UI-компонентов даёт неожиданные преимущества:

Ускоряет разработку — у вас есть готовые паттерны для большинства случаев

Упрощает рефакторинг — чёткая структура кода позволяет легко вносить изменения

Улучшает коммуникацию — единая терминология помогает в общении с дизайнерами

Повышает качество — вы не забудете про важные детали вроде focus management

Повышает конкурентноспособность - продукт не столкнется с государственным или иным регулированием

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

В этой серии статей я делюсь с вами своим опытом решения различных задач из области веб-разработки и не только.

В этой статье мы изучим библиотеку react-force-graph-2d для рисования двумерных графов.

Демо приложения:

Локальный запуск приложения:

git clone https://github.com/harryheman/react-graph.git
cd react-graph
npm i
npm run dev

Интересно? Тогда прошу под кат.

После переезда в США мой английский был на уровне A1. Вместо курсов и приложений я решил создать собственный языковой тренажёр и заодно прокачать себя как fullstack-разработчика. В статье рассказываю как я парсил словари, получил бан, внедрил геймификацию и достиг уровня B2 за год.