Устали от бесконечных споров о 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 за год.
Сейчас сложно представить мир разработки программного обеспечения без git – распределенной системы контроля версий. Хотя еще 10 лет назад во многих компаниях использовались другие инструменты: CVS или SVN. Бывали даже такие команды, в которых и вовсе не велось версионирование кода. А 20 лет назад git только-только был создан Линусом Торвальдсом и начал распространяться в среде самых продвинутых разработчиков того времени — участниках опенсорс комьюнити вокруг ядра линукса.
В этой статье мы рассмотрим предпосылки появления git и его современное использование.
Первый коммит гите был сделан 7 апреля 2005 года с описанием: Initial revision of "git", the information manager from hell. В английском языке слово гит означает «неприятный человек», и хотя история благодушно умалчивает, почему Линус назвал свой инструмент именно так, мы можем быть уверены, что в этом названии отражена та сложная обстановка, в которой оказались создатели ядра линукса в начале 21 века. Дело в том, что в начале разработки ядра Linux использовался проприетарный (то есть принадлежащий конкретной компании и не являющийся свободным) инструмент управления версиями под названием BitKeeper. Однако в 2005 году возник конфликт между разработчиками Linux и компанией-разработчиком BitKeeper, в результате которого была отозвана бесплатная лицензия разработчиков ядра.
В быстро меняющемся мире веб-разработки постоянно появляются новые технологии и подходы к созданию системы обмена данными между приложением или сервисом. Одной из таких технологий, позволяющей запрашивать только необходимые данные, является GraphQL. Меня зовут Дмитрий и я python-разработчик. В этом материале я дам сравнительный обзор на REST и GraphQL.
Один из наиболее популярных примеров использования GraphQL — это применение в социальных сетях, где множество пользователей связаны между собой определёнными отношениями. К GraphQL мы прибегаем, когда нам требуется избирательно получить много данных о них. Такая организация пользователей имеет сетевую модель и представляется в виде графа, отсюда и связь с названием GraphQL (Graph — граф, QL — язык запросов).
Итак, почему компании, однажды выбравшие GraphQL, решают изменить свой курс и вернуться к стандартному способу реализации систем? Ответ на этот вопрос лежит на пересечении технических возможностей, бизнес-потребностей и экономических соображений. Давайте разберёмся в этом подробнее.
Привет, Хабр! Я Андрей Дугин, руководитель центра сервисов кибербезопасности RED Security. Про тему кибербезопасности веб-приложений уже, казалось бы, рассказали все, что можно: термины XSS, SQL-инъекции, DDoS знакомы каждому в мире ИБ.
Проблема в том, что знание отдельных уязвимостей и методов защиты не гарантирует комплексной безопасности. Качественный результат дает не борьба с каждой угрозой, а создание системной защиты, где разные решения дополняют и усиливают остальные.
В этом материале я разберу, как ИБ-инструменты взаимодействуют между собой и на какие нюансы важно обратить внимание при их настройке.
PhpFluentConsole — библиотека для лаконичного выполнения системных команд в PHP, с поддержкой кодировок, обработкой вывода и гибкой архитектурой. В статье — примеры, код и реальные кейсы.
В далёком 1951 году был опубликован роман Айзека Азимова «Основание». Он рассказывает о событиях ещё более далёкого 19 997 года: человечество освоило межзвёздные перелёты, превратилось в Галактическую Цивилизацию, изобрело научные методы психоистории для точного предсказания будущего и в итоге пришло к осознанию необходимости создания Галактической Энциклопедии — базы знаний, накопленных человечеством за многие тысячи лет своего существования. Цель энциклопедии — быть не просто справочником по типу Википедии, а практическим руководством, которое позволяет даже изолированной человеческой популяции пройти путь развития от каменного века до межзвёздных перелётов всего за несколько столетий.
По мнению Айзека Азимова, подобная глобальная база знаний является необходимым условием для фактического бессмертия человеческой цивилизации. В этом я с ним полностью согласен. Но я так и не дочитал книгу до конца, потому что довольно быстро основное внимание автора перешло от интересной научно-фантастической идеи к довольно банальным политическим интригам. Меня в первую очередь интересует техническая сторона «Основания» — как может быть устроена информационная система Галактической Энциклопедии сегодня? Исходя из возможностей современных технологий, за 17 972 года до суда над Гэри Селдоном, изгнания Энциклопедистов с Трантора на Терминус и старта полномасштабной работы над глобальной базой знаний человечества во вселенной Айзека Азимова.