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

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

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

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

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

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


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


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

  • Какие символы нужно пропускать в тексте для атрибута alt.
  • В какой ситуации атрибут inert может быть бесполезен.
  • Как атрибут maxlength не позволил моей знакомой купить авиабилеты.
  • В чём польза свойства border в режиме высокого контраста дисплея.

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

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

Как ошибки проектирования при разработке на Symfony могут привести к перерасходу ресурсов и замедлению работы системы

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

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

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

Азы поисковой оптимизации для веб-разработчика: прокачиваем SEO с помощью кода и здравого смысла

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

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

В этой статье обсудим технические детали верстки оптимизированных под поисковые движки веб-страниц, а для закрепления знаний создадим по всем правилам и задеплоим на сервер небольшой сайт. Это не ультимативный гайд, а скорее шпаргалка о том, как сделать красиво, функционально и так, чтобы целевая страница попадала в топ выдачи. Материал будет полезен веб-разработчикам, которые только начинают заниматься SEO. Опытных специалистов приглашаем в комментарии — поделитесь своими лайфхаками и кейсами поисковой оптимизации.
Читать дальше →
Всего голосов 36: ↑33 и ↓3+30
Комментарии7

Азы поисковой оптимизации для веб-разработчика: прокачиваем SEO с помощью кода и здравого смысла

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

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

В этой статье обсудим технические детали верстки оптимизированных под поисковые движки веб-страниц, а для закрепления знаний создадим по всем правилам и задеплоим на сервер небольшой сайт. Это не ультимативный гайд, а скорее шпаргалка о том, как сделать красиво, функционально и так, чтобы целевая страница попадала в топ выдачи. Материал будет полезен веб-разработчикам, которые только начинают заниматься SEO. Опытных специалистов приглашаем в комментарии — поделитесь своими лайфхаками и кейсами поисковой оптимизации.
Читать дальше →
Всего голосов 36: ↑33 и ↓3+30
Комментарии7

Истории

Анимация в браузерах и как с ней работать

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

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

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

Меня зовут Сергей Чикуёнок. Я ведущий разработчик в ОК. В этом материале я расскажу об основных этапах работы с анимацией для браузеров, ключевых сложностях и вариантах их нативной оптимизации. 

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

Анимация в браузерах и как с ней работать

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

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

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

Меня зовут Сергей Чикуёнок. Я ведущий разработчик в ОК. В этом материале я расскажу об основных этапах работы с анимацией для браузеров, ключевых сложностях и вариантах их нативной оптимизации. 

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

Тёмные паттерны UX себя не оправдывают

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

У меня было хорошее настроение: я опубликовал свою статью об RSS, и она оказалась довольно популярной.

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

Я нажал на крестик в правом верхнем углу рекламного блока. И именно тогда всё пошло не так.

Вместо того, чтобы закрыть рекламу, Feedly показал мне всплывающее окно, сообщающее, что единственный способ удаления «этого модуля» (читай: рекламы) — «напрямую поддержать Feedly, купив Feedly Pro».

Повторюсь, я не против, что Feedly показывает рекламу бесплатным пользователям, но неработающая кнопка закрытия — это тёмный UX. Я почувствовал себя обманутым: я не буду платить за ваш сервис, я не буду нажимать на рекламу.

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

Тёмные паттерны UX себя не оправдывают

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

У меня было хорошее настроение: я опубликовал свою статью об RSS, и она оказалась довольно популярной.

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

Я нажал на крестик в правом верхнем углу рекламного блока. И именно тогда всё пошло не так.

Вместо того, чтобы закрыть рекламу, Feedly показал мне всплывающее окно, сообщающее, что единственный способ удаления «этого модуля» (читай: рекламы) — «напрямую поддержать Feedly, купив Feedly Pro».

Повторюсь, я не против, что Feedly показывает рекламу бесплатным пользователям, но неработающая кнопка закрытия — это тёмный UX. Я почувствовал себя обманутым: я не буду платить за ваш сервис, я не буду нажимать на рекламу.

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

Храним файлы Strapi в облаке Selectel

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

Привет, я некоторое время работаю над своим пет проектом, где в основном занимаюсь фронтом, а для данных использую headless CMS под названием strapi.io. В какой-то момент у меня появилась потребность вынести медиа хранилище из локальной папки в облако. А так-как основной проект уже находился долгое время на серверах Selectel, я решил воспользоваться их объектным хранилищем и подключится к нему с помощью плагина “@strapi/provider-upload-aws-s3“. И в этой статье я вам опишу краткий гайд как это сделать.

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

Храним файлы Strapi в облаке Selectel

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

Привет, я некоторое время работаю над своим пет проектом, где в основном занимаюсь фронтом, а для данных использую headless CMS под названием strapi.io. В какой-то момент у меня появилась потребность вынести медиа хранилище из локальной папки в облако. А так-как основной проект уже находился долгое время на серверах Selectel, я решил воспользоваться их объектным хранилищем и подключится к нему с помощью плагина “@strapi/provider-upload-aws-s3“. И в этой статье я вам опишу краткий гайд как это сделать.

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

Работаем с HTTP API: разбор частых проблем и методы их решения

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

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

Рассказываю, какие ошибки при работе с API допускают не только новички, но и профессионалы, и как сделать, чтобы эти ошибки возникали как можно реже или не появлялись вовсе.

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

Как создать YouTube GIF Maker с использованием Next.js, Node и RabbitMQ

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

