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

HTML *

Стандартный язык разметки web-страниц

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

Web Accessibility в рассказе «A11Y от 0 до NaN»

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

Данной статьёй я планирую рассказать про интересные случаи и про то, в каких ситуациях можно оказаться, постигая новые горизонты, но не собираюсь даже пытаться заменить справочники по aria-атрибутам и эталонным примерам доступных компонентов. Стандарт W3C полон полезной информации, которая сдержанно подает только нужное. Я же предостерегу вас от некоторых сомнительных решений, с которыми вы можете столкнуться, и постараюсь приблизить задачу доступности к стандарту, коим для нас сейчас является покрытие тестами и использование анализаторов кода.

Итак, приступим
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 2

Новости

Создаем мини-игру с капельным эффектом и движущимися кружками. Часть 2. Финал

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

Привет, дорогие пользователи мира IT!

В современной веб-разработке существует множество способов сделать ваш сайт интересным и привлекательным для пользователей. И даже используя простые техники можно добиться высоких результатов!

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

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

Очередной ответ на вопрос: «Зачем нужна семантика?»

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

Этот вопрос преследует меня всю мою карьеру, начиная с 2013 года. Одни разработчики отвечают, потому что так правильно. Другие говорят про SEO. Третьи — ничего не говорят. А я считаю, что атрибут role является отличным ответом на этот вопрос!

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

Advanced Custom Fields: Полное руководство

Уровень сложности Простой
Время на прочтение 21 мин
Количество просмотров 920
Обзор
Перевод

Исчерпывающее руководство: особенности, пошаговая установка и обзор пользовательского интерфейса. Узнайте основные термины и типы полей, а также откройте для себя мощные дополнения.

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

Истории

Подключение Twig шаблонов в WordPress: Как избежать конфликтов

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

Twig доступен в виде Composer пакета, но WordPress не имеет встроенного менеджера зависимостей. Его прямое использование может привести к проблемам; узнайте, как безопасно интегрировать его.

Читать далее
Рейтинг 0
Комментарии 0

Создаем мини-игру с капельным эффектом и движущимися кружками. Часть 1

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

Привет, дорогие пользователи мира IT!

В современной веб-разработке существует множество способов сделать ваш сайт интересным и привлекательным для пользователей. И даже используя простые техники можно добиться высоких результатов!

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

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

Как создать сайт на фреймворке Cample.js?

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

В данной статье будет описано небольшое руководство по тому, как создать сайт на таком фреймворке как Cample.js. На момент написания статьи (версия 3.1.1), фреймворк уже более года находится в разработке. За это время был реализован минимальный функционал для создания современных веб-приложений.

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

Что нового в Chrome 117?

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 5.2K
Обзор
Перевод

Что ожидается в статье:

Три новые функции CSS позволяют легко добавлять плавные анимации появления и исчезновения.

Вычисление наборов данных более высокого порядка с помощью группировки массивов.

DevTools упрощает процесс локальных переопределений.

И многое другое.

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

Видеоредактор, работа с видео и зачем там Canvas

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

Современные устройства и браузеры развиваются достаточно быстро, но все-равно этого бывает недостаточно для задач со сложными вычислениями. К таким задачам можно отнести обработку видео.

Одной из задач, где мы в Ozon используем Canvas, является обработка видео. Для это у нас реализован минималистичный видеоредактор. Зачем нужно было делать свой редактор для веба и почему не использовать готовый? Все ответы под катом.

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

Простые правила при работе с растровыми изображениями на каждый день

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 7.9K
Туториал

Привет, меня зовут Денис, я руковожу направлением разработки в Домклике. Дополнительно несу ношу лидера frontend-направления в нашей компании. Не так давно я отрефакторил систему собеседований для frontend-разработчиков, попутно тестируя технические вопросы на внешних и внутренних респондентах. И пришёл к выводу, что множество мной опрошенных разработчиков, вне зависимости от уровня, не знают или просто не обращают внимание на базовые правила при работе с картинками. В результате на просторах интернета зачастую можно найти изображения размером 200 на 200 пикселей и весом в несколько мегабайтов со смещением макета, столь раздражающим пользователей. Если вам интересно, как практически без вложений улучшить пользовательский опыт, то прошу под кат.

