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

HTML *

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

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

Как сделать сервисы доступнее для людей с нарушениями зрения. Исправляем 5 самых частых ошибок

Уровень сложности Простой
Время на прочтение 8 мин
Количество просмотров 1.2K
Блог компании Яндекс Веб-дизайн *HTML *Usability *Accessibility *

Всем привет! Меня зовут Юля Долгун, я фронтенд-разработчик из Поиска. Одна из моих задач — поддерживать доступность в поиске по товарам для пользователей с различными ограничениями здоровья.

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

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

Новости

Butterflynet. Обзор приложения с JS на Android

Уровень сложности Средний
Время на прочтение 4 мин
Количество просмотров 1.2K
CSS *JavaScript *HTML *
Из песочницы

Чуть больше года назад у меня появилась идея сделать мобильное приложение, в котором можно будет писать код и смотреть результат прямо «не отходя от кассы». Для реализации такого «механизма» был выбран язык JS и HTML в качестве каркаса для представления. Разработка велась на Xamarin. Давайте посмотрим, что из этого вышло.

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

Вышел Chrome 113

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 8K
CSS *JavaScript *Google Chrome HTML *
Обзор
Перевод

Что вы узнаете:

WebGPU уже здесь, он позволяет использовать высокопроизводительную 3D-графику и параллельные вычисления в вебе.

С помощью инструментов разработчика теперь можно переопределять заголовки ответов сети.

Начинает распространяться First Party Sets, часть Privacy Sandbox, которая позволяет организациям объявлять связанные сайты.

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

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

Webpack. Создание WebP вместе с Jpeg и Png

Время на прочтение 2 мин
Количество просмотров 3.6K
CSS *Клиентская оптимизация *HTML *Сжатие данных *Системы сборки *
Из песочницы

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

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

Истории

Как я написал удобную оболочку над электронным дневником

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 12K
Разработка веб-сайтов *CSS *Python *JavaScript *HTML *
Из песочницы

Статья о том, как я в 15 лет облегчил работу с электронным дневником, представленным Кировской области в 2022 году.

Что получилось сделать и как это было реализовано.

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

Интересные трюки HTML, CSS и JS

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 12K
Блог компании RUVDS.com CSS *JavaScript *HTML *Браузеры
Туториал

Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.

Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.
Читать дальше →
Всего голосов 55: ↑52 и ↓3 +49
Комментарии 17

Веб-разработка: 15 материалов для самостоятельного изучения

Время на прочтение 4 мин
Количество просмотров 14K
Блог компании Яндекс Практикум Разработка веб-сайтов *CSS *JavaScript *HTML *

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

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

Фичи WebKit в Safari 16.4

Уровень сложности Простой
Время на прочтение 21 мин
Количество просмотров 2.7K
CSS *JavaScript *Safari HTML *
Обзор
Перевод

Сегодня мы рады рассказать вам о многочисленных дополнениях к WebKit, которые включены в Safari 16.4. Этот выпуск содержит 135 новых веб-функций и более 280 обновлений. Давайте посмотрим.

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

ARRS // Нам нужна ваша помощь

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 2.7K
Криптография *Data Mining *HTML *Киберпанк
Из песочницы

Русскоязычное Комьюнити Escape From Tarkov обращается к дешифровщикам и криптографам за помощью в дешифровке изображений из игры альтернативной реальности ARRS терминал.

Текущий процесс дешифровки силами энтузиастов из комьюнити зашёл в тупик.

Что такое ARRS?
Всего голосов 13: ↑12 и ↓1 +11
Комментарии 8

Этот смартфон должны были выдавать выпускникам курсов JavaScript — смотрим на Alcatel Fire E на базе FireFox OS

Уровень сложности Средний
Время на прочтение 9 мин
Количество просмотров 3.2K
Блог компании Timeweb Cloud Веб-дизайн *HTML *Гаджеты Смартфоны
Обзор
image

Веб-технологии давно и прочно вошли в нашу жизнь. Мы каждый день пользуемся уже ставшими привычными нам сервисами вроде социальных сетей или новостных сайтов. Браузер стал неотъемлемой частью современного смартфона, а некоторые приложения и вовсе полностью «переехали» в браузер, получив название PWA, хотя подавляющее большинство приложений всё ещё остаются нативными. Ребята из Mozilla как-то раз подумали: «отдельные PWA приложения это, конечно, круто, но почему бы не сделать мобильную систему, которая построена практически полностью на веб-технологиях?». И таки умудрились сделать, дав ей имя — FireFox OS(B2G), предназначенная для бюджетных смартфонов! Сегодня мы с вами: узнаем, что же это за ОС такая, что у неё под капотом и проверим, на что она способна в 2023 году. Встречаем — Alcatel OneTouch Fire E!
Читать дальше →
Всего голосов 30: ↑29 и ↓1 +28
Комментарии 13

Два прихлопа, два притопа: как я делал раннер со звуковым управлением на JS

Уровень сложности Простой
Время на прочтение 11 мин
Количество просмотров 1.2K
Блог компании Леруа Мерлен CSS *JavaScript *HTML *TypeScript *
Кейс

Привет, Хабр! Как-то раз после работы мне захотелось взять и написать небольшую компьютерную игру. А почему бы и нет? Играть я люблю, программировать — тоже. Захотелось проверить, можно ли сделать что-то прикольное на уровне современных AAA-игр, не изучая дополнительных языков программирования, а также избежать банального повторения тех же «велосипедов», которые уже 100500 раз выложены на различных стримах и, конечно, не раз разбирались на Хабре. В этом посте я хотел бы поделиться с вами своим небольшим экспериментом в области GameDev на базе JS и обсудить возможности, которые есть у любознательного программиста с бэкграундом в сфере JavaScript.

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

