Скотт О'Хара написал статью про деактивацию ссылок с учётом вопросов доступности — "Disabling a link".

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

Полностью отключить ссылку можно удалением атрибута href. После удаления href скринридеры не будут считать ссылку ссылкой, поэтому нужно добавить role="link". Чтобы скринридеры анонсировали неактивный статус, нужно добавить aria-disabled="true".

В коде деактивированная ссылка с учётом всех требований будет выглядеть так:

<a role="link" aria-disabled="true">
  Learn something!
</a>

#a11y #html

https://www.scottohara.me/blog/2021/05/28/disabled-links.html

#статья #web #css #html #js
Сегодня я хотел бы продемонстрировать вам 7 интересных и малоизвестных советов / уловок, которые возможно помогут вам,возможно нет.

Читать | Зеркало

В поиске лучшего способа балансировки переносов слов

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

Зачем нужна балансировка переносов. Браузеры не заботятся о читаемости текста при переносе слов, поэтому в блогах зачастую можно встретить такие переносы заголовков статей:

Причины отсутствия поддержки AVIF в
Safari

хотелось бы, чтобы текст выглядел так:

Причины отсутствия
поддержки AVIF в Safari

В последнем варианте текст сбалансирован и не отвлекает внимание.

Для решения этой проблемы можно воспользоваться готовыми балансировщиками переноса слов. Есть две популярные реализации: от New York Times и от Adobe. Реализация от Adobe для меня слишком тяжёлая, реализация от New York Times полегче, но она хорошо работает только с небольшими объёмами текста.

Реализация New York Times для небольших заголовков подходит идеально также она работает быстрее балансировщика Adobe благодаря использованию простого алгоритма на базе бинарного поиска. Но у неё есть проблема с видимым сдвигом позиции слов. Дениэл Александерсен в статье про форк балансеровщика от New York Times предлагает скрывать текст заголовка до тех пор, пока не сработает балансировка, но мне это кажется очень хрупким решением. Если по каким-то причинам скрипт окажется сломан, то пользователь не увидит заголовка статьи. Также есть сомнения, что все скринридеры будут хорошо интерпретировать появляющийся из ниоткуда заголовок статьи.

Ещё можно сделать автоматическую вставку <br> в нужном месте разрыва заголовка. На больших экранах заголовки будут выглядеть хорошо, на маленьких экранах в редких случаях перенос будет выглядеть странно:

Использование
SomeNewApi
и
OtherNewApi
в Node.js

Также в стандарте CSS Text Level 4 есть упоминание CSS-свойства text-wrap: balance. Оно было предложено Adobe в 2013 году, и его поддержки до сих пор нет ни в одном браузере.

Сначала хотел использовать форк балансировщика New York Times, но его недостатки перевешивают все преимущества. Возможно, что потом попробую покопать в сторону варианта с <br>, но пока оставлю всё без изменений. Балансировка переноса слов — это коварная штука.

#html #ux #a11y

https://defront.ru/posts/2022/01-january/11-in-search-of-best-line-wrap-balance/

Crafting the Next.js Website.

#article #html #css #js
@thedevs
@thedevs_design

https://thedevs.link/hB2BWF

Introducing the MDN Playground: Bring your code to life.

#article #js #html #css #tools
@thedevs
@thedevs_js

https://thedevs.link/UlFNBn

A blog post with every HTML element.

#article #html
@thedevs
@thedevs_design

https://thedevs.link/gysbfB

🛠 RevealJS — фреймворк для создания презентаций в браузере. Если не хотите писать html и js код, то возможно создание через графический редактор.

🌍 Сайт

Daily Coding #инструменты #javascript #html

SVG Tutorial, learn how to code images in HTML with SVG.

#tutorial #svg #html #css
@thedevs

https://thedevs.link/NXipFA

HTML First, principles to make building web software easier, faster and more inclusive.

#article #html
@thedevs

https://thedevs.link/9MhJrm