Читать далее
Всего голосов 50: ↑46 и ↓4 +42
Комментарии 21

Как HTML и CSS влияют на доступность

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

Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это.


Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности текста, анимации и изображениях. В статье буду использовать опыт моего незрячего знакомого (привет, Илья). Он внёс бесценный вклад. Уверен, что вам будет интересно.

Поехали!

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

Подробная настройка Content Security Policy (CSP)

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

Content Security Policy (CSP) - это механизм безопасности веб-приложений, который используется для сокращения рисков, связанных с атаками, такими как внедрение скриптов (XSS) и выполнение нежелательного кода (инъекция). CSP позволяет веб-разработчикам указывать браузерам, из каких источников разрешено загружать ресурсы, такие как скрипты, стили, изображения, шрифты и другие элементы.

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

Добавьте 𝚍𝚒𝚛="𝚊𝚞𝚝𝚘" к полю ввода

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

Разработчикам, живущим в пузыре под названием «США» трудно воспринимать остальные страны. Но мне очень часто напоминают, что снаружи тоже есть мир. Это введение может показаться похожим на совершенно необязательную мотивационную речь перед изложением чего-то крайне простого, но одна маленькая деталь может стать разницей между тем, что вашим приложением пользуются люди со всего света, или только люди вроде вас. Разницу между этими мирами я постоянно безуспешно пытаюсь осознать; к счастью, те, кто занимается разработкой качественных веб-браузеров, делают за нас всё самое сложное.

С самого начала разработки Standard Notes я получал просьбы о добавлении поддержки языков с написанием справа налево (RTL; это такие языки, как иврит, арабский и урду). И каждый раз, когда я начинал изучать необходимые для этого действия, это казалось нетривиальной задачей.

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

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

SmartDev
Дата 21 сентября
Время 10:00
Место Москва Онлайн
Yandex Scale
Дата 25 – 26 сентября
Время 17:00 – 18:00
Место Москва Онлайн
Битва пет-проектов
Дата 25 сентября – 30 ноября
Место Онлайн
Business&IT Day: Retail CPG
Дата 28 сентября
Время 09:50 – 14:00
Место Онлайн
XIX конференция разработчиков свободных программ «Базальт СПО»
Дата 29 сентября – 1 октября
Время 10:00 – 19:00
Место Переславль-Залесский Онлайн
Kokoc Hackathon
Дата 29 сентября – 1 октября
Время 19:00 – 21:00
Место Онлайн
Ruby Russia 2023 Online
Дата 30 сентября
Время 11:00 – 21:00
Место Онлайн
PG Boot Camp Russia 2023
Дата 5 октября
Время 10:00 – 17:00
Место Москва Онлайн
Joker
Дата 9 – 14 октября
Время 16:00 – 19:30
Место Санкт-Петербург Онлайн
Russia Risk Conference 2023 — 19-я конференция по риск-менеджменту
Дата 25 – 26 октября
Время 10:00 – 19:00
Место Москва Онлайн

Angular в картинках

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

Это визуальная шпаргалка по Angular. Если нужно что-то вспомнить, то достаточно глянуть на нарисованную схему, вместо поиска этой информации в документации. Картинки не просто упрощают сложные вещи — они обогащают ваши воспоминания посредством ассоциативной памяти, позволяя вам уловить больше. Думаю, что эта публикация будет в первую очередь полезна тем, кто уже изучал Angular, но что-то забыл. Так же она должна быть полезна экспертам из схожих платформ разработки, если вдруг им придется столкнутся с Angular. И конечно же картинки помогут новичкам, послужив некой отправной точкой в изучении этой платформы.

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

Рисовал я все это в PowerPoint.

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