Работа с размерами изображений с помощью класса Uri в Joomla 4

Уровень сложности Средний
Время на прочтение 5 мин
Количество просмотров 477
CMS *Разработка веб-сайтов *PHP *HTML *Joomla *
Туториал

Парадокс, конечно, но это возможно. Казалось бы, причем тут класс ядра для работы со строками url. Но именно он может помочь нам в Joomla 4. Статья о том, как автоматически определять размеры файлов изображений для атрибутов width и height с помощью ядра Joomla 4 и не грузить сервер.

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

Конец тирании Outlook: HTML в почте без таблиц

Время на прочтение 9 мин
Количество просмотров 3.2K
Мессенджеры *CSS *HTML *
Перевод

Первый пункт руководства по разработке электронной почты MailChimp гласит: «Кодируйте всю структуру при помощи элемента table». В рекомендациях Cerberus (вероятно, самого популярного шаблона HTML-писем) говорится: «В случае сомнений встройте ещё одну таблицу». Прогресс не дошёл даже до структур на основе float. Кодинг электронной почты — это коллекция обходных путей, хаков и устаревших неподдерживаемых HTML-элементов.

Он долго был Диким Западом несогласованности, для решения задач на котором требовались тайные знания. Изучив таблицу поддержки на сайте look Can I Email (это аналог Can I Use для электронной почты), ты понимаешь, что клиенты электронной почты очень сильно различаются. Создание электронного письма для Apple Mail, Hey, Fastmail, Outlook for Mac, Proton Mail или Mail.ru не сильно отличается от кодинга современной веб-страницы. Однако, например, Yahoo Mail даже не поддерживает фоновые градиенты. Но гораздо сильнее, чем какой-либо иной клиент, электронной почте не давал вырваться из прошлого Outlook для Windows.
Читать дальше →
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 5

Гипертекстовое чтиво. Жанр литературы, который предопределил Интернет

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 2.6K
Блог компании М.Видео-Эльдорадо HTML *Профессиональная литература *История IT Научно-популярное
Ретроспектива

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

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

Интересно то, что идея гипертекстовой литературы появилась задолго по изобретения первых гиперссылок. Литературовед Ролан Барт в своей книге S/Z описывает тип письма, в котором «сетей много и они взаимодействуют», где «у неё нет начала» и где «читатель получает к ней доступ через несколько входов, ни один из которых не может быть главным». Очевидно, он описывает текст, функционирующий так же, как Интернет. Однако есть один нюанс: S/Z был написан более чем за десять лет до того, как был изобретён первый персональный компьютер.
Читать дальше →
Всего голосов 43: ↑41 и ↓2 +39
Комментарии 11

Как работает веб-браузер (с картинками)

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 19K
JavaScript *Программирование *HTML *Браузеры
Из песочницы
Перевод

Браузеры стали частью нашей повседневной жизни. Но задумывались ли вы когда-нибудь о том, как они на самом деле работают?

Эта статья приоткроет завесу магии, скрывающуюся за кулисами веб-браузеров.

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

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

CSR, SSG, SSR — про рендеринг приложений на примерах

Уровень сложности Простой
Время на прочтение 12 мин
Количество просмотров 5.5K
Блог компании Альфа-Банк Разработка веб-сайтов *JavaScript *HTML *ReactJS *
Туториал

Всем привет, меня зовут Хаджимурад, занимаюсь фронтенд разработкой уже 3,5 года и за это время успел поработать на многих проектах: интернет магазин, панели администрирования, проекты для университета. Сейчас работаю на проекте в банке и сегодня хочу поделится с вами своим опытом.

В статье на примере простого сайта, постараюсь описать три способа рендеринга приложений, раскрыть их плюсы и минусы, и на практических примерах провести сравнение производительности и размеров приложения. Материал больше подойдёт начинающим фронтенд-разработчикам, или тем, кто хочет познакомиться c CSR, SSG и SSR. Для лучшего понимания от вас потребуются начальные знания React, менеджеров пакетов npm или yarn.

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

JavaScript. Работа с буфером, Ctrl+C Ctrl+V

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 2.7K
Разработка веб-сайтов *JavaScript *HTML *
Туториал

Как копировать в буфер картинки. Какие типы данных можно класть в буфер. Поддержка кастомных типов. Как сделать свои кнопки копировать/вставить.

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

Создание карты потоков с помощью JavaScript: пошаговое руководство

Уровень сложности Средний
Время на прочтение 16 мин
Количество просмотров 4.9K
Блог компании RUVDS.com CSS *JavaScript *HTML *Графический дизайн *
Перевод

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

В текущем руководстве мы познакомим вас с процессом создания карты потоков. А чтобы сделать этот процесс более практичным, мы используем пример визуализации количества студентов из Индии, обучающихся в разных странах. Следуя этому руководству, вы научитесь создавать собственные карты потоков с помощью JS для любых видов данных.
Читать дальше →
Всего голосов 37: ↑36 и ↓1 +35
Комментарии 0

Пишем свой мессенджер на PHP

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 3K
Мессенджеры *PHP *JavaScript *HTML *
Туториал
Из песочницы

Пишем свой Мессенджер на PHP через WebSocket. Так и для Начинающих так и далёких от IT людей.

Тут вы узнайте как установить PHP, WebSocket и в чём его различие с AJAX (http) запросами как написать сервер и клиент Мессенджера полностью.

Читать далее
Всего голосов 12: ↑4 и ↓8 -4
Комментарии 11

Советы по веб-разработке, которые я дал бы себе 2 года назад

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 9.5K
Разработка веб-сайтов *HTML *Карьера в IT-индустрии
Из песочницы

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

Узнать больше
Всего голосов 17: ↑3 и ↓14 -11
Комментарии 9

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