Обновить
60.11

HTML *

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

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

Css «карточки» в динамически генерируемом web документе — моя реализация

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

Карточный вид содержимого вэб страниц - один из довольно популярных уже долгое время.

В данном случае - страница настранивается с бэк-енд админки (Processwire CMS) и потенциально может иметь боковую панель (произвольной ширины), может и не иметь. А возможно в дальнейшем и вторую панель кому захочется прикрутить (old school) на широких экранах.

Главная секция (main content) состоит из наших конструкторских чудо-карточек, о ней то речь и пойдёт.

Читать далее

Flask для начинающих

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

Как начать работать с Flask

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

Вы новичок в программировании и мечтаете о создании собственных веб-приложений? Эта статья — ваш ключ к пониманию Flask, одного из самых доступных и гибких веб-фреймворков на Python. От установки и простых примеров до работы с данными и базами данных — мы покрываем все, что вам нужно для старта.

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

Читать далее

Блокировка рекламы в браузере (User CSS)

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

Поделюсь опытом, как я блокирую рекламу в браузере Chrome (к счастью, мне хватает одного), пользуясь базовыми знаниями HTML/CSS.

Читать далее

<dl> или <table>? Исследуем подходы к представлению пар ключ-значение в HTML

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

Казалось бы, простая задача - сверстать список пар ключ-значение. Бери <div> и делай. Но что, если захотелось подушнить? Этим и займёмся в статье...
Рассмотрим три подхода к решению этой задачи: <div>, <dl>, <dt>, и <dd>, и <table>. Обсудим преимущества, недостатки и примеры.
Цель - помочь выбрать наиболее подходящий подход для конкретной задачи.

Читать далее

Особенности подготовки текстов для правильного воспроизведения в программах для незрячих

Время на прочтение11 мин
Охват и читатели1.7K

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

Когда один из моих коллег потерял зрение, у меня было 10 лет опыта с технологической точки зрения. По возвращении коллеги на работу моей задачей была подготовка для него отчетов о качестве звука в зависимости от используемых каналов связи, моделей телефонных аппаратов, версий программного обеспечения, вариантов используемых кодеков и массы прочих факторов.

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

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

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

Набором этих правил я и хочу поделиться.

Читать далее

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

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

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


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

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

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

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

О выборе CMS для сайтовых дел, кратенький обзор Processwire

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

На днях было появилась нужда - создать сайт новостного типа, и недолго думая приступил к поиску того самого чудо движка (CMS, пардон - за терминологию из 90х) который бы осилил задачу с относительной лёгкостью, но и - как понимаете - был бы достаточно поддерживаем (важно!), стабилен и гибок для других возможных задач (заказов) из будущего.

К авангардной тройке (WP, Joomla, Drupal) не приглянулся по N-ным причинам, но, щас не об этом.

В общем, перебрал всевозможные критерии (внушительный список хотелок :)) - гугл + ИИ в помощь смекалке и, перематывая к результату - остановился на чудо инструменте Processwire (далее PW).

Читать далее ->

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

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

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

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


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

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

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

Browsing Context, WindowProxy, Window

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Что такое Atomic CSS?

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

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

Читать далее

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

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

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

Читать далее

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

Время на прочтение9 мин
Охват и читатели5.5K

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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