В этом руководстве мы рассмотрим разработку веб-приложения по созданию GIF-файлов из видеороликов.

Функциональные возможности приложения:
- Создание GIF из видео на YouTube с определённым временным диапазоном.
- Предварительный просмотр результата перед выполнением фактической конвертации.

Компоненты системы:
- Клиентская часть на React (Next.js)
- Бэкенд-сервер на Node
- Node как Service Worker
- В качестве брокера сообщений — RabbitMQ
- Для хранения данных — MongoDB
- Для хранения медиафайлов — Google Cloud Storage

Полный код проекта можно найти на github, а по этой ссылке посмотреть демо-версию приложения.

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

Начало работы с Axum — самым популярным веб-фреймворком Rust

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


Когда дело доходит до выбора серверного веб-фреймворка в экосистеме Rust, можно запутаться из-за большого количества вариантов. В прошлом, лидером по популярности был Rocket, но сейчас за первенство сражаются Axum и actix-web, и Axum все больше набирает обороты. В этой статье мы немного погрузимся в Axum — веб-фреймворк для создания REST API на Rust, разрабатываемый командой Tokio. Он прост в использовании и хорошо совместим с Tower — надежной библиотекой для создания модульных компонентов сетевых приложений.


В этой статье мы подробно рассмотрим, как использовать Axum для создания веб-сервиса. Кроме того, мы рассмотрим изменения, которые произошли в версии 0.7.

Читать дальше →
Всего голосов 31: ↑28 и ↓3+25
Комментарии9

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

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн

Домашний кластер разработчика

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

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

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

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

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

Анализируем виды тестов для Frontend

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

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

При этом тестировать современный фронтенд сложно: неуправляемая асинхронность (событийная модель браузера), различие браузеров, тяжелое окружение — это лишь малая часть сложностей. Можно ли все возложить на ручных тестировщиков или исправлять баги после жалоб пользователей? Однозначно нет. В большинстве случаев такой подход в скором времени приведет к оттоку пользователей: не все пишут о багах, просто уходят к конкурентам. Безусловно, ручное тестирование остается важным элементом разработки, но тестировщики не могут держать сотни или тысячи сценариев, которые нужно пройти перед релизом или запуском новой фичи. Так где нам получить гарантии, что ключевые сценарии приложения работают корректно? Автоматическое тестирование.

Всем привет! Меня зовут Миша, работаю фронтэнд‑разработчиком в VK в команде Облака Mail.ru, и я хочу разобрать различные виды тестов, дать их сравнительный анализ и применимость. Сразу скажу, тут не будет практики написания тестов. Потому что это нереально сделать внутри одной статьи, необходимо разобрать: теорию тестирования, классов эквивалентности, различие подходов/методов к тестированию, комбинаторику состояний, правильное использование моков и стабов, понимание чистых функций, знание архитектуры приложения. Поэтому предлагаю сконцентрироваться на видах тестирования и начать с «идеального теста».

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

PHP и Laravel дайджест новостей за январь 2024 года

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

Всем привет! Краткий обзор новостей из мира PHP и Laravel за январь 2024 года от Сергея Пантелеева и Данила Щуцкого (CutCode).

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

Как выдавать бесплатные SSL сертификаты с помощью certbot, Nginx и Docker

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

Всем привет! Одна из моих рутинных задач - это подъем новых проектов и микросервисов в облаках. Для этого практически всегда нужны домены и поддомены с наличием SSL сертификата. У меня выработался подход, с помощью которого я автоматизировал процесс выдачи сертификатов с помощью certbot. О чём и хочу рассказать.

Читать далее
Всего голосов 18: ↑15 и ↓3+12
Комментарии27

Web Application and API Protection (WAAP): эволюция WAF (Web Application Firewall)

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

WAAP (Web Application and API Protection) является брандмауэром веб-приложений следующего поколения WAF (Web Application Firewall). Термин впервые начал использовать Gartner для описания защиты современных, постоянно меняющихся web-сервисов. Так как в мире CI/CD, динамики и API first компаний, функций традиционного WAF (Web Application Firewall) уже недостаточно.

WAAP - это совокупность методов и технологий, которые используются для защиты веб-приложений и сервисов от атак и уязвимостей. WAAP включает в себя технологии, такие как WAF-NG, сканер уязвимостей, автоматическое обнаружение и блокирование атак 0-дня (в том числе с помощью виртуального патчинга), выявление аномалий с помощью технологий Machine Learning и смарт-капчи.

Читать далее
Всего голосов 29: ↑24 и ↓5+19
Комментарии4

Проект Альфа-Бизнес Mobile Web (веб-приложение), или Что делать если AppStore — всё?

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

Однажды мы решили переработать уже существующий адаптив интернет-банка для юр. лиц, а точнее превратить его в веб-приложение (Mobile Web) используя технологию PWA (Progressive Web App), с помощью которой сайт трансформируется в веб-приложение визуально и функционально. Далее для удобства буду использовать термин Mobile Web.

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

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

VR-тур на A-Frame + React

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

Всем привет! Меня зовут Егор Молчанов, я разработчик в команде CRM для менеджеров ипотечного кредитования в компании Домклик. Хочу поделиться своим опытом создания VR‑тура с помощью фреймворка A‑Frame и библиотеки React. Для этого написал свой небольшой pet‑проект, который мы сейчас разберём.

Читать далее
Всего голосов 24: ↑23 и ↓1+22
Комментарии2
Изменить настройки темы

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