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

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

Следя за развитием 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 года до суда над Гэри Селдоном, изгнания Энциклопедистов с Трантора на Терминус и старта полномасштабной работы над глобальной базой знаний человечества во вселенной Айзека Азимова.

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

HTML Builder — визуальный конструктор HTML-структур с drag-and-drop интерфейсом для библиотеки @vue-dnd-kit/components!

🔹 HTML Builder позволяет создавать HTML-структуры без написания кода
🔹 Включает рабочую область, палитру компонентов, дерево элементов и панель настроек
🔹 Сейчас это ранняя бета с минимальным функционалом, но уже можно оценить концепцию
Идеально подходит для создания прототипов и визуальных редакторов CMS.

🔗 Демо: https://zizigy.github.io/html-builder/
🔗 GitHub: https://github.com/ZiZIGY/html-builder

Ищу обратную связь по UI/UX и функциональности. Какие фичи хотели бы видеть? Что можно улучшить в интерфейсе? И тд тп.

Привет, я Светлана Газизова, и, как несложно догадаться, я работаю в Positive Technologies. Занимаюсь я всяческим AppSec и всем, что к нему близко. Занимаюсь я этим серьезное количество времени — уже пятый год.

Сегодня хочу рассказать вам, насколько развитие AppSec и DevSecOps (да и вообще в целом практика безопасной разработки) похоже на то, как развивалось метро в Москве. Да‑да, именно метро!

Мне кажется, многих это сравнение может немного смутить. Но на самом деле в этих двух явлениях обнаруживается большое количество похожих паттернов. Поэтому я думаю, что мы с вами сегодня вместе к этому придем.

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

Так что устраивайтесь поудобнее — сегодня у нас будет необычная экскурсия. С одной стороны — в мир безопасной разработки со всеми его AppSec'ами и DevSecOps'ами. С другой — в московское метро с его кольцами, диаметрами и постоянно растущей сетью станций. Готовы? Тогда поехали!

Всем привет! Сегодня хочу разобрать кейс, с которым сталкивается почти каждый Angular-разработчик на существующем проекте.

Часто в компонентах можно встретить такой код:

«Будем отправлять события в Rabbit!» Фраза, которая выдает мышление, рождающее код, полный боли. К сожалению, я ее часто слышу. Поэтому, уже много лет размышлял о написании этой статьи и безумно рад, что у меня, наконец, дошли до нее руки.

В статье я расскажу, как смешение понятий события, сообщения и транспорта рождает возгласы типа «Я ненавижу использовать Symfony Messenger, потому что был у меня проект на нем, и он не взлетел!»

Будут косвенно затронуты компоненты Symfony Messenger и Event Dispatcher. Несмотря на это, данный материал может оказаться полезным и для разработчиков, использующих другие фреймворки и даже другие языки.

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

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