Есть мнение, что в силу особенностей вебсокетов, WAF не может их нормально анализировать и защищать. Давайте попробуем разобраться, насколько это утверждение справедливо.
Веб-разработка *
Делаем веб лучше
Новости
PHP и Laravel дайджест новостей за август 2024 года
Дайджест новостей от CutCode с Сергеем Пантелеевым и Данилом Щуцким. Давайте посмотрим, что произошло в августе в мире PHP и Laravel.
Опять эти правки! Учимся общаться с разработчиками и добиваться внедрения правок
Привет! Я Илья Русаков — CEO impulse.guru. За годы практики заметил, что взаимодействие с ребятами-seoшниками не всегда проходит гладко. Сегодня разберёмся в нуждах и потребностях команд, посмотрим на примеры их «противостояния», и попутно я буду рассказывать, как облегчить взаимодействие между разработкой и SEO.
Что за противостояния, о чём вообще речь? Когда SEO-специалист приносит стопку правок, разработчик почему-то не торопится их брать в работу. И это не из вредности — часто бывает, что seошник не доносит ценность правок, поэтому те и не попадают в список первоочередных задач разработчика. SEO-специалист продолжает настаивать, и вот уже работа двух команд напоминает батл — кто кого переиграет.
Простой мини-чат на FastApi: Современный интерфейс, вебсокеты и SQLAlchemy с деплоем
Привет, друзья! Сегодня я подготовил для вас увлекательную практическую статью о создании мини-чата на FastApi. Мы погрузимся в мир вебсокетов, узнаем, зачем они нужны и как применяются в реальных приложениях. Также я продемонстрирую работу с асинхронной SQLAlchemy на примере взаимодействия с базой данных SQLite.
Для создания современного интерфейса мы обратимся к интересному и бесплатному сервису Websim.ai, который за пару минут сгенерирует нам интерфейс, включая страничку для входа/регистрации и страницу самого чата.
Чтобы наш чат мог обслуживать множество пользователей одновременно, мы выполним деплой нашего FastApi приложения. Для этого воспользуемся сервисом Amvera Cloud. Нам нужно будет подготовить файлы приложения, написать код, создать файл с настройками (можно сгенерировать на сайте или скопировать мой код), а затем доставить файлы на сервис. Для доставки можно использовать встроенный терминал или GIT, используя стандартные команды PUSH/PULL.
Но прежде чем мы погрузимся в код, давайте кратко обсудим, что такое вебсокеты и как они работают в контексте FastApi.
Истории
Знакомство с гипермедийными системами на ASP.NET Core 8.0
Быстрый старт с HTMX 2.0. Знакомство с гипермедийными системами на основе современной серверной платформы ASP.NET Core.
Гипермедийные системы облегчают создание прежде всего низконагруженных веб-приложений.
Улучшение производительности рендеринга с помощью CSS content-visibility
Недавно я обнаружил интересную ошибку в работе emoji-picker-element
:
Я работаю на экземпляре fedi с 19 тыс. пользовательских эмодзи [...], и когда я открываю панель выбора эмодзи [...], страница замирает как минимум на целую секунду, а после этого на некоторое время замирает общая производительность.
Если вы не знакомы с Mastodon или Fediverse, то на разных серверах могут быть свои собственные эмодзи, как в Slack, Discord и т.д. Наличие 19k (на самом деле ближе к 20k в данном случае) крайне необычно, но не является чем-то неслыханным.
Создание гиперкуба с помощью Three.js: как увидеть четвертое измерение?
Каждый раз, когда я сталкиваюсь с чем-то новым в разработке графики, я задаюсь вопросом: «А можно ли сделать что-то круче?» Создавать трёхмерные сцены в браузере — задача увлекательная, но уже привычная. Мы привыкли работать с кубами, сферами и прочими объектами в 3D-пространстве. Но что, если выйти за его пределы? А что, если ввести в игру четвёртое измерение? Именно эта мысль и привела меня к созданию интерактивного гиперкуба с помощью Three.js.
Так ли плох Битрикс на самом деле? Разбираем возможные причины технических проблем и низкой скорости интернет-магазина
Интернет-магазины и площадки электронной коммерции — это сложные системы, в работе которых могут случаться сбои и ошибки. Но в коммерческой среде простои в работе — это всегда убытки. В статье расскажу о том, как системно решать эту задачу.
А что, так можно было?
Привет Хабр!
Меня зовут Алекс, и я автор фронтенд-библиотеки для создания UI-компонентов-агностиков - Symbiote.js. Я не единственный разработчик, но главный контрибьютор и тот, кто отвечает за концепцию, развитие, документацию, деврел, DX все остальное. Мейнтейнер то есть. Всем этим я занимаюсь в свободное от другой работы время, на которой я фуллстек, R&D-инженер и техлид.
Сегодня, я бы хотел рассказать о том, как появился Симбиот, и почему он вообще существует, при наличии огромного зоопарка библиотек и фреймворков для фронтенда, с куда более значительной аудиторией и поддержкой от крупных IT-компаний. Ведь мы, инженеры, очень НЕ любим, когда вокруг нас начинают плодиться лишние сущности, и сразу начинаем угрожающе размахивать бритвой Оккама. Верно? (хитро прищурился)
UI- система или хроники Хаоса
Всем доброго времени суток. Давно я что-то ничего не писал, и вот созрел. Предлагаю сегодня поговорить о ui-системе. Зачем она нужна, когда она нужна, что дает, какие минусы имеет и вообще стоит ли ввязываться в это блуд. Я часто слышу на разных конференциях, что панацея от всех болезней в бизнесе — это наличие дизайн-системы (ui-системы). Что, как только вы достигаете ее, то сроки сокращаются в 100500 раз. Что разработчики не хотят открутить голову дизайнерам, и, наоборот, что качество продукта возноситься до небес, и еще много всего восхитительного об этой сущности. Но так ли все это ? Или это просто розовые очки, которые застилают глаза всех причастных к созданию ui-системы в компании и побочка от постоянных нервных срывов, скандалов, поиска компромиссов и просто выгорания? В этой статье я постарался разобраться, а стоит ли игра свеч или как в анекдоте про нюансы.
Для начала, чтобы рассуждать, что чем является, нам потребуется разобраться в понятиях и терминах предметной области.
UI - kit — это полный набор элементов и компонентов, необходимый для сборки большого однородного продукта. Он включает различные кнопки, иконки, поля для ввода данных и т. д. и позволяет сохранять узнаваемость продукта и доверие пользователей. Так мне сказал поисковик, я спорить не стал.
UI component являются основными блоками и элементами для дизайна пользовательского интерфейса. Они предоставляют пользователям способ взаимодействия с вашим веб-сайтом или приложением. Этими компонентами могут являться интерактивный текст и графика, которые сообщат пользователю, что делать дальше.
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 10
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
- Почему в наших дизайн-системах и библиотеках есть сломанные нестандартные радиокнопки;
- Мой способ отказаться от ссылки для изображения с сохранением интерактивности;
- Дублирование стилей при наведении для фокуса вводит меня в ступор;
- Можно ли скрыть кнопку с помощью атрибута
disabled
от скринридера.
Давайте начнём!
Пример создания Full Stack проекта, используя функциональное тестирование как инструмент дизайна
Зачастую full stack (и не только) проекты создаются без функциональных тестов.
Это вызвано ошибочным предположением, что тесты добавляются для уже готового продукта и они нужны только для поддержки качества.
Необходимость в тестах также возникает, когда количество багов или жалоб пользователей переходит все границы. В такой ситуации разработчики проекта решают добавлять тесты, и тут выясняется, что это не так просто, как большинство думает.
Проблема сложности тестов в подобной ситуации кроется в том, что на этапе проектирования продукта никто не думал о его тестировании и необходимости сделать его пригодным для тестирования (автоматического).
На этапе проектирования самого продукта гораздо проще проектировать тесты, потому что вы не ограничены существующим кодом продукта, фреймворками и утилитами, входящими в состав продукта.
В этой части статьи я на примере покажу, как можно спроектировать простое веб-приложение, используя функциональное тестирование, и имплементировать веб-приложение.
Пишем свой плагин для Webpack
Рассмотрим структуру плагинов, основные объекты, используемые при их разработке, хуки этих объектов и их виды.
Ближайшие события
Основные принципы хорошего нейминга
В данной статье я рассмотрю основные принципы нейминга и структуру названий переменных и функций. Для опытных разработчиков эта статья вряд ли откроет что-то новое, но для новичков она может оказаться полезной.
Что нового в React 19
React 19 на подходе. Команда React анонсировала предрелизную версию React 19 в апреле. Это крупное обновление принесет с собой ряд улучшений и новых паттернов, нацеленных на повышение производительности, удобство использования и опыта разработки.
Многие из этих возможностей были представлены в экспериментальном режиме в React 18, но в React 19 они станут стабильными. Давайте подготовимся к этому обновлению.
Как мы внедрили Tracetest для улучшения наблюдаемости в EDA
В мире разработки ПО поддержка высокого уровня наблюдаемости (observability) для приложений с архитектурой, управляемой событиями (event-driven architecture, EDA) стало критически важным. Сложность таких систем, связанных с обработкой огромных объемов данных в режиме реального времени, требует надежных инструментов для мониторинга, отладки и анализа. Однако традиционные методы, использующие логи и метрики, часто оказываются недостаточными, когда необходимо глубоко понять взаимодействие между различными компонентами системы и выявить узкие места.
Именно с этой проблемой мы столкнулись в нашей команде, поэтому я, Дмитрий Титаренко (QA-инженер в компании TAGES), решил поделится найденным решением в статье на Хабр. Надеюсь, что будет полезно!
С 80-х по 2024-й: как создавались и оптимизировались CI-тесты
Современные команды разработки тестируют каждое изменение кода перед мержем. Это не просто общепринятая традиция: наряду с ревью кода, это стандарт по умолчанию, применяемый практически во всех кодовых базах компаний. Мы называем его тестами CI (непрерывной интеграции). В результате их внедрения среднестатистическая организация запускает сотни наборов тестов в день.
В прошлом непрерывное интеграционное тестирование было с нами не всегда, в отличие от обычного тестирования. По моим наблюдениям, CI — это результат того, что тестирование всё больше ускоряется. Разберёмся, как это произошло и как тестирование будет ускоряться дальше.
Системный аналитик с ЗП 400+. Найти за 30 дней. Часть 2 «Проверка на прочность»
Собеседование на системного аналитика — это проверка теоретической базы, гибкости мышления и способности решать сложные задачи на лету.
Кому предложат ЗП 200-, а кому 400+? Собеседование расставит всё на свои места.
Знакомство и остальные компоненты собеседования описаны в первой части. Сегодня говорим про харды. Итак, сразу к делу.
Как мы полностью обновили VK Мессенджер: переписать нельзя рефакторить
Случается, ты просыпаешься и осознаешь: так больше продолжаться не может и нужно что‑то менять. Разные кодовые базы, избыточное легаси и нестабильность мешают пользователям получать удовольствие от общения в твоем приложении. И эта мысль подводит тебя к развилке: один путь ведет к сложному и долгому рефакторингу легаси за почти 10 лет, второй к не менее долгому, а, порой, более сложному процессу переписывания с 0. Но какой бы путь ты ни выбрал, в любом случае начинаешь испытывать азарт — предстоит большая Задача (именно с большой буквы).
Привет Хабр, меня зовут Федор Неживой, я ведущий программист‑разработчик в команде VK Мессенджера и сегодня расскажу вам, как мы перестраивали и обновляли один из крупнейших проектов в рунете. В статье будет боль, пот, реальный код и детали, как мы шаг за шагом пришли к масштабному обновлению, а потом внедряли то, что получилось.
PostHog для UX-дизайнера: от анализа данных до повышения зарплаты
Привет, Хабр! Меня зовут Витя, я работаю проектировщиком интерфейсов в Selectel. Довольно часто при изучении пользовательского опыта мы с коллегами используем PostHog — мощный инструмент для сбора и анализа статических данных веб-сайтов и приложений. Инструмент важный и по-настоящему сложный, поэтому хочу собрать мини-курс о том, как с ним работать.
Но с чего начать и как заставить себя его изучить? В этом материале я расскажу, как дизайнер может использовать преимущества PostHog в своих целях. Постараюсь заинтриговать: с помощью этого инструмента даже можно повлиять на оплату своего труда. А еще получить много полезных инсайтов, которые помогут в профессиональном развитии.