Как стать автором
Обновить
362.27

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

Делаем веб лучше

Сначала показывать
Порог рейтинга
Уровень сложности

От и Go: доклады для гоферов про инструменты для фаззинга, kuber-кластер на Go и не только

Время на прочтение3 мин
Количество просмотров293

Бывает, перед инженерами встает выбор: использовать существующее open source-решение задачи или написать свое. И часто, изучив все возможные опции, разработчики предпочитают второй вариант.

Большинство докладов в нашей подборке — инструкции по созданию кастомных решений, которые инженеры и разработчики из YADRO, Avito Tech, Ozon Fintech и других технологических компаний уже опробовали в собственных продуктах. Если вашей команде не хватает инструмента для фаззинга или обработки ошибок на Go — можете сделать их по примерам, которые представили инженеры в выступлениях и презентациях.

Зайти в Go-портал
Всего голосов 3: ↑3 и ↓0+4
Комментарии0

Новости

Как мы боролись за доступность сайта по всему миру, настраивали GeoDNS и причём здесь Суринам

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров381

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

Читать далее →
Всего голосов 2: ↑2 и ↓0+2
Комментарии0

Новые функции CSS (mod, round) или как сделать анимированные Sprite Sheet без JS

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров623

Sprite Sheet — это техника в веб-разработке, позволяющая использовать множество различных кадров анимации, хранящихся в одном изображении. Это эффективный способ уменьшить количество HTTP-запросов к серверу и ускорить загрузку веб-страницы, так как все кадры анимации загружаются одновременно. (базовое определение которое дает чатгпт)

Читать далее
Всего голосов 3: ↑3 и ↓0+5
Комментарии7

Как создать сайт с помощью нейросети: ТОП-20 ИИ No-code платформ

Время на прочтение15 мин
Количество просмотров607

Создание сайтов с помощью нейросетей – новый тренд, и написано об этом уже много, но если раньше нужно было задействовать сразу несколько ИИ-сервисов: в ChatGPT сгенерировать идею и структуру сайта, нарисовать дизайн с помощию MidJourney или Stable Diffusion, а уже потом сверстать из этого сайт, то в последние полгода начали набирать обороты No-code платформы, которые объединяют в себе сразу несколько нейросетей и выдают готовый сайт исходя из промта в несколько строчек. В этой статье расскажу как работают No-code сервисы на основе нейросетей и разберу ТОП-20 ИИ No-code платформ для создания сайта.

Читать далее
Всего голосов 1: ↑1 и ↓0+1
Комментарии1

Истории

Как сделать форму согласия на обработку персональных данных на сайте. Справится даже школьник

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров343

Привет, Хабр! Меня зовут Тимур уже два года я развиваю в HFLabs продукт «Центр управления согласиями» для энтерпрайза. Тема эта интересная, болезненная и острая одновременно, ведь персональные данные собирает не только крупный бизнес, а вообще все. Любой сайт — от продажи крафтового печенья до крупного автодилера и страховой компании — имеет если не форму регистрации, то анкету для подписки на новости уж точно. 

Когда-то я уже делал разбор форм ввода персональных данных на разных сайтах. Выяснил, что часто они сделаны «как исторически сложилось», а не как требуется. Грешат этим не только небольшие компании, но и крупные игроки — например, банки.

Если сайт сделан N лет назад и на CMS (а такое встречается сплошь и рядом), то нередко используется стандартный инструментарий самой CMS. Плюс фантазия заказчика, умноженная на осведомленность разработчика о том, как сделать эти самые формы регистрации. Получается, как смогли, так и сделали. 

Мы подготовили инструкцию, как самостоятельно настроить формы ввода. Для примера взяли CMS «1С-Битрикс: Управление сайтом» и в основном ту самую стандартную функциональность CMS. Материал будет полезен web-студиям и отдельным web-мастерам, а также всем, кто так или иначе работает с согласиями — пусть и в других системах. Расскажем, как формы должны выглядеть и как объяснить заказчику, почему предпроставленная галочка — это не очень хорошо. 

Читать далее
Всего голосов 5: ↑3 и ↓2+1
Комментарии2

Рефакторинг — это как весенняя уборка: никто не хочет её начинать, но все ценят чистоту и порядок после её завершения

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров2K

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

Итак, что я имею сейчас? Что стало с кодом, который не рефакторили год? Вопрос риторический, и так понятно, что он превратился в легаси.

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

Читать далее
Всего голосов 8: ↑3 и ↓5-2
Комментарии36

