Обновить
3
0
Олег Бубнов@bubn0ff

Frontend-developer

Отправить сообщение

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

Время на прочтение7 мин
Просмотры4.8K

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


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

  • к чему приводят распространённые ошибки с элементом <label>;
  • лучший лайфхак с inputmode="numeric" улучшающий мою жизнь;
  • как пользователи скринридера понимают, что модальное окно открыто.

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

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

«Кем я стану, когда вырасту?» Что делать, если вам 30+ и вы до сих пор не знаете, какое дело вам по душе

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

Есть счастливчики, которые с детства знают, кем станут, а есть люди, которые никак не могут определиться, кто они. Они находятся в вечном поиске себя, пробуют то одно, то другое, но никак не могут утвердиться в своем выборе, и это создает им кучу проблем. Что стоит за этим страхом самоопределения?

Читать далее

Современные команды и фичи Git, которыми стоит пользоваться

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

Мы, разработчики ПО, пользуемся git каждый день, однако большинство из нас применяет только самые основные команды, например, addcommitpush и pull, как будто на дворе по-прежнему 2005 год.

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

Читать далее

Как в git работает HEAD

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

Недавно я провела в Mastodon опрос о том, насколько мои читатели уверены в том, что они хорошо понимают работу HEAD в Git. Результаты (на основании примерно 1700 голосов) меня немного удивили:

10% — 100%

36% — достаточно сильно уверен

39% — уверен в некоторой степени

15% — представления не имею

Меня удивило, что люди не уверены в своём понимании: я-то считала, что HEAD — это довольно простая тема.

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

Читать далее

Сборка мусора в V8

Время на прочтение19 мин
Просмотры7.6K

В этой статье мы детально разберем процесс сборки мусора движком V8. Познакомимся с понятиями поколений, Minor и Major Garbage Collection, посмотрим, как аллоцируются, трассируются и маркируются объекты в памяти. Что происходит с пустыми областями после очистки, и как выполняется сборка мусора в фоновом режиме. 

Читать далее

Надежный обход блокировок в 2024: протоколы, клиенты и настройка сервера от простого к сложному

Уровень сложностиСредний
Время на прочтение46 мин
Просмотры382K

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

Вы, наверняка, помните отличный цикл статей на Хабре в прошлом году от пользователя MiraclePtr, который рассказывал о разных методах блокировок, о разных методах обхода блокировок, о разных клиентах и серверах для обходов блокировок, и о разных способах их настройки (раз, два, три, четыре, пять, шесть, семь, восемь, десять, десять, и вроде были еще другие), и можете спросить, а зачем еще одна? Есть две основные причины для этого.

Читать далее

Как я склеил картон и продал на маркетплейсах на 50 млн в год

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

В 2020-м мой работодатель начал прижимать меня по условиям, я забрал команду, снял склад и запустил свое производство когтеточек. Казалось бы, ничего сложного: закупаешь клей, картон, и находишь людей, которые 5 000 раз в день готовы повторять одни и ту же операцию. Но есть нюансы.

Читать далее

Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано

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

Привет! Меня зовут Егор Стеблин, я фронтенд-разработчик отдела спецпроектов в KTS.

В статье расскажу и покажу, как сверстать письмо, чтобы оно наверняка правильно отображалось во всех почтовых клиентах — особенно в Outlook, который до сих пор возглавляет подборки по популярности в РФ.

В конце — пример целого письма в HTML.

Читать далее

CSS для печати на бумаге

Время на прочтение10 мин
Просмотры16K

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

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

Читать далее

Ловкость рук, четкость алгоритма и никакого мошенничества: чек-лист для дизайнеров интерфейсов и фронтенд-разработчиков

Время на прочтение10 мин
Просмотры14K

Привет, Хабр! Меня зовут Даша, я проектировщик интерфейсов в Selectel.

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

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

Шаги, примеры оформления и полезный шаблон ищите под катом. Рассчитываю, что текст будет полезен джунам и мидлам как в дизайне, так и во фронтенд-разработке.
Читать дальше →

Установка и настройка tor в Linux Mint

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

Предположим, что вы захотели получить информацию с сайта расположенного на домене onion. В общем-то, ничего особенного в этом нет. Даже, в какой-то мере проще, чем в клирнете. Все потому, что здесь используется очень мало скриптов. А следовательно, к особым ухищрениям для парсинга страниц можно не прибегать без необходимости. Вот только туда еще нужно попасть. И с помощью простого requests сделать этого не получиться. Немного покопавшись в Интернете я нашел решение, которое пока работает.

Читать далее

Автоматизируем сборку и деплой приложения в GitLab CI/CD: подробное руководство с примерами

Уровень сложностиПростой
Время на прочтение22 мин
Просмотры45K

