CSS *

Краткий обзор о том, как изменять внешний вид сайтов - на вашей стороне. Это уже давно можно, называется userstyles - написано для тех, кто еще не знает этого.

Предисловие

Простой python-cкрипт для парсинга спортивной статистики по баскетболу с популярного сайта

В разговорах людей, интересующихся доступностью, часто можно услышать слово «Роль». Так, что это такое? Это специальная форма представления элемента для скринридера. Устанавливается она с помощью атрибута role. Сегодня поговорим о нем.

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

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

Всем привет!

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

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

Погнали!

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

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

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

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

Задался я как-то вопросом собрать GPS-ошейник для шерстяного спутника моей жизни, дабы этот кракен сухопутный мог бороздить лесные просторы без особого ущерба для моей нервной системы. Собрать саму “шайтан-машинку” планирую на двух ESP32, двух GPS-модулях NEO-6M и Lora-модулях E22 для дальней связи, чтобы работало везде, всегда и безотказно.

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

И вот, я решил поделиться тем, что нашёл, вразумил и применил.

Небольшая сводка ошибок которые встречались во Frontende и Вёрстке за время работы с разными проектами. Конечно это очень малая часть и только те ошибки которые постоянно повторяются. Но всё же давайте пробежимся хотя бы по ним.
Мб кому-то этого и не хватало))

Привет, Хабр! В этом посте делюсь опытом разработки на Svelte, демонстрируя это на моем пет-проекте.

Код проекта: GitHub
Лайв демо: ivan-sem.com

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

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

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

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

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

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

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

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

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

Привет! Меня зовут Михаил, я Senior Software Developer в YouHodler.

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

Для того чтобы упростить восприятие данных в интерфейсе используются инструменты, вроде графиков и диаграмм. Но используя такие элементы практически сразу встает вопрос, а в какие цвета красить тренды графиков и столбики в диаграммах?
Эта статья поможет вам решить эту проблему.

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

Хочу рассказать о своём новом (хотя существует уже почти 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) состоит из наших конструкторских чудо-карточек, о ней то речь и пойдёт.

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

Добрый день. Меня зовут Тимофей, я фронт-тимлид в диджитал-продакшене ДАЛЕЕ. В данном цикле статей я поделюсь подходами и инструментами фронтенд-разработки на аутсорсе, которые помогут создать качественный продукт без кошмарного instant-legacy и значительно облегчат жизнь команде разработчиков и не только.

Расскажу, почему не стоит излишне усложнять архитектуру фронтенда, и дам примеры удобных и эффективных инструментов разработки с точки зрения DX (developer experience. Это важно) и дальнейшей поддержки.