Как дизайнеру и разработчику понимать друг друга

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров606

Порой разработчик просто делает дизайн, который ему дают. Молча. Он не то чтобы глупый и подневольный специалист, но время, которое разработчику выделяют на оценку задачи, не всегда позволяет всмотреться в мелочи. Поэтому особенно важно, чтобы дизайнер владел азами вёрстки сайта.

Читать далее
Всего голосов 6: ↑5 и ↓1+5
Комментарии1

Разработчикам: рецензия на книгу «Создание микрофронтендов» (Building Micro-Frontends) Луки Меццалиры

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров1.5K

Продолжаем рецензии на книги по ИТ‑тематике с промокодом от нашего блога. Сегодня это перевод известной книги «Building Micro‑Frontends» O'REILLY по микросервисам, вышедший в издательстве БХВ‑Петербург весной 2024г. Книга рассчитана на широкий круг веб‑разработчиков, архитекторов и руководителей команд, работающих с веб‑приложениями. А в целом, полезна всем, кто столкнулся с проблемами масштабируемости, параллельной разработки и организации кодовой базы при создании сложных фронтенд‑приложений.

Читать далее
Всего голосов 8: ↑7 и ↓1+13
Комментарии2

Применение айтрекинга в тестировании юзабилити интерфейсов веб-сайтов

Время на прочтение4 мин
Количество просмотров371

Больше компаний осознают важность удобства использования (юзабилити) веб-сайтов. Хороший пользовательский опыт (UX) напрямую влияет на конверсии, удовлетворенность пользователей и, в конечном счете, на успех бизнеса. Точный и информативный метод исследования юзабилити является айтрекинг. Айтрекинг (отслеживание взгляда) позволит получить данные о том, как пользователи взаимодействуют с веб-сайтом, какие элементы привлекают внимание, и как они перемещают юзера по страницам.

Читать далее
Всего голосов 3: ↑3 и ↓0+7
Комментарии0

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 8

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров2.6K


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


Сегодня мы рассмотрим следующие аспекты:

  • какие скрытые проблемы с паттерном «visually-hidden» нас ждут;
  • в каких ситуациях кнопка «Закрыть» указывает на выход;
  • чем вредно значение contents у свойства display;
  • почему подсказка с помощью атрибута aria-label вызывает недоумение.

Давайте начнём!

Читать дальше →
Всего голосов 29: ↑28 и ↓1+39
Комментарии5

Безопасность первична: сетевое взаимодействие и привилегии контейнеров в Docker

Время на прочтение8 мин
Количество просмотров3.4K

Привет, Хабр! Меня зовут Эллада, я специалист по информационной безопасности в Selectel. Продолжаю рассказывать о безопасности в Docker. В новой статье поговорим о сетевом взаимодействии контейнеров, правильном управлении привилегиями и ограничении потребления системных ресурсов.

Поделюсь, почему не стоит использовать bridge docker0 и network namespace хоста, чего не стоит делать при монтировании каталогов и многими другими советами. Придерживайтесь наших рекомендаций и сделайте работу с Docker еще более защищенной!
Читать дальше →
Всего голосов 28: ↑27 и ↓1+30
Комментарии0

Создание собственного графического клиента ChatGPT с помощью NextJS и Wing

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров2.6K

К концу этой статьи вы создадите и развернете клиент ChatGPT с помощью Wing и Next.js.

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

Читать далее
Всего голосов 6: ↑4 и ↓2+2
Комментарии11

Карсон Гросс, создатель HTMX

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров8.4K


Карсон Гросс (Carson Gross) — профессор информатики из Монтаны, который неожиданно стал одним из самых ярких персонажей в индустрии веб-программирования последних лет. Он автор языка HyperScript и популярной библиотеки для фронтенда HTMX, позволяющей создавать сложные интерактивные сайты средствами HTML. Красивая альтернатива клиентскому рендерингу на JavaScript решает сразу несколько проблем современного веба, связанных с избыточной сложностью разработки и поддержки, производительностью и ожирением сайтов.

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

Многие веб-разработчики нашего времени выросли со знанием только одностраничных приложений SPA и фреймворков для них. Они начали свои карьеры с приложений на React.js, которые общаются с сервером Node через JSON API. Это настоящая трагедия, считает Гросс. Интерактивные приложения можно делать совершенно иначе.
Читать дальше →
Всего голосов 37: ↑35 и ↓2+45
Комментарии15

Ближайшие события