При разработке приложений рано или поздно наступает момент, когда заниматься развёртыванием вручную становится затратно и неудобно. Как следствие на помощь приходит автоматизация этого процесса с помощью специально настроенных пайплайнов непрерывной интеграции и непрерывной доставки (Continuous Integration & Continuous Delivery — CI/CD). Для разных систем управления репозиториями исходного кода существуют свои способы настройки CI/CD.

В этой статье мы рассмотрим, как использовать GitLab для организации автоматической сборки и деплоя приложения в кластер Kubernetes. Сам кластер работает под управлением Deckhouse Kubernetes Platform, а автоматизировать процесс будем с помощью werf — Open Source CLI-утилиты, организующей полный цикл доставки приложения в Kubernetes и использующей Git как единый источник истины для состояния приложения, развёрнутого в кластере.

Читать далее

Figma закрыла Dev Mode: пути обхода и их краткий обзор

Время на прочтение5 мин
Просмотры50K

В июне 2023 года Figma выпустила масштабное обновление: появился режим разработки Dev Mode. Эта функция обеспечивает плавный переход от дизайна к разработке. Такое новшество сразу же пришлось по душе многим. Однако совсем недавно пропала возможность пользоваться режимом бесплатно. Как быть и какие есть альтернативы — рассказываем под катом!
Читать дальше →

Гайд по микрофронтендам на single-spa, или Как уже наконец-то уйти от монолита во фронтенде

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

Привет, Хабр! Меня зовут Данил, я Frontend-разработчик в Samokat.tech. Недавно мы с командой распилили монолит на Angular и перешли к микрофронтендам на Vue. 

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

Читать далее

Неочевидные моменты TypeScript и способы их решения

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

Разрабатывая на TypeScript, можно столкнуться с ситуациями, в которых код будет работать не так, как ожидается. В статье разберем несколько таких моментов. Часть просто придется иметь ввиду, часть решается обновлением, а часть исправляется – обо всем по порядку.

Если вам будет удобно сразу же проверять каждый пример, читая статью, можно это делать в редакторе. Он удобен тем, что версию TypeScript в нем можно переключать.

Читать далее

Построить топологию и проверить отказоустойчивость: подборка open source решений для эмуляции сетей

Время на прочтение6 мин
Просмотры17K

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

Читать далее

Собираем «Тревожный чемоданчик». Мнение спортивного туриста

Время на прочтение18 мин
Просмотры221K
Когда началась война, все произошло так быстро, что я не могла ни понять, что происходит, ни подумать о том, что хотела бы взять с собой, когда мы убегали. (из интервью сирийской беженки)

Мне почему-то не хочется делать вид, что ничего не происходит. Потому что нынешняя военная эскалация напоминает затишье перед бурей, похожие ощущения были в январе 2020, когда «коронавирус же не у нас, он в Китае». В итоге жизнь подтвердила несостоятельность подобного «психологического» трюка. Поэтому, думая про худшее и надеясь на лучшее, я написал недавно эмоциональную заметку про «тревожный чемоданчик». Написана она с учетом моего опыта спортивного туризма (инструктор гор/пеш), поэтому профессиональные военным (выживальщикам?) просьба отнестись с пониманием. Писалось с акцентом на беларускую аудиторию, и вот искренне надеюсь, что (НЕ) пригодится всем. Просьба не политизировать данную статью, а воспринимать as is. Те кто затевает войны — Хабр не читают. Мы все в одной лодке, надеюсь написанное под катом хоть немного поможет этой «лодке» быть на плаву…


Собираем тревожный чемоданчик вместе

Типизированные CSS переменные с @property

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

Типы CSS - это достойное вложение в безопасность типов при работе с внешним интерфейсом. Мы все еще ожидаем кроссбраузерности, но мы к этому придем ? .

Читать далее

Простые правила при работе с растровыми изображениями на каждый день

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

Привет, меня зовут Денис, я руковожу направлением разработки в Домклик. Дополнительно несу ношу лидера frontend-направления в нашей компании. Не так давно я отрефакторил систему собеседований для frontend-разработчиков, попутно тестируя технические вопросы на внешних и внутренних респондентах. И пришёл к выводу, что множество мной опрошенных разработчиков, вне зависимости от уровня, не знают или просто не обращают внимание на базовые правила при работе с картинками. В результате на просторах интернета зачастую можно найти изображения размером 200 на 200 пикселей и весом в несколько мегабайтов со смещением макета, столь раздражающим пользователей. Если вам интересно, как практически без вложений улучшить пользовательский опыт, то прошу под кат.

Читать далее

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

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

Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это.


Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности текста, анимации и изображениях. В статье буду использовать опыт моего незрячего знакомого (привет, Илья). Он внёс бесценный вклад. Уверен, что вам будет интересно. Поехали!

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

Информация

В рейтинге
5 701-й
Откуда
Россия
Зарегистрирован
Активность

Специализация

Фронтенд разработчик, HTML-верстальщик
От 150 000 ₽
HTML
CSS
SCSS
JavaScript
TypeScript
React
Redux
Gulp
Webpack
Jest