Рубрика «html»

в 8:01, , рубрики: android, bodyawm_ништячки, css, Firefox, html, html5, JS, kaios, linux, nobby, nobby 240 lte, ril, timeweb_статьи, UNIX, гаджеты, ништяки, ОС, Программирование, смартфоны, фреймворки
image

Друзья! Много ли платформ вы знаете, где для написания пользовательских приложений используется стек… веб-технологий, причём это единственный нативный способ писать программы? Услышав о HTML5 + CSS + JS, на ум приходит разве что webOS — которая используется в современных телевизорах от LG (а ранее использовалась ещё и в Palm Pre — уникальный смартфон, единственный в своём роде), а олды вспомнят ещё и про FireFox OS, в которой вся оболочка (включая многозадачность, шторку уведомлений и все приложения) также была реализована на JS. Но ни webOS, ни FFOS в своё время не суждено было стать массовыми ОС на смартфонах: сказывались аппаратные ограничения устройств, да и проблемы с портированием уже существующих приложений с других платформ (например, игр). Однако несколько лет назад, проект FireFox OS был форкнут и на свет появилась новая система, предназначенная для… умных кнопочных телефонов с LTE! И имя ей — KaiOS. Вероятно, многие мои читатели слышали о ней и о новых умных кнопочниках от Nokia. Но что из себя представляет система под капотом и чем она может быть интересна гику? Читайте в новом материале!Читать полностью »

в 9:00, , рубрики: accessibility, html, ruvds_статьи

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

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

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

  • К чему приводят распространённые ошибки с элементом <label>;
  • Лучший лайфхак с inputmode="numeric" улучшающий мою жизнь;
  • Как пользователи скринридера понимают, что модальное окно открыто.

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

Читать полностью »

в 12:05, , рубрики: css, html, selectel, деплой, объектное хранилище, сайты
Деплоим сайт в облако за рубль в месяц - 1

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

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

Привет! Меня зовут Саша, в этой статье я расскажу, как задеплоить в облако статический веб-сайт с помощью объектного хранилища стоимостью около 1₽/мес. А также — настроить красивый домен. Подробности под катом.Читать полностью »

в 9:00, , рубрики: alpine, css, gsap, html, HTML First, hyperscript, JS, JSSS, Netscape Navigator, pwa, React, ruvds_статьи, svg, Svija Vibe, Tachyons, Tailwind, wasm, webassembly, костыли, чистый код
Костыли из 90-х и принцип HTML First - 1
Кадр из презентации Frontmania 2022: Kilian Valkhof — Stop using JavaScript for that

Недавно на Хабре публиковался перевод статьи «Вам не нужен для этого JavaScript» с примерами, где код JS легко заменить на HTML.

На самом деле возврат к основам HTML, простым сайтам и читаемому коду без сложных фреймворков — довольно популярная идея. Сейчас всё больше сайтов создаётся по принципу HTML First.
Читать полностью »

в 9:00, , рубрики: accessibility, css, html, ruvds_статьи

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

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

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

  • Какое количество символов следует использовать для текста подсказки для атрибута alt;
  • В чём польза атрибута lang;
  • Почему использование текстовых символов для декоративных задач — это плохая идея;
  • Для чего существует режим повышенной контрастности.

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

Читать полностью »

в 12:31, , рубрики: html, javascript, web-разработка

Расскажу Вам о том, как использовать чудо-юдо под названием "Кастомные HTML-теги" понятным языком.

Предисловие

Причины создания данной статьи таковы:

  • Никто, за редчайшими исключениями, не использует кастомные теги, не говоря уже про их API. А очень зря.

  • Почти весь материал по ним либо на английском языке, либо написан так, что лучше бы не писали. А иногда и то и другое.

Я попробую изложить суть кастомных html-элементов наиболее доступно.

Просто используйте их!

<div class='my-block' data-block-number="15">
  <div class='my-block__header'>
    <span class='my-block__title'>Заголовок</span>
  </div>

  <div class='my-block__main my-block__main--smaller'>Читать полностью »

в 9:00, , рубрики: accessibility, css, html, ruvds_статьи

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

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

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

  • Как сверстать поиск, чтобы им мог воспользоваться пользователь скринридера;
  • Чем полезно свойство outline-offset;
  • Зачем вам нужно использовать медиа-функцию prefers-color-scheme;
  • Где должен находиться заголовок в разметке блока с новостью.

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

Читать полностью »

в 13:00, , рубрики: accessibility, html, ruvds_переводы, доступность сайта, интерактивный дизайн, специальные возможности, формы

Вам не нужен для этого JavaScript - 1


Прошу вас не возмущаться названием статьи. Я не ненавижу JavaScript, я люблю его. Ежедневно я пишу на нём кучу кода. Но ещё я люблю CSS и даже люблю JSX HTML. Я люблю все эти три технологии по причине, которая называется…

▍ Правило наименьших полномочий

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

В случае веба это означает, что нужно по возможности выбирать HTML вместо CSS, а затем CSS вместо JS. JS — самый универсальный язык из всех трёх, потому что на нём вы описываете, как должен вести себя браузер; но также он может ломаться, отказываться загружаться, требует дополнительных ресурсов для скачивания, парсинга и исполнения. Кроме того, при его использовании очень легко ограничить доступ пользователей, выполняющих браузинг при помощи клавиатуры или специальных возможностей.

В отличие от JS с его императивностью, HTML и CSS декларативны. Вы говорите браузеру, что делать, а не как это делать. Это значит, что браузер сам выбирает, как это делать, и может сделать это наиболее эффективным образом.

Так как функции HTML и CSS обрабатываются браузером, они могут быть более производительными, более нативными, более адаптируемыми к предпочтениям пользователя и в общем случае иметь бОльшую accessibility. Это не значит, что так будет всегда (особенно когда дело касается accessibility), но когда все сложные задачи берёт на себя браузер, от этого обычно выигрывают конечные пользователи.Читать полностью »

в 9:00, , рубрики: css, html, NoPaste, ruvds_статьи, Textarea Cache, Total Blocking Time, Википедия, время загрузки, делегирование событий, оптимизация JS, оптимизация сайта, опциональные теги

Интересные трюки HTML. Экстремальный минимализм - 1


Мы уже много говорили про оптимизацию сайтов до минимального размера, преимущества статичного HTML, а также упаковку сайта (и веб-сервера) в портативный формат одного исполняемого файла, который нативно исполняется под любой ОС.

Но стремление к минимизации может пойти дальше, если вы хотите поместить весь сайт в адресную строку браузера. А с помощью сокращателя ссылок даже большой сайт сжимается до восьми байт. В этом случае и хостинг не нужен (то есть роль хостинга выполняет сервис сокращения ссылок).
Читать полностью »

в 10:49, , рубрики: charts, color, css, hsl, html, statistics

Однажды в погоне за дешёвым дофамином наткнулся в ленте Твиттера на интересную инфографику, сразу начну с нее — вот она:

Спектр цветов окружающих нас предметов, Science Museum Group Digital Lab

Спектр цветов окружающих нас предметов, Science Museum Group Digital Lab

Ниже стояла ссылка на статью-источник — делюсь и ейЧитать полностью »

123...1020...151
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js