Дебаты по Tailwind CSS: ещё один классный инструмент, отвергнутый веб-пуристами

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 4.4K
Обзор
Перевод

Tailwind CSS — как фреймворк для разработчиков довольно прост в понимании. По сути, он позволяет вам встраивать код CSS в ваш HTML код. Чтобы, как говорится в слогане Tailwind: «быстро создавать современные веб‑сайты, не покидая HTML». Таким образом, это избавляет разработчиков от необходимости контекстно переключаться с HTML на таблицу стилей CSS.

Собственная документация Tailwind указывает на распространенное возражение против такого подхода: «разве это не просто встроенные стили?» Те из вас, кто жил в 1990-х годах, наверняка помнят, что когда‑то, еще до того, как произошла революция CSS, им приходилось добавлять разметку стилей в свои HTML‑файлы. Но, по словам Tailwind, его подход «утилитарного класса» предлагает больше функциональности, чем встроенные стили, включая возможность создавать адаптивный дизайн (дизайн, адаптированный для мобильных устройств).

Таким образом, простота использования — особенно по сравнению с кодированием и последующим обслуживанием CSS‑файла — и возможность создавать свой стиль внутри HTML являются основными причинами, по которым многие разработчики любят Tailwind.

В своем посте Мэтт Рикард добавил в качестве ключевых преимуществ фреймворка следующие пункты:

Далее...
Всего голосов 12: ↑10 и ↓2 +8
Комментарии 13

Вышел Chrome 116

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 5.4K
Обзор
Перевод

Традиционный перевод анонса от команды Google Chrome о нововведениях

• Document Picture-in-Picture API

• Улучшена отладка отсутствующих таблиц стилей в DevTools

• Свойство notRestoredReasons

И многое другое!

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

Настройка проекта AstroJS: VS Code, Prettier, ESlint, Stylelint, Tailwind CSS, PostCSS

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

AstroJS изначально был движком для создания статичных сайтов. Теперь там есть работа с API, server-side рендеринг, гибридный режим сервера. Можно написать код сайта в Astro-файлах на обычном html + js, а можно подключить визуальный фреймворк на свой выбор: React, Preact, Vue, Solid, Svelte. Подключаем CMS или backend-as-a-service - вот уже замена именитым NextJS и NuxtJS.

Но перед активной фазой создания сайта давайте потратим 10 минут. Настройка проекта для работы в команде займет каких-то шагов 20...

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

Загрузка файлов и каталогов перетаскиванием с помощью drag and drop JS

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

На многих веб-сайтах есть форма для загрузки файла. Для некоторых сайтов, таких как OneDrive или Google Диск, загрузка файлов является основной функцией. С течением времени веб-страницы становятся все более интерактивными. Таким образом, пользователи ожидают большего количества взаимодействий, таких как перетаскивание файлов или каталогов или вставка скриншотов.

Давайте посмотрим, что предоставляют браузеры для загрузки файлов!

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

Делай так, и твой адаптив болеть не будет

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

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

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

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

ChatGPT уже не тот? Тестируем 10 плагинов для чтения URL и грустим

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

Пользователи новой социальной сети Х говорят, что ChatGPT в последнее время сошёлся с инженером-химиком чудовщино поглупел, теряет пользователей и больше никому не нужен. Это правда так? 

Мы во фронтендерском подкасте «Про код» тоже случайно затронули этот вопрос, но в необычном ключе. Обсуждали пользу alt-текстов для SEO и между делом вспомнили про плагины, с помощью которых ChatGPT умеет читать веб-страницы, а не только постоянно вспоминать свой 2021 и жаловаться.

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

Так что мы решили провести простой тест — скормить нейросети специально сконструированную страницу с alt-текстом и посмотреть, что будет. А так как у ChatGPT вышла масса плагинов для чтения сайтов, то заодно и их протестировать. Спойлер: всё хуже, можно было предположить, но лучик надежды брезжит.

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

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