Антиконференция X5 Future Night
Дата30 мая
Время11:00 – 23:00
Место
Онлайн
OTUS CONF: GameDev
Дата30 мая
Время19:00 – 20:30
Место
Онлайн
Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область

Мониторинг Supervisord: Упрощение контроля над процессами

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров2.7K

В современной, стремительно развивающейся ИТ-среде умелое управление процессами играет ключевую роль в обеспечении стабильности и эффективности приложений и систем. Supervisord Monitor представляет собой ориентированное на пользователя решение этой задачи, позволяющее администраторам и разработчикам осуществлять надзор и контроль над процессами.

Читать далее
Всего голосов 4: ↑3 и ↓1+2
Комментарии22

37 Советов от Senior Frontend Разработчика. Для начинающих

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров11K

Мне очень понравился пост abbeyperini, и я решил поделиться своими советами после более чем 5-летнего опыта работы разработчиком программного обеспечения.

Готовы? Давайте погрузимся 💪.

1. Освойте основы

Дом, построенный на шатком фундаменте, развалится при малейшей проблеме.

Аналогично, если у вас нет прочных основ:

Читать далее
Всего голосов 26: ↑10 и ↓16-6
Комментарии4

Мега-Учебник Flask Глава 9: Разбивка на страницы (издание 2024)

Уровень сложностиСредний
Время на прочтение14 мин
Количество просмотров2.2K

Это девятая часть серии мега-учебника Flask, в которой я собираюсь рассказать вам, как разбивать списки записей базы данных на страницы.

Начать изучение
Всего голосов 9: ↑8 и ↓1+11
Комментарии0

Анимации CSS, основанные на времени

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров3.4K

Демонстрация анимаций

В моем предыдущем посте Time Uniform For CSS Animation я рассказал о способе создания CSS-анимации с использованием тиков вместо ключевых кадров. Он был ограничен в применении, поскольку в CSS отсутствовала возможность выполнять сложные математические вычисления.

После долгих лет ожидания в CSS теперь поддерживается достаточное количество математических функций, в частности, mod(), round() и тригонометрические функции. Пришло время вернуться к анимации, основанной на времени, надеюсь, на этот раз она будет более полезной.

Читать далее
Всего голосов 15: ↑15 и ↓0+16
Комментарии0

Supercat Store — новый менеджер состояний на JavaScript

Время на прочтение7 мин
Количество просмотров4.9K

Всем привет! На связи Supercat и я хочу рассказать о менеджере состояний Supercat Store.

Supercat Store - это JavaScript-библиотека, которая позволяет легко отслеживать и реагировать на изменения стейта приложения или его части.

Коротко о Supercat Store:

Легковесная: 12 kB - minified, 3.8 kB - minified + gzipped;

Не зависит от фреймворков, агностик;

Можно создавать столько сторов, сколько нужно;

Использует мутабельную систему реактивности;

Применяются ленивые вычисления для computed;

Поддержка мгновенных и отложенных реакций на изменения состояния;

Код типизирован с помощью TypeScript внутри JSDoc;

Код документирован, в документации почти на каждый метод есть пример использования;

Лицензия MIT.

Читать далее
Всего голосов 11: ↑6 и ↓5+3
Комментарии35

Путь Frontend разработчика. Как им стать? (Часть 1. Основы)

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров7.2K

Программа обучения Frontend-разработке.

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

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

Читать далее
Всего голосов 16: ↑13 и ↓3+12
Комментарии6

Wasm на весь стек — движемся от клиента к серверу с использованием Leptos, Rust и Spin

Уровень сложностиСложный
Время на прочтение9 мин
Количество просмотров3.9K


Leptos – интересное пополнение в ряду веб-фреймворков для Rust. Помимо того, что Leptos может обеспечить быстрые обновления на стороне браузера через клиентскую часть WebAssembly, а также детализированные отклики на сигналы в ходе реактивной коммуникации, он ещё и чрезвычайно удобен для взаимодействия с серверными службами через изоморфные серверные функции. Таким образом, выполнять удаленные вызовы к API оказывается не сложнее, чем вызывать функции Rust. Именно благодаря интеграции с серверной частью Leptos так привлекателен для использования совместно со Spin. Если вам интересно, как это выглядит, или же вы хотите погоревать над весьма неказистым пользовательским интерфейсом, то читайте дальше.
Читать дальше →
Всего голосов 19: ↑19 и ↓0+30
Комментарии4
1
23 ...

Вклад авторов