HTML *

Мотивация разработчиков библиотек и фреймворков для фронтенда может быть разной. И если вы, являясь таким разработчиком, хотите работать не “в стол” а с расчетом на какое-то признание и пользу для индустрии, вы должны четко понимать, что именно и зачем вы делаете. Если вы хотите сэкономить пользователям пару килобайт трафика или пару миллисекунд отклика - вам будет очень тяжело доказать миру, что ради этого стоит выбрать именно ваше решение. Люди выберут размер комьюнити, богатую экосистему и крупного вендора. Ваш набор аргументов должен быть достаточно веским, чтобы обратить на себя внимание. Сейчас я попытаюсь доказать, что при наличии такого решения как LitElement от гиганта индустрии Google, имеет смысл посмотреть в сторону Symbiote.js.

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

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

Кодировка символов – это про то, как символы которыми мы пишем наши сообщения выглядят в двоичном коде.

В мире существует множество кодировок, но самые популярные из них, это;

ASCII – это самая первая кодировка в мире, она была создана в Америке. Собственно благодаря ей, 8 бит равны 1 байт.

UTF-8, 16 и 32 – данные кодировки были созданы организацией Unicode (Юникод). Если по простому, то они это то же самое что и ASCII, но более вместительные, что означает, что они занимают больше памяти.

Все бы ничего, легкая тема, но есть одно но – кодировка UTF-8 имеет, как по мне, гениальную особенность: она умеет "растягиваться". То есть адаптироваться под большое кол-во символов.

Буквы в нижнем и верхнем регистре содержат одинаковое количество данных — по 1 байту каждая.

Поэтому удивительно, что замена заглавных букв на строчные снижает объём данных.

Пример: я взял главную страницу Hacker News и переписал заголовок каждой статьи, капитализировав только первые буквы в предложениях (sentence case) вместо первых букв во всех словах (title case). Это позволило мне снизить размер на 31 байт.

Sentence case: The cat sat on the mat

Title case: The Cat Sat on the Mat

Как может замена нескольких заглавных букв на строчные снижать объём? Всё дело в сжатии.

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

Хабр, я рассказал вам, как создавать подсказки с помощью атрибута aria-label. Это отличный шаг к классному опыту для пользователей скринридера. А сегодня сделаем второй — мы научимся правильно скрывать элементы. Встречайте, атрибут aria-hidden.

Порою, заходя в стили проектов, я невольно пугаюсь сложившейся длине имён - модуль, блок, элемент, подэлемент, модификатор 1, модификатор 2. Длинные классы увеличивают вес страницы, это в свою очередь означает увеличение времени загрузки самого главного для рендера страницы - документа и файла стилей, от которых напрямую зависят метрики FCP, LCP.

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

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

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

В 2023-ем году мы узнали, что нейросети могут галлюцинировать. На первый взгляд, это довольно забавное и пока что безобидное явление. Но в этой короткой статье я расскажу, как я столкнулся с галлюцинациями самого Google, и как это чуть не угробило стартап, в котором я работаю.

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

Flask для начинающих - Часть 2 создание Веб проекта.

Мы создадим с вами мини проект - веб сайт с админ панелью и обновлением контента сайта. При помощи Python, HTML, CSS, Bootstrap, Flask, SQLite.

Хочу рассказать о своём новом (хотя существует уже почти 3 года) сайте egaxegax.github.io, после закрытия предыдущего сайта egaxegax.appspot.com на хостинге Google App Engine в начале 2021 года. О нём я писал в статье Cайт на Django-nonrel на платформе Google App Engine для Python. Эта статья рассчитана на тех, кто хочет узнать или получить простой сайт с возможностью добавления и правки контента на основе создания markdown-постов.

Фронтенд-разработка — это как собирать лего без инструкции: иногда весело и творчески, но порой ты забираешься на кровать и кричишь: «*@#%*, да где же этот пропавший блок?!»

Каждый новый проект во фронтенде — это как уникальный набор лего, и ты никогда не знаешь, какие интересные вызовы подкинет он на этот раз. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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