Как стать автором
Поиск
Написать публикацию
Обновить
67.48

HTML *

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

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

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

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

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

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


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

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

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

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

Оптимизируем шрифты и ускоряем сайт на 5-12%

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

Описываем способы максимально ускорить загрузку шрифтов на сайте.

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

Читать далее

Тесты производительности фреймворка Cample.js. Отчёт № 0

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

В данной статье содержатся тесты фреймворка Cample.js бета-версии 3.2.0-beta.6. Это нулевой отчёт о тестах. По мере изменения результатов фреймворка, возможно, могут выйти ещё несколько отчётов.

Отчёт включает в себя сравнения по скорости с популярными фреймворками и библиотекой, а также сравнение с реализацией на чистом javascript.

Читать далее

Что такое генераторы статических сайтов и почему Astro — лучший фреймворк для разработки лендингов

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

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

Так я познакомился c подходом SSG (Static Site Generation — Генерация статических сайтов), попробовал его в деле, и хочу рассказать о том, что это такое, зачем может понадобиться SSG-фреймворк и почему Astro — лучший выбор для генерации статических сайтов прямо сейчас.

Читать далее

Browsing Context, WindowProxy, Window

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

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

Читать далее

Простейшая игра «Крестики-Нолики» на ChatGPT, зерокодинг

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

В этой статье я расскажу о том, как создать игру "Крестики-Нолики" простыми способами, без необходимости писать код. Для этого я буду использовать нейросеть ChatGPT3.

Читать далее

Как использовать html-элемент <dialog>?

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

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

В своей работе я часто создаю собственные или использую уже готовые UI-компоненты. Проблема с такими компонентами заключается в том, что они часто ограничены определённым фреймворком, и их реализация требует написания сложной нестандартизированной логики. В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().

Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.

Давайте познакомимся с возможностями <dialog> поближе.

Читать далее

Atomic CSS здорового человека. UnoCSS

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

Продолжение перевода статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой рассматривается уже сам UnoCSS.

Читать далее

Atomic CSS здорового человека

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

Перевод статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой обсуждается концепция Atomic CSS, плюсы и минусы Tailwind и Windi CSS

Что такое Atomic CSS?

Для начала давайте дадим правильное определение атомарному CSS. Из этой статьи Джона Полачека:

> Атомарный CSS — это подход к архитектуре CSS, при котором предпочтение отдается небольшим, одноцелевым классам с именами, основанными на визуальной функции.

Читать далее

Ваша емайл-рассылка нуждается в AMP-emails прямо сейчас

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

В данной статье я расскажу про AMP-emails из личного опыта разработки , покажу примеры какие бывают емайлы, как их можно отправлять, в каких областях емайл-маркетинга они могут использоваться. У меня более 4 лет опыта работы с AMP-emails и мне есть чем с вами поделиться

Читать далее

История HTML. Часть 1. Гипертекст и гипермедиа

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

Появления языка HTML, обычно датируют концом 80-х - началом 90-х годов двадцатого века. В этот период свет увидели первые идеи связывания удаленных ресурсов посредством гипертекстовых ссылок, и, как следствие, появилась необходимость удобного и простого способа такие ссылки создавать и добавлять в документ. Но как вообще возникли понятие "гипертекст" и "гипермедиа"? В этом статье мы заглянем еще дальше в прошлое и попробуем проследить путь становления этих терминов от самого их зарождения.

Читать далее

Многооконное веб приложение — решение для перегруженных интерфейсов

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

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

Основа стека React + Redux.

Читать далее

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

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

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

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

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

Tailwind vs BEM — 2 (архитектура)

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

Статья рассматривает возможные задачи верстки на разных проектах и как с ними справляются две разные архитектуры: Tailwind CSS и ванильный CSS + BEM.

Читать далее

Tailwind vs BEM — 1 (сравнение производительности)

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

В этих двух статьях я буду сравнивать TailwindCSS с чистым CSS + BEM. Цель - разобраться что является лучшим решением для хорошей архитектуры приложения. Это не вопрос предпочтений, от этого выбора будет зависеть очень многое на поздних этапах разработки и оно должно быть очень хорошо обосновано. Начну со сравнения производительности. Tailwind позволяет значительно уменьшить размер итогового CSS и тем самым ускорить время отображения страницы. Но это сработает только в том случае, если Tailwind классы будут написаны прямо в HTML коде, а не в виде @apply в CSS. Tailwind уменьшает CSS, но увеличивает HTML. Давайте посчитаем разницу с учетом HTML. Будем сравнивать чистый Tailwind с чистым CSS + BEM.

Читать далее

Сокровища HTML: 7 тегов, которые упростят вам жизнь

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

Все мы знакомы с широко используемыми HTML тегами, такими как <div>, <p>, <a>, и <img>. Однако, существуют HTML - теги, которые могут упростить жизнь, и вместо написания дополнительного кода, выполнят всю работу :)

Читать далее

Один маленький tap для SMS OTP, но гигантский скачок для всего человечества

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

Привет Habr!

Не так давно застал себя врасплох, когда заполнял очередную web-форму, на которой надо было вводить код SMS руками посимвольно! Мелочь, но раздражает. Особенно, когда понимаешь, что современные обозреватели сами проделают всю работу – просто удели немного времени и пользователи не будут испытывать не нужный негатив.

Почему до сих пор хватает ресурсов на просторах рунета, где подобные вещи надо исполнять не в один “tap”? (речь про мобильные сайты)

Свято верю в то, что наш коллективный разум найдет-таки возможность достучаться до тех, кто еще не встал на путь истинный по данному вопросу. Возможно, это ваш сосед по лестничной клетке, или коллега из соседнего департамента, который заведует web-формой, которой пора уже выйти на “новый уровень” ?. Я и у себя в “хозяйстве” нашел подобное. Чего греха таить? – исправляемся.

Давайте по классике - лучше один раз увидеть. На скринах ниже показал несколько наглядных примеров из жизни о том, как браузеры могут отобразить на экранной клавиатуре код из SMS – нажми на него один раз и о чудо, весь код оказывается в нужном месте в нужное время. Уровень напряга 0%.

Читать далее

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

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


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


Сегодня уже будет не только HTML и CSS. В некоторых кейсах мы будем использовать ARIA-атрибуты. Я расскажу:

  • как мы незаметно потеряли пользу элементов <section> и <form>;
  • как атрибут tabindex запутывает незрячего пользователя;
  • почему визуально скрытые элементы — проблема современных интерфейсов;
  • что делать с паттерном «Звёздочка» для обязательных полей.

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

Читать дальше →

Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика

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

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

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

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

Ну что, поехали!

Читать далее

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

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

Начиная с Chrome 104 для вновь созданных или обновленных файлов cookie с указанием даты истечения срока действия действует ограничение - не более 400 дней. Теперь это ограничение будет применено к уже хранящимся файлам cookie задним числом.

После первого запуска Chrome 119+ и однократного переноса базы данных срок действия этих файлов будет ограничен до 400 дней. Влияние этого изменения пользователи смогут ощутить не ранее чем через 400 дней после выхода Chrome 119, и то только для существующих файлов cookie, которые не были обновлены за это время.

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

Читать далее