🛠 CSS-Tricks — огромный англоязычный ресурс о создании сайтов, о CSS, HTML и JavaScript, а так же обо всем, что неразрывно связано с миром фронтенда.

🌍 Сайт

Daily Coding #инструменты #CSS #HTML #JavaScript

🛠 Toast UI - редактор markdown и WYSIWYG, который позволяет вам легко переключаться между режимами markdown и WYSIWYG во время записи. Он предлагает предварительный просмотр отображаемого HTML-кода в реальном времени, немедленную проверку синтаксических ошибок и синхронизированную прокрутку между режимами markdown и предварительного просмотра. Редактор также поддерживает мощные расширения, такие как средство выбора цвета, блок кода диаграммы, блок кода UML и многое другое.

🌍 Сайт

Daily Coding #инструменты #HTML

🛠 Phaser - быстрый фреймворк с открытым исходным кодом для разработки HTML5-игр для настольных компьютеров и мобильных браузеров. Вы можете создавать игры для iOS, Android и различных нативных приложений. Он имеет удобный для разработчиков API с отличной поддержкой и активно разрабатывается и поддерживается. Недавно была выпущена версия 3.0, которая содержит множество новых функций.

🌍 Сайт

Daily Coding #инструменты #HTML

My favourite colour is Chuck Norris red.

#article #html #css
@thedevs

https://thedevs.link/D7bLeD

📖HTML5 Programming
🖋Neo D. Truman| 2024

Готовы ли вы поднять свои навыки работы с HTML на новый уровень и стать мастером веб-разработки? Ознакомьтесь с книгой "Программирование на HTML5: Основное руководство по HTML5". Эта всеобъемлющая книга дает начинающим и опытным разработчикам знания и опыт работы, необходимые для создания потрясающих веб-сайтов и оптимизации их для обеспечения максимальной видимости и производительности.

💾 Скачать книгу

Daily Coding #книги #HTML

🛠 Framework7 - это полнофункциональный HTML-фреймворк для создания приложений для iOS и Android. Он предлагает простой в использовании JavaScript API и ряд готовых к использованию компонентов пользовательского интерфейса, таких как модалы, всплывающие окна, списки, вкладки, сетки и многое другое. Все стили разделены на небольшие файлы, что позволяет очень легко настраивать элементы вашего дизайна. Более того, фреймворк чрезвычайно легкий, без дополнительных зависимостей или сторонних библиотек.

🌍 Сайт

Daily Coding #инструменты #HTML

📖Отзывчивый дизайн на HTML5 и CSS3 для любых устройств
🖋Фрэйн Б | 2022

Вы фуллстек-разработчик, которому нужно развивать навыки фронтенд-разработки? Или фронтенд-разработчик, ищущий качественный обзор современных возможностей HTML и CSS? А может, вы создаете свой веб-сайт и хотите сделать его отзывчивым? Тогда, эта книга вам просто необходима!

💾 Скачать книгу

Daily Coding #книги #CSS #HTML

🛠 PerfectPixel - это расширение для Google Chrome, которое позволяет накладывать полупрозрачное изображение поверх разработанного HTML-кода и выполнять попиксельное сравнение между ними. Это отличный помощник, если вы хотите безупречно преобразовать PSD в HTML.

🌍 Сайт

Daily Coding #инструменты #HTML

🛠 Единственная цель Minigrid - обеспечить простой способ создания каскадных сеток в стиле Pinterest. Пользователям просто нужно написать простую HTML-разметку и вызвать короткую функцию JavaScript, после чего библиотека создаст адаптивную сетку, которая всегда будет оставаться симметричной на экране любого размера, изменяя порядок своих карточек.

🌍 Сайт

Daily Coding #инструменты #HTML

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

🌍 Сайт

Daily Coding #инструменты #HTML

🛠 CSS-Tricks — огромный англоязычный ресурс о создании сайтов, о CSS, HTML и JavaScript, а так же обо всем, что неразрывно связано с миром фронтенда.

🌍 Сайт

Daily Coding #инструменты #CSS #HTML #JavaScript